/* ─────────────────────────────────────────────
   STAMPED  ·  Marketing Site
   Palette: Navy #0F1F3D · Green #00B37E · Light #F7F8FA
   Concept: "Official Record" — document precision,
   institutional weight, Singapore authority.
───────────────────────────────────────────── */

:root {
  --navy:        #0F1F3D;
  --navy-deep:   #0A1628;
  --navy-mid:    #1A3456;
  --navy-muted:  #6B87A8;
  --navy-border: rgba(255,255,255,0.08);
  --green:       #00B37E;
  --green-dk:    #007A54;
  --green-glow:  rgba(0,179,126,0.14);
  --green-ring:  rgba(0,179,126,0.28);
  --light:       #F7F8FA;
  --white:       #FFFFFF;
  --ink:         #0A0A0B;
  --ink-2:       #52525B;
  --ink-3:       #A1A1AA;
  --ink-border:  rgba(10,10,11,0.09);
  --amber:       #F59E0B;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --r:           8px;
  --r-lg:        14px;
  --ease:        cubic-bezier(0.16,1,0.3,1);
  --t:           260ms;
  --section-v:   clamp(4.5rem,8vw,8rem);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--light);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
abbr{text-decoration:underline dotted;cursor:help}

/* ── LAYOUT ── */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.container--narrow{max-width:820px}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* ── SHARED TYPE ── */
.sec-tag{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.875rem;font-variant-numeric:tabular-nums}
.sec-tag--green{color:var(--green)}
.sec-h2{font-size:clamp(1.75rem,1rem+2.5vw,2.875rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin-bottom:1rem}
.sec-h2--light{color:var(--white)}
.sec-header{margin-bottom:clamp(2.5rem,4vw,4rem)}
.sec-sub{font-size:1.0625rem;color:var(--ink-2);line-height:1.72;max-width:56ch}

/* ── BUTTONS ── */
.btn-green{
  display:inline-flex;align-items:center;gap:.375rem;
  background:var(--green);color:#fff;
  font-family:var(--font);font-size:.9375rem;font-weight:600;
  padding:.8125rem 1.625rem;border-radius:var(--r);border:none;cursor:pointer;
  transition:background var(--t) ease,transform var(--t) ease,box-shadow var(--t) ease;
  box-shadow:0 1px 2px rgba(0,0,0,.12)
}
.btn-green:hover{background:var(--green-dk);transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,179,126,.32)}
.btn-green:active{transform:none}
.btn-green--lg{font-size:1.0625rem;padding:1rem 2.125rem}

.btn-ghost{
  display:inline-flex;align-items:center;
  font-size:.9375rem;font-weight:500;color:var(--navy-muted);
  padding:.8125rem 1rem;border-radius:var(--r);
  transition:color var(--t) ease
}
.btn-ghost:hover{color:#fff}

.btn-outline{
  display:inline-flex;align-items:center;
  font-size:.9375rem;font-weight:500;color:var(--ink);
  padding:.8125rem 1.5rem;border-radius:var(--r);
  border:1.5px solid var(--ink-border);
  transition:border-color var(--t) ease,color var(--t) ease,background var(--t) ease
}
.btn-outline:hover{border-color:var(--green);color:var(--green);background:rgba(0,179,126,.04)}

/* ─────────────────────────────────────────────
   NAV
───────────────────────────────────────────── */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(10,22,40,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--navy-border)
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  padding:.875rem clamp(1.25rem,5vw,3rem);
  display:flex;align-items:center;justify-content:space-between
}
.nav-cta{
  font-size:.875rem;font-weight:600;color:var(--green);
  padding:.5rem 1rem;border-radius:var(--r);
  border:1.5px solid var(--green-ring);
  transition:background var(--t) ease,border-color var(--t) ease
}
.nav-cta:hover{background:var(--green-glow)}

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:var(--navy);
  padding:clamp(5rem,10vw,9rem) clamp(1.25rem,5vw,3rem) clamp(4rem,7vw,7rem);
}
/* Official Record hero background — ledger rules, stamp frames, seal geometry */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    url("assets/hero-bg.png") center center / cover no-repeat,
    linear-gradient(150deg,#0F1F3D 0%,#0A1628 100%);
  opacity:.55
}

