/* ============================================================
   Craveva — Marketing site shared styles
   Built on the Craveva Design System tokens (warm vintage-kitchen).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Mono:wght@400;700&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

@font-face{
  font-family:'Grouch BT';
  src:url('assets/grouch.ttf') format('truetype');
  font-weight:400 700; font-style:normal; font-display:swap;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
html[data-lang="zh"]{ --font-sans:'Noto Sans TC','Mulish',system-ui,sans-serif; }
body{
  margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-md); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(120% 60% at 88% -8%, rgba(230,161,75,0.10), transparent 55%),
    radial-gradient(70% 50% at -5% 102%, rgba(133,124,93,0.08), transparent 60%);
  background-attachment:fixed;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* lang visibility helpers */
.en-only{ display:none; } html[data-lang="en"] .en-only{ display:inline; }
.zh-only{ display:none; } html[data-lang="zh"] .zh-only{ display:inline; }

/* ---------- layout ---------- */
.container{ max-width:var(--container-xl); margin:0 auto; padding:0 40px; }
.container--md{ max-width:var(--container-lg); }
.section{ padding:104px 0; position:relative; }
.section--tight{ padding:72px 0; }
.section--dark{ background:var(--brown-900); color:var(--cream-100); }
.section--surface{ background:var(--bg-surface); }
.section--olive{ background:var(--olive-800); color:var(--cream-100); }

/* eyebrow / heading rhythm */
.eyebrow{
  font:var(--type-eyebrow); letter-spacing:var(--tracking-wider); text-transform:uppercase;
  color:var(--text-accent); display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
}
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--amber-700); }
.eyebrow.center{ justify-content:center; }
.section--dark .eyebrow, .section--olive .eyebrow{ color:var(--amber-300); }
.section--dark .eyebrow::before, .section--olive .eyebrow::before{ background:var(--amber-300); }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:var(--tracking-tight); margin:0; }
.h-display{ font-size:var(--text-6xl); line-height:var(--leading-none); }
.h1{ font-size:var(--text-5xl); line-height:var(--leading-tight); }
.h2{ font-size:var(--text-4xl); line-height:var(--leading-tight); }
.h3{ font-size:var(--text-2xl); line-height:var(--leading-snug); }
.lede{ font-size:var(--text-xl); line-height:var(--leading-relaxed); color:var(--text-secondary); margin:0; }
.section--dark .lede, .section--olive .lede{ color:var(--cream-300); }
.muted{ color:var(--text-muted); }
.sec-head{ max-width:780px; margin-bottom:56px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:1.5px solid transparent;
  font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-base);
  padding:14px 26px; border-radius:var(--radius-pill); transition:all var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn--primary{ background:var(--amber-500); color:var(--text-on-accent); }
.btn--primary:hover{ background:var(--amber-700); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn--ghost{ background:transparent; border-color:var(--border-strong); color:var(--text-secondary); }
.btn--ghost:hover{ border-color:var(--amber-500); color:var(--text-accent); }
.btn--light{ background:var(--cream-50); color:var(--text-primary); }
.btn--light:hover{ background:var(--cream-100); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn:active{ transform:scale(.985); }
.btn--lg{ padding:17px 34px; font-size:var(--text-md); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; height:var(--header-height);
  display:flex; align-items:center; background:rgba(244,238,225,0.82);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--border-subtle);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:30px; }
.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  font-weight:var(--weight-semibold); font-size:var(--text-base); color:var(--text-secondary);
  padding:9px 15px; border-radius:var(--radius-pill); transition:all var(--dur-fast) var(--ease-out);
}
.nav a:hover{ color:var(--text-primary); background:var(--bg-surface-hover); }
.nav a.active{ color:var(--text-accent); }
.header-right{ display:flex; align-items:center; gap:14px; }
.login-link{ font-weight:var(--weight-semibold); font-size:var(--text-base); color:var(--text-secondary); padding:9px 8px; border-radius:var(--radius-pill); transition:color var(--dur-fast) var(--ease-out); white-space:nowrap; }
.login-link:hover{ color:var(--text-accent); }
@media (max-width:820px){ .login-menu{ display:none; } }
.login-menu{ position:relative; }
.login-menu > .login-link{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; cursor:pointer; font-family:inherit; }
.login-menu > .login-link::after{ content:"⌄"; font-size:14px; line-height:1; margin-top:-4px; }
.login-dd{ position:absolute; top:calc(100% + 8px); right:0; min-width:236px; background:var(--cream-50); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:6px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); z-index:80; }
.login-menu:hover .login-dd, .login-menu:focus-within .login-dd{ opacity:1; visibility:visible; transform:none; }
.login-dd a{ display:block; padding:11px 13px; border-radius:var(--radius-md); color:var(--text-secondary); }
.login-dd a:hover{ background:var(--bg-surface-hover); }
.login-dd a b{ display:block; font-size:var(--text-base); color:var(--text-primary); font-weight:var(--weight-bold); }
.login-dd a span{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-muted); letter-spacing:.04em; }

