/* =============================================
   TOKENS — light mode (default)
   ============================================= */
:root{
  --paper:       #f4efe6;
  --paper-2:     #ebe3d5;
  --ink:         #2b2a26;
  --mist:        #d9cfbd;
  --line:        #cfc4af;
  --text-body:   #2b2a26;
  --text-muted:  #625e52;
  --text-sub:    #5b554a;
  --dawn:        #e8b974;
  --dusk-deco:   #c97b5a;
  --dusk-text:   #985237;
  --storm:       #5a6b6f;
  --clear:       #7fa6a0;
  --hero-sub:    #5b554a;
  --sky-g1: rgba(232,185,116,.55);
  --sky-g2: rgba(201,123,90,.30);
  --sky-start: #f0d9b0;
  --sky-end:   var(--paper);
  --sun-inner: #f6cf85;
  --sun-outer: #e8b974;
  --fc-bg:       #2b2a26;
  --fc-text:     #f4efe6;
  --fc-border:   rgba(244,239,230,.12);
  --tier-bg:     var(--paper);
  --tier-border: var(--line);
  --tier-feature-bg:   #2b2a26;
  --tier-feature-text: #f4efe6;
  --nav-bg: transparent;
  --footer-bg: #2b2a26;
  --footer-text: #f4efe6;
  --toggle-bg:  #2b2a26;
  --toggle-fg:  #f4efe6;
}
/* =============================================
   TOKENS — dark / night mode
   ============================================= */
[data-theme="dark"]{
  --paper:       #0d0f1a;
  --paper-2:     #141728;
  --ink:         #e8eaf6;
  --mist:        #1e2238;
  --line:        #272b45;
  --text-body:   #e8eaf6;
  --text-muted:  #9096b8;
  --text-sub:    #b0b6d4;
  --dawn:        #c5cef5;
  --dusk-deco:   #8b7fd4;
  --dusk-text:   #a99ee8;
  --storm:       #6b7ab5;
  --clear:       #7fb0c8;
  --hero-sub:    #b0b6d4;
  --sky-g1: rgba(100,80,200,.22);
  --sky-g2: rgba(60,40,140,.28);
  --sky-start: #0a0c18;
  --sky-end:   #0d0f1a;
  --sun-inner: #f0f2ff;
  --sun-outer: #c8d0f0;
  --fc-bg:       #080a14;
  --fc-text:     #e8eaf6;
  --fc-border:   rgba(200,208,240,.10);
  --tier-bg:     #141728;
  --tier-border: #272b45;
  --tier-feature-bg:   #06070f;
  --tier-feature-text: #e8eaf6;
  --nav-bg: #0d0f1a;
  --footer-bg: #080a14;
  --footer-text: #e8eaf6;
  --toggle-bg:  #e8eaf6;
  --toggle-fg:  #0d0f1a;
}

/* =============================================
   BASE
   ============================================= */
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--text-body);
  font-family:"Spline Sans",sans-serif;
  overflow-x:hidden;
  transition:background .3s, color .3s;
}
.display-font{ font-family:"Fraunces",serif; letter-spacing:-.02em; }
.mono{ font-family:"Spline Sans Mono",monospace; }
.eyebrow{
  font-family:"Spline Sans Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;
  color:var(--dusk-text);
}

/* =============================================
   DARK MODE TOGGLE
   ============================================= */
#theme-toggle{
  width:38px; height:38px; border-radius:50%;
  background:var(--toggle-bg); color:var(--toggle-fg);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  transition:background .3s, color .3s, transform .2s;
  flex-shrink:0;
}
#theme-toggle:hover{ transform:scale(1.1); }

/* =============================================
   NAVBAR
   ============================================= */
.site-nav{
  background:var(--nav-bg);
  transition:background .3s;
}
.navbar-brand{ font-family:"Fraunces",serif; font-weight:900; font-size:1.4rem; letter-spacing:-.02em; color:var(--text-body)!important; text-decoration:none; }
.navbar-brand .o{ color:var(--dusk-deco); font-style:italic; }
.nav-link-plain{ color:var(--text-body); text-decoration:none; font-size:.95rem; opacity:.75; padding:.25rem .5rem; }
.nav-link-plain:hover{ opacity:1; color:var(--text-body); }
.nav-link-plain[aria-current="page"]{ opacity:1; }
.navbar-toggler{ border:none!important; box-shadow:none!important; padding:.25rem .5rem; }

@media (max-width: 991.98px){
  .navbar-collapse{ padding-bottom:.75rem; }
  .navbar-nav{ gap:.25rem; }
  .navbar-nav .nav-item + .nav-item{ border-top:1px solid var(--line); }
  .nav-link-plain{ display:block; padding:.6rem .25rem; }
  .navbar-nav .btn{ margin:.5rem 0 .25rem; }
}

