/* CLOZYY — the site's only stylesheet; every page loads this and nothing else.
   Ported from the CLOZYY design canvas (New/CLOZYY.dc.html), with the legal-page
   and 404 rules at the foot of the file carried over from the retired site.css.
   Fonts are self-hosted because the CSP allows font-src 'self' only. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/cormorantgaramond-latin-ext.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/cormorantgaramond-latin.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/cormorantgaramond-italic-latin-ext.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/cormorantgaramond-italic-latin.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: 'Epilogue';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/epilogue-latin-ext.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: 'Epilogue';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/epilogue-latin.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;
}
:root{
  --bg:#FBF3E7;--bg2:#F4E7D6;--bg3:#F4E7D6;--card:#FFFCF7;--blush:#F4E3D3;
  --gold:#B0863C;--gold2:#D4AA5E;--goldd:#8A6733;--gold3d:#6B4F24;--saff:#D4AA5E;--onacc:#FFF9F1;
  --gg:linear-gradient(135deg,#D4AA5E 0%,#B0863C 48%,#8A6733 100%);
  --gg90:linear-gradient(90deg,#D4AA5E,#B0863C,#8A6733);
  --tx:#2E2119;--ink:#2E2119;--ink2:#3D2E22;--t2:#5C4B3E;--t3:#8A7A6D;
  --wire:#E4D2BC;--wire2:rgba(46,33,25,.10);--hair:rgba(46,33,25,.08);
  --goldrgb:176,134,60;--saffrgb:212,170,94;--bgrgb:251,243,231;--surfrgb:255,252,247;
  --fd:"Cormorant Garamond",Georgia,serif;--fb:"Epilogue",system-ui,-apple-system,sans-serif;
  --r:16px;--rl:22px;--max:1200px;--pad:clamp(20px,5vw,48px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#241A14;--bg2:#2E2119;--bg3:#3D2E22;--card:#3D2E22;--blush:#3D2E22;
  --gold:#D4AA5E;--gold2:#E6C687;--goldd:#B0863C;--gold3d:#7A5A28;--saff:#D4AA5E;--onacc:#2E2119;
  --gg:linear-gradient(135deg,#E6C687 0%,#D4AA5E 48%,#B0863C 100%);
  --gg90:linear-gradient(90deg,#E6C687,#D4AA5E,#B0863C);
  --tx:#FBF3E7;--ink:#241A14;--ink2:#3D2E22;--t2:#C9B7A5;--t3:#9C8A78;
  --wire:rgba(255,240,205,.16);--wire2:rgba(255,240,205,.09);--hair:rgba(255,240,205,.08);
  --goldrgb:212,170,94;--bgrgb:36,26,20;--surfrgb:46,33,25;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#241A14;--bg2:#2E2119;--bg3:#3D2E22;--card:#3D2E22;--blush:#3D2E22;
  --gold:#D4AA5E;--gold2:#E6C687;--goldd:#B0863C;--gold3d:#7A5A28;--saff:#D4AA5E;--onacc:#2E2119;
  --gg:linear-gradient(135deg,#E6C687 0%,#D4AA5E 48%,#B0863C 100%);
  --gg90:linear-gradient(90deg,#E6C687,#D4AA5E,#B0863C);
  --tx:#FBF3E7;--ink:#241A14;--ink2:#3D2E22;--t2:#C9B7A5;--t3:#9C8A78;
  --wire:rgba(255,240,205,.16);--wire2:rgba(255,240,205,.09);--hair:rgba(255,240,205,.08);
  --goldrgb:212,170,94;--bgrgb:36,26,20;--surfrgb:46,33,25;color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);font-weight:400;line-height:1.7;font-synthesis:none;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .4s ease,color .4s ease}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
::selection{background:var(--gold);color:var(--onacc)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.w{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 50% at 82% 6%,rgba(var(--goldrgb),.10),transparent 62%),radial-gradient(52% 44% at 6% 88%,rgba(var(--goldrgb),.06),transparent 60%)}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
body>*:not(.ambient):not(.grain):not(.clz-dna-field):not(.nav):not(.to-top):not(.skip-link){position:relative;z-index:1}
.skip-link{position:fixed;top:12px;left:12px;z-index:1100;padding:10px 16px;border-radius:999px;background:var(--gg);color:var(--onacc);font-weight:700;transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus{transform:none}
main:focus{outline:none}

/* minuscule fashion-DNA field */
.clz-dna-field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='42'%20viewBox='0%200%2026%2042'%3E%3Cg%20fill='none'%20stroke='%23B0863C'%20stroke-width='1.3'%20stroke-linecap='round'%3E%3Cpath%20d='M7%201%20Q19%2010.5%207%2021%20Q-5%2031.5%207%2042'/%3E%3Cpath%20d='M19%201%20Q7%2010.5%2019%2021%20Q31%2031.5%2019%2042'/%3E%3Cpath%20stroke-width='1'%20d='M9.5%205H16.5M9.5%2016H16.5M9.5%2026H16.5M9.5%2037H16.5'/%3E%3C/g%3E%3C/svg%3E");background-size:26px 42px;animation:dnaDrift 70s linear infinite}
:root[data-theme="dark"] .clz-dna-field{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='42'%20viewBox='0%200%2026%2042'%3E%3Cg%20fill='none'%20stroke='%23D4AA5E'%20stroke-width='1.3'%20stroke-linecap='round'%3E%3Cpath%20d='M7%201%20Q19%2010.5%207%2021%20Q-5%2031.5%207%2042'/%3E%3Cpath%20d='M19%201%20Q7%2010.5%2019%2021%20Q31%2031.5%2019%2042'/%3E%3Cpath%20stroke-width='1'%20d='M9.5%205H16.5M9.5%2016H16.5M9.5%2026H16.5M9.5%2037H16.5'/%3E%3C/g%3E%3C/svg%3E")}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .clz-dna-field{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='42'%20viewBox='0%200%2026%2042'%3E%3Cg%20fill='none'%20stroke='%23D4AA5E'%20stroke-width='1.3'%20stroke-linecap='round'%3E%3Cpath%20d='M7%201%20Q19%2010.5%207%2021%20Q-5%2031.5%207%2042'/%3E%3Cpath%20d='M19%201%20Q7%2010.5%2019%2021%20Q31%2031.5%2019%2042'/%3E%3Cpath%20stroke-width='1'%20d='M9.5%205H16.5M9.5%2016H16.5M9.5%2026H16.5M9.5%2037H16.5'/%3E%3C/g%3E%3C/svg%3E")}}
@keyframes dnaDrift{from{background-position:0 0}to{background-position:0 -420px}}
@media(prefers-reduced-motion:reduce){.clz-dna-field{animation:none}}

/* nav */
.nav{position:fixed;top:12px;left:50%;right:auto;width:min(860px,calc(100% - 24px));transform:translateX(-50%);z-index:900;background:rgba(var(--surfrgb),.82);backdrop-filter:blur(18px);border:1px solid var(--wire2);border-radius:18px;box-shadow:0 12px 34px -22px rgba(46,33,25,.34),0 3px 12px rgba(var(--goldrgb),.08);transition:background .3s,border-color .3s,box-shadow .3s}
.nav.scrolled{background:rgba(var(--surfrgb),.95);border-color:rgba(var(--goldrgb),.2);box-shadow:0 18px 44px -24px rgba(46,33,25,.48),0 6px 18px rgba(var(--goldrgb),.12)}
.nav-row{display:flex;align-items:center;justify-content:space-between;width:100%;height:66px;gap:40px;padding:0 14px}
.nav-brand{display:flex;align-items:center;flex-shrink:0;position:relative}
.nav-brand img{width:160px;height:auto;object-fit:contain;background:transparent;transition:transform .28s ease}
.nav-brand:hover img{transform:translateY(-2px)}
:root[data-theme="dark"] .nav-brand img,:root[data-theme="dark"] .fbrand img{content:url("/assets/clozyy-logo-lockup-transparent-dark-320.png")}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav-brand img,:root:not([data-theme="light"]) .fbrand img{content:url("/assets/clozyy-logo-lockup-transparent-dark-320.png")}}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--t2);transition:color .2s;position:relative;padding:6px 0}
.nav-links a:hover{color:var(--tx)}
.nav-links a.plain::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gg90);transition:width .28s}
.nav-links a.plain:hover::after{width:100%}
.nav-cta{background:var(--gg);color:var(--onacc)!important;font-weight:600;padding:11px 22px!important;border-radius:999px;font-size:14px;transition:transform .2s,box-shadow .2s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--goldrgb),.28)}
.nav-li{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--wire2);transition:border-color .22s,background .22s}
.nav-li svg{width:16px;height:16px;fill:none;stroke:var(--gold);transition:stroke .22s}
.nav-li svg circle[fill]{fill:var(--gold);stroke:none}
.nav-li:hover svg{stroke:var(--goldd)}
.nav-li:hover{border-color:var(--gold);background:rgba(var(--goldrgb),.08)}
.theme-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--wire2);color:var(--t2);flex-shrink:0;transition:border-color .22s,background .22s,color .22s}
.theme-btn:hover{border-color:var(--gold);background:rgba(var(--goldrgb),.08);color:var(--gold)}
.theme-btn svg{width:15px;height:15px;fill:currentColor;display:block}
.theme-btn .i-sun{display:none}.theme-btn .i-moon{display:block}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .i-sun{display:block}:root:not([data-theme="light"]) .theme-btn .i-moon{display:none}}
.hbg{display:none;flex-direction:column;gap:5px;padding:8px}
.hbg span{width:23px;height:2px;background:var(--tx);border-radius:2px;transition:transform .25s,opacity .25s}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;font-family:var(--fb);font-weight:600;font-size:15px;transition:transform .22s,box-shadow .22s,background .22s,color .22s}
.btn-p{background:var(--gg);color:var(--onacc);position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(var(--goldrgb),.30)}
.btn-p:hover::after{transform:translateX(120%)}
.btn-o{border:1px solid var(--wire);color:var(--tx)}
.btn-o:hover{border-color:var(--gold);background:rgba(var(--goldrgb),.08);transform:translateY(-2px)}

