:root{
  --white: #ffffff;
  --black: #000000;
  --text-dark: #1A1A1A;
  --muted: #666666;

  --red-900: #8B0000;
  --red-700: #FF3B30;
  --red-500: #ff0000;
  --red-300: #ff6b61;

  --orange-700: #ff8c00;
  --orange-500: #ffa500;
  --orange-300: #ffb830;

  --yellow-700: #FFC300;
  --yellow-500: #ffff00;
  --yellow-300: #fff28a;

  --green-900: #004d00;
  --green-700: #008000;
  --green-500: #2ecc71;
  --green-300: #9fe6b2;

  --blue-900: #001f3f;
  --blue-700: #0000ff;
  --blue-500: #007bff;
  --cyan-500: #00ffff;

  --indigo-700: #4b0082;
  --violet-700: #8f00ff;
  --purple-500: #8e44ad;

  --pink-500: #ff69b4;
  --magenta-500: #ff00ff;

  --brown-700: #8B4513;
  --brown-500: #a52a2a;
  --grey-700: #808080;
  --grey-300: #d9d9d9;
  --bg-soft: #FFF3CC;

  --glass: rgba(255,255,255,0.08);
  --card: rgba(255,255,255,0.9);

  --color-primary: var(--red-500);
  --color-primary-strong: var(--red-700);
  --color-accent: var(--purple-500);
  --color-success: var(--green-500);
  --color-warning: var(--yellow-700);
  --color-danger: var(--red-900);
  --color-info: var(--blue-500);

  --radius: 14px;
  --max-w: 1100px;
  --gap: 20px;
  --container-pad: 18px;
}

/* Global reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-w);margin:0 auto;padding:var(--container-pad);} 

/* Page backgrounds */
.page-bg{
  background:linear-gradient(135deg, rgba(255,195,0,0.06), rgba(255,59,48,0.02));
  min-height:100vh;color:var(--text-dark);padding-bottom:40px;
}

/* Header */
.site-header{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;
  background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));backdrop-filter:blur(6px);z-index:50;
}
.logo a{font-weight:700;font-size:1.125rem;color:var(--text-dark)}
.nav{display:none;gap:14px;align-items:center}
.nav a{padding:8px 12px;border-radius:var(--radius)}
.nav .cta{background:linear-gradient(90deg,var(--color-primary),#ff6b61);color:white;padding:8px 14px;border-radius:calc(var(--radius) - 4px)}
.nav-toggle{display:block;background:none;border:none;font-size:20px;cursor:pointer}

/* Nav responsive */
.nav {
  display: none;
  gap: 14px;
  align-items: center;
}
.nav.nav--open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 64px;
  right: 18px;
  background: var(--card);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
  z-index: 60;
  min-width: 220px;
}
.nav.nav--open a { display: block; width: 100%; padding: 10px 12px; border-radius: 8px; }
.nav.nav--open a:hover, .nav.nav--open a:focus { background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02)); }
@media(min-width:900px){
  .nav { display:flex !important; position:static; background:transparent; padding:0; box-shadow:none; gap:14px; align-items:center; }
  .nav.nav--open { display:flex; position:static; box-shadow:none; }
  .nav a { padding:8px 12px; }
  .nav-toggle { display:none; }
}

/* Hero */
.hero{display:flex;gap:var(--gap);align-items:flex-start;flex-direction:column;padding-top:36px;padding-bottom:40px}
.hero-left{flex:1}
.hero-right{width:100%;max-width:320px;display:flex;justify-content:flex-end;align-items:center}

/* Name gradient */
.name-gradient{
  font-size:clamp(28px, 6vw, 48px);margin:0 0 10px 0;background:linear-gradient(90deg,var(--yellow-500),var(--color-primary),var(--purple-500));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:-0.5px;
}

