:root {
  color-scheme: light;
  --ink: #16201f;
  --muted: #60706c;
  --line: #dfe7e2;
  --paper: #fbfcf8;
  --soft: #eef5ef;
  --mint: #2f8f6d;
  --teal: #126878;
  --gold: #c98220;
  --coral: #c85f4a;
  --navy: #24384f;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(22, 32, 31, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(18px, 4vw, 56px);
  background: rgba(251, 252, 248, 0.88);
  border-bottom: 1px solid rgba(223, 231, 226, 0.76);
  backdrop-filter: blur(18px);
}

.brand, .site-nav, .hero-actions, .hero-stats, .site-footer, .site-footer div {
  display: flex;
  align-items: center;
}

.brand { gap: 10px; font-weight: 800; letter-spacing: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, var(--mint), var(--teal));
  font-size: 14px;
}

.site-nav { gap: 22px; font-size: 14px; color: var(--muted); }
.site-nav a:hover { color: var(--ink); }
.header-action { color: var(--teal); font-weight: 700; font-size: 14px; }

.hero {
  min-height: calc(100vh - 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.96fr);
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
  padding: clamp(30px, 5vw, 54px) clamp(20px, 6vw, 84px) 28px;
  background:
    linear-gradient(115deg, rgba(238, 245, 239, 0.95), rgba(255, 255, 255, 0.78) 48%, rgba(250, 239, 222, 0.82)),
    repeating-linear-gradient(90deg, rgba(47,143,109,0.06) 0 1px, transparent 1px 74px);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 760px;
  margin-bottom: 20px;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: 0; margin-bottom: 16px; }
h3 { font-size: 19px; line-height: 1.25; margin-bottom: 10px; }

.hero-lede {
  max-width: 660px;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 19px);
}

.hero-actions { gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  font: inherit;
}
.button.primary { background: var(--ink); color: white; border-color: var(--ink); }
.button.secondary { background: white; color: var(--ink); }
.button:hover { transform: translateY(-1px); }