/* =============================================
   HERO / SKY
   ============================================= */
.sky{
  position:relative;
  background:
    radial-gradient(120% 80% at 80% -10%, var(--sky-g1), transparent 55%),
    radial-gradient(100% 90% at 10% 0%, var(--sky-g2), transparent 50%),
    linear-gradient(180deg, var(--sky-start) 0%, var(--sky-end) 62%);
  overflow:hidden;
  transition:background .3s;
}
.sky::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
}
.sun{
  position:absolute; top:-90px; right:-60px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, var(--sun-inner) 0%, var(--sun-outer) 45%, transparent 70%);
  filter:blur(2px);
  animation:float 14s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(22px)} }

/* ---------- NIGHT MODE overrides ---------- */
[data-theme="dark"] .sky::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(220,225,255,.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 28% 8%,  rgba(220,225,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 14%,  rgba(200,210,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 6%,   rgba(220,225,255,.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 76% 22%,  rgba(220,225,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 10%,  rgba(200,210,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 5%  38%,  rgba(220,225,255,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 19% 44%, rgba(220,225,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 30%,  rgba(200,210,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 42%,  rgba(220,225,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 35%,  rgba(200,210,255,.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 83% 48%,  rgba(220,225,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 28%,  rgba(200,210,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 8%  55%,  rgba(220,225,255,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 24% 62%, rgba(220,225,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 58%,  rgba(200,210,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 65%,  rgba(220,225,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 52%,  rgba(200,210,255,.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 96% 60%,  rgba(220,225,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 72%,  rgba(200,210,255,.3) 0%, transparent 100%);
  pointer-events:none;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{ 0%{opacity:.7} 50%{opacity:1} 100%{opacity:.8} }

[data-theme="dark"] .sky{
  background:
    radial-gradient(110% 60% at 75% -5%,  rgba(80,60,180,.28),  transparent 55%),
    radial-gradient(80%  70% at 15% -10%, rgba(40,30,120,.35),  transparent 50%),
    radial-gradient(60%  50% at 50% 30%,  rgba(100,60,200,.12), transparent 60%),
    linear-gradient(180deg, #08091a 0%, #0d0f1a 100%);
}

.moon-svg{
  display:none;
  position:absolute; top:-60px; right:-30px;
  width:260px; height:260px;
  animation:moonFloat 18s ease-in-out infinite;
  filter:drop-shadow(0 0 40px rgba(180,190,255,.22)) drop-shadow(0 0 90px rgba(120,130,220,.12));
}
[data-theme="dark"] .moon-svg{ display:block; }
[data-theme="dark"] .sun{ display:none; }
@keyframes moonFloat{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(18px) rotate(3deg)} }

[data-theme="dark"] .forecast{
  background: linear-gradient(135deg, #08091a 0%, #0e1028 100%);
  border: 1px solid rgba(120,130,220,.15);
}
[data-theme="dark"] .quote-section,
[data-theme="dark"] .pricing-section{ background: #0a0c1e; }
[data-theme="dark"] .feature-card{ background: linear-gradient(145deg, #141728 0%, #111423 100%); border-color: #272b45; }
[data-theme="dark"] .feature-card i{ color: var(--dusk-deco); }
[data-theme="dark"] .tier.feature{ background: linear-gradient(160deg, #0a0b1c 0%, #060812 100%); border-color: rgba(120,130,220,.25); }
[data-theme="dark"] .sky[style]{
  background:
    radial-gradient(110% 60% at 75% -5%,  rgba(80,60,180,.28), transparent 55%),
    radial-gradient(80%  70% at 15% -10%, rgba(40,30,120,.35), transparent 50%),
    linear-gradient(180deg, #08091a 0%, #0d0f1a 100%);
  border: 1px solid rgba(120,130,220,.15);
}

/* =============================================
   ENTRANCE ANIMATIONS
   ============================================= */
.reveal{ opacity:0; transform:translateY(18px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise{ to{opacity:1; transform:none} }
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}
.d4{animation-delay:.44s}.d5{animation-delay:.57s}

.hero-title{ font-weight:900; line-height:.92; font-size:clamp(3.4rem,11vw,8rem); }
.hero-title .o{ color:var(--dusk-deco); font-style:italic; }
.hero-lead{ color:var(--hero-sub); }

/* =============================================
   FORECAST STRIP
   ============================================= */
.forecast{
  background:var(--fc-bg);
  color:var(--fc-text);
  border-radius:20px;
  overflow:hidden;
  transition:background .3s;
}
.fcell{ padding:1.4rem 1rem; border-right:1px solid var(--fc-border); text-align:center; }
.fcell:last-child{ border-right:none; }
.fcell i{ font-size:1.6rem; display:block; margin-bottom:.4rem; }
.fcell .day{ font-family:"Spline Sans Mono",monospace; font-size:.7rem; letter-spacing:.2em; opacity:.7; text-transform:uppercase; }
.fcell .lab{ font-family:"Fraunces",serif; font-size:1.05rem; margin-top:.25rem; }
.glow-dawn{color:var(--dawn)}
.glow-clear{color:var(--clear)}
.glow-storm{color:#9fb6ba}
.glow-dusk{color:var(--dusk-deco)}

/* =============================================
   QUOTE SECTION
   ============================================= */
.quote-section{ background:var(--paper-2); transition:background .3s; }
.quote{ font-family:"Fraunces",serif; font-weight:400; font-style:italic; font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.3; }
.quote .accent{ color:var(--dusk-deco); }

/* =============================================
   SECTIONS
   ============================================= */
.section{ padding:6rem 0; }

/* =============================================
   FEATURE CARDS
   ============================================= */
.feature-card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:2.2rem;
  height:100%;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .3s, border-color .3s;
}
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -28px rgba(0,0,0,.4); }
.feature-card i{ font-size:1.9rem; color:var(--dusk-deco); }
.feature-card h3{ font-family:"Fraunces",serif; font-weight:600; font-size:1.35rem; margin:1rem 0 .5rem; color:var(--text-body); }
.feature-card p{ color:var(--text-muted); font-size:.98rem; margin:0; }

/* =============================================
   PRICING TIERS
   ============================================= */
.pricing-section{ background:var(--paper-2); transition:background .3s; }
.tier{
  background:var(--tier-bg);
  border:1px solid var(--tier-border);
  border-radius:20px;
  padding:2.4rem 2rem;
  height:100%;
  position:relative;
  transition:transform .35s, border-color .35s, background .3s;
}
.tier:hover{ transform:translateY(-8px); }
.tier.feature{
  background:var(--tier-feature-bg);
  color:var(--tier-feature-text);
  border-color:var(--tier-feature-bg);
}
.tier.feature .price{ color:var(--dawn); }
.tier.feature .tier-muted{ color:rgba(240,235,224,.65); }
.badge-top{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--dusk-deco); color:#fff;
  font-family:"Spline Sans Mono",monospace;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.4rem .9rem; border-radius:30px;
  white-space:nowrap;
}
.tier h4{ font-family:"Fraunces",serif; font-weight:600; color:var(--text-body); }
.tier.feature h4{ color:var(--tier-feature-text); }
.tier .price{ font-family:"Fraunces",serif; font-weight:900; font-size:2.8rem; letter-spacing:-.02em; color:var(--text-body); }
.tier-muted{ color:var(--text-muted); }
.tier ul{ list-style:none; padding:0; margin:1.5rem 0 0; }
.tier li{ padding:.55rem 0; display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; border-top:1px dashed var(--tier-border); }
.tier.feature li{ border-top-color:rgba(240,235,224,.15); }
.tier li i{ color:var(--clear); margin-top:.15rem; flex-shrink:0; }
.tier.feature li i{ color:var(--dawn); }

/* =============================================
   BUTTONS
   ============================================= */
.btn-ink{
  background:var(--ink); color:var(--paper);
  border-radius:30px; padding:.7rem 1.8rem; font-weight:500; border:none;
  transition:opacity .2s, background .3s, color .3s;
}
.btn-ink:hover{ opacity:.88; color:var(--paper); background:var(--ink); }
.btn-line{
  border:1.5px solid var(--ink); color:var(--ink);
  border-radius:30px; padding:.7rem 1.8rem; font-weight:500; background:transparent;
  transition:background .2s, color .2s, border-color .3s;
}
.btn-line:hover{ background:var(--ink); color:var(--paper); }
.btn-paper{
  background:var(--paper); color:var(--ink);
  border-radius:30px; padding:.7rem 1.8rem; font-weight:500; border:none;
  transition:opacity .2s, background .3s, color .3s;
}
.btn-paper:hover{ opacity:.88; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer{ background:var(--footer-bg); color:var(--footer-text); transition:background .3s; }
.footer-brand{ font-family:"Fraunces",serif; font-weight:900; font-size:1.4rem; letter-spacing:-.02em; }
.footer-brand .o{ color:var(--dusk-deco); font-style:italic; }
.footer-link{ color:var(--footer-text); text-decoration:none; font-size:.875rem; opacity:.65; transition:opacity .2s; }
.footer-link:hover{ opacity:1; color:var(--footer-text); }

/* =============================================
   BAROMETER
   ============================================= */
.barometer{ font-family:"Spline Sans Mono",monospace; font-size:.7rem; letter-spacing:.18em; color:var(--storm); }

/* =============================================
   SKIP LINK (WCAG)
   ============================================= */
.skip-link{
  position:absolute; top:-40px; left:0;
  background:var(--ink); color:var(--paper);
  padding:.5rem 1rem; border-radius:0 0 8px 0;
  font-size:.875rem; font-weight:600;
  z-index:9999; text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{ top:0; }

/* =============================================
   PAGE HEADER (inner pages)
   ============================================= */
.page-hero{ padding-top:4.5rem; padding-bottom:3rem; }
.page-hero-title{
  font-weight:900; line-height:1.05;
  font-size:clamp(2.2rem,5.5vw,3.8rem);
  color:var(--text-body);
}
.page-hero-sub{ color:var(--hero-sub); max-width:38rem; margin-top:.75rem; font-size:1.05rem; }

/* =============================================
   PROSE (about, privacy, terms)
   ============================================= */
.prose{ max-width:42rem; line-height:1.78; font-size:1.06rem; color:var(--text-body); }
.prose p{ margin-bottom:1.5rem; }
.prose h2{
  font-family:"Fraunces",serif; font-weight:600;
  font-size:clamp(1.45rem,3vw,1.9rem);
  margin:3.5rem 0 1rem; color:var(--text-body);
}
.prose h3{ font-family:"Fraunces",serif; font-weight:600; font-size:1.2rem; margin:2rem 0 .75rem; color:var(--text-body); }
.prose ul{ padding-left:1.5rem; margin-bottom:1.5rem; }
.prose ul li{ margin-bottom:.5rem; }
.prose strong{ color:var(--text-body); font-weight:600; }
.prose a{ color:var(--dusk-text); }
.prose a:hover{ color:var(--dusk-deco); }
.prose-lede{
  font-family:"Fraunces",serif; font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.65rem);
  line-height:1.4; color:var(--dusk-text);
  border-left:3px solid var(--dusk-deco);
  padding-left:1.5rem; margin:2.5rem 0 2.5rem;
}

/* =============================================
   CHANGELOG
   ============================================= */
.cl-entry{ padding:2.5rem 0; border-bottom:1px solid var(--line); }
.cl-entry:first-child{ padding-top:0; }
.cl-entry:last-child{ border-bottom:none; }
.cl-meta{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem; }
.cl-date{ font-family:"Spline Sans Mono",monospace; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.cl-version{
  font-family:"Spline Sans Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--paper-2); border:1px solid var(--line); border-radius:30px; padding:.2rem .75rem;
  color:var(--dusk-text); display:inline-block;
  transition:background .3s, border-color .3s;
}
.cl-title{ font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem; margin:0 0 .75rem; color:var(--text-body); }
.cl-body{ color:var(--text-muted); line-height:1.7; }
.cl-items{ list-style:none; padding:0; margin:.75rem 0 0; }
.cl-items li{ padding:.3rem 0; display:flex; gap:.65rem; align-items:flex-start; font-size:.95rem; color:var(--text-body); }
.cl-items li i{ color:var(--clear); flex-shrink:0; margin-top:.2rem; }
.cl-items li i.fix{ color:var(--dawn); }
.cl-items li i.remove{ color:var(--storm); }

/* =============================================
   PRICING PAGE — FAQ accordion
   ============================================= */
.faq-accordion .accordion-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px!important;
  overflow:hidden;
  margin-bottom:.65rem;
  transition:background .3s, border-color .3s;
}
.faq-accordion .accordion-button{
  background:var(--paper);
  color:var(--text-body);
  font-family:"Fraunces",serif; font-weight:600;
  font-size:1.05rem;
  border-radius:14px!important;
  box-shadow:none!important;
  transition:background .3s, color .3s;
}
.faq-accordion .accordion-button:not(.collapsed){
  background:var(--paper);
  color:var(--dusk-text);
  box-shadow:none!important;
}
.faq-accordion .accordion-button::after{ filter:none; }
[data-theme="dark"] .faq-accordion .accordion-button::after{ filter:invert(1); }
.faq-accordion .accordion-body{
  background:var(--paper);
  color:var(--text-muted);
  line-height:1.72;
  padding-top:0;
  transition:background .3s;
}
[data-theme="dark"] .faq-accordion .accordion-item{ background:var(--paper-2); border-color:var(--line); }
[data-theme="dark"] .faq-accordion .accordion-button,
[data-theme="dark"] .faq-accordion .accordion-button:not(.collapsed),
[data-theme="dark"] .faq-accordion .accordion-body{ background:var(--paper-2); }

/* =============================================
   DIVIDER
   ============================================= */
.ruled{ border:none; border-top:1px solid var(--line); margin:0; }