/* Role & location */
.role{font-size:0.95rem;margin:6px 0;color:#333}
.location{font-size:0.9rem;color:var(--muted);margin-bottom:14px}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:var(--radius);font-weight:600;margin-right:10px;box-shadow:0 6px 18px var(--ui-contrast-high);min-height:44px;transition:transform .14s ease, box-shadow .14s ease}
.btn:active{transform:translateY(1px)}
.btn.red{background:linear-gradient(90deg,var(--color-primary),var(--red-300));color:white}
.btn.yellow{background:linear-gradient(90deg,var(--yellow-500),var(--yellow-300));color:var(--text-dark)}
.btn.rainbow{background:linear-gradient(90deg,#ff3b30,#ffb830,#8e44ad,#2ecc71);color:white}

/* Quick links */
.quick-links{margin-top:12px;color:var(--muted);font-size:0.9rem}

/* Profile card */
.profile-card{width:100%;max-width:260px;padding:18px;border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));box-shadow:0 12px 32px rgba(0,0,0,0.08);text-align:center;margin-top:12px}
.profile-card .avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(90deg,var(--yellow-500),var(--color-primary));display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:white;font-size:28px;margin-bottom:12px}
.ribbon{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#ff6b61,#ffd24d);color:#111;margin-top:10px;font-weight:700}

/* Sections */
.section-title{font-size:1.25rem;margin:12px 0 18px 0;background:linear-gradient(90deg,var(--color-primary),var(--yellow-500));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.content-grid{display:grid;grid-template-columns:1fr;gap:18px}
.bullets{list-style:none;padding:0;margin:8px 0}
.bullets li{padding:6px 0}
.skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0}

/* Project cards */
.project-card{background:var(--card);padding:16px;border-radius:calc(var(--radius) - 2px);margin-bottom:12px;box-shadow:0 6px 18px rgba(0,0,0,0.05);transition: transform .18s ease, box-shadow .18s ease}
.project-card .meta{font-size:0.82rem;color:var(--muted);margin-top:8px}

/* Page sections & footer */
.page-section{padding:30px 0}
.site-footer{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.3));position:relative}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:14px}
.contact-card{background:var(--card);padding:16px;border-radius:calc(var(--radius) - 2px)}
.contact-form input, .contact-form textarea{width:100%;padding:10px;margin-bottom:10px;border-radius:10px;border:1px solid #ddd;resize:vertical}
.contact-form label{font-weight:600}

/* small utilities */
.meta{font-size:0.82rem;color:var(--muted)}

/* Color utilities and swatches */
.bg-soft { background: var(--bg-soft); }
.bg-card { background: var(--card); }
.bg-glass { background: var(--glass); backdrop-filter: blur(6px); }
.bg-red { background: var(--red-500); color: var(--white); }
.bg-orange { background: var(--orange-500); color: var(--black); }
.bg-yellow { background: var(--yellow-300); color: var(--black); }
.bg-green { background: var(--green-700); color: var(--white); }
.bg-blue { background: var(--blue-700); color: var(--white); }
.bg-indigo { background: var(--indigo-700); color: var(--white); }
.bg-violet { background: var(--violet-700); color: var(--white); }
.bg-pink { background: var(--pink-500); color: var(--white); }
.bg-brown { background: var(--brown-500); color: var(--white); }
.bg-grey { background: var(--grey-700); color: var(--white); }

.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-muted { color: var(--muted); }

.color-swatch{display:inline-flex;align-items:center;gap:10px}
.color-swatch .dot{width:28px;height:18px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.08);}
.label{font-size:0.85rem;color:var(--muted)}

/* accessibility outline */
:focus{outline:2px solid transparent;outline-offset:2px}
:focus-visible{outline:3px solid var(--color-primary-strong);border-radius:8px}

/* small responsive tweaks */
@media(min-width:900px){
  .content-grid{grid-template-columns:2fr 1fr}
  .nav{display:flex}
  .hero{flex-direction:row}
}
html, body {
  margin: 0;
  padding: 0;
  height: auto !important;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto !important;
}

/* Just in case body-ku fixed potirundha */
body, .page-bg, .internship-bg {
  position: static !important;
}