/* back to top — revealed by clozyy.js once the page is scrolled roughly a
   screen down. Toggles visibility as well as opacity so the button leaves the
   tab order while hidden. The scroll itself is left to html{scroll-behavior}. */
.to-top{position:fixed;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:800;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;background:var(--gg);color:var(--onacc);cursor:pointer;box-shadow:0 12px 28px -10px rgba(var(--goldrgb),.6),0 0 0 1px rgba(var(--goldrgb),.18);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,visibility .25s,transform .25s,box-shadow .25s}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top.on:hover{transform:translateY(-3px);box-shadow:0 18px 38px -10px rgba(var(--goldrgb),.75),0 0 0 1px rgba(var(--goldrgb),.32)}
.to-top.on:active{transform:translateY(-1px) scale(.96)}
.to-top svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* section furniture */
section{padding:clamp(80px,10vw,140px) 0}
.lbl{display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.lbl::before{content:"";width:26px;height:1px;background:var(--gg90)}
.sec-h{font-family:var(--fd);font-weight:700;font-size:clamp(30px,4.6vw,54px);line-height:1.1;letter-spacing:-.02em}
.g{background:var(--gg90);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sec-lead{color:var(--t2);font-size:clamp(15px,1.5vw,17.5px);max-width:64ch;margin-top:20px}
.sec-head{max-width:760px;margin-bottom:clamp(44px,6vw,70px)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--wire),transparent)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.8,.28,1),transform .8s cubic-bezier(.22,.8,.28,1)}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* cards */
.div-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.div-card{background:var(--card);border:1px solid var(--wire2);border-radius:var(--rl);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.22,.8,.28,1),border-color .3s,box-shadow .3s,background .3s}
.div-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 0% 0%,rgba(var(--goldrgb),.10),transparent 60%);opacity:0;transition:opacity .35s}
.div-card:hover{transform:translateY(-8px);border-color:rgba(var(--goldrgb),.4);background:var(--bg2);box-shadow:0 24px 50px -24px rgba(var(--goldrgb),.5)}
.div-card:hover::before{opacity:1}
.div-card>*{position:relative;z-index:1}
.card-idx{font-family:var(--fd);font-weight:800;font-size:15px;color:transparent;-webkit-text-stroke:1px var(--wire);letter-spacing:.05em;transition:-webkit-text-stroke-color .3s}
.div-card:hover .card-idx{-webkit-text-stroke-color:var(--gold)}
.div-card h3{font-family:var(--fd);font-weight:700;font-size:clamp(19px,2vw,23px);letter-spacing:-.01em;margin-top:18px}
.div-card p{color:var(--t2);font-size:14.8px;line-height:1.65;margin-top:12px;flex:1}
.div-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:20px;background:rgba(var(--goldrgb),.10);border:1px solid var(--wire2);transition:transform .3s}
.div-card:hover .div-ic{transform:scale(1.08) rotate(-4deg)}

