/* ===================== TOKENS ===================== */
:root{
  --orange: #FF5A1F;
  --orange-light: #FFB347;
  --teal-day: #146356;
  --teal-night: #3FA592;
  --radius-s: 6px;
  --radius-m: 14px;
  --maxw: 1160px;
  --ff-display: 'Unbounded', sans-serif;
  --ff-body: 'Manrope', sans-serif;
}
html[data-theme="day"]{
  --bg: #FAF9F5; --bg-alt: #F1EEE7; --bg-raised: #FFFFFF;
  --text: #16140F; --text-muted: rgba(22,20,15,.62);
  --border: rgba(22,20,15,.14); --border-strong: rgba(22,20,15,.28);
  --teal: var(--teal-day);
}
html[data-theme="night"]{
  --bg: #0C0C0B; --bg-alt: #141311; --bg-raised: #19170F;
  --text: #F4F2EA; --text-muted: rgba(244,242,234,.62);
  --border: rgba(244,242,234,.14); --border-strong: rgba(244,242,234,.28);
  --teal: var(--teal-night);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--ff-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .4s ease, color .4s ease;}
h1,h2,h3{font-family:var(--ff-display); margin:0; line-height:1.14; font-weight:700;}
p{margin:0;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--orange); color:#fff;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }
:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{padding:96px 0;}
section + section{border-top:1px solid var(--border);}
@media (max-width:720px){ section{padding:64px 0;} }

.section-head{max-width:680px; margin-bottom:44px;}
.section-head .kicker{font-size:13.5px; font-weight:700; color:var(--orange); margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(26px,3.2vw,38px); margin-bottom:14px;}
.section-head p{color:var(--text-muted); font-size:17px;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:var(--radius-s); font-weight:700; font-size:15px; border:1px solid transparent; text-decoration:none; transition:transform .15s ease, background .2s ease, border-color .2s ease; white-space:nowrap;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:#E64F16;}
.btn-outline{background:transparent; color:var(--text); border-color:var(--border-strong);}
.btn-outline:hover{border-color:var(--orange); color:var(--orange);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* NAV */
header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px;}
.logo{display:flex; align-items:baseline; gap:6px; font-family:var(--ff-display); font-size:19px; font-weight:800;}
.logo span:first-child{color:var(--orange);}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:14.5px; font-weight:600;}
.nav-links a{text-decoration:none; color:var(--text-muted); transition:color .2s;}
.nav-links a:hover{color:var(--text);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.theme-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; display:flex; align-items:center; justify-content:center; color:var(--text);}
.theme-btn svg{width:17px; height:17px;}
.nav-cta{display:none;}
@media (min-width:900px){ .nav-cta{display:inline-flex;} }
.burger{display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; align-items:center; justify-content:center;}
@media (max-width:899px){ .nav-links{display:none;} .burger{display:flex;} }
.mobile-nav{display:none; flex-direction:column; gap:2px; padding:8px 0 20px;}
.mobile-nav.is-open{display:flex;}
.mobile-nav a{padding:12px 4px; text-decoration:none; color:var(--text); font-weight:600; border-bottom:1px solid var(--border);}

/* HERO */
.hero{padding:64px 0 88px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:44px;} }
.hero h1{font-size:clamp(32px,4.4vw,50px); letter-spacing:-.01em;}
.hero h1 em{font-style:normal; color:var(--orange);}
.hero .lede{margin-top:20px; font-size:18px; color:var(--text-muted); max-width:54ch;}
.hero-actions{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}
.trust-row{margin-top:26px; display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; color:var(--text-muted);}
.trust-row li{display:flex; align-items:center; gap:7px; list-style:none;}
.trust-row svg{width:15px; height:15px; color:var(--teal); flex:none;}

