/* Hallmark · macrostructure: Guided Money Journey · tone: professional, warm, approachable · anchor hue: sky-blue */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · contrast: pass (40–41) · nav: N5 · footer: Ft2 · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (34, 49, 50–57) */
:root {
  --color-paper: oklch(98.5% 0.012 225);
  --color-paper-2: oklch(96.2% 0.025 220);
  --color-paper-3: oklch(91.5% 0.06 215);
  --color-ink: oklch(28% 0.055 235);
  --color-ink-2: oklch(46% 0.045 230);
  --color-muted: oklch(55% 0.04 225);
  --color-rule: oklch(88% 0.035 220);
  --color-accent: oklch(62% 0.15 220);
  --color-accent-strong: oklch(50% 0.14 224);
  --color-accent-ink: oklch(99% 0.005 220);
  --color-mint: oklch(72% 0.13 165);
  --color-mint-soft: oklch(93% 0.045 165);
  --color-focus: oklch(58% 0.19 245);
  --color-ink-on-dark: oklch(99% 0.005 220);
  --color-ink-rule: oklch(99% 0.005 220 / 0.25);
  --color-ink-soft: oklch(99% 0.005 220 / 0.72);
  --color-ink-wash: oklch(99% 0.005 220 / 0.1);
  --color-accent-shadow: oklch(62% 0.15 220 / 0.25);
  --color-strong-shadow: oklch(50% 0.14 224 / 0.22);
  --color-ink-shadow: oklch(28% 0.055 235 / 0.2);
  --font-display: 'Plus Jakarta Sans', 'Anuphan', sans-serif;
  --font-body: 'Anuphan', sans-serif;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.45rem;
  --text-display: clamp(2.8rem, 7vw, 5.7rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 180ms;
  --dur-medium: 420ms;
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --shadow-soft: 0 1.5rem 4rem oklch(28% 0.055 235 / 0.1);
  --shadow-deep: 0 1.5rem 5rem oklch(28% 0.055 235 / 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; overflow-x: clip; }
body, button, input, select { -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; font: inherit; }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.04em; line-height: 1.08; overflow-wrap: anywhere; min-width: 0; }
.container { width: min(1160px, calc(100% - 3rem)); margin-inline: auto; }
.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 5.25rem; gap: var(--space-md); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--color-ink); font: 800 1.15rem/1 var(--font-display); white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 1rem 1rem 1rem 0.25rem; color: var(--color-accent-ink); background: var(--color-accent-strong); box-shadow: 0 0.55rem 1.4rem var(--color-accent-shadow); }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-note { color: var(--color-muted); font-size: var(--text-sm); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.25rem; border-radius: var(--radius-pill); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button-primary { color: var(--color-accent-ink); background: var(--color-accent-strong); box-shadow: 0 0.75rem 1.75rem var(--color-strong-shadow); }
.button-primary:hover { background: var(--color-ink); box-shadow: 0 1rem 2rem var(--color-ink-shadow); }
.button-secondary { color: var(--color-accent-strong); background: var(--color-paper-2); }
.button-secondary:hover { background: var(--color-paper-3); }
.button-mint { color: var(--color-ink); background: var(--color-mint); }
.button-mint:hover { background: var(--color-mint-soft); }
.hero { position: relative; padding: clamp(4rem, 9vw, 8rem) 0 clamp(5.5rem, 11vw, 10rem); background: var(--color-paper-2); overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -12rem; bottom: -16rem; width: 40rem; height: 40rem; border: 1px solid var(--color-paper-3); border-radius: 50%; opacity: 0.8; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.hero-copy { max-width: 44rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-accent-strong); font-size: var(--text-sm); font-weight: 700; }
.eyebrow::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 0 0.3rem var(--color-mint-soft); }
.hero h1 { max-width: 10ch; margin-top: var(--space-md); color: var(--color-ink); font-size: var(--text-display); }
.hero h1 span { color: var(--color-accent); }
.hero-lede { max-width: 40rem; margin-top: var(--space-lg); color: var(--color-ink-2); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero-trust { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.hero-trust span { color: var(--color-mint); font-size: 1.2rem; }
.hero-map { position: relative; min-height: 28rem; }
.map-orbit { position: absolute; inset: 7% 4% 2% 8%; border: 1px solid var(--color-paper-3); border-radius: 48% 52% 46% 54%; transform: rotate(-8deg); }
.map-orbit::after { content: ''; position: absolute; inset: 12% 11%; border: 1px dashed var(--color-accent); border-radius: 55% 45% 52% 48%; opacity: 0.5; }
.map-card { position: absolute; top: 12%; right: 2%; width: min(23rem, 90%); padding: var(--space-lg); border: 1px solid var(--color-paper-3); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: var(--shadow-deep); transform: rotate(3deg); }
.map-card-top, .map-card-bottom { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.map-card h2 { margin-top: var(--space-lg); font-size: var(--text-xl); }
.map-amount { margin-top: 0.25rem; color: var(--color-accent-strong); font: 800 clamp(2rem, 5vw, 3.25rem)/1 var(--font-display); letter-spacing: -0.08em; }
.map-progress { height: 0.6rem; margin: var(--space-lg) 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.map-progress span { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--color-mint); }
.map-pin { position: absolute; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 0.5rem solid var(--color-paper-2); border-radius: 50%; color: var(--color-accent-ink); background: var(--color-accent-strong); font: 800 1.25rem/1 var(--font-display); box-shadow: var(--shadow-soft); }
.pin-one { top: 4%; left: 2%; }
.pin-two { right: 0; bottom: 14%; background: var(--color-mint); color: var(--color-ink); }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section-head { max-width: 45rem; }
.section-head h2 { margin-top: var(--space-sm); color: var(--color-ink); font-size: clamp(2.2rem, 5vw, 4rem); }
.section-head p { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-md); }
.audience { background: var(--color-paper); }
.audience-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; }
.audience-list { display: grid; gap: 0; margin-top: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.audience-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.audience-index { color: var(--color-accent); font: 800 var(--text-sm)/1 var(--font-display); }
.audience-item h3 { font-size: var(--text-lg); }
.audience-item p { margin-top: 0.2rem; color: var(--color-muted); font-size: var(--text-sm); }
.audience-arrow { color: var(--color-accent-strong); font-size: 1.25rem; }
.journey { color: var(--color-accent-ink); background: var(--color-ink); }
.journey .section-head h2, .journey .section-head p { color: var(--color-accent-ink); }
.journey .section-head p { opacity: 0.75; }
.journey-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--space-2xl); border-top: 1px solid var(--color-ink-rule); }
.journey-step { min-height: 16rem; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-right: 1px solid var(--color-ink-rule); }
.journey-step + .journey-step { padding-left: var(--space-lg); }
.journey-step:last-child { border-right: 0; }
.step-number { color: var(--color-mint); font: 800 2rem/1 var(--font-display); }
.journey-step h3 { margin-top: var(--space-xl); color: var(--color-accent-ink); font-size: var(--text-lg); }
.journey-step p { margin-top: var(--space-sm); color: var(--color-ink-soft); font-size: var(--text-sm); }
.principles { background: var(--color-paper-2); }
.principles-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 8vw, 8rem); align-items: start; }
.principle-list { display: grid; gap: var(--space-md); }
.principle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.principle-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--color-accent-strong); background: var(--color-paper-3); font-weight: 800; }
.principle h3 { font-size: var(--text-lg); }
.principle p { margin-top: 0.3rem; color: var(--color-muted); }
.contact { padding-top: clamp(4.5rem, 9vw, 8rem); background: var(--color-accent-strong); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.contact h2 { color: var(--color-accent-ink); font-size: clamp(2.4rem, 5vw, 4.2rem); }
.contact-lede { margin-top: var(--space-md); color: var(--color-ink-soft); font-size: var(--text-md); }
.line-panel { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); padding: var(--space-md); border: 1px solid var(--color-ink-rule); border-radius: var(--radius-md); background: var(--color-ink-wash); }
.line-panel img { width: 6.5rem; height: 6.5rem; flex: 0 0 6.5rem; border-radius: var(--radius-sm); background: var(--color-accent-ink); }
.line-panel strong { display: block; color: var(--color-accent-ink); font: 700 var(--text-lg)/1.2 var(--font-display); }
.line-panel span { display: block; margin-top: 0.4rem; color: var(--color-ink-soft); font-size: var(--text-sm); }
.line-panel a { display: inline-flex; margin-top: var(--space-xs); color: var(--color-mint); font-weight: 700; }
.form-card { padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: var(--shadow-deep); }
.form-card h3 { font-size: var(--text-xl); }
.form-card label { display: block; margin-top: var(--space-md); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }
.form-card input, .form-card select { width: 100%; min-height: 3rem; margin-top: 0.4rem; padding: 0.75rem 0.9rem; border: 1px solid var(--color-rule); border-radius: var(--radius-sm); outline: 2px solid transparent; color: var(--color-ink); background: var(--color-paper); font: inherit; }
.form-card input:hover, .form-card select:hover { border-color: var(--color-accent); }
.form-card input:focus-visible, .form-card select:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-focus); outline-offset: 1px; }
.form-card .button { width: 100%; margin-top: var(--space-lg); }
.form-note { min-height: 1lh; margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); text-align: center; }
.success { display: none; min-height: 1lh; margin-top: var(--space-sm); padding: var(--space-xs); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-mint-soft); text-align: center; font-size: var(--text-sm); }
.footer { padding: var(--space-lg) 0; color: var(--color-muted); background: var(--color-paper); font-size: var(--text-xs); }
.footer-inner { display: flex; justify-content: space-between; gap: var(--space-md); }
.footer a { color: var(--color-accent-strong); font-weight: 700; }
.reveal { animation: reveal var(--dur-medium) var(--ease-out) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 820px) { .container { width: min(100% - 2rem, 1160px); } .nav-note { display: none; } .hero { padding-top: 3.5rem; } .hero-grid, .audience-layout, .principles-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } .hero h1 { max-width: 8ch; } .hero-map { min-height: 21rem; order: 2; } .map-card { right: 4%; width: min(21rem, 90%); } .journey-steps { grid-template-columns: minmax(0, 1fr); } .journey-step, .journey-step + .journey-step { min-height: auto; padding: var(--space-lg) 0; border-right: 0; border-bottom: 1px solid var(--color-ink-rule); } .journey-step:last-child { border-bottom: 0; } .journey-step h3 { margin-top: var(--space-md); } .footer-inner { flex-direction: column; } }
@media (max-width: 480px) { .brand { font-size: 1rem; } .brand-mark { width: 2.4rem; height: 2.4rem; } .nav .button { min-height: 2.75rem; padding-inline: 1rem; font-size: var(--text-sm); } .hero-actions { align-items: stretch; flex-direction: column; } .hero-actions .button { width: 100%; } .hero-map { min-height: 19rem; } .map-card { padding: var(--space-md); } .map-pin { width: 2.8rem; height: 2.8rem; border-width: 0.35rem; font-size: 1rem; } .pin-two { right: 2%; } .audience-item { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--space-sm); } .line-panel { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }