html[data-theme="vesper"] {
  --ink: #03353E;          
  --ink-2: #0A4B58;        

  --paper: #FFFFFF;        
  --paper-2: #F5F7F9;      
  --paper-3: #F2F2F2;      
  --line: #E4E9EC;         

  --b1: #03353E;           
  --b1-soft: #E7EFF1;

--teal: #12796C;
  --teal-bright: #1CA794;
  --teal-soft: #E1F4F1;
  --amber: #12796C;        
  --amber-soft: #E1F4F1;
  --gold-deep: #0C5F55;    

--red: #A9452D;

  --txt: #2A3B41;

--txt-soft: #666E73;

  --radius: 12px;
  --shadow: 0 6px 24px rgba(3, 53, 62, .07);
  --maxw: 1140px;

  --font-display: "Outfit", "Lexend", system-ui, sans-serif;
  --font-body: "Lexend", system-ui, sans-serif;
  --font-label: "Lexend", system-ui, sans-serif;

  --grid-ink: rgba(255, 255, 255, 0);   

--pill-pad: 17px 30px;
}

html[data-theme="vesper"] body { font-size: 17px; }

html[data-theme="vesper"] h1,
html[data-theme="vesper"] h2 {
  font-family: var(--font-display);
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}
html[data-theme="vesper"] h1 { font-size: clamp(2.1rem, 4vw, 3rem); }
html[data-theme="vesper"] h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin-bottom: 16px; }
html[data-theme="vesper"] h3 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
}
html[data-theme="vesper"] .lead { font-size: 1.12rem; line-height: 1.65; }
html[data-theme="vesper"] p { line-height: 1.65; }

html[data-theme="vesper"] .zone-chip {
  font-family: var(--font-label); font-weight: 600;
  font-size: clamp(12.5px, 1vw, 14px); letter-spacing: .14em;
  color: var(--teal); margin-bottom: 14px;
}
html[data-theme="vesper"] .zone-chip::before { display: none; }

