/* ════════════════════════════════════════════════════════════════
   ZURAI — Design System (light / modern SaaS)
   White-led, bright blue accent, generous whitespace.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg:        #FFFFFF;
  --bg-soft:   #F5F7FB;
  --bg-card:   #FFFFFF;

  /* Ink */
  --ink:       #0B0E16;   /* headings */
  --body:      #565E70;   /* paragraphs (AA on white) */
  --muted:     #8B93A4;   /* labels / tertiary */
  --border:    #E8ECF3;
  --border-2:  #DCE2EC;

  /* Accent */
  --blue:      #2D5BFF;
  --blue-ink:  #1E40D6;   /* hover / pressed */
  --blue-soft: #EEF1FF;   /* icon / chip tint */
  --violet:    #7C5CFF;
  --grad:      linear-gradient(135deg, #2D5BFF 0%, #6E7BFF 55%, #7C5CFF 100%);

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --sh-md: 0 4px 16px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);
  --sh-lg: 0 24px 60px rgba(20,30,70,.12), 0 8px 24px rgba(16,24,40,.06);

  /* Type */
  --display: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  --body-font: 'Inter', 'Noto Sans SC', sans-serif;

  --r:    14px;
  --r-sm: 10px;
  --maxw: 1160px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--body);
  font-family: var(--body-font); font-size: 16px; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--blue-soft); color: var(--blue-ink); }

/* ── Shared bits ── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--blue);
  background: var(--blue-soft); padding: 6px 14px; border-radius: 999px;
}
.sec-hd { max-width: 680px; }
.sec-hd.center { margin: 0 auto; text-align: center; }
.sec-title { font-size: clamp(30px, 4.6vw, 50px); margin: 18px 0 16px; }
.sec-sub { font-size: 18px; color: var(--body); line-height: 1.65; max-width: 560px; text-wrap: balance; }
.sec-hd.center .sec-sub { margin: 0 auto; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body-font); font-size: 15px; font-weight: 600;
  padding: 13px 24px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: transform .16s var(--ease), background .16s, box-shadow .16s, border-color .16s, color .16s;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(45,91,255,.25); }
.btn-primary:hover { background: var(--blue-ink); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(45,91,255,.32); }
.btn-ghost { background: #fff; border-color: var(--border-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; font-size: 15px; transition: gap .16s; }
.link-arrow:hover { gap: 10px; }

/* ════════════════════════════════════════════════════════════════
   NAV (injected by app.js)
   ════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 0 24px; background: rgba(255,255,255,.8); backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.logo-mark svg { width: 30px; height: 30px; border-radius: 9px; display: block; box-shadow: 0 3px 10px rgba(7,9,13,.16); }
.logo-word { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: .04em; color: var(--ink); }
.logo-word .ai { color: var(--blue); }
.nav-center { display: flex; justify-content: center; gap: 4px; }
.nav-link { color: var(--body); font-size: 15px; font-weight: 500; padding: 9px 16px; border-radius: var(--r-sm); transition: color .16s, background .16s; }
.nav-link:hover, .nav-link.active { color: var(--ink); background: var(--bg-soft); }
.nav-right { display: flex; align-items: center; gap: 8px; }

/* Lang */
.lang { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; font-family: var(--body-font); font-size: 14px; font-weight: 600; color: var(--body); padding: 8px 10px; border-radius: var(--r-sm); transition: color .16s, background .16s; }
.lang-btn:hover, .lang.open .lang-btn { color: var(--ink); background: var(--bg-soft); }
.lang-btn svg:last-child { transition: transform .2s; }
.lang.open .lang-btn svg:last-child { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; z-index: 200; background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .15s, transform .15s; box-shadow: var(--sh-lg); }
.lang.open .lang-menu { opacity: 1; pointer-events: auto; transform: none; }
.lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 11px 14px; font-family: var(--body-font); font-size: 14px; color: var(--body); transition: background .12s, color .12s; }
.lang-opt:hover { background: var(--bg-soft); color: var(--ink); }
.lang-opt.active { color: var(--blue); font-weight: 600; }

