/* ================= Tokens (RFactorial brand palette) ================= */
:root{
  --red:#DD1E47; --red-2:#ED3D57; --coral:#F05E69; --coral-2:#F37F7B; --blush:#EDB4B5; --soft:#EACED2; --mist:#E9E5EA;
  --wine-1:#C82146; --wine-2:#B32444; --wine-3:#892A41; --wine-4:#742D40; --wine-5:#5F303E;
  --ink:#35363A; --ink-deep:#2B2C2F; --ink-deeper:#242528;
  --muted-light:#5D5E63; --muted-dark:rgba(233,229,234,.74);
  --line-dark:rgba(255,255,255,.12); --line-light:rgba(53,54,58,.12);
  --rail:104px; --gutter:clamp(16px,4vw,56px); --sheet-r:44px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --grain: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:1023px){:root{--rail:0px;--sheet-r:30px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--ink-deeper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.022em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--coral-2);outline-offset:3px;border-radius:10px}
.light :focus-visible{outline-color:var(--wine-2)}
.container{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--red);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ================= Buttons & chips ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:800;font-size:16px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease),background-color .25s,box-shadow .35s,border-color .25s,color .25s}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 14px 34px -14px rgba(221,30,71,.85),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{background:var(--red-2);transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#45464b;transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border-color:rgba(53,54,58,.28)}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-dark);background:rgba(255,255,255,.05);color:var(--blush);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(240,94,105,.2),0 0 14px var(--coral)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--wine-2)}
.eyebrow b{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 8px;border-radius:999px;background:var(--wine-2);color:#fff;font-size:11.5px;letter-spacing:.06em}
.dark .eyebrow{color:var(--coral-2)}
.dark .eyebrow b{background:var(--red)}

/* ================= Side rail (desktop) ================= */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:24px 0;color:#fff;border-right:1px solid rgba(255,255,255,.1);background:linear-gradient(90deg,rgba(36,37,40,.6),rgba(36,37,40,.18));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:color .45s,background .45s,border-color .45s}
.rail[data-theme="light"]{color:var(--ink);border-color:rgba(53,54,58,.1);background:linear-gradient(90deg,rgba(233,229,234,.82),rgba(233,229,234,.4))}
.rail-logo{display:block;border-radius:12px}
.rail-logo img{width:76px;height:auto}
.rail-logo .lg-light{display:none}
.rail[data-theme="light"] .rail-logo .lg-dark{display:none}
.rail[data-theme="light"] .rail-logo .lg-light{display:block}
.rail-progress{position:absolute;right:-1px;top:0;bottom:0;width:2px;pointer-events:none}
.rail-progress span{display:block;width:100%;height:0;background:linear-gradient(180deg,var(--red),var(--coral-2));box-shadow:0 0 12px rgba(240,94,105,.6)}
.rail-nav{display:flex;flex-direction:column;align-items:center;gap:2px}
.rail-nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 10px;border-radius:14px;text-decoration:none;color:inherit;opacity:.58;transition:opacity .3s,background-color .3s}
.rail-nav a:hover{opacity:1;background:rgba(255,255,255,.07)}
.rail[data-theme="light"] .rail-nav a:hover{background:rgba(53,54,58,.06)}
.rail-nav a[aria-current="true"]{opacity:1}
.rail-nav a::before{content:"";position:absolute;left:-14px;top:50%;width:3px;height:0;border-radius:3px;background:var(--red);transform:translateY(-50%);transition:height .45s var(--ease)}
.rail-nav a[aria-current="true"]::before{height:62%}
.rn-num{font-size:11px;font-weight:900;letter-spacing:.06em}
.rail-nav a[aria-current="true"] .rn-num{color:var(--coral-2)}
.rail[data-theme="light"] .rail-nav a[aria-current="true"] .rn-num{color:var(--wine-2)}
.rn-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.rail-cta{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;text-decoration:none;box-shadow:0 14px 30px -12px rgba(221,30,71,.9);transition:transform .4s var(--ease),background-color .3s}
.rail-cta:hover,.rail-cta:focus-visible{transform:scale(1.07);background:var(--red-2)}
.rail-cta svg{width:22px;height:22px}
.rail-cta .rc-label{position:absolute;left:calc(100% + 14px);top:50%;transform:translate(-8px,-50%);opacity:0;pointer-events:none;white-space:nowrap;padding:11px 18px;border-radius:999px;background:var(--red);font-weight:800;font-size:14.5px;box-shadow:0 14px 30px -12px rgba(221,30,71,.9);transition:opacity .3s,transform .45s var(--ease)}
.rail-cta:hover .rc-label,.rail-cta:focus-visible .rc-label{opacity:1;transform:translate(0,-50%)}
@media (max-height:760px){.rn-label{font-size:11.5px}.rail-nav a{padding:6px 8px;gap:6px}.rail-logo img{width:64px}}

/* ================= Mobile dock + full-screen menu ================= */
.dock,.hero-logo{display:none}
.overlay{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:center;padding:90px var(--gutter) 120px;background:var(--ink-deeper);color:#fff;clip-path:circle(0 at 50% calc(100% - 44px));visibility:hidden;transition:clip-path .75s var(--ease),visibility 0s linear .75s}
.overlay.open{clip-path:circle(150% at 50% calc(100% - 44px));visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
.overlay::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 400px at 80% 10%,rgba(221,30,71,.25),transparent 70%);pointer-events:none}
.ov-logo{position:absolute;top:22px;left:var(--gutter)}
.ov-logo img{width:62px}
.ov-link{position:relative;z-index:1;display:flex;align-items:baseline;gap:16px;padding:8px 0;font-size:clamp(34px,9.5vw,60px);font-weight:800;letter-spacing:-.03em;text-decoration:none;opacity:0;translate:0 36px;transition:opacity .5s,translate .7s var(--ease)}
.ov-link small{font-size:14px;font-weight:900;color:var(--coral-2);letter-spacing:.06em}
.overlay.open .ov-link{opacity:1;translate:0 0}
.overlay.open .ov-link:nth-of-type(1){transition-delay:.15s}.overlay.open .ov-link:nth-of-type(2){transition-delay:.21s}.overlay.open .ov-link:nth-of-type(3){transition-delay:.27s}.overlay.open .ov-link:nth-of-type(4){transition-delay:.33s}.overlay.open .ov-link:nth-of-type(5){transition-delay:.39s}

/* ================= Sheets: each section slides over the previous one ================= */
main{position:relative}
.sheet{position:sticky;top:0;padding-left:var(--rail);transform-origin:50% 50%}
.sheet + .sheet{margin-top:calc(-1*var(--sheet-r));border-radius:var(--sheet-r) var(--sheet-r) 0 0;box-shadow:0 -28px 60px -30px rgba(0,0,0,.5)}
.veil{position:absolute;inset:0;z-index:60;pointer-events:none;background:#141416;opacity:0;border-radius:inherit}
.section{padding-block:clamp(96px,11vw,150px)}
.light{background:var(--mist);color:var(--ink)}
.dark{background:var(--ink);color:#fff}
.dark.grain::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);opacity:.04;mix-blend-mode:overlay;border-radius:inherit}
.section-head{max-width:780px}
.section-head h2{margin-top:20px;font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.035em}
.section-head .section-lead{margin-top:22px;font-size:clamp(17px,1.3vw,19.5px);line-height:1.62;color:var(--muted-light);max-width:660px}
.dark .section-head .section-lead{color:var(--muted-dark)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .section-lead{margin-inline:auto}

/* word-by-word headline reveal */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block}
.js .split .w>span{translate:0 112%;transition:translate 1.05s var(--ease);transition-delay:calc(var(--wi,0)*45ms)}
.js .split.in .w>span{translate:0 0}
/* reveal (uses the individual translate property so it never fights a component's own transform) */
.js .reveal{opacity:0;translate:0 34px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.js .reveal.in{opacity:1;translate:0 0}
.js .reveal[data-d="1"]{transition-delay:.08s}.js .reveal[data-d="2"]{transition-delay:.16s}.js .reveal[data-d="3"]{transition-delay:.24s}

/* ================= Hero ================= */
.hero{min-height:100svh;color:#fff;overflow:hidden;isolation:isolate;background:radial-gradient(900px 760px at 76% 46%,#47484E 0%,#3A3B40 30%,var(--ink) 56%,var(--ink-deeper) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(36,37,40,.9) 0%,rgba(36,37,40,.62) 30%,rgba(36,37,40,0) 56%),linear-gradient(0deg,rgba(36,37,40,.92) 0%,rgba(36,37,40,0) 22%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);opacity:.05;mix-blend-mode:overlay}
#cell-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.2s ease}
.hero.is-3d #cell-canvas{opacity:1}
.hero-fallback{position:absolute;z-index:0;right:calc(var(--gutter) + 5%);top:46%;width:min(28vw,50vh);height:auto;transform:translateY(-50%);opacity:0;transition:opacity .9s}
.hero.no-3d .hero-fallback{opacity:1}
.hero-grid{position:relative;z-index:3;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:30px var(--gutter) calc(var(--sheet-r) + 26px);pointer-events:none}
.hero-grid>*{pointer-events:auto}
.hero-chip{justify-self:start;align-self:start}
.hero-main{align-self:center;width:min(60%,800px);padding:40px 0 44px}   /* 800px keeps "your organization" (7.55em) on one line at the 104px max size */
.hero h1{font-size:clamp(46px,5.5vw,104px);line-height:.96;letter-spacing:-.045em;font-weight:800}
.hero h1 .line{display:block}
.grad-text{background:linear-gradient(100deg,var(--red) 0%,var(--coral) 55%,var(--coral-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.03em}
.hero-main .lead{margin-top:28px;max-width:540px;font-size:clamp(17px,1.3vw,19.5px);line-height:1.62;color:var(--muted-dark)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.fam-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 26px}
.fam-h{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blush);margin-right:4px}
.fam{position:relative;display:inline-flex;align-items:baseline;gap:8px;padding:6px 0;text-decoration:none;font-weight:800;font-size:16.5px;color:rgba(255,255,255,.84);transition:color .3s}
.fam small{font-size:11px;font-weight:900;color:var(--coral-2)}
.fam::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fam:hover,.fam.is-hot{color:#fff}
.fam:hover::after,.fam.is-hot::after{transform:scaleX(1)}
.js .hero-chip,.js .hero-main .lead,.js .hero-main .cta-row,.js .hero-foot{animation:heroIn 1s var(--ease) both}
.js .hero-main .lead{animation-delay:.35s}.js .hero-main .cta-row{animation-delay:.48s}.js .hero-foot{animation-delay:.6s}
@keyframes heroIn{from{opacity:0;translate:0 18px}}

.node-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.node-label{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 14px 9px;border-radius:14px;background:rgba(43,44,47,.62);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;opacity:0;pointer-events:none;cursor:pointer;transition:opacity .7s ease,border-color .3s,background-color .3s;will-change:transform}
.hero.is-divided .node-label{opacity:1;pointer-events:auto}
.node-label .nl-role{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blush);font-weight:800}
.node-label .nl-name{font-size:15px;font-weight:800;color:#fff}
.node-label.is-hot{border-color:var(--coral-2);background:rgba(221,30,71,.4)}
.hero.no-3d .node-labels{display:none}

/* ================= Products ================= */
#products{overflow:hidden;overflow:clip}
.prod-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.audience{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.audience span{padding:7px 14px;border-radius:999px;font-size:14px;font-weight:700;background:rgba(255,255,255,.55);border:1px solid rgba(53,54,58,.08)}
.tabs{display:flex;flex-wrap:wrap;align-items:stretch;gap:2px;margin-top:56px;padding:4px 6px 6px;border-radius:22px;background:rgba(53,54,58,.05);border:1px solid rgba(53,54,58,.08);width:max-content;max-width:100%}
.tab-group{display:flex;flex-direction:column;gap:4px;padding:6px 4px 0}
.tab-group+.tab-group{border-left:1px solid rgba(53,54,58,.1);padding-left:8px}
.tg-h{padding:0 12px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-light);white-space:nowrap;transition:color .3s}
.tab-group:has(.tab[aria-selected="true"]) .tg-h{color:var(--wine-2)}
.tg-row{display:flex;gap:2px}
.tab{position:relative;padding:9px 16px 10px;border-radius:15px;border:0;background:transparent;cursor:pointer;white-space:nowrap;transition:background-color .3s,box-shadow .3s}
.tab .t-name{font-size:16.5px;font-weight:800}
.tab:hover{background:rgba(255,255,255,.5)}
.tab[aria-selected="true"]{background:#fff;box-shadow:0 10px 30px -14px rgba(53,54,58,.35)}
.products-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:28px}
.products-grid>.viz-scene{position:sticky;top:max(24px,calc(50vh - 340px))}

/* --- product visuals (one 3D scene per product) --- */
.viz-scene{--fit:1;--dir:1;position:relative;height:calc(600px * var(--fit) + 52px);perspective:1500px}
.viz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transform:translateX(calc(var(--dir)*90px)) rotateY(calc(var(--dir)*-28deg));transition:opacity .45s ease,transform .8s var(--ease),visibility 0s linear .8s}
.viz.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease .08s,transform 1s var(--ease) .04s,visibility 0s}
.viz.out{transform:translateX(calc(var(--dir)*-90px)) rotateY(calc(var(--dir)*28deg))}
.viz-box{width:100%;height:calc(600px * var(--fit));display:flex;justify-content:center;align-items:center}
.viz-fit{flex:none;width:600px;height:600px;transform:scale(var(--fit));perspective:1700px;perspective-origin:50% 40%}
.viz-tilt{--tx:0deg;--ty:0deg;position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--tx)) rotateY(var(--ty));transition:transform 1s var(--ease)}
.viz-cap{margin-top:auto;padding:0 16px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted-light)}
/* isometric building blocks */
.iso{--rx:56deg;--rz:-40deg;--gap:96px;position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate(var(--ix,0px),var(--iy,0px)) rotateX(var(--rx)) rotateZ(var(--rz))}
.layer,.plate{position:absolute;width:var(--s);height:var(--s2,var(--s));left:calc(var(--s)/-2);top:calc(var(--s2,var(--s))/-2);transform-style:preserve-3d;transform:translateZ(calc(var(--i,0)*var(--gap)))}
.th{position:absolute;inset:0;border-radius:22px;background:var(--side)}
.th:nth-child(1){transform:translateZ(-16px)}.th:nth-child(2){transform:translateZ(-12px)}.th:nth-child(3){transform:translateZ(-8px)}.th:nth-child(4){transform:translateZ(-4px)}
.face{position:absolute;inset:0;border-radius:22px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 40px 60px -40px rgba(255,255,255,.28);transform-style:preserve-3d}
.viz.play .layer{animation:dropIn 1.05s var(--ease) backwards;animation-delay:calc(var(--i)*.14s + .08s)}
@keyframes dropIn{from{translate:0 0 320px}}
.cube{--w:44px;--d:var(--w);--h:24px;--c:#6A6B71;position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--d);transform-style:preserve-3d}
.cube .t{position:absolute;inset:0;border-radius:5px;background:var(--c);transform:translateZ(var(--h));transform-style:preserve-3d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 10px 14px -10px rgba(255,255,255,.55);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cube .s{position:absolute;left:0;top:100%;width:100%;height:var(--h);transform-origin:50% 0;transform:rotateX(90deg);background:var(--c);background:color-mix(in srgb,var(--c) 70%,#000)}
.cube .w{position:absolute;right:100%;top:0;width:var(--h);height:100%;transform-origin:100% 50%;transform:rotateY(90deg);background:var(--c);background:color-mix(in srgb,var(--c) 52%,#000)}
.anchor{position:absolute;left:100%;top:100%;width:0;height:0;transform-style:preserve-3d}
.anchor.top{left:50%;top:0}
.anchor.bl{left:0;top:100%}
.anchor.tr{left:100%;top:0}
.lab{position:absolute;left:0;top:0;transform-origin:0 0;transform:rotateZ(calc(-1*var(--rz))) rotateX(calc(-1*var(--rx))) translate(20px,-50%) translateZ(40px);white-space:nowrap;padding:9px 13px;border-radius:12px;background:#fff;box-shadow:0 14px 30px -14px rgba(53,54,58,.55);font-size:12px;line-height:1.3;color:var(--muted-light)}
.lab b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.lab::before{content:"";position:absolute;right:100%;top:50%;width:20px;height:1.5px;background:rgba(53,54,58,.38)}
.lab.mini{transform:rotateZ(calc(-1*var(--rz))) rotateX(calc(-1*var(--rx))) translate(-50%,-100%) translateY(-12px) translateZ(30px);padding:6px 10px;font-size:12px;font-weight:800;color:var(--ink)}
.lab.mini::before{display:none}
.lab.below{transform:rotateZ(calc(-1*var(--rz))) rotateX(calc(-1*var(--rx))) translate(-50%,22px) translateZ(30px)}
.lab.below::before{right:auto;left:50%;top:auto;bottom:100%;width:1.5px;height:22px}
.lab.above{transform:rotateZ(calc(-1*var(--rz))) rotateX(calc(-1*var(--rx))) translate(-50%,calc(-100% - 22px)) translateZ(60px)}
.lab.above::before{right:auto;left:50%;top:100%;width:1.5px;height:22px}
.viz.play .lab{animation:labIn .7s ease backwards;animation-delay:calc(var(--i,0)*.12s + .75s)}
@keyframes labIn{from{opacity:0}}

/* Clastiq: infrastructure stack */
.viz-core .iso{--iy:118px;--ix:-84px}
.gpu .t{animation:gpuGlow 2.6s ease-in-out infinite}
.gpu:nth-of-type(2n) .t{animation-delay:-1.3s}
@keyframes gpuGlow{50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 24px rgba(240,94,105,.95)}}
.cp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cp-grid{stroke:rgba(255,255,255,.1);stroke-width:1}
.cp-flow{fill:none;stroke:#F37F7B;stroke-width:2;stroke-dasharray:4 8;animation:flow12 1.44s linear infinite}
.pod{position:absolute;left:var(--x);top:var(--y);width:88px;height:88px;border:1.5px dashed rgba(255,255,255,.8);border-radius:14px;transform-style:preserve-3d}
.pod small{position:absolute;left:9px;bottom:6px;font-size:9.5px;font-weight:900;letter-spacing:.08em;color:#fff;text-transform:uppercase}
.pod .cube .t{animation:podPulse 3.2s ease-in-out infinite;animation-delay:calc(var(--k,0)*-.8s)}
@keyframes podPulse{50%{background:#fff;box-shadow:0 0 16px rgba(255,255,255,.9)}}

/* shared: panes floating in 3D (Rovetta, Resonor) */
.panes{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate(14px,4px) rotateY(-16deg) rotateX(6deg) scale(1.06)}
.pane{position:absolute;left:var(--x);top:var(--y);transform:translateZ(var(--z));border-radius:16px;box-shadow:0 34px 60px -30px rgba(53,54,58,.65)}
.viz.play .pane{animation:paneIn 1s var(--ease) backwards;animation-delay:calc(var(--k)*.16s + .08s)}
@keyframes paneIn{from{opacity:0;translate:0 0 -260px}}
.pane-tag{position:absolute;left:2px;top:-30px;font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--wine-2);white-space:nowrap}
.win-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.06)}
.win-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.win-bar span{margin-left:8px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55)}
/* live audio: each bar swings between a low and its own peak, endlessly (alternate, so there is no restart) */
.wave{display:flex;align-items:center;gap:3px;height:54px}
.wave i{flex:1;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--coral-2),var(--red));transform:scaleY(.18);animation:wave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-.13s)}
.wave.sm{height:34px}
.wave.xs{height:20px;gap:2px}
@keyframes wave{to{transform:scaleY(var(--a,1))}}
/* two scripted moments take turns on an 18s loop: set A (0-9s), set B (9-18s). Lines inside a set appear one
   after another; the stagger lives in the keyframes (r0-r5), so each loop restarts while its set is hidden */
.sets{display:grid}
.sets>.set{grid-area:1/1;opacity:0}
.viz.play .set{animation:setVis 18s ease infinite}
.viz.play .set-b,.viz.play .set-b .tl,.viz.play .set-b .sum-s{animation-delay:9s}
.viz.play .set-a.lag{animation-delay:.7s}
.viz.play .set-b.lag{animation-delay:9.7s}
@keyframes setVis{0%,1%{opacity:0}4%,46%{opacity:1}49%,100%{opacity:0}}
.tl,.sum-s{opacity:0}
.viz.play .r0{animation:r0 18s ease infinite}.viz.play .r1{animation:r1 18s ease infinite}.viz.play .r2{animation:r2 18s ease infinite}
.viz.play .r3{animation:r3 18s ease infinite}.viz.play .r4{animation:r4 18s ease infinite}.viz.play .r5{animation:r5 18s ease infinite}
@keyframes r0{0%,4%{opacity:0;clip-path:inset(0 100% 0 0)}8%,100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes r1{0%,10%{opacity:0;clip-path:inset(0 100% 0 0)}14%,100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes r2{0%,16%{opacity:0;clip-path:inset(0 100% 0 0)}20%,100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes r3{0%,22%{opacity:0;clip-path:inset(0 100% 0 0)}26%,100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes r4{0%,28%{opacity:0;translate:0 8px}31%,100%{opacity:1;translate:0 0}}
@keyframes r5{0%,33%{opacity:0;translate:0 8px}36%,100%{opacity:1;translate:0 0}}

/* Rovetta: listen -> transcript -> the document the setting calls for */
.p-listen{width:236px;padding:16px;background:var(--soft);border:1px solid rgba(255,255,255,.7)}
.rec{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:12.5px;font-weight:800;color:var(--ink)}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(221,30,71,.18);animation:recBlink 1.6s ease-in-out infinite alternate}
.rec span{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted-light)}
@keyframes recBlink{to{opacity:.35}}
.p-trans .pane-tag,.p-sum .pane-tag{left:auto;right:4px}   /* the pane behind covers the left side */
.p-trans{width:330px;background:#2B2C2F;color:#fff;overflow:hidden}
.p-trans .sets{padding:10px 14px 12px;min-height:154px}
.tl{margin:0;padding:4px 0;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.86)}
.tl b{display:inline-block;min-width:58px;margin-right:4px;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-2)}
.p-sum{width:292px;background:#fff;overflow:hidden}
.sum-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#F4F2F5;border-bottom:1px solid rgba(53,54,58,.07)}
.sum-bar i{width:8px;height:8px;border-radius:50%;background:rgba(53,54,58,.18)}
.p-sum .sets{padding:12px 14px 12px;min-height:178px}
.sum-h{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:8px}
.sum-h b{font-size:13.5px;font-weight:800;color:var(--ink)}
.tpl{padding:3px 9px;border-radius:999px;background:rgba(221,30,71,.1);color:var(--wine-2);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.sum-s{padding:7px 0;border-top:1px solid rgba(53,54,58,.08)}
.sum-s small{display:block;font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-light)}
.sum-s p{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11.5px;font-weight:700;line-height:1.4;color:var(--ink)}
.sum-s p i{flex:none;width:11px;height:11px;border-radius:3px;border:1.5px solid var(--wine-2)}
.detect{position:absolute;left:var(--x);top:var(--y);transform:translateZ(var(--z))}
.detect .set{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(53,54,58,.75)}
.detect .set i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--red);font-style:normal;font-size:11px}

/* Resonor: one speaker, every listener in their own language */
.viz-resonor .panes{transform:translate(12px,10px) rotateY(-14deg) rotateX(8deg) scale(1.04)}
.rs-links{position:absolute;left:-320px;top:-300px;width:640px;height:600px;max-width:none;overflow:visible}
.rs-links .e{fill:none;stroke:rgba(53,54,58,.18);stroke-width:2}
.rs-links .ef{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:4 6;animation:flow 1s linear infinite}
.p-spk,.p-lis{background:#fff;padding:14px}
.p-spk{width:210px}
.p-lis{width:200px;padding:12px 14px}
.who{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.who>i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--coral-2));color:#fff;font-style:normal;font-size:12px;font-weight:900}
.who b{font-size:13px;font-weight:800}
.lang{margin-left:auto;padding:3px 8px;border-radius:999px;background:rgba(221,30,71,.1);color:var(--wine-2);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.p-lis .who{margin-bottom:8px}
.p-lis .lang{margin-left:0}
.p-lis .wave{flex:1}
.cap{min-height:34px;font-size:12px;font-weight:700;line-height:1.4;color:var(--ink)}
.p-spk .cap{margin-top:10px;font-size:13px}
.rs-core{position:absolute;left:var(--x);top:var(--y);width:92px;height:92px;transform:translateZ(30px);border-radius:50%;display:grid;place-items:center;align-content:center;color:#fff;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.7),var(--coral-2) 22%,var(--red) 60%,var(--wine-3));box-shadow:0 18px 40px -14px rgba(221,30,71,.8)}
.rs-core b{position:relative;font-size:12.5px;font-weight:900}
.rs-core small{position:relative;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.rs-core i,.ava-orb i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--coral-2);opacity:0;animation:ripple 2.4s ease-out infinite}
.rs-core i:nth-child(2),.ava-orb i:nth-child(2){animation-delay:-.8s}
.rs-core i:nth-child(3),.ava-orb i:nth-child(3){animation-delay:-1.6s}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* AVA: an AI voice agent on a call */
.ava{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate(0,6px) rotateY(-18deg) rotateX(8deg) scale(1.05)}
.call{position:absolute;width:300px;left:-150px;top:-238px;padding:16px 16px 18px;border-radius:30px;background:#2F3034;color:#fff;box-shadow:0 40px 80px -40px rgba(53,54,58,.85)}
.viz.play .call{animation:paneIn 1s var(--ease) backwards .08s}
.call-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;color:rgba(255,255,255,.6)}
.call-top>span:last-child{font-family:var(--mono);font-weight:600}
.live{display:flex;align-items:center;gap:7px;color:#fff}
.live i{width:8px;height:8px;border-radius:50%;background:var(--coral-2);animation:recBlink 1.6s ease-in-out infinite alternate}
.ava-orb{position:relative;width:92px;height:92px;margin:20px auto 14px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.7),var(--coral-2) 22%,var(--red) 60%,var(--wine-3));box-shadow:0 18px 40px -14px rgba(221,30,71,.9)}
.ava-orb b{position:relative;font-size:16px;font-weight:900;letter-spacing:.08em}
.call .wave{margin:0 22px}
.convo{display:flex;flex-direction:column;gap:8px;min-height:182px;margin-top:16px}
.bub2{max-width:86%;padding:8px 11px;border-radius:13px;font-size:11px;line-height:1.45;opacity:0}
.bub2.me{align-self:flex-end;background:rgba(255,255,255,.1);border-bottom-right-radius:4px}
.bub2.ai{align-self:flex-start;background:var(--red);border-bottom-left-radius:4px}
.viz.play .b0{animation:b0 14s ease infinite}.viz.play .b1{animation:b1 14s ease infinite}
.viz.play .b2{animation:b2 14s ease infinite}.viz.play .b3{animation:b3 14s ease infinite}
@keyframes b0{0%,4%{opacity:0;translate:0 8px}8%,90%{opacity:1;translate:0 0}95%,100%{opacity:0;translate:0 0}}
@keyframes b1{0%,20%{opacity:0;translate:0 8px}24%,90%{opacity:1;translate:0 0}95%,100%{opacity:0;translate:0 0}}
@keyframes b2{0%,36%{opacity:0;translate:0 8px}40%,90%{opacity:1;translate:0 0}95%,100%{opacity:0;translate:0 0}}
@keyframes b3{0%,50%{opacity:0;translate:0 8px}54%,90%{opacity:1;translate:0 0}95%,100%{opacity:0;translate:0 0}}

/* Radon: workflow canvas */
.viz-radon .iso{--rx:50deg;--rz:-32deg;--iy:40px}
.plate .face{background:#3A3B40;background-image:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.6px);background-size:20px 20px}
.edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.edges .e{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2.2}
.edges .ef{fill:none;stroke:#F37F7B;stroke-width:2.2;stroke-dasharray:5 10;animation:flow15 1.65s linear infinite}
.runtime{position:absolute;inset:16px;border:1.5px dashed rgba(243,127,123,.6);border-radius:16px}
/* one glow chases along the flow: the cycle is exactly four steps long, so node 0 lights right after the last one */
.fnode .t{animation:nodeRun 2.2s ease-in-out infinite;animation-delay:calc(var(--k)*.55s)}
@keyframes nodeRun{0%,55%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}14%,30%{box-shadow:inset 0 0 0 2px #fff,0 0 28px rgba(243,127,123,1)}}
.fnode .t svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* DPO: products advance through a flow, stage by stage; three products are always on their way */
.viz-dpo .iso{--rx:50deg;--rz:-32deg;--iy:6px}
.lane{position:absolute;left:52px;right:52px;top:221px;border-top:2px dashed rgba(243,127,123,.55)}
.gate .t{animation:gpuGlow 2.6s ease-in-out infinite;animation-delay:calc(var(--k)*-.65s)}
.tok{animation:tokRun 15s linear infinite}
.tok .t{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 16px rgba(243,127,123,.9)}
@keyframes tokRun{0%{translate:0 0;opacity:0}3%{opacity:1}14%{translate:0 0}20%,34%{translate:86px 0}40%,54%{translate:172px 0}60%,74%{translate:258px 0}80%,94%{translate:344px 0;opacity:1}100%{translate:344px 0;opacity:0}}

/* Radon Mini: employee workspace */
.ws{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate(6px,10px) rotateY(-20deg) rotateX(9deg) scale(1.1)}
.org{position:absolute;width:540px;height:404px;left:-270px;top:-202px;transform:translateZ(-90px);border-radius:36px;border:2px dashed rgba(221,30,71,.45);background:rgba(234,206,210,.45)}
.org-tag{position:absolute;left:22px;top:15px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--wine-2)}
.org-tag svg{width:15px;height:15px}
.org-ctrl{position:absolute;right:20px;bottom:14px;display:flex;gap:6px}
.org-ctrl span{padding:4px 10px;border-radius:999px;background:#fff;font-size:11px;font-weight:800;color:var(--wine-2)}
.ws-panel{position:absolute;width:452px;height:300px;left:-226px;top:-150px;border-radius:22px;background:#2F3034;color:#fff;display:grid;grid-template-columns:112px minmax(0,1fr) 124px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(53,54,58,.85)}
.viz.play .ws-panel{animation:paneIn 1s var(--ease) backwards .08s}
.ws-side{padding:14px 10px;background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.07)}
.ws-h{font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.agent{display:flex;align-items:center;gap:7px;padding:7px;border-radius:10px;font-size:10.5px;font-weight:700;margin-bottom:4px;line-height:1.2}
.agent.on{background:rgba(240,94,105,.2)}
.agent i{flex:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--coral-2))}
.agent:nth-of-type(3) i{background:linear-gradient(135deg,var(--wine-3),var(--wine-1))}
.agent:nth-of-type(4) i{background:linear-gradient(135deg,#6A6B71,#45464C)}
.ws-chat{padding:14px 12px;display:flex;flex-direction:column;gap:9px}
.ws-chat .ws-h{margin-bottom:2px}
.bub{max-width:94%;padding:8px 10px;border-radius:12px;font-size:10.5px;line-height:1.45;opacity:0}
.bub.me{align-self:flex-end;background:var(--red);border-bottom-right-radius:4px}
.ai-slot{display:grid;align-self:flex-start;max-width:94%}
.ai-slot>*{grid-area:1/1}
.bub.ai{background:rgba(255,255,255,.09);border-bottom-left-radius:4px}
.typing{align-self:start;justify-self:start;display:flex;gap:4px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.09);opacity:0}
.typing i{width:5px;height:5px;border-radius:50%;background:#fff;animation:dotb 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dotb{50%{translate:0 -3px;opacity:.5}}
.ws-tasks{padding:14px 10px;border-left:1px solid rgba(255,255,255,.07)}
.task{padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.07);font-size:10.5px;font-weight:700;line-height:1.3;margin-bottom:6px;opacity:0}
.task small{display:block;margin-top:3px;font-size:9.5px;color:var(--blush);font-weight:800}
.task.cal{background:rgba(240,94,105,.2)}
.viz.play .bub.me{animation:k1 9s ease infinite}
.viz.play .typing{animation:k2 9s ease infinite}
.viz.play .bub.ai{animation:k3 9s ease infinite}
.viz.play .task{animation:k4 9s ease infinite;animation-delay:calc(var(--k)*.4s)}
@keyframes k1{0%,4%{opacity:0;translate:0 8px}8%,90%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes k2{0%,11%{opacity:0}14%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes k3{0%,31%{opacity:0;translate:0 8px}35%,90%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes k4{0%,40%{opacity:0;translate:16px 0}45%,90%{opacity:1;translate:0 0}97%,100%{opacity:0}}
.fchip{position:absolute;left:var(--x);top:var(--y);transform:translateZ(var(--z));display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:800;white-space:nowrap;box-shadow:0 16px 30px -14px rgba(53,54,58,.6)}
.fchip i{width:9px;height:9px;border-radius:50%;background:var(--red)}
.viz.play .fchip{animation:chipIn .8s var(--ease) backwards,bob 5s ease-in-out infinite;animation-delay:calc(var(--k)*.12s + .5s),calc(var(--k)*-1.25s)}
@keyframes chipIn{from{opacity:0;scale:.6}}
@keyframes bob{50%{translate:0 -10px}}

.panels{position:relative}
.panel{position:relative;border-radius:28px;padding:clamp(24px,3vw,40px);background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.9);box-shadow:0 40px 90px -50px rgba(53,54,58,.45)}
.panel.enter{animation:panelIn .75s var(--ease) both}
@keyframes panelIn{from{opacity:0;translate:calc(var(--dir,1)*36px) 0}}
.panel.enter .cap{animation:capIn .6s var(--ease) backwards;animation-delay:calc(var(--ci,0)*55ms + .18s)}
@keyframes capIn{from{opacity:0;translate:0 12px}}
.cap:nth-child(2){--ci:1}.cap:nth-child(3){--ci:2}.cap:nth-child(4){--ci:3}.cap:nth-child(5){--ci:4}.cap:nth-child(6){--ci:5}
.p-role{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,var(--c1),var(--c2))}
.panel h3{margin-top:16px;font-size:clamp(34px,3.4vw,46px);line-height:1}
.p-tag{margin-top:10px;font-size:19px;font-weight:700;color:var(--wine-2)}
.p-def{margin-top:16px;font-size:16.5px;line-height:1.65;color:var(--muted-light)}
.p-for{margin-top:16px;font-size:15px;line-height:1.55}
.p-for b{font-weight:800}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-top:20px}
.cap{position:relative;padding:14px 0 14px 22px;border-top:1px solid rgba(53,54,58,.1)}
.cap::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2))}
.cap b{display:block;font-size:15px;font-weight:800}
.cap span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--muted-light)}
.p-deploy{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--ink);color:#fff;font-size:14px;line-height:1.55}
.p-deploy svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--coral-2)}
.p-deploy b{color:var(--blush);font-weight:800}
.lifecycle{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px}
.lifecycle span{padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:700}
.lifecycle i{width:14px;height:2px;background:var(--coral);border-radius:2px}
.p-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.editions{margin-top:20px}
.ed-h{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--wine-2)}
.ed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.ed{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid rgba(53,54,58,.1)}
.ed b{font-size:16px;font-weight:800}
.ed span{font-size:13.5px;line-height:1.5;color:var(--muted-light)}
.ed .ed-pending{font-style:italic}
.ed-points{display:grid;gap:3px;margin:4px 0 0;padding:0;list-style:none}
.ed-points li{position:relative;padding-left:13px;font-size:13px;line-height:1.45;color:var(--muted-light)}
.ed-points li::before{content:"";position:absolute;left:1px;top:.6em;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2))}
.ed-link{display:block;margin-top:auto;padding-top:6px;font-size:13px;font-weight:800;color:var(--wine-2)}
.ed-link svg{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-2px;transition:transform .3s var(--ease)}
.ed-link:hover svg{transform:translateX(3px)}
.p-pending{margin-top:16px;font-size:14.5px;font-style:italic;color:var(--muted-light)}
.portfolio-note{margin-top:20px;font-size:13.5px;color:var(--muted-light);max-width:560px}

/* ================= Applications ================= */
#applications{overflow:hidden;background:linear-gradient(180deg,var(--mist) 0%,#EBDDE1 100%)}
.marquee{position:relative;margin:-10px 0 70px;pointer-events:none;user-select:none}
.mq-track{display:flex;gap:.5em;white-space:nowrap;font-size:clamp(56px,9vw,150px);font-weight:900;letter-spacing:-.045em;line-height:1.02;will-change:transform}
.mq-track span{color:transparent;-webkit-text-stroke:1.5px rgba(179,36,68,.34)}
.mq-track span.fill{color:rgba(221,30,71,.1);-webkit-text-stroke:0}
.mq-track.alt{margin-left:-30%}
.scen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:60px;perspective:1600px}
.scen{--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;border-radius:28px;padding:12px 12px 28px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 70px -45px rgba(53,54,58,.5);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),box-shadow .5s,opacity .9s var(--ease),translate .9s var(--ease),rotate 1s var(--ease)}
.js .scen.reveal{rotate:x 16deg;transform-origin:50% 100%}
.js .scen.reveal.in{rotate:x 0deg}
.scen:hover{box-shadow:0 40px 80px -40px rgba(137,42,65,.45)}
.scen-vis{position:relative;border-radius:20px;overflow:hidden;background:radial-gradient(420px 220px at 70% 0%,rgba(221,30,71,.22),transparent 70%),var(--ink);aspect-ratio:36/17}
.scen-vis::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);background-size:16px 16px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 120%);mask-image:linear-gradient(180deg,#000,transparent 120%)}
.scen-vis svg{position:relative;width:100%;height:100%}
.scen-body{padding:24px 18px 0}
.scen-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.tag-scn{background:rgba(53,54,58,.07);color:var(--muted-light)}
.tag-prd{background:rgba(221,30,71,.1);color:var(--wine-2)}
.scen h3{margin-top:14px;font-size:clamp(23px,2vw,28px);line-height:1.15}
.scen p{margin-top:10px;font-size:16px;line-height:1.62;color:var(--muted-light)}
.scen-note{margin-top:24px;text-align:center;font-size:13.5px;color:var(--muted-light)}
.dg text{font-family:'Nunito',sans-serif;font-weight:700;fill:rgba(255,255,255,.86);font-size:11px}
.dg .muted{fill:rgba(233,229,234,.55);font-size:10px;font-weight:700;letter-spacing:.08em}
.dg .box{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.22);stroke-width:1}
.dg .box.solid{fill:#3E3F44}
.dg .wire{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5}
.dg .flow{fill:none;stroke:var(--coral-2);stroke-width:1.6;stroke-dasharray:3 7;animation:flow 1.1s linear infinite}
/* dashes move a whole number of dash periods per cycle (3+7, 4+8, 5+10), so the loop never visibly restarts */
@keyframes flow{to{stroke-dashoffset:-20}}
.dg .wb{fill:var(--coral-2);transform-box:fill-box;transform-origin:center;transform:scaleY(.25);animation:wave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-.13s)}
.dg .pick{fill:none;stroke:var(--coral-2);stroke-width:1.6;opacity:0;animation:pick 8s ease-in-out infinite}
@keyframes pick{0%,8%{opacity:0}14%,44%{opacity:1}50%,100%{opacity:0}}
.dg .lis{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.3)}
.dg .cap{fill:rgba(233,229,234,.82);font-size:10.5px;font-weight:600}
.dg .gate{fill:none;stroke:var(--coral-2);stroke-width:2;stroke-linecap:round}
@keyframes flow12{to{stroke-dashoffset:-24}}
@keyframes flow15{to{stroke-dashoffset:-30}}
.dg .stage{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.25);animation:stageOn 6s ease-in-out infinite}
@keyframes stageOn{0%,4%{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.25)}10%,72%{fill:#DD1E47;stroke:#F37F7B}86%,100%{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.25)}}
.dg .prog{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;animation:prog 6s ease-in-out infinite}
@keyframes prog{0%{stroke-dashoffset:300;opacity:1}62%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:300;opacity:0}}

/* ================= How we build ================= */
#how-we-build{overflow-x:clip;background:radial-gradient(900px 600px at 85% 0%,rgba(221,30,71,.16),transparent 60%),var(--ink)}
.hwb-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px)}
.hwb-sticky{position:sticky;top:110px;align-self:start;padding-top:40px}
.hwb-sticky .section-head h2{font-size:clamp(36px,3.5vw,54px)}
.hwb-progress{margin-top:36px;display:flex;align-items:baseline;gap:12px}
.hwb-progress .big{font-size:76px;font-weight:900;line-height:1;letter-spacing:-.04em;background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.hwb-progress .of{font-size:15px;color:var(--muted-dark);font-weight:700}
.hwb-progress .name{display:block;font-size:20px;font-weight:800;color:var(--coral-2);margin-top:4px}
.steps-wrap{position:relative;padding:40px 0 20px}
.ribbon{position:absolute;left:0;top:0;width:130px;overflow:visible;pointer-events:none}
.ribbon .ghost path{opacity:.1}
.ribbon .mk{fill:var(--ink);stroke:rgba(255,255,255,.35);stroke-width:2;transition:fill .4s,stroke .4s}
.ribbon .mk.on{fill:#fff;stroke:#fff}
.steps{position:relative;display:flex;flex-direction:column;gap:18px;padding-left:150px}
.step{position:relative;padding:24px 26px;border-radius:22px;border:1px solid var(--line-dark);background:rgba(255,255,255,.03);transition:background-color .5s,border-color .5s,opacity .9s var(--ease),translate .9s var(--ease)}
.step.on{background:rgba(255,255,255,.065);border-color:rgba(243,127,123,.38)}
.step-head{display:flex;align-items:baseline;gap:14px}
.step-num{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--coral-2)}
.step h3{font-size:clamp(22px,2vw,27px)}
.step p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--muted-dark)}
.step .out{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.step .out span{padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
.step .out em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,180,181,.8);align-self:center;margin-right:4px}
.foundation{margin-top:clamp(90px,10vw,140px)}
.found-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px;perspective:1400px}
.found{--rx:0deg;--ry:0deg;position:relative;padding:28px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line-dark);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),border-color .4s,opacity .9s var(--ease),translate .9s var(--ease);overflow:hidden}
.found::after{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-90px;border-radius:50%;background:radial-gradient(closest-side,rgba(240,94,105,.25),transparent);opacity:0;transition:opacity .5s}
.found:hover{border-color:rgba(243,127,123,.45)}
.found:hover::after{opacity:1}
.found .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--coral-2));box-shadow:0 12px 26px -10px rgba(221,30,71,.8)}
.found .ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.found h3{margin-top:20px;font-size:21px}
.found p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted-dark)}
@property --spin{syntax:'<angle>';inherits:true;initial-value:0deg}
.loop{margin-top:clamp(90px,10vw,140px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.loop-stage{position:relative;height:540px;perspective:1300px;display:grid;place-items:center}
.loop-ring{--tilt:58deg;--R:230px;position:relative;width:calc(var(--R)*2);height:calc(var(--R)*2);transform-style:preserve-3d;transform:rotateX(var(--tilt)) rotateZ(var(--spin));animation:ringSpin 48s linear infinite}
@keyframes ringSpin{to{--spin:360deg}}
.loop-orbit{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 22px rgba(240,94,105,.05),0 0 0 23px rgba(240,94,105,.12),0 0 60px rgba(221,30,71,.2) inset}
.loop-orbit::before{content:"";position:absolute;inset:-46px;border-radius:50%;border:1px dashed rgba(255,255,255,.1)}
.loop-node{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(calc(var(--i)*72deg)) translateY(calc(var(--R)*-1))}
.loop-node .face{position:absolute;left:0;top:0;transform:translate(-50%,-100%) rotateZ(calc(-1*(var(--spin) + var(--i)*72deg))) rotateX(calc(-1*var(--tilt)));transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.loop-node .orb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--coral-2) 40%,var(--red));box-shadow:0 0 18px rgba(240,94,105,.9)}
.loop-node .card{order:-1;padding:9px 14px;border-radius:14px;background:rgba(43,44,47,.85);border:1px solid rgba(255,255,255,.14);text-align:center;white-space:nowrap}
.loop-node .card b{display:block;font-size:15px;font-weight:800}
.loop-node .card span{display:block;font-size:12px;color:var(--muted-dark)}
.loop-core{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.loop-core .face{position:absolute;transform:translate(-50%,-38%) rotateZ(calc(-1*var(--spin))) rotateX(calc(-1*var(--tilt)));width:118px;height:118px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:14px;font-weight:800;line-height:1.25;color:#fff;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.75),rgba(243,127,123,.95) 18%,var(--red) 55%,var(--wine-3) 100%);box-shadow:0 0 0 10px rgba(240,94,105,.08),0 0 80px rgba(221,30,71,.55),inset -10px -16px 30px rgba(95,48,62,.6)}
.loop-list{display:flex;flex-direction:column;gap:2px;margin-top:30px}
.loop-list li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line-dark);font-size:16px}
.loop-list li b{font-weight:800;color:#fff}
.loop-list li span{color:var(--muted-dark)}

/* ================= Company ================= */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:60px}
.stat{padding:28px 26px;border-radius:24px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95)}
.stat .n{font-size:clamp(48px,5.4vw,76px);font-weight:900;line-height:1;letter-spacing:-.045em;background:linear-gradient(120deg,var(--red),var(--coral-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat .l{margin-top:10px;font-size:15px;font-weight:700;line-height:1.4}
.stats-note{margin-top:14px;font-size:13px;color:var(--muted-light)}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:72px}
.co-grid h3{font-size:clamp(24px,2.2vw,30px)}
.disciplines{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.disciplines span{padding:9px 15px;border-radius:999px;font-size:14.5px;font-weight:700;background:#fff;border:1px solid rgba(53,54,58,.07);transition:background-color .3s,color .3s,translate .4s var(--ease)}
.disciplines span:hover{background:var(--ink);color:#fff;translate:0 -2px}
.attrs{margin-top:22px;display:flex;flex-direction:column}
.attrs li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line-light)}
.attrs li:last-child{border-bottom:1px solid var(--line-light)}
.attrs .k{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--coral-2));color:#fff;font-size:13px;font-weight:800}
.attrs b{display:block;font-size:16.5px;font-weight:800}
.attrs span{display:block;margin-top:2px;font-size:15px;line-height:1.55;color:var(--muted-light)}
.views{margin-top:90px}
.views-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.views-head h3{font-size:clamp(24px,2.2vw,30px)}
.views-head p{font-size:14.5px;color:var(--muted-light);max-width:460px}
.views-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.view{margin:0}
.view-frame{border-radius:18px;overflow:hidden;background:var(--ink);border:1px solid rgba(53,54,58,.2);box-shadow:0 24px 50px -30px rgba(53,54,58,.6)}
.view-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.06)}
.view-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.view-bar span{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.5);text-transform:uppercase}
.view-body{aspect-ratio:16/9;position:relative;padding:12px}
.view-body svg{width:100%;height:100%}
/* real captures: a wider frame, the image fills it; the frame links to the full-size capture */
.view.shot .view-frame{display:block;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s}
.view.shot .view-frame:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(53,54,58,.75)}
.view.shot .view-body{padding:0;background:#fff}
.view.shot .view-body img{width:100%;height:100%;object-fit:cover}
.skel rect{fill:rgba(255,255,255,.07)}
.skel .hl{fill:rgba(240,94,105,.55)}
.skel .shimmer{animation:shim 2.4s ease-in-out infinite}
@keyframes shim{50%{opacity:.45}}
.view-tag{position:absolute;inset:auto 10px 10px 10px;text-align:center;padding:6px 8px;border-radius:10px;background:rgba(43,44,47,.85);border:1px dashed rgba(255,255,255,.22);font-size:11px;font-weight:700;color:rgba(255,255,255,.75)}
.view figcaption{margin-top:10px;font-size:14px;font-weight:800}
.view figcaption span{display:block;font-weight:600;font-size:13px;color:var(--muted-light)}

/* ================= Contact ================= */
#contact{overflow:hidden;background:var(--ink-deep)}
.contact-deco{position:absolute;right:-180px;bottom:-260px;width:900px;height:900px;pointer-events:none;opacity:.9}
.contact-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.contact-links{margin-top:36px;display:flex;flex-direction:column}
.contact-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line-dark);text-decoration:none;font-weight:700;font-size:17px;transition:color .3s,padding .4s var(--ease)}
.contact-links a:last-child{border-bottom:1px solid var(--line-dark)}
.contact-links a small{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.contact-links a:hover{color:var(--coral-2);padding-left:8px}
.contact-links svg{width:18px;height:18px}
.contact-addr{margin-top:22px;font-style:normal;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.contact-addr small{display:block;margin-bottom:4px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.form{position:relative;padding:clamp(22px,3vw,36px);border-radius:28px;background:rgba(53,54,58,.74);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:800;color:rgba(255,255,255,.88)}
.field label .opt{font-weight:600;color:var(--muted-dark)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:13px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font-size:16px;transition:border-color .25s,background-color .25s,box-shadow .25s}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23EDB4B5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field select option{background:var(--ink);color:#fff}
.field input::placeholder,.field textarea::placeholder{color:rgba(233,229,234,.42)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral-2);background:rgba(255,255,255,.08);box-shadow:0 0 0 4px rgba(243,127,123,.18)}
.field .err{display:none;font-size:13px;color:#F7A8A5;font-weight:700}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#F7A8A5}
.field.invalid .err{display:block}
.field.consent .check{display:flex;align-items:flex-start;gap:12px;font-size:14px;font-weight:600;line-height:1.55;color:rgba(255,255,255,.82);cursor:pointer}
.field.consent input{appearance:auto;-webkit-appearance:checkbox;flex:none;width:20px;height:20px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--coral-2);box-shadow:none}
.field.consent a{color:var(--coral-2);text-underline-offset:3px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.form-foot small{font-size:13px;color:var(--muted-dark);max-width:300px}
.form-status{display:none;margin-top:18px;padding:14px 16px;border-radius:14px;font-size:14.5px;line-height:1.55}
.form-status.show{display:block}
.form-status.info{background:rgba(237,180,181,.12);border:1px solid rgba(237,180,181,.35);color:#F6D9DA}
.form-status.ok{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3)}
.form-status.bad{background:rgba(221,30,71,.18);border:1px solid rgba(243,127,123,.5)}

/* ================= Footer ================= */
.site-footer{position:relative;z-index:20;background:var(--ink-deeper);color:#fff;padding:72px 0 36px;padding-left:var(--rail)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.foot-brand img{width:92px;height:auto}
.foot-brand p{margin-top:18px;font-size:15px;line-height:1.6;color:var(--muted-dark);max-width:320px}
.foot-cog{display:inline-flex;flex-direction:column;gap:8px;margin-top:26px;color:#fff;text-decoration:none}
.foot-cog small{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.cog-logo{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cog-logo svg{width:34px;height:34px;margin-left:-4px}
.cog-logo b{font-weight:700;color:#40D3B0}
.foot-cog:hover .cog-logo{opacity:.85}
.foot-brand .foot-owner{margin-top:10px}
.foot-owner{color:rgba(255,255,255,.88)!important;font-weight:700}
.foot-owner a,.foot-addr a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(243,127,123,.6)}
.foot-owner a:hover,.foot-addr a:hover{color:var(--coral-2)}
.foot-addr{margin-top:12px;font-style:normal;font-size:14px;line-height:1.7;color:var(--muted-dark);max-width:340px}
.foot-col h4{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blush)}
.foot-col ul{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.foot-col a{text-decoration:none;font-size:15.5px;color:rgba(255,255,255,.82);transition:color .25s}
.foot-col a:hover{color:var(--coral-2)}
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:13.5px;color:var(--muted-dark)}

.foot-legal{display:flex;flex-direction:column;gap:6px;max-width:760px}
.foot-ar{align-self:flex-start;font-family:Tahoma,"Segoe UI",Arial,sans-serif;font-size:13.5px}
.foot-links{display:flex;gap:20px}
.foot-links a{color:rgba(255,255,255,.82);text-decoration:none}
.foot-links a:hover{color:var(--coral-2)}

/* ================= Responsive ================= */
@media (max-width:1180px){
  .products-grid{grid-template-columns:1fr}
  .products-grid>.viz-scene{position:relative;top:0}
  .hwb-grid{grid-template-columns:1fr}
  .hwb-sticky{position:relative;top:0;padding-top:0}
  .hwb-progress{display:none}
  .loop{grid-template-columns:1fr}
  .found-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:1023px){
  .rail{display:none}
  .hero-logo{display:block;position:absolute;z-index:4;top:18px;left:var(--gutter);border-radius:10px}
  .hero-logo img{width:62px}
  .dock{position:fixed;left:50%;bottom:14px;z-index:85;display:flex;gap:6px;padding:6px;border-radius:999px;transform:translateX(-50%);background:rgba(43,44,47,.86);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 40px -16px rgba(0,0,0,.6)}
  .dock-menu{display:flex;align-items:center;gap:10px;height:48px;padding:0 18px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-weight:800;cursor:pointer}
  .dock-menu .bars{position:relative;width:16px;height:2px;border-radius:2px;background:currentColor;transition:background-color .2s}
  .dock-menu .bars::before,.dock-menu .bars::after{content:"";position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease)}
  .dock-menu .bars::before{top:-5px}.dock-menu .bars::after{top:5px}
  .dock-menu[aria-expanded="true"] .bars{background:transparent}
  .dock-menu[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg)}
  .dock-menu[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg)}
  .dock .btn{height:48px;padding:0 20px;font-size:15px}
  .hero-fallback{right:auto;left:50%;top:70px;width:min(56vw,280px);transform:translateX(-50%)}
  .hero::before{background:linear-gradient(0deg,rgba(36,37,40,.95) 0%,rgba(36,37,40,.75) 45%,rgba(36,37,40,0) 64%)}
  .hero-grid{grid-template-rows:none;padding:min(60svh,500px) var(--gutter) 120px}
  .hero-main{width:auto;padding:18px 0 30px}
  .hero h1{font-size:clamp(40px,10.4vw,76px)}
  .hero h1 .line{display:inline}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .node-labels{display:none}
  .scen-grid{grid-template-columns:1fr}
  .co-grid{grid-template-columns:1fr;gap:56px;margin-top:64px}
  .views{margin-top:72px}
  .site-footer{padding-bottom:110px}
}
@media (max-width:640px){
  .cta-row .btn{flex:1 1 100%}
  /* the tab row runs edge to edge and scrolls sideways */
  .tabs{width:auto;max-width:none;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 6px;border-radius:0;border-inline:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab-group{flex:none}
  .caps{grid-template-columns:1fr}
  .ed-grid{grid-template-columns:1fr}
  .steps{padding-left:72px}
  .ribbon{width:64px}
  .step{padding:20px}
  .found-grid{grid-template-columns:1fr}
  .loop{gap:8px}
  /* a wider ring and a smaller core, so the far-side cards pass above the core instead of behind it */
  .loop-stage{height:300px}
  .loop-ring{--R:128px;--tilt:56deg}
  .loop-node .card{padding:7px 10px}
  .loop-node .card b{font-size:13px}.loop-node .card span{display:none}
  .loop-core .face{width:72px;height:72px;font-size:10px}
  .disciplines{gap:6px}
  .disciplines span{padding:7px 12px;font-size:13px}
  .loop-list li{grid-template-columns:96px 1fr}
  .stats{gap:10px}.stat{padding:22px 18px}
  .views-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .view.shot{grid-column:1/-1}
  .view-body{padding:8px}
  .view-tag{inset:auto 6px 6px 6px;padding:4px 6px;font-size:10px;line-height:1.3}
  .view figcaption{font-size:13.5px}
  .form-grid{grid-template-columns:1fr}
  .contact-deco{width:600px;height:600px;right:-260px;bottom:-240px;opacity:.55}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .marquee{margin-bottom:40px}
  .viz-core .iso{--ix:-130px}
  .viz-radon .iso,.viz-dpo .iso{--ix:-20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;translate:none}
  .js .scen.reveal{rotate:none}
  .js .split .w>span{translate:none}
  .loop-ring{animation:none}
  .viz *{animation:none!important}
  .viz .set-a,.viz .set-a .tl,.viz .set-a .sum-s{opacity:1!important;clip-path:none!important}
  .viz .set-b{display:none!important}
  .wave i{transform:scaleY(var(--a))!important}
  .bub,.bub2,.task{opacity:1!important}
  .typing{display:none!important}
}

/* ================= Local preview hint (only when index.html is opened from disk) ================= */
.file-note{position:fixed;left:50%;top:14px;z-index:100;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);margin:0;padding:10px 16px;border-radius:12px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;line-height:1.45;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.file-note b{color:var(--wine-2)}