/* web/shared.css — W1 Design System */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');

/* ── W1 PALETTE ── */
:root {
  --bg:         #EEEEF0;
  --bg-card:    #FFFFFF;
  --bg-soft:    #F5F5F7;
  --bg-chip:    #E5E5E8;
  --ink:        #0A0A0A;
  --text-2:     #555555;
  --text-3:     #888888;
  --line:       #E0E0E2;

  --yellow:     #E4FF54;
  --yellow-dp:  #C2DE38;
  --yellow-txt: #3D4A0A;

  --purple:     #A38DFA;
  --purple-s:   #EDE5FF;

  --danger:     #C44A4A;

  --font:       'Onest', -apple-system, sans-serif;
  --mono:       'JetBrains Mono', monospace;

  --r-card:     20px;
  --r-btn:      999px;
  --r-store:    14px;
  --r-sm:       8px;

  --sh-card:    0 4px 20px rgba(10,10,10,0.06);
  --sh-store:   0 4px 20px rgba(0,0,0,0.3);
  --sh-hero:    0 30px 80px rgba(0,0,0,0.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); }

/* ── NAV ── */
.nav {
  background: rgba(238,238,240,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  padding: 0 48px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-size: 18px; font-weight: 900;
  letter-spacing: -0.05em; color: var(--ink);
  text-decoration: none;
}
.nav-logo .dot {
  display: inline-block; width: 8px; height: 8px;
  background: var(--yellow); border-radius: 50%;
  margin-left: 1px; vertical-align: middle;
  position: relative; top: -2px;
}
.audience-toggle {
  display: flex; background: var(--bg-chip);
  border-radius: var(--r-btn); padding: 3px; gap: 2px;
}
.aud-btn {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  padding: 6px 18px; border-radius: var(--r-btn);
  border: none; cursor: pointer; transition: all 0.18s;
  background: transparent; color: var(--text-3);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.aud-btn.active { background: var(--ink); color: white; }
.nav-cta {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  padding: 9px 20px; border-radius: var(--r-btn);
  border: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-cta.dark   { background: var(--ink); color: white; }
.nav-cta.yellow { background: var(--yellow); color: var(--yellow-txt); }

/* ── SECTION LABELS ── */
.sec-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px; display: block;
}
.sec-h2 {
  font-size: 40px; font-weight: 900;
  letter-spacing: -0.035em; line-height: 1.05;
  margin-bottom: 48px;
}
.sec-h2 em { font-style: normal; background: var(--yellow); padding: 0 5px; border-radius: 6px; }

/* ── APP STORE BUTTONS ── */
.btn-store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--r-store);
  font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-store:hover { transform: translateY(-1px); }
.btn-store.light  { background: white; color: var(--ink); box-shadow: var(--sh-store); }
.btn-store.dark   { background: var(--ink); color: white; box-shadow: 0 8px 30px rgba(10,10,10,0.2); }
.btn-store.yellow { background: var(--yellow); color: var(--yellow-txt); box-shadow: 0 8px 30px rgba(228,255,84,0.3); }
.btn-store .store-icon { font-size: 22px; }
.btn-store .store-label { display: flex; flex-direction: column; }
.btn-store .store-label .line1 { font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; opacity: 0.5; }
.btn-store .store-label .line2 { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }

/* ── GHOST BUTTON ── */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7); padding: 14px 22px; border-radius: var(--r-store);
  font-family: var(--font); font-weight: 700; font-size: 13px;
  text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.13); }

/* ── FAQ (shared) ── */
.faq-list { max-width: 720px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--bg-card); border-radius: 16px; padding: 22px 28px;
  box-shadow: 0 2px 8px rgba(10,10,10,0.04); text-align: center;
}
.faq-q { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.faq-a { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* ── FOOTER ── */
footer {
  background: var(--ink); padding: 36px 48px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.05); gap: 20px; flex-wrap: wrap;
}
.footer-logo {
  font-size: 20px; font-weight: 900;
  letter-spacing: -0.05em; color: white; text-decoration: none;
}
.footer-logo .dot { color: var(--yellow); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 12px; color: rgba(255,255,255,0.3); text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: rgba(255,255,255,0.6); }
.footer-cap { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.18); }

/* ── PULSE ANIMATION ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
.pulse {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; animation: pulse 2s ease-in-out infinite;
}

/* ── UTILITIES ── */
.text-center { text-align: center; }
.section { padding: 80px 48px; }

/* ── EDITORIAL: BOLD SECTION (left yellow border) ── */
.bold-section { padding: 0 48px; }
.bold-section-inner {
  max-width: 1200px; margin: 0 auto;
  border-left: 3px solid var(--yellow);
  padding: 96px 0 96px 64px;
}
.bold-h {
  font-size: 80px; font-weight: 900;
  letter-spacing: -0.04em; line-height: 0.92;
  color: white; margin: 0; max-width: 860px;
}
.bold-h .acc { color: var(--yellow); }

/* ── EDITORIAL: NUMBERED LIST ── */
.num-list { display: flex; flex-direction: column; margin-top: 56px; }
.num-item {
  display: flex; align-items: flex-start; gap: 48px;
  padding: 40px 0; border-bottom: 1px solid var(--line);
}
.num-item:last-child { border-bottom: none; }
.num-item .num {
  font-size: 52px; font-weight: 900; letter-spacing: -0.04em;
  color: var(--yellow); line-height: 1; min-width: 90px; flex-shrink: 0;
}
.num-item .num-body { flex: 1; }
.num-item .num-title {
  font-size: 26px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.1;
}
.num-item .num-desc { font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 540px; }

/* Dark variant */
.num-list.dark .num-item { border-bottom-color: rgba(255,255,255,0.07); }
.num-list.dark .num-title { color: white; }
.num-list.dark .num-desc  { color: rgba(255,255,255,0.45); }

/* ── EDITORIAL: MINI STEPS (horizontal 5-col) ── */
.mini-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 56px; }
.mini-step { padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--line); }
.mini-step:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.mini-step .ms-n { font-size: 36px; font-weight: 900; color: var(--yellow); letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; }
.mini-step .ms-t { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; }
.mini-step .ms-time { font-family: var(--mono); font-size: 9px; color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.mini-step .ms-d { font-size: 12px; color: var(--text-2); line-height: 1.5; }

/* ── EDITORIAL: CHECK LIST ── */
.check-list { display: flex; flex-direction: column; max-width: 780px; margin: 48px auto 0; }
.check-item { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: none; }
.check-mark { width: 28px; height: 28px; background: var(--yellow); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--yellow-txt); flex-shrink: 0; margin-top: 2px; }
.check-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.check-desc  { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* ── ICON SVG SYSTEM ── */
.icon-svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Overrides for dark icon wraps */
.feat-icon.dark .icon-svg,
.benefit-icon.dark .icon-svg { stroke: white; }
.beta-card .icon-svg { stroke: var(--yellow); fill: none; }
.shift-item .icon-svg,
.shift-parking .icon-svg { stroke: rgba(255,255,255,0.65); }
.step-ico .icon-svg { stroke: var(--ink); }

/* ── RESPONSIVE (shared) ── */
@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav-logo { font-size: 16px; }
  .aud-btn { padding: 6px 12px; font-size: 11px; }
  .nav-cta { display: none; }
  .section { padding: 56px 20px; }
  .sec-h2  { font-size: 28px; }
  .btn-store { padding: 11px 18px; }
  .faq-item { padding: 18px 20px; }
  footer { flex-direction: column; gap: 16px; text-align: center; padding: 32px 20px; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
}