:root{
  --ivory: #FAF6F0;
  --ivory-2: #F4EDE2;
  --ivory-3: #EDE4D4;
  --ink: #191710;
  --ink-soft: rgba(25,23,16,0.7);
  --ink-faint: rgba(25,23,16,0.5);
  --near-black: #15140F;
  --near-black-2: #1D1B14;
  --gold: #C9972C;
  --gold-ink: #8A6118;
  --gold-soft: rgba(201,151,44,0.14);
  --sage: #2E8A6A;
  --sage-ink: #1F6B51;
  --sage-soft: rgba(46,138,106,0.14);
  --cream-text: #F4EDE2;
  --serif: "Fraunces", Georgia, "Noto Serif TC", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei UI", sans-serif;
  --wrap: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}}

body{
  margin:0;
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}

.mono{font-family:ui-monospace, "SF Mono", Consolas, monospace; font-variant-numeric:tabular-nums;}
.hidden{display:none !important;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}

h1,h2,h3{
  font-family:var(--serif); font-optical-sizing:auto;
  font-weight:500; letter-spacing:-0.02em; text-wrap:balance; margin:0 0 0.4em;
}
h1{font-size:clamp(38px,6vw,68px); line-height:1.06; letter-spacing:-0.03em;}
h2{font-size:clamp(28px,4vw,44px); line-height:1.12;}
h3{font-size:22px; line-height:1.3; font-weight:500;}
p{margin:0 0 1em; color:var(--ink-soft); max-width:60ch; letter-spacing:-0.01em;}
a{color:inherit;}
a:focus-visible, button:focus-visible{outline:2px solid var(--sage); outline-offset:3px;}

/* Text-safe accent colors: --gold/--sage are for on-dark or decorative use
   only (dots, borders) -- both fail WCAG AA as text on the ivory ground
   (measured 2.45:1 / 3.93:1). --gold-ink/--sage-ink are darkened variants
   for any actual on-light text use (~4.6:1+). */
.eyebrow{
  font-family:var(--sans); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold-ink); font-weight:700; margin-bottom:14px; display:block;
}
.eyebrow.on-dark{color:#E8C989;}
.eyebrow.on-sage{color:var(--sage-ink);}

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:12px 28px; border-radius:100px; font-weight:500; font-size:15.5px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:var(--sans);
  transition:transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--ink); color:var(--ivory);}
.btn-primary:hover{box-shadow:0 14px 28px -10px rgba(25,23,16,0.45);}
.btn-primary.on-dark{background:var(--cream-text); color:var(--near-black);}
.btn-ghost{background:transparent; border-color:rgba(25,23,16,0.25); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); background:rgba(25,23,16,0.05);}
.btn-ghost.on-dark{border-color:rgba(244,237,226,0.3); color:var(--cream-text);}
.btn-ghost.on-dark:hover{border-color:var(--cream-text); background:rgba(244,237,226,0.08);}
.btn-small{min-height:44px; padding:10px 20px; font-size:13.5px;}

/* ── Header ──────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(250,246,240,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(25,23,16,0.08);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px;}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; flex-shrink:0;}
.brand-word{font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ink); letter-spacing:-0.01em;}
.brand-tag{font-family:var(--sans); font-size:12px; color:var(--ink-soft); letter-spacing:0.02em;}
.site-nav{display:flex; align-items:center; gap:30px; font-size:14.5px; font-weight:500; overflow-x:auto; scrollbar-width:none;}
.site-nav::-webkit-scrollbar{display:none;}
.site-nav a{text-decoration:none; color:var(--ink-soft); transition:color 0.15s ease; white-space:nowrap;}
.site-nav a:hover{color:var(--ink);}
.nav-cta{
  background:var(--ink); color:var(--ivory) !important; padding:10px 20px; border-radius:100px;
  min-height:44px; display:inline-flex; align-items:center;
}
.nav-cta:hover{background:var(--near-black-2) !important;}

/* ── Full-bleed sections (Stardust-style alternating rooms) ─ */
.room{position:relative; overflow:hidden;}
.room-media{position:absolute; inset:0; z-index:0;}
.room-img{width:100%; height:100%; object-fit:cover; display:block;}
.room-scrim{position:absolute; inset:0; z-index:1;}
.room-content{position:relative; z-index:2;}