/* feature split (mockups) */
.feat{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px);align-items:center}
@media(min-width:900px){.feat{grid-template-columns:1.05fr .95fr}.feat.flip .feat-vis{order:-1}}
.feat-eyebrow{font-family:var(--fd);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.feat h3{font-family:var(--fd);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.08;letter-spacing:-.02em}
.feat p{color:var(--t2);font-size:clamp(15px,1.6vw,17px);margin-top:18px;max-width:46ch}
.feat-vis{position:relative;display:grid;place-items:center;min-height:clamp(360px,50vw,540px)}
.feat-halo{position:absolute;width:min(120%,560px);aspect-ratio:1;border-radius:50%;filter:blur(50px);opacity:.5;background:radial-gradient(circle,rgba(var(--goldrgb),.5),transparent 62%);animation:meshshift 18s ease-in-out infinite;pointer-events:none}

/* phone mockup */
.phone{position:relative;width:min(300px,80vw);aspect-ratio:300/620;border-radius:44px;background:linear-gradient(160deg,#2a2620,#0d0b07);padding:11px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(var(--goldrgb),.25),inset 0 1px 1px rgba(255,255,255,.14);animation:floaty 7s ease-in-out infinite}
.phone-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;position:relative}
.phone-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:96px;height:22px;background:#0d0b07;border-radius:999px;z-index:5}
.scr-status{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 6px;font-family:var(--fd);font-size:11px;font-weight:600;color:var(--tx)}
.scr-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 12px}
.scr-hd .t{font-family:var(--fd);font-weight:800;font-size:20px;letter-spacing:-.01em}
.scr-hd .t .g{font-size:20px}
.scr-av{width:30px;height:30px;border-radius:50%;background:var(--gg);display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:12px;color:var(--onacc)}
.scr-sub{padding:0 18px;font-size:11.5px;color:var(--t3);margin-bottom:10px}
.look{margin:0 16px;border-radius:22px;background:var(--card);border:1px solid var(--wire2);padding:14px;box-shadow:0 14px 30px -18px rgba(var(--goldrgb),.5)}
.look-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.look-top .lt{font-family:var(--fd);font-weight:700;font-size:13px}
.look-badge{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:rgba(var(--goldrgb),.12);border-radius:999px;padding:4px 9px}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.garm{border-radius:14px;aspect-ratio:1;position:relative;overflow:hidden;background:var(--bg3);border:1px solid var(--wire2)}
.garm::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 60%)}
.garm.g1{background:linear-gradient(150deg,#8a6a2c,#4a3813)}
.garm.g2{background:linear-gradient(150deg,#c9b48d,#8f7a53)}
.garm.g3{background:linear-gradient(150deg,#3d4a52,#1e262b)}
.garm.g4{background:linear-gradient(150deg,#a8452f,#5e2317)}
.garm.tall{aspect-ratio:auto;grid-row:span 2}
.chipsrow{display:flex;gap:7px;margin:14px 16px 0;flex-wrap:wrap}
.mchip{font-size:10px;font-weight:600;color:var(--t2);border:1px solid var(--wire2);border-radius:999px;padding:6px 11px;background:var(--card)}
.mchip.on{background:var(--gg);color:var(--onacc);border-color:transparent}
.scr-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:14px 10px 18px;border-top:1px solid var(--wire2);background:var(--bg2)}
.scr-tabs span{width:22px;height:22px;border-radius:7px;background:var(--wire);display:block}
.scr-tabs span.act{background:var(--gg)}
.scan-line{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 12px 2px rgba(var(--goldrgb),.6);border-radius:2px;animation:scan 3.2s ease-in-out infinite;z-index:4}
/* floating stat pill on mockup */
.fpill{position:absolute;display:flex;align-items:center;gap:9px;background:rgba(var(--surfrgb),.92);backdrop-filter:blur(8px);border:1px solid var(--wire2);border-radius:16px;padding:11px 15px;box-shadow:0 20px 40px -20px rgba(0,0,0,.4);animation:floaty 6s ease-in-out infinite}
.fpill .fn{font-family:var(--fd);font-weight:800;font-size:19px;line-height:1}
.fpill .fl{font-size:10.5px;color:var(--t3);line-height:1.3}
.fpill .fdot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(var(--goldrgb),.18)}

/* vision */
.vision{text-align:center;max-width:760px;margin:0 auto}
.vision .big{font-family:var(--fd);font-weight:700;font-size:clamp(26px,3.6vw,46px);line-height:1.14;letter-spacing:-.02em;margin-top:8px}
.vision .big em{font-style:italic;background:var(--gg90);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* form */
.form{background:var(--card);border:1px solid var(--wire2);border-radius:var(--rl);padding:clamp(26px,3.5vw,42px);max-width:540px;margin:0 auto;box-shadow:0 30px 70px -40px rgba(var(--goldrgb),.5)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.field input[type=text],.field input[type=email]{width:100%;background:var(--bg);border:1px solid var(--wire2);border-radius:12px;padding:15px 16px;color:var(--tx);font-family:var(--fb);font-size:15px;transition:border-color .22s,background .22s,box-shadow .22s}
.field input::placeholder{color:var(--t3)}
.field input:focus{outline:none;border-color:var(--gold);background:var(--bg2);box-shadow:0 0 0 4px rgba(var(--goldrgb),.12)}
.consent{flex-direction:row;align-items:flex-start;gap:10px}
.consent input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--gold)}
.consent label{text-transform:none;letter-spacing:normal;font-size:13.5px;color:var(--t2)}
.consent a{color:var(--gold)}
.send{width:100%;justify-content:center}
.send:disabled{opacity:.6;cursor:not-allowed;transform:none}
.fnote{display:block;margin-top:14px;font-size:13.5px;color:var(--t3);text-align:center}
/* Web3Forms honeypot. Hidden from sight, AT and the tab order — only a bot
   filling every field it finds will tick it, which is what gets it rejected. */
.hp{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%)}
.pcard{border:1px solid var(--gold);background:var(--card);border-radius:var(--rl);text-align:center;max-width:540px;margin:0 auto;padding:clamp(30px,4vw,46px)}
.pcard h2{font-family:var(--fd);font-weight:700;font-size:clamp(24px,3vw,34px)}
.pcard .hint{color:var(--t2);font-size:15px;margin:14px auto 0;max-width:40ch}

/* footer */
footer{border-top:1px solid var(--wire2);padding:clamp(52px,7vw,80px) 0 34px;background:var(--bg2)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(26px,4vw,52px)}
.fbrand img{width:190px;height:auto;object-fit:contain;margin-bottom:18px}
.fbrand p{color:var(--t2);font-size:14.5px;max-width:40ch}
.fsocial{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.fli{display:inline-flex;align-items:center;gap:9px;color:var(--t2);font-size:14px;transition:color .2s}
.fli svg{width:16px;height:16px;fill:#0A66C2}
.fli.fig svg{fill:#E1306C}
.fli:hover{color:var(--gold)}
.fcol h2{font-family:var(--fd);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.fcol a{display:block;color:var(--t2);font-size:14.5px;padding:6px 0;transition:color .2s,padding-left .2s}
.fcol a:hover{color:var(--tx);padding-left:5px}
.foot-bot{margin-top:clamp(40px,5vw,58px);padding-top:26px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13.5px;color:var(--t3)}
.foot-bot a:hover{color:var(--gold)}

/* ── HERO ── */
.clz-hero{padding:clamp(128px,15vw,180px) 0 clamp(80px,9vw,120px);position:relative;overflow:hidden;--px:0;--py:0;perspective:1100px}
.clz-hero .w{position:relative;z-index:2;max-width:1120px;margin:0 auto;text-align:left}
.clz-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(28px,4vw,56px);align-items:center}
.clz-col-l{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;text-align:left}
.clz-col-r{display:flex;flex-direction:column;align-items:center;justify-content:center}
.clz-disc{position:relative;width:min(520px,90%);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(var(--goldrgb),.16),rgba(var(--goldrgb),.06) 46%,transparent 68%)}
.clz-disc::before,.clz-disc::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(var(--goldrgb),.14)}
.clz-disc::before{inset:8%}
.clz-disc::after{inset:20%;border-color:rgba(var(--goldrgb),.10)}
.clz-disc .clz-logo{width:266px;height:266px;max-width:70%;position:relative;z-index:1}
.clz-hero .clz-h1{margin:20px 0 6px}
.clz-hero .clz-lead{margin:18px 0 32px}
.clz-hero .clz-cta{margin-top:0}
/* --tx, not --ink: --ink is the dark ink used on the always-light phone-mockup
   surfaces, and in the dark palette it resolves to near-black. Page copy that
   sits on --bg must follow --tx or it goes unreadable in dark mode. Identical
   in light mode, where --ink and --tx are the same colour. */
.clz-sub{font-family:var(--fd);font-weight:600;font-size:clamp(30px,4.4vw,56px);line-height:1.02;letter-spacing:-.02em;color:var(--tx);margin:16px 0 0;opacity:0;transform:translateY(14px);animation:clzFadeIn .7s cubic-bezier(.22,.8,.28,1) .82s forwards}
.clz-sub .g{position:relative;font-style:italic;background:linear-gradient(150deg,var(--gold2),var(--gold) 50%,var(--goldd));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.clz-sub .g::after{content:"";position:absolute;left:0;right:6%;bottom:.02em;height:2px;background:var(--gg90);border-radius:2px;opacity:.75}
.clz-sub .spk{display:inline-block;width:.42em;height:.42em;margin-left:.14em;vertical-align:.4em;color:var(--gold)}
.clz-sub .spk svg{display:block;width:100%;height:100%;fill:currentColor}
.clz-cta .btn{display:inline-flex;align-items:center;gap:9px}
.clz-cta .btn svg{width:17px;height:17px;flex:none}
.clz-cta .btn-p svg{fill:currentColor}
.clz-cta .btn-o svg{fill:currentColor}
.clz-feats{display:flex;align-items:stretch;margin-top:30px;padding:6px;border:1px solid var(--wire2);border-radius:18px;background:rgba(var(--surfrgb),.55);opacity:0;transform:translateY(14px);animation:clzFadeIn .7s ease 1.3s forwards}
.clz-feat{display:flex;align-items:center;gap:11px;padding:8px 18px;flex:1}
.clz-feat+.clz-feat{border-left:1px solid var(--wire2)}
.clz-feat svg{width:22px;height:22px;color:var(--gold);flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.clz-feat b{font-family:var(--fb);font-weight:600;font-size:13.5px;color:var(--tx);display:block;line-height:1.28}
.clz-feat span{font-size:12.5px;color:var(--t2);line-height:1.28}
.clz-stage{position:relative;width:min(600px,100%);margin:0 auto;display:grid;place-items:center;opacity:0;animation:clzFadeIn .8s ease .55s forwards}
.clz-stage .clz-disc{position:absolute;inset:0;margin:auto;width:min(500px,94%);aspect-ratio:1}
.clz-phone{position:relative;z-index:3;width:clamp(248px,25vw,300px);aspect-ratio:300/650;background:linear-gradient(160deg,#F3EADA,#E7DBC7);border-radius:46px;padding:11px;box-shadow:0 40px 80px -30px rgba(46,33,25,.45),0 4px 14px rgba(46,33,25,.14);animation:floaty 7s ease-in-out infinite}
.clz-scr{width:100%;height:100%;background:#FCF7EF;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;font-family:var(--fb);color:var(--ink)}
.clz-sb{display:flex;justify-content:space-between;align-items:center;padding:9px 18px 2px;font-size:11px;font-weight:700}
.clz-sb-i{display:flex;gap:3px;align-items:flex-end}
.clz-sb-i i{width:4px;background:var(--ink);border-radius:1px}
.clz-sb-i i:nth-child(1){height:5px}.clz-sb-i i:nth-child(2){height:7px}.clz-sb-i i:nth-child(3){height:9px}
.clz-ph-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 10px;border-bottom:1px solid var(--hair)}
.clz-ph-hd svg{width:17px;height:17px;color:var(--ink2);stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.clz-wm{font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:.02em}
.clz-wm span{color:var(--gold)}
.clz-greet{display:flex;align-items:center;gap:9px;padding:9px 18px 3px}
.clz-greet svg{width:19px;height:19px;color:var(--gold);flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.clz-greet b{font-family:var(--fd);font-weight:700;font-size:16px;display:block;line-height:1.2}
.clz-greet small{font-size:10.5px;color:var(--t3)}
.clz-look{margin:8px 14px 0;background:#fff;border:1px solid var(--hair);border-radius:18px;padding:11px;box-shadow:0 12px 26px -16px rgba(46,33,25,.32);flex:1;display:flex;flex-direction:column;min-height:0}
.clz-look-hd{display:flex;justify-content:space-between;align-items:flex-start}
.clz-look-hd b{font-family:var(--fd);font-weight:700;font-size:15px;display:block}
.clz-look-hd small{font-size:10px;color:var(--t3)}
.clz-look-go{width:22px;height:22px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;color:var(--gold);font-size:14px;flex:none}
.clz-look-body{display:flex;gap:9px;margin:9px 0;flex:1;min-height:0;justify-content:center}
.clz-look-img{height:100%;aspect-ratio:.62;flex:none;border-radius:12px;overflow:hidden;background:var(--bg2)}
.clz-dots{display:flex;flex-direction:column;gap:7px;justify-content:center}
.clz-dots i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--hair)}
.clz-getdressed{width:100%;border:none;background:var(--gg);color:var(--onacc);font-family:var(--fb);font-weight:600;font-size:12.5px;padding:10px;border-radius:11px;cursor:pointer}
.clz-stats{display:flex;padding:10px 12px 6px;gap:4px}
.clz-stat{flex:1;display:flex;flex-direction:column;gap:2px}
.clz-stat .n{font-family:var(--fd);font-weight:700;font-size:15px;display:flex;align-items:center;gap:4px}
.clz-stat .n svg{width:12px;height:12px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.clz-stat .l{font-size:9px;color:var(--t3)}
.clz-nav{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-top:1px solid var(--hair);background:#fff}
.clz-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;color:var(--t3);text-decoration:none}
.clz-nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.clz-nav a.on{color:var(--gold)}
.clz-nav .plus{width:34px;height:34px;border-radius:50%;background:var(--gg);color:var(--onacc);display:grid;place-items:center;box-shadow:0 6px 14px -4px rgba(var(--goldrgb),.6)}
.clz-nav .plus svg{width:15px;height:15px;stroke-width:2.6}
.clz-float{position:absolute;z-index:4;border-radius:16px;overflow:hidden;box-shadow:0 24px 44px -22px rgba(46,33,25,.5);animation:floaty 8s ease-in-out infinite}
.clz-float.a{width:23%;top:5%;right:-1%;aspect-ratio:.82;animation-delay:-1s}
.clz-float.b{width:21%;top:40%;right:-5%;aspect-ratio:.92;animation-delay:-3s}
.clz-float.c{width:19%;bottom:5%;right:5%;aspect-ratio:.68;animation-delay:-5s}
.clz-spark{position:absolute;z-index:5;color:var(--gold);animation:clzTwinkle 3.5s ease-in-out infinite}
.clz-spark svg{display:block;width:100%;height:100%;fill:currentColor}
.clz-spark.s1{width:26px;height:26px;top:3%;right:16%;animation-delay:-.5s}
.clz-spark.s2{width:18px;height:18px;top:34%;right:30%;animation-delay:-1.6s}
.clz-spark.s3{width:20px;height:20px;bottom:14%;left:6%;animation-delay:-2.4s}
@keyframes clzTwinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(15deg)}}
.clz-sub .g::after{content:none}
.clz-grid .clz-col-l{order:2}
.clz-grid .clz-col-r{order:1}
.clz-herovis{position:relative;width:100%;aspect-ratio:905/752;border-radius:22px;overflow:hidden;box-shadow:0 34px 74px -30px rgba(46,33,25,.55);opacity:0;animation:clzFadeIn .8s ease .5s forwards}
.clz-hero .clz-helix,.clz-hero .clz-motes,.clz-hero .clz-frame{display:none}
.clz-stage2{position:relative;width:100%;min-height:clamp(360px,40vw,470px);opacity:0;animation:clzFadeIn .8s ease .55s forwards}
.clz-closet{position:absolute;right:0;top:0;bottom:0;width:64%;border-radius:150px 24px 24px 24px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(46,33,25,.42);background:var(--bg2)}
.clz-scan{position:absolute;left:0;top:50%;transform:translateY(-50%);width:min(300px,54%);background:linear-gradient(180deg,#FFFDF9,#FBF4EA);border:1px solid var(--wire2);border-radius:22px;padding:15px 15px 16px;box-shadow:0 30px 66px -24px rgba(46,33,25,.5);z-index:2;animation:clzScanFloat 8s ease-in-out infinite}
@keyframes clzScanFloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 9px))}}
:root[data-theme="dark"] .clz-scan{background:linear-gradient(180deg,#3D2E22,#342519)}
.clz-scan-hd{text-align:center;font-family:var(--fd);font-weight:700;font-size:17px;letter-spacing:.03em;padding-bottom:11px;border-bottom:1px solid var(--hair)}
.clz-scan-hd span{color:var(--gold)}
.clz-scan-view{position:relative;margin:13px 0 10px;aspect-ratio:1.5;border-radius:12px;overflow:hidden;background:var(--bg2)}
.clz-scan-img{position:absolute;inset:0}
.clz-scan-view .cnr{position:absolute;width:18px;height:18px;border:2px solid var(--gold);z-index:2}
.clz-scan-view .cnr.tl{top:8px;left:8px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.clz-scan-view .cnr.tr{top:8px;right:8px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.clz-scan-view .cnr.bl{bottom:8px;left:8px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.clz-scan-view .cnr.br{bottom:8px;right:8px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.clz-scanline{position:absolute;left:8%;right:8%;top:14%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 8px rgba(var(--goldrgb),.7);z-index:2;animation:clzScanY 2.6s ease-in-out infinite}
@keyframes clzScanY{0%,100%{top:14%}50%{top:82%}}
.clz-scan-status{font-family:var(--fb);font-size:11.5px;color:var(--t3);margin-bottom:11px}
.clz-scan-rows{display:flex;flex-direction:column;gap:9px}
.clz-scan-rows .row{display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:12.5px;color:var(--t2)}
.clz-scan-rows .ck{width:16px;height:16px;border-radius:50%;background:rgba(var(--goldrgb),.16);color:var(--gold);display:grid;place-items:center;flex:none}
.clz-scan-rows .ck svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.clz-scan-rows .v{margin-left:auto;font-weight:600;color:var(--ink)}
.clz-scan-prog{margin-top:14px}
.clz-scan-prog .pl{display:flex;justify-content:space-between;font-family:var(--fb);font-size:11px;color:var(--t3);margin-bottom:6px}
.clz-scan-prog .pl b{color:var(--gold);font-weight:700}
.clz-scan-prog .bar{height:6px;border-radius:6px;background:var(--bg3);overflow:hidden}
.clz-scan-prog .bar i{display:block;height:100%;width:100%;background:var(--gg90);border-radius:6px;animation:clzFill 2.2s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes clzFill{from{width:0}to{width:100%}}
@media(max-width:820px){
  .clz-stage2{min-height:0;display:flex;flex-direction:column;align-items:center}
  .clz-closet{position:relative;right:auto;top:auto;bottom:auto;width:100%;max-width:440px;aspect-ratio:1.15;border-radius:90px 20px 20px 20px}
  .clz-scan{position:relative;left:auto;top:auto;transform:none;width:min(300px,86%);margin-top:-70px;animation:none}
}
@media(max-width:820px){
  .clz-hero .w{text-align:center}
  .clz-grid{grid-template-columns:1fr;gap:clamp(24px,6vw,40px);text-align:center}
  .clz-col-l{align-items:center;order:2;text-align:center}
  .clz-col-r{align-items:center;order:1}
  .clz-hero .clz-cta{justify-content:center}
  .clz-sub{text-align:center}
  .clz-feats{width:100%;max-width:440px}
  .clz-feat{padding:8px 12px}
  .clz-feat span,.clz-feat b{font-size:12.5px}
  .clz-phone{width:min(240px,62vw)}
}
.clz-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.clz-aura,.clz-helix,.clz-motes{position:absolute;inset:0;transition:transform .5s cubic-bezier(.22,.8,.28,1)}
.clz-aura{transform:translate3d(calc(var(--px)*18px),calc(var(--py)*13px),0)}
.clz-aura::before{content:"";position:absolute;inset:-10%;background:radial-gradient(38% 34% at 50% 34%,rgba(var(--goldrgb),.30),transparent 68%),radial-gradient(30% 26% at 72% 66%,rgba(var(--goldrgb),.16),transparent 70%);filter:blur(18px);animation:meshshift 19s ease-in-out infinite}
.clz-helix{display:grid;place-items:center;transform:translate3d(calc(var(--px)*-12px),calc(var(--py)*-8px - 4%),0) rotateY(calc(var(--px)*10deg)) rotateX(calc(var(--py)*-8deg))}
.clz-motes{transform:translate3d(calc(var(--px)*26px),calc(var(--py)*19px),0)}
.clz-strand{--rr:clamp(96px,15.5vw,236px);--step:clamp(17px,2.2vw,28px);position:relative;width:calc(var(--rr)*2);height:calc(23*var(--step));opacity:.66;-webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 70%,transparent)}
:root[data-theme="dark"] .clz-strand{opacity:.8}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .clz-strand{opacity:.8}}
.clz-node{position:absolute;left:50%;top:calc(var(--i)*var(--step));width:0;height:0;--ph:calc(var(--i)*-.9s)}
.clz-node::before,.clz-node::after{content:"";position:absolute;left:0;top:0;border-radius:50%;animation:clzOrb 14s linear infinite}
.clz-node::before{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:radial-gradient(circle at 34% 30%,var(--gold2),var(--goldd));box-shadow:0 0 11px rgba(var(--goldrgb),.5);animation-delay:var(--ph)}
.clz-node::after{width:8px;height:8px;margin:-4px 0 0 -4px;background:radial-gradient(circle at 34% 30%,var(--tx),var(--t3));animation-delay:calc(var(--ph) - 7s)}
.clz-node i{position:absolute;left:0;top:0;width:calc(var(--rr)*2);height:2px;margin:-1px 0 0 calc(var(--rr)*-1);background:linear-gradient(90deg,transparent,var(--gold),transparent);transform-origin:50% 50%;animation:clzRung 14s linear infinite var(--ph)}
@keyframes clzOrb{0%{transform:translateX(0) scale(1.42);opacity:1}8.333%{transform:translateX(calc(var(--rr)*.5)) scale(1.364);opacity:.956}16.667%{transform:translateX(calc(var(--rr)*.866)) scale(1.21);opacity:.838}25%{transform:translateX(var(--rr)) scale(1);opacity:.675}33.333%{transform:translateX(calc(var(--rr)*.866)) scale(.79);opacity:.513}41.667%{transform:translateX(calc(var(--rr)*.5)) scale(.636);opacity:.394}50%{transform:translateX(0) scale(.58);opacity:.35}58.333%{transform:translateX(calc(var(--rr)*-.5)) scale(.636);opacity:.394}66.667%{transform:translateX(calc(var(--rr)*-.866)) scale(.79);opacity:.513}75%{transform:translateX(calc(var(--rr)*-1)) scale(1);opacity:.675}83.333%{transform:translateX(calc(var(--rr)*-.866)) scale(1.21);opacity:.838}91.667%{transform:translateX(calc(var(--rr)*-.5)) scale(1.364);opacity:.956}100%{transform:translateX(0) scale(1.42);opacity:1}}
@keyframes clzRung{0%{transform:scaleX(.02);opacity:.05}8.333%{transform:scaleX(.5);opacity:.24}16.667%{transform:scaleX(.866);opacity:.37}25%{transform:scaleX(1);opacity:.44}33.333%{transform:scaleX(.866);opacity:.37}41.667%{transform:scaleX(.5);opacity:.24}50%{transform:scaleX(.02);opacity:.05}58.333%{transform:scaleX(.5);opacity:.24}66.667%{transform:scaleX(.866);opacity:.37}75%{transform:scaleX(1);opacity:.44}83.333%{transform:scaleX(.866);opacity:.37}91.667%{transform:scaleX(.5);opacity:.24}100%{transform:scaleX(.02);opacity:.05}}
.clz-motes span{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,var(--gold2),transparent 68%);filter:blur(1.5px);animation:clzMote var(--dur) ease-in-out var(--d) infinite}
@keyframes clzMote{0%,100%{transform:translate3d(0,6px,0) scale(var(--s));opacity:.18}50%{transform:translate3d(0,-28px,0) scale(calc(var(--s)*1.3));opacity:.62}}
.clz-logo{width:148px;height:148px;border-radius:36px;object-fit:contain;background:var(--bg2);border:1px solid var(--wire2);padding:9px;margin:0 auto;animation:logoglow 5s ease-in-out infinite,clzFadeIn .6s ease forwards}
.clz-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:rgba(var(--goldrgb),.10);border:1px solid var(--wire2);border-radius:999px;padding:7px 14px;margin-top:22px;animation:clzFadeIn .6s ease forwards,pulseglow 2.4s ease-out 1s infinite}
.clz-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
.clz-h1{font-family:var(--fd);font-weight:800;font-size:clamp(50px,9vw,96px);line-height:.92;letter-spacing:-.03em;margin:22px 0 6px;perspective:900px}
/* Gold gradient wordmark. The extrusion is stacked drop-shadows, not text-shadow:
   the letters are transparent-filled gradient text, so a text-shadow would show
   straight through the glyph. Each drop-shadow also shadows the one before it,
   which is what builds the solid gold edge under every letter. */
.clz-letter{display:inline-block;opacity:0;transform:rotateX(-82deg) translateY(26px);transform-origin:50% 100%;background:linear-gradient(170deg,var(--gold2) 0%,var(--gold) 48%,var(--goldd) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 0 var(--gold3d)) drop-shadow(0 2px 0 var(--gold3d)) drop-shadow(0 4px 10px rgba(var(--goldrgb),.4));animation:clzLetterIn .9s cubic-bezier(.18,.78,.28,1) forwards,clzLetterGlow 5.5s ease-in-out infinite}
.clz-letter-dna{background:linear-gradient(150deg,#FFF3DC 0%,var(--gold2) 32%,var(--gold) 62%,var(--goldd) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 0 var(--gold3d)) drop-shadow(0 3px 0 var(--gold3d)) drop-shadow(0 4px 18px rgba(var(--goldrgb),.55));animation:clzLetterIn .9s cubic-bezier(.18,.78,.28,1) forwards,clzDnaGlow 5.5s ease-in-out infinite}
/* The stagger lives here, not in a style="" attribute on each span: the CSP
   forbids inline styles. One delay value feeds both animations on the span. */
.clz-h1 .clz-letter:nth-child(1){animation-delay:.25s}
.clz-h1 .clz-letter:nth-child(2){animation-delay:.31s}
.clz-h1 .clz-letter:nth-child(3){animation-delay:.37s}
.clz-h1 .clz-letter:nth-child(4){animation-delay:.45s}
.clz-h1 .clz-letter:nth-child(5){animation-delay:.53s}
.clz-h1 .clz-letter:nth-child(6){animation-delay:.59s}
@keyframes clzLetterIn{to{opacity:1;transform:rotateX(0) translateY(0)}}
@keyframes clzLetterGlow{0%,100%{filter:drop-shadow(0 1px 0 var(--gold3d)) drop-shadow(0 2px 0 var(--gold3d)) drop-shadow(0 4px 10px rgba(var(--goldrgb),.4))}50%{filter:drop-shadow(0 1px 0 var(--gold3d)) drop-shadow(0 3px 0 var(--gold3d)) drop-shadow(0 6px 22px rgba(var(--goldrgb),.62))}}
@keyframes clzDnaGlow{0%,100%{filter:drop-shadow(0 1px 0 var(--gold3d)) drop-shadow(0 3px 0 var(--gold3d)) drop-shadow(0 4px 18px rgba(var(--goldrgb),.55))}50%{filter:drop-shadow(0 1px 0 var(--gold3d)) drop-shadow(0 4px 0 var(--gold3d)) drop-shadow(0 8px 30px rgba(var(--goldrgb),.85))}}
.clz-tag{font-family:var(--fd);font-weight:600;font-size:clamp(19px,2.6vw,28px);margin-top:14px;opacity:0;transform:translateY(14px);background:linear-gradient(100deg,var(--gold) 34%,var(--gold2) 47%,#fff 50%,var(--gold2) 53%,var(--gold) 66%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:clzFadeIn .7s cubic-bezier(.22,.8,.28,1) .85s forwards,shimmer 5.5s linear 1.4s infinite}
.clz-lead{color:var(--t2);max-width:56ch;margin:18px auto 28px;opacity:0;transform:translateY(14px);animation:clzFadeIn .7s cubic-bezier(.22,.8,.28,1) .98s forwards}
.clz-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;opacity:0;transform:translateY(14px);animation:clzFadeIn .7s cubic-bezier(.22,.8,.28,1) 1.12s forwards}
.clz-scroll{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:clamp(48px,7vw,80px);opacity:0;animation:clzFadeIn .7s ease 1.6s forwards}
.clz-scroll .mouse{width:24px;height:38px;border:2px solid var(--wire);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.clz-scroll .mouse i{width:3px;height:7px;border-radius:2px;background:var(--gold);animation:scrolldot 1.8s ease-in-out infinite}
.clz-scroll span{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
@keyframes scrolldot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--goldrgb),.5)}50%{opacity:.65;box-shadow:0 0 0 7px rgba(var(--goldrgb),0)}}
@keyframes pulseglow{0%,100%{box-shadow:0 0 0 0 rgba(var(--goldrgb),.45)}50%{box-shadow:0 0 0 12px rgba(var(--goldrgb),0)}}
@keyframes logoglow{0%,100%{filter:drop-shadow(0 0 0 rgba(var(--goldrgb),0))}50%{filter:drop-shadow(0 6px 18px rgba(var(--goldrgb),.45))}}
@keyframes shimmer{from{background-position:-220% 0}to{background-position:220% 0}}
@keyframes meshshift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-18px,0) scale(1.04)}}
@keyframes clzFadeIn{to{opacity:1;transform:translateY(0)}}
@keyframes scan{0%,100%{top:14%}50%{top:78%}}

/* flowing bg */
.clz-flow-wrap{position:relative}
.clz-flow-wrap>*:not(.clz-flow){position:relative;z-index:1}
.clz-flow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.clz-flow-blob{position:absolute;border-radius:50%;filter:blur(48px);opacity:.12}
.clz-flow-blob:nth-child(1){width:44vw;height:44vw;left:-12%;top:2%;background:radial-gradient(circle,var(--gold2),transparent 68%);animation:clzFlow1 28s ease-in-out infinite}
.clz-flow-blob:nth-child(2){width:36vw;height:36vw;right:-10%;top:34%;background:radial-gradient(circle,var(--gold),transparent 66%);animation:clzFlow2 34s ease-in-out infinite}
.clz-flow-blob:nth-child(3){width:48vw;height:48vw;left:20%;bottom:-16%;background:radial-gradient(circle,var(--goldd),transparent 70%);animation:clzFlow3 40s ease-in-out infinite}
:root[data-theme="dark"] .clz-flow-blob{opacity:.16}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .clz-flow-blob{opacity:.16}}
@keyframes clzFlow1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,8%) scale(1.12)}}
@keyframes clzFlow2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,-6%) scale(1.08)}}
@keyframes clzFlow3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,-10%) scale(1.15)}}

