/* ====================================================================
   Radhakrishna Digital — Stylesheet
   Extracted from index.html inline <style> blocks (lift-and-shift,
   no rule/value changes).
   ==================================================================== */

  :root{
    --bg:#050A14;
    --ink:#F4F7FB;
    --grey:#8FA0B8;
    --cyan:#22D3EE;
    --cyan-deep:#0EA5C9;
    --blue:#3B82F6;
    --violet:#8B7CFF;
    --line:rgba(255,255,255,0.09);
    --edge-rgb:255,255,255;
    --surface-1:#050A14;
  }
  html[data-theme="light"]{ --bg:#F4F6FA; }
  html{ color-scheme:dark; }
  html[data-theme="light"]{ color-scheme:light; }
  *{ box-sizing:border-box; }
  html,body{
    margin:0; padding:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{ color:inherit; }

  .skip-link{
    position:absolute; left:16px; top:-60px; z-index:10000;
    padding:12px 20px; border-radius:10px;
    background:var(--cyan); color:#04070D; font:700 .9rem 'Manrope',sans-serif; text-decoration:none;
    transition:top .2s ease;
  }
  .skip-link:focus{ top:16px; }

  .stage{
    position:relative;
    width:100%;
    height:100vh;
    min-height:700px;
    overflow:hidden;
    background:#050A14;
    transition:background-color .5s ease;
  }

  /* aurora blobs — sit beneath everything */
  .aurora{ position:absolute; inset:0; z-index:0; overflow:hidden; }
  .blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35; }
  .blob-a{ width:560px; height:560px; background:#1F5B8C; top:-180px; left:-120px; animation:driftA 24s ease-in-out infinite; }
  .blob-b{ width:480px; height:480px; background:#5B3E9C; bottom:-200px; right:-100px; animation:driftB 28s ease-in-out infinite; }
  .blob-c{ width:360px; height:360px; background:#0E7A6E; top:40%; right:20%; animation:driftC 20s ease-in-out infinite; }
  @keyframes driftA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,50px); } }
  @keyframes driftB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-50px,-40px); } }
  @keyframes driftC{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-40px,30px); } }

  /* cursor spotlight */
  .spotlight{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(34,211,238,0.10), transparent 65%);
  }

  canvas#sceneCanvas{
    position:absolute; inset:0;
    width:100%; height:100%;
    z-index:2;
    display:block;
  }

  .text-scrim{
    position:absolute; inset:0; z-index:3;
    background:linear-gradient(90deg, var(--scrim-1,rgba(5,10,20,0.88)) 0%, var(--scrim-2,rgba(5,10,20,0.55)) 38%, var(--scrim-3,rgba(5,10,20,0.08)) 62%, transparent 78%);
    pointer-events:none;
    transition:background .3s ease;
  }

  .content{
    position:relative; z-index:4;
    max-width:1320px;
    margin:0 auto;
    padding:0 40px;
    height:100%;
    display:flex;
    flex-direction:column;
  }

  nav{ display:flex; align-items:center; justify-content:space-between; padding:26px 0; }
  .nav-right{ display:flex; align-items:center; gap:16px; }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    position:relative; width:34px; height:34px; border-radius:10px; overflow:hidden;
    background:#fff; box-shadow:0 0 18px rgba(34,211,238,0.35);
  }
  .brand-mark img{
    position:absolute; width:213%; height:213%; left:-64%; top:-25%;
    max-width:none;
  }
  .brand-name{ font-family:'Manrope', sans-serif; font-weight:700; font-size:1.05rem; }
  .nav-links{ display:flex; align-items:center; gap:32px; font-size:0.94rem; color:var(--grey); }
  .nav-links a{ text-decoration:none; transition:color 0.2s ease; }
  .nav-links a:hover, .nav-links a:focus-visible{ color:var(--ink); }
  .nav-cta{
    background:rgba(var(--edge-rgb),0.05); border:1px solid var(--line);
    color:var(--ink) !important; padding:10px 20px; border-radius:30px;
    font-size:0.88rem; font-weight:500; text-decoration:none; display:inline-block;
    transition:background 0.2s ease, border-color 0.2s ease;
  }
  .nav-cta:hover{ background:rgba(var(--edge-rgb),0.1); border-color:rgba(var(--edge-rgb),0.22); }

  .hero{ flex:1; display:flex; flex-direction:column; justify-content:center; max-width:660px; padding-bottom:40px; }

  .eyebrow{ font-size:0.82rem; font-weight:600; letter-spacing:0.16em; color:var(--cyan); margin-bottom:22px; }

  .heading-wrap{ perspective:900px; margin:0 0 26px; }
  h1{
    font-family:'Manrope', sans-serif;
    font-weight:800;
    font-size:clamp(2.5rem, 4.8vw, 3.9rem);
    line-height:1.08;
    letter-spacing:-0.015em;
    margin:0;
    transform-style:preserve-3d;
    transition:transform 0.12s ease-out;
    will-change:transform;
  }
  h1 .grad{
    background:linear-gradient(90deg, var(--cyan), var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:firebrick;
  }

  .sub{ font-size:1.1rem; line-height:1.7; color:var(--grey); max-width:36rem; margin:0 0 36px; }

  .cta-row{ display:flex; align-items:center; gap:20px; margin-bottom:38px; }

  .btn-primary{
    position:relative; display:inline-flex; align-items:center; gap:9px;
    background:linear-gradient(90deg, var(--cyan), var(--cyan-deep));
    color:#03131A; border:none; padding:15px 26px; border-radius:30px;
    font-size:0.98rem; font-weight:600; font-family:'Inter', sans-serif; cursor:pointer;
    transition:transform 0.15s ease-out, box-shadow 0.25s ease;
    box-shadow:0 10px 26px -10px rgba(34,211,238,0.55);
    will-change:transform;
  }
  .btn-primary:hover{ box-shadow:0 14px 32px -10px rgba(34,211,238,0.7); }
  .btn-primary:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
  .btn-primary svg{ transition:transform 0.2s ease; }
  .btn-primary:hover svg{ transform:translateX(3px); }

  .btn-secondary{
    position:relative; background:transparent; color:var(--ink); border:1px solid var(--line);
    padding:14px 25px; border-radius:30px; font-size:0.98rem; font-weight:500;
    font-family:'Inter', sans-serif; cursor:pointer;
    transition:transform 0.15s ease-out, border-color 0.2s ease, background 0.2s ease;
    will-change:transform;
  }
  .btn-secondary:hover{ border-color:rgba(var(--edge-rgb),0.3); background:rgba(var(--edge-rgb),0.04); }
  .btn-secondary:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

  .tags{ display:flex; flex-wrap:wrap; gap:10px; }
  .tag{
    font-size:0.78rem; font-weight:600; letter-spacing:0.06em; color:var(--grey);
    border:1px solid var(--line); padding:8px 14px; border-radius:20px;
    background:var(--tag-bg,rgba(5,10,20,0.4));
    transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  }
  .tag:hover{ border-color:rgba(34,211,238,0.45); color:var(--ink); background:rgba(34,211,238,0.08); }

  /* ================= MARQUEE BANNER — bridges hero into the page, grabs attention ================= */
  .marquee-banner{
    position:relative; overflow:hidden; z-index:1;
    padding:20px 0; background:#070C18;
    border-top:1px solid rgba(34,211,238,.25); border-bottom:1px solid rgba(139,124,255,.25);
    box-shadow:0 0 30px rgba(34,211,238,.08);
  }
  .marquee-sheen{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.06) 45%, rgba(34,211,238,.14) 50%, rgba(255,255,255,.06) 55%, transparent 80%);
    background-size:250% 100%;
    animation:marqueeSheen 6s ease-in-out infinite;
  }
  @keyframes marqueeSheen{ 0%{ background-position:120% 0; } 100%{ background-position:-20% 0; } }
  .marquee-track{ position:relative; z-index:1; display:flex; width:max-content; animation:marqueeScroll 26s linear infinite; }
  .marquee-banner:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marqueeScroll{ to{ transform:translateX(-50%); } }
  .marquee-group{ display:flex; align-items:center; flex-shrink:0; }
  .marquee-group span{
    padding:0 22px; white-space:nowrap;
    font:800 1.15rem/1 'Manrope',sans-serif; letter-spacing:.01em;
    background:linear-gradient(90deg, var(--cyan), var(--violet));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .marquee-group span.dot{
    padding:0; font-size:.9rem; -webkit-text-fill-color:initial; background:none; color:var(--cyan); opacity:.7;
  }

  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
    .marquee-sheen{ animation:none; }
    .marquee-group[aria-hidden="true"]{ display:none; }
  }

  @media (max-width:600px){
    .marquee-group span{ font-size:.92rem; padding:0 16px; }
  }

  .services-section{
    position:relative;
    min-height:860px;
    overflow:hidden;
    padding:96px 40px 100px;
    background:
      radial-gradient(circle at 22% 48%, rgba(59,130,246,0.18), transparent 32%),
      radial-gradient(circle at 78% 20%, rgba(139,124,255,0.12), transparent 30%),
      #070D1B;
    border-top:1px solid rgba(var(--edge-rgb),0.08);
    transition:background-color .5s ease;
  }
  .services-section::before{
    content:'';
    position:absolute; inset:0;
    opacity:0.22;
    background-image:linear-gradient(rgba(var(--edge-rgb),0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--edge-rgb),0.035) 1px, transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(90deg, black, transparent 84%);
    pointer-events:none;
  }
  .services-inner{ position:relative; z-index:1; max-width:1320px; margin:0 auto; }
  .services-layout{ display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(360px, 0.92fr); align-items:center; gap:76px; }
  .services-visual{ position:relative; min-height:560px; perspective:1200px; }
  .services-orbit{ position:absolute; width:480px; height:480px; left:50%; top:50%; transform:translate(-50%,-50%) rotateX(62deg) rotateZ(-18deg); border:1px solid rgba(92,145,255,0.28); border-radius:50%; box-shadow:0 0 70px rgba(34,211,238,0.12), inset 0 0 50px rgba(139,124,255,0.08); animation:orbitSpin 22s linear infinite; }
  .services-orbit::before,.services-orbit::after{ content:''; position:absolute; border:1px solid rgba(139,124,255,0.24); border-radius:50%; inset:48px; }
  .services-orbit::after{ inset:96px; border-color:rgba(34,211,238,0.2); }
  @keyframes orbitSpin{ to{ transform:translate(-50%,-50%) rotateX(62deg) rotateZ(342deg); } }
  .service-console{ position:absolute; left:50%; top:52%; width:min(430px, 80%); transform:translate(-50%,-50%) rotateX(8deg) rotateY(-12deg); transform-style:preserve-3d; filter:drop-shadow(0 34px 30px rgba(0,0,0,0.46)); transition:transform 0.35s ease; }
  .service-console:hover{ transform:translate(-50%,-50%) rotateX(4deg) rotateY(-5deg) translateZ(10px); }
  .scene-art{ position:relative; height:330px; transform-style:preserve-3d; }
  .scene-glow{ position:absolute; left:50%; top:45%; width:290px; height:180px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(48,115,255,0.3); filter:blur(35px); animation:scenePulse 4s ease-in-out infinite; }
  @keyframes scenePulse{ 0%,100%{ opacity:0.55; transform:translate(-50%,-50%) scale(0.95); } 50%{ opacity:0.9; transform:translate(-50%,-50%) scale(1.06); } }
  .scene-monitor{ position:absolute; z-index:2; left:50%; top:28px; width:272px; height:174px; transform:translateX(-50%) rotateX(7deg) rotateY(-8deg); padding:11px; border:5px solid #294B91; border-radius:13px; background:#09152C; box-shadow:0 0 34px rgba(54,126,255,0.46), inset 0 0 0 1px rgba(255,255,255,0.13); }
  .scene-monitor::after{ content:''; position:absolute; left:50%; bottom:-37px; width:48px; height:38px; transform:translateX(-50%); background:linear-gradient(#3159A2,#132957); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); }
  .scene-monitor::before{ content:''; position:absolute; left:50%; bottom:-43px; width:126px; height:9px; transform:translateX(-50%); border-radius:50%; background:#315AA4; box-shadow:0 0 18px rgba(59,130,246,0.5); }
  .scene-ui{ height:100%; padding:11px; border-radius:5px; background:linear-gradient(145deg,#173B7C,#0B1835); overflow:hidden; }
  .scene-ui-top{ display:flex; justify-content:space-between; color:#B8D2FF; font-size:0.47rem; letter-spacing:0.12em; }
  .scene-ui-logo{ display:flex; align-items:center; gap:7px; margin-top:22px; color:#F7FAFF; font:700 0.75rem Manrope,sans-serif; }
  .scene-ui-logo b{ display:grid; place-items:center; width:24px; height:24px; color:#07101F; border-radius:6px; background:linear-gradient(135deg,#22D3EE,#A78BFA); }
  .scene-ui-chart{ display:flex; align-items:end; gap:5px; height:50px; margin:21px 8px 0; }
  .scene-ui-chart i{ width:20px; height:42%; border-radius:4px 4px 0 0; background:linear-gradient(#22D3EE,#4F46E5); animation:chartRise 3s ease-in-out infinite alternate; }
  .scene-ui-chart i:nth-child(2){ height:74%; animation-delay:-.8s; } .scene-ui-chart i:nth-child(3){ height:56%; animation-delay:-1.5s; } .scene-ui-chart i:nth-child(4){ height:88%; animation-delay:-2.1s; }
  @keyframes chartRise{ to{ transform:scaleY(0.65); opacity:0.7; } }
  .scene-person{ position:absolute; z-index:3; bottom:29px; width:106px; height:174px; transform-style:preserve-3d; animation:personFloat 4.5s ease-in-out infinite; }
  .scene-person.left{ left:16px; transform:scaleX(-1) rotateY(14deg); } .scene-person.right{ right:4px; animation-delay:-2s; transform:rotateY(-14deg); }
  @keyframes personFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
  .person-head{ position:absolute; left:31px; top:0; width:48px; height:56px; border-radius:48% 48% 45% 45%; background:linear-gradient(135deg,#F5B38D,#9E4F67); box-shadow:inset -7px -5px 0 rgba(67,31,67,0.32); }
  .person-head::before{ content:''; position:absolute; left:-3px; top:-11px; width:55px; height:30px; border-radius:55% 60% 28% 35%; background:#201642; box-shadow:8px 4px 0 #201642; }
  .person-body{ position:absolute; left:13px; bottom:0; width:82px; height:118px; border-radius:42px 42px 13px 13px; background:linear-gradient(120deg,#8B5CF6,#182D72 75%); box-shadow:inset -10px -3px 0 rgba(6,13,39,0.35); }
  .person-arm{ position:absolute; z-index:4; width:82px; height:17px; top:101px; border-radius:20px; background:linear-gradient(90deg,#B96579,#F3B08C); transform:rotate(-24deg); transform-origin:left center; }
  .scene-person.right .person-arm{ transform:rotate(205deg); transform-origin:right center; }
  .scene-desk{ position:absolute; z-index:4; left:1%; right:1%; bottom:19px; height:25px; border-radius:8px 8px 3px 3px; background:linear-gradient(#7D5AA2,#251D56); box-shadow:0 11px 0 #171437, 0 0 22px rgba(193,110,255,0.35); }
  .scene-laptop{ position:absolute; z-index:5; left:27px; bottom:47px; width:92px; height:58px; padding:6px; transform:skewY(-5deg) rotateY(16deg); border:3px solid #4F72CB; border-radius:7px; background:#101E4B; box-shadow:0 0 18px rgba(34,211,238,0.32); }
  .scene-laptop::after{ content:'</>'; display:grid; place-items:center; height:100%; color:#22D3EE; font:bold 1.25rem monospace; background:#13285D; }
  .scene-phone{ position:absolute; z-index:5; right:77px; bottom:53px; width:26px; height:51px; padding:4px 3px; border:2px solid #89A7FF; border-radius:5px; background:linear-gradient(#1F50A0,#142456); box-shadow:0 0 16px rgba(34,211,238,0.45); animation:phoneBob 3s ease-in-out infinite; }
  .scene-phone::after{ content:''; display:block; height:100%; border-radius:2px; background:linear-gradient(180deg,#22D3EE 0 8%,#D7E9FF 8% 12%,#445AC6 12% 18%,#F7B2EA 18% 32%,#2B5BE2 32%); }
  @keyframes phoneBob{ 0%,100%{ transform:translateY(0) rotate(3deg); } 50%{ transform:translateY(-8px) rotate(-3deg); } }
  .scene-spark{ position:absolute; z-index:6; display:grid; place-items:center; width:24px; height:24px; color:#FBBF24; font-size:1.2rem; animation:sparkBlink 2.5s ease-in-out infinite; }
  .scene-spark.one{ left:8%; top:14%; } .scene-spark.two{ right:8%; top:28%; color:#22D3EE; animation-delay:-1.2s; } .scene-spark.three{ left:23%; top:3%; color:#C084FC; animation-delay:-.6s; }
  @keyframes sparkBlink{ 0%,100%{ opacity:.3; transform:scale(.8) rotate(0); } 50%{ opacity:1; transform:scale(1.2) rotate(18deg); } }
  .console-screen{ position:relative; height:250px; padding:18px; border:5px solid #1F3D78; border-radius:14px 14px 7px 7px; background:linear-gradient(145deg,#112957,#081326 70%); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1), 0 0 38px rgba(59,130,246,0.3); }
  .console-screen::after{ content:''; position:absolute; inset:8px; border:1px solid rgba(255,255,255,0.08); border-radius:7px; pointer-events:none; }
  .console-bar{ display:flex; gap:6px; margin-bottom:22px; }
  .console-bar i{ width:7px; height:7px; border-radius:50%; background:#FB7185; } .console-bar i:nth-child(2){ background:#FBBF24; } .console-bar i:nth-child(3){ background:#34D399; }
  .console-brand{ display:flex; align-items:center; gap:10px; color:#F4F7FB; font:700 1.05rem Manrope,sans-serif; }
  .console-brand b{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#07101F; background:linear-gradient(135deg,#22D3EE,#8B7CFF); }
  .console-lines{ display:grid; gap:10px; margin:26px 22px 0; }
  .console-lines span{ height:7px; border-radius:5px; background:linear-gradient(90deg,rgba(34,211,238,0.8),rgba(139,124,255,0.2)); }
  .console-lines span:nth-child(2){ width:72%; } .console-lines span:nth-child(3){ width:54%; }
  .console-base{ width:48%; height:22px; margin:0 auto; background:linear-gradient(#1E4385,#102650); transform:skewX(-28deg); border-radius:0 0 5px 5px; }
  .console-foot{ width:70%; height:10px; margin:0 auto; border-radius:50%; background:rgba(59,130,246,0.42); filter:blur(5px); }
  .service-tile{ position:absolute; display:flex; align-items:center; gap:10px; width:148px; padding:12px 13px; color:#F4F7FB; border:1px solid rgba(120,146,255,0.42); border-radius:12px; background:linear-gradient(145deg,rgba(34,55,119,0.88),rgba(10,17,37,0.9)); box-shadow:0 15px 32px rgba(0,0,0,0.28), 0 0 20px rgba(59,130,246,0.14); transform:translateZ(25px); transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; animation:tileFloat 5s ease-in-out infinite; }
  .service-tile:hover,.service-tile.is-active{ border-color:#22D3EE; box-shadow:0 16px 34px rgba(0,0,0,0.32), 0 0 28px rgba(34,211,238,0.32); transform:translateY(-7px) translateZ(36px); }
  .service-tile:nth-child(2){ animation-delay:-1.3s; } .service-tile:nth-child(3){ animation-delay:-2.5s; } .service-tile:nth-child(4){ animation-delay:-3.7s; } .service-tile:nth-child(5){ animation-delay:-0.7s; } .service-tile:nth-child(6){ animation-delay:-4.2s; }
  @keyframes tileFloat{ 0%,100%{ margin-top:0; } 50%{ margin-top:-10px; } }
  .service-tile strong{ display:block; font:700 0.78rem Manrope,sans-serif; color:#F4F7FB; } .service-tile small{ display:block; margin-top:3px; color:#94A7C8; font-size:0.66rem; }
  .tile-icon{ flex:0 0 30px; display:grid; place-items:center; width:30px; height:30px; color:#B9D9FF; font-size:1.05rem; text-shadow:0 0 12px currentColor; }
  .tile-icon::before,.list-icon::before{ display:block; font-weight:800; animation:iconPulse 2.8s ease-in-out infinite; }
  @keyframes iconPulse{ 0%,100%{ transform:translateY(0) scale(1); filter:drop-shadow(0 0 4px currentColor); } 50%{ transform:translateY(-3px) scale(1.08); filter:drop-shadow(0 0 11px currentColor); } }
  .icon-growth::before{ content:'↗'; color:#FBBF24; font-size:1.4rem; }
  .icon-cloud::before{ content:'☁'; color:#22D3EE; font-size:1.35rem; }
  .icon-web::before{ content:'</>'; color:#60A5FA; font:800 0.82rem monospace; }
  .icon-ai::before{ content:'✦'; color:#C084FC; font-size:1.35rem; }
  .icon-stack::before{ content:'▱'; color:#A78BFA; font-size:1.5rem; transform:rotate(30deg); }
  .brand-mark-icon{ position:relative; width:22px; height:22px; transform:rotate(-12deg); }
  .brand-mark-icon::before,.brand-mark-icon::after{ content:''; position:absolute; border:2px solid currentColor; border-radius:5px; transform:skewY(-18deg); }
  .brand-mark-icon::before{ inset:1px 7px 1px 1px; border-right-width:4px; } .brand-mark-icon::after{ inset:6px 1px 1px 8px; border-left-width:4px; }
  .brand-orbit{ position:absolute; inset:-5px; border:1px solid rgba(34,211,238,0.8); border-radius:50%; transform:rotate(45deg); animation:brandOrbit 3s linear infinite; }
  .brand-orbit::after{ content:''; position:absolute; width:4px; height:4px; right:-2px; top:50%; border-radius:50%; background:#FBBF24; box-shadow:0 0 9px #FBBF24; }
  @keyframes brandOrbit{ to{ transform:rotate(405deg); } }
  .list-icon .brand-mark-icon{ width:25px; height:25px; color:#DCE7FF; }
  .tile-a{ left:1%; top:19%; } .tile-b{ left:4%; bottom:17%; } .tile-c{ right:3%; top:11%; } .tile-d{ right:0; bottom:20%; } .tile-e{ left:39%; top:1%; } .tile-f{ left:40%; bottom:1%; }
  .services-copy{ max-width:520px; }
  .services-kicker{ display:flex; align-items:center; gap:12px; color:var(--cyan); font-size:0.76rem; font-weight:700; letter-spacing:0.25em; }
  .services-kicker::before{ content:''; width:22px; height:2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
  .services-copy h2{ margin:18px 0 20px; font:800 clamp(2.4rem,4.6vw,4.2rem)/1.02 Manrope,sans-serif; letter-spacing:-0.03em; }
  .services-copy h2 span{ display:block; color:#B07CFF; text-shadow:0 0 22px rgba(176,124,255,0.25); }
  .services-copy > p{ color:var(--grey); line-height:1.7; max-width:470px; margin:0 0 34px; }
  .service-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
  .service-list button{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:center; padding:0 0 14px; color:var(--ink); text-align:left; background:none; border:0; border-bottom:1px solid rgba(var(--edge-rgb),0.1); cursor:pointer; }
  .service-list button:hover,.service-list button.is-active{ color:var(--ink); }
  .service-list button:hover .list-icon,.service-list button.is-active .list-icon{ color:var(--cyan); transform:translateY(-2px) scale(1.08); }
  .list-icon{ display:grid; place-items:center; width:40px; height:40px; color:#B9C5E8; font-size:1.25rem; transition:all 0.2s ease; }
  .list-icon.icon-growth::before{ font-size:1.7rem; } .list-icon.icon-cloud::before{ font-size:1.6rem; } .list-icon.icon-ai::before{ font-size:1.65rem; }
  .service-list strong{ display:block; font:700 0.78rem Manrope,sans-serif; } .service-list small{ display:block; margin-top:4px; color:var(--grey); font-size:0.65rem; line-height:1.35; }
  .services-cta{ display:inline-flex; align-items:center; gap:14px; margin-top:36px; padding:13px 22px; border:1px solid rgba(255,255,255,0.16); border-radius:24px; color:#fff; text-decoration:none; background:linear-gradient(90deg,#7C3AED,#168BF3); box-shadow:0 12px 26px rgba(89,61,215,0.28); font-size:0.82rem; transition:transform 0.2s ease, box-shadow 0.2s ease; }
  .services-cta:hover{ transform:translateY(-3px); box-shadow:0 18px 32px rgba(89,61,215,0.38); }

  .work-section{ position:relative; overflow:hidden; padding:128px 40px 144px; background:#080D19; }
  .work-section::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 14%,rgba(139,124,255,0.14),transparent 28%),linear-gradient(135deg,rgba(34,211,238,0.04),transparent 42%); pointer-events:none; }
  .work-section::after{ content:''; position:absolute; width:760px; height:760px; right:-170px; top:170px; border:1px solid rgba(70,125,255,.16); border-radius:50%; transform:rotateX(64deg) rotateZ(-14deg); box-shadow:0 0 90px rgba(34,211,238,.1),inset 0 0 80px rgba(139,124,255,.08); animation:workOrbit 24s linear infinite; pointer-events:none; }
  @keyframes workOrbit{ to{ transform:rotateX(64deg) rotateZ(346deg); } }
  .work-ambient{ position:absolute; z-index:0; inset:0; pointer-events:none; overflow:hidden; }
  .work-ambient::before,.work-ambient::after{ content:''; position:absolute; width:10px; height:10px; border:1px solid #22D3EE; transform:rotate(45deg); box-shadow:0 0 18px #22D3EE; animation:workFloat 8s ease-in-out infinite; }
  .work-ambient::before{ left:10%; top:30%; } .work-ambient::after{ right:14%; top:72%; border-color:#C084FC; box-shadow:0 0 18px #C084FC; animation-delay:-3s; }
  @keyframes workFloat{ 0%,100%{ translate:0 0; opacity:.35; } 50%{ translate:24px -34px; opacity:1; } }
  .work-inner{ position:relative; z-index:1; max-width:1320px; margin:0 auto; }
  .work-intro{ display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:50px; }
  .work-kicker{ display:flex; align-items:center; gap:12px; color:var(--cyan); font-size:0.76rem; font-weight:700; letter-spacing:0.25em; }
  .work-kicker::before{ content:''; width:22px; height:2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
  .work-intro h2{ max-width:690px; margin:18px 0 0; font:800 clamp(2.5rem,5vw,4.6rem)/1.02 Manrope,sans-serif; letter-spacing:-0.035em; }
  .work-intro h2 span{ color:#B07CFF; }
  .work-intro > p{ max-width:340px; margin:0 0 4px; color:var(--grey); line-height:1.7; }
  .work-grid{ display:grid; gap:14px; }
  .work-closing{ display:flex; justify-content:space-between; align-items:center; gap:28px; margin-top:62px; padding-top:30px; border-top:1px solid rgba(255,255,255,.1); } .work-closing h3{ margin:0; font:800 clamp(1.7rem,3vw,2.7rem)/1.1 Manrope,sans-serif; } .work-actions{ display:flex; gap:12px; flex-wrap:wrap; } .work-action{ display:inline-flex; align-items:center; gap:12px; padding:13px 19px; border:1px solid rgba(255,255,255,.17); border-radius:24px; color:#fff; text-decoration:none; font-size:.78rem; transition:all .2s ease; } .work-action:hover{ border-color:var(--cyan); background:rgba(34,211,238,.08); transform:translateY(-3px); } .work-action.primary{ border-color:transparent; background:linear-gradient(90deg,#7C3AED,#168BF3); }

  /* Selected Work: compact list with a changing 3D project preview */
  .work-section{ padding:96px 0 100px; background:radial-gradient(ellipse 900px 480px at 50% -10%,rgba(34,211,238,.06),transparent 60%),#050A14; }
  .work-section::before{ background:radial-gradient(circle at 80% 14%,rgba(139,124,255,.12),transparent 28%); }
  .work-section::after{ width:680px; height:680px; right:-250px; top:230px; opacity:.75; }
  .work-inner{ max-width:1180px; }
  .work-intro{ max-width:620px; display:block; margin-bottom:46px; }
  .work-intro h2{ max-width:600px; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.12; letter-spacing:-.02em; }
  .work-intro > p{ max-width:560px; margin-top:14px; }
  .work-body{ display:grid; grid-template-columns:minmax(0,1.72fr) minmax(280px,.78fr); gap:28px; align-items:start; }
  .project-list{ display:flex; flex-direction:column; gap:8px; }
  .project-row{ display:flex; align-items:center; gap:16px; width:100%; padding:15px 18px; border:1px solid var(--line); border-radius:14px; background:rgba(var(--edge-rgb),.025); color:var(--ink); text-align:left; font:inherit; cursor:pointer; transition:background .25s ease,border-color .25s ease,transform .25s ease; }
  .project-row:hover,.project-row:focus-visible{ background:rgba(var(--edge-rgb),.055); transform:translateX(3px); }
  .project-row.active{ border-color:var(--row-accent,var(--cyan)); background:rgba(var(--edge-rgb),.065); }
  .project-row:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
  .row-num{ width:24px; flex-shrink:0; color:var(--grey); font:700 .8rem Manrope,sans-serif; }
  .row-icon{ width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; border-radius:9px; color:var(--row-accent,var(--cyan)); background:color-mix(in srgb,var(--row-accent,var(--cyan)) 14%,transparent); border:1px solid color-mix(in srgb,var(--row-accent,var(--cyan)) 32%,transparent); transition:transform .25s ease; }
  .project-row.active .row-icon{ transform:scale(1.08) rotate(-4deg); }
  .row-text{ flex:1; min-width:0; } .row-tag{ display:block; margin-bottom:3px; color:var(--row-accent,var(--cyan)); font-size:.68rem; font-weight:700; letter-spacing:.05em; } .row-title{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.96rem; font-weight:600; }
  .row-arrow{ width:30px; height:30px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--grey); transition:all .25s ease; }
  .project-row.active .row-arrow,.project-row:hover .row-arrow{ border-color:var(--row-accent,var(--cyan)); color:var(--row-accent,var(--cyan)); transform:translateX(2px); }
  .preview-panel{ position:sticky; top:96px; min-height:360px; padding:24px; border:1px solid var(--line); border-radius:20px; background:rgba(var(--edge-rgb),.035); transform-style:preserve-3d; transition:transform .15s ease-out,border-color .3s ease; will-change:transform; }
  .preview-visual{ position:relative; height:162px; margin-bottom:20px; padding:14px; overflow:hidden; border:1px solid rgba(var(--edge-rgb),.1); border-radius:14px; background:rgba(var(--edge-rgb),.025); transform:translateZ(24px); }
  .pv-bar{ display:flex; gap:5px; margin-bottom:14px; } .pv-bar span{ width:7px; height:7px; border-radius:50%; background:rgba(var(--edge-rgb),.17); }
  .pv-glow{ position:absolute; right:-50px; bottom:-60px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,var(--pv-accent,var(--cyan)) 0%,transparent 70%); opacity:.24; transition:background .4s ease; }
  .pv-orbit{ position:absolute; right:16px; bottom:12px; width:92px; height:48px; border:1px solid var(--pv-accent,var(--cyan)); border-radius:50%; transform:rotate(-24deg); opacity:.75; animation:previewOrbit 6s linear infinite; }
  .pv-orbit::after{ content:''; position:absolute; width:7px; height:7px; top:-4px; left:16px; border-radius:50%; background:var(--pv-accent,var(--cyan)); box-shadow:0 0 14px var(--pv-accent,var(--cyan)); }
  @keyframes previewOrbit{ to{ transform:rotate(336deg); } }
  .pv-icon{ position:relative; z-index:1; width:56px; height:56px; display:grid; place-items:center; border-radius:14px; color:var(--pv-accent,var(--cyan)); background:color-mix(in srgb,var(--pv-accent,var(--cyan)) 16%,transparent); border:1px solid color-mix(in srgb,var(--pv-accent,var(--cyan)) 36%,transparent); transition:all .3s ease; }
  .preview-content{ transform:translateZ(14px); } .pv-tag{ margin-bottom:8px; color:var(--pv-accent,var(--cyan)); font-size:.72rem; font-weight:700; letter-spacing:.06em; } .preview-content h3{ margin-bottom:9px; font:700 1.22rem/1.15 Manrope,sans-serif; } .preview-content p{ margin:0 0 12px; color:var(--grey); font-size:.83rem; line-height:1.58; } .pv-tech{ margin-bottom:16px; color:var(--grey); font-size:.7rem; line-height:1.5; }
  .pv-link{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); text-decoration:none; font-size:.78rem; font-weight:600; transition:gap .2s ease,color .2s ease; } .pv-link:hover{ gap:11px; color:var(--pv-accent,var(--cyan)); }
  .row-detail{ display:none; }
  .work-closing{ margin-top:52px; padding:24px 28px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(120deg,rgba(34,211,238,.06),rgba(139,124,255,.06)); } .work-closing h3{ font-size:1.35rem; }

  .process-section{ position:relative; overflow:hidden; padding:116px 0 126px; background:radial-gradient(ellipse 900px 500px at 50% -10%,rgba(34,211,238,.07),transparent 60%),#050A14; }
  .process-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.42; pointer-events:none; }
  .process-blob{ position:absolute; width:430px; height:430px; border-radius:50%; filter:blur(90px); opacity:.14; pointer-events:none; }
  .process-blob.one{ top:-180px; right:-120px; background:#3B82F6; } .process-blob.two{ bottom:-180px; left:-120px; background:#8B7CFF; }
  .process-inner{ position:relative; z-index:1; max-width:920px; margin:0 auto; padding:0 40px; }
  .process-head{ max-width:650px; margin-bottom:62px; } .process-eyebrow{ margin-bottom:18px; color:var(--cyan); font-size:.78rem; font-weight:700; letter-spacing:.18em; } .process-head h2{ margin:0 0 18px; font:800 clamp(2rem,3.6vw,2.9rem)/1.15 Manrope,sans-serif; } .process-head h2 span{ color:#B07CFF; } .process-head p{ max-width:530px; margin:0; color:var(--grey); line-height:1.7; }
  .process-timeline{ position:relative; } .process-rail{ position:absolute; left:19px; top:20px; bottom:20px; width:2px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.09); } .process-rail-fill{ width:100%; height:0; background:linear-gradient(180deg,var(--cyan),#B07CFF,var(--cyan)); background-size:100% 200%; animation:processEnergy 3s linear infinite; } @keyframes processEnergy{ to{ background-position:0 -200%; } }
  .process-pulse{ position:absolute; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#fff; box-shadow:0 0 9px #fff; animation:processPulse 3.4s linear infinite; } .process-pulse.two{ animation-delay:1.7s; } @keyframes processPulse{ 0%{ top:0; opacity:0; } 8%,92%{ opacity:.9; } 100%{ top:100%; opacity:0; } }
  .process-step{ position:relative; padding:0 0 38px 66px; } .process-step:last-child{ padding-bottom:0; } .process-node{ position:absolute; left:0; top:0; width:40px; height:40px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--step-color) 48%,transparent); border-radius:50%; color:var(--step-color); background:color-mix(in srgb,var(--step-color) 10%,var(--surface-1)); font:800 .76rem Manrope,sans-serif; transition:transform .35s ease,box-shadow .35s ease; } .process-step.active .process-node{ transform:scale(1.1); box-shadow:0 0 0 6px color-mix(in srgb,var(--step-color) 14%,transparent),0 0 25px color-mix(in srgb,var(--step-color) 45%,transparent); }
  .process-card{ position:relative; display:flex; gap:20px; padding:24px 26px; overflow:hidden; border:1px solid transparent; border-radius:18px; background:linear-gradient(var(--surface-1),var(--surface-1)) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--step-color) 45%,transparent),rgba(var(--edge-rgb),.05)) border-box; transform-style:preserve-3d; transition:transform .15s ease-out,box-shadow .3s ease; } .process-card:hover{ box-shadow:0 24px 48px -30px color-mix(in srgb,var(--step-color) 55%,transparent); } .process-card::after{ content:''; position:absolute; top:0; left:-60%; width:35%; height:100%; background:linear-gradient(115deg,transparent,rgba(var(--edge-rgb),.08),transparent); transform:skewX(-18deg); pointer-events:none; } .process-card.is-visible::after{ animation:processSweep 1.1s ease-out .2s 1; } @keyframes processSweep{ to{ left:130%; } }
  .process-icon{ flex:0 0 52px; height:52px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--step-color) 34%,transparent); border-radius:14px; color:var(--step-color); background:color-mix(in srgb,var(--step-color) 14%,transparent); transform:translateZ(28px); animation:processIconFloat 4.5s ease-in-out infinite; } @keyframes processIconFloat{ 50%{ transform:translateZ(28px) translateY(-5px) rotate(3deg); } }
  .process-body{ min-width:0; } .process-label{ margin-bottom:8px; color:var(--step-color); font-size:.72rem; font-weight:700; letter-spacing:.1em; } .process-card h3{ margin:0 0 10px; font:700 1.28rem/1.2 Manrope,sans-serif; transform:translateZ(18px); } .process-card p{ margin:0 0 16px; color:var(--grey); font-size:.92rem; line-height:1.65; transform:translateZ(10px); } .process-tags{ display:flex; flex-wrap:wrap; gap:8px; } .process-tags span{ padding:6px 11px; border:1px solid var(--line); border-radius:18px; color:var(--grey); background:rgba(255,255,255,.02); font-size:.72rem; }
  .process-approach{ max-width:620px; margin:86px auto 0; padding-top:48px; border-top:1px solid rgba(var(--edge-rgb),.08); text-align:center; } .process-approach h3{ margin:14px 0; font:700 clamp(1.5rem,2.6vw,2rem)/1.3 Manrope,sans-serif; } .process-approach h3 span{ color:#B07CFF; } .process-approach p{ margin:0; color:var(--grey); line-height:1.7; }
  .process-cta{ margin-top:54px; text-align:center; } .process-cta a{ display:inline-flex; align-items:center; gap:12px; padding-bottom:6px; border-bottom:1px solid rgba(var(--edge-rgb),.2); color:var(--ink); font:700 clamp(1.25rem,2.5vw,1.8rem) Manrope,sans-serif; text-decoration:none; transition:gap .25s ease,color .25s ease,border-color .25s ease; } .process-cta a:hover{ gap:18px; color:var(--cyan); border-color:var(--cyan); }

  .tech-section{ position:relative; overflow:hidden; padding:96px 0 100px; background:#060B17; }
  .tech-section::after{ display:none; }
  .tech-blob{ position:absolute; width:380px; height:380px; border-radius:50%; filter:blur(90px); opacity:.12; pointer-events:none; } .tech-blob.one{ top:-180px; right:-100px; background:#3B82F6; animation:driftA 24s ease-in-out infinite; } .tech-blob.two{ bottom:-190px; left:-120px; background:#8B7CFF; animation:driftB 28s ease-in-out infinite; }
  .tech-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 40px; }
  .tech-head{ max-width:650px; margin:0 auto 46px; text-align:center; } .tech-eyebrow{ display:flex; justify-content:center; margin-bottom:16px; color:var(--cyan); font-size:.78rem; font-weight:700; letter-spacing:.18em; } .tech-head h2{ margin:0 0 14px; font:800 clamp(2rem,3.5vw,2.9rem)/1.12 Manrope,sans-serif; } .tech-head h2 span{ color:#B07CFF; } .tech-head p{ max-width:560px; margin:0 auto; color:var(--grey); line-height:1.65; }

  /* ---------- 3D hub diagram ---------- */
  .tech-hubwrap{ position:relative; }
  .tech-diagram{ position:relative; width:100%; aspect-ratio:1000/660; max-width:980px; margin:0 auto; perspective:1400px; }
  .tech-diagram svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }

  .t-pipe-base{ stroke:rgba(var(--edge-rgb),.10); stroke-width:9; fill:none; stroke-linecap:round; transition:stroke .3s ease; }
  .t-pipe-core{ stroke:rgba(5,10,20,.65); stroke-width:5; fill:none; stroke-linecap:round; }
  .t-pipe-sheen{ stroke:rgba(var(--edge-rgb),.18); stroke-width:1.6; fill:none; stroke-linecap:round; }
  .t-pipe-flow{ fill:none; stroke-linecap:round; stroke-dasharray:8 20; opacity:.9; transition:opacity .3s ease,stroke-width .3s ease; }
  .t-pipe-flow.in{ animation:flowIn 2.4s linear infinite; }
  .t-pipe-flow.out{ animation:flowOut 2.4s linear infinite; }
  @keyframes flowIn{ to{ stroke-dashoffset:-280; } }
  @keyframes flowOut{ to{ stroke-dashoffset:280; } }
  .t-pipe-base.hi{ stroke:rgba(var(--edge-rgb),.26); }
  .t-pipe-flow.hi{ stroke-width:4; opacity:1; }

  .t-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; cursor:pointer; z-index:2; }
  .t-node-card{
    position:relative; display:flex; align-items:center; flex-wrap:nowrap; gap:12px;
    width:max-content; padding:13px 20px 13px 13px; border-radius:15px;
    background:linear-gradient(155deg,#FCFEFF,#E3EAF3);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:
      0 1px 0 rgba(255,255,255,.95) inset,
      0 -4px 8px rgba(0,0,0,.07) inset,
      0 4px 0 color-mix(in srgb,var(--n-accent) 30%,#AAB6C8),
      0 22px 30px -14px rgba(0,0,0,.6),
      0 0 0 1px color-mix(in srgb,var(--n-accent) 18%,transparent);
    transform:perspective(600px) rotateX(6deg) translateZ(0);
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
    animation:tCardFloat 4.5s ease-in-out infinite;
    animation-delay:var(--n-delay,0s);
  }
  @keyframes tCardFloat{ 0%,100%{ transform:perspective(600px) rotateX(6deg) translateY(0); } 50%{ transform:perspective(600px) rotateX(6deg) translateY(-5px); } }
  .t-node-card::before{ content:''; position:absolute; left:7px; right:7px; bottom:-7px; height:11px; border-radius:0 0 13px 13px; background:linear-gradient(180deg,#C7D0DE,#9FADC2); z-index:-1; }
  .t-node-card::after{ content:''; position:absolute; left:13px; right:13px; bottom:-14px; height:11px; border-radius:0 0 13px 13px; background:#8B98AC; opacity:.5; z-index:-2; }
  .t-node-card .t-icon{
    position:relative; width:32px; height:32px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(150deg, color-mix(in srgb,var(--n-accent) 85%,#fff), var(--n-accent));
    color:#08131F; box-shadow:0 3px 10px -2px color-mix(in srgb,var(--n-accent) 75%,transparent), 0 1px 0 rgba(255,255,255,.6) inset;
  }
  .t-node-card .t-icon::after{
    content:''; position:absolute; inset:-5px; border-radius:13px; border:1.5px solid color-mix(in srgb,var(--n-accent) 55%,transparent);
    opacity:.7; animation:tIconPulse 2.6s ease-in-out infinite; animation-delay:var(--n-delay,0s);
  }
  @keyframes tIconPulse{ 0%{ transform:scale(1); opacity:.6; } 70%{ transform:scale(1.28); opacity:0; } 100%{ opacity:0; } }
  .t-node-card .t-label{
    flex:1 1 auto; white-space:nowrap;
    font:800 .86rem/1.15 'Manrope',sans-serif; letter-spacing:.01em;
    color:color-mix(in srgb, var(--n-accent) 58%, #0C1524);
  }
  .t-node:hover .t-node-card, .t-node.hi .t-node-card{
    transform:perspective(600px) rotateX(2deg) translateY(-8px) scale(1.05);
    box-shadow:
      0 1px 0 rgba(255,255,255,.95) inset,
      0 -4px 8px rgba(0,0,0,.07) inset,
      0 4px 0 color-mix(in srgb,var(--n-accent) 45%,#AAB6C8),
      0 30px 40px -16px color-mix(in srgb,var(--n-accent) 45%,rgba(0,0,0,.65)),
      0 0 0 1.5px color-mix(in srgb,var(--n-accent) 40%,transparent);
  }

  .t-node-tile{
    position:relative; width:60px; height:60px; border-radius:16px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    background:linear-gradient(155deg,#F7FAFD,#DCE4EE);
    box-shadow:0 2px 0 rgba(255,255,255,.9) inset, 0 -3px 6px rgba(0,0,0,.08) inset, 0 16px 22px -12px rgba(0,0,0,.55);
    color:#0C1524; font:800 .58rem/1.15 'Manrope',sans-serif; padding:4px;
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  }
  .t-node-tile::before{ content:''; position:absolute; left:5px; right:5px; bottom:-6px; height:9px; border-radius:0 0 13px 13px; background:linear-gradient(180deg,#C7D0DE,#AAB6C8); z-index:-1; }
  .t-node-tile::after{ content:''; position:absolute; left:9px; right:9px; bottom:-11px; height:9px; border-radius:0 0 13px 13px; background:#8B98AC; opacity:.5; z-index:-2; }
  .t-node-tile span.t-dot{ position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--n-accent); box-shadow:0 0 6px var(--n-accent); }
  .t-node:hover .t-node-tile, .t-node.hi .t-node-tile{ transform:translateY(-5px) scale(1.08); box-shadow:0 3px 0 rgba(255,255,255,.9) inset, 0 -3px 6px rgba(0,0,0,.08) inset, 0 22px 28px -12px color-mix(in srgb,var(--n-accent) 55%,rgba(0,0,0,.6)); }

  .t-hub{ position:absolute; left:50%; top:50%; width:160px; height:160px; transform:translate(-50%,-50%); transform-style:preserve-3d; transition:transform .25s ease-out; z-index:1; }
  .t-hub-shadow{ position:absolute; left:50%; bottom:-14px; width:150px; height:34px; background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%); transform:translateX(-50%); filter:blur(4px); }
  .t-hub-ring{ position:absolute; inset:-16px; border-radius:50%; border:1.5px solid rgba(34,211,238,.4); animation:hubSpin 14s linear infinite; }
  .t-hub-ring.r2{ inset:-30px; border-color:rgba(139,124,255,.28); animation-duration:20s; animation-direction:reverse; }
  @keyframes hubSpin{ to{ transform:rotate(360deg); } }
  .t-hub-disc{
    position:absolute; inset:0; border-radius:32%;
    background:radial-gradient(circle at 32% 26%,#1A4A63,#071722 72%);
    border:2px solid rgba(34,211,238,.55);
    box-shadow:0 0 0 8px rgba(34,211,238,.07), 0 30px 50px -16px rgba(0,0,0,.75), inset 0 3px 10px rgba(255,255,255,.12), inset 0 -14px 22px rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center; color:var(--cyan);
    animation:hubPulse 4s ease-in-out infinite;
  }
  @keyframes hubPulse{ 0%,100%{ transform:scale(1) translateZ(0); } 50%{ transform:scale(1.035) translateZ(0); } }
  .t-hub-logo{
    position:relative; width:66px; height:66px; border-radius:16px; overflow:hidden;
    background:#fff; box-shadow:0 6px 18px -6px rgba(0,0,0,.6), 0 0 0 1px rgba(34,211,238,.25);
  }
  .t-hub-logo img{ position:absolute; width:213%; height:213%; left:-64%; top:-25%; max-width:none; }

  .tech-caption{ max-width:560px; margin:30px auto 0; text-align:center; min-height:46px; font-size:.92rem; color:var(--grey); transition:opacity .2s ease; }
  .tech-caption b{ color:var(--ink); }

  .tech-principle{ margin:60px auto 0; padding-top:34px; border-top:1px solid rgba(255,255,255,.08); text-align:center; max-width:700px; } .tech-principle h3{ margin:12px 0 8px; font:700 1.45rem Manrope,sans-serif; } .tech-principle h3 span{ color:#B07CFF; } .tech-principle p{ margin:0 0 20px; color:var(--grey); font-size:.82rem; line-height:1.6; }
  .tech-flow{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
  .tech-flow span.step{ font-size:.78rem; font-weight:600; color:var(--ink); padding:7px 14px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
  .tech-flow span.step:last-child{ color:var(--cyan); border-color:rgba(34,211,238,.35); background:rgba(34,211,238,.06); }
  .tech-flow .arrow{ color:var(--grey); font-size:.8rem; }

  @media (prefers-reduced-motion: reduce){
    .t-hub-ring, .t-hub-disc, .t-pipe-flow{ animation:none !important; }
  }

  /* Compact process layout with an interactive 3D visual */
  .process-section{ padding:96px 0 100px; }
  .process-inner{ max-width:1180px; }
  .process-head{ max-width:720px; margin-bottom:42px; }
  .process-layout{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:34px; align-items:center; }
  .process-timeline{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .process-timeline > #processSteps{ display:contents; }
  .process-rail{ display:none; }
  .process-step{ padding:0; }
  .process-node{ z-index:2; top:14px; left:14px; width:28px; height:28px; font-size:.62rem; }
  .process-card{ min-height:190px; padding:22px 18px 18px 56px; gap:0; border-radius:15px; }
  .process-icon{ position:absolute; top:18px; right:16px; width:34px; height:34px; flex-basis:34px; border-radius:10px; font-size:.9rem; transform:translateZ(20px); }
  .process-card h3{ padding-right:40px; font-size:1rem; }
  .process-card p{ font-size:.78rem; line-height:1.52; }
  .process-tags{ gap:5px; }
  .process-tags span{ padding:5px 8px; font-size:.62rem; }
  .process-visual{ position:relative; min-height:470px; display:grid; place-items:center; perspective:1000px; transform-style:preserve-3d; --visual-x:0deg; --visual-y:0deg; }
  .visual-halo{ position:absolute; width:310px; height:310px; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.2),transparent 66%); filter:blur(18px); animation:visualPulse 4s ease-in-out infinite; }
  @keyframes visualPulse{ 50%{ transform:scale(1.12); opacity:.7; } }
  .visual-orbit{ position:absolute; width:330px; height:150px; border:1px solid rgba(34,211,238,.48); border-radius:50%; transform:rotateX(65deg) rotateZ(-16deg) rotate(var(--visual-y)); box-shadow:0 0 28px rgba(34,211,238,.16); animation:visualOrbit 12s linear infinite; }
  .visual-orbit::before,.visual-orbit::after{ content:''; position:absolute; border:1px solid rgba(139,124,255,.42); border-radius:50%; inset:22px 48px; } .visual-orbit::after{ inset:-18px 78px; border-color:rgba(255,209,102,.35); }
  @keyframes visualOrbit{ to{ transform:rotateX(65deg) rotateZ(344deg); } }
  .visual-core{ position:relative; z-index:2; width:150px; height:150px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); border-radius:30px; background:linear-gradient(145deg,rgba(35,63,133,.92),rgba(10,19,43,.96)); box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 42px rgba(59,130,246,.35); transform:rotateX(calc(8deg + var(--visual-x))) rotateY(calc(-12deg + var(--visual-y))) translateZ(22px); transition:transform .18s ease; }
  .visual-core::before{ content:''; position:absolute; inset:13px; border:1px solid rgba(34,211,238,.35); border-radius:20px; animation:coreSpin 8s linear infinite; }
  @keyframes coreSpin{ to{ transform:rotate(360deg); } }
  .core-symbol{ color:#F4F7FB; font:800 2.2rem Manrope,sans-serif; text-shadow:0 0 20px #22D3EE; }
  .visual-node{ position:absolute; z-index:3; width:58px; height:58px; display:grid; place-items:center; border:1px solid var(--node-color); border-radius:16px; color:var(--node-color); background:rgba(7,14,32,.9); box-shadow:0 0 20px color-mix(in srgb,var(--node-color) 35%,transparent); font:800 .72rem Manrope,sans-serif; animation:nodeDrift 4s ease-in-out infinite; }
  .visual-node.n1{ top:8%; left:16%; --node-color:#22D3EE; } .visual-node.n2{ top:18%; right:4%; --node-color:#C084FC; animation-delay:-1.2s; } .visual-node.n3{ bottom:13%; left:5%; --node-color:#FFD166; animation-delay:-2.2s; } .visual-node.n4{ bottom:7%; right:14%; --node-color:#2DD4BF; animation-delay:-3.1s; }
  @keyframes nodeDrift{ 50%{ translate:0 -12px; rotate:4deg; } }
  .visual-caption{ position:absolute; bottom:3%; left:50%; width:100%; transform:translateX(-50%); color:#8192AF; font-size:.68rem; letter-spacing:.12em; text-align:center; }
  .process-approach{ margin-top:58px; }

  .scroll-hint{
    position:absolute; bottom:26px; left:40px; z-index:4;
    display:flex; align-items:center; gap:8px; font-size:0.78rem; color:var(--grey);
  }
  .scroll-hint .dot{ width:5px; height:5px; border-radius:50%; background:var(--cyan); animation:blink 1.8s ease-in-out infinite; }
  @keyframes blink{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } }

  .ripple{
    position:fixed; z-index:5; pointer-events:none;
    width:14px; height:14px; border-radius:50%;
    border:1.5px solid var(--ripple-color, #22D3EE);
    transform:translate(-50%,-50%) scale(1);
    animation:rippleOut 0.7s ease-out forwards;
  }
  @keyframes rippleOut{
    to{ width:220px; height:220px; opacity:0; }
  }

  @media (prefers-reduced-motion: reduce){
    .scroll-hint .dot{ animation:none; opacity:0.8; }
    .blob{ animation:none; }
    .services-orbit,.service-tile,.scene-glow,.scene-ui-chart i,.scene-phone,.scene-spark,.brand-orbit,.scene-person,.tile-icon::before,.list-icon::before,.work-section::after,.work-ambient::before,.work-ambient::after,.process-rail-fill,.process-pulse,.process-icon,.process-card::after,.visual-halo,.visual-orbit,.visual-core::before,.visual-node,.tech-section::after,.t-hub-ring,.t-hub-disc,.t-pipe-flow,.t-node-card,.t-node-card .t-icon::after{ animation:none; }
  }

  @media (max-width: 720px){
    .content{ padding:0 22px; }
    .nav-links{ display:none; }
    .cta-row{ flex-direction:column; align-items:flex-start; }
    .text-scrim{ background:linear-gradient(180deg, rgba(5,10,20,0.9) 0%, rgba(5,10,20,0.6) 42%, rgba(5,10,20,0.12) 72%, transparent 100%); }
    .scroll-hint{ left:22px; }
    .services-section{ padding:82px 22px 100px; }
    .services-layout{ grid-template-columns:1fr; gap:34px; }
    .services-visual{ min-height:460px; transform:scale(0.88); transform-origin:center top; margin-bottom:-54px; }
    .services-orbit{ width:380px; height:380px; }
    .service-tile{ width:132px; padding:10px; }
    .tile-a{ left:0; } .tile-b{ left:0; } .tile-c{ right:0; } .tile-d{ right:0; }
    .service-list{ gap:12px; }
    .work-section{ padding:86px 22px 104px; }
    .work-intro,.work-closing{ display:block; }
    .work-intro > p{ margin-top:24px; }
    .work-body{ display:block; }
    .preview-panel{ display:none; }
    .row-detail{ display:block; max-height:0; overflow:hidden; transition:max-height .35s ease; }
    .project-row.active + .row-detail{ max-height:220px; }
    .row-detail-inner{ padding:2px 18px 14px 74px; color:var(--grey); font-size:.84rem; line-height:1.6; }
    .row-detail .tech{ margin-top:8px; color:#65758F; font-size:.7rem; }
    .row-detail a{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:var(--row-accent,var(--cyan)); font-size:.78rem; font-weight:600; text-decoration:none; }
    .work-actions{ margin-top:24px; }
    .process-section{ padding:82px 0 96px; }
    .process-inner{ padding:0 22px; }
    .process-step{ padding-left:56px; padding-bottom:30px; }
    .process-node{ width:34px; height:34px; font-size:.68rem; }
    .process-rail{ left:16px; }
    .process-card{ padding:20px 18px; gap:14px; }
    .process-icon{ flex-basis:42px; height:42px; }
    .process-layout{ grid-template-columns:1fr; }
    .process-timeline{ grid-template-columns:1fr; }
    .process-visual{ min-height:330px; order:-1; }
    .visual-orbit{ width:280px; height:128px; }
    .visual-core{ width:120px; height:120px; }
    .visual-node{ width:48px; height:48px; }
    .tech-section{ padding:78px 0 88px; }
    .tech-inner{ padding:0 22px; }
    .t-node-card{ padding:8px 12px 8px 8px; font-size:.7rem; gap:6px; }
    .t-node-card .t-icon{ width:22px; height:22px; }
    .t-node-tile{ width:44px; height:44px; font-size:.5rem; border-radius:12px; }
    .t-hub{ width:78px; height:78px; }
    .t-hub-logo{ width:40px; height:40px; border-radius:10px; }
    .about-layout{ grid-template-columns:1fr; gap:40px; }
    .about-monolith{ order:-1; min-height:340px; margin-bottom:12px; overflow:visible; }
    .about-cube{ width:180px; height:180px; }
    .about-cube .face span{ font-size:.66rem; }
    .about-podium-glow{ width:220px; height:110px; bottom:18px; }
    .about-stats{ flex-direction:column; gap:18px; }
    .theme-toggle{ width:46px; height:26px; }
    .theme-toggle .tt-knob{ width:19px; height:19px; }
    html[data-theme="light"] .theme-toggle .tt-knob{ transform:translateX(19px) rotateY(180deg); }
    .nav-cta{ padding:9px 15px; font-size:.8rem; }
  }

  /* ---------------- TABLET (iPad / small laptop range) ---------------- */
  @media (max-width:1000px) and (min-width:721px){
    .services-layout{ grid-template-columns:1fr; gap:48px; }
    .services-visual{ min-height:480px; }
    .work-body{ grid-template-columns:1fr; }
    .preview-panel{ position:relative; top:0; }
    .process-layout{ grid-template-columns:1fr; gap:40px; }
    .process-visual{ order:-1; min-height:360px; }
    .about-layout{ grid-template-columns:1fr; gap:44px; }
    .about-monolith{ order:-1; min-height:380px; }
    .t-node-card{ padding:9px 14px 9px 9px; font-size:.76rem; }
    .t-node-tile{ width:50px; height:50px; font-size:.52rem; }
  }

  /* ---------------- SMALL MOBILE ---------------- */
  @media (max-width:420px){
    .brand-name{ display:none; }
    .nav-cta{ padding:8px 13px; font-size:.76rem; }
    .theme-toggle{ margin-right:2px; }
    h1{ font-size:clamp(2rem,10vw,2.6rem); }
    .footer-cols{ gap:30px; }
  }

/* ====================================================================
   Section 2 — continued styles (originally the second inline <style>
   block in index.html: sections/components below hero)
   ==================================================================== */

  /* ================= ABOUT SECTION — rotating monolith ================= */
  .about-section{
    position:relative; overflow:hidden; padding:96px 0 100px;
    background:radial-gradient(ellipse 900px 480px at 78% 15%, rgba(52,211,153,.08), transparent 60%), #05090F;
  }
  .about-blob{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.16; pointer-events:none; }
  .about-blob.one{ width:460px; height:460px; top:-160px; left:-160px; background:#34D399; animation:driftA 26s ease-in-out infinite; }
  .about-blob.two{ width:400px; height:400px; bottom:-190px; right:-130px; background:#FBBF24; animation:driftB 30s ease-in-out infinite; }
  .about-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 40px; }
  .about-eyebrow{ margin-bottom:14px; color:#34D399; font-size:.78rem; font-weight:700; letter-spacing:.18em; }

  .about-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.92fr); gap:60px; align-items:center; }
  .about-copy h2{ margin:0 0 16px; font:800 clamp(1.7rem,2.9vw,2.35rem)/1.26 Manrope,sans-serif; }
  .about-copy h2 span{ display:block; background:linear-gradient(90deg,#34D399,#FBBF24); -webkit-background-clip:text; background-clip:text; color:transparent; margin-top:2px; }
  .about-copy p{ margin:0 0 13px; max-width:34rem; color:var(--grey); line-height:1.7; font-size:.95rem; }
  .about-copy h3{ margin:22px 0 10px; font:700 1.18rem/1.35 Manrope,sans-serif; }
  .about-copy h3 span{ color:#B07CFF; }

  .about-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 26px; }
  .about-tags span{ padding:7px 13px; border-radius:16px; font-size:.72rem; font-weight:600; color:var(--ink); border:1px solid var(--line); background:rgba(var(--edge-rgb),.03); transition:border-color .25s ease,color .25s ease; }
  .about-tags span:hover{ border-color:color-mix(in srgb,var(--t-color,#34D399) 55%,transparent); color:var(--t-color,#34D399); }

  .about-stats{ display:flex; gap:36px; margin-bottom:26px; }
  .about-stat b{ display:block; margin-bottom:4px; font:700 .68rem Manrope,sans-serif; letter-spacing:.12em; }
  .about-stat.mission b{ color:#34D399; }
  .about-stat.vision b{ color:#FBBF24; }
  .about-stat span{ display:block; max-width:220px; color:var(--ink); font-size:.86rem; font-weight:600; line-height:1.5; }

  /* ---- rotating monolith scene ---- */
  .about-monolith{ position:relative; min-height:440px; display:grid; place-items:center; perspective:1500px; }
  .about-podium-glow{ position:absolute; left:50%; width:340px; height:180px; border-radius:50%; background:radial-gradient(ellipse, rgba(52,211,153,.22), transparent 70%); filter:blur(10px); bottom:38px; transform:translateX(-50%); animation:podiumPulse 4s ease-in-out infinite; }
  @keyframes podiumPulse{ 50%{ transform:scale(1.08); opacity:.75; } }
  .about-particle{ position:absolute; width:5px; height:5px; border-radius:50%; opacity:.5; animation:particleDrift 6s ease-in-out infinite; }
  @keyframes particleDrift{ 50%{ transform:translateY(-16px); opacity:.9; } }
  .about-tilt{ transform-style:preserve-3d; transform:rotateX(10deg) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .25s ease-out; }
  .about-cube{ position:relative; width:250px; height:250px; transform-style:preserve-3d; animation:cubeSpin 26s linear infinite; }
  .about-cube:hover{ animation-play-state:paused; }
  @keyframes cubeSpin{ to{ transform:rotateY(360deg); } }
  .about-cube .face{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px;
    padding:30px 28px; border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -30px 50px -30px rgba(0,0,0,.6);
  }
  .about-cube .f1{ transform:translateZ(125px); background:linear-gradient(160deg, rgba(52,211,153,.16), #070C0A 78%); }
  .about-cube .f2{ transform:rotateY(90deg) translateZ(125px); background:linear-gradient(160deg, rgba(251,191,36,.16), #0C0A06 78%); }
  .about-cube .f3{ transform:rotateY(180deg) translateZ(125px); background:linear-gradient(160deg, rgba(96,165,250,.16), #060A12 78%); }
  .about-cube .f4{ transform:rotateY(270deg) translateZ(125px); background:linear-gradient(160deg, rgba(176,124,255,.16), #0A0714 78%); }
  .about-cube .face .f-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
  .about-cube .f1 .f-icon{ color:#34D399; background:rgba(52,211,153,.14); }
  .about-cube .f2 .f-icon{ color:#FBBF24; background:rgba(251,191,36,.14); }
  .about-cube .f3 .f-icon{ color:#60A5FA; background:rgba(96,165,250,.14); }
  .about-cube .f4 .f-icon{ color:#B07CFF; background:rgba(176,124,255,.14); }
  .about-cube .face .f-label{ font-size:.68rem; font-weight:700; letter-spacing:.1em; color:var(--grey); }
  .about-cube .face h4{ margin:0; font:700 1.08rem/1.3 Manrope,sans-serif; color:var(--ink); }
  .about-cube .face p{ margin:0; font-size:.8rem; line-height:1.55; color:var(--grey); max-width:190px; }
  .about-cta-link{ display:inline-flex; align-items:center; gap:12px; padding-bottom:6px; border-bottom:1px solid rgba(var(--edge-rgb),.2); color:var(--ink); font:700 clamp(1.1rem,2.2vw,1.45rem) Manrope,sans-serif; text-decoration:none; transition:gap .25s ease,color .25s ease,border-color .25s ease; }
  .about-cta-link:hover{ gap:18px; color:#34D399; border-color:#34D399; }

  @media (prefers-reduced-motion: reduce){
    .about-blob,.about-cube,.about-podium-glow,.about-particle{ animation:none !important; }
  }

  /* ================= CONTACT / CLOSING CTA ================= */
  .contact-section{ position:relative; overflow:hidden; padding:100px 0 0; background:#020306; }
  .contact-network{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }
  .contact-section::after{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 900px 520px at 50% 4%, transparent 30%, #020306 84%); pointer-events:none; }
  .contact-inner{ position:relative; z-index:1; max-width:900px; margin:0 auto; padding:0 40px; text-align:center; transform:translate(calc(var(--cam-x, 0) * -10px), calc(var(--cam-y, 0) * -6px)); transition:transform .1s linear; }
  .contact-eyebrow{ display:flex; justify-content:center; margin-bottom:20px; color:var(--cyan); font-size:.78rem; font-weight:700; letter-spacing:.18em; }
  .contact-inner h2{ margin:0 0 22px; font:800 clamp(2.2rem,5vw,4rem)/1.08 Manrope,sans-serif; letter-spacing:-.01em; }
  .contact-inner h2 span{ background:linear-gradient(90deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .contact-inner p{ max-width:38rem; margin:0 auto 40px; color:var(--grey); font-size:1.05rem; line-height:1.75; }

  .contact-actions{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:72px; }
  .magnetic-btn{
    position:relative; display:inline-flex; align-items:center; gap:10px; padding:17px 32px; border-radius:50px;
    background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#04070D; font:700 1rem Manrope,sans-serif; text-decoration:none;
    box-shadow:0 20px 44px -18px rgba(34,211,238,.45); transition:transform .18s ease-out, box-shadow .3s ease;
  }
  .magnetic-btn:hover{ box-shadow:0 26px 54px -16px rgba(34,211,238,.6); }
  .contact-secondary{
    display:inline-flex; align-items:center; gap:10px; color:var(--ink); font:700 1rem Manrope,sans-serif; text-decoration:none;
    padding-bottom:6px; border-bottom:1px solid rgba(var(--edge-rgb),.2); transition:gap .25s ease,color .25s ease,border-color .25s ease;
  }
  .contact-secondary:hover{ gap:16px; color:var(--cyan); border-color:var(--cyan); }

  .contact-banner{
    position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    max-width:1180px; margin:0 auto; padding:38px 40px; border-top:1px solid rgba(var(--edge-rgb),.08);
  }
  .contact-banner-text .contact-eyebrow{ justify-content:flex-start; margin-bottom:10px; }
  .contact-banner-text strong{ font:700 clamp(1.3rem,2.6vw,1.9rem)/1.3 Manrope,sans-serif; color:var(--ink); }
  .contact-fab{
    flex-shrink:0; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
    color:#04070D; background:linear-gradient(135deg,var(--cyan),var(--violet)); text-decoration:none;
    box-shadow:0 16px 36px -14px rgba(34,211,238,.45); transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  }
  .contact-fab:hover{ transform:rotate(45deg) scale(1.08); box-shadow:0 22px 44px -12px rgba(139,124,255,.55); }


  @media (max-width:720px){
    .contact-section{ padding:96px 0 0; }
    .contact-inner{ padding:0 22px; }
    .contact-actions{ flex-direction:column; margin-bottom:80px; }
    .contact-banner{ padding:30px 22px; flex-direction:column; align-items:flex-start; }
  }

  /* ================= START A PROJECT (mail CTA) ================= */
  @property --sp-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .sp-section{ position:relative; overflow:hidden; padding:96px 0 100px; background:radial-gradient(ellipse 1100px 700px at 50% 15%, #0A1226, #04070D 68%); }
  .sp-starfield{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }
  .sp-blob{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.14; pointer-events:none; }
  .sp-blob.one{ width:420px; height:420px; top:-140px; right:-120px; background:#22D3EE; animation:driftA 25s ease-in-out infinite; }
  .sp-blob.two{ width:380px; height:380px; bottom:-160px; left:-120px; background:#8B7CFF; animation:driftB 29s ease-in-out infinite; }
  .sp-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 40px; }
  .sp-eyebrow{ margin-bottom:16px; color:var(--cyan); font-size:.78rem; font-weight:700; letter-spacing:.18em; }

  .sp-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); gap:56px; align-items:center; }
  .sp-center{ max-width:520px; text-align:left; }
  .sp-center .sp-eyebrow{ display:flex; justify-content:flex-start; }
  .sp-copy p{ margin-left:0; margin-right:0; }
  .sp-mail-fallback{ text-align:left; }
  .sp-heading-wrap{ perspective:800px; margin-bottom:18px; }
  .sp-copy h2{
    margin:0; font:800 clamp(1.9rem,3.6vw,2.7rem)/1.22 Manrope,sans-serif;
    transform-style:preserve-3d; transform:rotateX(var(--sp-hx,0deg)) rotateY(var(--sp-hy,0deg));
    transition:transform .3s cubic-bezier(.22,1,.36,1);
    text-shadow:
      0 1px 0 rgba(34,211,238,.55),
      0 2px 0 rgba(34,211,238,.42),
      0 3px 0 rgba(34,211,238,.32),
      0 4px 0 rgba(34,211,238,.22),
      0 8px 18px rgba(0,0,0,.55),
      0 0 40px rgba(139,124,255,.25);
  }
  .sp-copy p{ margin:16px auto 0; max-width:32rem; color:var(--grey); line-height:1.75; font-size:.98rem; }

  /* floating 3D decor — glass orb + wireframe ring + diamond, drifting near the heading */
  .sp-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; perspective:1000px; overflow:hidden; }
  .sp-orb{
    position:absolute; right:10%; top:12%; width:120px; height:120px; border-radius:50%;
    background:radial-gradient(circle at 34% 30%, rgba(139,124,255,.55), rgba(34,211,238,.12) 60%, transparent 75%);
    box-shadow:0 0 60px rgba(139,124,255,.25), inset 0 0 30px rgba(255,255,255,.08);
    animation:spOrbFloat 9s ease-in-out infinite;
  }
  @keyframes spOrbFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-14px,22px) scale(1.06); } }
  .sp-ring{
    position:absolute; left:8%; top:20%; width:130px; height:130px; border-radius:50%;
    border:1.5px solid rgba(34,211,238,.4); transform-style:preserve-3d;
    transform:rotateX(70deg) rotateZ(-12deg); box-shadow:0 0 40px rgba(34,211,238,.12);
    animation:spRingSpin 14s linear infinite;
  }
  @keyframes spRingSpin{ to{ transform:rotateX(70deg) rotateZ(348deg); } }
  .sp-diamond{
    position:absolute; right:16%; bottom:14%; width:34px; height:34px;
    background:linear-gradient(135deg, rgba(52,211,153,.85), rgba(34,211,238,.5));
    border-radius:8px; box-shadow:0 0 24px rgba(52,211,153,.4);
    animation:spDiamondSpin 10s ease-in-out infinite;
  }
  @keyframes spDiamondSpin{ 0%,100%{ transform:rotate(45deg) translateY(0); } 50%{ transform:rotate(225deg) translateY(-18px); } }

  /* right-side illustration — floats free (transparent PNG), no boxed frame */
  .sp-visual{
    position:relative; z-index:1; perspective:1100px;
    opacity:0; transform:translateY(56px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  }
  .sp-visual.is-visible{ opacity:1; transform:translateY(0); }
  .sp-visual-frame{
    position:relative;
    transform-style:preserve-3d; transform:rotateX(var(--sp-vx,0deg)) rotateY(var(--sp-vy,0deg));
    transition:transform .25s ease-out;
    animation:spVisualFloat 6s ease-in-out infinite;
  }
  @keyframes spVisualFloat{ 50%{ transform:rotateX(var(--sp-vx,0deg)) rotateY(var(--sp-vy,0deg)) translateY(-10px); } }
  .sp-visual-inner{ position:relative; line-height:0; transform:translateZ(30px); }
  .sp-visual-inner img{
    display:block; width:100%; height:auto;
    filter:drop-shadow(0 24px 28px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(56,130,246,.22));
  }
  .sp-visual-ground{
    position:absolute; left:50%; bottom:2%; width:70%; height:26px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(56,130,246,.28), transparent 72%);
    filter:blur(6px); transform:translateX(-50%); animation:spGroundPulse 6s ease-in-out infinite;
  }
  @keyframes spGroundPulse{ 50%{ opacity:.6; transform:translateX(-50%) scale(1.08); } }
  .sp-visual-glow{
    position:absolute; inset:-15%; z-index:-1; border-radius:50%;
    background:radial-gradient(circle, rgba(56,130,246,.20), transparent 70%);
    filter:blur(46px); animation:spOrbFloat 8s ease-in-out infinite;
  }

  /* animated rotating-gradient border mail button */
  .sp-mail-cta{
    position:relative; display:inline-block; margin-top:38px; border-radius:60px; padding:3px;
    background:conic-gradient(from var(--sp-angle), rgba(34,211,238,.9), rgba(139,124,255,.9), rgba(52,211,153,.85), rgba(34,211,238,.9));
    animation:spBorderSpin 7s linear infinite;
    box-shadow:0 30px 60px -30px rgba(34,211,238,.4);
    text-decoration:none;
  }
  @keyframes spBorderSpin{ to{ --sp-angle:360deg; } }
  .sp-mail-cta::after{
    content:''; position:absolute; inset:-8px; border-radius:68px; border:1.5px solid rgba(34,211,238,.45);
    animation:spPing 2.4s cubic-bezier(0,0,.2,1) infinite; pointer-events:none;
  }
  @keyframes spPing{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.16); opacity:0; } }
  .sp-mail-cta-inner{
    display:flex; align-items:center; gap:16px; padding:19px 38px 19px 22px; border-radius:58px;
    background:#080C15; color:#F4F7FB; font:700 1.08rem Manrope,sans-serif;
    transition:transform .2s ease-out, background .25s ease;
  }
  .sp-mail-cta:hover .sp-mail-cta-inner{ background:#0A0F1C; }
  .sp-mail-icon{
    position:relative; width:46px; height:46px; border-radius:50%; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#04070D;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .sp-mail-cta:hover .sp-mail-icon{ transform:rotate(-10deg) scale(1.08); }
  .sp-mail-icon svg{ transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
  .sp-mail-icon .sp-icon-fly{ position:absolute; opacity:0; transform:translate(-14px,14px) rotate(-25deg); }
  .sp-mail-cta:hover .sp-mail-icon .sp-icon-mail{ opacity:0; transform:translate(14px,-14px) rotate(25deg); }
  .sp-mail-cta:hover .sp-mail-icon .sp-icon-fly{ opacity:1; transform:translate(0,0) rotate(0deg); }

  .sp-mail-fallback{ margin:22px 0 0; color:var(--grey); font-size:.88rem; }
  .sp-mail-fallback a{ color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(var(--edge-rgb),.3); transition:color .2s ease, border-color .2s ease; }
  .sp-mail-fallback a:hover{ color:var(--cyan); border-color:var(--cyan); }

  @media (prefers-reduced-motion: reduce){
    .sp-blob,.sp-mail-cta,.sp-mail-cta::after,.sp-orb,.sp-ring,.sp-diamond,.sp-visual-frame,.sp-visual-glow,.sp-visual-ground{ animation:none !important; }
    .sp-visual{ transition:none; }
  }

  @media (max-width:900px){
    .sp-layout{ grid-template-columns:1fr; gap:44px; }
    .sp-center{ max-width:none; }
    .sp-visual{ max-width:420px; margin:0 auto; }
  }
  @media (max-width:600px){
    .sp-section{ padding:88px 0 96px; }
    .sp-inner{ padding:0 22px; }
    .sp-mail-cta-inner{ padding:16px 26px 16px 16px; font-size:.96rem; gap:12px; }
    .sp-mail-icon{ width:40px; height:40px; }
  }

  /* ================= FOOTER ================= */
  .site-footer{ position:relative; overflow:hidden; padding:80px 0 0; background:#03050A; }
  .footer-sheen{
    position:absolute; top:0; left:0; width:100%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(var(--edge-rgb),.06) 40%, rgba(34,211,238,.55) 50%, rgba(var(--edge-rgb),.06) 60%, transparent);
    background-size:220% 100%; animation:sheenMove 6s linear infinite;
  }
  @keyframes sheenMove{ to{ background-position:-220% 0; } }
  .footer-grid-bg{
    position:absolute; inset:0; z-index:0; opacity:.5;
    background-image:linear-gradient(rgba(var(--edge-rgb),.025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--edge-rgb),.025) 1px, transparent 1px);
    background-size:60px 60px;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
  }
  .footer-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 40px; }

  .footer-cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:32px; padding-bottom:56px; }
  .footer-brand .brand{ margin-bottom:18px; }
  .footer-brand .brand-mark{ animation:brandGlow 3.5s ease-in-out infinite; }
  @keyframes brandGlow{ 50%{ box-shadow:0 0 30px rgba(34,211,238,.6); } }
  .footer-brand h3{ margin:0 0 14px; font:700 1.06rem/1.4 Manrope,sans-serif; color:var(--ink); max-width:15rem; }
  .footer-tags{ display:flex; flex-wrap:wrap; gap:8px 6px; color:var(--grey); font-size:.78rem; }
  .footer-tags span:not(:last-child)::after{ content:'·'; margin-left:6px; color:#3A4A63; }

  .footer-col h4{ margin:0 0 18px; font-size:.72rem; font-weight:700; letter-spacing:.16em; color:var(--cyan); }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .footer-col a, .footer-col span.plain{ color:var(--grey); font-size:.88rem; text-decoration:none; transition:color .2s ease, transform .2s ease; display:inline-block; }
  .footer-col a:hover{ color:var(--ink); transform:translateX(3px); }

  .footer-connect .connect-label{ margin-bottom:4px; font-size:.7rem; font-weight:700; letter-spacing:.08em; color:#5A6B85; }
  .footer-connect .connect-email{ display:block; margin-bottom:16px; color:var(--ink); font-weight:600; }
  .footer-connect .connect-email:hover{ color:var(--cyan); }
  .footer-social{ display:flex; gap:10px; margin-top:4px; }
  .footer-social a{
    width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:9px;
    border:1px solid var(--line); color:var(--grey); transition:color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .footer-social a:hover{ color:var(--cyan); border-color:rgba(34,211,238,.45); transform:translateY(-3px); }

  .footer-cta{ padding:20px 22px; border-radius:16px; border:1px solid var(--line); background:rgba(var(--edge-rgb),.02); }
  .footer-cta p{ margin:0 0 12px; color:var(--grey); font-size:.86rem; line-height:1.5; }
  .footer-cta a{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font:700 .92rem Manrope,sans-serif; text-decoration:none; transition:gap .2s ease, color .2s ease; }
  .footer-cta a:hover{ gap:13px; color:var(--cyan); }

  .footer-bottom{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding:24px 0 32px; border-top:1px solid rgba(var(--edge-rgb),.06);
    color:#5A6B85; font-size:.8rem;
  }
  .footer-bottom strong{ color:var(--grey); font-weight:600; }

  @media (prefers-reduced-motion: reduce){
    .footer-sheen,.footer-brand .brand-mark{ animation:none !important; }
  }

  @media (max-width:900px){
    .footer-cols{ grid-template-columns:1fr 1fr; }
    .footer-brand{ grid-column:1 / -1; }
  }
  @media (max-width:600px){
    .site-footer{ padding:64px 0 0; }
    .footer-inner{ padding:0 22px; }
    .footer-cols{ grid-template-columns:1fr; gap:36px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; padding-bottom:26px; }
  }

  /* ================================================================
     LIGHT THEME — scoped per-section via CSS custom properties, so
     toggling never affects sections it isn't explicitly applied to.
     Self-contained "device" visuals (the services 3D scene, the
     process delivery visualization, the tech hub, the about cube)
     stay intentionally dark in both themes — a dark object on a
     light floor reads as a focal point, not a bug.
     ================================================================ */
  .stage, .services-section, .work-section, .process-section,
  .tech-section, .about-section, .contact-section, .sp-section, .site-footer{
    transition:background-color .5s ease;
  }
  html[data-theme="light"] .stage,
  html[data-theme="light"] .services-section,
  html[data-theme="light"] .work-section,
  html[data-theme="light"] .process-section,
  html[data-theme="light"] .tech-section,
  html[data-theme="light"] .about-section,
  html[data-theme="light"] .contact-section,
  html[data-theme="light"] .sp-section,
  html[data-theme="light"] .site-footer{
    --ink:#0B1220;
    --grey:#57667E;
    --line:rgba(10,20,40,.10);
    --edge-rgb:10,20,40;
    --surface-1:#F5F8FB;
    /* `color` is only inherited as a resolved value, not re-evaluated per
       descendant — headings/paragraphs below that never set their own
       `color` would otherwise keep inheriting <body>'s dark-mode text
       color instead of picking up the --ink override above. Re-assert
       it here so it recomputes at this boundary and cascades correctly. */
    color:var(--ink);
  }
  html[data-theme="light"] .stage{
    background:radial-gradient(ellipse 1400px 900px at 30% 20%, #EAF1FB, #DCE6F5 70%);
    --scrim-1:rgba(230,238,250,0.9);
    --scrim-2:rgba(230,238,250,0.6);
    --scrim-3:rgba(230,238,250,0.1);
    --tag-bg:rgba(255,255,255,0.55);
  }
  html[data-theme="light"] .blob{ opacity:.28; }
  html[data-theme="light"] h1 .grad{ filter:brightness(0.85) saturate(1.15); }
  html[data-theme="light"] .marquee-banner{
    background:#F4F6FA;
    border-top-color:rgba(37,99,235,.3); border-bottom-color:rgba(124,58,237,.25);
    box-shadow:0 0 24px rgba(37,99,235,.08);
  }
  html[data-theme="light"] .marquee-sheen{
    background:linear-gradient(100deg, transparent 20%, rgba(10,20,40,.05) 45%, rgba(37,99,235,.12) 50%, rgba(10,20,40,.05) 55%, transparent 80%);
    background-size:250% 100%;
  }
  html[data-theme="light"] .marquee-group span{
    background:linear-gradient(90deg, #2563EB, #7C3AED);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  html[data-theme="light"] .marquee-group span.dot{ color:#2563EB; -webkit-text-fill-color:initial; background:none; }
  html[data-theme="light"] .services-section{
    background:
      radial-gradient(circle at 22% 48%, rgba(59,130,246,0.10), transparent 32%),
      radial-gradient(circle at 78% 20%, rgba(139,124,255,0.08), transparent 30%),
      #F5F8FB;
  }
  html[data-theme="light"] .work-section{ background:radial-gradient(ellipse 900px 480px at 50% -10%,rgba(34,211,238,.05),transparent 60%),#F2F5FA; }
  html[data-theme="light"] .process-section{ background:radial-gradient(ellipse 900px 500px at 50% -10%,rgba(34,211,238,.06),transparent 60%),#F5F8FB; }
  html[data-theme="light"] .tech-section{ background:#F5F8FB; }
  html[data-theme="light"] .about-section{ background:radial-gradient(ellipse 900px 480px at 78% 15%, rgba(52,211,153,.10), transparent 60%), #F5F8FB; }
  html[data-theme="light"] .contact-section{ background:#EEF2F8; }
  html[data-theme="light"] .contact-section::after{ background:radial-gradient(ellipse 900px 520px at 50% 4%, transparent 30%, #EEF2F8 84%); }
  html[data-theme="light"] .sp-section{ background:#F5F8FB; }
  html[data-theme="light"] .sp-starfield{ opacity:.25; }
  html[data-theme="light"] .sp-copy h2{
    text-shadow:
      0 1px 0 rgba(34,211,238,.35),
      0 2px 0 rgba(139,124,255,.28),
      0 3px 10px rgba(10,20,40,.18),
      0 0 28px rgba(139,124,255,.15);
  }
  html[data-theme="light"] .sp-mail-cta-inner{ background:#0C1220; }
  html[data-theme="light"] .site-footer{ background:#ECEFF4; }

  /* keep intentionally-dark "object" surfaces dark in both themes for contrast/pop */
  html[data-theme="light"] .t-hub-disc,
  html[data-theme="light"] .about-cube .face,
  html[data-theme="light"] .sp-mail-cta,
  html[data-theme="light"] .services-visual,
  html[data-theme="light"] .process-visual{ color-scheme:dark; }

  html[data-theme="light"] .services-orbit,
  html[data-theme="light"] .service-console,
  html[data-theme="light"] .scene-art{ filter:drop-shadow(0 20px 34px rgba(10,20,40,.18)); }

  html[data-theme="light"] .list-icon{ color:#5B7BAA; }

  html[data-theme="light"] .about-blob{ opacity:.22; }
  html[data-theme="light"] .sp-blob{ opacity:.2; }
  html[data-theme="light"] .tech-blob{ opacity:.18; }
  html[data-theme="light"] .process-blob{ opacity:.1; }

  html[data-theme="light"] .t-node-card,
  html[data-theme="light"] .t-node-tile{
    box-shadow:0 2px 0 rgba(255,255,255,.9) inset, 0 -3px 6px rgba(0,0,0,.06) inset, 0 18px 30px -14px rgba(10,20,40,.35);
  }

  html[data-theme="light"] .sp-field input::placeholder,
  html[data-theme="light"] .sp-field textarea::placeholder{ color:#8A97AC; }

  html[data-theme="light"] .footer-tags span:not(:last-child)::after,
  html[data-theme="light"] .footer-connect .connect-label,
  html[data-theme="light"] .footer-bottom{ color:#7A8AA3; }

  @media (prefers-reduced-motion: reduce){
    .services-section, .work-section, .process-section, .tech-section, .about-section, .contact-section, .sp-section, .site-footer{ transition:none; }
  }

  /* ---------------- 3D theme toggle ---------------- */
  .theme-toggle{
    position:relative; width:52px; height:30px; flex-shrink:0; margin-right:6px;
    border-radius:20px; border:1px solid var(--line); cursor:pointer; padding:0;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    perspective:200px; -webkit-tap-highlight-color:transparent;
  }
  .theme-toggle:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
  .theme-toggle .tt-track-icon{ position:absolute; top:50%; width:12px; height:12px; transform:translateY(-50%); opacity:.55; color:var(--grey); transition:opacity .3s ease; }
  .theme-toggle .tt-sun{ left:7px; }
  .theme-toggle .tt-moon{ right:7px; }
  .theme-toggle .tt-knob{
    position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
    transform-style:preserve-3d; transform:translateX(0) rotateY(0deg);
    transition:transform .5s cubic-bezier(.34,1.56,.64,1);
    background:radial-gradient(circle at 32% 28%, #FFF6D6, #FFB454 55%, #E88A2E 100%);
    box-shadow:0 3px 8px rgba(0,0,0,.4), 0 0 14px rgba(255,180,84,.6), inset 0 1px 1px rgba(255,255,255,.6);
  }
  html[data-theme="light"] .theme-toggle .tt-knob{
    transform:translateX(22px) rotateY(180deg);
    background:radial-gradient(circle at 32% 28%, #FFFFFF, #CBD5E6 60%, #98A7C2 100%);
    box-shadow:0 3px 8px rgba(0,0,0,.18), 0 0 12px rgba(180,200,230,.7), inset 0 1px 1px rgba(255,255,255,.9);
  }
  html[data-theme="light"] .theme-toggle .tt-sun{ opacity:.35; }
  html[data-theme="light"] .theme-toggle .tt-moon{ opacity:.9; color:var(--ink); }
  html[data-theme="light"] .theme-toggle .tt-sun ~ .tt-moon{ opacity:.9; }
  html:not([data-theme="light"]) .theme-toggle .tt-sun{ opacity:.9; color:#FFB454; }
  .theme-toggle .tt-knob::before{
    content:''; position:absolute; inset:2px; border-radius:50%; backface-visibility:hidden;
    background:repeating-conic-gradient(rgba(255,255,255,.5) 0deg 4deg, transparent 4deg 30deg);
    opacity:.5; transform:rotateY(180deg);
  }
  @media (prefers-reduced-motion: reduce){
    .theme-toggle .tt-knob{ transition:none; }
  }

  #cursorAura{
    position:fixed; inset:0; z-index:9999;
    pointer-events:none;
  }
  @media (pointer: coarse), (prefers-reduced-motion: reduce){
    #cursorAura{ display:none; }
  }

  /* ---------------- 3D scroll-nav (replaces plain up/down arrows) ---------------- */
  .scroll-nav{
    position:fixed; right:26px; bottom:26px; z-index:500;
    display:flex; flex-direction:column; gap:14px;
  }
  .snb{
    position:relative; width:54px; height:54px; border:none; padding:0; cursor:pointer;
    background:none; -webkit-tap-highlight-color:transparent;
    opacity:0; transform:translateY(16px) scale(.85); pointer-events:none;
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
  }
  .snb.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .snb-ring{
    position:absolute; inset:-6px; border-radius:50%;
    border:1.5px solid rgba(34,211,238,.45);
    animation:snbSpin 10s linear infinite;
  }
  .snb.down .snb-ring{ border-color:rgba(139,124,255,.4); animation-direction:reverse; animation-duration:13s; }
  @keyframes snbSpin{ to{ transform:rotate(360deg); } }
  .snb-disc{
    position:relative; width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 32% 26%, #1A4A63, #071722 72%);
    border:2px solid rgba(34,211,238,.5);
    box-shadow:0 10px 26px -8px rgba(0,0,0,.7), 0 0 0 6px rgba(34,211,238,.06), inset 0 2px 6px rgba(255,255,255,.12);
    color:var(--cyan);
    transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  }
  .snb.down .snb-disc{ border-color:rgba(139,124,255,.5); color:var(--violet); box-shadow:0 10px 26px -8px rgba(0,0,0,.7), 0 0 0 6px rgba(139,124,255,.06), inset 0 2px 6px rgba(255,255,255,.12); }
  .snb:hover .snb-disc{ transform:translateY(-3px) scale(1.06); box-shadow:0 16px 32px -10px rgba(0,0,0,.75), 0 0 0 8px rgba(34,211,238,.1), inset 0 2px 6px rgba(255,255,255,.14); }
  .snb.down:hover .snb-disc{ box-shadow:0 16px 32px -10px rgba(0,0,0,.75), 0 0 0 8px rgba(139,124,255,.1), inset 0 2px 6px rgba(255,255,255,.14); }
  .snb:active .snb-disc{ transform:translateY(0) scale(.94); }
  .snb-chev{ position:relative; width:18px; height:18px; }
  .snb-chev i{
    position:absolute; left:2px; width:10px; height:10px;
    border-top:2.4px solid currentColor; border-right:2.4px solid currentColor;
    animation:snbChevPulse 1.8s ease-in-out infinite;
  }
  .snb.up .snb-chev i{ top:6px; transform:rotate(-45deg); }
  .snb.up .snb-chev i:nth-child(2){ top:11px; animation-delay:.15s; opacity:.55; }
  .snb.down .snb-chev i{ top:2px; transform:rotate(135deg); }
  .snb.down .snb-chev i:nth-child(2){ top:7px; animation-delay:.15s; opacity:.55; }
  @keyframes snbChevPulse{ 0%,100%{ transform:translateY(0) rotate(var(--r,-45deg)); } 50%{ transform:translateY(-3px) rotate(var(--r,-45deg)); } }
  .snb.up .snb-chev i{ --r:-45deg; }
  .snb.down .snb-chev i{ --r:135deg; }

  @media (prefers-reduced-motion: reduce){
    .snb-ring, .snb-chev i{ animation:none !important; }
  }
  @media (max-width:600px){
    .scroll-nav{ right:16px; bottom:16px; gap:10px; }
    .snb{ width:46px; height:46px; }
  }