@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');

/* ─── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,video,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ─── TOKENS ─────────────────────────────────────────────── */
:root{
  --hue:18;
  --clay:hsl(var(--hue),38%,52%);
  --clay-dim:hsl(var(--hue),30%,38%);
  --clay-glow:hsl(var(--hue),50%,62%);
  --sage:hsl(88,22%,44%);
  --sage-light:hsl(90,20%,60%);
  --sand:hsl(38,30%,68%);
  --ivory:hsl(42,30%,92%);
  --mist:hsl(205,28%,72%);
  --ink:hsl(30,12%,10%);
  --ink-2:hsl(30,10%,14%);
  --ink-3:hsl(30,8%,18%);
  --ink-4:hsl(30,6%,24%);
  --surface:hsl(30,10%,12%);
  --surface-2:hsl(30,8%,16%);
  --surface-3:hsl(30,6%,20%);
  --line:hsl(30,8%,22%);
  --text-primary:hsl(42,25%,88%);
  --text-secondary:hsl(38,15%,62%);
  --text-muted:hsl(35,10%,46%);
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-xl:32px;
  --shadow-sm:0 1px 3px hsl(0 0% 0% / .35);
  --shadow-md:0 4px 16px hsl(0 0% 0% / .4);
  --shadow-lg:0 12px 40px hsl(0 0% 0% / .5);
  --shadow-glow:0 0 28px hsl(var(--hue) 40% 45% / .25);
  --sp-1:clamp(.25rem,.4vw,.375rem);
  --sp-2:clamp(.5rem,.7vw,.75rem);
  --sp-3:clamp(.75rem,1vw,1rem);
  --sp-4:clamp(1rem,1.5vw,1.375rem);
  --sp-5:clamp(1.25rem,2vw,1.75rem);
  --sp-6:clamp(1.75rem,3vw,2.5rem);
  --sp-7:clamp(2.5rem,4.5vw,3.75rem);
  --sp-8:clamp(3.5rem,7vw,5.5rem);
  --sp-9:clamp(5rem,10vw,8rem);
  --font-serif:'DM Serif Display',Georgia,serif;
  --font-sans:'Inter',system-ui,sans-serif;
  --f-xs:clamp(.7rem,.9vw,.8rem);
  --f-sm:clamp(.8rem,1vw,.9rem);
  --f-base:clamp(.9rem,1.1vw,1rem);
  --f-md:clamp(1rem,1.3vw,1.125rem);
  --f-lg:clamp(1.125rem,1.6vw,1.375rem);
  --f-xl:clamp(1.375rem,2.2vw,1.875rem);
  --f-2xl:clamp(1.75rem,3.5vw,2.625rem);
  --f-3xl:clamp(2.25rem,5.5vw,4rem);
  --f-4xl:clamp(2.75rem,7vw,5.25rem);
  --trans:220ms cubic-bezier(.22,.68,0,1.2);
}

/* ─── BASE ───────────────────────────────────────────────── */
body{
  font-family:var(--font-sans);
  font-size:var(--f-base);
  font-weight:400;
  line-height:1.72;
  color:var(--text-primary);
  background-color:var(--ink);
  background-image:
    radial-gradient(ellipse 70% 50% at 80% 0%,hsl(var(--hue) 30% 18% / .45) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%,hsl(88 22% 20% / .35) 0%,transparent 55%);
  min-height:100vh;
}

/* ─── CONTAINER ──────────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:var(--font-serif);
  font-weight:400;
  line-height:1.18;
  color:var(--text-primary);
  letter-spacing:-.02em;
}
h1{font-size:var(--f-4xl)}
h2{font-size:var(--f-3xl)}
h3{font-size:var(--f-xl)}
h4{font-size:var(--f-lg)}
h5{font-size:var(--f-md)}
p{color:var(--text-secondary);line-height:1.75;max-width:68ch}
p+p{margin-top:var(--sp-3)}
strong{color:var(--text-primary);font-weight:600}
em{font-style:italic;color:var(--clay-glow)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-sans);
  font-size:var(--f-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay-glow);
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width:22px;height:1.5px;
  background:var(--clay-glow);
  border-radius:2px;
}

.lead{
  font-size:var(--f-lg);
  color:var(--text-secondary);
  font-weight:300;
  line-height:1.65;
  max-width:56ch;
}

/* ─── LINKS ──────────────────────────────────────────────── */
a.inline-link{
  color:var(--clay-glow);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color var(--trans);
}
a.inline-link:hover{color:var(--sand)}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-sans);
  font-size:var(--f-sm);
  font-weight:600;
  letter-spacing:.04em;
  border:none;
  cursor:pointer;
  border-radius:var(--radius-md);
  padding:.75em 1.75em;
  transition:transform var(--trans),box-shadow var(--trans),background var(--trans),color var(--trans);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--clay);
  color:hsl(42,30%,94%);
  box-shadow:0 4px 18px hsl(var(--hue) 38% 40% / .45);
}
.btn-primary:hover{
  background:var(--clay-glow);
  box-shadow:0 6px 28px hsl(var(--hue) 50% 50% / .55);
}

