/* ============================================================
   encirkl v2 — Shared design system
   Used by every v2 mockup page (index, partner, badges, loops, legal).
   Page-specific layouts live in each page's own <style> block.
   ============================================================ */

/* Font-faces + universal easing live in css/foundations.css (load first) */

/* ============================================================
   Design tokens — light first
   ============================================================ */
:root{
  --mint: #0E7048;
  --mint-soft: #DDF4E6;
  --mint-ink: #095333;
  --amber: #B88A1F;
  --amber-soft: #FBF1D8;
  --amber-ink: #7E5E14;
  --sky: #235AA0;
  --sky-soft: #E5EEF8;
  --sky-ink: #163E70;

  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F2F0E8;
  --border: #E5E3DA;
  --border-strong: #D2CFC4;

  --ink: #0F1410;
  --ink-2: #2A312C;
  --ink-muted: #5A6259;
  --ink-soft: #595E58;

  --shadow-xs: 0 1px 2px rgba(15,20,16,.04);
  --shadow-sm: 0 2px 8px rgba(15,20,16,.06);
  --shadow-md: 0 8px 24px rgba(15,20,16,.08);
  --shadow-lg: 0 20px 48px rgba(15,20,16,.10);
  --ring: 0 0 0 3px rgba(14,112,72,.40);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container: 1180px;
  --pad-x: clamp(20px, 4vw, 52px);
  --pad-y: clamp(64px, 9vw, 120px);

  --btn-fg: #ffffff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0E1411;
  --surface: #15201A;
  --surface-2: #1B2820;
  --border: #233027;
  --border-strong: #2E3D33;
  --ink: #F2EFE6;
  --ink-2: #D7D3C7;
  --ink-muted: #99A89B;
  --ink-soft: #849383;
  --btn-fg: #0E1411;
  --mint: #34D399;
  --mint-soft: rgba(52,211,153,.14);
  --mint-ink: #6EE7B7;
  --amber: #E0BD66;
  --amber-soft: rgba(224,189,102,.14);
  --amber-ink: #F1D89C;
  --sky: #7DB1EA;
  --sky-soft: rgba(125,177,234,.14);
  --sky-ink: #BAD5F2;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
  --shadow-md: 0 10px 28px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.45);
  --ring: 0 0 0 3px rgba(52,211,153,.40);
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    color-scheme: dark;
    --bg: #0E1411;
    --surface: #15201A;
    --surface-2: #1B2820;
    --border: #233027;
    --border-strong: #2E3D33;
    --ink: #F2EFE6;
    --ink-2: #D7D3C7;
    --ink-muted: #99A89B;
    --ink-soft: #849383;
    --btn-fg: #0E1411;
    --mint: #34D399;
    --mint-soft: rgba(52,211,153,.14);
    --mint-ink: #6EE7B7;
    --amber: #E0BD66;
    --amber-soft: rgba(224,189,102,.14);
    --amber-ink: #F1D89C;
    --sky: #7DB1EA;
    --sky-soft: rgba(125,177,234,.14);
    --sky-ink: #BAD5F2;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.3);
    --shadow-md: 0 10px 28px rgba(0,0,0,.4);
    --shadow-lg: 0 24px 56px rgba(0,0,0,.45);
    --ring: 0 0 0 3px rgba(52,211,153,.40);
  }
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
img,svg{max-width:100%;display:block;height:auto}
a{color:var(--mint-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
h1,h2,h3,h4{
  font-family:'Roca Two','Nunito',serif;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 .4em;
  line-height:1.08;
}
h1{font-size:clamp(40px, 6.2vw, 76px); line-height:1.02; letter-spacing:-.025em}
h2{font-size:clamp(28px, 3.6vw, 46px)}
h3{font-size:clamp(20px, 2.1vw, 26px); line-height:1.18}
h4{font-size:18px; line-height:1.25}
p{margin:0 0 1em}
hr{border:none;border-top:1px solid var(--border);margin:0}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-xs)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;z-index:1000;
}
.skip:focus{left:0}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
section{padding:var(--pad-y) 0}

/* ============================================================
   Mockup banner (remove for production)
   ============================================================ */
.mockup-banner{
  background:linear-gradient(90deg, var(--amber-soft), var(--mint-soft));
  border-bottom:1px solid var(--border);
  padding:8px var(--pad-x);
  font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-2);text-align:center;
}
.mockup-banner .tag{
  display:inline-block;background:var(--ink);color:var(--bg);
  padding:2px 8px;border-radius:var(--radius-pill);font-size:11px;margin-right:8px;
}

