@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/outfit-latin-wght-normal.woff2") format("woff2")}@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2")}:root{--bg:#07060b;--bg-2:#0b0912;--panel:#110d1a;--panel-2:#161022;--panel-3:#1c1530;--line:rgba(168,85,247,0.18);--line-strong:rgba(192,132,252,0.34);--line-soft:rgba(255,255,255,0.07);--text:#f5f2fb;--text-2:#bdb6cc;--muted:#958daa;--p-600:#7c3aed;--p-500:#8b5cf6;--p-400:#a855f7;--p-300:#c084fc;--p-200:#d8b4fe;--magenta:#d946ef;--magenta-2:#e879f9;--green:#34d399;--danger:#fca5a5;--grad-hot:linear-gradient(120deg,#a855f7 0%,#d946ef 100%);--grad-btn:linear-gradient(120deg,#9333ea 0%,#c026d3 100%);--grad-text:linear-gradient(100deg,#c084fc 0%,#e879f9 55%,#f0abfc 100%);--font-head:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--section:clamp(72px,9vw,128px);--gutter:clamp(16px,4vw,32px);--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;--header-h:72px;--ease:cubic-bezier(0.22,1,0.36,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--shadow-glow:0 0 0 1px rgba(192,132,252,0.12),0 24px 60px -24px rgba(124,58,237,0.45)}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);background:var(--bg);color-scheme:dark}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}img,svg,video{display:block;max-width:100%}img{height:auto}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;padding:0}h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:700;letter-spacing:-0.025em;line-height:1.1;text-wrap:balance}p{margin:0;text-wrap:pretty}ul,ol{margin:0;padding:0}ul[class],ol[class]{list-style:none}::selection{background:rgba(168,85,247,0.45);color:#fff}:focus-visible{outline:2px solid var(--p-300);outline-offset:3px;border-radius:6px}main:focus{outline:none}[hidden]{display:none !important}.icon{width:20px;height:20px;flex:none}.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}html:not(.js) .js-only{display:none !important}.skip-link{position:fixed;left:16px;top:12px;z-index:200;padding:10px 16px;border-radius:999px;background:#fff;color:#0b0912;font-weight:700;transform:translateY(-160%);transition:transform 0.2s var(--ease)}.skip-link:focus{transform:none}body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(60% 50% at 78% -6%,rgba(124,58,237,0.22),transparent 70%),radial-gradient(45% 40% at 0% 20%,rgba(217,70,239,0.08),transparent 70%),linear-gradient(rgba(168,85,247,0.045) 1px,transparent 1px) 0 0 / 64px 64px,linear-gradient(90deg,rgba(168,85,247,0.045) 1px,transparent 1px) 0 0 / 64px 64px;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0.55) 40%,rgba(0,0,0,0.25) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0.55) 40%,rgba(0,0,0,0.25) 100%)}body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}.container--narrow{max-width:820px}main{display:block;overflow-x:clip}.section{position:relative;padding-block:var(--section)}.section--tight{padding-block:clamp(56px,7vw,96px)}.section--flush-top{padding-top:0}.section-head{max-width:720px;margin-bottom:clamp(36px,5vw,56px)}.section-head--center{margin-inline:auto;text-align:center}.section-head--row{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-5)}.section-head h2,.h2{font-size:clamp(2rem,4.2vw,3.25rem);font-weight:800;letter-spacing:-0.035em;line-height:1.05}.section-head p,.lead{margin-top:var(--sp-4);color:var(--text-2);font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.65}.section-head--center p{margin-inline:auto;max-width:600px}.section-head .eyebrow{margin-bottom:var(--sp-4)}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--p-300)}.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}.display{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:800;letter-spacing:-0.03em;line-height:1.02}.display-2{font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-0.03em;line-height:1.04}.muted{color:var(--muted)}.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--p-200);transition:color 0.2s,gap 0.25s var(--ease)}.link-arrow .icon{width:18px;height:18px;transition:transform 0.25s var(--ease)}.link-arrow:hover{color:#fff}.link-arrow:hover .icon{transform:translateX(4px)}.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:999px;border:1px solid transparent;font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.005em;text-align:center;white-space:nowrap;transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease),border-color 0.3s,background-color 0.3s;-webkit-tap-highlight-color:transparent}.btn .icon{width:18px;height:18px;transition:transform 0.3s var(--ease)}.btn:hover .icon{transform:translateX(3px)}.btn:active{transform:translateY(0) scale(0.98)}.btn--primary{color:#fff;background:var(--grad-btn);border-color:rgba(240,171,252,0.35);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 10px 30px -10px rgba(192,38,211,0.65),0 0 44px -12px rgba(168,85,247,0.75)}.btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.28) 50%,transparent 70%);transform:translateX(-110%);transition:transform 0.8s var(--ease)}.btn--primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 16px 40px -12px rgba(192,38,211,0.8),0 0 60px -10px rgba(168,85,247,0.9)}.btn--primary:hover::after{transform:translateX(110%)}.btn--ghost{color:var(--text);background:rgba(255,255,255,0.03);border-color:rgba(192,132,252,0.3)}.btn--ghost:hover{transform:translateY(-2px);border-color:rgba(216,180,254,0.6);background:rgba(168,85,247,0.12);box-shadow:0 10px 30px -14px rgba(168,85,247,0.6)}.btn--sm{min-height:42px;padding:9px 18px;font-size:14px}.btn--block{width:100%;white-space:normal}.btn[aria-busy="true"]{cursor:progress;opacity:0.8}.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(168,85,247,0.08);color:var(--p-200);font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;line-height:1.3}@media (max-width:380px){.pill{padding-right:12px;font-size:10.5px;letter-spacing:0.06em}}.pill__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--magenta-2);box-shadow:0 0 10px var(--magenta);flex:none}.pill__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--magenta-2);animation:ping 2.4s var(--ease) infinite}@keyframes ping{0%{transform:scale(1);opacity:0.7}80%,100%{transform:scale(3);opacity:0}}.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(168,85,247,0.12);border:1px solid rgba(192,132,252,0.22);color:var(--p-200);font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;line-height:1.4}.tag .icon{width:14px;height:14px}.badge-concept{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(7,6,11,0.78);border:1px solid rgba(255,255,255,0.2);color:#fff;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;line-height:1.3}.badge-concept::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--p-300);box-shadow:0 0 8px var(--p-300)}.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,0.02);color:var(--text-2);font-size:14px;font-weight:600;white-space:nowrap;transition:color 0.2s,border-color 0.2s,background-color 0.2s,transform 0.25s var(--ease)}.chip:hover{color:#fff;border-color:var(--line-strong)}.chip[aria-pressed="true"],.chip[aria-current="true"]{color:#fff;border-color:rgba(232,121,249,0.5);background:linear-gradient(120deg,rgba(147,51,234,0.55),rgba(192,38,211,0.45));box-shadow:0 6px 20px -10px rgba(217,70,239,0.8)}.check-list{display:grid;gap:10px}.check-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text-2);line-height:1.5}.check-list .icon{width:18px;height:18px;margin-top:2px;color:var(--green)}.glass{position:relative;background:linear-gradient(180deg,rgba(25,18,40,0.78),rgba(15,11,25,0.78));border:1px solid var(--line);border-radius:var(--r-lg)}.hairline{position:relative}.hairline::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(216,180,254,0.6),rgba(168,85,247,0.08) 38%,rgba(168,85,247,0.04) 62%,rgba(232,121,249,0.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.card{position:relative;isolation:isolate;overflow:hidden;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(23,17,37,0.85),rgba(13,10,21,0.85));transition:transform 0.45s var(--ease),border-color 0.3s,box-shadow 0.45s var(--ease)}.glow-card{position:relative;isolation:isolate}.glow-card::after{content:"";position:absolute;z-index:-1;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(closest-side,rgba(168,85,247,0.22),transparent);opacity:0;transform:translate(var(--mx,50%),var(--my,50%));transition:opacity 0.35s;pointer-events:none}.glow-card:hover::after{opacity:1}.card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-glow)}.icon-tile{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;color:#f3e8ff;background:linear-gradient(145deg,rgba(168,85,247,0.35),rgba(217,70,239,0.12));border:1px solid rgba(216,180,254,0.28);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 10px 26px -12px rgba(168,85,247,0.9)}.icon-tile .icon{width:24px;height:24px}.js [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity 0.9s var(--ease) calc(var(--d,0) * 90ms),transform 0.9s var(--ease) calc(var(--d,0) * 90ms)}.js [data-reveal="fade"]{transform:none}.js [data-reveal="scale"]{transform:scale(0.94)}.js [data-reveal="left"]{transform:translate3d(-28px,0,0)}.js [data-reveal].is-in{opacity:1;transform:none}.is-offscreen,.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused !important}.site-header{position:sticky;top:0;z-index:100;height:var(--header-h)}.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,6,13,0.72);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line-soft);opacity:0;transition:opacity 0.35s}.site-header.is-scrolled::before,.menu-open .site-header::before{opacity:1}.site-header__inner{height:100%;display:flex;align-items:center;gap:var(--sp-5)}.brand{display:inline-flex;align-items:center;gap:12px;flex:none;border-radius:12px}.brand__mark{width:40px;height:40px;filter:drop-shadow(0 0 10px rgba(168,85,247,0.55));transition:transform 0.6s var(--ease),filter 0.4s}.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06);filter:drop-shadow(0 0 16px rgba(217,70,239,0.8))}.brand__text{display:grid;line-height:1}.brand__name{font-family:var(--font-head);font-weight:800;font-size:18px;letter-spacing:0.02em;white-space:nowrap}.brand__tag{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:0.06em;color:var(--p-300);vertical-align:2px;margin-left:2px}.brand__sub{margin-top:5px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.32em;color:var(--muted)}.nav{position:relative;margin-left:auto;display:none}.nav__list{display:flex;gap:4px}.nav__link{position:relative;display:block;padding:10px 14px;border-radius:999px;color:var(--text-2);font-size:15px;font-weight:600;transition:color 0.2s}.nav__link:hover,.nav__link[aria-current="page"]{color:#fff}.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--grad-hot);transform:scaleX(0);transform-origin:left;transition:transform 0.35s var(--ease)}.nav__link[aria-current="page"]::after{transform:scaleX(1)}.nav__indicator{display:none}.js .nav.has-indicator .nav__link::after{display:none}.js .nav.has-indicator .nav__indicator{display:block;position:absolute;left:0;bottom:3px;width:1px;height:2px;border-radius:2px;background:var(--grad-hot);box-shadow:0 0 12px rgba(217,70,239,0.9);transform-origin:0 0;transform:translateX(var(--nx,0)) scaleX(var(--nw,0));opacity:var(--no,0);transition:transform 0.45s var(--ease),opacity 0.3s}.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}.site-header__cta{display:none}.menu-toggle{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,0.03)}.menu-toggle__bars{position:relative;width:20px;height:14px}.menu-toggle__bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:#fff;transition:transform 0.35s var(--ease),opacity 0.2s}.menu-toggle__bars i:nth-child(1){top:0}.menu-toggle__bars i:nth-child(2){top:6px}.menu-toggle__bars i:nth-child(3){top:12px}.menu-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.mobile-menu{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(80% 50% at 100% 100%,rgba(124,58,237,0.18),transparent 70%),linear-gradient(180deg,#0b0912,#07060b);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity 0.3s var(--ease),transform 0.4s var(--ease),visibility 0s linear 0.4s}.mobile-menu.is-open{visibility:visible;opacity:1;transform:none;transition:opacity 0.3s var(--ease),transform 0.4s var(--ease),visibility 0s}.mobile-menu__inner{display:flex;flex-direction:column;gap:var(--sp-6);min-height:100%;padding-block:var(--sp-5) var(--sp-7)}.mobile-menu__list li{border-bottom:1px solid var(--line-soft);opacity:0;transform:translateY(10px);transition:opacity 0.4s var(--ease),transform 0.5s var(--ease);transition-delay:calc(var(--i) * 45ms + 60ms)}.mobile-menu.is-open .mobile-menu__list li{opacity:1;transform:none}.mobile-menu__list a{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-family:var(--font-head);font-size:28px;font-weight:700;letter-spacing:-0.02em;color:var(--text-2)}.mobile-menu__list a[aria-current="page"]{color:#fff}.mobile-menu__list a[aria-current="page"]::before{content:"";width:8px;height:8px;margin-right:12px;border-radius:50%;background:var(--magenta-2);box-shadow:0 0 10px var(--magenta)}.mobile-menu__list a[aria-current="page"]{justify-content:flex-start}.mobile-menu__list a[aria-current="page"] .icon{margin-left:auto}.mobile-menu__list .icon{color:var(--p-300)}.mobile-menu__foot{margin-top:auto;display:grid;gap:var(--sp-4)}.mobile-menu__email{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--text-2);font-weight:600;padding:8px}.menu-open{overflow:hidden}@media (min-width:560px){.site-header__cta{display:inline-flex}}@media (min-width:1080px){.nav{display:block;margin-inline:auto}.site-header__actions{margin-left:0}.menu-toggle,.mobile-menu{display:none}}@media (max-width:380px){.brand__name{font-size:16px}.brand__mark{width:34px;height:34px}}.site-footer{position:relative;overflow:hidden;padding-block:var(--sp-8) var(--sp-6);/* no seam:the last section's glow fades into the footer */
  background: linear-gradient(180deg, transparent, rgba(17, 13, 26, 0.55) 140px, var(--bg));
}
main > .section:last-child {
  padding-bottom: var(--sp-8);
}
.site-footer__glow {
  position: absolute;
  left: 50%;
  top: -260px;
  width: 900px;
  height: 420px;
  margin-left: -450px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 58, 237, 0.22), transparent);
  /* fade in from the footer's top edge (no visible line where the glow is clipped) */ -webkit-mask-image:linear-gradient(180deg,transparent 260px,#000 400px);mask-image:linear-gradient(180deg,transparent 260px,#000 400px);pointer-events:none}.site-footer__grid{position:relative;display:grid;gap:var(--sp-7) var(--sp-6);grid-template-columns:1fr 1fr}.site-footer__brand{grid-column:1 / -1;display:grid;gap:var(--sp-5);justify-items:start;max-width:380px}.site-footer__brand p{color:var(--text-2)}.site-footer__title{margin-bottom:var(--sp-4);font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--p-300)}.site-footer ul{list-style:none}.site-footer__col > ul:not(.socials){display:grid;gap:0}.site-footer__col > ul:not(.socials) a,.site-footer__contact > li > span,.site-footer__legal a{padding-block:7px}.site-footer__col > ul:not(.socials):not(.site-footer__contact) a{display:inline-block}.site-footer__col a,.site-footer__contact span{color:var(--text-2);transition:color 0.2s}.site-footer__col a:hover{color:#fff}.site-footer__contact a,.site-footer__contact > li > span{display:inline-flex;align-items:center;gap:10px;word-break:break-word}.site-footer__contact .icon{width:18px;height:18px;color:var(--p-300)}.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-5)}.socials a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,0.03);color:var(--text-2);transition:color 0.2s,border-color 0.2s,transform 0.3s var(--ease)}.socials a:hover{color:#fff;border-color:var(--line-strong);transform:translateY(-3px)}.site-footer__bottom{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--line-soft);color:var(--muted);font-size:14px}.site-footer__legal{display:flex;flex-wrap:wrap;gap:var(--sp-5)}.site-footer__legal a{color:var(--text-2)}.site-footer__legal a:hover{color:#fff}@media (min-width:860px){.site-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}.site-footer__brand{grid-column:auto}}@media (max-width:420px){.site-footer__grid{grid-template-columns:1fr}}.hero{position:relative;padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(48px,7vw,96px)}.hero__grid{display:grid;align-items:center;gap:clamp(24px,4vw,56px)}.hero__copy{position:relative;z-index:2}.hero__copy .display{margin-top:var(--sp-5)}.hero__lead{margin-top:var(--sp-5);max-width:560px;color:var(--text-2);font-size:clamp(1.06rem,1.5vw,1.25rem);line-height:1.6}.hero__ctas{margin-top:var(--sp-6)}.hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:var(--sp-6);color:var(--text-2);font-size:14.5px;font-weight:500}.hero__trust li{display:inline-flex;align-items:center;gap:8px}.hero__trust .icon{width:18px;height:18px;padding:3px;border-radius:50%;color:var(--green);background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.28)}.hero-in{animation:hero-in 1s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 80ms)}@keyframes hero-in{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}@media (min-width:960px){.hero__grid{grid-template-columns:1.05fr 0.95fr}.hero{min-height:calc(92vh - var(--header-h));display:flex;align-items:center}.hero > .container{width:100%}}.hero-stage{position:relative;width:min(100%,600px);aspect-ratio:1;margin-inline:auto;perspective:1100px;animation:stage-in 1.4s var(--ease) 0.25s both}@keyframes stage-in{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:none}}.hero-stage__glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(168,85,247,0.42),rgba(124,58,237,0.14) 55%,transparent 100%);animation:breathe 6s var(--ease-in-out) infinite}@keyframes breathe{0%,100%{transform:scale(0.94);opacity:0.75}50%{transform:scale(1.05);opacity:1}}.hero-stage__floor{position:absolute;left:0;right:0;bottom:2%;height:46%;background:linear-gradient(rgba(192,132,252,0.22) 1px,transparent 1px) 0 0 / 40px 40px,linear-gradient(90deg,rgba(192,132,252,0.22) 1px,transparent 1px) 0 0 / 40px 40px;transform:rotateX(74deg);transform-origin:50% 100%;-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);opacity:0.55}.hero-stage__cube{position:absolute;inset:0;display:grid;place-items:center;z-index:2}.orbits{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.orbit{position:absolute;inset:var(--inset,10%);border-radius:50%;border:1px solid rgba(192,132,252,0.16);border-top-color:rgba(232,121,249,0.75);border-right-color:rgba(192,132,252,0.4);transform-style:preserve-3d;transform:rotateX(var(--rx,72deg)) rotateY(var(--ry,0deg)) rotateZ(0deg);animation:orbit-spin var(--dur,16s) linear infinite}.orbit--1{--inset:6%;--rx:74deg;--ry:-8deg;--dur:18s}.orbit--2{--inset:16%;--rx:66deg;--ry:22deg;--dur:12s;animation-direction:reverse}.orbit--3{--inset:0%;--rx:80deg;--ry:-26deg;--dur:26s;border-style:dashed;border-color:rgba(192,132,252,0.14)}@keyframes orbit-spin{to{transform:rotateX(var(--rx,72deg)) rotateY(var(--ry,0deg)) rotateZ(360deg)}}.orbit__dot{position:absolute;top:-5px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#f5d0fe;box-shadow:0 0 14px 4px rgba(217,70,239,0.75),0 0 2px #fff}.orbit__dot--b{top:auto;bottom:-4px;width:7px;height:7px;left:calc(50% - 3.5px);background:#c4b5fd;box-shadow:0 0 12px 3px rgba(139,92,246,0.8)}.particles{position:absolute;inset:0;pointer-events:none}.particles i{position:absolute;left:var(--x);top:var(--y);width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:#e9d5ff;box-shadow:0 0 8px 1px rgba(192,132,252,0.9);opacity:0;animation:drift var(--t,7s) var(--ease-in-out) var(--dl,0s) infinite}@keyframes drift{0%{opacity:0;transform:translate3d(0,14px,0) scale(0.6)}25%{opacity:0.95}70%{opacity:0.6}100%{opacity:0;transform:translate3d(var(--dx,6px),-46px,0) scale(1)}}.float-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid rgba(216,180,254,0.28);background:rgba(20,14,33,0.82);box-shadow:0 12px 30px -12px rgba(0,0,0,0.7),0 0 24px -10px rgba(168,85,247,0.8);color:#f3e8ff;font-size:13px;font-weight:700;white-space:nowrap;animation:bob 6s var(--ease-in-out) var(--dl,0s) infinite}.float-chip .icon{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--grad-hot);color:#fff}.float-chip--1{left:2%;top:22%;--dl:-1s}.float-chip--2{right:0;top:14%;--dl:-3s}.float-chip--3{left:6%;bottom:16%;--dl:-2s}.float-chip--4{right:4%;bottom:24%;--dl:-4.5s}@keyframes bob{0%,100%{transform:translate3d(0,-7px,0)}50%{transform:translate3d(0,7px,0)}}@media (max-width:959px){.hero-stage{order:-1;width:min(100%,340px);margin-block:-12px -28px}}@media (min-width:1200px){.hero-stage .gg-cube{--gg-w:500px}/* bigger cube:move the labels out to its edges so they don't cover the corners */
  .float-chip--1 {
    left: -4%;
    top: 15%;
  }
  .float-chip--2 {
    right: -3%;
    top: 9%;
  }
  .float-chip--3 {
    left: -1%;
    bottom: 13%;
  }
  .float-chip--4 {
    right: -4%;
    bottom: 17%;
  }
}
@media (max-width: 480px) {
  .float-chip {
    font-size: 12px;
    padding: 6px 12px 6px 8px;
  }
  .float-chip--1 {
    left: 0;
  }
  .float-chip--2 {
    right: 0;
  }
}