/* Hero: dark scrim only on the text side, image reads clearly elsewhere.
   Padding is top/bottom ONLY -- a shorthand `padding:140px 0 80px` here would
   zero the left/right padding this element inherits visually from `.wrap`
   (`.hero .room-content` has higher specificity than `.wrap` and would win),
   stripping the side gutter at every viewport. Alignment is explicit on
   both sides (not a single `margin-left/right:auto`) so the box is truly
   pinned, not just centered by two independent auto margins. */
.hero{min-height:92vh; display:flex; align-items:center;}
.hero .room-scrim{background:linear-gradient(100deg, rgba(21,20,15,0.82) 0%, rgba(21,20,15,0.55) 32%, rgba(21,20,15,0.08) 55%, transparent 70%);}
.hero .room-content{padding-top:140px; padding-bottom:80px; max-width:640px; margin-right:auto;}
.hero h1{color:var(--cream-text);}
.hero p{color:rgba(244,237,226,0.82); font-size:18px; max-width:50ch;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:32px;}

/* Generic full-bleed "room" with image + text, used for capability sections.
   Content always sits on a SOLID ivory block (not a translucent overlay on
   top of the photo) so legibility never depends on guessing where a given
   photo's own negative space happens to fall. */
.room-tall{min-height:82vh; display:flex; align-items:center;}
.room-tall .room-content{padding-top:90px; padding-bottom:90px; max-width:560px; margin-right:auto;}
.room-tall.align-right .room-content{margin-right:0; margin-left:auto;}
.room-soil .room-scrim{background:linear-gradient(90deg, var(--ivory) 0%, var(--ivory) 40%, rgba(250,246,240,0) 66%);}
.room-soil h2, .room-soil p{color:var(--near-black);}
.room-data .room-scrim{background:linear-gradient(90deg, rgba(250,246,240,0) 0%, rgba(250,246,240,0) 34%, var(--ivory) 60%);}
.room-data h2, .room-data p{color:var(--near-black);}

/* Proof / stat room -- plain tinted section, no photo, so no scrim needed */
.room-proof{min-height:60vh; display:flex; align-items:center;}
.room-proof .room-content{padding-top:70px; padding-bottom:70px; width:100%;}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
.stat{background:var(--ivory); border-radius:14px; padding:26px 24px; border:1px solid rgba(25,23,16,0.08);}
.stat-num{font-family:var(--serif); font-size:36px; color:var(--ink); font-weight:500; letter-spacing:-0.02em; display:block;}
.stat-label{font-size:13.5px; color:var(--ink-soft); margin-top:4px;}

/* ── Standard sections (non full-bleed) ─────────────────── */
.section{padding:100px 0;}
.section-dark{background:var(--near-black); color:var(--cream-text);}
.section-dark h2, .section-dark h3{color:var(--cream-text);}
.section-dark p{color:rgba(244,237,226,0.72);}
.section-tint{background:var(--ivory-2);}

.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px;}
.flow-step{padding:0;}
.flow-num{font-family:var(--serif); font-size:34px; color:var(--gold-ink); font-weight:500; display:block; margin-bottom:10px;}
.section-dark .flow-num{color:#E8C989;}
.flow-step h3{font-size:19px; margin-bottom:8px;}
.flow-step p{font-size:14.5px;}

.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px;}
.card{
  background:var(--ivory); border:1px solid rgba(25,23,16,0.10); border-radius:16px;
  padding:30px 28px; transition:transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.section-dark .card{background:var(--near-black-2); border-color:rgba(244,237,226,0.12);}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -22px rgba(25,23,16,0.32); border-color:var(--sage);}