/* Hamburger */
.burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; border-radius: var(--r-sm); }
.burger:hover { background: var(--bg-soft); }
.burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.m-overlay { display: none; position: fixed; inset: 0; z-index: 98; background: rgba(11,14,22,.35); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s; }
.m-overlay.show { opacity: 1; }
.m-drawer { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; background: #fff; border-bottom: 1px solid var(--border); transform: translateY(-105%); transition: transform .3s var(--ease); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; padding: 12px 18px 22px; box-shadow: var(--sh-md); }
.m-drawer.open { transform: none; }
.m-drawer a { display: block; padding: 14px 8px; color: var(--ink); font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border); }
.m-lang { display: flex; gap: 8px; margin-top: 16px; }
.m-lang button { flex: 1; padding: 11px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--body-font); font-size: 14px; font-weight: 600; color: var(--body); cursor: pointer; transition: all .15s; }
.m-lang button.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */
.hero { position: relative; padding: calc(var(--nav-h) + 70px) 0 80px; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -200px; right: -120px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(45,91,255,.10), transparent 62%); pointer-events: none; z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(340px,.95fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.6vw, 66px); font-weight: 800; letter-spacing: -.03em; }
.hero h1 .acc { color: var(--blue); }
.hero-sub { font-size: 19px; color: var(--body); line-height: 1.6; max-width: 480px; margin-top: 22px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 14px; color: var(--muted); }
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.hero-note a { color: var(--ink); font-weight: 600; }

/* App-window mockup */
.mock { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-lg); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.mock-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #D7DCE5; }
.mock-bar .url { margin-left: 10px; flex: 1; height: 22px; background: #fff; border: 1px solid var(--border); border-radius: 7px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; color: var(--muted); }
.mock-body { display: grid; grid-template-columns: 76px 1fr; min-height: 320px; }
.mock-side { border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.mock-side i { display: block; height: 9px; border-radius: 5px; background: #EDF0F6; }
.mock-side i.on { background: var(--blue-soft); position: relative; }
.mock-side i.on::after { content: ''; position: absolute; left: -12px; top: -3px; width: 3px; height: 15px; border-radius: 2px; background: var(--blue); }
.mock-main { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.mock-row { height: 10px; border-radius: 5px; background: #EDF0F6; }
.mock-row.w70 { width: 70%; } .mock-row.w40 { width: 40%; } .mock-row.w55 { width: 55%; }
.mock-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--sh-sm); }
.mock-card .label { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.mock-card .big { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--ink); margin-top: 6px; }
.mock-card .big .up { color: #22C55E; font-size: 14px; font-weight: 600; margin-left: 6px; }
.mock-spark { margin-top: 12px; height: 46px; }
.mock-spark svg { width: 100%; height: 100%; }
.mock-cta { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.mock-pill { background: var(--grad); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 9px; box-shadow: 0 6px 16px rgba(45,91,255,.28); }
.mock-pill.ghost { background: var(--bg-soft); color: var(--body); box-shadow: none; }
.mock-float { position: absolute; right: -16px; bottom: 36px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-lg); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.mock-float .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.mock-float .ic svg { width: 18px; height: 18px; }
.mock-float .t { font-size: 12px; font-weight: 700; color: var(--ink); }
.mock-float .s { font-size: 11px; color: var(--muted); }

/* logos / trust strip */
.trust { padding: 0 0 40px; }
.trust .wrap { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.trust p { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.trust-row span { font-family: var(--display); font-weight: 700; font-size: 17px; color: #AAB2C2; }

/* ════════════════════════════════════════════════════════════════
   FEATURES (why ZURAI)
   ════════════════════════════════════════════════════════════════ */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 56px; }
.feat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 30px 26px; box-shadow: var(--sh-sm); transition: transform .22s var(--ease), box-shadow .22s; }
.feat:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.feat-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.feat-ic svg { width: 24px; height: 24px; }
.feat h3 { font-size: 20px; margin-bottom: 10px; }
.feat p { font-size: 15px; color: var(--body); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════
   SERVICES
   ════════════════════════════════════════════════════════════════ */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 56px; }
.svc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 26px; box-shadow: var(--sh-sm); transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.svc:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--border-2); }
.svc-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.svc-ic svg { width: 23px; height: 23px; }
.svc h3 { font-size: 19px; margin-bottom: 9px; }
.svc p { font-size: 14.5px; color: var(--body); line-height: 1.6; }
.svc .payoff { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--blue); }

/* ════════════════════════════════════════════════════════════════
   PRODUCTS (vote board)
   ════════════════════════════════════════════════════════════════ */
.group-label { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink); margin: 48px 0 18px; display: flex; align-items: center; gap: 12px; }
.group-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.prod-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); }
.pcard { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 22px 20px; display: flex; flex-direction: column; min-height: 210px; box-shadow: var(--sh-sm); transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.pcard.live { border-color: rgba(45,91,255,.35); box-shadow: 0 8px 28px rgba(45,91,255,.12); }
.pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pcard-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); color: var(--body); }
.pcard-ico svg { width: 22px; height: 22px; }
.pcard.live .pcard-ico { background: var(--blue-soft); color: var(--blue); }
.pcard-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); }
.pcard-badge.is-live { background: var(--blue-soft); color: var(--blue); }
.pcard-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pcard-badge.is-live .dot { animation: pulse 2s infinite; }
.pcard h3 { font-size: 18px; margin-bottom: 7px; }
.pcard p { font-size: 14px; color: var(--body); line-height: 1.55; flex: 1; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.vote-btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 8px 14px 8px 11px; color: var(--ink); font-family: var(--body-font); font-size: 14px; font-weight: 600; transition: border-color .16s, background .16s, transform .12s; }
.vote-btn:hover { border-color: var(--blue); background: var(--blue-soft); }
.vote-btn:active { transform: scale(.97); }
.vote-btn .arrow svg { width: 14px; height: 14px; color: var(--blue); transition: transform .16s; }
.vote-btn:hover .arrow svg { transform: translateY(-2px); }
.vote-btn .count { font-weight: 700; min-width: 14px; text-align: center; }
.vote-btn .label { color: var(--muted); font-weight: 500; font-size: 13px; }
.vote-btn.voted { border-color: var(--blue); background: var(--blue-soft); cursor: default; }
.vote-btn.voted .label { color: var(--blue); }
.pcard-link { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-weight: 600; font-size: 14px; transition: gap .16s; }
.pcard-link:hover { gap: 11px; }
.vchip { font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 4px 11px; }

/* ════════════════════════════════════════════════════════════════
   PROCESS
   ════════════════════════════════════════════════════════════════ */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 56px; }
.step { position: relative; padding-top: 28px; }
.step .num { position: absolute; top: 0; left: 0; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--blue); background: var(--blue-soft); width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.step h3 { font-size: 19px; margin: 18px 0 8px; }
.step p { font-size: 15px; color: var(--body); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════
   CTA BAND
   ════════════════════════════════════════════════════════════════ */
.cta-band { position: relative; background: var(--grad); border-radius: 24px; padding: 64px 48px; text-align: center; overflow: hidden; box-shadow: var(--sh-lg); }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 50%); pointer-events: none; }
.cta-band h2 { color: #fff; font-size: clamp(28px,4vw,44px); margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.85); font-size: 17px; margin-bottom: 28px; }
.cta-band .btn-primary { background: #fff; color: var(--blue-ink); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.cta-band .btn-primary:hover { background: #fff; color: var(--blue-ink); transform: translateY(-1px); }
.cta-band .btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.cta-points { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.cta-points span { padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 14px; font-weight: 500; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   PROSE (About / Blog) + CONTACT
   ════════════════════════════════════════════════════════════════ */
.prose { max-width: 720px; }
.prose p { color: var(--body); line-height: 1.8; margin: 0 0 20px; font-size: 17px; }
.prose .lead { font-size: 21px; color: var(--ink); font-weight: 500; line-height: 1.55; }
.prose h2 { font-size: clamp(24px,3.4vw,34px); margin: 48px 0 16px; }
.prose h3 { font-size: 20px; margin: 32px 0 12px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote { border-left: 3px solid var(--blue); padding-left: 20px; margin: 28px 0; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 22px; }

.value-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin: 40px 0; }
.value-row .v { background: var(--bg-soft); border-radius: var(--r); padding: 24px; }
.value-row .v h4 { font-size: 17px; margin-bottom: 8px; }
.value-row .v p { font-size: 14.5px; margin: 0; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 22px; margin-top: 52px; }
.post-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 26px; min-height: 210px; box-shadow: var(--sh-sm); transition: transform .22s var(--ease), box-shadow .22s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.post-card .meta { font-size: 13px; font-weight: 600; color: var(--blue); }
.post-card h3 { font-size: 21px; margin: 14px 0 10px; line-height: 1.25; }
.post-card p { font-size: 15px; color: var(--body); line-height: 1.55; flex: 1; }
.post-card .more { margin-top: 18px; font-weight: 600; color: var(--blue); font-size: 14px; }
.article { max-width: 720px; margin: 0 auto; }
.article-hd { margin-bottom: 40px; }
.article-hd .meta { font-size: 14px; font-weight: 600; color: var(--blue); }
.article-hd h1 { font-size: clamp(30px,5vw,46px); margin: 16px 0; }

.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; margin-top: 52px; align-items: start; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.field input, .field textarea { width: 100%; background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 13px 15px; color: var(--ink); font-family: var(--body-font); font-size: 15px; transition: border-color .16s, box-shadow .16s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.field textarea { resize: vertical; min-height: 130px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 22px; margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 600; }
.form-status.success { color: #16803a; }
.form-status.error { color: #b42318; }
.contact-aside { background: var(--bg-soft); border-radius: var(--r); padding: 28px; }
.contact-aside .row { display: flex; align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.contact-aside .row:last-child { border-bottom: none; }
.contact-aside .row .ic { width: 40px; height: 40px; border-radius: 11px; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); flex-shrink: 0; }
.contact-aside .row .ic svg { width: 19px; height: 19px; }
.contact-aside .row a, .contact-aside .row span.val { color: var(--ink); font-size: 15px; font-weight: 600; }
.contact-aside .row .l { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
   FOOTER (injected by app.js)
   ════════════════════════════════════════════════════════════════ */
.footer { background: var(--bg-soft); border-top: 1px solid var(--border); }
.footer .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-top: 60px; padding-bottom: 36px; }
.footer .brand .nav-logo { margin-bottom: 14px; }
.footer .brand p { font-size: 14.5px; color: var(--body); max-width: 300px; line-height: 1.65; }
.footer .col h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.footer .col a { display: block; color: var(--body); font-size: 14.5px; padding: 6px 0; transition: color .16s; }
.footer .col a:hover { color: var(--blue); }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.footer-bottom p { font-size: 13px; color: var(--muted); }

/* Floating WhatsApp */
.fab-wa { display: none; position: fixed; bottom: 24px; right: 20px; z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(37,211,102,.4); transition: transform .2s; }
.fab-wa:hover { transform: scale(1.08); }
.fab-wa svg { width: 27px; height: 27px; }

/* ════════════════════════════════════════════════════════════════
   REVEAL + animation
   ════════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.stagger.visible > * { opacity: 1; transform: none; }
.stagger.visible > *:nth-child(2){ transition-delay:.07s } .stagger.visible > *:nth-child(3){ transition-delay:.14s }
.stagger.visible > *:nth-child(4){ transition-delay:.21s } .stagger.visible > *:nth-child(5){ transition-delay:.28s }
.stagger.visible > *:nth-child(6){ transition-delay:.35s }
.stagger.done > * { transition-delay: 0s !important; }

.hero-copy > * { opacity: 0; animation: rise .8s var(--ease) forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.05s } .hero-copy > *:nth-child(2){ animation-delay:.13s }
.hero-copy > *:nth-child(3){ animation-delay:.21s } .hero-copy > *:nth-child(4){ animation-delay:.29s }
.hero-copy > *:nth-child(5){ animation-delay:.37s }
.hero-visual { opacity: 0; animation: rise 1s var(--ease) .25s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 940px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-right > .btn { display: none; }
  .nav-center { display: none; }
  .burger { display: flex; }
  .m-overlay { display: block; }
  .fab-wa { display: flex; }
  section { padding: 70px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .feat-grid, .svc-grid, .steps, .value-row { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .footer .brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .hero-ctas, .cta-btns { flex-direction: column; }
  .hero-ctas .btn, .cta-btns .btn { width: 100%; }
  .feat-grid, .svc-grid, .steps, .value-row, .prod-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 44px 24px; }
  .mock-float { display: none; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal, .stagger > *, .hero-copy > *, .hero-visual { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   HERO ANIMATIONS (awwwards-style, restrained)
   ════════════════════════════════════════════════════════════════ */
.hero-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-aurora span { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; }
.hero-aurora span:nth-child(1) { width: 460px; height: 460px; top: -140px; right: 4%; background: radial-gradient(circle, rgba(45,91,255,.30), transparent 70%); animation: aur1 15s ease-in-out infinite; }
.hero-aurora span:nth-child(2) { width: 380px; height: 380px; top: 90px; right: 26%; background: radial-gradient(circle, rgba(124,92,255,.24), transparent 70%); animation: aur2 19s ease-in-out infinite; }
.hero-aurora span:nth-child(3) { width: 320px; height: 320px; top: -40px; left: -90px; background: radial-gradient(circle, rgba(45,91,255,.14), transparent 70%); animation: aur3 17s ease-in-out infinite; }
@keyframes aur1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-34px,46px) scale(1.08)} }
@keyframes aur2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(46px,-30px) scale(1.05)} }
@keyframes aur3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(24px,34px)} }