.hero-stats { gap: 10px; flex-wrap: wrap; }
.hero-stats div {
  min-width: 150px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.75);
}
.hero-stats dt { font-weight: 800; }
.hero-stats dd { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.phone-stage { position: relative; min-height: 500px; display: grid; place-items: center; }
.phone-shell {
  width: min(250px, 72vw);
  aspect-ratio: 0.51;
  border-radius: 36px;
  padding: 16px;
  background: #101918;
  box-shadow: var(--shadow);
}
.phone-bar { width: 92px; height: 5px; border-radius: 999px; background: #31413f; margin: 0 auto 14px; }
.app-screen {
  height: calc(100% - 19px);
  overflow: hidden;
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(180deg, #f7fbf8, #e8f1ea);
}
.screen-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.screen-top span { color: var(--muted); font-size: 13px; }
.screen-top strong { color: var(--teal); font-size: 21px; }
.scan-card, .comparison-panel, .feature-card, .privacy-grid div, .timeline div, .faq-section details, .contact-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.scan-card { padding: 18px; margin-bottom: 12px; }
.scan-line { display: block; height: 10px; border-radius: 999px; background: #d8e4dc; margin-bottom: 11px; }
.scan-line.long { width: 86%; }
.scan-line.medium { width: 66%; }
.scan-line.short { width: 46%; }
.receipt-total, .list-row { display: flex; justify-content: space-between; gap: 12px; }
.receipt-total { padding-top: 14px; border-top: 1px dashed #cbd8d1; }
.list-row { padding: 13px 0; border-bottom: 1px solid #dfe7e2; font-size: 14px; }
.chart-preview { height: 118px; display: flex; align-items: end; gap: 10px; padding-top: 20px; }
.chart-preview span { flex: 1; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--gold), var(--mint)); }
.floating-note { position: absolute; width: 210px; padding: 14px; border-radius: 8px; background: white; box-shadow: 0 18px 40px rgba(22,32,31,0.16); }
.floating-note strong, .floating-note span { display: block; }
.floating-note span { color: var(--muted); font-size: 13px; }
.note-one { left: 0; bottom: 42px; }
.note-two { right: 0; top: 42px; }

.section, .split-section, .faq-section, .contact-section { padding: clamp(56px, 8vw, 96px) clamp(20px, 6vw, 84px); }
.intro-band { background: var(--ink); color: white; }
.intro-band p { max-width: 1040px; margin: 0 auto; font-size: clamp(20px, 3vw, 33px); line-height: 1.32; }
.section-heading { max-width: 760px; margin-bottom: 34px; }
.section-heading p:not(.eyebrow), .split-section p { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.feature-card { padding: 22px; min-height: 260px; }
.feature-card p, .privacy-grid p, .timeline p, .faq-section p, .contact-section p { color: var(--muted); }
.feature-icon { display: inline-grid; place-items: center; width: 38px; height: 32px; margin-bottom: 28px; border-radius: 8px; background: var(--soft); color: var(--teal); font-weight: 800; }

.split-section { display: grid; grid-template-columns: 1fr 0.86fr; gap: clamp(28px, 6vw, 72px); align-items: center; background: #ffffff; }
.comparison-panel { padding: 18px; box-shadow: var(--shadow); }
.panel-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.panel-head { color: var(--muted); font-size: 13px; font-weight: 700; }
.trend-line { height: 90px; margin-top: 20px; border-radius: 8px; background: linear-gradient(135deg, rgba(47,143,109,0.20), rgba(201,130,32,0.24)), repeating-linear-gradient(90deg, transparent 0 44px, rgba(18,104,120,0.12) 45px 46px); }

.quiet { background: var(--soft); }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.privacy-grid div, .timeline div { padding: 24px; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.timeline span { display: inline-block; margin-bottom: 18px; color: var(--coral); font-weight: 800; }

.faq-section { background: #ffffff; }
.faq-section h2 { max-width: 980px; margin-left: auto; margin-right: auto; }
.faq-section details { max-width: 980px; margin: 12px auto; padding: 18px 20px; }
.faq-section summary { cursor: pointer; font-weight: 800; }
.faq-section p { margin: 12px 0 0; }

.contact-section { display: grid; grid-template-columns: 0.9fr 1fr; gap: clamp(24px, 6vw, 72px); align-items: start; background: var(--navy); color: white; }
.contact-section p, .contact-section .eyebrow { color: rgba(255,255,255,0.78); }
.contact-form { padding: 22px; color: var(--ink); }
.contact-form label { display: block; font-weight: 800; margin-bottom: 14px; }
input, textarea {
  width: 100%;
  margin-top: 7px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
textarea { resize: vertical; }

.site-footer { justify-content: space-between; gap: 16px; padding: 24px clamp(20px, 6vw, 84px); background: #101918; color: rgba(255,255,255,0.72); }
.site-footer p { margin: 0; }
.site-footer div { gap: 16px; }

.policy-main {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(42px, 7vw, 82px) clamp(20px, 5vw, 36px);
}

.policy-main h1 {
  max-width: 860px;
  margin-bottom: 14px;
  font-size: clamp(34px, 5vw, 56px);
}

.policy-lede {
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
}

.policy-card {
  margin-top: 22px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.policy-card h2 {
  font-size: 25px;
}

.policy-card h3 {
  margin-top: 22px;
}

.policy-card ul {
  padding-left: 22px;
}

.policy-card li {
  margin: 8px 0;
}

.policy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
  color: var(--muted);
  font-size: 14px;
}

.policy-meta span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}

.policy-table th,
.policy-table td {
  padding: 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.policy-table th {
  background: var(--soft);
}

.notice {
  padding: 14px;
  border-left: 4px solid var(--gold);
  background: #fff7e9;
}

.construction-body {
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(238, 245, 239, 0.96), rgba(255,255,255,0.86) 48%, rgba(250,239,222,0.9)),
    repeating-linear-gradient(90deg, rgba(47,143,109,0.07) 0 1px, transparent 1px 76px);
}

.construction-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.construction-panel {
  width: min(720px, 100%);
  padding: clamp(34px, 7vw, 64px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

.construction-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  font-weight: 800;
}

.construction-panel h1 {
  margin-bottom: 16px;
  font-size: clamp(40px, 7vw, 74px);
  line-height: 1.02;
}

.construction-panel p {
  max-width: 560px;
  color: var(--muted);
  font-size: 18px;
}

.construction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 18px;
}

.construction-note {
  margin-bottom: 0;
  font-size: 15px !important;
}

.construction-note a {
  color: var(--teal);
  font-weight: 800;
}

@media (max-width: 980px) {
  .site-nav { display: none; }
  .hero, .split-section, .contact-section { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .phone-stage { min-height: 500px; }
  .feature-grid, .privacy-grid, .timeline { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .site-header { padding-inline: 16px; }
  .header-action { display: none; }
  .hero { padding-top: 22px; padding-bottom: 20px; }
  .hero-stats { display: none; }
  .phone-stage { min-height: 250px; }
  .phone-shell { width: min(160px, 46vw); padding: 9px; border-radius: 22px; }
  .phone-bar { width: 52px; margin-bottom: 8px; }
  .app-screen { border-radius: 15px; padding: 9px; }
  .screen-top strong { font-size: 13px; }
  .screen-top span, .list-row { font-size: 10px; }
  .scan-card { padding: 10px; margin-bottom: 6px; }
  .chart-preview { height: 46px; gap: 5px; padding-top: 10px; }
  .floating-note { display: none; }
  .feature-grid, .privacy-grid, .timeline { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}