/* ============================================================
   Utility classes
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint-ink);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px;
}
.eyebrow.amber{color:var(--amber-ink)}
.eyebrow.sky{color:var(--sky-ink)}
.lead{font-size:clamp(17px, 1.4vw, 20px); color:var(--ink-muted); line-height:1.6}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;
  font-family:inherit;font-size:16px;font-weight:700;
  border:1.5px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  min-height:48px;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--mint);color:var(--btn-fg);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--mint-ink);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--ink);background:var(--surface-2)}
.btn-ghost{background:transparent;color:var(--ink-2);padding:10px 14px}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-outline-mint{background:transparent;color:var(--mint);border:2px solid var(--mint);box-shadow:none;font-weight:700}
.btn-outline-mint:hover{background:var(--mint-soft);color:var(--mint-ink);border-color:var(--mint-ink)}
.btn-amber{background:var(--amber);color:#1A140A;box-shadow:var(--shadow-sm)}
.btn-amber:hover{background:var(--amber-ink);color:#fff}
.btn-sky{background:var(--sky);color:var(--btn-fg);box-shadow:var(--shadow-sm)}
.btn-sky:hover{background:var(--sky-ink)}
.btn svg{width:18px;height:18px}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--border);
}
.chip.mint{background:var(--mint-soft);color:var(--mint-ink);border-color:transparent}
.chip.amber{background:var(--amber-soft);color:var(--amber-ink);border-color:transparent}
.chip.sky{background:var(--sky-soft);color:var(--sky-ink);border-color:transparent}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px;
  box-shadow:var(--shadow-xs);
  transition:transform var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
}
.card-hover:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong)}

/* ============================================================
   Topbar (sticky, with overhanging wordmark + shrink-on-scroll)
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  overflow:visible;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:var(--container);
  margin:0 auto;
  display:flex;align-items:center;gap:24px;
  padding:10px var(--pad-x);
  min-height:60px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Roca Two',serif;font-weight:800;font-size:22px;color:var(--ink);
  letter-spacing:-.01em;text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand-logo{width:auto;display:block}
.brand-logo--dark{display:none}
:root[data-theme="dark"] .brand-logo--light{display:none}
:root[data-theme="dark"] .brand-logo--dark{display:block}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .brand-logo--light{display:none}
  :root[data-theme="auto"] .brand-logo--dark{display:block}
}

.topbar .brand{
  position:relative;isolation:isolate;
  line-height:0;
}
.topbar .brand-logo{
  height:120px;
  margin-top:0;
  margin-bottom:-60px;
  filter:drop-shadow(0 14px 28px rgba(15,20,16,.14));
  transition:
    height var(--t-base) var(--ease),
    margin-top var(--t-base) var(--ease),
    margin-bottom var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    filter var(--t-base) var(--ease);
}
.topbar .brand:hover .brand-logo{transform:scale(1.03)}
.topbar .brand::after{
  content:"";position:absolute;
  top:-8px; bottom:-60px; left:-20px; right:-20px;
  background:radial-gradient(ellipse at 30% 35%, var(--mint-soft) 0%, transparent 65%);
  filter:blur(20px);
  opacity:.55;
  z-index:-1;pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.topbar .brand:hover::after{opacity:1}

.topbar.scrolled .brand-logo{
  height:56px;
  margin-top:0;
  margin-bottom:0;
}
.topbar.scrolled .brand::after{opacity:0}

.footer-brand .brand-logo{height:80px}

:root[data-theme="dark"] .topbar .brand-logo{
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .topbar .brand-logo{
    filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));
  }
}

.nav{
  display:flex;align-items:center;gap:4px;margin-left:24px;
}
.nav a{
  font-size:15px;font-weight:600;color:var(--ink-2);
  padding:8px 12px;border-radius:var(--radius-xs);
}
.nav a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.nav a.on{color:var(--ink);background:var(--surface-2)}
.nav-spacer{flex:1}
.utilities{display:flex;align-items:center;gap:6px}
.iconbtn{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--radius-pill);color:var(--ink-2);cursor:pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.iconbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border-strong)}
.iconbtn svg{width:18px;height:18px}
.lang{
  display:inline-flex;background:var(--surface-2);border-radius:var(--radius-pill);
  padding:3px;border:1px solid var(--border);
}
.lang a{
  font-size:13px;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);color:var(--ink-muted);
}
.lang a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs)}
.lang a:hover{text-decoration:none;color:var(--ink)}
.menu-toggle{display:none}

/* ============================================================
   Mobile drawer — slide-down nav panel triggered by .menu-toggle
   Injected by initMobileDrawer in js/v2-shared.js
   ============================================================ */
.mobile-drawer{
  position:fixed;left:0;right:0;top:60px;z-index:49;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-md);
  transform:translateY(-110%);
  opacity:0;pointer-events:none;
  transition:
    transform var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease);
}
.mobile-drawer.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.mobile-drawer-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:16px var(--pad-x) 24px;
  display:flex;flex-direction:column;gap:4px;
}
.mobile-drawer .md-link{
  display:block;
  padding:14px 16px;
  font-size:17px;font-weight:600;
  color:var(--ink);
  border-radius:var(--radius-sm);
  text-decoration:none;
}
.mobile-drawer .md-link:hover,
.mobile-drawer .md-link:focus-visible{
  background:var(--surface-2);
  text-decoration:none;
}
.mobile-drawer .md-link.on{
  background:var(--surface-2);
  color:var(--ink);
}
.mobile-drawer .md-cta{
  margin:12px 0 8px;
  display:flex;align-items:center;justify-content:center;
  padding:14px 22px;
  background:var(--mint);color:#fff;
  border:none;border-radius:var(--radius-pill);
  font-family:inherit;font-size:16px;font-weight:700;
  cursor:pointer;text-decoration:none;
  width:100%;
  transition:background var(--t-fast) var(--ease);
}
.mobile-drawer .md-cta:hover{
  background:var(--mint-ink);
  color:#fff;text-decoration:none;
}
.mobile-drawer .md-lang{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px 4px;
  font-size:13px;color:var(--ink-muted);
}
.mobile-drawer .md-lang-pills{
  display:inline-flex;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:3px;margin-left:auto;
}
.mobile-drawer .md-lang-pills a{
  font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:var(--radius-pill);
  color:var(--ink-muted);
}
.mobile-drawer .md-lang-pills a.on{
  background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-xs);
}
.mobile-drawer .md-lang-pills a:hover{
  text-decoration:none;color:var(--ink);
}