.btn-ghost{
  background:transparent;
  color:var(--text-secondary);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{
  border-color:var(--clay);
  color:var(--text-primary);
  background:hsl(var(--hue) 20% 15% / .5);
}

.btn-sage{
  background:var(--sage);
  color:hsl(90,20%,95%);
  box-shadow:0 4px 18px hsl(88 22% 30% / .4);
}
.btn-sage:hover{
  background:var(--sage-light);
  box-shadow:0 6px 24px hsl(88 22% 35% / .5);
}

.btn-sm{
  font-size:var(--f-xs);
  padding:.55em 1.25em;
  border-radius:var(--radius-sm);
}

.btn-lg{
  font-size:var(--f-md);
  padding:.9em 2.25em;
  border-radius:var(--radius-lg);
}

/* ─── HEADER / NAV ───────────────────────────────────────── */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:hsl(30 10% 9% / .88);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  height:clamp(52px,6vw,68px);
}

.nav-brand{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-shrink:0;
}
.nav-brand__icon{
  width:30px;height:30px;
  flex-shrink:0;
}
.nav-brand__name{
  font-family:var(--font-serif);
  font-size:var(--f-lg);
  color:var(--text-primary);
  letter-spacing:-.03em;
}
.nav-brand__name span{color:var(--clay-glow)}

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  flex:1;
  justify-content:center;
}
.nav-links a{
  font-size:var(--f-sm);
  font-weight:500;
  color:var(--text-muted);
  padding:var(--sp-1) var(--sp-3);
  border-radius:var(--radius-sm);
  transition:color var(--trans),background var(--trans);
}
.nav-links a:hover,
.nav-links a.active{
  color:var(--text-primary);
  background:var(--surface-3);
}

.nav-actions{flex-shrink:0}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:var(--sp-2);
}
.nav-toggle span{
  display:block;
  width:22px;height:1.5px;
  background:var(--text-secondary);
  border-radius:2px;
  transition:transform var(--trans),opacity var(--trans);
}

/* ─── MOBILE NAV ─────────────────────────────────────────── */
@media(max-width:768px){
  .nav-links{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    background:hsl(30 10% 10% / .97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:var(--sp-4) var(--sp-5);
    gap:var(--sp-1);
  }
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:var(--sp-2) var(--sp-3)}
  .nav-toggle{display:flex}
  .site-header .wrap{position:relative}
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer{
  background:var(--ink-2);
  border-top:1px solid var(--line);
  padding-block:var(--sp-8) var(--sp-6);
  margin-top:var(--sp-9);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:var(--sp-6);
}
.footer-brand p{
  margin-top:var(--sp-3);
  font-size:var(--f-sm);
  max-width:30ch;
}
.footer-brand .tagline-text{
  display:inline-block;
  margin-top:var(--sp-3);
  font-family:var(--font-serif);
  font-style:italic;
  font-size:var(--f-md);
  color:var(--clay-glow);
}
.footer-col h5{
  font-family:var(--font-sans);
  font-size:var(--f-xs);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:var(--sp-4);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer-col ul a{
  font-size:var(--f-sm);
  color:var(--text-muted);
  transition:color var(--trans);
}
.footer-col ul a:hover{color:var(--text-primary)}

.footer-bottom{
  margin-top:var(--sp-7);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--sp-3);
}
.footer-bottom p{
  font-size:var(--f-xs);
  color:var(--text-muted);
  max-width:none;
}
.footer-social{
  display:flex;
  gap:var(--sp-3);
}
.footer-social a{
  font-size:var(--f-xs);
  color:var(--text-muted);
  letter-spacing:.06em;
  transition:color var(--trans);
}
.footer-social a:hover{color:var(--clay-glow)}

@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
}

