@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/chakra-petch-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/chakra-petch-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/chakra-petch-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/chakra-petch-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/chakra-petch-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/chakra-petch-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/schibsted-grotesk-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/schibsted-grotesk-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/schibsted-grotesk-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/schibsted-grotesk-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/schibsted-grotesk-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/schibsted-grotesk-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/schibsted-grotesk-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/schibsted-grotesk-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/jetbrains-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Valoria Webworks — site styles (bright v6). One rule per concern; no override layers. */
:root{
  --bg0:#F7F8FA;
  --bg1:#FFFFFF;
  --bg2:#E9EEF6;
  --tint:#E2EAF5;
  --tint2:#D3DEEE;
  --royal:#1E4FDB;
  --sky:#4A9BF0;
  --vivid:#0A4DFF;
  --vivid2:#1FA2FF;
  --vivid-rgb:10,77,255;
  --deep:#0F2A5E;              /* darkest facet: monogram gradient end */
  --off:#0A1B3D;
  --muted:#49597B;
  --faint:#8291AC;
  --line:rgba(10,27,61,.10);
  --line-strong:rgba(30,79,219,.35);
  --glow:rgba(30,79,219,.22);
  --display:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --body:'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --surface:#FFFFFF;
  --footer-bg:var(--surface);   /* footer = the lighter band colour (white / night blue) */
  --on-accent:#F7F8FA;
  --icon-dim:#9AA6BC;
  --err:#B42318;
  --err-rgb:180,35,24;
  --todo-bg:#FFF2C2;
  --todo-fg:#7A5200;
  --royal-rgb:30,79,219;
  --sky-rgb:74,155,240;
  --ink-rgb:10,27,61;
  --shadow-rgb:10,27,61;
  --bg0-rgb:247,248,250;
  --btn-bg:#1E4FDB;
  --on-accent-rgb:247,248,250;  /* light sheen on blue (button sweep, monogram) */
  --facet-rgb:122,152,205;
  --facet-boost:1;
  color-scheme:light;
  --cut:18px;
  --head-h:72px;
  --ctl:32px;   /* one height for the small header controls: theme, language, menu */
  --ease-fold:cubic-bezier(.65,0,.35,1);
}
/* Dark theme: set on <html data-vw-theme="dark"> by theme.js (visitor's saved choice; light by default).
   Own attribute name on purpose: embedding hosts (e.g. the claude.ai preview) set their own data-theme on <html>.
   Same structure, night palette: deep ink navy, lifted blues; every text pair passes WCAG AA. */
:root[data-vw-theme="dark"]{
  --bg0:#070E1F;
  --bg1:#0E1830;
  --bg2:#16223F;
  --tint:#18264A;
  --tint2:#23365F;
  --surface:#0E1830;
  --royal:#6E9BFF;
  --sky:#5CB8FF;
  --vivid:#8DB2FF;
  --vivid2:#45C8FF;
  --vivid-rgb:141,178,255;
  --off:#E6ECF8;
  --muted:#A2B0CB;
  --faint:#7D8CAB;
  --line:rgba(180,200,255,.10);
  --line-strong:rgba(110,155,255,.42);
  --glow:rgba(80,130,255,.32);
  --icon-dim:#5F6E8C;
  --err:#FF7A6B;
  --err-rgb:255,122,107;
  --todo-bg:#3D3210;
  --todo-fg:#FFD66B;
  --royal-rgb:90,135,255;
  --sky-rgb:92,184,255;
  --ink-rgb:200,215,255;
  --shadow-rgb:0,0,0;
  --bg0-rgb:7,14,31;
  --btn-bg:#2B5CF0;
  --facet-rgb:110,150,235;
  --facet-boost:1.7;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--head-h)}
body{background:var(--bg0);color:var(--off);font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--btn-bg);color:var(--on-accent)}
a{color:var(--royal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--btn-bg);color:var(--on-accent);padding:10px 16px;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em}
.skip:focus{top:12px;text-decoration:none}
.grad{background:linear-gradient(92deg,var(--sky),var(--royal) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--royal)}
.eyebrow svg{flex:none}
/* inline SVG icons keep their brand-colour attributes in the HTML; CSS maps them to theme tokens */
[fill="#1E4FDB"]{fill:var(--royal)}[stroke="#1E4FDB"]{stroke:var(--royal)}
[fill="#4A9BF0"]{fill:var(--sky)}[stroke="#4A9BF0"]{stroke:var(--sky)}
/* light/dark image pairs (logo): show the one matching the theme */
.only-dark{display:none}
[data-vw-theme="dark"] .only-light{display:none}
[data-vw-theme="dark"] .only-dark{display:block}
mark.todo{background:var(--todo-bg);color:var(--todo-fg);padding:0 4px;font-family:var(--mono);font-size:.85em}

/* ---------- custom cursor (small, faint ring) ---------- */
html.js-cursor body,html.js-cursor a,html.js-cursor button,html.js-cursor summary{cursor:none}
#cur,#cur2{position:fixed;top:0;left:0;z-index:200;pointer-events:none;will-change:transform;visibility:hidden}
html.cursor-on #cur,html.cursor-on #cur2{visibility:visible}
#cur{width:5px;height:5px;background:var(--royal);opacity:.85;transform:rotate(45deg)}
#cur2{width:18px;height:18px;border:1px solid rgba(var(--royal-rgb),.22);transform:rotate(45deg);
  transition:width .2s,height .2s,border-color .2s}
#cur2.big{width:24px;height:24px;border-color:rgba(var(--royal-rgb),.45)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.04em;
  padding:13px 26px;border:0;transition:transform .2s,box-shadow .2s,background .2s;position:relative;overflow:hidden}
a.btn:hover{text-decoration:none}
.btn-primary{background:var(--btn-bg);color:var(--on-accent);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(var(--on-accent-rgb),.28),transparent);transform:skewX(-20deg);transition:left .5s}
.btn-primary:hover{box-shadow:0 0 28px var(--glow)}
.btn-primary:hover::after{left:130%}
.btn-ghost{background:transparent;color:var(--royal);border:1px solid var(--line-strong);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
/* draw the border along the cut corner so the facet reads as intentional */
.btn-ghost::before{content:"";position:absolute;left:calc(100% - 14px);top:-1px;width:21px;height:2px;
  background:var(--line-strong);transform-origin:left center;transform:rotate(45deg);pointer-events:none}
.btn-ghost:hover{background:rgba(var(--royal-rgb),.06)}
.btn-sm{padding:10px 20px;font-size:.85rem}
.btn[disabled]{opacity:.7;cursor:progress}

/* ---------- header / nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--line);transition:box-shadow .35s}
header.scrolled{box-shadow:0 10px 28px rgba(var(--shadow-rgb),.10)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);transition:height .52s var(--ease-fold)}
header.folding .nav,header.folded .nav{height:50px}
.nav-left{display:flex;align-items:center;gap:12px;flex:none}
#fold-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  width:34px;height:34px;background:none;border:0;padding:0;flex:none}
#fold-btn span{display:block;width:20px;height:2px;background:var(--icon-dim);transition:background .25s,transform .45s var(--ease-fold)}
#fold-btn:hover span{background:var(--muted)}
#fold-btn.sq span:nth-child(1){transform:translateY(3px)}
#fold-btn.sq span:nth-child(3){transform:translateY(-3px)}
.brand{display:flex;align-items:center;gap:12px;color:var(--off)}
.brand:hover{text-decoration:none}
.brand img{height:20px;width:auto}
.brand-name{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.14em;white-space:nowrap}
.brand-name span{color:var(--sky);font-weight:600}
.nav-links{display:flex;align-items:center;gap:22px;margin:0 28px;list-style:none}
.nav-links a{position:relative;color:var(--muted);font-size:.92rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;transition:color .2s}
.nav-links a:hover{text-decoration:none}
.nav-links a:not(.btn):hover{color:var(--vivid)}
.nav-links a.active{color:var(--off)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:linear-gradient(90deg,var(--vivid),var(--vivid2));box-shadow:0 0 8px rgba(var(--vivid-rgb),.45)}
.nav-links .menu-cta{display:none}   /* CTA lives in .nav-right on desktop, in the menu on mobile */
.nav-links a.btn-primary{color:var(--on-accent)}
.nav-right{display:flex;align-items:center;gap:10px;flex:none}
.nav-right>.btn{white-space:nowrap}
.lang{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;
  height:var(--ctl);border:1px solid var(--line);padding:0 calc(10px - .16em) 0 10px;line-height:1;   /* right side minus the trailing letter-spacing */transition:color .2s,border-color .2s}
.lang:hover{border-color:var(--line-strong);text-decoration:none}
.lang .cur{color:var(--royal)}
.lang .sep{color:var(--tint2)}
.lang .alt{color:var(--faint)}
.lang:hover .alt{color:var(--royal)}
#theme-btn{display:grid;place-items:center;width:var(--ctl);height:var(--ctl);background:none;border:1px solid var(--line);padding:0;flex:none;
  transition:border-color .2s}