/* Burger → X cross morph when drawer is open.
   SVG viewBox is 0 0 24 24; paths sit at y=6/12/18 horizontally.
   transform-box: view-box anchors transforms on the SVG centre (12,12). */
.menu-toggle svg path{
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition:
    transform var(--t-base) var(--ease),
    opacity   var(--t-base) var(--ease);
}
.menu-toggle[aria-expanded="true"] svg path:nth-child(1){ transform: translateY(6px)  rotate(45deg) }
.menu-toggle[aria-expanded="true"] svg path:nth-child(2){ opacity: 0 }
.menu-toggle[aria-expanded="true"] svg path:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }
@media (prefers-reduced-motion: reduce){
  .menu-toggle svg path{ transition:none }
}

/* ============================================================
   Proof strip — used on landing & partner pages
   ============================================================ */
.proof-strip{
  padding:40px 0 16px;
}
.proof-strip .container{display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.proof-strip-label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.proof-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:24px 56px;
}
.proof-logos a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 4px;border-radius:var(--radius-sm);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.proof-logos a:hover{transform:translateY(-2px); background:var(--surface-2)}
.proof-logos img{
  height:64px;width:auto;max-width:200px;object-fit:contain;
  opacity:.95;
  transition:opacity var(--t-fast);
}
.proof-logos a:hover img{opacity:1}
/* Hide the explicit dark-variant when stadtplatz logo has one — we render
   light variant on white card in dark mode (uniform treatment for all). */
.proof-logos .pl-dark{display:none}

/* Dark-mode treatment for partner logos: render on a near-white card so
   logos with white backgrounds (Farmlyplace) and dark logos (IPB) both
   remain legible. Filter-based silhouette approach failed on filled-area
   logos — card approach is colour-faithful and works for any logo. */
:root[data-theme="dark"] .proof-logos a{
  background:rgba(255,255,255,0.96);
  padding:10px 16px;
}
:root[data-theme="dark"] .proof-logos a:hover{
  background:#ffffff;transform:translateY(-2px);
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .proof-logos a{
    background:rgba(255,255,255,0.96);
    padding:10px 16px;
  }
  :root[data-theme="auto"] .proof-logos a:hover{
    background:#ffffff;transform:translateY(-2px);
  }
}

/* ============================================================
   Section header pattern — used on every content section
   ============================================================ */
.section-header{max-width:760px;margin-bottom:48px}
.section-header.center{margin-left:auto;margin-right:auto;text-align:center}

/* ============================================================
   Steps grid (How it works on landing, also reusable)
   ============================================================ */
.steps-grid{
  display:grid;grid-template-columns:repeat(3, 1fr); gap:20px;
}
.step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.step-num{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint-ink);
}
.step-num .n{
  width:26px;height:26px;border-radius:50%;
  background:var(--mint-soft);color:var(--mint-ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Roca Two',serif;font-size:13px;font-weight:800;
}
.step h3{margin:0 0 6px}
.step p{margin:0;color:var(--ink-muted)}
.step-illus{
  height:140px;
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, var(--mint-soft), transparent 60%), var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border-strong);
  margin-bottom:6px;
}
.step-illus svg{width:84px;height:84px;color:var(--mint)}

.step-num.amber{color:var(--amber-ink)}
.step-num.amber .n{background:var(--amber-soft);color:var(--amber-ink)}
.step-num.sky{color:var(--sky-ink)}
.step-num.sky .n{background:var(--sky-soft);color:var(--sky-ink)}

/* ============================================================
   Example card (real-example callout)
   ============================================================ */
.example-card{
  margin-top:32px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 26px;
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  box-shadow:var(--shadow-sm);
}
.example-card .ex-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--amber-soft); color:var(--amber-ink);
  display:flex;align-items:center;justify-content:center;
}
.example-card .ex-meta{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.example-card .ex-title{font-family:'Roca Two',serif;font-weight:800;color:var(--ink);font-size:18px;line-height:1.35}
.example-card .ex-title strong{color:var(--mint-ink);font-weight:800}
:root[data-theme="dark"] .example-card .ex-title strong{color:var(--mint)}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .example-card .ex-title strong{color:var(--mint)}
}
.example-card .ex-cta{font-weight:700;font-size:14px;color:var(--mint-ink);white-space:nowrap}

/* ============================================================
   Partner setup steps (numbered cards)
   ============================================================ */