/* Ghost stamp watermark — bottom-right */
.hero-watermark{
  position:absolute;right:-2%;bottom:-12%;
  width:min(58vw,680px);
  opacity:.045;
  pointer-events:none;user-select:none
}

.hero-layout{
  position:relative;
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:clamp(2.5rem,5vw,7rem);align-items:center
}

/* Badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:500;letter-spacing:.02em;color:var(--navy-muted);
  background:rgba(255,255,255,.04);
  border:1px solid var(--navy-border);
  border-radius:999px;padding:.375rem .875rem;
  margin-bottom:2rem;width:fit-content
}
.badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(0,179,126,.18);
  animation:blink 2.2s ease-in-out infinite;flex-shrink:0
}
@keyframes blink{0%,100%{box-shadow:0 0 0 3px rgba(0,179,126,.18)}50%{box-shadow:0 0 0 6px rgba(0,179,126,.06)}}

/* Headline */
.hero-heading{
  font-size:clamp(3rem,1.5rem+5vw,6.5rem);
  font-weight:800;line-height:1.02;letter-spacing:-.04em;
  color:#fff;margin-bottom:1.5rem
}

.hero-sub{
  font-size:clamp(1rem,.875rem+.5vw,1.1875rem);
  color:var(--navy-muted);line-height:1.72;max-width:52ch;margin-bottom:2.5rem
}

.hero-actions{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}

/* Stats column — styled like official form entries */
.hero-stats{
  display:flex;flex-direction:column;gap:0;
  border-left:1px solid var(--navy-border);
  padding-left:clamp(1.5rem,3vw,3rem)
}
.stat{padding:1.5rem 0;border-bottom:1px solid var(--navy-border)}
.stat:first-child{padding-top:0}
.stat:last-child{border-bottom:none;padding-bottom:0}
.stat-accent{width:1.75rem;height:2px;background:var(--green);margin-bottom:.75rem}
.stat-val{
  font-size:2.75rem;font-weight:800;letter-spacing:-.04em;
  color:#fff;line-height:1;margin-bottom:.375rem;
  font-variant-numeric:tabular-nums
}
.stat-sfx{font-size:1.875rem;letter-spacing:-.02em}
.stat-desc{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-muted);line-height:1.4}

/* Document reference — bottom of hero */
.hero-docref{
  position:absolute;bottom:1.5rem;right:clamp(1.25rem,5vw,3rem);
  display:flex;gap:1.75rem
}
.hero-docref span{font-size:.5625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.18);font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────
   PROBLEM
───────────────────────────────────────────── */
.problem{padding:var(--section-v) 0;background:var(--light)}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

.prob-card{
  background:var(--white);border-radius:var(--r-lg);
  padding:2rem;position:relative;overflow:hidden;
  border:1.5px solid transparent;
  box-shadow:0 1px 4px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.04);
  transition:border-color var(--t) ease,box-shadow var(--t) ease,transform var(--t) ease
}
/* Top accent bar — green on hover */
.prob-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--green);opacity:0;
  transition:opacity var(--t) ease
}
.prob-card:hover{border-color:rgba(0,179,126,.22);box-shadow:0 4px 22px rgba(0,0,0,.08);transform:translateY(-2px)}
.prob-card:hover::before{opacity:1}

/* Document reference tag */
.prob-ref{font-size:.5625rem;font-weight:700;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase;margin-bottom:1.25rem;font-variant-numeric:tabular-nums}
.prob-title{font-size:1.0625rem;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:.75rem}
.prob-body{font-size:.9375rem;color:var(--ink-2);line-height:1.68;margin-bottom:1.5rem}
.prob-outcome{border-top:1.5px solid var(--ink-border);padding-top:1.25rem}
.outcome-label{display:block;font-size:.625rem;font-weight:700;letter-spacing:.14em;color:var(--green);text-transform:uppercase;margin-bottom:.5rem}
.prob-outcome p{font-size:.9375rem;color:var(--ink);font-weight:500;line-height:1.5}

/* ─────────────────────────────────────────────
   HOW IT WORKS
───────────────────────────────────────────── */
.how{
  padding:var(--section-v) 0;
  background:var(--navy);
  border-top:1px solid var(--navy-border)
}

