/* =========================================================
   dearmoney.in — design tokens
   Palette: paper background, jade (growth), gold (prosperity),
   indigo (data/futuristic accent), deep ink text.
========================================================= */
:root{
  --bg: #F6F7F1;
  --paper: #FFFFFF;
  --ink: #0B1E17;
  --ink-soft: #4B5C53;
  --ink-faint: #8A968E;
  --jade: #1D7A5F;
  --jade-deep: #124F3D;
  --jade-tint: #E4F1EA;
  --gold: #C9A227;
  --gold-tint: #FBF3DD;
  --indigo: #4C5FD5;
  --line: rgba(11,30,23,0.10);
  --line-strong: rgba(11,30,23,0.16);
  --shadow-sm: 0 2px 10px rgba(11,30,23,0.06);
  --shadow-md: 0 12px 40px rgba(11,30,23,0.10);
  --shadow-lg: 0 30px 80px rgba(11,30,23,0.14);
  --radius: 20px;
  --radius-sm: 12px;
  --ff-display: 'Space Grotesk', sans-serif;
  --ff-body: 'Inter', sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{ font-family: var(--ff-display); color: var(--ink); margin: 0 0 0.4em; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: inherit; text-decoration: none; }
.mono{ font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
img,svg{ display:block; max-width:100%; }
button{ font-family: inherit; cursor:pointer; }
section{ position: relative; padding: 88px 24px; max-width: 1240px; margin: 0 auto; }
@media (max-width: 900px){ section{ padding: 64px 20px; } }

/* =============== ambient background =============== */
.bg-field{ position: fixed; inset:0; z-index:-1; overflow:hidden; }
.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(11,30,23,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,30,23,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}
.blob{ position:absolute; border-radius:50%; filter: blur(90px); opacity:0.35; }
.blob-jade{ width:520px; height:520px; background: var(--jade); top:-180px; right:-140px; animation: drift1 22s ease-in-out infinite alternate; }
.blob-gold{ width:420px; height:420px; background: var(--gold); bottom:10%; left:-160px; opacity:0.22; animation: drift2 26s ease-in-out infinite alternate; }
@keyframes drift1{ 0%{ transform: translate(0,0) scale(1);} 100%{ transform: translate(-60px, 60px) scale(1.15);} }
@keyframes drift2{ 0%{ transform: translate(0,0) scale(1);} 100%{ transform: translate(50px, -40px) scale(1.1);} }

/* =============== nav =============== */
.nav{ position: sticky; top:0; z-index: 100; padding: 16px 24px; }
.nav-inner{
  max-width: 1240px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px 10px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s ease;
}
.nav.scrolled .nav-inner{ box-shadow: var(--shadow-md); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:30px; height:30px; display:flex; }
.growth-icon{ width:100%; height:100%; }
.growth-icon path{ fill:none; stroke: var(--jade); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.growth-icon .growth-dot{ fill: var(--gold); }
.brand-text{ font-family: var(--ff-display); font-weight:600; font-size: 1.15rem; }
.brand-dot{ color: var(--jade); }
.nav-links{ display:flex; gap: 28px; }
.nav-links a{ font-size: 0.92rem; font-weight:500; color: var(--ink-soft); position:relative; padding: 6px 2px; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--jade); transition: width .25s ease; }
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px; }
.nav-toggle span{ width:20px; height:2px; background: var(--ink); border-radius:2px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.92rem; padding: 12px 20px; border-radius: 999px; border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap; }
.btn-arrow{ width:16px; height:16px; }
.btn-arrow path{ fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn-primary{ background: var(--ink); color: #fff; }
.btn-primary:hover{ background: var(--jade-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover{ background: var(--paper); }
.btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color:#fff; }
.btn-block{ width:100%; justify-content:center; }

/* =============== hero =============== */
.hero{ padding-top: 90px; }
.hero-inner{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--ff-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform: uppercase; color: var(--jade-deep); background: var(--jade-tint); padding: 7px 14px; border-radius:999px; margin-bottom: 18px; }
.eyebrow-dot{ width:6px; height:6px; border-radius:50%; background: var(--jade); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.4; transform:scale(1.4);} }
.hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.06; font-weight:600; }
.ink-highlight{ color: var(--jade); position:relative; }
.hero-sub{ font-size: 1.08rem; max-width: 480px; margin-top: 18px; }
.hero-cta{ display:flex; gap:14px; margin: 30px 0 46px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap: 40px; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-size:1.5rem; font-weight:600; color: var(--ink); }
.stat-label{ font-size:0.82rem; color: var(--ink-faint); margin-top:2px; }

.hero-visual{ position: relative; }
.dashboard-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-lg); animation: floatCard 6s ease-in-out infinite; }
@keyframes floatCard{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.dash-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.dash-title{ font-weight:600; font-size:0.95rem; }
.dash-live{ display:flex; align-items:center; gap:6px; font-family: var(--ff-mono); font-size:0.72rem; color: var(--ink-faint); }
.dash-live i{ width:7px; height:7px; border-radius:50%; background:#e0473e; animation: pulse 1.5s infinite; }
.growth-chart{ width:100%; height:auto; overflow: visible; }
.chart-line{ fill:none; stroke: var(--jade); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 500; stroke-dashoffset: 500; animation: draw 2.2s ease forwards 0.3s; }
.chart-fill{ opacity:0; animation: fadeIn 1.5s ease forwards 1.4s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }
.chart-dot{ fill: var(--gold); opacity:0; animation: fadeIn 0.4s ease forwards 2.4s, pulse 1.8s ease-in-out infinite 2.6s; }
.dash-foot{ display:flex; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-strong); }
.dash-foot > div{ display:flex; flex-direction:column; }
.dash-value{ font-weight:600; font-size:1.05rem; }
.dash-value.up{ color: var(--jade); }
.dash-label{ font-size:0.75rem; color: var(--ink-faint); margin-top:2px; }

.float-chip{ position:absolute; display:flex; align-items:center; gap:8px; background: var(--paper); border:1px solid var(--line); padding: 10px 16px; border-radius: 999px; font-size:0.8rem; font-weight:600; box-shadow: var(--shadow-md); }
.float-chip svg{ width:16px; height:16px; }
.float-chip svg path,.float-chip svg circle{ fill:none; stroke: var(--indigo); stroke-width:2; }
.chip-1{ top: -14px; left: -30px; animation: floatChip 5s ease-in-out infinite; }
.chip-2{ bottom: 0; right: -20px; animation: floatChip 5.5s ease-in-out infinite 0.6s; }
@keyframes floatChip{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top: 44px; font-family: var(--ff-mono); font-size:0.72rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:0.1em; }
.scroll-cue i{ width:1px; height:28px; background: linear-gradient(var(--ink-faint), transparent); animation: scrollDown 1.6s ease-in-out infinite; }
@keyframes scrollDown{ 0%{ opacity:0; transform: translateY(-4px);} 50%{ opacity:1;} 100%{ opacity:0; transform: translateY(10px);} }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ margin-top: 40px; }
  .float-chip{ display:none; }
}

/* =============== marquee =============== */
.marquee-wrap{ padding: 30px 0; max-width:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--paper); }
.marquee-caption{ margin: 0 0 6px; text-align:center; font-family: var(--ff-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em; color: var(--ink-faint); }
.marquee-caption:not(:first-child){ margin-top: 10px; }
.marquee{ overflow:hidden; padding: 6px 0 16px; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track{ display:flex; gap: 20px; white-space:nowrap; width:max-content; animation: scrollX 32s linear infinite; }
.marquee-track-reverse{ animation-name: scrollXReverse; animation-duration: 38s; }
.marquee-track span{ font-family: var(--ff-mono); font-size:0.85rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing:0.04em; }
@keyframes scrollX{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@keyframes scrollXReverse{ from{ transform: translateX(-50%);} to{ transform: translateX(0);} }

/* =============== section heads =============== */
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ margin-left:auto; margin-right:auto; }
.section-sub{ font-size:1.02rem; }

/* =============== tools / calculators =============== */
.tool-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 34px; }
.tab-btn{ background: var(--paper); border:1px solid var(--line); padding: 10px 18px; border-radius: 999px; font-weight:600; font-size:0.88rem; color: var(--ink-soft); transition: all .2s ease; }
.tab-btn:hover{ border-color: var(--jade); color: var(--ink); }
.tab-btn.active{ background: var(--ink); color:#fff; border-color: var(--ink); }

.tool-panel{ display:none; animation: panelIn .45s ease; }
.tool-panel.active{ display:block; }
@keyframes panelIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.panel-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow:hidden; }
.panel-inputs{ padding: 40px; display:flex; flex-direction:column; gap: 26px; border-right: 1px solid var(--line); }
.panel-result{ padding: 40px; display:flex; flex-direction:column; gap: 18px; background: linear-gradient(180deg, var(--jade-tint), transparent 60%); }
@media (max-width: 860px){ .panel-grid{ grid-template-columns:1fr; } .panel-inputs{ border-right:none; border-bottom:1px solid var(--line); } }

.panel-inputs label{ display:flex; flex-direction:column; gap:10px; font-size:0.86rem; font-weight:600; color: var(--ink-soft); }
.panel-inputs .val{ color: var(--jade-deep); font-weight:600; float:right; }
.panel-inputs input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--jade) 0%, var(--jade) var(--fill,50%), var(--line-strong) var(--fill,50%));
  outline:none;
}
.panel-inputs input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--jade); box-shadow: var(--shadow-sm); cursor:pointer; }
.panel-inputs input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--jade); cursor:pointer; }
.checkline{ flex-direction:row !important; align-items:center; gap:10px !important; }
.checkline input{ width:18px; height:18px; accent-color: var(--jade); }

.loan-type-toggle{ display:flex; gap:8px; margin-bottom: 6px; flex-wrap:wrap; }
.ltype{ background: var(--bg); border:1px solid var(--line); padding:8px 14px; border-radius:999px; font-size:0.82rem; font-weight:600; color: var(--ink-soft); }
.ltype.active{ background: var(--jade-tint); border-color: var(--jade); color: var(--jade-deep); }

.result-label{ display:block; font-size:0.82rem; color: var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.result-num{ display:block; font-size: 2.4rem; font-weight:700; color: var(--ink); margin-top:4px; }
.result-num-sm{ display:block; font-size:1.5rem; font-weight:700; color: var(--jade-deep); }
.result-tag{ display:inline-block; margin-top:8px; background: var(--gold-tint); color:#8a6d0f; font-family: var(--ff-mono); font-size:0.78rem; font-weight:600; padding:4px 12px; border-radius:999px; }
.result-legend{ display:flex; gap:24px; font-size:0.85rem; font-weight:600; color: var(--ink-soft); flex-wrap:wrap; }
.result-legend .mono{ color: var(--ink); margin-left:6px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }
.dot-jade{ background: var(--jade); }
.dot-gold{ background: var(--gold); }
.fine-print{ font-size:0.78rem; color: var(--ink-faint); margin-top:auto; }
.result-secondary{ padding-top:14px; border-top:1px dashed var(--line-strong); }

.gauge-wrap{ display:flex; justify-content:center; }
#cibilGauge{ width: 220px; }
.gauge-track{ fill:none; stroke: var(--line-strong); stroke-width:14; stroke-linecap:round; }
.gauge-fill{ fill:none; stroke: var(--jade); stroke-width:14; stroke-linecap:round; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset .5s ease, stroke .5s ease; }
#cibilNeedle{ stroke: var(--ink); stroke-width:3; stroke-linecap:round; transform-origin: 100px 100px; transition: transform .5s ease; }

.tool-chart{ width:100%; height:auto; overflow:visible; }
.tool-chart-donut{ max-width: 200px; margin: 0 auto; display:block; }
.chart-svg-dot{ fill: var(--gold); }

/* =============== services =============== */
.service-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px){ .service-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .service-grid{ grid-template-columns: 1fr; } }
.service-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm); padding: 28px 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--jade); }
.service-icon{ width:44px; height:44px; border-radius:12px; background: var(--jade-tint); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.service-icon svg{ width:22px; height:22px; }
.service-icon svg path,.service-icon svg circle,.service-icon svg rect{ fill:none; stroke: var(--jade-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.service-card h3{ font-size:1.05rem; margin-bottom:8px; }
.service-card p{ font-size:0.88rem; margin:0; }

/* =============== process =============== */
.process-line{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; position:relative; }
.process-line::before{ content:''; position:absolute; top:20px; left:6%; right:6%; height:1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px); z-index:0; }
@media (max-width: 860px){ .process-line{ grid-template-columns: 1fr; } .process-line::before{ display:none; } }
.process-step{ position:relative; z-index:1; }
.step-num{ display:inline-block; font-size:0.85rem; font-weight:700; color: var(--jade-deep); background: var(--bg); border: 1px solid var(--jade); width:38px; height:38px; border-radius:50%; text-align:center; line-height:36px; margin-bottom:16px; }
.process-step h3{ font-size:1.05rem; }
.process-step p{ font-size:0.88rem; }

/* =============== ambient glow for quiz / testimonials =============== */
.quiz, .testimonials{ position:relative; }
.quiz::before, .testimonials::before{
  content:'';
  position:absolute;
  width: 680px; height: 680px;
  top: -160px; left:50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(29,122,95,0.16), rgba(201,162,39,0.07) 45%, transparent 72%);
  filter: blur(20px);
  z-index:-1;
  pointer-events:none;
}

/* =============== quiz =============== */
.quiz-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 40px; max-width: 720px; margin: 0 auto; }
.quiz-progress{ height:6px; background: var(--line); border-radius:999px; overflow:hidden; margin-bottom: 30px; }
.quiz-progress-fill{ height:100%; width:20%; background: var(--jade); transition: width .4s ease; }
.quiz-question h3{ font-size:1.2rem; margin-bottom: 20px; }
.quiz-options{ display:flex; flex-direction:column; gap:12px; }
.quiz-opt{ text-align:left; background: var(--bg); border:1px solid var(--line); padding:16px 18px; border-radius: var(--radius-sm); font-weight:600; font-size:0.92rem; transition: all .2s ease; }
.quiz-opt:hover{ border-color: var(--jade); background: var(--jade-tint); }
.quiz-result{ text-align:center; }
.quiz-result h3{ font-size:1.6rem; color: var(--jade-deep); }
.quiz-badge{ display:inline-block; font-family: var(--ff-mono); font-size:0.78rem; background: var(--gold-tint); color:#8a6d0f; padding:5px 14px; border-radius:999px; margin-bottom:14px; }
.quiz-restart{ margin-top: 20px; background:none; border:1px solid var(--line-strong); padding:10px 20px; border-radius:999px; font-weight:600; font-size:0.85rem; }
.quiz-restart:hover{ border-color: var(--ink); }

/* =============== testimonials =============== */
.testimonials{ max-width:none; padding-left:0; padding-right:0; }
.testimonials .section-head{ max-width:640px; padding: 0 24px; }
.testi-track{ display:flex; gap:20px; overflow-x:auto; padding: 4px 24px 20px; scroll-snap-type: x mandatory; }
.testi-track::-webkit-scrollbar{ height:6px; }
.testi-track::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius:999px; }
.testi-card{ scroll-snap-align:start; min-width: 320px; max-width:320px; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.testi-card p{ font-size:0.95rem; color: var(--ink); font-style: italic; }
.testi-who{ display:flex; flex-direction:column; gap:2px; font-size:0.8rem; }
.testi-who span:first-child{ font-weight:700; }
.testi-who .mono{ color: var(--ink-faint); }

/* =============== faq =============== */
.faq-list{ max-width: 760px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:none; padding: 22px 4px; font-family: var(--ff-display); font-size:1.02rem; font-weight:600; text-align:left; color: var(--ink); }
.faq-icon{ font-size:1.3rem; color: var(--jade); transition: transform .3s ease; font-weight:400; }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a{ max-height: 200px; }
.faq-a p{ padding: 0 4px 22px; font-size:0.92rem; }

/* =============== cta / contact =============== */
.cta-card{ background: var(--ink); color:#fff; border-radius: 28px; padding: 60px; display:grid; grid-template-columns: 1fr 1fr; gap: 50px; overflow:hidden; position:relative; }
.cta-card::before{ content:''; position:absolute; width:420px; height:420px; background: var(--jade); filter: blur(120px); opacity:0.35; top:-140px; right:-100px; }
.cta-card .eyebrow{ background: rgba(255,255,255,0.1); color: #b9e3d1; }
.cta-card h2{ color:#fff; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.cta-card .section-sub{ color: rgba(255,255,255,0.7); }
.cta-list{ list-style:none; padding:0; margin: 20px 0 0; display:flex; flex-direction:column; gap:10px; }
.cta-list li{ position:relative; padding-left:24px; font-size:0.92rem; color: rgba(255,255,255,0.85); }
.cta-list li::before{ content:'✓'; position:absolute; left:0; color: var(--gold); font-weight:700; }
.cta-form{ position:relative; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding: 30px; display:flex; flex-direction:column; gap:16px; backdrop-filter: blur(6px); }
.cta-form label{ display:flex; flex-direction:column; gap:8px; font-size:0.82rem; font-weight:600; color: rgba(255,255,255,0.8); }
.cta-form input, .cta-form select{ background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 12px 14px; color:#fff; font-family: inherit; font-size:0.92rem; }
.cta-form input::placeholder{ color: rgba(255,255,255,0.4); }
.cta-form select option{ color:#000; }
.cta-form input:focus, .cta-form select:focus{ outline: 2px solid var(--jade); outline-offset:1px; }
.form-note{ font-size:0.8rem; color: var(--gold); text-align:center; min-height: 1em; margin:0; }
@media (max-width: 860px){ .cta-card{ grid-template-columns:1fr; padding: 40px 26px; border-radius:20px; } }

/* =============== footer =============== */
.site-footer{ background: var(--paper); border-top:1px solid var(--line); padding: 60px 24px 30px; }
.footer-top{ max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--line); }
.footer-cols{ display:flex; gap: 50px; flex-wrap:wrap; }
.footer-cols h4{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-faint); margin-bottom:14px; }
.footer-cols a{ display:block; font-size:0.88rem; color: var(--ink-soft); margin-bottom:10px; }
.footer-cols a:hover{ color: var(--jade-deep); }
.footer-bottom{ max-width:1240px; margin: 24px auto 0; }
.footer-bottom p{ font-size:0.76rem; color: var(--ink-faint); margin:0; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline: 2px solid var(--indigo); outline-offset: 2px; }

/* scroll reveal */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* mobile nav */
@media (max-width: 860px){
  .nav-links{ position:absolute; top: calc(100% + 10px); left:0; right:0; background: var(--paper); border:1px solid var(--line); border-radius:20px; flex-direction:column; padding: 16px; gap:4px; box-shadow: var(--shadow-md); display:none; }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding: 10px 8px; }
  .nav-toggle{ display:flex; }
}