styles.css

    :root{
      --bg0:#04050a;
      --bg1:#070816;
      --bg2:#0a0b1a;
      --ink:#eaf4ff;

      /* Palette: cyan + deep violet */
      --c:#2ef2ff;
      --v:#6d28d9;

      --stroke2: rgba(255,255,255,.08);
      --shadow: 0 18px 70px rgba(0,0,0,.62);

      --headerH: 76px;
    }

    *{ box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--headerH) + 14px); }
    body{
      margin:0;
      overflow-x:hidden;
      color: var(--ink);
      font-family: "Rajdhani", sans-serif;

      background:
        radial-gradient(1400px 900px at 16% 10%, rgba(46,242,255,.060), transparent 58%),
        radial-gradient(1100px 900px at 86% 18%, rgba(109,40,217,.065), transparent 62%),
        radial-gradient(900px 900px at 62% 100%, rgba(109,40,217,.055), transparent 62%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      background-attachment: fixed;
    }

    h1,h2,h3,.brand-font { font-family: "Orbitron", sans-serif; }
    ::selection{ background: rgba(46,242,255,.35); color: #03040a; }

    /* Prevent scrolling while loader is up */
    body.is-loading { overflow: hidden; cursor: progress; }

    /* SCROLLBAR CUSTOMIZATION */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #04050a; }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(46,242,255,.85), rgba(109,40,217,.75));
      border-radius: 999px;
    }

    /* Canvas fixed behind everything */
    #canvas-container{
      position: fixed;
      inset: 0;
      z-index: -4;
      opacity: 0;
      transition: opacity 1.6s ease;
      pointer-events: none;
    }

    /* Cinematic overlays */
    .vignette::before{
      content:"";
      position: fixed;
      inset: 0;
      z-index: -3;
      background:
        radial-gradient(1200px 900px at 50% 40%, transparent 34%, rgba(0,0,0,.78) 100%),
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: auto, 58px 58px, 58px 58px;
      opacity: .12;
      mask-image: linear-gradient(to bottom, transparent, black 16%, black 84%, transparent);
      pointer-events: none;
    }
    .vignette::after{
      content:"";
      position: fixed;
      inset: 0;
      z-index: -3;
      background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.46));
      pointer-events: none;
    }

    /* Subtle animated aurora */
    .aurora{
      position: fixed;
      inset: -18%;
      z-index: -5;
      pointer-events:none;
      opacity: .20;
      filter: blur(56px) saturate(1.2);
      background:
        radial-gradient(closest-side at 25% 30%, rgba(46,242,255,.20), transparent 62%),
        radial-gradient(closest-side at 78% 22%, rgba(109,40,217,.22), transparent 66%),
        radial-gradient(closest-side at 58% 82%, rgba(46,242,255,.12), transparent 62%),
        radial-gradient(closest-side at 22% 78%, rgba(109,40,217,.14), transparent 66%);
      transform: translate3d(0,0,0);
      animation: auroraShift 14s ease-in-out infinite alternate;
    }
    @keyframes auroraShift{
      0% { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.02); }
      100% { transform: translate3d(2%, 1%, 0) rotate(3deg) scale(1.05); }
    }

    /* Fine grain (SVG turbulence) */
    .grain{
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events:none;
      opacity: .06;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      background-size: 220px 220px;
    }

    /* Accessible skip link */
    .skip-link{
      position: absolute;
      top: -60px;
      left: 16px;
      padding: 10px 14px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.7);
      color: white;
      z-index: 9999;
      transition: top .25s ease;
      backdrop-filter: blur(10px);
      border-radius: 12px;
    }
    .skip-link:focus{ top: 16px; }

    /* Scroll progress bar */
    #scroll-progress{
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      z-index: 70;
      background: linear-gradient(90deg, rgba(46,242,255,.92), rgba(109,40,217,.88));
      box-shadow: 0 0 18px rgba(46,242,255,.20);
    }

    /* Sticky header */
    #siteHeader{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--headerH);
      z-index: 60;
      display:flex;
      align-items:center;
      transition: background .25s ease, border-color .25s ease;
      border-bottom: 1px solid transparent;
    }
    #siteHeader .inner{
      width: 100%;
      max-width: none;
      margin: 0 auto;
      padding: 0 28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    #siteHeader.is-scrolled{
      background: rgba(4,5,10,.58);
      border-bottom-color: rgba(255,255,255,.10);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }


    /* Glass panels */
    .glass-panel{
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
      border: 1px solid var(--stroke2);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
      position: relative;
      transform: translate3d(0,0,0);
    }
    .glass-panel::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(46,242,255,.35), rgba(109,40,217,.28), transparent 62%);
      opacity: .55;
      pointer-events:none;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      transition: opacity .35s ease;
    }
    .glass-panel:hover{
      transform: translateY(-6px);
      border-color: rgba(46,242,255,.28);
      box-shadow: 0 22px 78px rgba(0,0,0,.68), 0 0 48px rgba(46,242,255,.07);
      background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
    }
    .glass-panel:hover::before{ opacity: .85; }

    .neon-text{
      text-shadow: 0 0 14px rgba(46,242,255,.28), 0 0 32px rgba(109,40,217,.18);
    }
    .gradient-text{
      background-image: linear-gradient(90deg, rgba(46,242,255,1), rgba(109,40,217,1));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* Pill (used outside hero) */
    .pill{
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* Cyber button shine */
    .btn-cyber{
      position: relative;
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
      transform: translate3d(0,0,0);
      will-change: transform;
    }
    .btn-cyber::before{
      content:"";
      position:absolute;
      inset:-2px;
      transform: translateX(-120%);
      background: linear-gradient(90deg, transparent, rgba(46,242,255,.16), rgba(109,40,217,.14), transparent);
      transition: transform .75s ease;
    }
    .btn-cyber:hover::before{ transform: translateX(120%); }
    .btn-cyber:hover{
      transform: translateY(-2px);
      box-shadow: 0 0 0 1px rgba(46,242,255,.22), 0 18px 40px rgba(0,0,0,.45), 0 0 44px rgba(46,242,255,.10);
      border-color: rgba(46,242,255,.62);
    }
    .btn-gradient{
      background: linear-gradient(90deg, rgba(46,242,255,.92), rgba(109,40,217,.88));
      color: #02030a;
    }

    /* Fancy focus ring */
    :focus-visible{
      outline: none;
      box-shadow: 0 0 0 2px rgba(46,242,255,.55), 0 0 0 6px rgba(46,242,255,.10);
      border-radius: 12px;
    }

    /* JS-only reveal animations */
    html.js .reveal,
    html.js .fade-section{
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 760ms ease, transform 760ms ease;
      will-change: opacity, transform;
    }
    html.js .reveal.in-view,
    html.js .fade-section.in-view{
      opacity: 1;
      transform: translateY(0);
    }

    section{ scroll-margin-top: calc(var(--headerH) + 14px); }

    /* Scroll hint */
    #scrollHint{
      opacity: 1;
      transform: translateY(0);
      transition: opacity .25s ease, transform .25s ease;
    }
    #scrollHint.is-hidden{
      opacity: 0;
      transform: translateY(10px);
      pointer-events:none;
    }

    /* Back-to-top */
    #toTop{
      transform: translateY(6px);
      transition: opacity .2s ease, transform .2s ease;
    }
    #toTop.show{
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: translateY(0);
    }

    /* Nav active link */
    .navlink{
      position: relative;
      transition: color .2s ease;
    }
    .navlink::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(46,242,255,.9), rgba(109,40,217,.85));
      opacity: 0;
      transform: scaleX(.6);
      transition: opacity .2s ease, transform .2s ease;
    }
    .navlink.is-active{
      color: rgba(234,244,255,.96) !important;
    }
    .navlink.is-active::after{
      opacity: 1;
      transform: scaleX(1);
    }

    /* Mobile menu overlay */
    #mobileMenu{
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }
    #mobileMenu.open{
      opacity: 1;
      pointer-events: auto;
    }
    #mobilePanel{
      transform: translateX(110%);
      transition: transform .35s cubic-bezier(.2,.9,.2,1);
    }
    #mobileMenu.open #mobilePanel{
      transform: translateX(0);
    }
    body.menu-open{ overflow: hidden; }

    /* Hamburger animation */
    .burger span{
      display:block;
      width: 26px;
      height: 2px;
      background: rgba(234,244,255,.9);
      margin: 6px 0;
      transition: transform .25s ease, opacity .25s ease, background .25s ease;
    }
    .burger:hover span{ background: rgba(46,242,255,.85); }
    .burger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
    .burger.is-open span:nth-child(2){ opacity: 0; }
    .burger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

    /* CLI animation: cursor + scanline */
    @keyframes cliBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
    .cli-cursor{
      display:inline-block;
      width: 9px;
      height: 1em;
      transform: translateY(2px);
      margin-left: 3px;
      border-radius: 2px;
      background: rgba(46,242,255,.92);
      box-shadow: 0 0 14px rgba(46,242,255,.30);
      animation: cliBlink 1s steps(1,end) infinite;
    }

    @keyframes cliScan {
      0% { transform: translateY(-140%); opacity: .0; }
      12% { opacity: .55; }
      55% { opacity: .20; }
      100% { transform: translateY(140%); opacity: 0; }
    }
    .cli-scan{
      position: relative;
      overflow: hidden;
    }
    .cli-scan::after{
      content:"";
      position:absolute;
      left:0; right:0;
      top:-40%;
      height: 90px;
      background: linear-gradient(180deg, transparent, rgba(46,242,255,.10), transparent);
      animation: cliScan 4.4s linear infinite;
      pointer-events:none;
      mix-blend-mode: screen;
    }

    /* Telemetry meters */
    .meter{
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.08);
    }
    .meter-fill{
      height: 100%;
      width: 0%;
      border-radius: 999px;
      transition: width 900ms cubic-bezier(.2,.9,.2,1);
      box-shadow: 0 0 20px rgba(46,242,255,.10);
    }
    .telemetry.in-view .meter-fill{
      width: calc(var(--val) * 1%);
    }

    /* Toasts */
    #toastHost{
      position: fixed;
      left: 16px;
      bottom: 16px;
      z-index: 80;
      display:flex;
      flex-direction:column;
      gap: 10px;
      pointer-events:none;
    }
    .toast{
      pointer-events:none;
      max-width: min(520px, calc(100vw - 32px));
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
      padding: 12px 14px;
      display:flex;
      gap: 10px;
      align-items:flex-start;
      transform: translateY(10px);
      opacity: 0;
      transition: transform .25s ease, opacity .25s ease;
    }
    .toast.show{
      transform: translateY(0);
      opacity: 1;
    }
    .toast .dot{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      margin-top: 4px;
      background: linear-gradient(180deg, rgba(46,242,255,.95), rgba(109,40,217,.85));
      box-shadow: 0 0 14px rgba(46,242,255,.38);
      flex: 0 0 auto;
    }

    /* === LOADER === */
    #loader{
      position: fixed;
      inset: 0;
      background-color: var(--bg0);
      z-index: 100;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: opacity 1s ease-out, visibility 1s;
    }
    .loader-ring{
      width: 84px;
      height: 84px;
      border: 4px solid rgba(46, 242, 255, 0.22);
      border-top: 4px solid rgba(46, 242, 255, 0.92);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      box-shadow: 0 0 28px rgba(46,242,255,.12);
    }
    @keyframes spin{
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .loader-bar{
      width: min(360px, 82vw);
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.07);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      margin-top: 18px;
    }
    .loader-bar > div{
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(46,242,255,.92), rgba(109,40,217,.88));
      box-shadow: 0 0 18px rgba(46,242,255,.18);
      transition: width .35s ease;
    }

    /* Reduced motion: keep CSS calmer (JS forces motion) */
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
      .aurora{ animation: none; }
      html.js .reveal,
      html.js .fade-section{ transition: none; transform: none; opacity: 1; }
      .btn-cyber::before{ display:none; }
      #canvas-container{ transition: none; }
      .animate-bounce{ animation: none !important; }
      .meter-fill{ transition: none; width: calc(var(--val) * 1%); }
    }

    @supports (text-wrap: balance){
      h1, h2 { text-wrap: balance; }
      p { text-wrap: pretty; }
    }