@media(max-width:1000px){
  /* Row, not column: with one text link and two icon buttons, stacking put each
     icon alone on its own line. Wrapping keeps the link and both icons on one
     line and lets the CTA drop below when it does not fit. */
  .nav{width:calc(100% - 24px)}
  .nav-row{width:100%;padding:0 18px}
  .nav-links{position:fixed;top:88px;left:12px;right:12px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:20px var(--pad) 24px;background:rgba(var(--surfrgb),.98);backdrop-filter:blur(18px);border:1px solid var(--wire2);border-radius:18px;box-shadow:0 18px 42px -24px rgba(46,33,25,.5);transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s,opacity .25s,visibility 0s linear .25s}
  .nav-links.open{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .hbg{display:flex}
  .div-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.nav-brand img{width:145px}.foot-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .clz-node::before{transform:translateX(calc(var(--rr)*-.55)) scale(1);opacity:.75}
  .clz-node::after{transform:translateX(calc(var(--rr)*.55)) scale(1);opacity:.45}
  .clz-node i{transform:scaleX(.55);opacity:.16}
  .clz-motes,.clz-aura::before{display:none}
  .clz-letter,.clz-tag,.clz-lead,.clz-cta,.clz-logo,.clz-badge,.clz-scroll{opacity:1;transform:none;animation:none}
}

/* ── CLOZYY brand system (terracotta / ink) ── */
.btn:active,.nav-cta:active{transform:scale(.97)}
.div-ic{color:var(--gold)}
.div-ic svg,.feat-eyebrow svg,.pcheck svg{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.div-ic svg{width:24px;height:24px}
.feat-eyebrow{display:flex;align-items:center;gap:7px}
.feat-eyebrow svg{width:17px;height:17px;stroke-width:1.7;color:var(--gold)}

/* dark section — Meet Clozyy */
.sec-dark{
  --bg:#2E2119;--bg2:#3D2E22;--bg3:#3D2E22;--card:#3D2E22;
  --gold:#D4AA5E;--gold2:#E6C687;--goldd:#B0863C;--goldrgb:212,170,94;--onacc:#2E2119;
  --gg:linear-gradient(135deg,#E6C687,#D4AA5E,#B0863C);--gg90:linear-gradient(90deg,#E6C687,#D4AA5E,#B0863C);
  --tx:#FBF3E7;--t2:#C9B7A5;--t3:#9C8A78;--surfrgb:61,46,34;
  --wire:rgba(255,240,205,.16);--wire2:rgba(255,240,205,.10);--hair:rgba(255,240,205,.08);
  background:#2E2119;color:var(--tx);position:relative;overflow:hidden
}
.sec-dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;z-index:0;
  background-image:radial-gradient(rgba(212,170,94,.16) 1px,transparent 1.6px);background-size:28px 28px;
  -webkit-mask:radial-gradient(130% 90% at 88% 8%,#000,transparent 66%);mask:radial-gradient(130% 90% at 88% 8%,#000,transparent 66%)}
.sec-dark>*{position:relative;z-index:1}

/* + More, at Launch — locked-dna card */
.div-card.locked{border:1.5px dashed rgba(var(--goldrgb),.55);background:radial-gradient(rgba(212,170,94,.14) 1px,transparent 1.5px) 0 0/22px 22px,var(--card)}
.div-card.locked:hover{border-color:rgba(var(--goldrgb),.9);background:radial-gradient(rgba(212,170,94,.2) 1px,transparent 1.5px) 0 0/22px 22px,var(--bg2);box-shadow:0 24px 50px -24px rgba(212,170,94,.4)}
.div-card.locked .div-ic{background:transparent;border:none;width:58px;height:58px}
.div-card.locked .div-ic svg{width:54px;height:54px}
.ldna .ring{stroke-dasharray:3 5}

/* signup — blush */
.sec-blush{background:var(--blush)}
.pcheck{width:56px;height:56px;margin:0 auto 16px;color:var(--gold)}
.pcheck svg{width:56px;height:56px}

/* footer — ink with helix watermark */
footer.foot-dark{
  --card:#3D2E22;--bg:#2E2119;--bg2:#2E2119;
  --gold:#D4AA5E;--gold2:#E6C687;--goldd:#B0863C;--goldrgb:212,170,94;--onacc:#2E2119;
  --gg:linear-gradient(135deg,#E6C687,#D4AA5E,#B0863C);--gg90:linear-gradient(90deg,#E6C687,#D4AA5E,#B0863C);
  --tx:#FBF3E7;--t2:#C9B7A5;--t3:#9C8A78;--wire2:rgba(255,240,205,.10);--hair:rgba(255,240,205,.12);
  background:#2E2119;color:var(--tx);position:relative;overflow:hidden;border-top-color:rgba(255,240,205,.12)
}
footer.foot-dark::before{content:"";position:absolute;right:-2%;top:-14%;bottom:-14%;width:min(360px,42vw);pointer-events:none;opacity:.05;z-index:0;
  background-image:radial-gradient(rgba(212,170,94,.9) 1.1px,transparent 1.6px);background-size:26px 26px}
footer.foot-dark .w{position:relative;z-index:1}
footer.foot-dark .foot-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
footer.foot-dark .fbrand img{width:160px;background:#FFFCF7;border-radius:8px}
:root[data-theme="dark"] footer.foot-dark .fbrand img{background:transparent}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) footer.foot-dark .fbrand img{background:transparent}}
footer.foot-dark .flegal{justify-self:end;text-align:right}
@media(max-width:640px){footer.foot-dark .foot-grid{grid-template-columns:1fr}footer.foot-dark .flegal{justify-self:start;text-align:left}}

/* hero identity-scan viewfinder frame */
.clz-frame{position:absolute;left:50%;top:clamp(150px,20vw,232px);transform:translateX(-50%) translate3d(calc(var(--px)*-8px),calc(var(--py)*-6px),0);width:min(640px,84vw);height:clamp(220px,30vw,320px);pointer-events:none;z-index:1;opacity:.5;transition:transform .5s cubic-bezier(.22,.8,.28,1)}
.clz-frame i{position:absolute;width:30px;height:30px;border:2px solid rgba(var(--goldrgb),.6)}
.clz-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.clz-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.clz-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 5px}
.clz-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 5px 0}
@media(max-width:640px){.clz-frame{display:none}}

/* ── HERO VISUAL — animated composition ── */
.clz-herostage{position:relative;width:100%;perspective:1400px;opacity:0;animation:clzFadeIn .9s cubic-bezier(.22,.8,.28,1) .5s forwards;transform:scale(1.4);transform-origin:left center}
@media(max-width:820px){.clz-herostage{transform:none}}
.clz-hv-glow{position:absolute;inset:-16% -12%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--goldrgb),.42),rgba(var(--goldrgb),.12) 54%,transparent 74%);filter:blur(34px);animation:hvGlow 6s ease-in-out infinite}
@keyframes hvGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}
.clz-herovis{position:relative;z-index:1;width:100%;aspect-ratio:909/692;border-radius:22px;overflow:hidden;opacity:1;animation:none;box-shadow:0 34px 74px -30px rgba(46,33,25,.55),0 0 0 1px rgba(var(--goldrgb),.18);transform:rotateY(calc(var(--px,0)*5deg)) rotateX(calc(var(--py,0)*-5deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,.8,.28,1),box-shadow .45s}
.clz-herovis:hover{box-shadow:0 46px 92px -30px rgba(46,33,25,.62),0 0 0 1px rgba(var(--goldrgb),.42)}
.clz-hv-img{position:absolute;inset:0;z-index:0;animation:hvKen 22s ease-in-out infinite}
.clz-hv-img img{width:100%;height:100%;display:block;object-fit:cover}
@keyframes hvKen{0%{transform:scale(1.06) translate(0,0)}50%{transform:scale(1.14) translate(-1.6%,-1.1%)}100%{transform:scale(1.06) translate(0,0)}}
.clz-hv-scan{position:absolute;left:0;right:0;top:0;height:38%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--goldrgb),.14) 58%,rgba(var(--goldrgb),.4));border-bottom:2px solid rgba(var(--goldrgb),.7);box-shadow:0 0 24px rgba(var(--goldrgb),.5);mix-blend-mode:screen;transform:translateY(-120%);animation:hvScan 6s cubic-bezier(.5,0,.5,1) 1.6s infinite}
@keyframes hvScan{0%{transform:translateY(-120%);opacity:0}10%{opacity:.95}62%{opacity:.95}82%{transform:translateY(270%);opacity:0}100%{transform:translateY(270%);opacity:0}}
.clz-hv-sweep{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.clz-hv-sweep::before{content:"";position:absolute;top:-30%;left:0;width:42%;height:160%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);mix-blend-mode:screen;transform:skewX(-18deg) translateX(-60%);animation:hvSweep 7.5s ease-in-out 2.2s infinite}
@keyframes hvSweep{0%{transform:skewX(-18deg) translateX(-60%)}20%{transform:skewX(-18deg) translateX(340%)}100%{transform:skewX(-18deg) translateX(340%)}}
.clz-hv-spark{position:absolute;z-index:4;color:var(--gold);pointer-events:none;animation:clzTwinkle 3.6s ease-in-out infinite}
.clz-hv-spark svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 6px rgba(var(--goldrgb),.7))}
.clz-hv-spark.a{width:22px;height:22px;top:-3%;right:9%;animation-delay:-.4s}
.clz-hv-spark.b{width:15px;height:15px;bottom:7%;left:-3%;animation-delay:-1.8s}
.clz-hv-spark.c{width:13px;height:13px;top:42%;right:-3%;animation-delay:-2.7s}
.clz-hv-pill{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;background:rgba(var(--surfrgb),.9);backdrop-filter:blur(10px);border:1px solid var(--wire2);border-radius:15px;padding:10px 15px;box-shadow:0 20px 44px -22px rgba(46,33,25,.5);animation:floaty 6.5s ease-in-out infinite}
.clz-hv-pill .fn{font-family:var(--fd);font-weight:800;font-size:18px;line-height:1;color:var(--gold)}
.clz-hv-pill .fl{font-size:10.5px;color:var(--t3);line-height:1.25}
.clz-hv-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(var(--goldrgb),.18);flex:none}
.clz-hv-pill.top{top:5%;left:-7%;animation-delay:-1.5s}
.clz-hv-pill.bot{bottom:8%;right:-6%;animation-delay:-3.6s}
@media(max-width:820px){.clz-hv-pill,.clz-hv-spark{display:none}.clz-herovis{transform:none!important}}