.partner-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;list-style:none;padding:0}
.partner-step{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px 22px;
}
.partner-step .num{
  width:36px;height:36px;border-radius:50%;
  background:var(--amber-soft);color:var(--amber-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Roca Two',serif;font-weight:800;font-size:18px;
  flex-shrink:0;
}
.partner-step h3{margin:0 0 2px;color:var(--ink)}
.partner-step p{margin:0;color:var(--ink-muted);font-size:15px}

.partner-pricing{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 26px;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  box-shadow:var(--shadow-xs);
}
.partner-pricing .price{font-family:'Roca Two',serif;font-weight:800;font-size:28px;color:var(--ink)}
.partner-pricing .price span{color:var(--amber-ink)}
.partner-pricing p{margin:0;font-size:14px;color:var(--ink-muted)}

/* ============================================================
   Lanes (three audiences) and city cards — reusable card patterns
   ============================================================ */
.lanes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.lane{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px 30px 30px;
  display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.lane:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.lane::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--mint);
}
.lane.partner::before{background:var(--amber)}
.lane.city::before{background:var(--sky)}
.lane h3{margin:0}
.lane p{margin:0;color:var(--ink-muted)}
.lane ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.lane ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.lane ul li svg{width:16px;height:16px;color:var(--mint);flex-shrink:0;margin-top:4px}
.lane.partner ul li svg{color:var(--amber)}
.lane.city ul li svg{color:var(--sky)}
.lane .lane-icon{
  width:56px;height:56px;border-radius:var(--radius-sm);
  background:var(--mint-soft);color:var(--mint-ink);
  display:flex;align-items:center;justify-content:center;
}
.lane.partner .lane-icon{background:var(--amber-soft);color:var(--amber-ink)}
.lane.city .lane-icon{background:var(--sky-soft);color:var(--sky-ink)}
.lane .lane-icon svg{width:28px;height:28px}
.lane .lane-cta{margin-top:auto;padding-top:8px}

/* ============================================================
   Filter pills (for badges, loops)
   ============================================================ */
.filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:36px;
}
.filter-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--ink-2);cursor:pointer;
  transition: all var(--t-fast) var(--ease);
}
.filter-pill:hover{border-color:var(--border-strong);color:var(--ink)}
.filter-pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filter-pill .count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  font-size:11px;font-weight:700;
  background:var(--surface-2);color:var(--ink-muted);
  border-radius:var(--radius-pill);
}
.filter-pill.on .count{background:color-mix(in srgb, var(--bg) 30%, transparent);color:var(--bg)}

/* ============================================================
   Card grid (used for badges, loops, generic content cards)
   ============================================================ */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}

/* ============================================================
   Final CTA section
   ============================================================ */
.final{background:var(--surface-2);position:relative;overflow:hidden}
.final::before{
  content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, var(--mint-soft) 0%, transparent 60%);
  filter: blur(30px);opacity:.7;pointer-events:none;
}
.final .container{position:relative;text-align:center}
.final h2{margin-bottom:14px}
.final .lead{max-width:620px;margin:0 auto 28px}
.final-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.final-tagline{margin-top:32px;font-size:14px;color:var(--ink-soft);letter-spacing:.05em}

/* ============================================================
   Footer
   ============================================================ */
footer.site{
  background:var(--bg);border-top:1px solid var(--border);
  padding: clamp(40px, 5vw, 64px) 0 24px;
}
.footer-grid{
  display:grid;grid-template-columns: 1.4fr repeat(3, 1fr); gap:36px;
}
.footer-brand p{color:var(--ink-muted);font-size:15px;max-width:280px}
.footer-col h3{
  font-family:'Roca Two',serif;font-size:14px;
  color:var(--ink);margin:0 0 12px;text-transform:uppercase;letter-spacing:.12em;
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-col a{font-size:15px;color:var(--ink-muted)}
.footer-col a:hover{color:var(--ink);text-decoration:none}
.footer-bottom{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  font-size:13px;color:var(--ink-soft);
}

/* ============================================================
   Long-form prose (used on legal pages)
   ============================================================ */
.prose{
  max-width:760px;margin:0 auto;
  font-size:17px;line-height:1.7;color:var(--ink-2);
}
.prose h2{font-size:clamp(22px, 2.6vw, 32px);margin:2.4em 0 .6em}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:clamp(18px, 2vw, 22px);margin:1.8em 0 .4em}
.prose p{margin:0 0 1em}
.prose ul, .prose ol{padding-left:1.4em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--mint-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--ink)}
.prose code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92em;background:var(--surface-2);
  padding:2px 6px;border-radius:var(--radius-xs);
  border:1px solid var(--border);
}
.prose hr{margin:2.4em 0}