#theme-btn:hover{border-color:var(--line-strong)}
#theme-btn .ti-sun,[data-vw-theme="dark"] #theme-btn .ti-moon{display:none}
[data-vw-theme="dark"] #theme-btn .ti-sun{display:block}
.nav .brand,.nav-links li{will-change:transform,opacity}
header.folded .nav .brand,header.folded .nav-links,header.folded .lang,header.folded #theme-btn,header.folded .nav-right>.btn{
  opacity:0;pointer-events:none;visibility:hidden}
#menu-btn{display:none;background:none;border:1px solid var(--line-strong);color:var(--royal);
  width:var(--ctl);height:var(--ctl);font-size:1.1rem;line-height:1}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  padding:130px 0 96px}
#facets{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 42%,transparent 30%,rgba(var(--bg0-rgb),.55) 72%,var(--bg0) 100%)}
.hero-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-mark{width:min(430px,72vw);height:auto;margin-bottom:34px;
  filter:drop-shadow(0 14px 28px rgba(var(--royal-rgb),.22));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* eyebrow: the dot sits on the logo's centre line, pin before the place */
.hero-eyebrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:14px;width:min(640px,100%);
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--royal)}
.he-l{display:inline-flex;align-items:center;gap:10px;justify-self:end}
.he-r{display:inline-flex;align-items:center;gap:8px;justify-self:start}
.he-l svg,.he-r svg{flex:none}
.he-r .pin{transform:translateY(-1px)}
.he-dot{letter-spacing:0}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,6vw,4.3rem);line-height:1.06;letter-spacing:.015em;text-wrap:balance;margin:20px 0 0}
.hero-sub{max-width:560px;margin:24px auto 0;color:var(--muted);font-size:1.08rem}
.hero-cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;justify-content:center}
.hero-badges{display:flex;gap:26px;margin-top:54px;flex-wrap:wrap;justify-content:center}
.hero-badges span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hero-badges svg{flex:none}
/* scroll cue: bounces; its arrows fade with the scroll position (site.js) */
.cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;display:block;padding:10px;
  animation:cue 2.4s ease-in-out infinite}
.cue:hover{text-decoration:none}
.cue svg{display:block;transition:opacity .25s linear,transform .25s linear}
.cue.gone{pointer-events:none}
@keyframes cue{0%,100%{transform:translate(-50%,0);opacity:.7}50%{transform:translate(-50%,6px);opacity:1}}

/* ---------- sections & pages ---------- */
section{position:relative}
.sec-pad{padding:78px 0}
.hero + .sec-pad{padding-top:36px}
.sec-head{max-width:640px;margin-bottom:36px}
.sec-head p{color:var(--muted);margin-top:16px;font-size:1.02rem}
h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.15;margin-top:14px;text-wrap:balance}
.page{animation:pageIn .55s cubic-bezier(.19,1,.22,1) both}
.page:not(.page-home):not(.page-nf){padding-top:var(--head-h)}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- home: manifesto ---------- */
.statement{font-family:var(--display);font-weight:600;font-size:clamp(1.55rem,3.5vw,2.65rem);
  line-height:1.32;max-width:1020px;letter-spacing:.005em}
.statement .line{display:block;overflow:hidden}
.statement .line-in{display:block;transition:transform .6s cubic-bezier(.19,1,.22,1)}
:where(.js) .statement .line-in{transform:translateY(112%)}
.statement .line:nth-child(2) .line-in{transition-delay:.05s}
.statement .line:nth-child(3) .line-in{transition-delay:.1s}
.statement.go .line-in{transform:none}
.creed{margin-top:52px;border-top:1px solid var(--line)}
.creed-row{display:grid;grid-template-columns:56px 260px 1fr;gap:28px;align-items:start;
  padding:34px 0;border-bottom:1px solid var(--line);transition:transform .35s}
.creed-row:hover{transform:translateX(10px)}
.creed-row .icon svg{transition:filter .35s}
.creed-row:hover .icon svg{filter:drop-shadow(0 4px 8px rgba(var(--royal-rgb),.35))}
.creed-row h3{font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:.03em;padding-top:2px}
.creed-row p{color:var(--muted);font-size:.97rem;max-width:560px}

/* ---------- home: team ---------- */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:31px}
.fd{display:grid;grid-template-columns:112px 1fr;gap:26px;align-items:start;background:var(--surface);padding:28px;
  box-shadow:0 14px 44px rgba(var(--shadow-rgb),.06)}
.fd-mono{width:112px;height:112px;display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:2.1rem;letter-spacing:.06em;color:var(--on-accent);background:linear-gradient(135deg,var(--sky),var(--royal) 55%,var(--deep));
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));position:relative}
.fd-mono::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(var(--on-accent-rgb),.22) 50%,transparent 60%)}
.fd-mono img{width:100%;height:100%;object-fit:cover}
.fd h3{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase}
.fd .role{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--royal);margin:6px 0 12px}
.fd p{color:var(--muted);font-size:.98rem}
.fd-ph .fd-mono{background:var(--bg2);color:var(--royal)}
.fd-ph .fd-mono::after{display:none}
.fd-plus{font-weight:600;font-size:2.4rem;line-height:1}

/* ---------- home: explore index + services ledger (shared row) ---------- */
.ledger{border-top:1px solid var(--line)}
a.idx-row,.lg-row{display:grid;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);position:relative}
a.idx-row{grid-template-columns:1fr 1.15fr 70px;color:inherit}
a.idx-row:hover{text-decoration:none}
.lg-row{grid-template-columns:76px 1fr 1.15fr 70px}
.lg-row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--royal-rgb),.05),transparent 60%);
  opacity:0;transition:opacity .35s;pointer-events:none}
.lg-row:hover::before{opacity:1}
.lg-row canvas{width:56px;height:56px;display:block}
a.idx-row h3,.lg-row h3{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.4rem);letter-spacing:.03em;
  transition:transform .35s,color .35s}
a.idx-row:hover h3,.lg-row:hover h3{transform:translateX(8px);color:var(--royal)}
a.idx-row p,.lg-row p{color:var(--muted);font-size:.94rem}
.idx-arrow{font-family:var(--mono);color:var(--royal);text-align:right;font-size:1.1rem;transition:transform .35s}
a.idx-row:hover .idx-arrow{transform:translateX(6px)}
.lg-code{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--faint);text-align:right}
.svc-band{background:linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 18%,var(--bg1) 82%,var(--bg0) 100%)}
/* a band that ends the page runs straight into the footer instead of fading back to the page colour */
main > .svc-band:last-child{background:linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 18%)}

/* ---------- showcase (what we build) ---------- */
.case{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:64px 0}
.case + .case{border-top:1px solid var(--line)}
.case.flip .txt{order:2}
.case.flip .stage{order:1}
.case-code{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:var(--royal)}
.case h3{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:.03em;margin:12px 0 14px}
.case p{color:var(--muted);font-size:.99rem;max-width:460px}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.tags span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--royal);
  border:1px solid var(--line-strong);padding:7px 13px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.stage{perspective:1100px}
.device{transform:rotateY(-13deg) rotateX(5deg);transition:transform .6s cubic-bezier(.19,1,.22,1);
  box-shadow:24px 40px 80px rgba(var(--shadow-rgb),.16),0 0 40px rgba(var(--royal-rgb),.08)}