/* ── nav scroll progress ── */
.nav-prog{position:absolute;left:18px;right:18px;bottom:0;height:2px;overflow:hidden;border-radius:999px;pointer-events:none}
.nav-prog i{display:block;height:100%;width:100%;background:var(--gg90);box-shadow:0 0 8px rgba(var(--goldrgb),.55);transform:scaleX(0);transform-origin:left;transition:transform .12s linear}

/* ── problem cards: ghost index + accent ── */
#clz-explore .div-card{padding-top:clamp(30px,3.2vw,42px)}
.div-card>.exp-num{position:absolute;top:18px;right:22px;z-index:1;font-family:var(--fd);font-weight:800;font-size:36px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--wire);transition:-webkit-text-stroke-color .35s,transform .35s}
.div-card:hover>.exp-num{-webkit-text-stroke-color:var(--gold);transform:scale(1.06)}
.div-card>.exp-accent{position:absolute;top:0;left:0;z-index:1;height:3px;width:0;background:var(--gg90);border-radius:0 0 3px 0;transition:width .45s cubic-bezier(.22,.8,.28,1)}
.div-card:hover>.exp-accent{width:58px}

/* ── vision emphasis ── */
.vision .big em{position:relative;display:inline-block}
.vision .big em::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:2px;background:var(--gg90);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.8,.28,1) .3s}
.vision.in .big em::after{transform:scaleX(1)}