/* ============================================================
   Modal system — light-first, accessible
   Used for: beta signup, partner inquiry, funding talk, contact,
   badge preview, video.
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:rgba(15,20,16,.55);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  opacity:0;transition:opacity var(--t-base) var(--ease);
  padding: clamp(12px, 3vw, 32px);
}
.modal-overlay.active{display:flex;opacity:1}
.modal-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  width:100%;max-width:560px;max-height:90vh;
  overflow-y:auto;overscroll-behavior:contain;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  position:relative;
  box-shadow:var(--shadow-lg);
  transform:translateY(16px) scale(.98);
  transition:transform var(--t-base) var(--ease);
}
.modal-overlay.active .modal-box{transform:translateY(0) scale(1)}
.modal-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;
  border:1px solid transparent;background:transparent;
  color:var(--ink-muted);font-size:22px;cursor:pointer;
  border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  transition: all var(--t-fast) var(--ease);
}
.modal-close:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border)}
.modal-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint-ink);
  margin-bottom:14px;
}
.modal-badge svg{width:18px;height:18px}
.modal-badge.amber{color:var(--amber-ink)}
.modal-badge.sky{color:var(--sky-ink)}
.modal-h{
  font-family:'Roca Two','Nunito',serif;font-weight:800;
  font-size:clamp(22px, 2.4vw, 28px);color:var(--ink);
  line-height:1.18;margin-bottom:8px;
}
.modal-sub{font-size:16px;color:var(--ink-muted);margin-bottom:24px;line-height:1.5}

/* Form fields */
.mf-form{display:flex;flex-direction:column;gap:14px}
.mf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:500px){.mf-row{grid-template-columns:1fr}}
.mf-group{display:flex;flex-direction:column;gap:6px}
.mf-label{
  font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);
}
.mf-input,.mf-select,.mf-textarea{
  width:100%;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-family:inherit;font-size:16px;
  color:var(--ink);outline:none;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.mf-input:focus,.mf-select:focus,.mf-textarea:focus{
  border-color:var(--mint);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(46,140,79,.18);
}
.mf-input::placeholder,.mf-textarea::placeholder{color:var(--ink-soft)}
.mf-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6259' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;
}
.mf-textarea{resize:vertical;min-height:88px}
.mf-submit{
  width:100%;padding:14px 22px;
  border:none;border-radius:var(--radius-pill);
  background:var(--mint);color:#fff;
  font-family:inherit;font-size:16px;font-weight:700;
  letter-spacing:.02em;cursor:pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow:var(--shadow-sm);margin-top:6px;
}
.mf-submit:hover{background:var(--mint-ink);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.mf-submit:active{transform:translateY(0)}
.mf-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.mf-submit.amber{background:var(--amber);color:#1A140A}
.mf-submit.amber:hover{background:var(--amber-ink);color:#fff}
.mf-submit.sky{background:var(--sky);color:var(--btn-fg)}
.mf-submit.sky:hover{background:var(--sky-ink)}
.mf-privacy{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:8px;line-height:1.5}
.mf-privacy a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px}

/* Success state */
.mf-success{display:none;text-align:center;padding:16px 0 4px}
.mf-success.show{display:block}
.mf-success-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--mint-soft);color:var(--mint-ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:32px;margin-bottom:16px;
}
.mf-success-h{font-family:'Roca Two',serif;font-weight:800;font-size:22px;color:var(--ink);margin-bottom:8px}
.mf-success-p{font-size:16px;color:var(--ink-muted);line-height:1.6}
.mf-success-p a{color:var(--mint-ink);text-decoration:underline}
.mf-form.hidden{display:none}

/* Badge preview modal — bigger image, v1 floating animation, tag pill */
.modal-card--badge{max-width:620px}
.badge-preview{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.badge-preview-img{
  width:clamp(220px, 42vw, 420px);
  height:auto; max-height:50vh;
  object-fit:contain;
  filter:drop-shadow(0 16px 40px rgba(15,20,16,.18));
  animation: bp-float 3s ease-in-out infinite;
}
@keyframes bp-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (prefers-reduced-motion: reduce){ .badge-preview-img{animation:none} }
.badge-preview .badge-cat{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint-ink);
}
.badge-preview .badge-cat.character{color:var(--amber-ink)}
.badge-preview .badge-cat.season{color:var(--sky-ink)}
.badge-preview h3{font-family:'Roca Two',serif;font-weight:800;font-size:clamp(22px, 2.6vw, 30px);color:var(--ink);margin:0;line-height:1.15}
.badge-preview .badge-cond{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:16px 20px;
  font-size:15px;color:var(--ink-2);line-height:1.6;
  max-width:520px;text-align:left;
}
.badge-preview .badge-cond strong{color:var(--ink)}
/* tag pill — visual condition / token at the bottom of the modal */
.badge-preview .bp-tag{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint-ink); background:var(--mint-soft);
  padding:6px 14px; border-radius:var(--radius-pill);
  margin-top:4px;
}
.modal-card--badge.amber .badge-preview .bp-tag{color:var(--amber-ink); background:var(--amber-soft)}
.modal-card--badge.season .badge-preview .bp-tag{color:var(--sky-ink);  background:var(--sky-soft)}