.steps{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:1.5rem;align-items:start;
  margin-top:clamp(2.5rem,4vw,4rem)
}
.step-arrow{align-self:center;color:rgba(255,255,255,.2);font-size:1.25rem;padding-top:.75rem}
.step-n{font-size:.6875rem;font-weight:700;letter-spacing:.14em;color:var(--green);text-transform:uppercase;margin-bottom:.875rem;font-variant-numeric:tabular-nums}
.step-bar{width:2rem;height:2px;background:rgba(255,255,255,.1);margin-bottom:1.25rem}
.step-title{font-size:1.125rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:.625rem}
.step-body{font-size:.9375rem;color:var(--navy-muted);line-height:1.72}

/* ─────────────────────────────────────────────
   PROOF / SINGAPORE
───────────────────────────────────────────── */
.proof{padding:var(--section-v) 0;background:var(--light)}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:center}
.proof-copy .sec-h2{margin-top:.5rem}

.proof-list{display:flex;flex-direction:column;gap:.875rem;margin-top:1.75rem}
.proof-list li{display:flex;align-items:baseline;gap:.625rem;font-size:.9375rem;color:var(--ink-2);line-height:1.5}
.tick{color:var(--green);font-size:.75rem;flex-shrink:0}

.proof-quote{
  background:var(--white);border-radius:var(--r-lg);
  border:1.5px solid var(--ink-border);
  padding:2.75rem;position:relative;
  box-shadow:0 4px 28px rgba(0,0,0,.05)
}
/* Large decorative quote mark */
.q-ornament{
  position:absolute;top:.5rem;left:1.75rem;
  font-family:Georgia,'Times New Roman',serif;
  font-size:6rem;line-height:1;color:var(--green);
  opacity:.15;user-select:none;pointer-events:none
}
.q-text{
  font-size:1.25rem;font-weight:600;color:var(--ink);
  line-height:1.55;font-style:italic;margin-bottom:1.75rem;position:relative
}
.q-footer{display:flex;flex-direction:column;gap:.625rem}
.q-rule{width:2rem;height:2px;background:var(--green)}
.q-footer cite{font-size:.8125rem;color:var(--ink-3);font-style:normal;letter-spacing:.01em}

/* ─────────────────────────────────────────────
   PRICING
───────────────────────────────────────────── */
.pricing{
  padding:var(--section-v) 0;background:var(--light);
  border-top:1.5px solid var(--ink-border)
}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}

.plan{
  background:var(--white);border-radius:var(--r-lg);
  border:1.5px solid var(--ink-border);
  padding:2rem;position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:transform var(--t) ease,box-shadow var(--t) ease
}
.plan:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.08)}
.plan--featured{border-color:var(--green)}
.plan--featured:hover{box-shadow:0 8px 28px rgba(0,179,126,.14)}

.plan-featured-badge{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;
  font-size:.5625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.3125rem .875rem;border-radius:0 0 var(--r) var(--r)
}
.plan-tier{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.875rem;margin-top:.375rem}
.plan--featured .plan-tier{margin-top:1.625rem}