/* --- Marquee --- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 22px;
  border-block: 1px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.06), rgba(217, 70, 239, 0.05));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1.5px solid var(--p-300);
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.7);
}
@keyframes marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* --- Quick service cards --- */
.quick-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.q-card h3 {
  margin-top: var(--sp-5);
  font-size: 1.25rem;
}
.q-card p {
  margin-top: var(--sp-2);
  color: var(--text-2);
  font-size: 15px;
}

/* --- Detailed service cards --- */
.svc-grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 820px) {
  .svc-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.svc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  min-height: 100%;
}
.svc-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.svc-card__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.svc-card h3 {
  margin-top: var(--sp-5);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  letter-spacing: -0.03em;
}
.svc-card > p {
  margin-top: var(--sp-3);
  color: var(--text-2);
}
.svc-card .check-list {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--line);
}
.svc-card .link-arrow {
  margin-top: auto;
  padding-top: var(--sp-5);
}
.svc-card__art {
  position: absolute;
  z-index: -1;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(192, 132, 252, 0.14);
  box-shadow: 0 0 0 30px rgba(192, 132, 252, 0.03), 0 0 0 60px rgba(192, 132, 252, 0.02);
  transition: transform 0.8s var(--ease);
}
.svc-card:hover .svc-card__art {
  transform: scale(1.12);
}
.center-action {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}

/* --- Work teaser + work cards (shared) --- */
.work-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.work-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
}
.work-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
}
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.work-card:hover .work-card__media img {
  transform: scale(1.05);
}
.work-card__media .badge-concept {
  position: absolute;
  left: 14px;
  top: 14px;
}
.work-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
  padding: var(--sp-5);
}
.work-card__body h3 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
/* "Client" on its own line above the project name, so titles never break around a dash */
.work-card__client {
  display: block;
  margin-bottom: 2px;
  font-size: 0.78em;
  letter-spacing: 0;
  color: var(--p-200);
}
.nowrap {
  white-space: nowrap;
}
.work-card__body p {
  color: var(--text-2);
  font-size: 15px;
}
.work-card__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-300);
}
.work-card__body .link-arrow {
  margin-top: auto;
  padding-top: var(--sp-3);
  align-self: flex-start;
}
.work-card__stretch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* home teaser on tablets: two cards side by side, the third as a wide card (no empty cell) */
@media (min-width: 720px) and (max-width: 1071px) {
  .page-home .work-grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-home .work-grid > .work-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .page-home .work-grid > .work-card:last-child:nth-child(odd) .work-card__media {
    flex: 0 0 50%;
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
  }
  .page-home .work-grid > .work-card:last-child:nth-child(odd) .work-card__body {
    justify-content: center;
  }
  .page-home .work-grid > .work-card:last-child:nth-child(odd) .work-card__body .link-arrow {
    margin-top: var(--sp-2);
  }
}
.note-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-5);
  color: var(--muted);
  font-size: 14px;
}
.note-line .icon {
  width: 18px;
  height: 18px;
  color: var(--p-300);
}

/* --- Process --- */
.process {
  position: relative;
}
.process__steps {
  display: grid;
  gap: var(--sp-6);
}
.process__line {
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(180deg, var(--p-400), var(--magenta), rgba(168, 85, 247, 0.15));
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.6s var(--ease) 0.2s;
  /* the travelling dot moves with transform in container units (GPU, no per-frame layout) */
  container-type: size;
}
.process__line::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px 4px rgba(217, 70, 239, 0.9);
  animation: travel-y 4s var(--ease-in-out) infinite;
  opacity: 0;
}
.process.is-in .process__line,
html:not(.js) .process__line {
  transform: none;
}
.process.is-in .process__line::after {
  opacity: 1;
}
@keyframes travel-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(100cqh - 10px));
  }
}
@keyframes travel-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100cqw - 10px));
  }
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-5);
}
.step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: #f3e8ff;
  box-shadow: 0 0 0 6px var(--bg), 0 0 30px -6px rgba(168, 85, 247, 0.8);
}
.step__node .icon {
  width: 24px;
  height: 24px;
}
.step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--p-300);
}
.step h3 {
  margin-top: 6px;
  font-size: 1.4rem;
}
.step p {
  margin-top: var(--sp-2);
  color: var(--text-2);
  font-size: 15px;
}
@media (min-width: 900px) {
  .process__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }
  .process__line {
    left: 28px;
    right: 28px;
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--p-400), var(--magenta), rgba(168, 85, 247, 0.15));
    transform-origin: left;
    transform: scaleX(0);
  }
  .process__line::after {
    top: -4px;
    left: 0;
    animation-name: travel-x;
  }
  .step {
    grid-template-columns: 1fr;
  }
  .step__body {
    padding-right: var(--sp-4);
  }
}

/* --- CTA band --- */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding: clamp(32px, 6vw, 72px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(217, 70, 239, 0.22), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(124, 58, 237, 0.3), transparent 60%),
    linear-gradient(180deg, #150f22, #0e0a17);
  box-shadow: 0 40px 120px -50px rgba(124, 58, 237, 0.7);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(192, 132, 252, 0.07) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(192, 132, 252, 0.07) 1px, transparent 1px) 0 0 / 36px 36px;
  -webkit-mask-image: radial-gradient(80% 80% at 70% 30%, #000, transparent);
  mask-image: radial-gradient(80% 80% at 70% 30%, #000, transparent);
}
.cta-band h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.cta-band p {
  margin-top: var(--sp-4);
  color: var(--text-2);
  font-size: 1.08rem;
  max-width: 560px;
}
.cta-band .btn-row {
  margin-top: var(--sp-6);
}
.cta-band__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-200);
}
.cta-band__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
}
.cta-band__visual .ring {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(192, 132, 252, 0.22);
  animation: pulse-ring 4s var(--ease) infinite;
}
.cta-band__visual .ring:nth-child(2) {
  animation-delay: -1.3s;
}
.cta-band__visual .ring:nth-child(3) {
  animation-delay: -2.6s;
}
@keyframes pulse-ring {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  30% {
    opacity: 0.9;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@media (min-width: 900px) {
  .cta-band {
    grid-template-columns: 1.5fr 1fr;
  }
}
@media (max-width: 899px) {
  .cta-band__visual {
    min-height: 180px;
    order: -1;
  }
}

/* ==========================================================================
   Inner page hero + page visuals
   ========================================================================== */
.page-hero {
  position: relative;
  padding-top: clamp(32px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.page-hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.page-hero h1 {
  margin-top: var(--sp-5);
}
.page-hero .hero__lead {
  margin-top: var(--sp-5);
}
.page-hero .btn-row {
  margin-top: var(--sp-6);
}
.visual {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 0.86;
  margin-inline: auto;
  animation: stage-in 1.2s var(--ease) 0.2s both;
}
@media (min-width: 960px) {
  .page-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .page-hero {
    min-height: min(640px, calc(80vh - var(--header-h)));
    display: flex;
    align-items: center;
  }
  .page-hero > .container {
    width: 100%;
  }
}
@media (max-width: 959px) {
  .visual {
    width: min(100%, 440px);
  }
}

/* phones: skip the decorative hero art where it would push the plans / the form below the fold */
@media (max-width: 640px) {
  .visual.pillars,
  .visual.beacon {
    display: none;
  }
}

/* --- Contact: compact hero so the form is close to the top --- */
.page-contact .page-hero {
  min-height: 0;
  padding-bottom: clamp(24px, 4vw, 48px);
}
.page-contact .visual {
  width: min(100%, 420px);
}
@media (max-width: 959px) {
  .page-contact .beacon {
    aspect-ratio: 1 / 0.66;
  }
  .page-contact .beacon__core {
    width: 96px;
    height: 96px;
    border-radius: 26px;
  }
  /* keep the two chips clear of the icon tile on phones */
  .page-contact .beacon__chip--1 {
    top: 3%;
  }
  .page-contact .beacon__chip--2 {
    bottom: 1%;
  }
}

/* --- Services: constellation --- */
.constellation {
  aspect-ratio: 1;
  max-width: 480px;
}
.constellation__glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.4), transparent);
  animation: breathe 6s var(--ease-in-out) infinite;
}
.constellation__track {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed rgba(192, 132, 252, 0.28);
}
.constellation__track--inner {
  inset: 29%;
  border-style: solid;
  border-color: rgba(192, 132, 252, 0.14);
}
.constellation__spin {
  position: absolute;
  inset: 0;
  animation: spin 50s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.constellation__node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateY(-41cqw);
}
.constellation {
  container-type: inline-size;
}
.constellation__node > span {
  position: absolute;
  left: -32px;
  top: -32px;
  width: 64px;
  height: 64px;
  transform: rotate(calc(var(--a) * -1));
}
.constellation__node > span > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(150deg, #241838, #120d1e);
  border: 1px solid rgba(216, 180, 254, 0.35);
  color: #f3e8ff;
  box-shadow: 0 0 30px -6px rgba(168, 85, 247, 0.8);
  animation: spin 50s linear infinite reverse;
}
.constellation__node .icon {
  width: 26px;
  height: 26px;
}
.constellation__node small {
  position: absolute;
  top: -9px;
  right: -9px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--grad-btn);
  font-family: var(--font-mono);
  font-size: 10px;
  color: #fff;
}
.constellation__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(216, 180, 254, 0.28), rgba(17, 13, 26, 0.9) 70%);
  border: 1px solid rgba(216, 180, 254, 0.35);
  box-shadow: 0 0 60px -6px rgba(168, 85, 247, 0.85), inset 0 0 30px rgba(168, 85, 247, 0.25);
}
.constellation__core img {
  width: 54%;
  animation: float-soft 6s var(--ease-in-out) infinite;
}
.constellation__core::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(232, 121, 249, 0.4);
  animation: pulse-ring 3.6s var(--ease) infinite;
}
@keyframes float-soft {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
}

/* --- Work: floating gallery --- */
.gallery {
  perspective: 1200px;
}
.gallery__frame {
  position: absolute;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(216, 180, 254, 0.28);
  background: var(--panel-2);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 50px -20px rgba(168, 85, 247, 0.7);
  animation: gallery-float 8s var(--ease-in-out) var(--dl, 0s) infinite;
}
.gallery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__frame--1 {
  left: 0;
  top: 8%;
  width: 62%;
  aspect-ratio: 3 / 2;
  --r: -7deg;
  --ry: 14deg;
  z-index: 1;
}
.gallery__frame--2 {
  right: 0;
  top: 0;
  width: 54%;
  aspect-ratio: 3 / 2;
  --r: 5deg;
  --ry: -12deg;
  --dl: -2.5s;
}
.gallery__frame--3 {
  left: 18%;
  bottom: 2%;
  width: 66%;
  aspect-ratio: 3 / 2;
  --r: -2deg;
  --ry: 6deg;
  --dl: -5s;
  z-index: 2;
}
.gallery__frame .badge-concept {
  position: absolute;
  left: 12px;
  top: 12px;
}
@keyframes gallery-float {
  0%,
  100% {
    transform: rotateY(var(--ry)) rotate(var(--r)) translate3d(0, -8px, 0);
  }
  50% {
    transform: rotateY(calc(var(--ry) * 0.6)) rotate(calc(var(--r) * 0.8)) translate3d(0, 10px, 0);
  }
}
.gallery__spark {
  position: absolute;
  right: 6%;
  bottom: 14%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad-hot);
  color: #fff;
  box-shadow: 0 0 40px rgba(217, 70, 239, 0.7);
  animation: bob 5s var(--ease-in-out) infinite;
}
.gallery__spark .icon {
  width: 28px;
  height: 28px;
}

/* --- Pricing: tier pillars --- */
.pillars {
  display: grid;
  align-items: end;
}
.pillars__stage {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 3.5vw, 30px);
  padding-bottom: 14%;
}
.pillars__base {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 6%;
  height: 22%;
  border-radius: 50%;
  border: 1px solid rgba(192, 132, 252, 0.3);
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.32), transparent);
  box-shadow: 0 0 60px -10px rgba(168, 85, 247, 0.6);
}
.pillars__base::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px dashed rgba(232, 121, 249, 0.35);
}
.pillar {
  position: relative;
  z-index: 1;
  width: clamp(62px, 17%, 96px);
  height: var(--h);
  transform-origin: bottom;
  animation: pillar-rise 1.4s var(--ease) both, pillar-hover 6s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i) * 0.15s + 0.3s), calc(var(--i) * -1.4s);
}
.pillar__body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px 10px 4px 4px;
  border: 1px solid rgba(216, 180, 254, 0.35);
  background: linear-gradient(180deg, rgba(192, 132, 252, 0.55), rgba(124, 58, 237, 0.22) 45%, rgba(17, 13, 26, 0.4));
  box-shadow: 0 0 40px -8px rgba(168, 85, 247, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pillar__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shimmer-up 3.2s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i) * 0.6s);
}
@keyframes shimmer-up {
  from {
    transform: translateY(260%);
  }
  to {
    transform: translateY(-120%);
  }
}
.pillar__cap {
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f5d0fe;
  box-shadow: 0 0 0 6px rgba(232, 121, 249, 0.18), 0 0 26px 6px rgba(217, 70, 239, 0.75);
}
.pillar__label {
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-200);
  white-space: nowrap;
}
.pillar--top .pillar__body {
  background: linear-gradient(180deg, rgba(232, 121, 249, 0.75), rgba(168, 85, 247, 0.32) 45%, rgba(17, 13, 26, 0.4));
}
@keyframes pillar-rise {
  from {
    transform: scaleY(0.05);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes pillar-hover {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}
.pillars__arrow {
  position: absolute;
  right: 6%;
  top: 6%;
  width: 46%;
  color: var(--p-300);
  opacity: 0.7;
}
.pillars__arrow path {
  stroke-dasharray: 6 8;
}

/* --- Blog: floating editorial cards --- */
.editorial {
  perspective: 1200px;
}
.ed-card {
  position: absolute;
  width: 66%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(216, 180, 254, 0.26);
  background: linear-gradient(180deg, #1a1229, #110c1c);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9), 0 0 40px -18px rgba(168, 85, 247, 0.8);
  animation: gallery-float 9s var(--ease-in-out) var(--dl, 0s) infinite;
}
.ed-card__media {
  aspect-ratio: 16 / 8;
  border-radius: 10px;
  background:
    radial-gradient(circle at 75% 30%, rgba(232, 121, 249, 0.75), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(124, 58, 237, 0.8), transparent 50%),
    linear-gradient(135deg, #2a1745, #140d22);
}
.ed-card--2 .ed-card__media {
  background:
    radial-gradient(circle at 30% 30%, rgba(192, 132, 252, 0.8), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(217, 70, 239, 0.6), transparent 50%),
    linear-gradient(135deg, #1d1236, #0f0a1a);
}
.ed-card--3 .ed-card__media {
  background:
    conic-gradient(from 200deg at 60% 50%, rgba(168, 85, 247, 0.85), rgba(217, 70, 239, 0.5), rgba(52, 211, 153, 0.25), rgba(168, 85, 247, 0.85));
  opacity: 0.85;
}
.ed-card__tag {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-300);
}
.ed-card__title {
  display: block;
  margin-top: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ed-card__lines {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.ed-card__lines i {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.ed-card__lines i:last-child {
  width: 62%;
}
.ed-card--1 {
  left: 32%;
  top: 22%;
  --r: 3deg;
  --ry: -8deg;
  z-index: 3;
}
.ed-card--2 {
  left: 16%;
  top: 11%;
  --r: -3deg;
  --ry: 4deg;
  --dl: -3s;
  z-index: 2;
}
.ed-card--3 {
  left: 0;
  top: 0;
  --r: -9deg;
  --ry: 12deg;
  --dl: -6s;
  z-index: 1;
}
.ed-card--2,
.ed-card--3 {
  filter: saturate(0.8) brightness(0.8);
}
/* only the front card shows readable text; the cards behind keep art + skeleton lines */
.ed-card--2 :is(.ed-card__tag, .ed-card__title),
.ed-card--3 :is(.ed-card__tag, .ed-card__title) {
  visibility: hidden;
}
.editorial__cursor {
  position: absolute;
  z-index: 4;
  left: 2%;
  bottom: 8%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 30px -10px rgba(217, 70, 239, 0.8);
  animation: bob 5.5s var(--ease-in-out) infinite;
}
.editorial__cursor .icon {
  width: 16px;
  height: 16px;
}
@media (max-width: 480px) {
  .ed-card--3 {
    left: 2%;
  }
  /* keep the "New insights" chip off the front card's title on phones */ .editorial__cursor{left:auto;right:0;top:2%;bottom:auto}}.beacon{aspect-ratio:1 / 0.8;display:grid;place-items:center}.beacon__ring{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;margin:-31% 0 0 -31%;border-radius:50%;border:1px solid rgba(216,180,254,0.35);animation:pulse-ring 4.5s var(--ease) infinite}.beacon__ring:nth-child(2){animation-delay:-1.5s}.beacon__ring:nth-child(3){animation-delay:-3s}.beacon__core{position:relative;z-index:2;display:grid;place-items:center;width:120px;height:120px;border-radius:32px;background:var(--grad-btn);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,0.2) inset,0 30px 80px -20px rgba(217,70,239,0.9);animation:float-soft 6s var(--ease-in-out) infinite}.beacon__core .icon{width:52px;height:52px;stroke-width:1.4}.beacon__orbit{position:absolute;inset:10%;animation:spin 22s linear infinite}.beacon__orbit i{position:absolute;width:10px;height:10px;border-radius:50%;background:#f5d0fe;box-shadow:0 0 14px 4px rgba(217,70,239,0.7)}.beacon__orbit i:nth-child(1){left:50%;top:0}.beacon__orbit i:nth-child(2){right:4%;bottom:24%;width:7px;height:7px}.beacon__orbit i:nth-child(3){left:6%;bottom:30%;width:6px;height:6px}.beacon__chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;border:1px solid rgba(216,180,254,0.28);background:rgba(20,14,33,0.9);font-size:13px;font-weight:600;color:#f3e8ff;box-shadow:0 16px 40px -18px rgba(0,0,0,0.9);animation:bob 6s var(--ease-in-out) infinite}.beacon__chip .icon{width:18px;height:18px;color:var(--green)}.beacon__chip--1{left:0;top:12%}.beacon__chip--2{right:0;bottom:12%;animation-delay:-3s}.jump{position:sticky;top:calc(var(--header-h) + 8px);z-index:50;margin-bottom:var(--sp-7)}.jump__inner{display:flex;gap:8px;padding:6px;overflow-x:auto;scrollbar-width:none;border-radius:999px;border:1px solid var(--line);background:rgba(13,10,21,0.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 16px 40px -24px rgba(0,0,0,0.9)}.jump__inner::-webkit-scrollbar{display:none}.jump__inner.fade-start,.jump__inner.fade-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fs,0px),#000 calc(100% - var(--fe,0px)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fs,0px),#000 calc(100% - var(--fe,0px)),transparent)}.jump__inner.fade-start{--fs:48px}.jump__inner.fade-end{--fe:56px}.jump .chip{border-color:transparent;flex:none}.jump .chip span{font-family:var(--font-mono);font-size:11px;color:var(--p-300)}.jump .chip[aria-current="true"] span{color:#fde4ff}@media (min-width:1080px){.jump__inner{width:max-content;margin-inline:auto}}.service-block{position:relative;padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--line-soft);scroll-margin-top:calc(var(--header-h) + 80px)}.service-block:first-of-type{border-top:0;padding-top:var(--sp-5)}.service-block__head{display:grid;gap:var(--sp-5) var(--sp-7);margin-bottom:var(--sp-6)}.service-block__title{display:grid;gap:var(--sp-4);align-content:start}.service-block__meta{display:flex;align-items:center;gap:var(--sp-4)}.service-block__num{font-family:var(--font-head);font-size:clamp(3rem,6vw,4.5rem);font-weight:800;line-height:1;letter-spacing:-0.02em;/* the fill (page color) covers the variable font's overlapping inner contours;
     half of the 3px stroke shows as a clean 1.5px outline */
  color: var(--bg);
  -webkit-text-stroke: 3px rgba(192, 132, 252, 0.6);
  paint-order: stroke fill;
}
.service-block h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.service-block__intro p {
  color: var(--text-2);
  font-size: 1.08rem;
}
.service-block__intro .btn {
  margin-top: var(--sp-5);
}
.service-boxes {
  display: grid;
  gap: var(--sp-4);
}
.service-box {
  padding: clamp(22px, 2.4vw, 28px);
}
.service-box h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-200);
}
.service-box h3 .icon {
  width: 18px;
  height: 18px;
  color: var(--p-300);
}
.service-box p {
  color: var(--text-2);
}
.service-box .check-list li {
  font-size: 15px;
}
.service-box--accent {
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(168, 85, 247, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(23, 17, 37, 0.85), rgba(13, 10, 21, 0.85));
}
@media (min-width: 900px) {
  .service-block__head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
  .service-boxes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.commitment {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
}
.commitment h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.commitment p {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: 1.05rem;
}
@media (min-width: 860px) {
  .commitment {
    grid-template-columns: auto 1fr;
    gap: var(--sp-6);
  }
}
.commitment .icon-tile {
  width: 72px;
  height: 72px;
  border-radius: 20px;
}
.commitment .icon-tile .icon {
  width: 32px;
  height: 32px;
}

/* ==========================================================================
   WORK
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.filter-bar__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* room for the 2px + 3px focus ring inside the scroll box */
  padding: 6px;
  margin: -6px;
  max-width: calc(100% + 12px);
}
.filter-bar__chips::-webkit-scrollbar {
  display: none;
}
.filter-bar__status {
  color: var(--muted);
  font-size: 14px;
}
.work-item {
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.work-item.is-out {
  opacity: 0;
  transform: scale(0.94);
}
.work-item.is-gone {
  display: none;
}

/* dialog */
.modal {
  width: min(960px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--text);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #170f26, #0d0916);
  box-shadow: 0 60px 160px -40px rgba(124, 58, 237, 0.7);
}
.modal::backdrop {
  background: rgba(4, 3, 8, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal[open] {
  animation: modal-in 0.5s var(--ease);
}
.modal[open]::backdrop {
  animation: fade-in 0.4s var(--ease);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
html:has(.modal[open]) {
  overflow: hidden;
}
.modal__grid {
  display: grid;
}
.modal__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--panel-2);
}
.modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal__media .badge-concept {
  position: absolute;
  left: 16px;
  top: 16px;
}
.modal__body {
  padding: clamp(24px, 4vw, 40px);
}
.modal__body h2 {
  margin-top: var(--sp-3);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.modal__body > p {
  margin-top: var(--sp-4);
  color: var(--text-2);
}
.modal__body h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-200);
}
.modal__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-6);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed var(--line-strong);
  color: var(--text-2);
  font-size: 14px;
}
.modal__note .icon {
  color: var(--p-300);
  width: 18px;
  height: 18px;
}
.modal__actions {
  margin-top: var(--sp-6);
}
.modal__close {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(7, 6, 11, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: transform 0.3s var(--ease), background-color 0.2s;
}
.modal__close:hover {
  transform: rotate(90deg);
  background: rgba(168, 85, 247, 0.35);
}
@media (min-width: 820px) {
  .modal {
    width: min(1040px, calc(100% - 32px));
  }
  /* show the whole 3:2 artwork instead of cropping it into a tall column */
  .modal__grid {
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
  }
  .modal__media {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
}
/* no JavaScript: "View project" links to #dlg-…, so show that project as an overlay */
html:not(.js) .modal:target {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 500;
  height: fit-content;
  margin: auto;
  box-shadow: 0 0 0 100vmax rgba(4, 3, 8, 0.86), 0 60px 160px -40px rgba(124, 58, 237, 0.7);
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.value-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: clamp(40px, 6vw, 64px);
}
@media (min-width: 560px) and (max-width: 959px) {
  .value-grid {
    grid-template-columns: 1fr 1fr;
  }
  .value-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.value-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: 22px;
}
.value-card .icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: none;
}
.value-card__title {
  font-size: 1.1rem;
}
.value-card p {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.plans {
  display: grid;
  gap: var(--sp-5);
  align-items: stretch;
}
@media (min-width: 960px) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .plans {
    grid-template-columns: 1fr 1fr;
  }
  .plans .plan:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23, 17, 37, 0.9), rgba(12, 9, 20, 0.9));
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
}
.plan:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-glow);
}
.plan--highlight {
  border-color: transparent;
  background:
    linear-gradient(180deg, #1b1230, #100b1c) padding-box,
    linear-gradient(160deg, #e879f9, rgba(168, 85, 247, 0.4) 40%, rgba(168, 85, 247, 0.15) 70%, #a855f7) border-box;
  border: 1px solid transparent;
  box-shadow: 0 40px 100px -40px rgba(192, 38, 211, 0.75), 0 0 0 1px rgba(232, 121, 249, 0.12);
}
.plan--highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(80% 50% at 50% 0%, rgba(217, 70, 239, 0.25), transparent);
}
.plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.plan__name {
  font-size: 1.5rem;
  font-weight: 800;
}
.plan__badge {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(168, 85, 247, 0.12);
  color: var(--p-200);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plan--highlight .plan__badge {
  background: var(--grad-btn);
  border-color: rgba(240, 171, 252, 0.5);
  color: #fff;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: var(--sp-5);
  min-height: 64px;
}
.plan__currency {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--p-200);
  align-self: flex-start;
  margin-top: 6px;
}
.plan__amount {
  font-family: var(--font-head);
  font-size: clamp(3rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.plan__amount--text {
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  letter-spacing: -0.035em;
  align-self: center;
}
.plan__period {
  margin-left: 4px;
  color: var(--muted);
  font-weight: 600;
}
.plan__tagline {
  margin-top: var(--sp-3);
  color: var(--text-2);
  min-height: 3.3em;
}
.plan__features {
  display: grid;
  gap: 12px;
  margin: var(--sp-5) 0 var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--line);
}
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.plan__features .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 2px;
  border-radius: 50%;
  color: var(--green);
  background: rgba(52, 211, 153, 0.1);
}
.plan .btn {
  margin-top: auto;
}
.why-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.why-card h3 {
  margin-top: var(--sp-5);
  font-size: 1.2rem;
}
.why-card p {
  margin-top: var(--sp-2);
  color: var(--text-2);
  font-size: 15px;
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.topic-grid {
  display: grid;
  gap: var(--sp-4);
}
/* no orphan cards: 2 + 2 + 1 (full) on small tablets, 3 + 2 on tablets, 5 in a row on desktop */
@media (min-width: 480px) and (max-width: 699px) {
  .topic-grid {
    grid-template-columns: 1fr 1fr;
  }
  .topic-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .topic-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .topic-grid > * {
    grid-column: span 2;
  }
  .topic-grid > :nth-last-child(2):nth-child(3n + 1),
  .topic-grid > :last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }
  .topic-grid > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1100px) {
  .topic-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.topic-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23, 17, 37, 0.85), rgba(13, 10, 21, 0.85));
  transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
.topic-card:hover,
.topic-card.is-active {
  transform: translateY(-4px);
  border-color: rgba(232, 121, 249, 0.45);
  box-shadow: var(--shadow-glow);
}
.topic-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.35), rgba(217, 70, 239, 0.12));
  border: 1px solid rgba(216, 180, 254, 0.28);
  color: #f3e8ff;
}
.topic-card__title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.topic-card__text {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}
.topic-card__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-300);
}
.topic-card__count .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}
.topic-card:hover .topic-card__count .icon {
  transform: translateX(4px);
}
.featured-grid {
  display: grid;
  gap: var(--sp-5);
}
.featured-grid__side {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 960px) {
  .featured-grid {
    grid-template-columns: 1.35fr 1fr;
  }
}
.post-card {
  height: 100%;
}
.post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23, 17, 37, 0.85), rgba(13, 10, 21, 0.85));
  transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
.post-card__link:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-glow);
}
.post-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.post-card__link:hover .post-card__media img {
  transform: scale(1.05);
}
.post-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 10px;
  padding: 22px;
}
.post-card__title {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.post-card__excerpt {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 6px;
  color: var(--muted);
  font-size: 13.5px;
}
.post-card__arrow {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--p-200);
  transition: transform 0.35s var(--ease), background-color 0.3s;
}
.post-card__arrow .icon {
  width: 16px;
  height: 16px;
}
.post-card__link:hover .post-card__arrow {
  transform: rotate(45deg);
  background: rgba(168, 85, 247, 0.25);
}
.post-card--lg .post-card__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.03em;
}
.post-card--lg .post-card__body {
  padding: clamp(22px, 3vw, 32px);
}
.post-card--lg .post-card__excerpt {
  font-size: 16px;
}
@media (min-width: 640px) {
  .post-card--sm .post-card__link {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
  }
  .post-card--sm .post-card__media {
    aspect-ratio: auto;
    height: 100%;
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
  }
  .post-card--sm .post-card__excerpt {
    -webkit-line-clamp: 4;
  }
}
.blog-toolbar {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.search {
  position: relative;
}
.search .icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px 12px 46px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search input::placeholder {
  color: var(--muted);
}
.search input:focus {
  outline: none;
  border-color: var(--p-300);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2);
}
.search input::-webkit-search-cancel-button {
  filter: invert(0.7);
}
@media (min-width: 900px) {
  .blog-toolbar {
    grid-template-columns: 1fr 320px;
    align-items: center;
  }
}
.post-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.post-grid__item.is-hidden {
  display: none;
}
.post-grid__item.is-entering {
  animation: panel-in 0.5s var(--ease) both;
}
.empty-note {
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong);
  text-align: center;
  color: var(--text-2);
}
.results-status {
  min-height: 1.5em;
  margin-top: var(--sp-5);
  color: var(--muted);
  font-size: 14px;
}

/* --- Article --- */
.article__hero {
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: var(--sp-7);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-5);
  font-size: 14px;
  color: var(--muted);
  list-style: none;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line-strong);
}
.crumbs a {
  color: var(--text-2);
}
.crumbs a:hover {
  color: #fff;
}
.article__title {
  margin-top: var(--sp-4);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.article__lede {
  margin-top: var(--sp-5);
  color: var(--text-2);
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: var(--sp-6);
  color: var(--muted);
  font-size: 14.5px;
}
.article__meta > span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 22px;
  border-radius: 50%;
  background: var(--p-400);
  vertical-align: middle;
  transform: translateY(-1px);
}
/* phones: author on its own line, then "date · read time" (no stray dot at a line start) */
@media (max-width: 479px) {
  .article__author {
    flex-basis: 100%;
  }
  .article__meta > .article__author + span::before {
    display: none;
  }
}
.article__author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
}
.article__author img {
  width: 28px;
  height: 28px;
}
.article__cover {
  max-width: 1080px;
  margin: 0 auto var(--sp-8);
}
.article__cover img {
  width: 100%;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px -50px rgba(124, 58, 237, 0.8);
}
.prose {
  max-width: 70ch;
  margin-inline: auto;
  color: #d9d3e6;
  font-size: 1.075rem;
  line-height: 1.8;
}
.prose > * + * {
  margin-top: 1.25em;
}
.prose h2 {
  margin-top: 2.2em;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h3 {
  margin-top: 1.8em;
  font-size: 1.3rem;
  color: #fff;
}
.prose h4 {
  margin-top: 1.6em;
  font-size: 1.1rem;
  color: #fff;
}
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.7em;
}
.prose a {
  color: var(--p-200);
  text-decoration: underline;
  text-decoration-color: rgba(216, 180, 254, 0.45);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.prose a:hover {
  color: #fff;
  text-decoration-color: var(--magenta-2);
}
.prose strong {
  color: #fff;
  font-weight: 700;
}
.prose ul,
.prose ol {
  padding-left: 1.4em;
}
.prose li + li {
  margin-top: 0.5em;
}
.prose ul li::marker {
  color: var(--p-300);
}
.prose ol li::marker {
  color: var(--p-300);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.prose blockquote {
  margin-inline: 0;
  padding: 18px 22px;
  border-left: 3px solid var(--p-400);
  border-radius: 0 14px 14px 0;
  background: rgba(168, 85, 247, 0.08);
  color: #ece6f7;
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.55;
}
.prose blockquote > * + * {
  margin-top: 0.7em;
}
.prose code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(192, 132, 252, 0.2);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: #f3e8ff;
}
.prose hr {
  border: 0;
  height: 1px;
  margin-block: 2.4em;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.prose img {
  border-radius: var(--r-md);
}
.cta-box {
  margin: var(--sp-8) auto 0;
  max-width: 70ch;
  padding: clamp(26px, 4vw, 40px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(217, 70, 239, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(25, 18, 40, 0.9), rgba(15, 11, 25, 0.9));
}
.cta-box h2 {
  margin-top: var(--sp-3);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cta-box p {
  margin-top: var(--sp-3);
  color: var(--text-2);
}
.cta-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.related {
  margin-top: var(--sp-7);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: 1.55fr 1fr;
    gap: var(--sp-6);
  }
}
.form-card {
  padding: clamp(24px, 4vw, 44px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.form-card h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.form-card > p {
  margin-top: var(--sp-2);
  color: var(--text-2);
}
.form {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.form__row {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 640px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: grid;
  gap: 8px;
  align-content: start;
}
.field label {
  font-size: 14px;
  font-weight: 700;
  color: #ece6f7;
}
.field label .req {
  color: var(--magenta-2);
  margin-left: 2px;
}
.field label .opt {
  color: var(--muted);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(192, 132, 252, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field textarea {
  min-height: 150px;
  resize: vertical;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c084fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field select option {
  background: #140f20;
  color: #fff;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #7f7794;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(192, 132, 252, 0.4);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--p-300);
  background: rgba(168, 85, 247, 0.06);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2);
}
.field [aria-invalid="true"] {
  border-color: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.14);
}
.field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--danger);
  font-size: 13.5px;
  font-weight: 600;
}
.field__error:empty {
  display: none;
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
}
.form__foot small {
  color: var(--muted);
  font-size: 13.5px;
}
.form__foot small a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-status {
  display: none;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(168, 85, 247, 0.1);
  color: #f3e8ff;
  line-height: 1.55;
}
.form-status.is-visible {
  display: flex;
  animation: panel-in 0.5s var(--ease);
}
.form-status .icon {
  margin-top: 2px;
  color: var(--p-300);
}
.form-status a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-status--success {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.08);
}
.form-status--success .icon {
  color: var(--green);
}
.form-status--error {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.08);
}
.form-status--error .icon {
  color: var(--danger);
}
.btn .spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
.btn.is-loading .spinner {
  display: block;
}
.btn.is-loading .icon {
  display: none;
}
.details-card {
  padding: clamp(24px, 3vw, 34px);
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 960px) {
  .details-card {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.details-card h2 {
  font-size: 1.35rem;
  font-weight: 800;
}
.details-list {
  display: grid;
  gap: var(--sp-4);
}
.details-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.details-list .icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: none;
}
.details-list .icon-tile .icon {
  width: 20px;
  height: 20px;
}
.details-list small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.details-list a,
.details-list strong {
  font-weight: 700;
  color: #fff;
  word-break: break-word;
}
.details-list a:hover {
  color: var(--p-200);
}
.details-card .socials {
  margin-top: 0;
}
.details-card__divider {
  height: 1px;
  background: var(--line-soft);
}
.details-card__call p {
  margin-top: 6px;
  margin-bottom: var(--sp-4);
  color: var(--text-2);
  font-size: 15px;
}
.details-card__call h3 {
  font-size: 1.1rem;
}

/* ==========================================================================
   PRIVACY / 404
   ========================================================================== */
.legal {
  padding-block: clamp(32px, 6vw, 72px) var(--sp-8);
}
.legal h1 {
  margin-top: var(--sp-4);
}
.legal .prose {
  margin-top: var(--sp-7);
  margin-inline: 0;
}
.legal__updated {
  margin-top: var(--sp-4);
  color: var(--muted);
}
.not-found {
  min-height: calc(86vh - var(--header-h));
  display: grid;
  place-items: center;
  padding-block: var(--sp-8);
  text-align: center;
}
.not-found__visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 300px;
  height: 300px;
  max-width: 100%;
  margin: 0 auto var(--sp-5);
}
.not-found__visual .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(192, 132, 252, 0.3);
  animation: spin 30s linear infinite;
}
.not-found__code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--p-300);
}
.not-found h1 {
  margin-top: var(--sp-4);
}
.not-found p {
  margin: var(--sp-4) auto 0;
  max-width: 480px;
  color: var(--text-2);
}
.not-found .btn-row {
  justify-content: center;
  margin-top: var(--sp-6);
}

/* ==========================================================================
   Motion preferences (the 3D cube manages its own motion in cube.css)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *:not(.gg-cube):not(.gg-cube *),
  *:not(.gg-cube):not(.gg-cube *)::before,
  *:not(.gg-cube):not(.gg-cube *)::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .marquee__track {
    animation: none !important;
  }
  .particles,
  .process__line::after {
    display: none;
  }
}

/* ---------- Contact form: "book a call" checkbox ---------- */
.call-toggle {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(192, 132, 252, 0.22);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.call-toggle:hover {
  border-color: rgba(192, 132, 252, 0.4);
}
.call-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.call-toggle__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1.5px solid rgba(192, 132, 252, 0.5);
  background: rgba(255, 255, 255, 0.04);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.call-toggle__box svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.2s;
}
.call-toggle__text {
  display: grid;
  gap: 2px;
}
.call-toggle__text strong {
  font-size: 15px;
  color: #ece6f7;
}
.call-toggle__text small {
  font-size: 13px;
  color: var(--muted);
}
.call-toggle:has(input:checked) {
  border-color: var(--p-300);
  background: rgba(168, 85, 247, 0.08);
}
.call-toggle input:checked + .call-toggle__box {
  background: linear-gradient(135deg, #a855f7, #d946ef);
  border-color: transparent;
}
.call-toggle input:checked + .call-toggle__box svg {
  opacity: 1;
  transform: scale(1);
}
.call-toggle input:focus-visible + .call-toggle__box {
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .call-toggle, .call-toggle__box, .call-toggle__box svg { transition: none; }
}

/* Growth Guru [GGA] signature 3D cube
   Markup: <div class="gg-cube" data-size="lg|md|sm" aria-hidden="true"></div>
   cube.js builds the inner DOM. All inner geometry is in cqi (1% of the cube box),
   so the cube scales with its box. The box size is reserved here (no layout shift).
   Only transform and opacity are animated. */

.gg-cube {
  --gg-w: clamp(240px, 78vw, 420px);
  --gg-e: 44cqi;                       /* outer cube edge */
  --gg-edge: rgba(216, 182, 255, .96);
  --gg-glow: rgba(168, 85, 247, .62);
  position: relative;
  display: block;
  flex: none;
  width: var(--gg-w);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  overflow: clip;
  isolation: isolate;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.gg-cube[data-size="md"] { --gg-w: clamp(180px, 52vw, 280px); }
.gg-cube[data-size="sm"] { --gg-w: clamp(96px, 30vw, 132px); }
.gg-cube:empty { background: radial-gradient(closest-side, rgba(168, 85, 247, .26), transparent); }

.gg-cube i { position: absolute; display: block; font-style: normal; }

/* ambient glow + floor light (flat, behind the 3D scene) */
.gg-cube__halo {
  inset: 2%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 85, 247, .36), rgba(124, 58, 237, .15) 50%, rgba(124, 58, 237, 0));
  animation: gg-halo 5s ease-in-out infinite alternate;
}
.gg-cube__floor {
  left: 24%; right: 24%; bottom: 6%; height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(192, 132, 252, .5), rgba(168, 85, 247, .14) 55%, rgba(168, 85, 247, 0));
  animation: gg-floor 6s ease-in-out infinite alternate;
}