html[data-theme="vesper"] .hero .zone-chip,
html[data-theme="vesper"] .contact .zone-chip,
html[data-theme="vesper"] .map-teaser .zone-chip,
html[data-theme="vesper"] .chat-box .zone-chip,
html[data-theme="vesper"] .plan-panel .zone-chip { color: #7FD9CB !important; }

html[data-theme="vesper"] .plan-panel > .mono:first-child { color: #7FD9CB; }
html[data-theme="vesper"] .plan-panel .mono { color: #BCD3D7; }

html[data-theme="vesper"] section { padding: 84px 0; }
html[data-theme="vesper"] .band,
html[data-theme="vesper"] .band-deep { border-block: none; }
html[data-theme="vesper"] .band { background: var(--paper-2); }
html[data-theme="vesper"] .band-deep { background: var(--paper-3); }

html[data-theme="vesper"] header.nav {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
}
html[data-theme="vesper"] .logo { font-family: var(--font-display); font-weight: 600; }
html[data-theme="vesper"] .logo-mark {
  
  background: var(--teal-bright); border-color: var(--teal-bright); box-shadow: none;
}
html[data-theme="vesper"] nav.links a { font-weight: 500; color: var(--ink); }
html[data-theme="vesper"] nav.links a:hover { color: var(--teal); text-decoration: none; }

html[data-theme="vesper"] .btn {
  background: var(--teal); color: #fff !important;
  padding: var(--pill-pad); border-radius: 999px;
  font-family: var(--font-label); font-weight: 500; font-size: 15px;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  transition: background .18s ease, color .18s ease;
}
html[data-theme="vesper"] .btn:hover { background: var(--gold-deep); }
html[data-theme="vesper"] .btn.amber { background: var(--teal); color: #fff !important; }
html[data-theme="vesper"] .btn.amber:hover { background: var(--gold-deep); color: #fff !important; }
html[data-theme="vesper"] .btn.ghost {
  background: #fff; color: var(--ink) !important; border: none;
}
html[data-theme="vesper"] .btn.ghost:hover { background: var(--paper-2); color: var(--ink) !important; }
html[data-theme="vesper"] .hero .btn { background: var(--teal); color: #fff !important; }
html[data-theme="vesper"] .hero .btn:hover { background: #fff; color: var(--ink) !important; }
html[data-theme="vesper"] .hero .btn.ghost {
  background: #fff; color: var(--ink) !important; border: none;
}
html[data-theme="vesper"] .hero .btn.ghost:hover { background: var(--teal); color: #fff !important; }

html[data-theme="vesper"] .hero {
  background: var(--ink);
  border-bottom: none;
  padding: 96px 0 88px;
}
html[data-theme="vesper"] .hero::before { display: none; }
html[data-theme="vesper"] .hero h1 { color: #fff; letter-spacing: -0.02em; }
html[data-theme="vesper"] .hero h1 em { color: #7FD9CB; }
html[data-theme="vesper"] .hero .lead { color: #C3D3D7; }
html[data-theme="vesper"] .hero-note { color: #8FA6AC; }

html[data-theme="vesper"] .zone-card,
html[data-theme="vesper"] .tool,
html[data-theme="vesper"] .insight,
html[data-theme="vesper"] .checker-card,
html[data-theme="vesper"] .absd-card,
html[data-theme="vesper"] .yld-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(3, 53, 62, .05);
}
html[data-theme="vesper"] .zone-card { padding: 30px; }
html[data-theme="vesper"] .zone-card h3 { font-size: 1.3rem; }
html[data-theme="vesper"] .absd-col,
html[data-theme="vesper"] .yld-col { border: 1px solid var(--line); background: var(--paper-2); }
html[data-theme="vesper"] .absd-res,
html[data-theme="vesper"] .absd-com,
html[data-theme="vesper"] .yld-res,
html[data-theme="vesper"] .yld-biz { background: var(--paper-2); }
html[data-theme="vesper"] .map-mini { border: none; border-radius: var(--radius); }

html[data-theme="vesper"] .risks { border-top: 1px solid var(--line); }
html[data-theme="vesper"] .risk { border-bottom: 1px solid var(--line); padding: 22px 0; }
html[data-theme="vesper"] .risk-no { color: var(--teal); font-weight: 600; letter-spacing: .08em; }
html[data-theme="vesper"] .risk h3 { font-size: 1.18rem; }

html[data-theme="vesper"] .fit-list li { border-top: 1px solid var(--line); }
html[data-theme="vesper"] .fit-src { color: var(--txt-soft); font-size: 12px; }

html[data-theme="vesper"] .step { border-top: 3px solid var(--teal); }
html[data-theme="vesper"] .step .mono { color: var(--teal); letter-spacing: .1em; font-weight: 600; }
html[data-theme="vesper"] .step-out { color: var(--teal); }

html[data-theme="vesper"] .stage { border-top: 3px solid var(--teal); }
html[data-theme="vesper"] .stage-no { color: var(--teal); }

html[data-theme="vesper"] .offer-list li::before { background: var(--teal); color: #fff; }
html[data-theme="vesper"] .offer-promise {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal);
  box-shadow: 0 2px 10px rgba(3, 53, 62, .05);
}
html[data-theme="vesper"] .risk-tools {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal);
  box-shadow: 0 2px 10px rgba(3, 53, 62, .05);
}
html[data-theme="vesper"] .risk-tools a { font-family: var(--font-display); }

html[data-theme="vesper"] .tool label,
html[data-theme="vesper"] .yld-card label,
html[data-theme="vesper"] .checker-card label,
html[data-theme="vesper"] .zone-card label {
  font-family: var(--font-label); font-weight: 600; letter-spacing: .06em;
  color: var(--txt-soft);
}
html[data-theme="vesper"] input,
html[data-theme="vesper"] select,
html[data-theme="vesper"] textarea {
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--paper-2) !important;
  font-family: var(--font-body) !important;
}
html[data-theme="vesper"] input:focus,
html[data-theme="vesper"] select:focus,
html[data-theme="vesper"] textarea:focus { background: #fff !important; }
html[data-theme="vesper"] .checker-card .opt {
  border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line);
}
html[data-theme="vesper"] .checker-card .opt:hover { border-color: var(--teal); background: var(--teal-soft); }
html[data-theme="vesper"] .checker-card .result .badge { background: var(--teal); color: #fff; }
html[data-theme="vesper"] .quiz-details summary { border-radius: 999px; }
html[data-theme="vesper"] .quiz-details summary:hover { border-color: var(--teal); }
html[data-theme="vesper"] .absd-total,
html[data-theme="vesper"] .yld-total { font-family: var(--font-display); font-weight: 600; }
html[data-theme="vesper"] .verdict,
html[data-theme="vesper"] .br-verdict,
html[data-theme="vesper"] .absd-delta { border-radius: var(--radius); }
html[data-theme="vesper"] .tip { background: var(--teal); }
html[data-theme="vesper"] .tip:hover,
html[data-theme="vesper"] .tip:focus-visible { background: var(--ink); }

html[data-theme="vesper"] .map-teaser { background: var(--ink); border-radius: var(--radius); }
html[data-theme="vesper"] .map-teaser p { color: #C3D3D7; }
html[data-theme="vesper"] .layer-pills span {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #DCE7E9;
}
html[data-theme="vesper"] .contact { background: var(--ink); }
html[data-theme="vesper"] .contact .lead { color: #C3D3D7; }
html[data-theme="vesper"] footer { background: var(--ink); color: #93A9AF; border-top: none; }
html[data-theme="vesper"] footer a { color: #BFD3D7; }

html[data-theme="vesper"] .portrait {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
}

html[data-theme="vesper"] .wa-float { background: #1B8A33; }
html[data-theme="vesper"] .wa-float:hover { background: var(--ink); }
html[data-theme="vesper"] .sticky-bar { background: #fff; border-top: 1px solid var(--line); }
html[data-theme="vesper"] .sticky-bar .btn { padding: 14px 18px; font-size: 13.5px; }

html[data-theme="vesper"].off-hero-trend .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.1rem); }
html[data-theme="vesper"].off-hero-trend .hero { padding: 96px 0 88px; }
html[data-theme="vesper"].off-hero-trend .hero .lead { font-size: 1.15rem; }
html[data-theme="vesper"].off-hero-trend .hero-grid { max-width: 46rem; }

html[data-theme="vesper"].off-hero-trend .hero-grid { max-width: 52rem; margin: 0 auto; }
html[data-theme="vesper"] .hero .wrap { text-align: center; }
html[data-theme="vesper"] .hero .lead { margin-left: auto; margin-right: auto; }
html[data-theme="vesper"] .hero-ctas { justify-content: center; }
html[data-theme="vesper"] .hero .zone-chip { justify-content: center; }

html[data-theme="vesper"] .map-teaser h2,
html[data-theme="vesper"] .contact h2,
html[data-theme="vesper"] .contact h3,
html[data-theme="vesper"] .hero h2,
html[data-theme="vesper"] .hero h3 { color: #fff; }

html[data-theme="vesper"] .contact .btn.ghost,
html[data-theme="vesper"] .map-teaser .btn.ghost {
  background: transparent; border: 2px solid rgba(255, 255, 255, .5);
}
html[data-theme="vesper"] .contact .btn.ghost:hover,
html[data-theme="vesper"] .map-teaser .btn.ghost:hover {
  background: rgba(255, 255, 255, .12);
}

html[data-theme="vesper"] .teaser-more h3 { color: var(--ink); }
html[data-theme="vesper"] .teaser-more p { color: var(--txt-soft); }

html[data-theme="vesper"] .hero-cost {
  background: rgba(255, 255, 255, .07);
  border-left: 3px solid var(--teal-bright);
  border-radius: var(--radius);
  margin-inline: auto;
}
html[data-theme="vesper"] .hero-cost span { color: #BCD3D7; }

html[data-theme="vesper"] .method-after {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal);
  box-shadow: 0 2px 10px rgba(3, 53, 62, .05);
}

html[data-theme="vesper"] .trigger { border-top: 1px solid var(--line); }
html[data-theme="vesper"] .trigger-svc { color: var(--teal); }

html[data-theme="vesper"] .rung {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(3, 53, 62, .05);
}
html[data-theme="vesper"] .rung-no { color: var(--teal); }
html[data-theme="vesper"] .rung-cost { background: var(--teal-soft); color: var(--ink); }