/* ============================================================
   Reveal (scroll-triggered fade-up)
   JS adds .in when element scrolls into view.
   CSS animation fallback ensures visibility even if JS fails
   (animation fires after 2s, overridden when .in is added).
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  animation: revealFallback 700ms var(--ease) 2s forwards;
  will-change:opacity, transform;
}
.reveal.in{
  opacity:1;transform:translateY(0);
  animation:none;
}
@keyframes revealFallback{
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px){
  .topbar .brand-logo{height:92px;margin-top:0;margin-bottom:-32px}
  .footer-brand .brand-logo{height:60px}
  .steps-grid,.lanes{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .nav{display:none}
  .menu-toggle{display:inline-flex}
}
@media (max-width: 600px){
  /* Brand stays visible — never shrinks below natural size */
  .topbar .brand{flex-shrink:0; min-width:0; max-width:60%}
  .topbar .brand-logo{height:54px;margin-top:0;margin-bottom:0; max-width:100%; object-fit:contain; object-position:left center}
  .topbar .brand:hover .brand-logo{transform:none}
  .topbar .brand::after{display:none}
  /* Compact header on phones: App-CTA + Lang-Switcher move into the drawer */
  .topbar .utilities{gap:4px}
  .topbar .utilities > .btn{display:none}
  .topbar .utilities .lang{display:none}
  .topbar-inner{gap:8px; padding:8px var(--pad-x)}
  .footer-brand .brand-logo{height:52px}
  .steps-grid,.lanes{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .example-card{grid-template-columns:auto 1fr}
  .example-card .ex-cta{grid-column:1 / -1;justify-self:start}
  h1{font-size:38px}
  .badge-preview-img{width:clamp(180px, 60vw, 320px)}
  .badge-preview .badge-cond{font-size:14px;padding:14px 16px}
  .modal-card--badge{padding:32px 24px}
}

/* ============================================================
   Landing-page section layouts (formerly inline in index.html)
   Moved here so Astro pages inherit the same grid rules.
   ============================================================ */
.how{background:var(--surface-2)}
.how-header{max-width:680px;margin-bottom:48px}
.how-steps{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}

.lanes-header{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;margin-bottom:40px}
.lanes-header p{margin:0;color:var(--ink-muted)}

.partner-section{background:var(--surface-2)}
.partner-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.partner-grid h2{margin-top:6px}
.partner-grid .lead{margin-bottom:24px}
.partner-illus{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-md);
  position:relative;overflow:hidden;
}
.partner-illus svg{width:100%;height:auto}
.partner-illus .partner-loop-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-ink);background:var(--amber-soft);
  padding:6px 12px;border-radius:var(--radius-pill);
  margin-bottom:14px;
}

.city-header{max-width:760px;margin-bottom:40px}
.city-cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-bottom:36px}
.city-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px;display:flex;flex-direction:column;gap:14px;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.city-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.city-card .ic{
  width:48px;height:48px;border-radius:var(--radius-sm);
  background:var(--sky-soft);color:var(--sky-ink);
  display:flex;align-items:center;justify-content:center;
}
.city-card .ic svg{width:26px;height:26px}
.city-card h3{font-size:20px;margin:0}
.city-card p{margin:0;color:var(--ink-muted);font-size:15px}
.city-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  background:linear-gradient(120deg, var(--sky-soft), transparent 70%), var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:24px 28px;
}
.city-cta p{margin:0;color:var(--ink-muted);max-width:520px}
.city-cta strong{color:var(--ink)}

@media (max-width: 960px){
  .how-steps,.city-cards{grid-template-columns:1fr 1fr}
  .partner-grid{grid-template-columns:1fr;gap:32px}
  .lanes-header{grid-template-columns:1fr;gap:18px}
}
@media (max-width: 600px){
  .how-steps,.city-cards{grid-template-columns:1fr}
}

/* ============================================================
   /badges page layouts (formerly inline in v2-badges-de.html)
   Moved here so Astro pages inherit the same rules.
   ============================================================ */
.page-hero{
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(40px, 5vw, 64px);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:-10% -5% auto -5%;height:60%;
  background:
    radial-gradient(ellipse 60% 50% at 25% 30%, var(--mint-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 75% 20%, var(--amber-soft) 0%, transparent 60%);
  filter: blur(20px);pointer-events:none;z-index:0;opacity:.85;
}
.page-hero .container{position:relative;z-index:1}
.page-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.page-hero h1{margin:0 0 16px}
.page-hero h1 .accent{
  color:var(--mint);
  background:linear-gradient(120deg, var(--mint) 0%, var(--mint-ink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero .lead{max-width:560px;margin:0 0 16px}
.badge-types{display:flex;gap:8px;flex-wrap:wrap}
.badge-types .chip{font-size:12px}

.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.preview-cell{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:var(--shadow-xs);
}
.preview-cell img{width:48px;height:48px;object-fit:contain}
.preview-cell .pname{font-size:11px;font-weight:700;color:var(--ink-2);line-height:1.2}

.badge-grid-section{padding-top: clamp(32px, 4vw, 56px)}
.badge-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:24px 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.badge-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.badge-card img{
  width:120px;height:120px;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(15,20,16,.08));
  transition: transform var(--t-base) var(--ease);
}
.badge-card:hover img{transform:scale(1.05)}
.badge-card h3{font-size:17px;margin:0;line-height:1.2}
.badge-card .badge-cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-ink)}
.badge-card .badge-cat.character{color:var(--amber-ink)}
.badge-card .badge-cat.season{color:var(--sky-ink)}
.badge-card p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.55}