.plan-price-row{display:flex;align-items:baseline;gap:.25rem;margin-bottom:.75rem}
.plan-currency{font-size:.9375rem;color:var(--ink-2);font-weight:500;align-self:flex-end;margin-bottom:.125rem}
.plan-amount{font-size:2.375rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.plan-amount--custom{font-size:2rem}
.plan-cadence{font-size:.875rem;color:var(--ink-3);font-weight:400;align-self:flex-end;margin-bottom:.125rem}

.plan-desc{font-size:.875rem;color:var(--ink-2);line-height:1.6;margin-bottom:1.5rem;min-height:2.8rem}
.plan-feats{display:flex;flex-direction:column;gap:.5625rem;margin-bottom:1.75rem;padding-bottom:1.75rem;border-bottom:1.5px solid var(--ink-border)}
.plan-feats li{font-size:.875rem;color:var(--ink-2);padding-left:1.25rem;position:relative;line-height:1.5}
.plan-feats li::before{content:'✓';position:absolute;left:0;color:var(--green);font-size:.75rem;top:.1rem}
.plan-grant{margin-top:.75rem;font-size:.75rem;color:var(--green);line-height:1.5;font-weight:500}

/* ─────────────────────────────────────────────
   FAQ
───────────────────────────────────────────── */
.faq{padding:var(--section-v) 0;background:var(--navy)}
.faq .sec-h2{margin-top:.5rem;margin-bottom:2.5rem}
.faq-list{}
.faq-row{border-top:1px solid var(--navy-border);padding:1.875rem 0}
.faq-row:last-child{border-bottom:1px solid var(--navy-border)}
.faq-q{font-size:1.0625rem;font-weight:700;color:#fff;line-height:1.4;margin-bottom:.75rem}
.faq-a{font-size:.9375rem;color:var(--navy-muted);line-height:1.78}

/* ─────────────────────────────────────────────
   PILOT CTA
───────────────────────────────────────────── */
.pilot{padding:var(--section-v) 0;background:var(--navy-deep)}
.pilot-card{
  position:relative;overflow:hidden;
  background:var(--navy);border-radius:18px;
  border:1.5px solid var(--green-ring);
  padding:clamp(2.75rem,6vw,5rem);
  text-align:center;
  box-shadow:0 0 80px rgba(0,179,126,.06),inset 0 1px 0 rgba(255,255,255,.04)
}
/* Ghost stamp — bottom right of card */
.pilot-wm{
  position:absolute;bottom:-14%;right:-4%;
  width:min(55%,400px);opacity:.04;
  pointer-events:none;user-select:none
}

.pilot-h2{font-size:clamp(1.75rem,1rem+2.5vw,2.875rem);font-weight:800;letter-spacing:-.03em;color:#fff;margin-bottom:1rem}
.pilot-sub{font-size:1.0625rem;color:var(--navy-muted);line-height:1.72;max-width:52ch;margin:0 auto 2.5rem}

.pilot-terms{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
  padding-bottom:2.5rem;margin-bottom:2.5rem;
  border-bottom:1px solid var(--navy-border)
}
.term{display:flex;flex-direction:column;gap:.3rem;align-items:center}
.term-k{font-size:.5625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-muted)}
.term-v{font-size:1.0625rem;font-weight:700;color:var(--green)}
.term-sep{width:1px;height:2.5rem;background:var(--navy-border)}

.pilot-contact{margin-top:1.25rem;font-size:.875rem;color:var(--navy-muted)}
.pilot-contact a{color:var(--navy-muted);border-bottom:1px solid var(--navy-border);padding-bottom:1px;transition:color var(--t) ease,border-color var(--t) ease}
.pilot-contact a:hover{color:var(--green);border-color:var(--green)}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.footer{padding:3.5rem 0 2rem;background:var(--navy-deep);border-top:1px solid var(--navy-border)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.footer-tagline{font-size:.8125rem;color:rgba(255,255,255,.28);letter-spacing:.03em;align-self:center}
.footer-nav{display:flex;gap:3.5rem}
.footer-col-h{font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:.875rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5625rem}
.footer-col a{font-size:.875rem;color:var(--navy-muted);transition:color var(--t) ease}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--navy-border);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.footer-bottom p{font-size:.6875rem;color:rgba(255,255,255,.22)}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media(max-width:960px){
  /* Hero: stack vertically */
  .hero-layout{grid-template-columns:1fr}
  /* Stats: horizontal row */
  .hero-stats{flex-direction:row;border-left:none;border-top:1px solid var(--navy-border);padding-left:0;padding-top:1.5rem;gap:0}
  .stat{flex:1;padding:0 1.5rem;border-bottom:none;border-right:1px solid var(--navy-border)}
  .stat:first-child{padding-left:0}
  .stat:last-child{border-right:none}
  .stat-accent{display:none}
  /* Hero watermark repositioned */
  .hero-watermark{bottom:auto;top:-5%;right:-15%;opacity:.03;width:90vw}
  /* Cards: single column */
  .problem-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step-arrow{display:none}
  .step{border-bottom:1px solid var(--navy-border);padding:2rem 0}
  .step:last-child{border-bottom:none}
  .proof-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:460px}
  /* Footer */
  .footer-top{flex-direction:column;gap:1.75rem}
  .footer-tagline{display:none}
}

@media(max-width:600px){
  .hero-sub br{display:none}
  .hero-stats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
  .stat{min-width:90px;flex-shrink:0}
  .footer-nav{gap:2rem}
  .pilot-terms{gap:1.25rem}
  .term-sep{height:2rem}
  .footer-bottom{flex-direction:column;gap:.375rem}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .badge-dot{animation:none}
  html{scroll-behavior:auto}
  .btn-green:hover,.plan:hover,.prob-card:hover{transform:none}
}