/* ─── SECTIONS ───────────────────────────────────────────── */
.section{padding-block:var(--sp-9)}
.section--sm{padding-block:var(--sp-7)}
.section--lg{padding-block:clamp(5rem,12vw,9rem)}
.section--dark{background:var(--ink-2)}
.section--surface{background:var(--surface)}
.section--tinted{
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,hsl(var(--hue) 28% 18% / .3) 0%,transparent 65%),
    var(--ink-2);
}

.section-head{
  max-width:52ch;
  margin-bottom:var(--sp-7);
}
.section-head--center{
  text-align:center;
  margin-inline:auto;
}
.section-head .eyebrow{margin-bottom:var(--sp-3)}
.section-head h2{margin-bottom:var(--sp-3)}
.section-head .lead{margin-top:var(--sp-2)}

/* ─── HERO ───────────────────────────────────────────────── */
.hero-section{
  padding-block:clamp(4rem,10vw,8rem) clamp(3rem,8vw,6rem);
  background:
    radial-gradient(ellipse 80% 60% at 60% -10%,hsl(var(--hue) 35% 22% / .5) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 70%,hsl(88 25% 18% / .4) 0%,transparent 55%),
    var(--ink);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-7);
  align-items:center;
}
.hero-content{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.hero-content .eyebrow{margin-bottom:var(--sp-1)}
.hero-title{
  font-size:var(--f-4xl);
  line-height:1.08;
  color:var(--text-primary);
}
.hero-title em{
  font-style:italic;
  color:var(--clay-glow);
}
.hero-subtitle{
  font-size:var(--f-md);
  color:var(--text-secondary);
  font-weight:300;
  line-height:1.7;
  max-width:44ch;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin-top:var(--sp-2);
}
.hero-note{
  font-size:var(--f-xs);
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:var(--sp-1);
}
.hero-note::before{
  content:'✦';
  color:var(--clay);
  font-size:.7em;
}
.hero-visual{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--surface-2);
  box-shadow:var(--shadow-lg),var(--shadow-glow);
}
.hero-visual img{
  width:100%;height:100%;
  object-fit:cover;
}
.hero-visual-badge{
  position:absolute;
  bottom:var(--sp-4);
  left:var(--sp-4);
  background:hsl(30 10% 8% / .85);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--sp-2) var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.hero-visual-badge strong{
  font-size:var(--f-lg);
  color:var(--clay-glow);
  font-family:var(--font-serif);
}
.hero-visual-badge span{
  font-size:var(--f-xs);
  color:var(--text-muted);
  letter-spacing:.05em;
}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero-visual{max-width:520px;margin-inline:auto;width:100%}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column;align-items:flex-start}
}

/* ─── CARDS ──────────────────────────────────────────────── */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--sp-4);
}
.card{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md),0 0 20px hsl(var(--hue) 30% 35% / .15);
  border-color:hsl(var(--hue) 30% 35%);
}
.card__icon{
  width:44px;height:44px;
  background:hsl(var(--hue) 28% 22%);
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-4);
  font-size:1.25rem;
  color:var(--clay-glow);
}
.card__title{
  font-family:var(--font-serif);
  font-size:var(--f-lg);
  color:var(--text-primary);
  margin-bottom:var(--sp-2);
}
.card__body{
  font-size:var(--f-sm);
  color:var(--text-secondary);
  line-height:1.7;
  max-width:none;
}