.legend{
  background:var(--surface-2);border-radius:var(--radius-md);
  padding:24px 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:48px;
}
.legend-item{display:flex;flex-direction:column;gap:6px}
.legend-item h4{margin:0;font-size:16px}
.legend-item p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.55}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:8px}
.legend-dot.act{background:var(--mint)}
.legend-dot.cha{background:var(--amber)}
.legend-dot.sea{background:var(--sky)}

@media (max-width:960px){
  .page-hero-grid{grid-template-columns:1fr;gap:32px}
  .preview-grid{grid-template-columns:repeat(4,1fr)}
  .legend{grid-template-columns:1fr}
}
@media (max-width:600px){
  .preview-grid{grid-template-columns:repeat(3,1fr)}
}

/* Play Store icon inside .btn-primary CTAs (encircle_play_store_logo_512x512.webp) */
.btn .btn-play-icon{
  width:28px;height:28px;border-radius:6px;
  object-fit:cover;flex-shrink:0;
  margin-right:6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.btn.btn-primary{display:inline-flex;align-items:center;gap:0}

/* Partner-section Seoul illustration (replaces SVG, uses encirkl-illustration-seoul.webp) */
.partner-illus img{
  width:100%;height:auto;display:block;
  border-radius: calc(var(--radius-lg) - 4px);
}

/* Hero Play Store card (encircle_play_store_logo_512x512.webp as hero illustration) */
.hero-app-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-md);
  text-decoration:none;color:var(--ink);
  max-width:420px;margin:0 auto;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.hero-app-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--mint);
}
.hero-app-card img{
  width:100%;height:auto;aspect-ratio:1/1;
  border-radius:var(--radius-md);
  object-fit:cover;
  display:block;
}
.hero-app-card-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.hero-app-card-eyebrow{
  display:inline-flex;align-items:center;
  background:var(--mint);color:#fff;
  padding:4px 12px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.hero-app-card-text{font-weight:700;color:var(--ink);font-size:15px}

/* ============================================================
   Homepage hero layout (formerly inline in index.html)
   .hero-illus carries no framing — that's the .hero-app-card's job.
   ============================================================ */
.hero{
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-10% -5% auto -5%;height:70%;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, var(--mint-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, var(--amber-soft) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events:none;z-index:0;opacity:.85;
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns: 1.05fr .95fr;gap:64px;align-items:center;
}
.hero h1 .accent{
  color:var(--mint);
  background: linear-gradient(120deg, var(--mint) 0%, var(--mint-ink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.hero .lead{margin:18px 0 28px;max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:14px;color:var(--ink-muted)}
.hero-proof strong{color:var(--ink);font-weight:700}
.hero-proof .sep{width:4px;height:4px;border-radius:50%;background:var(--border-strong)}

/* .hero-illus is now just a grid cell — the card inside provides framing */
.hero-illus{position:relative;display:flex;align-items:center;justify-content:center}

@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width: 600px){
  .hero h1{font-size:38px}
}

/* ============================================================
   /loops page layouts (formerly inline in v2-loops-de.html)
   .page-hero rules already in shared (from /badges) — just add
   loop-card family + featured + grid override.
   ============================================================ */
.loop-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:22px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.loop-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--mint);
}
.loop-card.community::before{background:var(--amber)}
.loop-card.season::before{background:var(--sky)}
.loop-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}
.loop-card .loop-cat{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mint-ink);
}
.loop-card.community .loop-cat{color:var(--amber-ink)}
.loop-card.season .loop-cat{color:var(--sky-ink)}
.loop-card h3{font-size:20px;margin:0;line-height:1.2}
.loop-card .loop-desc{
  margin:0;font-size:14px;color:var(--ink-muted);
  line-height:1.55;flex-grow:1;
}

.loop-stats{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-top:10px;border-top:1px solid var(--border);
}
.loop-stat{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--ink-2);
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--surface-2);
}
.loop-stat svg{width:13px;height:13px;color:var(--ink-muted)}
.loop-stat.mint{background:var(--mint-soft);color:var(--mint-ink)}
.loop-stat.mint svg{color:var(--mint)}
.loop-stat.amber{background:var(--amber-soft);color:var(--amber-ink)}
.loop-stat.amber svg{color:var(--amber)}

.feature-loop{
  background:linear-gradient(120deg, var(--mint-soft) 0%, transparent 70%), var(--surface);
  border:1.5px solid var(--mint);
  margin-bottom:32px;
}
.feature-loop .loop-cat{display:inline-flex;align-items:center;gap:6px}
.feature-loop .loop-cat::before{
  content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px var(--mint-soft);
}

.grid-cards.loops{grid-template-columns:repeat(auto-fill, minmax(290px, 1fr))}

/* Section header used on subpages */
.section-header{max-width:780px;margin:0 auto 36px;text-align:left}
.section-header h2{margin:0 0 8px}
.section-header .lead{margin:0;max-width:680px}

/* ============================================================
   /partner page layouts (formerly inline in v2-partner-de.html)
   .partner-illus* already in shared (homepage PartnerSection).
   .tier.popular::before content moved to i18n-driven markup.
   ============================================================ */