.case.flip .device{transform:rotateY(13deg) rotateX(5deg)}
.stage:hover .device{transform:none}
.mini{background:var(--surface);border:1px solid var(--line);overflow:hidden;aspect-ratio:16/11;display:flex;flex-direction:column}
.mini-bar{display:flex;gap:5px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);flex:none}
.mini-bar i{width:7px;height:7px;border-radius:50%;background:var(--bg2)}
.mini-bar i:first-child{background:var(--royal)}
.mini-url{margin-left:8px;height:8px;flex:1;background:var(--tint)}
.mini-body{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.sk{background:var(--bg2)}
.sk-hero{height:30%;background:linear-gradient(120deg,var(--tint),var(--bg2))}
.sk-line{height:8px;width:70%}
.sk-btn{height:13px;width:30%;background:var(--royal)}
.sk-chart{flex:1;display:flex;align-items:flex-end;gap:7px;padding-top:4px}
.sk-chart b{flex:1;background:linear-gradient(180deg,var(--sky),var(--royal))}
.sk-chart b:nth-child(1){height:42%}.sk-chart b:nth-child(2){height:68%}.sk-chart b:nth-child(3){height:52%}
.sk-chart b:nth-child(4){height:85%}.sk-chart b:nth-child(5){height:63%}.sk-chart b:nth-child(6){height:94%}
.sk-prod{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;flex:1}
.sk-prod b{background:var(--tint);position:relative}
.sk-prod b::before{content:"";position:absolute;left:12%;right:12%;top:12%;height:44%;background:var(--tint2)}
.sk-prod b::after{content:"";position:absolute;left:12%;right:38%;bottom:12%;height:7px;background:var(--royal)}
.sk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;flex:1}
.sk-cal b{background:var(--tint)}
.sk-cal b.on{background:var(--royal)}
.sk-side{display:flex;gap:10px;flex:1}
.sk-side .rail-col{width:22%;background:var(--tint);display:flex;flex-direction:column;gap:7px;padding:8px}
.sk-side .rail-col b{height:7px;background:var(--tint2)}
.sk-side .main-col{flex:1;display:flex;flex-direction:column;gap:9px}

/* ---------- process ---------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;position:relative;padding-top:8px}
.flow-line,#flow-fill{position:absolute;left:0;top:13px;height:1px}
.flow-line{right:0;background:var(--line)}
#flow-fill{width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,rgba(var(--sky-rgb),.4),var(--royal));box-shadow:0 0 8px rgba(var(--royal-rgb),.4)}
.stage-p{position:relative}
.p-node{position:absolute;top:0;left:0;width:12px;height:12px;background:var(--surface);
  border:1px solid rgba(var(--ink-rgb),.25);transform:rotate(45deg);transition:background .4s,box-shadow .4s}
.p-node.lit{background:var(--royal);box-shadow:0 0 10px var(--glow);border-color:var(--royal)}
.gnum{font-family:var(--display);font-weight:700;font-size:3.6rem;line-height:1;margin:34px 0 10px;
  color:transparent;-webkit-text-stroke:1px rgba(var(--royal-rgb),.45)}
.stage-p h3{font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:.04em}
.stage-p p{color:var(--muted);font-size:.89rem;margin-top:8px}
.stage-p .dur{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  display:block;margin-top:12px}

/* ---------- hosting band ---------- */
.host-band{background:linear-gradient(135deg,#0F2A5E 0%,#0A1B3D 55%,#123a85 130%);
  clip-path:polygon(0 54px,100% 0,100% calc(100% - 54px),0 100%);padding:150px 0 160px;position:relative;overflow:hidden}
.host-band h2{color:#F7F8FA}
.host-band .eyebrow{color:var(--sky)}
.crystal{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:62%;max-width:900px;
  mix-blend-mode:screen;opacity:.9;pointer-events:none}
.host-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;z-index:1}
.host-list{list-style:none;display:grid;gap:16px;margin-top:8px}
.host-list li{display:flex;gap:14px;align-items:flex-start;color:#A9BBD8;font-size:.98rem}
.host-list svg{flex:none;margin-top:5px}
.host-list strong{color:#F7F8FA;font-weight:600}
.host-panel{background:rgba(6,13,31,.66);border:1px solid rgba(var(--sky-rgb),.34);padding:34px 30px;backdrop-filter:blur(8px)}
.host-panel h3{font-family:var(--display);font-weight:600;letter-spacing:.03em;font-size:1.1rem;color:#F7F8FA}
.host-panel p{color:#A9BBD8;font-size:.94rem;margin-top:10px}
.host-panel .btn{margin-top:22px}
.host-meta{display:flex;gap:20px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(var(--sky-rgb),.16);flex-wrap:wrap}
.host-meta span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#6E80A3}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:.85fr 1.4fr;gap:70px;align-items:start}
.faq-side{position:sticky;top:120px}
.faq-side p{color:var(--muted);margin-top:16px;max-width:340px}
.faq-side a{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em}
.faq{border-top:1px solid var(--line);margin-top:5px}
.faq details{border-bottom:1px solid var(--line);transition:background .3s}
.faq details[open]{background:var(--surface)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:64px 1fr 24px;align-items:center;gap:14px;
  padding:24px 10px 24px 0;font-family:var(--display);font-weight:600;font-size:1.03rem;letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.q-code{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--royal)}
.q-plus{font-family:var(--mono);color:var(--royal);font-size:1.2rem;transition:transform .25s;text-align:center}
.faq details[open] .q-plus{transform:rotate(45deg)}
.faq .a{padding:0 40px 26px 64px;color:var(--muted);font-size:.97rem;max-width:600px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-info p{color:var(--muted);margin-top:16px;max-width:440px}
.contact-mail{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font-family:var(--display);
  font-weight:600;font-size:1.15rem;letter-spacing:.02em;color:var(--off);border-bottom:1px solid var(--line-strong);
  padding-bottom:6px;transition:color .2s,border-color .2s}
.contact-mail:hover{color:var(--royal);border-color:var(--royal);text-decoration:none}
.contact-note{display:block;margin-top:34px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);line-height:2}
.frame{position:relative;margin-top:5px;padding:42px 38px;background:var(--surface);box-shadow:0 14px 44px rgba(var(--shadow-rgb),.07)}
.bkt{position:absolute;width:26px;height:26px;border:0 solid var(--royal)}
.bkt.tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.bkt.tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.bkt.bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.bkt.br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
form{display:grid;gap:16px}
label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--royal);display:grid;gap:8px}
input,textarea{background:var(--bg0);border:1px solid rgba(var(--ink-rgb),.18);color:var(--off);font-family:var(--body);
  font-size:.98rem;padding:13px 15px;transition:border-color .2s;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--royal)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err)}
textarea{resize:vertical;min-height:120px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.field-err{display:block;font-family:var(--body);font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--err);margin-top:6px}
.field-err:empty,.form-status:empty{display:none}
.form-consent{font-family:var(--body);font-size:.8rem;line-height:1.55;color:var(--faint)}
.form-consent a{color:var(--royal)}
.form-status{font-family:var(--body);font-size:.88rem;color:var(--err)}
.sent-ok{display:none;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 4px}
.sent-ok.show{display:flex}
.sent-ok h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:.02em}
.sent-ok p{color:var(--muted);max-width:400px}
.sent-ok b{color:var(--royal);font-weight:600}
.sent-ok .btn{margin-top:8px}

/* ---------- prose pages (privacy) ---------- */
.prose{max-width:820px}
.prose h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.05;letter-spacing:.01em;margin:22px 0 10px;text-wrap:balance}
.prose h2{font-size:clamp(1.15rem,2vw,1.4rem);margin:46px 0 14px;letter-spacing:.03em}
.prose p,.prose li{color:var(--muted);max-width:68ch}
.prose p+p{margin-top:12px}
.prose ul{padding-left:20px;display:grid;gap:10px}
.prose b{color:var(--off)}
.prose code,.nf code{font-family:var(--mono);font-size:.85em;background:var(--bg2);padding:1px 5px}
.prose .eff{margin-top:36px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tbl{overflow-x:auto;margin:6px 0 18px;border:1px solid var(--line);background:var(--surface)}
.tbl table{border-collapse:collapse;width:100%;min-width:720px;font-size:.88rem}
.tbl th{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--royal);text-align:left;
  padding:14px;background:var(--bg0);border-bottom:1px solid var(--line)}
.tbl td{padding:14px;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--off);font-weight:500}

/* ---------- 404 ---------- */
.nf{min-height:100svh;display:grid;align-content:center;padding:120px 0 80px}
.nf-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.nf h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02;margin:18px 0;text-wrap:balance}
.nf-code{font-family:var(--display);font-weight:700;font-size:clamp(4.5rem,11vw,8rem);line-height:.9;color:transparent;
  -webkit-text-stroke:1.5px var(--royal);letter-spacing:.04em}
.nf p{color:var(--muted);max-width:52ch}
.nf code{padding:2px 6px;color:var(--royal);word-break:break-all}
.nf-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 28px;list-style:none}
.nf-links a{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.nf-art{position:relative;aspect-ratio:1/1;max-width:420px;width:100%;justify-self:center}
.nf-art svg{width:100%;height:100%;overflow:visible}
.nf-shard{animation:shard 6s ease-in-out infinite;transform-origin:center}
@keyframes shard{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,10px) rotate(4deg)}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:54px 0 40px;background:var(--footer-bg)}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot-brand img{height:26px;width:auto;margin-bottom:14px}
.foot-brand p{color:var(--faint);font-size:.88rem;max-width:300px}
.foot nav{display:flex;gap:26px;flex-wrap:wrap}
.foot nav a{color:var(--muted);font-size:.9rem}
.foot nav a:hover{color:var(--off);text-decoration:none}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.foot-base span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.foot-legal{margin-top:18px;font-size:.78rem;color:var(--faint);line-height:1.6}
.foot-legal a{color:var(--muted)}

