@font-face { font-family:'Satoshi'; src:url('/assets/fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/Satoshi-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/Satoshi-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --ink: #000;
  --warm: #2E2828;
  --mut: #6E6868;
  --band: #FAF8F4;
  --panel: #F4F1EC;
  --line: #E7E2DC;
  --line2: #EFEBE5;
  --yellow: #FEDA16;
  --orange: #EA652C;
  --orange2: #F08518;
  --pink: #FBD3CF;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Satoshi', -apple-system, sans-serif; color:var(--ink); background:#fff; line-height:1.65; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1 { font-size:clamp(38px, 6vw, 60px); font-weight:700; line-height:1.1; letter-spacing:-0.02em; }
h2 { font-size:clamp(26px, 4vw, 36px); font-weight:700; line-height:1.2; letter-spacing:-0.01em; }
h3 { font-size:19px; font-weight:700; margin-bottom:8px; }
.mut { color:var(--mut); }
.small { font-size:13px; }
.narrow { max-width:520px; margin:12px auto 24px; }
.center { text-align:center; }
.accent { color:var(--orange); }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--orange); margin-bottom:10px; }

.btn { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; padding:11px 20px; border-radius:10px; transition:transform .12s ease, opacity .12s ease; }
.btn:hover { transform:translateY(-1px); opacity:.92; }
.btn-solid { background:var(--ink); color:#fff; }
.btn-outline { border:1px solid #D8D2CC; background:#fff; color:var(--ink); font-weight:500; }
.btn-lg { font-size:16px; padding:14px 26px; }
.btn-block { display:flex; justify-content:center; width:100%; font-size:14px; padding:10px 0; }

.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:28px; padding:14px clamp(20px, 5vw, 56px); background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line2); }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { width:48px; height:48px; }
.brand-name { font-size:18px; font-weight:700; }
.nav-links { display:flex; gap:22px; font-size:14px; font-weight:500; color:var(--warm); margin-left:8px; }
.nav-links a:hover { color:var(--orange); }
.nav-ctas { margin-left:auto; display:flex; gap:10px; }

.hero { background:var(--band); text-align:center; padding:clamp(56px, 9vw, 96px) 20px 0; }
.badge { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); font-size:13px; color:var(--warm); padding:6px 16px; border-radius:999px; margin-bottom:24px; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-yellow { background:var(--yellow); }
.dot-orange { background:var(--orange); }
.sub { font-size:clamp(16px, 2vw, 19px); color:var(--mut); max-width:560px; margin:20px auto 28px; }
.hero-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.tabs { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; max-width:780px; margin:56px auto 0; }
.tab { font-family:inherit; font-size:14px; font-weight:500; color:var(--mut); background:#fff; border:1px solid var(--line2); border-bottom:none; border-radius:10px 10px 0 0; padding:13px 8px; cursor:pointer; }
.tab.is-active { color:var(--ink); font-weight:700; border:1px solid var(--line); border-bottom:3px solid var(--ink); }

.window { display:grid; grid-template-columns:220px 1fr; max-width:780px; margin:0 auto; background:#fff; border:1px solid var(--line); border-bottom:none; border-radius:16px 16px 0 0; overflow:hidden; text-align:left; }
.window-side { border-right:1px solid var(--line2); padding:18px; font-size:13px; color:var(--mut); }
.side-title { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.side-agent { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; color:var(--warm); margin-bottom:4px; }
.side-agent.is-on { background:var(--panel); }
.side-agent img { width:25px; height:25px; }
.side-mem { line-height:1.8; }
.window-side .side-title:nth-of-type(2) { margin-top:18px; }
.window-main { padding:18px; }
.call-row { display:flex; align-items:center; gap:10px; border:1px solid var(--line2); border-radius:10px; padding:11px 14px; margin-bottom:8px; font-size:14px; }
.call-tag { display:inline-flex; align-items:center; gap:6px; background:var(--panel); color:var(--warm); font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.call-meta { margin-left:auto; font-size:12px; color:var(--mut); white-space:nowrap; }
.call-meta.is-live { color:var(--orange); font-weight:700; }

.sect { padding:clamp(56px, 8vw, 88px) clamp(20px, 5vw, 56px); max-width:1140px; margin:0 auto; }
.band { background:var(--band); max-width:none; }
.band > * { max-width:1028px; margin-left:auto; margin-right:auto; }
.band h2 { margin-bottom:18px; }

.flock-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:760px; margin:36px auto 0; }
.flock-art { border-radius:18px; overflow:hidden; height:440px; display:flex; align-items:center; justify-content:center; }
.flock-art img { width:100%; height:100%; object-fit:contain; }
.flock-cap { text-align:center; font-size:14px; color:var(--mut); margin-top:12px; }

.three-col { display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; }
.two-col { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }

.chips { margin-top:16px; }
.chip { display:inline-block; background:#fff; border:1px solid var(--line); color:var(--warm); font-size:14px; padding:7px 16px; border-radius:999px; margin:4px 3px; }

.code { background:var(--warm); color:#EDEAE5; border-radius:14px; padding:24px; font-family:ui-monospace, 'SF Mono', Menlo, monospace; font-size:14px; line-height:2; overflow-x:auto; }
.code .dim { color:#8A8A8A; }
.code .str { color:var(--orange2); }

.price-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:36px; }
.price-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 20px; display:flex; flex-direction:column; }
.price-card.is-featured { border:2px solid var(--ink); }
.flag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--yellow); color:var(--warm); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 14px; border-radius:999px; white-space:nowrap; }
.price { font-size:30px; font-weight:700; margin:4px 0 14px; }
.price span { font-size:14px; color:var(--mut); font-weight:400; }
.price-card ul { list-style:none; font-size:14px; color:var(--mut); line-height:2; flex:1; margin-bottom:18px; }
.price-card li::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--yellow); margin-right:10px; vertical-align:2px; }

.footer { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding:clamp(40px, 6vw, 64px) clamp(20px, 5vw, 56px); background:var(--band); border-top:1px solid var(--line2); max-width:none; }
.footer .brand { margin-bottom:12px; }
.foot-col p { font-weight:700; font-size:14px; margin-bottom:10px; }
.foot-col a { display:block; font-size:14px; color:var(--warm); margin-bottom:8px; }
.foot-col a:hover { color:var(--orange); }

#duckfall { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:90; }
.fall { position:absolute; top:-12vh; will-change:transform; animation:duckfall linear infinite; }
.fall img { width:100%; height:auto; }
.fall .sway { display:block; animation:ducksway ease-in-out infinite alternate; }
@keyframes duckfall {
  from { transform:translateY(0) rotate(-8deg); }
  to { transform:translateY(124vh) rotate(8deg); }
}
@keyframes ducksway {
  from { transform:translateX(-18px) rotate(-10deg); }
  to { transform:translateX(18px) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  #duckfall { display:none; }
}

@media (max-width: 900px) {
  .nav-links { display:none; }
  .three-col { grid-template-columns:1fr; gap:28px; }
  .two-col { grid-template-columns:1fr; gap:28px; }
  .price-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .nav { gap:12px; }
  .nav-ctas .btn-outline { display:none; }
  .tabs { grid-template-columns:repeat(2, 1fr); }
  .tab { border-radius:10px; border-bottom:1px solid var(--line2); }
  .tab.is-active { border-bottom:3px solid var(--ink); }
  .window { grid-template-columns:1fr; }
  .window-side { display:none; }
  .flock-grid { grid-template-columns:1fr; max-width:380px; }
  .price-grid { grid-template-columns:1fr; }
  .footer { grid-template-columns:1fr; }
}