/* ===================== TOKENS ===================== */
  :root{
    --bg:#0d1117;
    --bg-soft:#0f1420;
    --surface:#161b22;
    --surface-2:#1c2230;
    --border:#252c38;
    --text:#e6edf3;
    --text-dim:#8b949e;
    --blue:#58a6ff;
    --green:#7ee787;
    --purple:#d2a8ff;
    --orange:#f78166;
    --pink:#ff7b9c;

    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;

    --maxw:1140px;
    --radius:14px;
    --ease:cubic-bezier(0.16, 1, 0.3, 1); /* Enhanced for luxury physics */
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
  }
  body.is-loading{overflow:hidden;}
  ::selection{background:var(--blue);color:#0d1117;}

  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

  /* CREATIVE: Scroll indicator bar */
  .scroll-progress-bar {
    position: fixed; top: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
    width: 0%; z-index: 1001;
    box-shadow: 0 0 10px rgba(88,166,255,0.5);
  }

  /* celestial background scene */
  .cosmos-scene{
    position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    background:
      radial-gradient(circle at 15% 18%, rgba(247,129,102,.08), transparent 18%),
      radial-gradient(circle at 82% 14%, rgba(126,231,135,.08), transparent 14%),
      linear-gradient(180deg, rgba(4,10,18,.9) 0%, rgba(13,17,23,.96) 52%, rgba(10,18,30,.98) 100%);
  }
  .starfield{
    position:absolute;inset:-10%;
    background-repeat:repeat;
    opacity:.8;
    will-change:transform;
  }
  .starfield-a{
    background-image:
      radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
      radial-gradient(circle, rgba(88,166,255,.6) 0 1px, transparent 1.8px),
      radial-gradient(circle, rgba(210,168,255,.55) 0 1px, transparent 1.7px);
    background-size:160px 160px, 240px 240px, 320px 320px;
    background-position:10px 18px, 120px 70px, 40px 140px;
    animation:star-drift-a 36s linear infinite;
  }
  .starfield-b{
    background-image:
      radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
      radial-gradient(circle, rgba(126,231,135,.45) 0 1px, transparent 1.7px);
    background-size:220px 220px, 300px 300px;
    background-position:30px 40px, 150px 120px;
    opacity:.45;
    animation:star-drift-b 52s linear infinite reverse;
  }
  .sun-glow{
    position:absolute;top:88px;right:8%;
    width:180px;height:180px;border-radius:50%;
    background:
      radial-gradient(circle at 35% 35%, rgba(255,245,214,.95) 0%, rgba(255,196,90,.92) 28%, rgba(247,129,102,.4) 56%, transparent 74%);
    filter:blur(1px);
    box-shadow:0 0 70px rgba(247,129,102,.26), 0 0 150px rgba(255,196,90,.12);
    animation:sun-pulse 7s ease-in-out infinite, sun-cycle 40s ease-in-out infinite;
  }
  .sun-glow::before,
  .sun-glow::after{
    content:'';
    position:absolute;
    border-radius:50%;
    inset:22px;
  }
  .sun-glow::before{
    background:
      conic-gradient(from 0deg, rgba(255,234,164,.12), rgba(247,129,102,.38), rgba(255,196,90,.18), rgba(255,234,164,.12)),
      radial-gradient(circle at 35% 35%, rgba(255,251,235,.95) 0%, rgba(255,196,90,.88) 34%, rgba(247,129,102,.72) 68%, rgba(160,66,30,.25) 100%);
    box-shadow:inset 0 0 24px rgba(255,245,214,.22);
    animation:sun-spin 12s linear infinite;
  }
  .sun-glow::after{
    inset:8px;
    border:1px solid rgba(255,245,214,.18);
    border-left-color:transparent;
    border-bottom-color:rgba(247,129,102,.28);
    animation:sun-spin 20s linear infinite reverse;
  }
  .moon-orbit,
  .earth-orbit{
    position:absolute;border-radius:50%;
    border:1px dashed rgba(255,255,255,.08);
  }
  .moon-orbit{
    top:42px;left:6%;
    width:140px;height:140px;
    animation:moon-path 22s linear infinite;
  }
  .moon{
    position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    width:28px;height:28px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #ffffff 0%, #e6edf3 48%, #a7b4c6 100%);
    box-shadow:-6px 0 0 rgba(13,17,23,.42) inset, 0 0 24px rgba(230,237,243,.18);
  }
  .earth-orbit{
    right:12%;bottom:14%;
    width:220px;height:220px;
    animation:earth-path 30s linear infinite;
  }
  .earth{
    position:absolute;left:50%;top:-18px;transform:translateX(-50%);
    width:36px;height:36px;border-radius:50%;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 22%),
      radial-gradient(circle at 62% 54%, rgba(126,231,135,.95) 0 14%, transparent 15%),
      radial-gradient(circle at 42% 32%, rgba(126,231,135,.85) 0 12%, transparent 13%),
      radial-gradient(circle at 60% 62%, rgba(88,166,255,.95) 0%, rgba(44,98,186,.95) 72%, rgba(18,40,76,.95) 100%);
    box-shadow:0 0 26px rgba(88,166,255,.2);
  }

  /* dot grid ambient background (Updated for interactive scroll matrix shift) */
  .dotgrid{
    position:fixed;inset:-50px;z-index:0;pointer-events:none;
    background-image:radial-gradient(circle, rgba(88,166,255,0.12) 1px, transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(circle at 50% 30%, black 0%, transparent 75%);
    will-change: transform;
  }

  section{position:relative;z-index:1;}

  @keyframes star-drift-a{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-80px,60px,0);}
  }
  @keyframes star-drift-b{
    from{transform:translate3d(0,0,0) scale(1);}
    to{transform:translate3d(60px,-50px,0) scale(1.04);}
  }
  @keyframes sun-pulse{
    0%,100%{transform:scale(1);opacity:.92;}
    50%{transform:scale(1.06);opacity:1;}
  }
  @keyframes sun-cycle{
    0%{translate:180px 180px; opacity:.45;}
    20%{translate:60px 70px; opacity:.78;}
    50%{translate:-250px -70px; opacity:1;}
    80%{translate:-620px 40px; opacity:.72;}
    100%{translate:-820px 180px; opacity:.38;}
  }
  @keyframes sun-spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes moon-path{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes earth-path{
    from{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
  }

  h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--green);
    display:flex;align-items:center;gap:8px;
    margin-bottom:14px;
    text-transform:none;
  }
  .eyebrow::before{content:'//';color:var(--text-dim);}

  .section-title{
    font-size:clamp(28px,4vw,42px);
    margin-bottom:14px;
  }
  .section-title .accent{color:var(--blue);}
  .section-sub{color:var(--text-dim);margin-bottom:20px;font-size:16px;}

  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-mono);
    font-size:14px;font-weight:500;
    padding:13px 24px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    cursor:pointer;
    transition:transform .25s var(--ease), border-color .25s, background .25s;
  }
  .btn:hover{
    border-color:var(--blue);
    background:var(--surface-2);
    transform:translateY(-2px);
  }
  .btn.primary{
    background:var(--blue);
    color:#04101f;
    border-color:var(--blue);
  }
  .btn.primary:hover{
    background:#79b8ff;
    box-shadow:0 0 24px rgba(88,166,255,.35);
  }

  /* CREATIVE: Cinematic reveal on scroll engine */
  .reveal{
    opacity:0;
    filter: blur(8px);
    transform: translateY(45px) scale(0.97);
    transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
    will-change: transform, opacity, filter;
  }
  .reveal.in{opacity:1; transform:translateY(0) scale(1); filter: blur(0);}
  .reveal-stagger > *{transition-delay:calc(var(--i,0) * 80ms);}

  /* ===================== LOADER ===================== */
  .site-loader{
    position:fixed;inset:0;z-index:2000;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    background:
      radial-gradient(circle at 20% 20%, rgba(88,166,255,.16), transparent 28%),
      radial-gradient(circle at 80% 30%, rgba(210,168,255,.14), transparent 26%),
      linear-gradient(180deg, #09111d 0%, #0d1117 55%, #131b27 100%);
    transition:opacity .65s var(--ease), visibility .65s var(--ease);
  }
  .site-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
  .loader-inner{
    width:min(100%, 760px);
    padding:36px 32px;
    border:1px solid rgba(88,166,255,.18);
    border-radius:24px;
    background:rgba(12,18,28,.82);
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    backdrop-filter:blur(12px);
  }
  .loader-kicker{
    margin-bottom:18px;
    color:var(--green);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .loader-journey{display:grid;gap:16px;}
  .loader-signal-scene{
    position:relative;
    height:128px;
    overflow:hidden;
  }
  .loader-satellite-orbit{
    position:absolute;
    top:10px;left:10%;
    width:110px;height:110px;
    border-radius:50%;
    border:1px dashed rgba(88,166,255,.14);
    animation:loader-satellite-path 10s linear infinite;
  }
  .loader-satellite{
    position:absolute;left:50%;top:-10px;
    width:24px;height:24px;
    transform:translateX(-50%) rotate(18deg);
    filter:drop-shadow(0 8px 14px rgba(88,166,255,.22));
  }
  .sat-body{
    position:absolute;inset:4px;
    border-radius:6px;
    background:linear-gradient(135deg, #f7fbff, #8cbcff);
    box-shadow:0 0 12px rgba(88,166,255,.3);
  }
  .sat-panel{
    position:absolute;top:7px;
    width:14px;height:10px;
    background:linear-gradient(180deg, rgba(88,166,255,.95), rgba(33,74,142,.95));
    border:1px solid rgba(147,196,255,.35);
    border-radius:2px;
  }
  .sat-panel.left{left:-12px;}
  .sat-panel.right{right:-12px;}
  .loader-signal-beam{
    position:absolute;
    left:26%;right:22%;top:38px;bottom:28px;
    transform:skewX(-14deg);
    overflow:hidden;
  }
  .beam{
    position:absolute;left:0;right:0;height:2px;
    background:linear-gradient(90deg, rgba(88,166,255,0), rgba(88,166,255,.92), rgba(126,231,135,.3));
    box-shadow:0 0 14px rgba(88,166,255,.25);
    animation:loader-data-flow 1.6s linear infinite;
  }
  .beam-a{top:18px;}
  .beam-b{top:40px;animation-delay:.35s;}
  .beam-c{top:62px;animation-delay:.7s;}
  .loader-earth-node{
    position:absolute;
    right:10%;bottom:8px;
    width:78px;height:78px;
    display:grid;place-items:center;
  }
  .earth-core{
    position:relative;z-index:2;
    width:40px;height:40px;border-radius:50%;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 22%),
      radial-gradient(circle at 62% 54%, rgba(126,231,135,.95) 0 14%, transparent 15%),
      radial-gradient(circle at 42% 32%, rgba(126,231,135,.85) 0 12%, transparent 13%),
      radial-gradient(circle at 60% 62%, rgba(88,166,255,.95) 0%, rgba(44,98,186,.95) 72%, rgba(18,40,76,.95) 100%);
    box-shadow:0 0 22px rgba(88,166,255,.28);
  }
  .earth-ring{
    position:absolute;inset:0;
    border-radius:50%;
    border:1px solid rgba(126,231,135,.24);
    box-shadow:0 0 24px rgba(126,231,135,.12);
    animation:earth-ring-pulse 2.8s ease-out infinite;
  }
  .loader-city{
    min-height:1.2em;
    font-family:var(--font-display);
    font-size:clamp(28px, 5vw, 42px);
    line-height:1.18;
    letter-spacing:-0.03em;
    color:var(--text);
    text-shadow:0 0 24px rgba(88,166,255,.14);
  }
  .loader-sub{
    max-width:560px;
    color:var(--text-dim);
    font-size:15px;
  }
  .loader-status{
    display:inline-flex;align-items:center;gap:10px;
    width:max-content;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(88,166,255,.16);
    background:rgba(12,18,28,.58);
    color:var(--text-dim);
    font-family:var(--font-mono);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.1em;
  }
  .status-ping{
    width:8px;height:8px;border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 0 rgba(126,231,135,.55);
    animation:status-ping 1.8s ease-out infinite;
  }
  .status-text{color:var(--text);}
  .status-dots{display:inline-flex;gap:4px;align-items:flex-end;min-width:18px;}
  .status-dots span{
    width:4px;height:4px;border-radius:50%;
    background:var(--blue);
    opacity:.25;
    animation:status-dot 1.1s ease-in-out infinite;
  }
  .status-dots span:nth-child(2){animation-delay:.18s;}
  .status-dots span:nth-child(3){animation-delay:.36s;}
  .loader-progress{
    margin-top:22px;
    height:8px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
  }
  .loader-progress span{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--blue), var(--green), var(--pink));
    box-shadow:0 0 24px rgba(88,166,255,.35);
    transition:width .2s linear;
  }
  @keyframes loader-satellite-path{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes loader-data-flow{
    0%{transform:translateX(-100%);opacity:0;}
    18%{opacity:1;}
    100%{transform:translateX(105%);opacity:0;}
  }
  @keyframes earth-ring-pulse{
    0%{transform:scale(.82);opacity:.22;}
    50%{transform:scale(1);opacity:.4;}
    100%{transform:scale(1.16);opacity:0;}
  }
  @keyframes status-ping{
    0%{box-shadow:0 0 0 0 rgba(126,231,135,.55);}
    75%{box-shadow:0 0 0 11px rgba(126,231,135,0);}
    100%{box-shadow:0 0 0 0 rgba(126,231,135,0);}
  }
  @keyframes status-dot{
    0%,100%{transform:translateY(0);opacity:.2;}
    50%{transform:translateY(-3px);opacity:1;}
  }
  @media (max-width:720px){
    .loader-inner{padding:28px 22px;}
    .loader-signal-scene{height:112px;}
    .loader-satellite-orbit{left:2%;width:92px;height:92px;}
    .loader-signal-beam{left:22%;right:20%;top:34px;bottom:28px;}
    .loader-earth-node{right:2%;width:68px;height:68px;}
    .earth-core{width:34px;height:34px;}
    .loader-sub{font-size:14px;}
    .loader-status{font-size:11px;padding:7px 12px;}
  }

  /* ===================== NAV ===================== */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter:blur(12px);
    background:rgba(13,17,23,0.72);
    border-bottom:1px solid var(--border);
  }
  .nav-inner{
    max-width:var(--maxw);margin:0 auto;padding:0 24px;
    height:66px;display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    font-family:var(--font-mono);
    font-weight:600;font-size:16px;
    color:var(--text);
    display:flex;align-items:center;gap:12px;
    position:relative;
  }
  .logo-mark{
    position:relative;
    width:38px;height:38px;flex-shrink:0;
    display:grid;place-items:center;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(88,166,255,.2), rgba(126,231,135,.12));
    border:1px solid rgba(88,166,255,.24);
    box-shadow:0 10px 26px rgba(0,0,0,.22);
    overflow:hidden;
  }
  .logo-core{
    position:relative;z-index:2;
    font-family:var(--font-display);
    font-size:20px;font-weight:700;
    color:var(--text);
    letter-spacing:-0.04em;
  }
  .logo-orbit{
    position:absolute;inset:-8px;
    border-radius:50%;
    border:1px solid rgba(126,231,135,.4);
    border-top-color:transparent;
    border-right-color:rgba(88,166,255,.55);
    box-shadow:inset 0 0 0 1px rgba(88,166,255,.08);
    animation:logo-orbit 7s linear infinite;
  }
  .logo-orbit::after{
    content:'';
    position:absolute;
    top:2px;
    right:6px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:radial-gradient(circle, #ffffff 0%, var(--blue) 55%, rgba(88,166,255,.25) 100%);
    box-shadow:0 0 12px rgba(88,166,255,.75);
  }
  .logo-copy{display:flex;align-items:baseline;gap:8px;}
  .logo-name{
    font-family:var(--font-display);
    font-size:18px;
    font-weight:700;
    letter-spacing:-0.03em;
    color:var(--text);
  }
  .logo-slash{
    color:var(--green);
    font-size:13px;
    transform:translateY(-1px);
  }
  .logo-tag{
    color:var(--blue);
    font-size:13px;
    letter-spacing:.18em;
    text-transform:uppercase;
  }
  .logo:hover .logo-mark{transform:translateY(-1px) scale(1.02);}
  .logo:hover .logo-name{color:#ffffff;}
  @keyframes logo-orbit{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .navlinks{display:flex;gap:32px;align-items:center;}
  .navlinks a{
    font-family:var(--font-mono);
    font-size:13.5px;color:var(--text-dim);
    position:relative;padding:4px 0;
    transition:color .2s;
  }
  .navlinks a::before{content:'';margin-right:0;}
  .navlinks a:hover{color:var(--text);}
  .navlinks a::after{
    content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
    background:var(--blue);transition:width .25s var(--ease);
  }
  .navlinks a:hover::after{width:100%;}
  .nav-tools{display:flex;align-items:center;gap:10px;}
  .lang-switch{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:rgba(22,27,34,.78);
    color:var(--text-dim);
    font-family:var(--font-mono);
    font-size:12px;
  }
  .lang-switch span{letter-spacing:.08em;text-transform:uppercase;}
  .lang-switch select{
    border:none;
    outline:none;
    background:transparent;
    color:var(--text);
    font-family:var(--font-mono);
    font-size:12px;
    cursor:pointer;
    min-width:84px;
  }
  .lang-switch select option{background:var(--surface);color:var(--text);}
  .nav-cta{
    font-family:var(--font-mono);font-size:13px;
    border:1px solid var(--border);padding:8px 16px;border-radius:7px;
    transition:.25s;
  }
  .nav-cta:hover{border-color:var(--green);color:var(--green);}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;position:relative;z-index:101;}
  .burger span{width:22px;height:2px;background:var(--text);transition:transform .25s var(--ease), opacity .25s var(--ease);}

  @media (max-width:860px){
    .navlinks{
      position:fixed;
      top:66px;
      left:0;
      right:0;
      width:100%;
      background:var(--bg-soft);
      flex-direction:column;
      align-items:flex-start;
      padding:24px;
      gap:20px;
      border-bottom:1px solid var(--border);
      box-shadow:0 18px 40px rgba(0,0,0,.32);
      transform:translateY(calc(-100% - 66px));
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:transform .35s var(--ease), opacity .25s ease, visibility .25s ease;
    }
    .navlinks a{width:100%;}
    .navlinks.open{
      transform:translateY(0);
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    .nav-tools{display:none;}
    .burger{display:flex;}
    .logo-copy{gap:6px;}
    .logo-name{font-size:17px;}
    .logo-tag{font-size:12px;letter-spacing:.14em;}
  }

  /* ===================== HERO ===================== */
  .hero{
    min-height:100vh;
    display:flex;align-items:center;
    padding-top:90px;padding-bottom:60px;
  }
  .hero-inner{
    max-width:var(--maxw);margin:0 auto;padding:0 24px;
    display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  }
  .hero-kicker{
    font-family:var(--font-mono);color:var(--green);font-size:14px;margin-bottom:18px;
    display:flex;align-items:center;gap:10px;
  }
  .hero-kicker .pulse{
    width:8px;height:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 0 0 rgba(126,231,135,.6);
    animation:pulse 2s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(126,231,135,.55);}
    70%{box-shadow:0 0 0 9px rgba(126,231,135,0);}
    100%{box-shadow:0 0 0 0 rgba(126,231,135,0);}
  }
  .hero h1{
    font-size:clamp(38px,5.6vw,64px);
    line-height:1.06;
    margin-bottom:18px;
  }
  .hero h1 .name{color:var(--text);}
  .hero h1 .role{
    color:var(--blue);
    display:block;
    font-size:30px;
    margin-top:15px;
  }
  .typecursor{
    display:inline-block;width:3px;height:0.9em;background:var(--blue);
    margin-left:4px;vertical-align:-0.1em;
    animation:blink 1s steps(1) infinite;
  }
  @keyframes blink{50%{opacity:0;}}

  .hero p.lead{
    color:var(--text-dim);
    font-size:17px;
    max-width:480px;
    margin-bottom:32px;
  }
  .hero-actions{display:flex;gap:14px;margin-bottom:36px;flex-wrap:wrap;}

  .hero-stats{display:flex;gap:32px;}
  .hero-stats .stat-num{
    font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--purple);
  }
  .hero-stats .stat-label{font-size:12.5px;color:var(--text-dim);}

  /* terminal */
  .terminal{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    animation:float 7s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes float{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-12px) rotate(0.5deg);}
  }
  .term-bar{
    display:flex;align-items:center;gap:8px;
    padding:12px 16px;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
  }
  .term-dot{width:11px;height:11px;border-radius:50%;}
  .term-dot.r{background:#ff5f56;}
  .term-dot.y{background:#ffbd2e;}
  .term-dot.g{background:#27c93f;}
  .term-title{
    margin-left:8px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);
  }
  .term-body{
    padding:22px 24px 28px;
    font-family:var(--font-mono);
    font-size:14.5px;
    min-height:300px;
  }
  .term-body .ln{color:var(--text-dim);display:inline-block;width:22px;user-select:none;}
  .term-line{white-space:pre-wrap;min-height:1.6em;}
  .tk-kw{color:var(--purple);}
  .tk-var{color:var(--blue);}
  .tk-str{color:var(--green);}
  .tk-prop{color:var(--text);}
  .tk-punc{color:var(--text-dim);}
  .tk-com{color:var(--text-dim);font-style:italic;}

  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr;}
    .hero{padding-top:110px;}
  }

  /* ===================== ABOUT ===================== */
  .about{padding:120px 0;border-top:1px solid var(--border);}
  .about-grid{
    display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;
  }
  .about-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
  }
  .about-card .role{font-family:var(--font-mono);color:var(--green);font-size:13px;margin-bottom:4px;}
  .about-card h3{font-size:20px;margin-bottom:18px;}
  .meta-row{
    display:flex;justify-content:space-between;
    padding:10px 0;border-bottom:1px solid var(--border);
    font-size:14px;
  }
  .meta-row:last-child{border-bottom:none;}
  .meta-row .k{color:var(--text-dim);font-family:var(--font-mono);font-size:12.5px;}
  .meta-row .v a{color:var(--blue);}

  .about-text p{color:var(--text-dim);margin-bottom:16px;font-size:16px;}
  .about-text strong{color:var(--text);}

  .skills{margin-top:36px;}
  .skill-row{margin-bottom:20px;}
  .skill-head{display:flex;justify-content:space-between;margin-bottom:8px;font-family:var(--font-mono);font-size:13.5px;}
  .skill-track{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border);}
  .skill-fill{
    height:100%;border-radius:5px;width:0%;
    transition:width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Creative Elastic Pop */
    background:linear-gradient(90deg,var(--blue),var(--purple));
  }

  .interest-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
  .tag{
    font-family:var(--font-mono);font-size:12.5px;
    padding:7px 12px;border-radius:7px;
    background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);
    transition:.25s;
  }
  .tag:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px);}

  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr;}
  }

  /* timeline (education / experience) */
  .dual{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px;}
  .timeline-h{font-size:18px;margin-bottom:24px;display:flex;align-items:center;gap:10px;}
  .timeline-h .dot{width:8px;height:8px;border-radius:50%;}
  
  /* CREATIVE: Enhanced timeline slide effects */
  .tl-item{
    position:relative;padding-left:24px;padding-bottom:26px;
    border-left:1px solid var(--border);
    opacity: 0; transform: translateX(-15px);
    transition: all 0.6s var(--ease);
  }
  .reveal.in .tl-item {
    opacity: 1; transform: translateX(0);
    transition-delay: calc(var(--j, 0) * 120ms);
  }
  .tl-item:last-child{padding-bottom:0;}
  .tl-item::before{
    content:'';position:absolute;left:-5px;top:2px;
    width:9px;height:9px;border-radius:50%;
    background:var(--bg);border:2px solid var(--blue);
  }
  .tl-year{font-family:var(--font-mono);font-size:12.5px;color:var(--blue);margin-bottom:4px;}
  .tl-title{font-size:15.5px;font-weight:600;}
  .tl-sub{font-size:13.5px;color:var(--text-dim);}

  @media (max-width:760px){.dual{grid-template-columns:1fr;gap:40px;}}

  /* ===================== SERVICES ===================== */
  .services{padding:120px 0;border-top:1px solid var(--border);}
  .svc-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  }
  .svc-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
    transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
    position:relative;
    overflow:hidden;
  }
  .svc-card::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(120px 120px at var(--mx,50%) var(--my,0%), rgba(88,166,255,.12), transparent 70%);
    opacity:0;transition:opacity .35s;
    pointer-events:none;
  }
  .svc-card:hover::before{opacity:1;}
  .svc-card:hover{
    transform:translateY(-6px);
    border-color:var(--blue);
    box-shadow: 0 10px 30px -10px rgba(88,166,255,0.15);
  }
  .svc-num{font-family:var(--font-mono);color:var(--text-dim);font-size:13px;margin-bottom:18px;}
  .svc-icon{
    width:42px;height:42px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;font-size:20px;
    background:var(--surface-2);border:1px solid var(--border);
  }
  .svc-card h4{font-size:17px;margin-bottom:8px;}
  .svc-card p{color:var(--text-dim);font-size:14.5px;}

  .satisfaction{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;
  }
  .stat-box{
    text-align:center;padding:32px 20px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  }
  .stat-box .num{
    font-family:var(--font-mono);font-size:36px;font-weight:700;
    background:linear-gradient(90deg,var(--blue),var(--green));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat-box .lbl{color:var(--text-dim);font-size:13.5px;margin-top:6px;}

  @media (max-width:860px){
    .svc-grid{grid-template-columns:1fr 1fr;}
    .satisfaction{grid-template-columns:1fr;}
  }
  @media (max-width:560px){.svc-grid{grid-template-columns:1fr;}}

  /* ===================== TESTIMONIALS ===================== */
  .testimonials{padding:120px 0;border-top:1px solid var(--border);}
  .test-track-wrap{overflow:hidden;}
  .test-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  }
  .test-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:26px;display:flex;flex-direction:column;
    transition: transform 0.4s var(--ease);
  }
  .test-card:hover {
    transform: scale(1.02);
  }
  .quote-mark{font-family:var(--font-display);font-size:32px;color:var(--blue);line-height:1;margin-bottom:6px;}
  .test-card p{color:var(--text-dim);font-size:14.5px;flex:1;margin-bottom:18px;}
  .test-person{display:flex;align-items:center;gap:12px;}
  .avatar{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-weight:700;font-size:14px;
    color:#0d1117;
  }
  .test-name{font-size:13.5px;font-weight:600;}
  .test-role{font-size:12px;color:var(--text-dim);}

  @media (max-width:860px){.test-grid{grid-template-columns:1fr;}}

  /* ===================== CONTACT ===================== */
  .contact{padding:120px 0 100px;border-top:1px solid var(--border);}
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;}
  .contact-info-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:28px;
  }
  .contact-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border);}
  .contact-row:last-child{border-bottom:none;}
  .c-icon{
    width:36px;height:36px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--border);
    font-size:16px;
  }
  .c-label{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);margin-bottom:2px;}
  .c-value{font-size:14.5px;}
  .c-value a:hover{color:var(--blue);}

  .map-frame{
    margin-top:20px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
    filter:grayscale(.3) invert(.92) contrast(.9);
  }
  .map-frame iframe{width:100%;height:180px;border:0;display:block;}

  form.contact-form{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:32px;
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field label{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);}
  .field input,.field textarea{
    background:var(--bg);border:1px solid var(--border);border-radius:8px;
    padding:12px 14px;color:var(--text);font-family:var(--font-body);font-size:14.5px;
    caret-color:var(--text);
    -webkit-text-fill-color:var(--text);
    appearance:none;
    color-scheme:dark;
    transition:border-color .25s, box-shadow .25s;
  }
  .field input::placeholder,.field textarea::placeholder{color:var(--text-dim);opacity:1;}
  .field input:focus,.field textarea:focus{
    outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(88,166,255,.15);color:var(--text);
    -webkit-text-fill-color:var(--text);
  }
  .field input:-webkit-autofill,
  .field input:-webkit-autofill:hover,
  .field input:-webkit-autofill:focus,
  .field textarea:-webkit-autofill,
  .field textarea:-webkit-autofill:hover,
  .field textarea:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
    box-shadow:0 0 0 1000px var(--bg) inset;
    transition:background-color 9999s ease-out 0s;
  }
  .field.invalid input,.field.invalid textarea{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(247,129,102,.12);
  }
  .field-error{
    min-height:18px;
    font-size:12px;
    color:var(--orange);
    font-family:var(--font-mono);
  }
  .form-status{
    min-height:22px;
    margin-bottom:10px;
    font-size:13px;
    color:var(--orange);
    font-family:var(--font-mono);
  }
  .field.full{grid-column:1 / -1;}
  .submit-btn{width:100%;justify-content:center;margin-top:6px;}

  @media (max-width:900px){
    .contact-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
  }

  /* ===================== FOOTER ===================== */
  footer{
    border-top:1px solid var(--border);
    padding:32px 0;
  }
  .footer-inner{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  }
  .footer-inner .copy{color:var(--text-dim);font-size:13px;font-family:var(--font-mono);}
  .social-row{display:flex;gap:14px;}
  .social-row a{
    width:36px;height:36px;border-radius:8px;
    background:var(--surface);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    transition:.25s;
  }
  .social-row a:hover{border-color:var(--blue);transform:translateY(-3px);}

  /* back to top */
  .totop{
    position:fixed;bottom:28px;right:28px;z-index:90;
    width:44px;height:44px;border-radius:50%;
    background:var(--surface);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    color:var(--blue);cursor:pointer;
    opacity:0;pointer-events:none;
    transition:opacity .3s, transform .3s;
  }
  .totop.show{opacity:1;pointer-events:auto;}
  .totop:hover{transform:translateY(-4px);border-color:var(--blue);}

  .gt-host{position:fixed;left:-9999px;top:-9999px;visibility:hidden;}
  .goog-te-banner-frame.skiptranslate{display:none !important;}
  iframe.VIpgJd-ZVi9od-ORHb-OEVmcd,
  .VIpgJd-ZVi9od-ORHb,
  .VIpgJd-yAWNEb-L7lbkb,
  .skiptranslate[style*="position: fixed"]{
    display:none !important;
  }
  .translated-rtl body,
  .translated-ltr body{top:0 !important;}
  body{top:0 !important;}

  @media (max-width:560px){
    .grecaptcha-badge{
      right:8px !important;
      bottom:8px !important;
      transform:scale(0.82);
      transform-origin:right bottom;
      max-width:calc(100vw - 16px);
      overflow:hidden;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .reveal,
    .reveal.in{
      animation:none !important;
      transition:none !important;
    }
    .logo-orbit{animation-duration:16s !important;}
    .loader-plane{animation-duration:9.5s !important;}
    .loader-progress span{transition:width .35s linear !important;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
    .starfield-a{animation-duration:90s !important;}
    .starfield-b{animation-duration:120s !important;}
    .sun-glow{animation-duration:10s, 52s !important;}
    .sun-glow::before{animation-duration:24s !important;}
    .sun-glow::after{animation-duration:32s !important;}
    .moon-orbit{animation-duration:34s !important;}
    .earth-orbit{animation-duration:44s !important;}
  }