/* 3D scene */
.gg-cube__stage { inset: 0; perspective: 260cqi; animation: gg-in 1.3s cubic-bezier(.2, .75, .2, 1) both; }
.gg-cube__tilt, .gg-cube__bob, .gg-cube__axis, .gg-cube__spin, .gg-cube__inner { inset: 0; transform-style: preserve-3d; }
.gg-cube__bob { animation: gg-bob 6s ease-in-out infinite alternate; }
.gg-cube__axis { transform: rotateX(-26deg) rotateZ(0deg); animation: gg-axis 9s ease-in-out infinite alternate; }
.gg-cube__spin { --e: var(--gg-e); transform: rotateY(-36deg); animation: gg-spin 20s linear infinite; }
.gg-cube__inner { --e: 14cqi; transform: rotateX(-24deg) rotateY(52deg); animation: gg-tumble 12s linear infinite; }

/* faces */
.gg-cube__face {
  left: 50%; top: 50%;
  width: var(--e); height: var(--e);
  margin: calc(var(--e) / -2);
  box-sizing: border-box;
  border: max(1px, .42cqi) solid var(--gg-edge);
  background: linear-gradient(150deg, rgba(200, 150, 255, .30), rgba(139, 92, 246, .09) 52%, rgba(217, 70, 239, .17));
  box-shadow: 0 0 2.6cqi var(--gg-glow), inset 0 0 5cqi rgba(168, 85, 247, .36);
  backface-visibility: visible;
}
.gg-cube__face--f { transform: translateZ(calc(var(--e) / 2)); }
.gg-cube__face--b { transform: rotateY(180deg) translateZ(calc(var(--e) / 2)); }
.gg-cube__face--r { transform: rotateY(90deg) translateZ(calc(var(--e) / 2)); }
.gg-cube__face--l { transform: rotateY(-90deg) translateZ(calc(var(--e) / 2)); }
.gg-cube__face--t { transform: rotateX(90deg) translateZ(calc(var(--e) / 2)); }
.gg-cube__face--u { transform: rotateX(-90deg) translateZ(calc(var(--e) / 2)); }
.gg-cube__face::before {
  content: ""; position: absolute; inset: 15%;
  border: 1px solid rgba(216, 180, 254, .16);
  background: linear-gradient(120deg, transparent 34%, rgba(255, 255, 255, .09) 48%, transparent 62%);
}
.gg-cube__face::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 7cqi rgba(217, 70, 239, .55);
  opacity: .2;
  animation: gg-pulse 3.6s ease-in-out infinite alternate;
}
.gg-cube__face--b::after { animation-delay: -.6s; }
.gg-cube__face--r::after { animation-delay: -1.2s; }
.gg-cube__face--l::after { animation-delay: -1.8s; }
.gg-cube__face--t::after { animation-delay: -2.4s; }
.gg-cube__face--u::after { animation-delay: -3s; }

/* glowing core: small bright cube tumbling inside + light that always faces the viewer */
.gg-cube__inner .gg-cube__face {
  border-color: rgba(252, 236, 255, .95);
  background: radial-gradient(circle, rgba(253, 244, 255, .55), rgba(217, 70, 239, .32) 72%);
  box-shadow: 0 0 3cqi rgba(217, 70, 239, .85), inset 0 0 3cqi rgba(255, 255, 255, .35);
}
.gg-cube__inner .gg-cube__face::before, .gg-cube__inner .gg-cube__face::after { display: none; }
.gg-cube__core {
  left: 50%; top: 50%; width: 40cqi; height: 40cqi; margin: -20cqi;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 6%, rgba(245, 208, 254, .9) 13%, rgba(217, 70, 239, .5) 30%, rgba(139, 92, 246, .17) 58%, rgba(139, 92, 246, 0));
  animation: gg-core 2.8s ease-in-out infinite alternate;
}

/* vertex dots: three crossed discs read as a glowing point from any angle */
.gg-cube__v {
  left: 50%; top: 50%; width: 4.4cqi; height: 4.4cqi; margin: -2.2cqi;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--vx) * var(--e) / 2), calc(var(--vy) * var(--e) / 2), calc(var(--vz) * var(--e) / 2));
}
.gg-cube__v, .gg-cube__v::before, .gg-cube__v::after {
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 22%, rgba(240, 222, 255, .9) 34%, rgba(192, 132, 252, .42) 58%, rgba(168, 85, 247, 0));
}
.gg-cube__v::before, .gg-cube__v::after { content: ""; position: absolute; inset: 0; }
.gg-cube__v::before { transform: rotateY(90deg); }
.gg-cube__v::after { transform: rotateX(90deg); }

/* orbit rings with a comet trail and a satellite that always faces the viewer */
.gg-cube__ring {
  left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2);
  transform-style: preserve-3d;
  transform: rotateZ(var(--rz)) rotateX(var(--rx));
}
.gg-cube__orbit {
  inset: 0; border-radius: 50%;
  border: 1px solid rgba(192, 132, 252, .26);
  transform-style: preserve-3d;
  animation: gg-orbit var(--t) linear infinite;
}
.gg-cube__orbit::before {
  content: "";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(rgba(192,132,252,0) 60%,rgba(192,132,252,.55) 90%,#f5d0fe);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .75cqi),#000 calc(100% - .6cqi));mask:radial-gradient(farthest-side,transparent calc(100% - .75cqi),#000 calc(100% - .6cqi))}.gg-cube__orbit--rev,.gg-cube__orbit--rev .gg-cube__sat{animation-direction:reverse}.gg-cube__orbit--rev::before{transform:scaleX(-1)}.gg-cube__orbit--dash{border-style:dashed;border-color:rgba(192,132,252,.2)}.gg-cube__orbit--dash::before{display:none}.gg-cube__sat{left:50%;top:0;width:3.2cqi;height:3.2cqi;margin:-1.6cqi;border-radius:50%;background:radial-gradient(closest-side,#fff 0 26%,rgba(233,213,255,.85) 42%,rgba(217,70,239,0));transform:rotateZ(0deg) rotateX(calc(var(--rx) * -1)) rotateZ(calc(var(--rz) * -1));animation:gg-sat var(--t) linear infinite}.gg-cube__orbit--dash .gg-cube__sat{width:2.2cqi;height:2.2cqi;margin:-1.1cqi}.gg-cube__p{left:50%;top:50%;width:var(--ps);height:var(--ps);margin:calc(var(--ps) / -2);border-radius:50%;background:radial-gradient(closest-side,#fbf5ff 0 30%,rgba(192,132,252,.7) 55%,rgba(192,132,252,0));transform:translate3d(var(--x),var(--y),var(--z));opacity:.7;animation:gg-p var(--t) ease-in-out var(--dl) infinite alternate}.gg-cube.is-off *,.gg-cube.is-off *::before,.gg-cube.is-off *::after,.gg-cube.is-hidden *,.gg-cube.is-hidden *::before,.gg-cube.is-hidden *::after{animation-play-state:paused !important}@keyframes gg-in{from{opacity:0;transform:scale(.84)}}@keyframes gg-bob{from{transform:translate3d(0,-2.4cqi,0)}to{transform:translate3d(0,2.4cqi,0)}}@keyframes gg-axis{from{transform:rotateX(-33deg) rotateZ(3deg)}to{transform:rotateX(-19deg) rotateZ(-3deg)}}@keyframes gg-spin{from{transform:rotateY(45deg)}to{transform:rotateY(405deg)}}@keyframes gg-tumble{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(-360deg) rotateY(-360deg)}}@keyframes gg-orbit{from{transform:rotateZ(0deg)}to{transform:rotateZ(360deg)}}@keyframes gg-sat{from{transform:rotateZ(0deg) rotateX(calc(var(--rx) * -1)) rotateZ(calc(var(--rz) * -1))}to{transform:rotateZ(-360deg) rotateX(calc(var(--rx) * -1)) rotateZ(calc(var(--rz) * -1))}}@keyframes gg-p{from{transform:translate3d(var(--x),var(--y),var(--z)) scale(.55);opacity:.15}to{transform:translate3d(var(--x),calc(var(--y) - 5cqi),var(--z)) scale(1);opacity:.95}}@keyframes gg-core{from{transform:scale(.86);opacity:.75}to{transform:scale(1.06);opacity:1}}@keyframes gg-pulse{from{opacity:.12}to{opacity:.85}}@keyframes gg-halo{from{transform:scale(.92);opacity:.7}to{transform:scale(1.03);opacity:1}}@keyframes gg-floor{from{transform:scale(.78);opacity:.35}to{transform:scale(1.05);opacity:.75}}@media (prefers-reduced-motion:reduce){.gg-cube *,.gg-cube *::before,.gg-cube *::after{animation:none !important}.gg-cube .gg-cube__spin{animation-name:gg-spin !important;animation-duration:40s !important;animation-timing-function:linear !important;animation-iteration-count:infinite !important}}