.partner-hero{
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
  position:relative;overflow:hidden;
}
.partner-hero::before{
  content:"";position:absolute;inset:-10% -5% auto -5%;height:70%;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, var(--amber-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 30%, var(--mint-soft) 0%, transparent 60%);
  filter: blur(20px);pointer-events:none;z-index:0;opacity:.85;
}
.partner-hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
.partner-hero h1{line-height:1.08;padding-bottom:.04em}
.partner-hero h1 .accent{
  color:var(--amber-ink);
  background:linear-gradient(120deg, var(--amber) 0%, var(--amber-ink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
  line-height:1.18;padding-bottom:.06em;
}
.partner-hero .lead{margin:18px 0 28px;max-width:560px}
.partner-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.partner-hero-stats{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-muted)}
.partner-hero-stats strong{color:var(--ink);font-weight:700}
.partner-hero-stats .sep{width:4px;height:4px;border-radius:50%;background:var(--border-strong)}

.benefits{background:var(--surface-2)}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.benefit{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:24px;
  display:flex;flex-direction:column;gap:10px;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.benefit .ic{
  width:44px;height:44px;border-radius:var(--radius-sm);
  background:var(--amber-soft);color:var(--amber-ink);
  display:flex;align-items:center;justify-content:center;
}
.benefit .ic svg{width:22px;height:22px}
.benefit h3{font-size:17px;margin:0}
.benefit p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.55}

.setup .step-num{color:var(--amber-ink)}
.setup .step-num .n{background:var(--amber-soft);color:var(--amber-ink)}
.setup .step-illus{background:linear-gradient(180deg, var(--amber-soft), transparent 60%), var(--surface-2)}
.setup .step-illus svg{color:var(--amber)}

.pricing{background:var(--surface-2)}
.pricing-header{max-width:680px;margin:0 auto 48px;text-align:center}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tier.popular{
  border-color:var(--amber);
  background: linear-gradient(180deg, var(--amber-soft) 0%, transparent 26%), var(--surface);
  box-shadow:var(--shadow-sm);
}
/* Note: popular tier badge text now in markup, styled here */
.tier-badge{
  position:absolute;top:-12px;left:24px;
  background:var(--amber);color:#1A140A;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--radius-pill);
}
.tier h3{margin:0;font-size:22px}
.tier-price{display:flex;align-items:baseline;gap:6px}
.tier-price .amount{font-family:'Roca Two',serif;font-weight:800;font-size:40px;color:var(--ink);line-height:1}
.tier-price .per{font-family:'Nunito',sans-serif;font-weight:600;font-size:14px;color:var(--ink-muted)}
.tier .tier-blurb{margin:0;font-size:15px;color:var(--ink-muted);min-height:42px}
.tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tier ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.tier ul li svg{width:16px;height:16px;color:var(--amber);flex-shrink:0;margin-top:4px}
.tier .tier-cta{margin-top:auto;padding-top:14px}

.case-study{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  box-shadow:var(--shadow-md);
}
.case-study .case-meta{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:6px}
.case-study h3{font-size:clamp(22px, 2.4vw, 30px);margin:0 0 14px}
.case-study blockquote{
  margin:0;font-family:'Roca Two',serif;font-style:italic;font-size:18px;
  color:var(--ink-2);line-height:1.5;
  border-left:3px solid var(--amber);padding-left:16px;
}
.case-study cite{display:block;margin-top:8px;font-size:13px;color:var(--ink-soft);font-style:normal}
.case-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.case-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px}
.case-stat .num{font-family:'Roca Two',serif;font-weight:800;font-size:36px;color:var(--amber-ink);line-height:1}
.case-stat .lbl{font-size:13px;color:var(--ink-muted);margin-top:4px}

.faq{display:flex;flex-direction:column;gap:8px;max-width:760px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 22px;transition: border-color var(--t-fast) var(--ease)}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 0;
  display:flex;align-items:center;gap:12px;
  font-family:'Roca Two',serif;font-weight:800;font-size:17px;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:24px;font-weight:300;color:var(--ink-muted);transition: transform var(--t-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 0 18px;color:var(--ink-muted)}
.faq-body p:last-child{margin-bottom:0}

.platform{background:var(--surface-2)}
.platform-header{max-width:680px;margin-bottom:48px}
.platform-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:28px}
.plat-card .ic{
  width:48px;height:48px;border-radius:var(--radius-sm);
  background:var(--mint-soft);color:var(--mint-ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.plat-card .ic svg{width:24px;height:24px}
.plat-card h3{font-size:19px;margin:0 0 8px}
.plat-card p{margin:0;font-size:15px;color:var(--ink-muted);line-height:1.55}

@media (max-width:960px){
  .partner-hero-grid{grid-template-columns:1fr;gap:36px}
  .benefits-grid{grid-template-columns:1fr 1fr}
  .pricing-grid,.platform-cards{grid-template-columns:1fr}
  .case-study{grid-template-columns:1fr;gap:28px;padding:28px}
}
@media (max-width:600px){
  .benefits-grid{grid-template-columns:1fr}
  .case-stats{grid-template-columns:1fr}
}