/* ─── STATS ──────────────────────────────────────────────── */
.stats-band{
  padding-block:var(--sp-7);
  background:var(--surface);
  border-block:1px solid var(--line);
}
.stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--sp-5);
  text-align:center;
}
.stat-item{display:flex;flex-direction:column;gap:var(--sp-1)}
.stat-item__number{
  font-family:var(--font-serif);
  font-size:var(--f-3xl);
  color:var(--clay-glow);
  line-height:1;
}
.stat-item__label{
  font-size:var(--f-xs);
  color:var(--text-muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ─── CTA BAND ───────────────────────────────────────────── */
.cta-band{
  padding-block:var(--sp-8);
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%,hsl(var(--hue) 32% 20% / .55) 0%,transparent 70%),
    var(--ink-2);
  border-block:1px solid var(--line);
  text-align:center;
}
.cta-band .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-5);
}
.cta-band h2{max-width:18ch;margin-inline:auto}
.cta-band .lead{text-align:center;margin-inline:auto}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  justify-content:center;
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  max-width:720px;
}
.faq-item{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.faq-item details summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  cursor:pointer;
  list-style:none;
  font-weight:500;
  color:var(--text-primary);
  font-size:var(--f-sm);
  transition:background var(--trans);
}
.faq-item details summary::-webkit-details-marker{display:none}
.faq-item details summary:hover{background:var(--surface-3)}
.faq-item details summary::after{
  content:'＋';
  flex-shrink:0;
  color:var(--clay);
  font-size:1.1em;
  transition:transform var(--trans);
}
.faq-item details[open] summary::after{
  content:'－';
}
.faq-item details .faq-body{
  padding:0 var(--sp-5) var(--sp-4);
  font-size:var(--f-sm);
  color:var(--text-secondary);
  line-height:1.75;
}
.faq-item details .faq-body p{max-width:none}

/* ─── CONTENT SECTION ────────────────────────────────────── */
.content-section .two-col{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:var(--sp-7);
  align-items:start;
}
.content-section .two-col .col-left .eyebrow{margin-bottom:var(--sp-3)}
.content-section .two-col .col-right p{max-width:none}

@media(max-width:720px){
  .content-section .two-col{grid-template-columns:1fr}
}

/* ─── PRICING CARDS ──────────────────────────────────────── */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--sp-4);
}
.pricing-card{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--sp-5) var(--sp-5) var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  transition:border-color var(--trans),box-shadow var(--trans);
}
.pricing-card--featured{
  border-color:var(--clay);
  box-shadow:var(--shadow-glow);
  background:hsl(var(--hue) 18% 14%);
}
.pricing-card__badge{
  display:inline-flex;
  width:fit-content;
  font-size:var(--f-xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--clay);
  color:hsl(42 30% 94%);
  padding:.25em .75em;
  border-radius:var(--radius-sm);
}
.pricing-card__price{
  font-family:var(--font-serif);
  font-size:var(--f-3xl);
  color:var(--text-primary);
  line-height:1;
}
.pricing-card__price sup{
  font-size:var(--f-lg);
  vertical-align:super;
  color:var(--text-secondary);
}
.pricing-card__price sub{
  font-size:var(--f-sm);
  color:var(--text-muted);
  font-family:var(--font-sans);
}
.pricing-card__features{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  flex:1;
}
.pricing-card__features li{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  font-size:var(--f-sm);
  color:var(--text-secondary);
}
.pricing-card__features li::before{
  content:'✓';
  color:var(--sage-light);
  font-weight:700;
  flex-shrink:0;
  margin-top:.1em;
}

/* ─── IMAGE PLACEHOLDER ──────────────────────────────────── */
.img-placeholder{
  background:var(--surface-3);
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:var(--f-sm);
  aspect-ratio:16/9;
}

/* ─── FORM ───────────────────────────────────────────────── */
.form-group{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.form-group label{
  font-size:var(--f-sm);
  font-weight:500;
  color:var(--text-secondary);
  letter-spacing:.03em;
}
.form-group input,
.form-group textarea,
.form-group select{
  background:var(--surface-3);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:.75em 1em;
  color:var(--text-primary);
  font-size:var(--f-sm);
  transition:border-color var(--trans),box-shadow var(--trans);
  width:100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:none;
  border-color:var(--clay);
  box-shadow:0 0 0 3px hsl(var(--hue) 38% 40% / .2);
}
.form-group textarea{min-height:120px;resize:vertical}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}

/* ─── UTILITY ────────────────────────────────────────────── */
.text-center{text-align:center}
.text-clay{color:var(--clay-glow)}
.text-sage{color:var(--sage-light)}
.text-sand{color:var(--sand)}
.mt-1{margin-top:var(--sp-1)}
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}
.mb-4{margin-bottom:var(--sp-4)}
.mb-6{margin-bottom:var(--sp-6)}
.gap-3{gap:var(--sp-3)}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
} img,svg,video{max-width:100%;height:auto} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%}