/* Hero pricing card */
.price-card{border:1px solid var(--border-strong); border-radius:var(--radius-m); background:var(--bg-raised); padding:26px; box-shadow:0 24px 60px -30px rgba(0,0,0,.3);}
.price-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.price-card-top h3{font-size:15px;}
.bot-switch{display:flex; border:1px solid var(--border-strong); border-radius:999px; padding:3px; font-size:12.5px; font-weight:700;}
.bot-switch button{padding:7px 12px; border-radius:999px; border:none; background:transparent; color:var(--text-muted);}
.bot-switch button.is-active{background:var(--orange); color:#fff;}
.price-display{display:flex; align-items:baseline; gap:12px; margin-bottom:6px;}
.price-old{font-size:17px; color:var(--text-muted); text-decoration:line-through; text-decoration-color:var(--orange);}
.price-new{font-family:var(--ff-display); font-size:36px; font-weight:800; color:var(--orange);}
.price-card .promo-note{font-size:13px; color:var(--text-muted);}
.price-card .promo-note b{font-family:monospace; color:var(--text); background:var(--bg-alt); padding:2px 7px; border-radius:4px;}
.included-list{list-style:none; margin:18px 0 20px; padding:0; display:grid; gap:9px;}
.included-list li{display:flex; gap:9px; font-size:14px;}
.included-list svg{flex:none; width:16px; height:16px; color:var(--teal); margin-top:2px;}
.countdown{display:flex; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border);}
.countdown .cell{text-align:center; flex:1;}
.countdown .num{font-family:var(--ff-display); font-size:20px; font-weight:700; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-s); padding:7px 4px; display:block;}
.countdown .lbl{font-size:10.5px; color:var(--text-muted); margin-top:4px; display:block;}

/* STEPS */
.steps{display:grid; gap:0;}
.step{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--border);}
.step:last-child{border-bottom:none;}
.step-icon{border:1px solid var(--border-strong); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--orange);}
.step-icon svg{width:20px; height:20px;}
.step h3{font-size:19px; margin-bottom:6px;}
.step p{color:var(--text-muted); font-size:15px; max-width:58ch;}
.for-whom{margin-top:10px; font-size:13.5px; color:var(--text); background:var(--bg-alt); border-radius:8px; padding:8px 12px; display:inline-block;}

/* ADVANTAGES / benefit grids */
.adv-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden;}
@media (max-width:720px){ .adv-grid{grid-template-columns:1fr;} }
.adv-item{background:var(--bg); padding:30px 28px;}
.adv-item svg{width:24px; height:24px; color:var(--orange);}
.adv-item h3{font-size:17px; margin:16px 0 8px;}
.adv-item p{font-size:14.5px; color:var(--text-muted);}

/* TABS */
.tabs__nav{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;}
.tabs__btn{padding:10px 18px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--text-muted); font-size:14px; font-weight:600; transition:all .2s ease;}
.tabs__btn.is-active{background:var(--text); color:var(--bg); border-color:var(--text);}
.tabs__panel{display:none;}
.tabs__panel.is-active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}

.compare-block{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden;}
@media (max-width:720px){ .compare-block{grid-template-columns:1fr;} }
.compare-col{background:var(--bg); padding:24px 26px;}
.compare-col h4{font-size:13px; font-weight:700; color:var(--text-muted); margin-bottom:14px; text-transform:none;}
.compare-col.is-highlight{background:var(--bg-raised);}
.compare-col.is-highlight h4{color:var(--teal);}
.compare-col ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.compare-col li{display:flex; gap:10px; font-size:14.5px;}
.compare-col li svg{flex:none; width:16px; height:16px; margin-top:3px; color:var(--text-muted);}
.compare-col.is-highlight li svg{color:var(--teal);}

/* Examples */
.example-panel{display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:center;}
@media (max-width:820px){ .example-panel{grid-template-columns:1fr;} }
.example-visual{aspect-ratio:4/3; border-radius:var(--radius-m); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg, var(--bg-alt), var(--bg-raised));}
.example-visual span{font-size:13px; color:var(--text-muted); border:1px dashed var(--border-strong); padding:6px 14px; border-radius:999px;}
.example-copy h3{font-size:22px; margin-bottom:12px;}
.example-copy p{color:var(--text-muted); font-size:15px; margin-bottom:16px;}
.example-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.example-list li{display:flex; gap:10px; font-size:14.5px;}
.example-list svg{flex:none; width:16px; height:16px; color:var(--teal); margin-top:3px;}