/* lang toggle */
.lang{ display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-pill); overflow:hidden; background:var(--cream-50); }
.lang button{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.06em;
  padding:8px 14px; border:0; background:transparent; color:var(--text-muted); cursor:pointer; transition:var(--dur-fast);
}
.lang button.on{ background:var(--amber-500); color:#fff; }

.menu-btn{ display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--text-primary); }
.menu-btn svg{ width:26px; height:26px; }

/* ---------- hero ---------- */
.hero{ padding:96px 0 84px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.hero h1{ font-size:var(--text-6xl); line-height:0.98; margin:0 0 26px; max-width:14ch; }
.hero .lede{ max-width:52ch; margin-bottom:34px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note{ margin-top:22px; font:var(--type-mono); color:var(--text-muted); letter-spacing:.04em; }
.hero-note b{ color:var(--text-secondary); }

/* hero visual — stacked product abstraction */
.hero-art{ position:relative; }
.hero-card{
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl); padding:30px; position:relative; z-index:2;
}
.hero-card-row{ display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:var(--radius-md); background:var(--cream-100); margin-bottom:12px; }
.hero-card-row:last-child{ margin-bottom:0; }
.hero-card-row .ic{ width:42px; height:42px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; background:var(--amber-100); color:var(--amber-700); }
.hero-card-row b{ display:block; font-size:var(--text-base); color:var(--text-primary); }
.hero-card-row span{ font:var(--type-mono); font-size:var(--text-2xs); color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; }
.hero-card-row .val{ margin-left:auto; font:var(--type-mono); font-size:var(--text-sm); color:var(--herb-500); font-weight:700; }
.hero-badge{ position:absolute; z-index:3; background:var(--brown-900); color:var(--cream-100); border-radius:var(--radius-lg); padding:14px 18px; box-shadow:var(--shadow-lg); }
.hero-badge .ti{ font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--amber-300); margin-bottom:3px; }
.hero-badge .tv{ font-family:var(--font-display); font-size:var(--text-2xl); }
.hero-badge--tl{ top:-26px; left:-30px; }
.hero-badge--br{ bottom:-24px; right:-26px; }

/* trust strip */
.trust{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; padding-top:30px; margin-top:46px; border-top:1px solid var(--border-subtle); }
.trust .lbl{ font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); line-height:1.5; }
.trust .lbl b{ color:var(--text-secondary); }
.tstat{ display:flex; flex-direction:column; gap:2px; }
.tstat b{ font-family:var(--font-display); font-size:var(--text-3xl); color:var(--text-accent); line-height:1; }
.tstat span{ font-size:var(--text-sm); color:var(--text-muted); }

/* ---------- generic grids ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* feature / generic card */
.card{
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:30px; box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card.lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card .ci{ width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:24px; background:var(--amber-100); color:var(--amber-700); margin-bottom:18px; }
.card h3{ font-family:var(--font-sans); font-weight:var(--weight-extrabold); font-size:var(--text-xl); margin:0 0 10px; letter-spacing:-.01em; }
.card p{ margin:0; color:var(--text-secondary); font-size:var(--text-base); line-height:1.55; }
.card .num{ font:var(--type-mono); font-size:var(--text-sm); color:var(--text-accent); margin-bottom:10px; display:block; }
.section--dark .card, .section--olive .card{ background:rgba(255,252,246,0.05); border-color:rgba(232,221,211,0.14); }
.section--dark .card h3, .section--olive .card h3{ color:var(--cream-50); }
.section--dark .card p, .section--olive .card p{ color:var(--cream-300); }

/* checklist within card */
.ticks{ list-style:none; margin:14px 0 0; padding:0; }
.ticks li{ position:relative; padding:7px 0 7px 26px; font-size:var(--text-base); color:var(--text-secondary); }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:7px; color:var(--amber-500); font-weight:800; }
.section--dark .ticks li, .section--olive .ticks li{ color:var(--cream-300); }

/* pill chips */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font:var(--type-mono); font-size:var(--text-xs); letter-spacing:.04em; padding:8px 14px; border-radius:var(--radius-pill);
  background:var(--cream-100); border:1px solid var(--border-subtle); color:var(--text-secondary);
}
.section--dark .chip, .section--olive .chip{ background:rgba(255,252,246,0.06); border-color:rgba(232,221,211,0.16); color:var(--cream-200); }
.chip--accent{ background:var(--amber-100); border-color:var(--amber-300); color:var(--amber-700); }

