@font-face{font-family:"Poppins";src:url(fonts/poppins-medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-bold.woff) format("woff");font-weight:700;font-display:swap}

:root{
  --sky:#BFE6FF; --sky-soft:#E6F5FF; --ink:#1D2357; --ink-soft:#3A4178;
  --gold:#F2B54A; --gold-deep:#C47A22; --berry:#FF6B9A;
  --bg:#FFFFFF; --panel:#F3F8FF; --text:#1D2357; --muted:#4D5486; --line:#DCE6F5;
  --card:#FFFFFF; --hero:#BFE6FF; --hero-text:#1D2357;
  --display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141833; --panel:#1C2146; --text:#EEF2FF; --muted:#AAB2DC; --line:#2E3566;
  --card:#1C2146; --hero:#1C2146; --hero-text:#EEF2FF; color-scheme:dark;
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--berry);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:10;background:var(--bg);padding:8px 12px}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 20px/1 var(--display);letter-spacing:-.01em}
.logo img{width:36px;height:36px}
.bar nav{display:flex;gap:20px;font:500 15px var(--display)}
.bar nav a{text-decoration:none;color:var(--muted)}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--text)}

/* type */
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,6vw,64px);font-weight:700}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:12px}
h3{font-size:20px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:36em;margin:18px 0 0;text-wrap:pretty}
section{padding:80px 0}
.section-intro{color:var(--muted);max-width:40em;margin:0 0 36px}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font:500 16px var(--display);text-decoration:none;border:2px solid var(--ink);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--hero-text);border-color:currentColor}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{background:var(--gold);border-color:var(--gold);color:#1D2357}}
.btn[aria-disabled="true"]{opacity:.65;cursor:default;transform:none}
.small-note{font-size:14px;color:var(--muted);margin-top:12px}

/* footer */
footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:18px}

/* ---------- hub (zeygner.com) ---------- */
.hub-hero{padding:72px 0 40px}
.wordmark{font:700 clamp(56px,11vw,128px)/.95 var(--display);letter-spacing:-.045em;margin:0}
.wordmark span{color:var(--gold-deep)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wordmark span{color:var(--gold)}}
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.project{position:relative;display:flex;gap:20px;align-items:center;padding:24px;border-radius:24px;background:var(--hero);color:var(--hero-text);text-decoration:none;transition:transform .15s}
.project:hover{transform:translateY(-2px)}
.project img{width:96px;height:96px;flex-shrink:0}
.project p{margin:0;color:inherit;opacity:.85}
.project .tag{display:inline-block;margin-top:10px;font:500 13px var(--display);padding:3px 10px;border-radius:999px;background:var(--bg);color:var(--text)}
.project.soon{background:transparent;border:2px dashed var(--line);color:var(--muted)}
.project.soon .dot{width:96px;height:96px;flex-shrink:0;border-radius:24px;border:2px dashed var(--line);display:grid;place-items:center;font:700 34px var(--display)}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ---------- zoomie ---------- */
.z-hero{background:var(--hero);color:var(--hero-text);border-radius:0 0 40px 40px;padding-bottom:72px}
.z-hero .lead{color:inherit;opacity:.8}
.z-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-top:28px}
.byline{display:flex;align-items:center;gap:12px;font:500 15px var(--display);margin-bottom:18px}
.byline img{width:52px;height:52px}
.loupe-demo{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 0 0 8px #fff;cursor:none;touch-action:none;aspect-ratio:3/2;background:#7FB7D9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .loupe-demo{box-shadow:0 0 0 8px var(--panel)}}
.loupe-demo img{width:100%;height:100%;object-fit:cover}
.lens{position:absolute;width:170px;height:170px;border-radius:50%;border:7px solid var(--ink);box-shadow:0 0 0 3px #fff inset;background-repeat:no-repeat;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}
.lens::after{content:"";position:absolute;right:-30px;bottom:-30px;width:44px;height:15px;border-radius:9px;background:var(--ink);transform:rotate(45deg)}
.loupe-demo.active .lens{opacity:1}
.loupe-hint{position:absolute;left:14px;bottom:14px;padding:7px 14px;border-radius:999px;background:#fffffff0;color:#1D2357;font:500 14px var(--display);pointer-events:none;transition:opacity .2s}
.loupe-demo.active .loupe-hint{opacity:0}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.feature{padding:24px;border-radius:22px;background:var(--panel)}
.feature p{margin:0;color:var(--muted)}
.feature svg{width:34px;height:34px;margin-bottom:12px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.shots{display:grid;gap:28px}
.shots figure{margin:0}
.shots img{border-radius:20px;border:1px solid var(--line)}
.shots figcaption{margin-top:10px;color:var(--muted);font-size:15px}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;counter-reset:s}
.steps li{counter-increment:s;padding:24px;border-radius:22px;border:2px solid var(--line)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#1D2357;font:700 18px var(--display);margin-bottom:12px}
.steps p{margin:0;color:var(--muted)}

.keys-table{width:100%;border-collapse:collapse;max-width:720px}
.keys-table th,.keys-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.keys-table th{font:500 14px var(--display);color:var(--muted)}
kbd{display:inline-block;font:600 13px/1 system-ui,sans-serif;min-width:26px;text-align:center;padding:5px 7px;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:7px;background:var(--card);color:var(--text)}

.privacy-band{display:flex;gap:28px;align-items:center;padding:36px;border-radius:28px;background:var(--panel)}
.privacy-band img{width:110px;height:110px;flex-shrink:0}
.privacy-band p{margin:8px 0 0;color:var(--muted)}

details.faq{border-bottom:1px solid var(--line);padding:16px 0;max-width:780px}
details.faq summary{cursor:pointer;font:500 18px var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--muted)}
details.faq[open] summary::after{content:"–"}
details.faq p{color:var(--muted);margin:10px 0 0}

.disclaimer{font-size:14px;color:var(--muted)}

/* ---------- legal ---------- */
.legal{max-width:720px;padding:40px 0 80px}
.legal h1{font-size:clamp(34px,5vw,48px);margin-bottom:8px}
.legal h2{font-size:22px;margin:36px 0 8px}
.legal .updated{color:var(--muted);margin:0 0 24px}
.legal ul{padding-left:22px}

@media (max-width:820px){
  .z-grid{grid-template-columns:1fr}
  section{padding:60px 0}
  .privacy-band{flex-direction:column;align-items:flex-start;padding:28px}
  .bar nav{gap:14px}
}
@media (max-width:420px){.bar nav a.hide-sm{display:none}}