/* REQUEST FORM */
.request-layout{display:grid; grid-template-columns:1fr .8fr; gap:48px;}
@media (max-width:920px){ .request-layout{grid-template-columns:1fr;} }
.form-card{border:1px solid var(--border-strong); border-radius:var(--radius-m); background:var(--bg-raised); padding:30px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13.5px; font-weight:700; margin-bottom:7px;}
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-s); border:1px solid var(--border-strong);
  background:var(--bg); color:var(--text); font-family:inherit; font-size:14.5px;
}
.field textarea{resize:vertical; min-height:90px;}
.method-switch{display:flex; flex-wrap:wrap; gap:8px;}
.method-switch button{padding:9px 14px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--text-muted); font-size:13.5px; font-weight:600;}
.method-switch button.is-active{background:var(--orange); color:#fff; border-color:var(--orange);}
.bot-field-switch{display:flex; border:1px solid var(--border-strong); border-radius:999px; padding:3px; max-width:320px;}
.bot-field-switch button{flex:1; padding:9px 12px; border-radius:999px; border:none; background:transparent; color:var(--text-muted); font-weight:700; font-size:13.5px;}
.bot-field-switch button.is-active{background:var(--orange); color:#fff;}
.agree-row{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-muted); margin:20px 0;}
.agree-row input{margin-top:3px;}
.agree-row a{color:var(--teal); text-decoration:underline;}
.hp-field{position:absolute; left:-9999px; opacity:0;}
.form-msg{margin-top:14px; font-size:13.5px; padding:12px 14px; border-radius:8px; display:none;}
.form-msg.show{display:block;}
.form-msg.ok{background:color-mix(in srgb, var(--teal) 16%, transparent); color:var(--teal);}
.form-msg.err{background:color-mix(in srgb, var(--orange) 14%, transparent); color:var(--orange);}

.summary-card{border:1px solid var(--border-strong); border-radius:var(--radius-m); padding:26px; align-self:start; position:sticky; top:96px;}
.summary-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px;}
.summary-row .v{font-weight:700;}
.summary-row.gift .v{color:var(--teal);}
.summary-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px;}
.summary-total .val{font-family:var(--ff-display); font-size:26px; color:var(--orange); font-weight:800;}

/* BOOKING WIDGET */
.booking-card{border:1px solid var(--border-strong); border-radius:var(--radius-m); background:var(--bg-raised); padding:30px; max-width:560px;}
.booking-card .field{margin-bottom:18px;}
.booking-card select{width:100%; padding:12px 14px; border-radius:var(--radius-s); border:1px solid var(--border-strong); background:var(--bg); color:var(--text); font-family:inherit; font-size:14.5px;}
.slot-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.slot-btn{padding:9px 14px; border-radius:8px; border:1px solid var(--border-strong); background:transparent; color:var(--text); font-size:13.5px; font-weight:600;}
.slot-btn.is-selected{background:var(--orange); border-color:var(--orange); color:#fff;}
.slot-btn[disabled]{opacity:.4; cursor:not-allowed;}
.booking-empty{font-size:13.5px; color:var(--text-muted); padding:10px 0;}
.booking-success{display:none; text-align:center; padding:20px 0;}
.booking-success.show{display:block;}
.booking-success .code{font-family:var(--ff-display); font-size:30px; font-weight:800; color:var(--orange); margin:14px 0; letter-spacing:.04em;}

/* FOOTER */
footer{padding:56px 0 40px;}
.footer-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start;}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text);}
.footer-social a:hover{border-color:var(--orange); color:var(--orange);}
.footer-social svg{width:16px; height:16px;}
.footer-meta{font-size:12.5px; color:var(--text-muted); max-width:420px;}
.footer-bottom{margin-top:40px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted);}
.footer-bottom a{color:var(--text-muted); text-decoration:underline;}