/* ── OUR VISION — v2 manifesto ── */
.vsn{position:relative;overflow:hidden}
.vsn-glow{position:absolute;z-index:0;top:48%;left:50%;transform:translate(-50%,-50%);width:min(920px,92%);aspect-ratio:1.7;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--goldrgb),.15),transparent 72%);filter:blur(22px);pointer-events:none;animation:mc2Glow 10s ease-in-out infinite}
.vsn .w{position:relative;z-index:1}
.vsn-inner{max-width:880px;margin:0 auto;text-align:center;position:relative}
.vsn-eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--fb);font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.vsn-eyebrow .ln{width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--goldrgb),.7))}
.vsn-eyebrow .ln.r{background:linear-gradient(90deg,rgba(var(--goldrgb),.7),transparent)}
.vsn-mark{font-family:var(--fd);font-weight:700;font-style:italic;font-size:clamp(88px,12vw,148px);line-height:.55;color:transparent;-webkit-text-stroke:1px rgba(var(--goldrgb),.34);margin:20px 0 -6px;user-select:none;pointer-events:none}
.vsn-h{font-family:var(--fd);font-weight:700;font-size:clamp(34px,5.6vw,70px);line-height:1.01;letter-spacing:-.03em;color:var(--tx)}
.vsn-h .it{font-style:italic;background:var(--gg90);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.vsn-lead{font-family:var(--fd);font-weight:500;font-size:clamp(20px,2.7vw,31px);line-height:1.36;letter-spacing:-.01em;color:var(--t2);max-width:660px;margin:clamp(26px,3.2vw,40px) auto 0;text-wrap:pretty}
.vsn-lead em{font-style:italic;font-weight:600;position:relative;white-space:nowrap;background:var(--gg90);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.vsn-badge{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(30px,3.8vw,46px);padding:9px 18px;border-radius:100px;border:1px solid var(--wire2);background:var(--bg2);font-family:var(--fb);font-size:12.5px;letter-spacing:.02em;color:var(--t3)}
.vsn-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gg);box-shadow:0 0 8px rgba(var(--goldrgb),.6);flex:none}
@media(prefers-reduced-motion:reduce){.vsn-glow{animation:none}}