.mock { transition: transform .3s var(--ease); transform-style: preserve-3d; will-change: transform; }
.mock-float { animation: bob 4.5s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── footer language select ── */
.footer-bottom .foot-right { display: flex; align-items: center; gap: 18px; }
.foot-lang { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%238B93A4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--border-2); border-radius: 9px; padding: 9px 32px 9px 14px; font-family: var(--body-font); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .16s; }
.foot-lang:hover { border-color: var(--ink); }
.foot-lang:focus { outline: none; border-color: var(--blue); }

/* ════════════════════════════════════════════════════════════════
   SUPPORT / TIPS PAGE
   ════════════════════════════════════════════════════════════════ */
.support-hero { text-align: center; max-width: 680px; margin: 0 auto; }
.support-hero .sec-sub { margin: 0 auto; }
.support-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.btn-kofi { background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: #fff; box-shadow: 0 8px 20px rgba(255,107,107,.3); }
.btn-kofi:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255,107,107,.4); color: #fff; }
.btn-kofi svg { width: 18px; height: 18px; }

.tier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 52px; }
.tier { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 26px; text-align: center; box-shadow: var(--sh-sm); transition: transform .22s var(--ease), box-shadow .22s; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.tier.featured { border-color: rgba(45,91,255,.4); box-shadow: 0 10px 30px rgba(45,91,255,.12); }
.tier .emoji { font-size: 30px; }
.tier .amt { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--ink); margin: 12px 0 4px; }
.tier .amt span { font-size: 15px; font-weight: 600; color: var(--muted); }
.tier h3 { font-size: 17px; margin: 10px 0 8px; }
.tier p { font-size: 14px; color: var(--body); }

.kofi-embed { max-width: 540px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-md); background: #f9f9f9; }
.kofi-embed iframe { display: block; }

/* two-column support layout: tiers left, Ko-fi widget right */
.support-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.support-split .kofi-embed { max-width: none; margin: 0; }
.tier-stack { display: flex; flex-direction: column; gap: 16px; }
.tier-stack .tier { display: flex; align-items: center; gap: 20px; text-align: left; padding: 22px 24px; }
.tier-left { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; flex-shrink: 0; }
.tier-left .emoji { font-size: 28px; }
.tier-left .amt { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--ink); margin-top: 4px; }
.tier-text h3 { font-size: 17px; margin-bottom: 5px; }
.tier-text p { font-size: 14px; color: var(--body); line-height: 1.55; }
@media (max-width: 940px) {
  .support-split { grid-template-columns: 1fr; gap: 28px; }
  .support-split .kofi-embed { max-width: 540px; margin: 0 auto; width: 100%; }
}

.board { margin-top: 40px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); }
.board-row { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.board-row:last-child { border-bottom: none; }
.board-rank { width: 26px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--muted); flex-shrink: 0; }
.board-row.r1 .board-rank, .board-row.r2 .board-rank, .board-row.r3 .board-rank { font-size: 0; }
.board-row.r1 .board-rank::after { content: '🥇'; font-size: 19px; }
.board-row.r2 .board-rank::after { content: '🥈'; font-size: 19px; }
.board-row.r3 .board-rank::after { content: '🥉'; font-size: 19px; }
.board-av { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 15px; flex-shrink: 0; }
.board-main { flex: 1; min-width: 0; }
.board-name { font-weight: 600; color: var(--ink); font-size: 15px; }
.board-msg { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-amt { font-weight: 700; color: var(--blue); font-size: 15px; flex-shrink: 0; }
.board-empty { padding: 40px 22px; text-align: center; color: var(--muted); font-size: 15px; }

@media (max-width: 940px) { .tier-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }
@media (max-width: 560px) { .board-msg { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-aurora span, .mock-float, .spark-line { animation: none !important; }
  .spark-line { stroke-dashoffset: 0 !important; }
}