/* ---------- closing call to action (same bracket frame as the contact form) ---------- */
.cta-band{padding:0 0 78px}
.cta-band .frame{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;margin-top:0;padding:50px 46px}
.cta-band p{color:var(--muted);margin-top:14px;max-width:520px}
.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cta-mail,.sec-more{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em}
.sec-more{display:inline-block;margin-top:26px}

/* ---------- home: three site types ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
a.trio-col{display:block;position:relative;padding:34px 0 38px;color:inherit}
a.trio-col + a.trio-col::before{content:"";position:absolute;left:-30px;top:0;bottom:0;border-left:1px solid var(--line)}
a.trio-col:hover{text-decoration:none}
.trio-col .mini{margin-bottom:28px;transition:box-shadow .35s}
.trio-col .mini-bar i:nth-child(2){background:var(--sky)}
/* FAQ without the Q·01 codes: question text starts at the left edge of the list */
.faq details summary{grid-template-columns:1fr 24px;padding-left:16px}
.faq details .a{padding-left:16px}
a.trio-col:hover .mini{box-shadow:0 14px 36px rgba(var(--royal-rgb),.14)}
.trio-col h3{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:.03em;margin:10px 0;transition:transform .35s,color .35s}
a.trio-col:hover h3{transform:translateX(8px);color:var(--royal)}
.trio-col p{color:var(--muted);font-size:.94rem}

/* ---------- home: chapter ledger ---------- */
a.ch-row{display:grid;grid-template-columns:250px 1fr 70px;gap:28px;align-items:start;padding:40px 0;border-bottom:1px solid var(--line);color:inherit}
a.ch-row:hover{text-decoration:none}
.ch-row h3{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.4rem);letter-spacing:.03em;transition:transform .35s,color .35s}
a.ch-row:hover h3{transform:translateX(8px);color:var(--royal)}
.ch-row p{color:var(--muted);font-size:.97rem;max-width:560px}
.ch-row .tags{margin-top:18px}
.ch-list{list-style:none;margin-top:16px;display:grid;gap:8px}
.ch-list li{display:grid;grid-template-columns:54px 1fr;font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:.02em}
.ch-list .q-code{padding-top:4px}
a.ch-row:hover .idx-arrow{transform:translateX(6px)}

/* ---------- home process 1 (stage): pick a step, the mock-up shows the site at that step ---------- */
.pz{display:grid;grid-template-columns:250px minmax(0,1fr) minmax(0,1.55fr);gap:48px;align-items:start}
.pz-tabs{list-style:none;border-top:1px solid var(--line)}
.pz-tab > *{transition:transform .35s}
a.pz-tab{display:grid;grid-template-columns:20px 34px 1fr;align-items:center;gap:10px;padding:19px 0;border-bottom:1px solid var(--line);
  padding-left:4px;color:var(--muted);font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:.03em;transition:color .25s}
a.pz-tab:hover{text-decoration:none}
.pz-tab .pz-node{width:9px;height:9px;border:1px solid rgba(var(--ink-rgb),.3);transform:rotate(45deg);transition:background .3s,border-color .3s,box-shadow .3s,transform .35s}
.pz-tab .q-code{color:var(--muted);transition:color .25s}
.pz-tab.on{color:var(--off)}
.pz-tab.on > *{transform:translateX(8px)}
.pz-tab.on .pz-node{transform:translateX(8px) rotate(45deg)}
.pz-tab.on .q-code{color:var(--royal)}
.pz-tab.on .pz-node,.pz-tab.done .pz-node{background:var(--royal);border-color:var(--royal)}
.pz-tab.on .pz-node{box-shadow:0 0 10px var(--glow)}
.pz-panel .gnum{margin:0 0 16px}
.pz-panel h3{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:.03em}
.pz-panel p{color:var(--muted);font-size:.97rem;margin-top:10px}
.pz-panel .tags{margin-top:20px}
.pz-panel + .pz-panel{margin-top:44px}
:where(.js) .pz-panel{display:none}
:where(.js) .pz-panel.on{display:block;margin-top:0;animation:pzIn .4s cubic-bezier(.19,1,.22,1)}
@keyframes pzIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the mock-up: finished site by default (step 5, and what shows without JavaScript); earlier steps strip it back */
.pz-art .mini{box-shadow:0 22px 60px rgba(var(--shadow-rgb),.10)}
.pz-art .mini-url{position:relative;overflow:hidden}
.pz-art .mini-url::after{content:"";position:absolute;inset:0 42% 0 0;background:var(--royal);transform-origin:left;transition:transform .6s var(--ease-fold)}
.pz-hero,.pz-line,.pz-tiles b,.pz-btn{border:1px solid transparent;transition:background-color .45s,border-color .45s}
.pz-hero{position:relative;height:30%;background:var(--tint)}
.pz-hero::before,.pz-hero::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:linear-gradient(to top right,transparent calc(50% - .6px),var(--line-strong) calc(50% - .6px),var(--line-strong) calc(50% + .6px),transparent calc(50% + .6px))}
.pz-hero::after{transform:scaleX(-1)}
.pz-live{position:absolute;top:10px;right:10px;width:24px;height:24px;display:grid;place-items:center;background:var(--btn-bg);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);transition:opacity .45s,transform .45s}
.pz-line{height:8px;width:70%;background:var(--bg2)}
.pz-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;flex:1}
.pz-tiles b{position:relative;background:var(--tint)}
.pz-tiles b::before{content:"";position:absolute;left:12%;right:12%;top:12%;height:44%;background:var(--tint2);transition:opacity .45s}
.pz-tiles b::after{content:"";position:absolute;left:12%;right:38%;bottom:12%;height:7px;background:var(--royal);transition:opacity .45s}
.pz-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex:none;height:34px}
.pz-btn{height:13px;width:30%;background:var(--royal)}
.pz-bars{display:flex;align-items:flex-end;gap:4px;height:100%;padding:0 0 0 12px;border-left:1px solid var(--line);transition:opacity .45s}
.pz-bars b{width:7px;background:linear-gradient(180deg,var(--sky),var(--royal))}
.pz-bars b:nth-child(1){height:45%}.pz-bars b:nth-child(2){height:60%}.pz-bars b:nth-child(3){height:52%}.pz-bars b:nth-child(4){height:74%}
.pz-bars b:nth-child(5){height:66%}.pz-bars b:nth-child(6){height:88%}.pz-bars b:nth-child(7){height:80%}.pz-bars b:nth-child(8){height:100%}
.pz-bars b:nth-child(9){height:84%}.pz-bars b:nth-child(10){height:92%}.pz-bars b:nth-child(11){height:78%}.pz-bars b:nth-child(12){height:96%}
.pz-brief{position:absolute;left:50%;top:50%;width:58%;padding:16px 16px 14px;display:grid;gap:9px;background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:0 14px 34px rgba(var(--shadow-rgb),.12);transform:translate(-50%,-50%);opacity:0;transition:opacity .45s,transform .45s}
.pz-brief i{display:grid;grid-template-columns:7px 1fr;align-items:center;gap:9px}
.pz-brief i::before{content:"";width:6px;height:6px;background:var(--royal);transform:rotate(45deg)}
.pz-brief i::after{content:"";height:7px;background:var(--bg2)}
.pz-brief i:nth-child(2)::after{width:72%}.pz-brief i:nth-child(3)::after{width:86%}
.pz-brief u{height:13px;width:44%;margin-top:5px;justify-self:end;background:var(--royal)}
.pz-art[data-step="1"] .pz-brief{opacity:1}
.pz-art:not([data-step="1"]) .pz-brief{transform:translate(-50%,-42%)}
.pz-art[data-step="1"] :is(.pz-hero,.pz-line,.pz-tiles b,.pz-btn){background-color:transparent;border-color:rgba(var(--ink-rgb),.09)}
.pz-art[data-step="2"] :is(.pz-hero,.pz-line,.pz-tiles b,.pz-btn){background-color:transparent;border-color:var(--line-strong);border-style:dashed}
.pz-art[data-step="2"] .pz-hero::before,.pz-art[data-step="2"] .pz-hero::after{opacity:1}
.pz-art:is([data-step="1"],[data-step="2"]) .pz-tiles b::before,.pz-art:is([data-step="1"],[data-step="2"]) .pz-tiles b::after{opacity:0}
.pz-art:is([data-step="1"],[data-step="2"],[data-step="3"]) .mini-url::after{transform:scaleX(0)}
.pz-art:is([data-step="1"],[data-step="2"],[data-step="3"]) .pz-live{opacity:0;transform:translateY(6px)}
.pz-art:not([data-step="5"]) .pz-bars{opacity:0}