/* ── MEET CLOZYY — v2 spotlight redesign ── */
.mc2{padding-top:clamp(90px,11vw,150px);padding-bottom:clamp(90px,11vw,150px);position:relative;overflow:hidden}
.mc2 .w{position:relative;z-index:1}
.mc2-aura{position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(42px)}
.mc2-aura.a1{top:-8%;right:-6%;width:min(620px,62%);aspect-ratio:1;background:radial-gradient(closest-side,rgba(var(--goldrgb),.22),transparent 70%);animation:mc2Glow 9s ease-in-out infinite}
.mc2-aura.a2{bottom:-12%;left:-10%;width:min(560px,56%);aspect-ratio:1;background:radial-gradient(closest-side,rgba(var(--goldrgb),.12),transparent 70%);animation:mc2Glow 12s ease-in-out infinite reverse}
.mc2-vtext{position:absolute;z-index:0;top:50%;left:-8px;transform:translateY(-50%);writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--fd);font-weight:700;font-style:italic;font-size:clamp(30px,3.6vw,52px);letter-spacing:.42em;color:transparent;-webkit-text-stroke:1px rgba(var(--goldrgb),.16);pointer-events:none;user-select:none}
@media(max-width:1180px){.mc2-vtext{display:none}}

.mc2-head{max-width:760px;margin:0 auto clamp(30px,4vw,52px);text-align:center}
.mc2-head .lbl{justify-content:center;margin-bottom:18px}
.mc2-h{font-family:var(--fd);font-weight:700;font-size:clamp(40px,6.2vw,84px);line-height:.98;letter-spacing:-.03em}
.mc2-h .out{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px var(--gold);color:transparent;font-style:italic}
.mc2-lead{color:var(--t2);font-size:clamp(15px,1.6vw,18px);max-width:54ch;margin:22px auto 0;text-wrap:pretty}

.mc2-stage{position:relative;display:grid;place-items:center;min-height:clamp(440px,54vw,640px);isolation:isolate;margin-bottom:clamp(56px,7vw,100px)}
.mc2-ghost{position:absolute;z-index:0;font-family:var(--fd);font-weight:800;font-style:italic;font-size:clamp(150px,26vw,340px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(var(--goldrgb),.10);letter-spacing:-.04em;user-select:none;pointer-events:none}
.mc2-ring{position:absolute;border-radius:50%;pointer-events:none}
.mc2-ring.r1{width:min(520px,94%);aspect-ratio:1;border:1.5px dashed rgba(var(--goldrgb),.30);animation:mc2Spin 54s linear infinite}
.mc2-ring.r2{width:min(370px,66%);aspect-ratio:1;border:1px dashed rgba(var(--goldrgb),.20);animation:mc2Spin 40s linear infinite reverse}
.mc2-img{position:relative;z-index:2;width:min(540px,94%);filter:drop-shadow(0 44px 74px rgba(0,0,0,.6));animation:mc2Float 8s ease-in-out infinite}
.mc2-img img{display:block;width:100%;height:auto;aspect-ratio:960/1106;object-fit:contain;-webkit-mask:radial-gradient(122% 122% at 50% 46%,#000 56%,transparent 86%);mask:radial-gradient(122% 122% at 50% 46%,#000 56%,transparent 86%)}
.mc2-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:100px;background:rgba(61,46,34,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(var(--goldrgb),.3);font-family:var(--fb);font-size:12.5px;color:var(--t2);white-space:nowrap;box-shadow:0 16px 34px -16px rgba(0,0,0,.65);animation:mc2Float 6.5s ease-in-out infinite}
.mc2-chip b{font-family:var(--fd);font-weight:700;font-size:16px;color:var(--gold)}
.mc2-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(var(--goldrgb),.9);flex:none}
.mc2-chip.c1{top:9%;left:0%;animation-delay:-1s}
.mc2-chip.c2{top:26%;right:-1%;animation-delay:-3.4s}
.mc2-chip.c3{bottom:15%;left:5%;animation-delay:-2.1s}
.mc2-spark{position:absolute;z-index:4;color:var(--gold);pointer-events:none;animation:clzTwinkle 3.6s ease-in-out infinite}
.mc2-spark svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 6px rgba(var(--goldrgb),.7))}
.mc2-spark.s1{width:22px;height:22px;top:8%;right:24%;animation-delay:-.5s}
.mc2-spark.s2{width:15px;height:15px;bottom:20%;right:16%;animation-delay:-2s}
@media(max-width:820px){.mc2-chip,.mc2-spark{display:none}}