/* ---------- pain points (problem) ---------- */
.pain{ display:flex; gap:18px; align-items:flex-start; }
.pain .pn{ font-family:var(--font-display); font-size:var(--text-3xl); color:var(--amber-300); line-height:1; flex:none; }
.pain h3{ font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-lg); margin:2px 0 8px; color:var(--cream-50); }
.pain p{ margin:0; color:var(--cream-300); font-size:var(--text-base); line-height:1.55; }

/* ---------- platform stack ---------- */
.platform{ border:1px solid var(--border-default); border-radius:var(--radius-2xl); padding:16px; background:linear-gradient(180deg, rgba(201,116,46,0.06), rgba(201,116,46,0.015)); }
.platform-top{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:30px 34px; box-shadow:var(--shadow-sm); }
.platform-top h3{ font-family:var(--font-display); font-size:var(--text-3xl); margin:6px 0 8px; }
.platform-top p{ margin:0; color:var(--text-secondary); font-size:var(--text-lg); max-width:74ch; }
.platform-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.pcomp{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:24px 26px; box-shadow:var(--shadow-xs); }
.pcomp--sep{ background:linear-gradient(180deg, rgba(201,116,46,0.10), rgba(201,116,46,0.03)); border-color:var(--amber-300); }
.pcomp .pk{ font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-accent); }
.pcomp b{ font-family:var(--font-display); font-size:var(--text-2xl); display:block; margin:8px 0 7px; }
.pcomp p{ margin:0; color:var(--text-secondary); font-size:var(--text-base); line-height:1.45; }

/* ---------- AI agents grid ---------- */
.agents{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.agent{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:22px 20px; box-shadow:var(--shadow-xs); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.agent.lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.agent .ai{ width:40px; height:40px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--amber-100); color:var(--amber-700); margin-bottom:14px; }
.agent .at{ font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-accent); display:block; margin-bottom:6px; }
.agent h4{ font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-md); margin:0 0 7px; }
.agent p{ margin:0; font-size:var(--text-sm); color:var(--text-muted); line-height:1.5; }

/* ---------- builder layer ---------- */
.arch{ display:flex; flex-direction:column; gap:12px; }
.arch-layer{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:20px 26px; box-shadow:var(--shadow-xs); display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.arch-layer--accent{ background:linear-gradient(180deg, rgba(201,116,46,0.10), rgba(201,116,46,0.03)); border-color:var(--amber-300); }
.arch-head{ display:flex; align-items:center; gap:14px; min-width:280px; }
.arch-num{ font:var(--type-mono); font-weight:700; font-size:var(--text-md); color:var(--amber-500); }
.arch-head b{ font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-lg); display:block; }
.arch-head span{ font-size:var(--text-sm); color:var(--text-muted); }
.arch-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }

/* ---------- pricing ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.plan{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:32px 30px; box-shadow:var(--shadow-sm); position:relative; }
.plan--feat{ border-color:var(--amber-500); box-shadow:var(--shadow-lg); }
.plan-flag{ position:absolute; top:-13px; left:30px; background:var(--amber-500); color:#fff; font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:var(--radius-pill); }
.plan .pt{ font:var(--type-mono); font-size:var(--text-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--text-accent); }
.plan .price{ display:flex; align-items:baseline; gap:8px; margin:14px 0 6px; }
.plan .price .big{ font-family:var(--font-display); font-size:var(--text-5xl); line-height:.9; }
.plan .price .per{ font:var(--type-mono); font-size:var(--text-sm); color:var(--text-muted); }
.plan .psub{ font-size:var(--text-sm); color:var(--text-muted); margin:0 0 20px; min-height:20px; }
.plan .btn{ width:100%; justify-content:center; margin-bottom:8px; }

/* small foot note row */
.notes-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; }
.note-item{ background:var(--cream-100); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:16px 18px; }
.note-item b{ display:block; font-size:var(--text-base); margin-bottom:3px; }
.note-item span{ font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.04em; color:var(--text-muted); text-transform:uppercase; }
.note-item--cta{ background:var(--amber-100); border-color:var(--amber-300); }

/* ---------- partners / logos ---------- */
.logo-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; }
.logo-chip{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:20px 26px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-xs); flex:1; min-width:200px; }
.logo-chip .lc-cat{ font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-accent); }
.logo-chip b{ font-family:var(--font-display); font-size:var(--text-xl); }
.logo-chip p{ margin:0; font-size:var(--text-sm); color:var(--text-muted); line-height:1.45; }

/* big stat blocks (about) */
.bigstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.bigstat b{ font-family:var(--font-display); font-size:var(--text-5xl); color:var(--amber-300); line-height:1; display:block; }
.bigstat b small{ font-size:0.5em; }
.bigstat span{ display:block; margin-top:10px; color:var(--cream-300); font-size:var(--text-base); line-height:1.4; }

/* ---------- FAQ ---------- */
.faq{ max-width:880px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border-subtle); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-lg); color:var(--text-primary); }
.faq-q .pm{ font-family:var(--font-display); font-size:var(--text-2xl); color:var(--amber-500); transition:transform var(--dur-base) var(--ease-out); flex:none; }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-out); }
.faq-a p{ margin:0; padding:0 0 24px; color:var(--text-secondary); font-size:var(--text-base); line-height:1.6; max-width:70ch; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--brown-900); border-radius:var(--radius-2xl); padding:64px 56px; text-align:center; color:var(--cream-100); position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% -10%, rgba(230,161,75,0.22), transparent 60%); pointer-events:none; }
.cta-band h2{ font-size:var(--text-4xl); margin:0 0 16px; position:relative; }
.cta-band p{ position:relative; color:var(--cream-300); font-size:var(--text-lg); max-width:54ch; margin:0 auto 30px; }
.cta-band .hero-cta{ justify-content:center; position:relative; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:start; }
.form-card{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:36px; box-shadow:var(--shadow-md); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-weight:var(--weight-semibold); font-size:var(--text-base); margin-bottom:8px; }
.field .req{ color:var(--amber-700); }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-primary);
  padding:13px 15px; border:1.5px solid var(--border-strong); border-radius:var(--radius-md); background:var(--cream-50); transition:var(--dur-fast);
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber-500); box-shadow:var(--ring-accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* channels */
.channels{ display:flex; flex-direction:column; gap:14px; }
.channel{ display:flex; align-items:center; gap:16px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow-xs); transition:all var(--dur-fast) var(--ease-out); }
.channel:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--amber-300); }
.channel .chi{ width:46px; height:46px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex:none; color:#fff; }
.channel b{ display:block; font-size:var(--text-md); }
.channel span{ font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.04em; color:var(--text-muted); }
.ch-wa{ background:#25D366; } .ch-msg{ background:#0A7CFF; } .ch-ig{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); } .ch-mail{ background:var(--amber-500); }

/* ---------- footer ---------- */
.site-footer{ background:var(--brown-900); color:var(--cream-200); padding:72px 0 36px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand img{ height:30px; margin-bottom:18px; }
.footer-brand p{ color:var(--brown-200); font-size:var(--text-base); max-width:34ch; margin:0 0 20px; line-height:1.55; }
.footer-soc{ display:flex; gap:10px; }
.footer-soc a{ width:38px; height:38px; border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center; background:rgba(255,252,246,0.08); transition:var(--dur-fast); }
.footer-soc a:hover{ background:var(--amber-500); }
.footer-soc svg{ width:18px; height:18px; }
.footer-col h4{ font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--brown-200); margin:0 0 16px; }
.footer-col a{ display:block; color:var(--cream-200); font-size:var(--text-base); padding:6px 0; transition:var(--dur-fast); }
.footer-col a:hover{ color:var(--amber-300); }
.footer-base{ border-top:1px solid rgba(255,252,246,0.1); margin-top:48px; padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color:var(--brown-300); font:var(--type-mono); font-size:var(--text-2xs); letter-spacing:.06em; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero h1{ font-size:var(--text-5xl); }
  .agents{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .bigstats{ grid-template-columns:repeat(2,1fr); }
  .notes-row{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .container{ padding:0 22px; }
  .section{ padding:72px 0; }
  .nav, .header-cta-text{ display:none; }
  .nav.open{ display:flex; position:absolute; top:var(--header-height); left:0; right:0; flex-direction:column; align-items:stretch; background:var(--cream-50); border-bottom:1px solid var(--border-subtle); padding:14px 22px; gap:2px; box-shadow:var(--shadow-lg); }
  .nav.open a{ padding:13px 12px; }
  .menu-btn{ display:block; }
  .hero h1{ font-size:var(--text-4xl); }
  .h-display{ font-size:var(--text-4xl); }
  .h1{ font-size:var(--text-4xl); } .h2{ font-size:var(--text-3xl); }
  .grid-2,.grid-3,.grid-4,.plans,.platform-row,.agents,.field-row,.notes-row,.bigstats{ grid-template-columns:1fr; }
  .cta-band{ padding:44px 26px; }
  .arch-layer{ gap:14px; } .arch-chips{ margin-left:0; }
}