/* ---------- home process 2 (stairs): four rising project steps, then care as the monthly part ---------- */
.ps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr);list-style:none;padding-top:34px}
.ps-step{position:relative;padding:24px 20px 28px;border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}
.ps-step::before{content:"";position:absolute;top:-5px;left:-5px;width:9px;height:9px;background:var(--royal);transform:rotate(45deg)}
/* an even rise: every step is one tread (34px) higher than the one before */
.ps-step:nth-child(1){margin-top:102px}.ps-step:nth-child(2){margin-top:68px}.ps-step:nth-child(3){margin-top:34px}
.ps-step h3{font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:.04em;margin-top:10px}
.ps-step p{color:var(--muted);font-size:.89rem;margin-top:8px}
.ps-step .dur{display:block;margin-top:12px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.ps-step.ps-care{display:flex;flex-direction:column;margin-top:-34px;padding:30px 26px 26px;border:0;
  background:linear-gradient(135deg,#0F2A5E 0%,#0A1B3D 55%,#123a85 130%);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.ps-care::before{display:none}
.ps-care .q-code{color:#4A9BF0}
.ps-care h3{color:#F7F8FA}
.ps-care p{color:#A9BBD8}
.ps-care .dur{color:#8FA3C6}
.ps-every{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:18px;border-top:1px solid rgba(74,155,240,.22);font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#F7F8FA}
.ps-axis{display:grid;grid-template-columns:4fr 1.25fr}
.ps-axis span{padding:14px 0 0 20px;border-top:1px solid var(--line);border-left:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- process page: one roomy row per step with its mock-up ---------- */
.pcase{padding:62px 0}
.pcase .gnum{margin:0 0 18px}
.pcase .dur{display:block;margin:0 0 18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--royal)}
.pcase .pz-art{max-width:520px;margin-inline:auto}
.pcase.flip .pz-art{margin-inline:0 auto}

/* ---------- home process 3 (ledger): five ruled rows ---------- */
.pl{list-style:none;border-top:1px solid var(--line)}
.pl-row{display:grid;grid-template-columns:120px 230px 1fr;gap:28px;align-items:start;padding:34px 0;border-bottom:1px solid var(--line);transition:transform .35s}
.pl-row:hover{transform:translateX(10px)}
.pl-row .gnum{margin:0;font-size:3rem}
.pl-row h3{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.4rem);letter-spacing:.03em;padding-top:4px}
.pl-row .dur{display:block;margin-top:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--royal);line-height:1.7}
.pl-row p{color:var(--muted);font-size:.97rem;max-width:560px;padding-top:6px}

/* ---------- pricing: shared ---------- */
.pr-num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-sub{font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:.03em;margin:47px 0 22px}
.pr-sub:first-child{margin-top:0}
.tm{border-top:1px solid var(--line)}
.tm-row{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.tm-row h3{font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:.03em}
.tm-row p{color:var(--muted);font-size:.97rem;max-width:620px}
.tm-row b{color:var(--off);font-weight:500}

/* ---------- pricing 1 (quote): the page is the written quote ---------- */
.pq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:64px;align-items:start}
.pq-side{position:sticky;top:120px}
.pq-side p{color:var(--muted);margin-top:16px;max-width:360px}
.pq-side .btn{margin-top:28px}
.pq-sheet{filter:drop-shadow(0 16px 34px rgba(var(--shadow-rgb),.09))}
.pq-doc{position:relative;background:var(--surface);padding:42px 44px 34px;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.pq-doc::before{content:"";position:absolute;top:0;right:0;width:30px;height:30px;background:linear-gradient(225deg,transparent 50%,var(--tint) 50%)}
.pq-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:2px solid var(--off)}
.pq-top h3{font-family:var(--display);font-weight:700;font-size:1.7rem;letter-spacing:.04em;text-transform:uppercase}
.pq-stamp{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--royal);border:1px solid var(--line-strong);padding:7px 12px;margin-right:22px}
.pq-cols{display:flex;justify-content:space-between;padding:12px 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.pq-grp{display:grid;grid-template-columns:44px 1fr;padding:24px 0 20px;border-bottom:1px solid var(--line)}
.pq-grp > .q-code{padding-top:5px}
.pq-grp h4{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:.03em}
.pq-grp h4 + span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}
.pq-lines{list-style:none;margin-top:14px;display:grid;gap:9px}
.pq-lines li{display:flex;align-items:baseline;gap:10px;font-size:.95rem}
.pq-lines i{flex:1;min-width:24px;border-bottom:1px dotted rgba(var(--ink-rgb),.34);transform:translateY(-4px)}
.pq-lines .pr-num{font-size:.9rem;color:var(--off)}
.pq-lines small{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--muted)}
.pq-pay{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.pq-pay div{padding:16px 18px;background:var(--bg0);border-left:2px solid var(--royal)}
.pq-pay b{display:block;font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1.1}
.pq-pay span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pq-fine{margin-top:22px;color:var(--muted);font-size:.84rem;line-height:1.6}

/* ---------- pricing 2 (timeline): what you pay and when, with and without Care ---------- */
.pt-switch{display:inline-flex;border:1px solid var(--line-strong)}
.pt-switch button{padding:11px 20px;background:none;border:0;color:var(--royal);font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:background .2s,color .2s}
.pt-switch button[aria-pressed="true"]{background:var(--btn-bg);color:var(--on-accent)}
:where(html:not(.js)) .pt-switch{display:none}
.pt-mode + .pt-mode{margin-top:64px}
.pt-mode > h3{font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:.03em}
:where(.js) .pt-mode{display:none}
:where(.js) .pt-mode > h3{display:none}
:where(.js) .pt-mode.on{display:block;margin-top:0;animation:pzIn .4s cubic-bezier(.19,1,.22,1)}
.pt-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin-top:46px}
.pt-stop{position:relative;padding:30px 26px 0 0;border-top:1px solid var(--line-strong)}
.pt-stop::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--royal);transform:rotate(45deg)}
.pt-stop.soft{border-top-style:dashed}
.pt-stop:last-child::after{content:"";position:absolute;top:-5px;right:0;width:9px;height:9px;border-top:1px solid var(--royal);border-right:1px solid var(--royal);transform:rotate(45deg)}
.pt-when{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--royal)}
.pt-big{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,2.9vw,2.4rem);line-height:1;letter-spacing:.01em;margin:16px 0 12px;white-space:nowrap}
.pt-big small{display:block;font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.pt-big mark.todo{font-size:.5em;vertical-align:middle}
.pt-stop p{color:var(--muted);font-size:.95rem;max-width:230px}
.pt-stop p + p{margin-top:10px;font-size:.86rem}
.pt-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pt-types{margin-bottom:40px}
.pt-types button{position:relative;padding:24px 0 26px;background:none;border:0;border-top:2px solid transparent;margin-top:-1px;text-align:left;color:var(--muted);transition:color .25s,border-color .25s}
.pt-types button[aria-pressed="true"]{color:var(--off);border-top-color:var(--royal)}
.pt-types button[aria-pressed="true"] .pr-num{color:var(--royal)}
#pt[data-tier="0"] .tv:not(.t0),#pt[data-tier="1"] .tv:not(.t1),#pt[data-tier="2"] .tv:not(.t2){display:none}
.pt-types button + button::before{content:"";position:absolute;left:-30px;top:0;bottom:0;border-left:1px solid var(--line)}
.pt-types h4{font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:.03em;margin:8px 0 10px}
.pt-types .pr-num{font-size:1.15rem;font-weight:500}

/* ---------- pricing 3 (columns): three site types, Care band, terms ---------- */
.pc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pc-col{position:relative;display:flex;flex-direction:column;min-height:520px;padding:56px 0 56px}
.pc-col + .pc-col::before{content:"";position:absolute;left:-30px;top:0;bottom:0;border-left:1px solid var(--line)}
.pc-col h3{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:.03em;margin:14px 0 0}
.pc-price{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,3.4vw,3rem);line-height:1;margin:64px 0 12px;white-space:nowrap}
.pc-price small{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.pc-price mark.todo{font-size:.55em;vertical-align:middle}
.pc-once{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pc-col p{color:var(--muted);font-size:.97rem;margin:44px 0 40px}
.pc-col .tags{margin:22px 0 30px}
.pc-col .btn{margin-top:auto;align-self:flex-start}
.pc-care-price{font-family:var(--display);font-weight:700;font-size:2.3rem;line-height:1;color:#F7F8FA;white-space:nowrap}
.pc-care-price small{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;color:#A9BBD8;margin-left:8px}
.pc-care-price mark.todo{font-size:.55em;vertical-align:middle}
.pc-free{display:block;margin-top:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#4A9BF0}

/* ---------- pricing tiers: shared card ---------- */
.px{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:end}
.px-card{--fg:var(--off);--mu:var(--muted);--ac:var(--royal);--card:var(--surface);
  position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:520px;padding:46px 36px 40px;color:var(--fg)}
.px-card.dark{--fg:#F7F8FA;--mu:#A9BBD8;--ac:#4A9BF0;--card:#0A1B3D}
.px-card .case-code{color:var(--ac)}
.px-card h3{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:.03em;margin:14px 0 0}
.px-price{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,3.2vw,2.9rem);line-height:1;margin:56px 0 12px;white-space:nowrap}
.px-once{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.px-card p{color:var(--mu);font-size:.97rem;margin:40px 0}
.px-card .btn{margin-top:auto;align-self:flex-start}
.px-card.dark .btn-ghost{color:#F7F8FA;border-color:rgba(247,248,250,.45)}
.px-card.dark .btn-ghost::before{background:rgba(247,248,250,.45)}
.px-card.dark .btn-ghost:hover{background:rgba(247,248,250,.08)}
.dx{position:absolute;pointer-events:none}
.px-plan{display:none}

/* ---------- 1 facets ---------- */
.pxa{filter:drop-shadow(0 22px 40px rgba(var(--shadow-rgb),.13))}
.pxa .px-card{--cut:46px;background:var(--card);transition:transform .45s cubic-bezier(.19,1,.22,1);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.pxa .px-card:hover{transform:translateY(-10px)}
.pxa .t2{min-height:580px}
.pxa .t3{min-height:640px;background:linear-gradient(150deg,#123a85 0%,#0A1B3D 46%,#0F2A5E 100%)}
.pxa .dx1{inset:0;z-index:-1;background:
  linear-gradient(118deg,rgba(var(--sky-rgb),.20) 0 24%,transparent 24.2%),
  linear-gradient(200deg,rgba(var(--royal-rgb),.13) 0 30%,transparent 30.2%),
  linear-gradient(338deg,rgba(var(--royal-rgb),.10) 0 22%,transparent 22.2%),
  linear-gradient(64deg,rgba(var(--sky-rgb),.10) 0 17%,transparent 17.2%)}
.pxa .t3 .dx1{background:
  linear-gradient(118deg,rgba(74,155,240,.30) 0 24%,transparent 24.2%),
  linear-gradient(200deg,rgba(30,79,219,.42) 0 30%,transparent 30.2%),
  linear-gradient(338deg,rgba(74,155,240,.16) 0 22%,transparent 22.2%),
  linear-gradient(64deg,rgba(30,79,219,.30) 0 17%,transparent 17.2%)}
/* inner bevel line that follows the cut corners */
.pxa .dx2{inset:11px;z-index:-1;--c:36px;background:linear-gradient(140deg,var(--ac),rgba(var(--sky-rgb),.15) 45%,var(--ac));opacity:.55;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)),0 0,
    1px 1px,1px calc(100% - var(--c) - .4px),calc(var(--c) + .4px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(var(--c) + .4px),calc(100% - var(--c) - .4px) 1px,1px 1px)}
.pxa .dx3{inset:0;z-index:-1;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.pxa .t3 .dx3{background:linear-gradient(105deg,transparent 40%,rgba(74,155,240,.35) 50%,transparent 60%)}
.pxa .px-card:hover .dx3{transform:translateX(120%)}
.pxa .dx4{top:0;right:0;width:var(--cut);height:var(--cut);background:linear-gradient(225deg,transparent 50%,var(--ac) 50%);opacity:.9}

/* ---------- 2 blueprint ---------- */
.pxb{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.42fr);gap:44px;align-items:stretch;padding-top:44px}
.pxb .px-card{padding:40px 30px 34px;border:1px dashed var(--line-strong);
  background:linear-gradient(rgba(var(--royal-rgb),.07) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(var(--royal-rgb),.07) 1px,transparent 1px) 0 0/22px 100%,var(--bg0)}
/* registration crosshairs on the corners */
.pxb .dx1,.pxb .dx2,.pxb .dx3{width:25px;height:25px;border-radius:50%;border:1px solid var(--royal);
  background:linear-gradient(var(--royal),var(--royal)) 50% 50%/37px 1px no-repeat,linear-gradient(var(--royal),var(--royal)) 50% 50%/1px 37px no-repeat;background-origin:border-box}
.pxb .dx1{top:-13px;left:-13px}.pxb .dx2{top:-13px;right:-13px}.pxb .dx3{bottom:-13px;right:-13px}
/* dimension line above each sheet */
.pxb .dx4{left:0;right:0;top:-34px;height:13px;border-left:1px solid var(--royal);border-right:1px solid var(--royal);
  background:linear-gradient(var(--royal),var(--royal)) 0 50%/100% 1px no-repeat}
.pxb .dx4::before,.pxb .dx4::after{content:"";position:absolute;top:2px;width:8px;height:8px;border-top:1px solid var(--royal);border-left:1px solid var(--royal)}
.pxb .dx4::before{left:1px;transform:rotate(-45deg)}
.pxb .dx4::after{right:1px;transform:rotate(135deg)}
.pxb .px-card::after{content:attr(data-size);position:absolute;top:-41px;left:50%;transform:translateX(-50%);padding:0 12px;background:var(--bg0);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--royal)}
.pxb .px-plan{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:34px 0 0}
.pxb .px-plan i{aspect-ratio:4/3;border:1px solid var(--royal);background:rgba(var(--royal-rgb),.07);
  background-image:linear-gradient(to top right,transparent calc(50% - .5px),rgba(var(--royal-rgb),.5) calc(50% - .5px),rgba(var(--royal-rgb),.5) calc(50% + .5px),transparent calc(50% + .5px))}
.pxb .px-plan i:first-child{grid-column:1/-1;aspect-ratio:auto;height:34px}
.pxb .px-price{margin-top:34px;font-family:var(--mono);font-weight:500;letter-spacing:-.02em;color:var(--royal)}
.pxb h3{text-transform:uppercase;letter-spacing:.08em;font-size:1.25rem}
.pxb .px-card p{margin:26px 0}

/* ---------- 3 monolith ---------- */
.pxc{gap:0;align-items:stretch}
.pxc .px-card{padding:0 34px 44px 34px;min-height:0;overflow:hidden}
.pxc .px-card + .px-card::after{content:"";position:absolute;left:0;top:8%;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--line-strong) 30%,var(--line-strong) 70%,transparent)}
.pxc .px-card::before{content:attr(data-n);display:block;margin:0 0 -14px -8px;font-family:var(--display);font-weight:700;line-height:.86;letter-spacing:-.03em;
  font-size:clamp(7rem,12.6vw,10.8rem);color:transparent;-webkit-text-stroke:1.5px rgba(var(--royal-rgb),.5);
  background:linear-gradient(180deg,var(--sky),var(--royal) 60%,var(--deep));-webkit-background-clip:text;background-clip:text;transition:color .5s,-webkit-text-stroke-color .5s}
.pxc .t1::before{font-size:clamp(5rem,9vw,7.8rem);margin-top:clamp(1.6rem,3.6vw,3rem)}
.pxc .t2::before{font-size:clamp(6rem,10.8vw,9.3rem);margin-top:clamp(.8rem,1.8vw,1.5rem)}
.pxc .t3::before,.pxc .px-card:hover::before{color:transparent;-webkit-text-stroke-color:transparent;-webkit-text-fill-color:transparent}
.pxc .t1::before,.pxc .t2::before{-webkit-text-fill-color:rgba(var(--royal-rgb),.04)}
.pxc .dx1{left:34px;bottom:0;height:5px;background:linear-gradient(90deg,var(--sky),var(--royal));transform-origin:left;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.pxc .t1 .dx1{width:26%}.pxc .t2 .dx1{width:48%}.pxc .t3 .dx1{width:calc(100% - 68px)}
.pxc .px-card:hover .dx1{transform:scaleX(1.12)}
.pxc .case-code{display:block;margin-top:26px}
.pxc .px-price{margin-top:22px;font-size:1.5rem;font-family:var(--mono);font-weight:500;color:var(--royal)}
.pxc .px-card p{margin:26px 0 34px}

/* ---------- 4 slabs ---------- */
.pxd{gap:0;align-items:stretch;padding:20px 0;filter:drop-shadow(0 26px 44px rgba(var(--shadow-rgb),.18))}
.pxd .px-card{--sl:13%;min-height:560px;padding:56px 15% 50px 17%;background:var(--card);
  clip-path:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%);transition:transform .5s cubic-bezier(.19,1,.22,1)}
.pxd .px-card + .px-card{margin-left:-7%}
.pxd .t1{--card:linear-gradient(170deg,var(--surface),var(--tint));z-index:1}
.pxd .t2{--card:linear-gradient(170deg,#4A9BF0,#1E4FDB 62%);--fg:#F7F8FA;--mu:#DCE8FF;--ac:#F7F8FA;z-index:2;margin-top:-20px;margin-bottom:-20px}
.pxd .t3{--card:linear-gradient(170deg,#123a85,#0A1B3D 60%);z-index:3}
.pxd .px-card:hover{transform:translateY(-14px)}
.pxd .dx1{inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.5),transparent 3px);clip-path:polygon(var(--sl) 0,calc(var(--sl) + 5px) 0,5px 100%,0 100%)}
.pxd .dx2{right:0;top:0;bottom:0;width:46%;z-index:-1;background:repeating-linear-gradient(100deg,transparent 0 13px,rgba(255,255,255,.06) 13px 14px)}
.pxd .t1 .dx2{background:repeating-linear-gradient(100deg,transparent 0 13px,rgba(var(--royal-rgb),.09) 13px 14px)}
.pxd .t2 .btn-ghost{color:#F7F8FA;border-color:rgba(247,248,250,.6)}
.pxd .t2 .btn-ghost::before{background:rgba(247,248,250,.6)}

/* ---------- 5 night ---------- */
@property --pxang{syntax:"<angle>";inherits:false;initial-value:0deg}
.pxe{align-items:stretch;gap:22px;padding:64px 44px 60px;position:relative;isolation:isolate;
  background:radial-gradient(ellipse 60% 70% at 82% 0%,rgba(30,79,219,.55),transparent 70%),radial-gradient(ellipse 50% 60% at 8% 100%,rgba(74,155,240,.28),transparent 70%),#050B1A;
  clip-path:polygon(0 0,calc(100% - 54px) 0,100% 54px,100% 100%,54px 100%,0 calc(100% - 54px))}
.pxe::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:linear-gradient(115deg,transparent 0 31%,rgba(74,155,240,.10) 31% 31.15%,transparent 31.15% 58%,rgba(74,155,240,.08) 58% 58.15%,transparent 58.15%),
    linear-gradient(64deg,transparent 0 44%,rgba(74,155,240,.08) 44% 44.15%,transparent 44.15% 77%,rgba(74,155,240,.10) 77% 77.15%,transparent 77.15%),
    linear-gradient(170deg,transparent 0 52%,rgba(74,155,240,.07) 52% 52.2%,transparent 52.2%)}
.pxe .px-card{--fg:#F7F8FA;--mu:#A9BBD8;--ac:#4A9BF0;min-height:540px;padding:44px 32px 38px;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(74,155,240,.22),transparent 55%),rgba(10,21,48,.72);
  border:1px solid rgba(74,155,240,.16);transition:transform .45s cubic-bezier(.19,1,.22,1),border-color .3s}
.pxe .px-card:hover{transform:translateY(-8px);border-color:rgba(74,155,240,.4)}
/* the beam: a bright arc of a conic gradient, masked down to the 1.5px border */
.pxe .dx1{inset:-1px;padding:1.5px;background:conic-gradient(from var(--pxang),transparent 0 70%,#1E4FDB 80%,#4A9BF0 88%,#F7F8FA 92%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:pxbeam 7s linear infinite}
.pxe .t2 .dx1{animation-delay:-2.3s}.pxe .t3 .dx1{animation-delay:-4.6s;animation-duration:4.5s}
@keyframes pxbeam{to{--pxang:360deg}}
.pxe .dx2{left:32px;top:0;width:54px;height:3px;background:linear-gradient(90deg,#4A9BF0,#F7F8FA);box-shadow:0 0 18px 2px rgba(74,155,240,.8)}
.pxe .t3{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(74,155,240,.30),transparent 55%),linear-gradient(160deg,rgba(30,79,219,.55),rgba(10,21,48,.8) 60%)}
.pxe h3{font-size:1.25rem}
.pxe .px-price{text-shadow:0 0 34px rgba(74,155,240,.55)}
.pxe .btn-ghost{color:#F7F8FA;border-color:rgba(74,155,240,.55)}
.pxe .btn-ghost::before{background:rgba(74,155,240,.55)}
.pxe .btn-ghost:hover{background:rgba(74,155,240,.14)}
.pxe mark.todo{background:#3D3210;color:#FFD66B}

/* ---------- 6 faceted slabs: slanted plates of equal size, light blue -> royal -> navy, title on top, price in its own foot ---------- */
.pxf{gap:0;align-items:stretch;filter:drop-shadow(0 26px 44px rgba(var(--shadow-rgb),.20))}
.pxf .px-card{--sl:13%;min-height:600px;padding:54px 15% 0 18%;background:var(--card);
  clip-path:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%);transition:transform .5s cubic-bezier(.19,1,.22,1)}
.pxf .px-card + .px-card{margin-left:-7%}
.pxf .t1{--card:linear-gradient(165deg,#4A9BF0,#1E4FDB 70%);--fg:#F7F8FA;--mu:#DCE8FF;--ac:#F7F8FA;--pl:255,255,255;--edge:247,248,250;z-index:1}
.pxf .t2{--card:linear-gradient(165deg,#123a85,#0A1B3D 62%);--fg:#F7F8FA;--mu:#A9BBD8;--ac:#4A9BF0;--pl:74,155,240;--edge:74,155,240;z-index:2}
/* premium: amethyst, the one plate outside the blue family */
.pxf .t3{--card:linear-gradient(165deg,#7C4EC6,#6336AE 48%,#38196F);--fg:#FBF8FF;--mu:#F0E8FD;--ac:#F1E6FF;--pl:226,200,255;--edge:233,214,255;z-index:3}
.pxf .px-card:hover{transform:translateY(-14px)}
/* facet planes, as on the cut-gem panels */
.pxf .dx1{inset:0;z-index:-1;background:
  linear-gradient(118deg,rgba(var(--pl),.22) 0 30%,transparent 30.2%),
  linear-gradient(200deg,rgba(var(--pl),.13) 0 34%,transparent 34.2%),
  linear-gradient(338deg,rgba(var(--pl),.14) 0 26%,transparent 26.2%),
  linear-gradient(64deg,rgba(var(--pl),.10) 0 20%,transparent 20.2%)}
/* bevel line that follows the slanted outline */
.pxf .dx2{inset:11px 4.2% 11px 4.2%;z-index:-1;background:rgba(var(--edge),.5);
  clip-path:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%,var(--sl) 0,
    calc(var(--sl) + .9px) 1px,1.4px calc(100% - 1px),calc(100% - var(--sl) - .9px) calc(100% - 1px),calc(100% - 1.4px) 1px,calc(var(--sl) + .9px) 1px)}
.pxf .dx3{inset:0;z-index:-1;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.pxf .px-card:hover .dx3{transform:translateX(120%)}
.pxf .px-card p{margin:34px 0 30px}
.pxf h3{margin-top:0}
.pxf .px-card .btn{margin-top:0}
.pxf .btn-ghost{color:var(--fg);border-color:rgba(var(--edge),.6)}
.pxf .btn-ghost::before{background:rgba(var(--edge),.6)}
.pxf .btn-ghost:hover{background:rgba(var(--edge),.12)}
/* the plate leans left towards its foot, so the price steps left with it and keeps the title's distance from the edge */
.pxf .px-foot{margin:auto -6% 0 -24%;padding:30px 6% 46px 14%;border-top:1px solid rgba(var(--edge),.4);background:rgba(var(--pl),.08)}
.pxf .px-price{margin:12px 0 0}
.pxf .px-once{display:block}

/* while the nav folds or unfolds, items pass under the fold button: they must not catch clicks */
header.fold-anim .nav a,header.fold-anim .nav button:not(#fold-btn),header.fold-anim .nav-links li{pointer-events:none}
/* ---------- reveal on scroll ---------- */
/* hidden only when theme.js has set html.js; without JavaScript everything is simply visible */
.reveal{transition:opacity .45s ease,transform .45s ease}
:where(.js) .reveal{opacity:0;transform:translateY(10px)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.04s}.reveal.d2{transition-delay:.08s}

/* ---------- responsive ---------- */
@media (max-width:1180px){.nav-links{gap:18px;margin:0 22px}.nav-links a{font-size:.86rem}}
/* links no longer fit beside wordmark + language + theme + CTA below ~1080px: switch to the menu button */
@media (max-width:1100px){
  :root{--ctl:36px}   /* menu mode: larger touch targets, all three controls match */
  .nav-links{position:fixed;inset:var(--head-h) 0 auto 0;background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 18px 36px rgba(var(--shadow-rgb),.10);flex-direction:column;align-items:flex-start;padding:28px 24px 34px;gap:22px;margin:0;display:none}
  .nav-links.open{display:flex}
  .nav-links .menu-cta{display:block}
  .nav-right>.btn,#fold-btn{display:none}
  .nav-right .lang{order:-1}
  .nav-right #theme-btn{order:-2}
  #menu-btn{display:block}
  .nav .brand,.nav-links li{will-change:auto}
}
@media (max-width:960px){
  .cta-band .frame{grid-template-columns:1fr;gap:28px}
  .trio{grid-template-columns:1fr;border-bottom:0}
  a.trio-col{padding:34px 0;border-bottom:1px solid var(--line)}
  a.trio-col + a.trio-col::before{display:none}
  .trio-col .mini{max-width:440px}
  a.ch-row{grid-template-columns:1fr 40px;row-gap:10px;padding:30px 0}
  .ch-row .ch-body{grid-column:1;grid-row:2}
  .pcase{padding:39px 0}
  .pcase .pz-art,.pcase.flip .pz-art{margin-inline:0}
  .pz{grid-template-columns:1fr;gap:28px}
  .pz-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:0;border-bottom:1px solid var(--line)}
  a.pz-tab{grid-template-columns:1fr;justify-items:start;gap:8px;padding:0 6px 14px 0;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.92rem}
  .pz-tab.on{border-bottom-color:var(--royal)}
  .pz-tab.on > *{transform:none}
  .pz-tab.on .pz-node{transform:rotate(45deg)}
  .pz-art{order:2;max-width:520px}
  .pz-view{order:3}
  .ps{grid-template-columns:1fr;padding-top:0}
  .ps-step:nth-child(n){margin-top:0;padding:24px 0 28px 22px}
  .ps-step.ps-care{padding:28px 24px 24px}
  .ps-every{margin-top:22px}
  .ps-axis{display:none}
  .pl-row{grid-template-columns:64px 1fr;row-gap:6px;padding:28px 0}
  .pl-row .gnum{font-size:2.2rem}
  .pl-row p{grid-column:2}
  .tm-row{grid-template-columns:1fr;gap:6px}
  .pq{grid-template-columns:1fr;gap:40px}
  .pq-side{position:static}
  .pt-track{grid-template-columns:1fr}
  .pt-stop,.pt-stop.soft{padding:0 0 34px 30px;border-top:0;border-left:1px solid var(--line-strong)}
  .pt-stop.soft{border-left-style:dashed}
  .pt-stop::before{top:0;left:-5px}
  .pt-stop:last-child::after{top:auto;bottom:0;left:-5px;right:auto;transform:rotate(135deg)}
  .pt-stop p{max-width:none}
  .pc{grid-template-columns:1fr;border-bottom:0}
  .pt-types{grid-template-columns:1fr;border-top:0}
  .pt-types button{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:12px;margin-top:0;padding:16px 0;border-top:1px solid var(--line)}
  .pt-types button[aria-pressed="true"]{border-top-color:var(--line);box-shadow:inset 3px 0 0 var(--royal);padding-left:14px}
  .pt-types button + button::before,.pt-types .case-code{display:none}
  .pt-types h4{margin:0}
  .pc-col{min-height:0;padding:44px 0;border-bottom:1px solid var(--line)}
  .pc-col + .pc-col::before{display:none}
  .px,.pxb{grid-template-columns:1fr;gap:26px}
  .px-card,.pxa .t2,.pxa .t3,.pxd .px-card,.pxe .px-card{min-height:0}
  .px-price{margin-top:34px}
  .px-card p{margin:26px 0 30px}
  .pxb{gap:64px}
  .pxc{gap:0}
  .pxc .px-card{padding:0 0 40px}
  .pxc .px-card + .px-card{margin-top:34px}
  .pxc .px-card + .px-card::after{display:none}
  .pxc .px-card::before,.pxc .t1::before,.pxc .t2::before{font-size:clamp(6.4rem,34vw,11rem);margin-top:0}
  .pxc .dx1{left:0}
  .pxc .t3 .dx1{width:100%}
  .pxd{gap:0;padding:0}
  .pxd .px-card{padding:64px 30px 60px;clip-path:polygon(0 26px,100% 0,100% calc(100% - 26px),0 100%)}
  .pxd .px-card + .px-card{margin:-26px 0 0}
  .pxd .t2{margin-bottom:0}
  .pxd .dx1{display:none}
  .pxe{padding:46px 18px 44px;margin:0 -8px;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))}
  .pxf{filter:drop-shadow(0 16px 30px rgba(var(--shadow-rgb),.18))}
  .pxf .px-card{min-height:0;padding:64px 30px 0;clip-path:polygon(0 26px,100% 0,100% calc(100% - 26px),0 100%)}
  .pxf .px-card + .px-card{margin:-26px 0 0}
  .pxf .dx2{display:none}
  .pxf .px-foot{margin:34px -30px 0;padding:28px 30px 58px}
  .host-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .faq-grid{grid-template-columns:1fr;gap:34px}
  .faq-side{position:static}
  .founders,.nf-grid{grid-template-columns:1fr}
  .nf-art{max-width:260px;order:-1}
  .case{grid-template-columns:1fr;gap:38px;padding:48px 0}
  .case.flip .txt{order:1}
  .case.flip .stage{order:2}
  .device,.case.flip .device{transform:none}
  .lg-row{grid-template-columns:64px 1fr;grid-template-rows:auto auto;row-gap:8px}
  .lg-row p{grid-column:2}
  .lg-code{display:none}
  a.idx-row{grid-template-columns:1fr 40px}
  a.idx-row p{display:none}
  .flow{grid-template-columns:1fr;gap:0;padding-top:0}
  .flow-line,#flow-fill{display:none}
  .stage-p{border-left:1px solid var(--line);padding:0 0 44px 30px}
  .stage-p:last-child{padding-bottom:0}
  .p-node{left:-6.5px;top:6px}
  .gnum{margin:0 0 8px;font-size:2.6rem}
  .crystal{position:static;transform:none;width:100%;max-width:440px;margin:0 auto 8px;order:-1}
}
@media (max-width:720px){
  .tbl{border:0;background:none;overflow:visible}
  .tbl table{min-width:0;display:block}
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl tr{background:var(--surface);border:1px solid var(--line);margin-bottom:14px;padding:6px 0}
  .tbl td{border:0;padding:8px 16px}
  .tbl td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--royal);margin-bottom:2px}
  .tbl td:first-child{font-size:1rem}
}
@media (max-width:620px){
  .cta-band{padding-bottom:55px}
  .trio-col .mini{display:none}
  .cta-band .frame{padding:34px 22px}
  .pz-name{display:none}
  .pq-doc{padding:30px 22px 26px}
  .pq-lines li{flex-wrap:wrap}
  .pq-lines i{display:none}
  .pq-lines .pr-num{margin-left:auto}
  .pq-grp{grid-template-columns:34px 1fr}
  .pq-stamp{margin-right:14px}
  .pr-sub{margin-top:56px}
  .sec-pad{padding:55px 0}
  .brand{gap:9px}
  .brand img{height:15px}
  .brand-name{font-size:.76rem;letter-spacing:.1em}
  .nav-right{gap:10px}
  .lang{padding:0 calc(8px - .16em) 0 8px;font-size:.68rem}
  .statement .line,.statement .line-in{display:inline}
  .statement .line-in{transform:none}
  .statement .line::after{content:" "}
  .creed-row{grid-template-columns:44px 1fr;row-gap:6px}
  .creed-row p{grid-column:2}
  .host-band{clip-path:polygon(0 30px,100% 0,100% calc(100% - 30px),0 100%);padding:110px 0 120px}
  .hero-badges{gap:14px;flex-direction:column;align-items:flex-start;width:max-content;margin-inline:auto}
  .faq summary{grid-template-columns:48px 1fr 24px}
  .faq .a{padding-left:48px;padding-right:10px}
  .frame{padding:32px 22px}
  .fd{grid-template-columns:1fr;gap:18px;padding:22px}
  .fd-mono{width:84px;height:84px;font-size:1.6rem}
}
@media (max-width:400px){.brand-name span{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.statement .line-in,.device,.case.flip .device{opacity:1;transform:none}
  .page,.nf-shard{animation:none}
}