.mc2-track{position:relative;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){
  .mc2-track{grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
  .mc2-track::before{content:"";position:absolute;top:47px;left:16%;right:16%;height:1px;background:repeating-linear-gradient(90deg,rgba(var(--goldrgb),.42) 0 6px,transparent 6px 15px);z-index:0}
}
.mc2-step{position:relative;z-index:1;padding:clamp(22px,2.4vw,30px);border-radius:18px;background:linear-gradient(160deg,rgba(61,46,34,.5),rgba(46,33,25,.28));border:1px solid var(--wire2);transition:transform .42s cubic-bezier(.22,.8,.28,1),border-color .42s,box-shadow .42s}
.mc2-step:hover{transform:translateY(-8px);border-color:rgba(var(--goldrgb),.55);box-shadow:0 32px 62px -28px rgba(0,0,0,.72)}
.mc2-num{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bg2);border:1px solid var(--wire2);font-family:var(--fd);font-weight:800;font-size:21px;color:var(--gold);margin-bottom:18px;transition:background .42s,color .42s,transform .42s,border-color .42s}
.mc2-step:hover .mc2-num{background:var(--gg);color:var(--onacc);border-color:transparent;transform:scale(1.08)}
.mc2-st{font-family:var(--fd);font-weight:700;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.mc2-st svg{width:22px;height:22px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .4s}
.mc2-step:hover .mc2-st svg{transform:rotate(-8deg) scale(1.12)}
.mc2-st .lk{stroke-dasharray:3 4}
.mc2-sd{color:var(--t2);font-size:14px;line-height:1.62;margin-top:11px;text-wrap:pretty}
.mc2-step.locked{border-style:dashed;border-color:rgba(var(--goldrgb),.42)}
.mc2-step.locked .mc2-num{background:transparent}
@keyframes mc2Spin{to{transform:rotate(360deg)}}
@keyframes mc2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes mc2Glow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.mc2-ring,.mc2-img,.mc2-chip,.mc2-aura,.mc2-spark{animation:none}}

/* At phone widths the three hero feature labels break mid-phrase across three
   lines in a 3-up row ("Smart / Scan / In / Seconds"). Stack them instead;
   unchanged at every width above this. */
@media(max-width:520px){
  .clz-feats{flex-direction:column}
  .clz-feat{padding:10px 16px}
  .clz-feat+.clz-feat{border-left:none;border-top:1px solid var(--wire2)}
}

/* FAQ + signup ─ one blush section, two columns: the questions on the left, the
   form beside them so the CTA is never scrolled away. Not from the design canvas.
   Native <details> so the accordion needs no JS (script-src is 'self', no
   'unsafe-inline') and
   every answer sits in the DOM for crawlers even while collapsed. name="clz-faq"
   makes it exclusive where supported and degrades to independent toggles where not.

   Surfaces use --bg, NOT --card: in the dark palette --card and --blush are both
   #3D2E22, so a card here would be exactly its own background. --bg contrasts in
   both themes (lighter on blush in light, darker in dark). */
#clz-faq .sec-head{max-width:none;margin-bottom:clamp(26px,3vw,38px)}
#clz-faq .sec-h{font-size:clamp(28px,3.2vw,40px)}
#clz-faq .sec-lead{margin-top:16px;font-size:15.5px}
.faq{display:flex;flex-direction:column;gap:14px}
.faq-i{background:var(--bg);border:1px solid var(--wire2);border-radius:var(--r);transition:border-color .3s,box-shadow .3s,background .3s}
.faq-i:hover{border-color:rgba(var(--goldrgb),.4)}
.faq-i[open]{border-color:rgba(var(--goldrgb),.45);background:linear-gradient(0deg,rgba(var(--goldrgb),.07),rgba(var(--goldrgb),.07)),var(--bg);box-shadow:0 20px 44px -26px rgba(var(--goldrgb),.5)}
.faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px);cursor:pointer;list-style:none}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;border-radius:var(--r)}
.faq-q{font-family:var(--fd);font-weight:700;font-size:clamp(17px,1.9vw,21px);line-height:1.3;letter-spacing:-.01em;color:var(--tx)}
.faq-ico{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--gold);background:rgba(var(--goldrgb),.10);border:1px solid var(--wire2);transition:transform .3s cubic-bezier(.22,.8,.28,1),background .3s}
.faq-ico svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.faq-i[open] .faq-ico{transform:rotate(135deg);background:rgba(var(--goldrgb),.18)}
.faq-a{padding:0 clamp(20px,2.4vw,28px) clamp(20px,2.4vw,26px)}
.faq-a p{color:var(--t2);font-size:15.2px;line-height:1.7;max-width:64ch}
.faq-a p+p{margin-top:12px}
.faq-a a{color:var(--gold);border-bottom:1px solid var(--wire)}
.faq-a a:hover{border-bottom-color:var(--gold)}
/* Two columns above 1000px, stacked below — the same breakpoint the nav collapses at.
   align-items:start is what lets the form column stick rather than stretch. */
.ea-split{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,72px);align-items:start}
@media(min-width:1001px){
  .ea-split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,4.5vw,68px)}
  .ea-col-f{position:sticky;top:116px}
}
#clz-faq .form{background:var(--bg);max-width:none;margin:0}
#clz-faq .field input[type=text],#clz-faq .field input[type=email]{background:var(--card)}
#clz-faq .pcard{background:var(--bg);max-width:none;margin:0}

/* ── legal pages (/privacy/, /terms/) and /404.html ──────────────
   These carry the same nav and footer as the home page but no hero, so they
   need their own top padding to clear the fixed 92px header. Ported from the
   stylesheet when CLOZYY became the whole site; the tokens are CLOZYY's,
   so the rules are the same shapes in a different palette. */

.page-head{padding:clamp(146px,16vw,180px) 0 clamp(34px,5vw,56px)}
.legal{max-width:820px;margin:0 auto;padding:0 var(--pad) clamp(70px,9vw,120px)}
.legal h1{font-family:var(--fd);font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:-.02em}
.legal h2{font-family:var(--fd);font-weight:600;font-size:clamp(19px,2.2vw,23px);line-height:1.22;margin:40px 0 12px;color:var(--tx)}
.legal h3{font-family:var(--fb);font-weight:600;font-size:16px;margin:24px 0 8px;color:var(--tx)}
.legal p,.legal li{color:var(--t2);font-size:15.5px}
.legal ul{margin:12px 0 0 22px;display:flex;flex-direction:column;gap:8px}
/* The reset zeroes every margin, so consecutive blocks in a policy would run
   together without this. h2/h3/ul carry their own top margin already. */
.legal p+p,.legal ul+p{margin-top:14px}
.legal a{color:var(--gold);border-bottom:1px solid var(--wire)}
.legal a:hover{border-bottom-color:var(--gold)}
.legal strong{color:var(--tx);font-weight:600}
.legal em{font-style:normal;font-weight:600}
.updated{color:var(--t3);font-size:14px;margin:14px 0 44px}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);background:rgba(var(--goldrgb),.10);
  border:1px solid var(--wire2);border-radius:999px;padding:7px 15px;margin-bottom:22px;
}
/* The legal pages reuse .pcard for plain-language summaries. These are left-aligned
   notes rather than the centred confirmation card on the home page. Summary cards
   follow body copy, hence the top margin. */
.legal .pcard{text-align:left;margin:34px 0 40px;max-width:none}
.legal .pcard .eyebrow{margin-bottom:14px}
.legal .pcard .hint{margin:0;max-width:none}
.legal .pcard ul{margin-top:0}
.nf{min-height:78vh;display:grid;place-items:center;text-align:center;padding:150px var(--pad) 90px}
.nf .code{
  font-family:var(--fd);font-weight:800;font-size:clamp(84px,18vw,190px);line-height:1;
  background:var(--gg);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.nf h1{font-family:var(--fd);font-weight:700;font-size:clamp(24px,3.6vw,40px);line-height:1.15;margin:18px 0 16px;letter-spacing:-.02em}
.nf p{color:var(--t2);max-width:52ch;margin:0 auto 34px}
.nf .clz-cta{justify-content:center}