/* Shared tokens — mirrors quoterite.com design.md (shadcn HSL) */
:root{
  --bg:hsl(0 0% 100%); --ink:hsl(220 20% 10%); --muted:hsl(220 14% 96%); --muted-fg:hsl(220 10% 46%);
  --primary:hsl(195 100% 43%); --primary-dark:hsl(195 100% 35%); --primary-soft:hsl(195 100% 43% / .10);
  --surface-dark:hsl(220 25% 10%); --surface-dark-2:hsl(220 22% 14%); --border:hsl(220 13% 91%); --border-dark:hsl(220 15% 22%);
  --radius:.75rem; --ease:cubic-bezier(.16,1,.3,1);
  --grad-indigo-dark:hsl(235 45% 35%); --grad-indigo:hsl(230 55% 50%); --grad-blue:hsl(210 80% 60%); --grad-sky:hsl(195 90% 65%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(1200px,calc(100% - 2.5rem));margin-inline:auto}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
.mockbar{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;font-size:12px;padding:8px 16px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.mockbar b{color:var(--grad-sky)} .mockbar a{text-decoration:underline;text-underline-offset:3px;opacity:.85} .mockbar a:hover{opacity:1}
.nav{position:sticky;top:34px;z-index:50;background:hsl(0 0% 100% / .92);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav img{height:28px}
.nav ul{display:flex;gap:28px;list-style:none;font-size:14px;font-weight:500;color:var(--muted-fg)}
.nav ul a:hover{color:var(--ink)} .nav ul .on{color:var(--ink);font-weight:600}
.nav.dark{background:hsl(220 25% 10% / .85);border-color:var(--border-dark);color:#fff}
.nav.dark ul{color:hsl(220 10% 70%)} .nav.dark ul .on,.nav.dark ul a:hover{color:#fff}
@media(max-width:900px){.nav ul{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .2s var(--ease),background-color .2s,box-shadow .2s;min-height:44px}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 20px -8px hsl(195 100% 43% / .6)} .btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{border:1.5px solid var(--border);color:var(--ink);background:#fff} .btn-ghost:hover{border-color:var(--ink)}
.btn-ghost.on-dark{border-color:hsl(0 0% 100% / .25);color:#fff;background:transparent} .btn-ghost.on-dark:hover{border-color:#fff}
.btn svg{width:16px;height:16px;transition:transform .2s} .btn:hover svg.arrow{transform:translateX(3px)}
.btn-sm{padding:9px 16px;font-size:14px;min-height:40px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
h1{font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.4rem,5.4vw,4.5rem)}
h2{font-weight:800;letter-spacing:-.025em;line-height:1.08;font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--muted-fg);max-width:56ch}
.seg{display:inline-flex;align-items:center;background:var(--muted);border-radius:999px;padding:4px;position:relative;gap:2px}
.seg button{position:relative;z-index:1;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted-fg);transition:color .25s;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.seg button[aria-pressed="true"]{color:#fff}
.seg .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:var(--ink);box-shadow:0 4px 14px -4px hsl(220 20% 10% / .5);transition:transform .45s var(--ease),width .45s var(--ease)}
.seg .count{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:hsl(220 13% 88%);color:var(--muted-fg)}
.seg button[aria-pressed="true"] .count{background:hsl(0 0% 100% / .18);color:#fff}
.seg.dark{background:hsl(220 20% 18%)} .seg.dark .thumb{background:var(--primary)} .seg.dark button{color:hsl(220 10% 70%)}
.chip{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;background:var(--muted);color:var(--ink);white-space:nowrap}
.chip.blue{background:var(--primary-soft);color:var(--primary-dark)}
.pill-filter{display:flex;gap:8px;flex-wrap:wrap}
.pill-filter button{padding:8px 14px;border-radius:999px;border:1.5px solid var(--border);font-size:13px;font-weight:600;color:var(--muted-fg);transition:border-color .2s,color .2s,background .2s;min-height:40px}
.pill-filter button:hover{border-color:var(--ink);color:var(--ink)}
.pill-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.logo{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.logo img{max-width:78%;max-height:70%;object-fit:contain}
.logo .ini{font-weight:800;letter-spacing:-.02em;color:var(--primary)}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted-fg)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px hsl(195 100% 43% / .18)}
.status.rolling i{background:hsl(220 10% 60%);box-shadow:0 0 0 3px hsl(220 10% 60% / .2)}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv,.stagger>*{transform:none}}
.drawer-bg{position:fixed;inset:0;background:hsl(220 20% 10% / .45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:#fff;z-index:90;transform:translateX(102%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s;overflow-y:auto;box-shadow:-20px 0 60px -30px hsl(220 20% 10% / .4)}
body.drawer-open .drawer{transform:none;visibility:visible;transition:transform .5s var(--ease)} body.drawer-open .drawer-bg{opacity:1;pointer-events:auto}
.drawer .inner{padding:28px}
.drawer .close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--muted);display:grid;place-items:center} .drawer .close:hover{background:var(--border)}
.drawer dl{display:grid;grid-template-columns:110px 1fr;gap:10px 16px;font-size:14px;margin:20px 0}
.drawer dt{color:var(--muted-fg);font-weight:500} .drawer dd{font-weight:600}
.drawer .contact{background:var(--muted);border-radius:var(--radius);padding:18px;display:grid;gap:12px;font-size:14px}
.drawer .contact a{display:flex;align-items:center;gap:10px;font-weight:600;min-height:44px} .drawer .contact a:hover{color:var(--primary)}
.drawer .contact svg{width:18px;height:18px;color:var(--primary);flex:none}
.foot{background:var(--surface-dark);color:hsl(220 10% 70%);padding:56px 0 32px;font-size:14px}
.foot .grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px}
.foot h4{color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.foot li{list-style:none;margin:8px 0} .foot a:hover{color:#fff} .foot img{height:26px;margin-bottom:16px}
@media(max-width:800px){.foot .grid{grid-template-columns:1fr 1fr}}
.hero-gradient{background:linear-gradient(135deg,var(--grad-indigo-dark),var(--grad-indigo) 35%,var(--grad-blue) 70%,var(--grad-sky));color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:640px){.seg{display:flex;width:100%}.seg button{flex:1;justify-content:center;padding:10px 8px;font-size:13px;gap:5px}.seg .count{padding:2px 5px;font-size:10px}.pill-filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;max-width:100%}.pill-filter::-webkit-scrollbar{display:none}}