/* ===================================================================
     ASCENSION DESIGN LAB · Style 11 · Immersive 3D Hero
     Zero dependencies. Pure HTML / CSS / JS. CSS 3D transforms + Canvas.
     =================================================================== */

  :root{
    --bg:        #05060b;
    --bg-2:      #0a0d1a;
    --ink:       #eef1fb;
    --ink-dim:   #9aa3c4;
    --ink-faint: #5a628a;
    --accent:    #6ef2ff;   /* electric cyan */
    --accent-2:  #b477ff;   /* violet */
    --accent-3:  #ff5c9d;   /* hot magenta */
    --line:      rgba(140,160,230,.14);
    --panel:     rgba(18,22,40,.55);
    --shadow:    0 30px 80px -20px rgba(0,0,0,.85);
    --maxw:      1200px;
    --tiltX:     0deg;
    --tiltY:     0deg;
    --px:        0px;
    --py:        0px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection{ background: var(--accent-2); color:#06070d; }

  a{ color:inherit; text-decoration:none; }

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

  .eyebrow{
    font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
    color:var(--accent); font-weight:600;
    display:inline-flex; align-items:center; gap:.7em;
  }
  .eyebrow::before{
    content:""; width:34px; height:1px;
    background:linear-gradient(90deg,transparent,var(--accent));
  }

  /* ==================== SCENE / HERO ==================== */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex; align-items:center;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(100,120,255,.16), transparent 55%),
      radial-gradient(90% 70% at 80% 110%, rgba(180,119,255,.16), transparent 60%),
      linear-gradient(180deg, #05060b 0%, #080a16 55%, #05060b 100%);
    perspective: 1400px;
    perspective-origin: 50% 42%;
  }

  /* Atmospheric fog / vignette layered above 3D but below text */
  .fog{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    background:
      radial-gradient(60% 50% at 50% 55%, transparent 30%, rgba(5,6,11,.55) 78%, rgba(5,6,11,.92) 100%),
      linear-gradient(180deg, rgba(5,6,11,.35), transparent 25%, transparent 70%, rgba(5,6,11,.9));
  }

  /* Canvas particle depth field */
  #stars{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; }

  /* The 3D world that tilts with the mouse */
  .scene{
    position:absolute; inset:0; z-index:2;
    transform-style:preserve-3d;
    transform: rotateX(var(--tiltX)) rotateY(var(--tiltY));
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
  }

  /* Perspective grid floor */
  .grid-floor{
    position:absolute; left:50%; top:72%;
    width:280vw; height:200vh;
    margin-left:-140vw;
    transform-style:preserve-3d;
    transform: rotateX(80deg) translateZ(-40px);
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 0%, #000 0%, transparent 72%);
            mask-image: radial-gradient(60% 60% at 50% 0%, #000 0%, transparent 72%);
    opacity:.9;
    animation: floorDrift 18s linear infinite;
  }
  @keyframes floorDrift{ to{ background-position:0 78px, 78px 0; } }

  /* Floating depth planes (parallax cards behind the object) */
  .depth-layer{ position:absolute; inset:0; transform-style:preserve-3d; }

  .plane{
    position:absolute;
    border:1px solid var(--line);
    border-radius:18px;
    background:
      linear-gradient(135deg, rgba(110,242,255,.05), rgba(180,119,255,.04));
    backdrop-filter: blur(2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  .plane b{
    position:absolute; left:14px; top:12px;
    font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--ink-faint); font-weight:600;
  }
  .plane span{
    position:absolute; left:14px; bottom:12px; right:14px;
    font-size:1.35rem; font-weight:700; color:var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .p1{ width:190px; height:118px; left:9%;  top:26%;  transform: translateZ(-260px) rotateY(16deg); }
  .p2{ width:170px; height:108px; right:11%; top:22%;  transform: translateZ(-320px) rotateY(-18deg); }
  .p3{ width:210px; height:130px; left:13%; bottom:16%; transform: translateZ(-140px) rotateY(12deg); }
  .p4{ width:160px; height:104px; right:9%; bottom:20%; transform: translateZ(-200px) rotateY(-14deg); }

  /* ---- The floating 3D core object ---- */
  .core-stage{
    position:absolute; left:50%; top:47%;
    width:0; height:0;
    transform-style:preserve-3d;
    animation: bob 7s ease-in-out infinite;
  }
  @keyframes bob{
    0%,100%{ transform: translateZ(60px) translateY(-6px); }
    50%    { transform: translateZ(60px) translateY(14px); }
  }

  .core{
    position:absolute; transform-style:preserve-3d;
    left:0; top:0;
    animation: spin 22s linear infinite;
  }
  @keyframes spin{
    from{ transform: rotateX(-18deg) rotateY(0deg); }
    to  { transform: rotateX(-18deg) rotateY(360deg); }
  }

  /* Crystal built from 8 triangular faces meeting at top+bottom apex.
     We fake an octahedral gem with 4 upper + 4 lower CSS faces. */
  .gem{ position:absolute; transform-style:preserve-3d; left:-90px; top:-90px; width:180px; height:180px; }
  .facet{
    position:absolute; left:50%; top:0;
    width:0; height:0;
    border-left:90px solid transparent;
    border-right:90px solid transparent;
    margin-left:-90px;
    transform-origin: 50% 0;
    opacity:.92;
    backface-visibility:visible;
    filter: drop-shadow(0 0 22px rgba(110,242,255,.25));
  }
  /* upper facets: apex up */
  .up{ border-bottom:128px solid; top:-38px; }
  .u0{ transform: rotateY(0deg)   rotateX(28deg); border-bottom-color: rgba(110,242,255,.55); }
  .u1{ transform: rotateY(90deg)  rotateX(28deg); border-bottom-color: rgba(150,180,255,.5); }
  .u2{ transform: rotateY(180deg) rotateX(28deg); border-bottom-color: rgba(180,119,255,.55); }
  .u3{ transform: rotateY(270deg) rotateX(28deg); border-bottom-color: rgba(120,150,255,.5); }
  /* lower facets: apex down */
  .dn{ border-top:128px solid; top:90px; }
  .d0{ transform: rotateY(0deg)   rotateX(-28deg); border-top-color: rgba(90,200,255,.5); }
  .d1{ transform: rotateY(90deg)  rotateX(-28deg); border-top-color: rgba(120,140,240,.42); }
  .d2{ transform: rotateY(180deg) rotateX(-28deg); border-top-color: rgba(255,92,157,.42); }
  .d3{ transform: rotateY(270deg) rotateX(-28deg); border-top-color: rgba(120,140,240,.42); }

  /* orbiting rings around the gem */
  .ring{
    position:absolute; left:-140px; top:-140px;
    width:280px; height:280px;
    border-radius:50%;
    border:2px solid rgba(110,242,255,.32);
    box-shadow: 0 0 30px rgba(110,242,255,.14), inset 0 0 30px rgba(110,242,255,.08);
    transform-style:preserve-3d;
  }
  .ring.r1{ transform: rotateX(78deg) rotateZ(0deg); animation: ringspin 12s linear infinite; }
  .ring.r2{ width:340px;height:340px;left:-170px;top:-170px; border-color:rgba(180,119,255,.28);
            transform: rotateX(64deg) rotateY(30deg); animation: ringspin 17s linear infinite reverse; }
  .ring.r3{ width:410px;height:410px;left:-205px;top:-205px; border-style:dashed; border-color:rgba(255,92,157,.2);
            transform: rotateX(86deg); animation: ringspin 26s linear infinite; }
  @keyframes ringspin{ to{ transform: rotateX(78deg) rotateZ(360deg); } }

  /* glow core behind gem */
  .core-glow{
    position:absolute; left:-160px; top:-160px; width:320px; height:320px; border-radius:50%;
    background: radial-gradient(circle, rgba(110,242,255,.4), rgba(180,119,255,.18) 45%, transparent 70%);
    filter: blur(6px);
    animation: pulse 5s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{ opacity:.75; transform:scale(1);} 50%{ opacity:1; transform:scale(1.08);} }

  /* ---- Hero copy (in front of everything) ---- */
  .hero-copy{
    position:relative; z-index:4;
    max-width:640px;
    transform: translate3d(var(--px), var(--py), 0);
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .hero h1{
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    line-height: .98;
    font-weight: 800;
    letter-spacing:-.03em;
    margin:.55em 0 .34em;
  }
  .hero h1 .grad{
    background: linear-gradient(105deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .hero p.lede{
    font-size: clamp(1rem, 1.6vw, 1.22rem);
    color: var(--ink-dim);
    max-width: 40ch;
    margin-bottom: 2rem;
  }

  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .btn{
    display:inline-flex; align-items:center; gap:.6em;
    padding:.95em 1.6em; border-radius:999px;
    font-weight:700; font-size:.95rem; letter-spacing:.01em;
    cursor:pointer; border:1px solid transparent;
    transition: transform .2s ease, box-shadow .3s ease, background .3s ease;
    will-change: transform;
  }
  .btn-primary{
    color:#05060b;
    background: linear-gradient(105deg, var(--accent), var(--accent-2));
    box-shadow: 0 12px 34px -8px rgba(110,242,255,.5);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow:0 18px 44px -8px rgba(150,180,255,.6); }
  .btn-ghost{
    color:var(--ink); border-color:var(--line);
    background: rgba(255,255,255,.03);
  }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

  .scroll-cue{
    position:absolute; left:50%; bottom:26px; z-index:5;
    transform:translateX(-50%);
    font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
    color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .scroll-cue i{
    width:22px; height:34px; border:1.5px solid var(--line); border-radius:12px; position:relative;
  }
  .scroll-cue i::after{
    content:""; position:absolute; left:50%; top:6px; width:3px; height:7px; margin-left:-1.5px;
    background:var(--accent); border-radius:2px; animation: wheel 1.7s ease-in-out infinite;
  }
  @keyframes wheel{ 0%{opacity:0;transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0;transform:translateY(10px);} }

  /* Top brand bar */
  .topbar{
    position:absolute; top:0; left:0; right:0; z-index:6;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 26px;
  }
  .brand{ display:flex; align-items:center; gap:.7em; font-weight:800; letter-spacing:.02em; }
  .brand .mark{
    width:26px; height:26px; border-radius:7px;
    background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
    box-shadow: 0 0 18px rgba(110,242,255,.5);
  }
  .brand small{ color:var(--ink-faint); font-weight:600; letter-spacing:.28em; font-size:.6rem; text-transform:uppercase; }
  .topnav{ display:flex; gap:26px; font-size:.85rem; color:var(--ink-dim); }
  .topnav a:hover{ color:var(--accent); }

  /* ==================== FEATURE STRIP ==================== */
  .features{
    position:relative; z-index:2;
    padding: clamp(70px, 12vw, 130px) 0;
    background:
      radial-gradient(80% 60% at 15% 0%, rgba(110,242,255,.06), transparent 60%),
      linear-gradient(180deg, #05060b, #070912);
    border-top:1px solid var(--line);
  }
  .sec-head{ max-width:620px; margin-bottom:56px; }
  .sec-head h2{
    font-size: clamp(1.9rem, 4vw, 3rem); font-weight:800; letter-spacing:-.02em;
    margin:.4em 0 .35em; line-height:1.05;
  }
  .sec-head p{ color:var(--ink-dim); font-size:1.05rem; max-width:52ch; }

  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; perspective:1000px; }
  .card{
    position:relative;
    padding:30px 26px 34px;
    border:1px solid var(--line);
    border-radius:20px;
    background: var(--panel);
    overflow:hidden;
    transform-style:preserve-3d;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    will-change:transform;
  }
  .card::before{
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
    background: radial-gradient(120% 90% at var(--mx,50%) var(--my,0%), rgba(110,242,255,.12), transparent 60%);
    pointer-events:none;
  }
  .card:hover{ border-color: rgba(110,242,255,.4); box-shadow: var(--shadow); }
  .card:hover::before{ opacity:1; }
  .card .num{
    font-size:.68rem; letter-spacing:.3em; color:var(--accent); font-weight:700; text-transform:uppercase;
  }
  .card h3{ font-size:1.3rem; margin:16px 0 10px; letter-spacing:-.01em; }
  .card p{ color:var(--ink-dim); font-size:.96rem; }
  .card .ficon{
    width:52px; height:52px; border-radius:13px; margin-bottom:6px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(110,242,255,.16), rgba(180,119,255,.14));
    border:1px solid var(--line);
  }
  .card .ficon svg{ width:26px; height:26px; }

  /* ==================== METRICS BAND ==================== */
  .band{
    display:flex; flex-wrap:wrap; gap:26px 60px; justify-content:center;
    padding:44px 26px; margin-top:64px;
    border:1px solid var(--line); border-radius:22px;
    background: linear-gradient(120deg, rgba(110,242,255,.05), rgba(180,119,255,.05));
  }
  .stat{ text-align:center; min-width:140px; }
  .stat b{
    display:block; font-size:clamp(2rem,4.5vw,3rem); font-weight:800; letter-spacing:-.02em;
    background: linear-gradient(105deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    font-variant-numeric: tabular-nums;
  }
  .stat span{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }

  /* ==================== CTA ==================== */
  .cta{
    position:relative; z-index:2; overflow:hidden;
    padding: clamp(80px, 14vw, 160px) 0;
    text-align:center;
    background:
      radial-gradient(70% 90% at 50% 120%, rgba(180,119,255,.22), transparent 60%),
      radial-gradient(60% 80% at 50% -20%, rgba(110,242,255,.16), transparent 55%),
      #05060b;
    border-top:1px solid var(--line);
  }
  .cta h2{
    font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight:800; letter-spacing:-.03em; line-height:1;
    margin-bottom:.4em;
  }
  .cta h2 .grad{
    background: linear-gradient(105deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
  .cta p{ color:var(--ink-dim); font-size:1.12rem; max-width:48ch; margin:0 auto 2.4rem; }

  .cta-halo{
    position:absolute; left:50%; top:50%; width:min(720px,90vw); height:min(720px,90vw);
    transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
    background: conic-gradient(from 0deg, transparent, rgba(110,242,255,.14), transparent 40%, rgba(180,119,255,.14), transparent);
    border-radius:50%; filter:blur(30px); animation: halo 24s linear infinite;
  }
  @keyframes halo{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

  footer.site{
    padding:40px 26px 96px; border-top:1px solid var(--line);
    color:var(--ink-faint); font-size:.82rem;
    display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  }
  footer.site .brand small{ display:none; }

  /* ==================== DESIGN LAB CHROME ==================== */
  .lab-back, .lab-note{
    position:fixed; bottom:14px; z-index:60;
    font-size:.72rem; letter-spacing:.02em;
    background: rgba(10,12,22,.82);
    border:1px solid var(--line); border-radius:999px;
    padding:.5em .95em; backdrop-filter: blur(8px);
    color:var(--ink-dim);
  }
  .lab-back{ left:14px; font-weight:600; }
  .lab-back:hover{ color:var(--accent); border-color:var(--accent); }
  .lab-note{ right:14px; }
  .lab-note b{ color:var(--ink); }

  /* ==================== RESPONSIVE ==================== */
  @media (max-width: 900px){
    .cards{ grid-template-columns:1fr; }
    .topnav{ display:none; }
  }
  @media (max-width: 620px){
    .p1,.p2{ display:none; }
    .p3{ left:6%; bottom:12%; width:150px; height:96px; }
    .p4{ right:5%; bottom:16%; width:130px; height:84px; }
    .hero-copy{ transform:none !important; }
    .band{ gap:22px 34px; }
    .lab-note{ font-size:.62rem; max-width:56vw; }
  }
  @media (max-width: 390px){
    .wrap{ padding:0 18px; }
  }

  /* ==================== REDUCED MOTION ==================== */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
       transition-duration:.001ms !important; }
    html{ scroll-behavior:auto; }
    .scene{ transform:none !important; }
    .core{ transform: rotateX(-18deg) rotateY(-32deg) !important; }
    .core-stage{ transform: translateZ(60px) !important; }
    .grid-floor{ animation:none; }
    .cta-halo, .core-glow{ animation:none; }
  }


/* inline style= -> class (CSP-clean) */
.dg3dhe1{margin-left:.6em}
.dg3dhe2{justify-content:center; display:inline-flex;}
.dg3dhe3{justify-content:center;}

.lab-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}