.card h3{display:flex; align-items:center; gap:10px;}
.card-icon{width:8px; height:8px; border-radius:50%; background:var(--sage); flex-shrink:0;}
.card-source{font-size:12.5px; color:var(--sage-ink); font-weight:600; margin-top:10px;}
.section-dark .card-source{color:#7FCBA8;}

.proof-list{list-style:none; padding:0; margin:36px 0 0; display:grid; gap:1px; background:rgba(25,23,16,0.08); border-radius:14px; overflow:hidden;}
.proof-list li{background:var(--ivory); padding:22px 26px; display:flex; align-items:baseline; gap:18px;}
.proof-tag{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage-ink); font-weight:700; flex-shrink:0; width:110px;}
.proof-text{color:var(--ink); font-size:15px;}
.proof-text a{color:var(--sage-ink); text-decoration:underline; text-underline-offset:2px;}

.example-block{margin-top:24px;}
.example-label{font-size:12px; color:var(--ink-faint); margin-bottom:8px; letter-spacing:0.03em;}

/* ── Scroll reveal ───────────────────────────────────── */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ── Footer ──────────────────────────────────────────── */
.site-footer{border-top:1px solid rgba(244,237,226,0.12); padding:40px 0 28px; background:var(--near-black); color:rgba(244,237,226,0.6);}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px;}
.footer-brand{font-family:var(--serif); font-size:17px; color:var(--cream-text); margin-bottom:6px;}
.footer-inner a{color:rgba(244,237,226,0.8); text-decoration:underline; text-underline-offset:2px;}

/* ── Connect page ────────────────────────────────────── */
.connect-main{min-height:calc(100vh - 76px - 90px); display:flex; align-items:center; padding:70px 0; background:var(--ivory-2);}
.connect-wrap{width:100%;}
.panel{
  background:var(--ivory); border:1px solid rgba(25,23,16,0.10); border-radius:20px;
  padding:48px; max-width:640px; box-shadow:0 30px 60px -30px rgba(25,23,16,0.15);
}
.panel-sub{font-size:15.5px;}
.gsi-container{margin-top:24px;}
.error-text{color:#A13A24; font-size:14px; margin-top:10px;}

.status-row{display:flex; gap:14px; align-items:flex-start; background:var(--gold-soft); border:1px solid rgba(201,151,44,0.3); border-radius:12px; padding:18px 20px; margin:24px 0 32px;}
.status-dot{width:10px; height:10px; border-radius:50%; margin-top:6px; flex-shrink:0; background:var(--gold);}
.status-note{font-size:13.5px; margin:4px 0 0; color:var(--ink-soft);}

.code-block{
  background:var(--near-black); color:#9FE0C0; border-radius:12px; padding:20px 22px;
  font-family:ui-monospace, "SF Mono", Consolas, monospace; font-size:13px; line-height:1.7; overflow-x:auto; margin:16px 0;
}
.tool-list{list-style:none; padding:0; margin:18px 0; font-size:13.5px;}
.tool-list li{padding:9px 0; border-bottom:1px solid rgba(25,23,16,0.08); color:var(--ink);}
.panel-note{font-size:13px; color:var(--ink-soft); margin-top:28px;}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 899px){
  .flow{grid-template-columns:1fr 1fr;}
  .cards{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .site-nav{gap:18px; font-size:13.5px;}
  .panel{padding:32px 24px;}
  .room-tall .room-content, .room-tall.align-right .room-content{max-width:100%; margin-left:0; margin-right:0;}
  .room-soil .room-scrim, .room-data .room-scrim{background:linear-gradient(180deg, rgba(250,246,240,0) 0%, rgba(250,246,240,0) 42%, var(--ivory) 72%);}
  .room-tall{align-items:flex-end;}
  .hero .room-scrim{background:linear-gradient(180deg, rgba(21,20,15,0.85) 0%, rgba(21,20,15,0.5) 38%, rgba(21,20,15,0.05) 62%, transparent 78%);}
  .hero .room-content{padding-top:120px; padding-bottom:60px; max-width:100%; margin-right:0;}
}