/* Snizz Performance — site styles (brand kit v1.0: Rajdhani + Inter, Racing Teal / Nitro Cyan / Pit Black) */
:root{
  --teal:#00ABCF;
  --cyan:#4DE3F7;
  --teal-rgb:0,171,207;
  --cyan-rgb:77,227,247;
  --black:#0A0A0A;
  --near-black:#111315;
  --panel:#15181b;
  --line:#23272b;
  --white:#FFFFFF;
  --gray:#8A8A8A;
  --silver:#BEBEBE;
  --head:'Rajdhani', sans-serif;
  --body:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:76px;}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  html{scroll-behavior:auto;}
}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.kicker{
  font-family:var(--head); font-weight:600;
  font-size:0.85rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--teal);
  display:flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:22px; height:2px; background:var(--teal);}
h1,h2,h3{font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; line-height:1;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--head); font-weight:700; font-size:0.95rem;
  text-transform:uppercase; letter-spacing:0.08em;
  padding:13px 26px; border-radius:6px; border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-teal{background:var(--teal); color:var(--black);}
.btn-teal:hover{background:var(--cyan); transform:translateY(-1px); box-shadow:0 8px 24px rgba(var(--teal-rgb),0.35);}
.btn-outline{border-color:#3a3f44; color:var(--white);}
.btn-outline:hover{border-color:var(--teal); color:var(--cyan);}
.btn-block{display:flex; width:100%;}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(10,10,10,0.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px;}
/* the logo PNG carries generous padding; this crops to the wordmark */
.logo-crop{display:block; width:150px; height:30px; overflow:hidden; position:relative; flex-shrink:0;}
.logo-crop img{position:absolute; width:197px; max-width:none; left:-19px; top:-19px;}
.nav-links{list-style:none; display:flex; gap:30px;}
.nav-links a{
  font-family:var(--head); font-weight:600; font-size:0.95rem;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--silver); text-decoration:none; transition:color .15s;
}
.nav-links a:hover{color:var(--cyan);}
.nav-right{display:flex; align-items:center; gap:12px;}
.nav-cta{padding:9px 18px; font-size:0.85rem;}
.menu-btn{
  display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:6px;
  background:transparent; color:var(--white); cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after{
  content:""; display:block; width:18px; height:2px; background:currentColor; position:relative; transition:transform .2s, background .2s;
}
.menu-btn span::before{position:absolute; top:-6px;}
.menu-btn span::after{position:absolute; top:6px;}
.site-nav.open .menu-btn span{background:transparent;}
.site-nav.open .menu-btn span::before{transform:translateY(6px) rotate(45deg);}
.site-nav.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:160px 0 110px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(var(--teal-rgb),0.22), transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 100%, rgba(var(--cyan-rgb),0.08), transparent 70%),
    var(--black);
}
.hero::before{ /* faint dyno-sheet grid */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom, #000 40%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, #000 40%, transparent);
}
.hero-inner{position:relative; z-index:2;}
.hero h1{
  margin-top:22px;
  font-size:clamp(2.8rem, 7.5vw, 5.8rem);
  line-height:0.92;
  max-width:880px;
}
.hero h1 .accent{
  color:var(--teal);
  background:linear-gradient(90deg, var(--teal), var(--cyan));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero .sub{margin-top:26px; font-size:1.1rem; color:var(--silver); max-width:560px;}
.hero-ctas{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap;}

.dyno{
  position:absolute; right:-3%; top:18%;
  width:min(620px, 55%); z-index:1; opacity:0.95;
}
.dyno svg{width:100%; height:auto; overflow:visible;}
.curve{fill:none; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.4s cubic-bezier(.2,.7,.3,1) forwards;}
.curve-power{stroke:var(--teal); animation-delay:.2s; filter:drop-shadow(0 0 8px rgba(var(--teal-rgb),0.7));}
.curve-torque{stroke:var(--cyan); opacity:.7; animation-delay:.5s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.dyno-label{font-family:var(--head); font-weight:600; font-size:13px; letter-spacing:0.12em; fill:var(--gray);}

/* ---------- Stats strip ---------- */
.stats{background:var(--near-black); border-bottom:1px solid var(--line);}
.stats-grid{display:grid; grid-template-columns:repeat(4, 1fr);}
.stat{padding:34px 20px; text-align:center; border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat-num{font-family:var(--head); font-weight:700; font-size:clamp(1.7rem, 3.2vw, 2.4rem); color:var(--teal); line-height:1.1;}
.stat-label{margin-top:4px; font-size:0.78rem; color:var(--gray); text-transform:uppercase; letter-spacing:0.08em;}

/* ---------- Sections ---------- */
.section{padding:100px 0;}
.section-alt{background:var(--near-black); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:640px; margin-bottom:54px;}
.section-head h2{margin-top:14px; font-size:clamp(2.2rem, 4.5vw, 3.2rem);}
.section-head p{margin-top:16px; color:var(--silver);}

/* ---------- Packages ---------- */
.tiers{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch;}
.tier{
  position:relative; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:34px 28px 28px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tier:hover{transform:translateY(-4px); border-color:#33393f; box-shadow:0 16px 40px rgba(0,0,0,0.4);}
.tier.featured{
  border-color:var(--teal);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),0.10), var(--panel) 45%);
  box-shadow:0 0 0 1px var(--teal), 0 20px 50px rgba(var(--teal-rgb),0.15);
}
.tier-badge{
  position:absolute; top:-13px; left:28px;
  background:var(--teal); color:var(--black);
  font-family:var(--head); font-weight:700; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:4px 12px; border-radius:4px;
}
.stage{font-family:var(--head); font-weight:600; font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal);}
.tier h3{margin-top:6px; font-size:2rem;}
.price{margin-top:20px; font-family:var(--head); font-weight:700; font-size:2.4rem; line-height:1;}
.price span{font-family:var(--body); font-weight:400; font-size:0.9rem; color:var(--gray);}
.gains{margin-top:8px; font-family:var(--head); font-weight:600; font-size:1rem; letter-spacing:0.04em; color:var(--cyan);}
.tier ul{list-style:none; margin-top:22px; flex:1;}
.tier li{
  position:relative; padding:10px 0 10px 24px;
  border-top:1px solid var(--line); font-size:0.93rem; color:var(--silver);
}
.tier li:first-child{border-top:none;}
.tier li::before{
  content:""; position:absolute; left:2px; top:17px;
  width:10px; height:6px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}
.tier .btn{margin-top:26px;}

/* ---------- Capabilities ---------- */
.caps{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.cap{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:34px 28px; position:relative; overflow:hidden;
}
.cap::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:64px; background:var(--teal);
  transition:width .3s ease;
}
.cap:hover::after{width:100%;}
.cap-idx{font-family:var(--head); font-weight:700; font-size:2.6rem; line-height:1; color:transparent; -webkit-text-stroke:1px var(--teal);}
.cap h3{margin-top:18px; font-size:1.35rem;}
.cap p{margin-top:10px; color:var(--silver); font-size:0.94rem;}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.g{
  aspect-ratio:1; border-radius:10px; border:1px dashed #33393f;
  background:linear-gradient(145deg, var(--panel), var(--near-black));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; padding:14px; color:var(--gray);
  font-family:var(--head); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:0.9rem;
}
.g small{font-family:var(--body); font-weight:400; letter-spacing:0; text-transform:none; font-size:0.78rem; color:#666;}
.g img{width:100%; height:100%; object-fit:cover; border-radius:8px;}

/* ---------- Booking CTA ---------- */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  padding:110px 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 80% at 50% 0%, rgba(var(--teal-rgb),0.22), transparent 70%),
    var(--black);
}
.cta-mono{width:84px; margin:0 auto 22px; opacity:0.95;}
.cta-band h2{font-size:clamp(2.2rem, 5vw, 3.4rem); max-width:720px; margin:0 auto;}
.cta-band p{margin:18px auto 0; max-width:500px; color:var(--silver);}
.cta-band .btn{margin-top:34px; padding:16px 34px; font-size:1.05rem;}

/* ---------- Footer ---------- */
.site-footer{padding:52px 0 40px; border-top:1px solid var(--line); background:var(--near-black);}
.foot-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; padding-bottom:28px; border-bottom:1px solid var(--line);}
.foot-links{list-style:none; display:flex; flex-wrap:wrap; gap:24px;}
.foot-links a{font-family:var(--head); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:0.9rem; color:var(--silver); text-decoration:none;}
.foot-links a:hover{color:var(--cyan);}
.socials{display:flex; gap:12px;}
.socials a{
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--silver);
  transition:border-color .15s, color .15s;
}
.socials a:hover{border-color:var(--teal); color:var(--cyan);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:0.8rem; color:var(--gray);}

/* ---------- Disclaimer pop-up ---------- */
.disclaimer{
  width:min(600px, calc(100% - 32px)); max-height:calc(100% - 32px);
  margin:auto; padding:0; border:1px solid var(--teal); border-radius:12px;
  background:var(--near-black); color:var(--white);
  box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--teal-rgb),0.2);
}
.disclaimer::backdrop{background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.disclaimer-inner{display:flex; flex-direction:column; gap:16px; padding:30px 28px 26px;}
.disclaimer h2{font-size:2rem;}
.disclaimer-pick{margin:0; color:var(--cyan); font-family:var(--head); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; font-size:0.95rem;}
.disclaimer-pick:empty{display:none;}
.disclaimer-body{max-height:42vh; overflow-y:auto; padding:16px 18px; background:var(--black); border:1px solid var(--line); border-radius:8px; font-size:0.9rem; color:var(--silver);}
.disclaimer-body ul{margin:12px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:10px;}
.disclaimer-body strong{color:var(--white);}
.disclaimer-agree{display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:0.95rem;}
.disclaimer-agree input{width:20px; height:20px; margin-top:2px; accent-color:var(--teal); flex-shrink:0; cursor:pointer;}
.disclaimer-actions{display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap;}
.disclaimer-actions .btn-outline{background:transparent;}
.disclaimer-actions .btn:disabled{opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none;}
@media (max-width:480px){ .disclaimer-inner{padding:24px 18px 20px;} .disclaimer-actions{flex-direction:column-reverse;} .disclaimer-actions .btn{width:100%;} }

/* ---------- Checkout / cart page ---------- */
.checkout{padding:130px 0 90px; min-height:70vh;}
.checkout h1{margin-top:14px; font-size:clamp(2.4rem, 5vw, 3.4rem);}
.cart-empty{margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; color:var(--silver);}
.cart-grid{margin-top:36px; display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:24px; align-items:start;}
.cart-item, .cart-summary{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px;}
.cart-item-head{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line);}
.cart-item h2{margin-top:6px; font-size:2rem;}
.cart-price{font-family:var(--head); font-weight:700; font-size:2rem; line-height:1;}
.cart-price span{font-family:var(--body); font-weight:400; font-size:0.85rem; color:var(--gray);}
.cart-options{margin:0; display:flex; flex-direction:column;}
.cart-options div{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line);}
.cart-options dt{font-family:var(--head); font-weight:600; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray);}
.cart-options dd{margin:0; text-align:right; color:var(--white);}
.cart-item-actions{display:flex; gap:22px; margin-top:18px;}
.cart-link{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:0.9rem; color:var(--teal); text-decoration:underline; text-underline-offset:3px;}
.cart-link:hover{color:var(--cyan);}
.cart-summary{position:sticky; top:96px; display:flex; flex-direction:column; gap:14px;}
.cart-summary h2{font-size:1.4rem;}
.sum-row{display:flex; justify-content:space-between; gap:14px; font-size:0.95rem; color:var(--silver); font-variant-numeric:tabular-nums;}
.sum-order{margin-top:-6px; font-size:0.9rem; color:var(--gray); font-variant-numeric:tabular-nums;}
.sum-order strong{color:var(--cyan); font-family:var(--head); font-size:1.05rem; letter-spacing:0.06em;}
.sum-note{color:var(--gray); font-size:0.85rem;}
.sum-total{flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line); font-family:var(--head); font-weight:700; font-size:1.3rem; color:var(--white); text-transform:uppercase; letter-spacing:0.04em;}
.sum-agreed{margin:0; font-size:0.85rem; color:var(--cyan);}
.cart-summary .btn{margin-top:6px;}
.cart-summary .btn:disabled, .cart-summary .btn[aria-disabled="true"]{opacity:0.4; cursor:not-allowed; pointer-events:none;}
.sum-fine{margin:0; font-size:0.8rem; color:var(--gray); text-align:center;}
.checkout-page .site-footer{padding-top:24px;}
.checkout-page .foot-bottom{padding-top:0;}
@media (max-width: 820px){
  .cart-grid{grid-template-columns:1fr;}
  .cart-summary{position:static;}
}
@media (max-width: 480px){
  .checkout-page .nav-cta{display:inline-flex; padding:8px 12px; font-size:0.75rem;}
  .cart-item, .cart-summary{padding:22px 18px;}
  .cart-options div{flex-direction:column; gap:4px;}
  .cart-options dd{text-align:left;}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
.no-js .reveal{opacity:1; transform:none;}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .tiers, .caps{grid-template-columns:1fr; max-width:560px;}
  .tier.featured{order:-1;}
  .gallery{grid-template-columns:repeat(2, 1fr);}
  .dyno{opacity:0.35; width:90%; right:-25%; top:auto; bottom:6%;}
}
@media (max-width: 820px){
  .menu-btn{display:inline-flex;}
  .nav-links{
    position:absolute; top:68px; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--black); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-links a{display:block; padding:16px 24px; border-top:1px solid var(--line);}
  .site-nav.open .nav-links{max-height:420px;}
  .stats-grid{grid-template-columns:repeat(2, 1fr);}
  .stat:nth-child(2){border-right:none;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
@media (max-width: 480px){
  .nav-cta{display:none;}
  .hero{padding:130px 0 80px;}
  .hero-ctas .btn{flex:1; white-space:nowrap; padding:13px 16px;}
  .section{padding:72px 0;}
  .wrap{padding:0 16px;}
  .foot-top{flex-direction:column; align-items:flex-start;}
  .foot-links{gap:18px;}
}

/* ---------- Package vehicle dropdown ---------- */
.vehicle{display:flex; flex-direction:column; gap:6px; margin-top:22px;}
.vehicle span{font-family:var(--head); font-weight:600; font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray);}
.vehicle select{
  appearance:none; -webkit-appearance:none; width:100%;
  font-family:var(--body); font-size:0.95rem; color:var(--white);
  background-color:var(--black);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300ABCF' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  border:1px solid #33393f; border-radius:6px;
  padding:12px 40px 12px 14px; cursor:pointer;
  transition:border-color .15s;
}
.vehicle select:hover{border-color:var(--teal);}
.vehicle select:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-color:var(--teal);}
.vehicle select option{background:var(--near-black); color:var(--white);}
.tier .vehicle + .btn{margin-top:14px;}
.tier .vehicle + .vehicle{margin-top:14px;}
.vehicle select.invalid{border-color:#E5484D;}
.tier-error{margin-top:12px; font-size:0.85rem; color:#FF6B6F;}
.tier .tier-error + .btn{margin-top:12px;}
.book-choice{margin-top:14px !important; color:var(--cyan) !important; font-family:var(--head); font-weight:600; letter-spacing:0.06em; text-transform:uppercase;}

/* ---------- Track Package ---------- */
.track-grid{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:48px; align-items:start;}
.track-grid .section-head{margin-bottom:34px;}
.track-features{display:flex; flex-direction:column; gap:14px;}
.track-feature{padding:22px 24px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:10px;}
.track-feature h3{font-size:1.3rem;}
.track-feature p{margin-top:6px; color:var(--silver); font-size:0.94rem;}
.track-card{margin-top:12px;}
@media (max-width: 960px){
  .track-grid{grid-template-columns:1fr; gap:36px;}
  .track-card{max-width:560px; margin-top:0;}
}

/* ---------- Track Package offer (disclaimer + cart) ---------- */
.upsell{
  position:relative; overflow:hidden; display:flex; gap:14px; align-items:flex-start;
  padding:20px 20px 18px; border:2px solid transparent; border-radius:12px; cursor:pointer;
  background:
    linear-gradient(135deg, rgba(var(--teal-rgb),0.18), rgba(10,10,10,0.92) 60%) padding-box,
    linear-gradient(90deg, var(--teal), var(--cyan), #ffffff, var(--cyan), var(--teal)) border-box;
  background-size:100% 100%, 300% 100%;
  animation:upsell-border 3s linear infinite, upsell-glow 2.2s ease-in-out infinite;
  transition:transform .15s ease;
}
.upsell:hover{transform:translateY(-1px);}
.upsell::after{ /* shine sweep */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
  transform:skewX(-20deg); animation:upsell-shine 3.2s ease-in-out infinite;
}
@keyframes upsell-border{to{background-position:0 0, 300% 0;}}
@keyframes upsell-glow{
  0%,100%{box-shadow:0 0 14px rgba(var(--teal-rgb),0.35), inset 0 0 0 rgba(var(--cyan-rgb),0);}
  50%{box-shadow:0 0 30px rgba(var(--cyan-rgb),0.65), inset 0 0 18px rgba(var(--cyan-rgb),0.12);}
}
@keyframes upsell-shine{0%{left:-60%;} 55%,100%{left:130%;}}
.upsell:has(input:checked){
  background:
    linear-gradient(135deg, rgba(var(--teal-rgb),0.38), rgba(10,10,10,0.88) 70%) padding-box,
    linear-gradient(90deg, var(--cyan), #ffffff, var(--cyan)) border-box;
  background-size:100% 100%, 300% 100%;
}
.upsell-badge{
  position:absolute; top:0; right:0; padding:4px 12px; border-bottom-left-radius:10px;
  background:linear-gradient(90deg, var(--teal), var(--cyan)); color:var(--black);
  font-family:var(--head); font-weight:700; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
}
.upsell input{width:22px; height:22px; margin-top:4px; accent-color:var(--cyan); flex-shrink:0; cursor:pointer; position:relative; z-index:1;}
.upsell-text{display:flex; flex-direction:column; gap:8px; position:relative; z-index:1;}
.upsell-text strong{font-family:var(--head); font-size:1.35rem; line-height:1.1; letter-spacing:0.04em; text-transform:uppercase; padding-right:60px;}
.upsell-text em{
  font-style:normal; white-space:nowrap;
  background:linear-gradient(90deg, var(--cyan), #ffffff, var(--cyan)); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:upsell-border 2.5s linear infinite;
}
.upsell-chips{display:flex; flex-wrap:wrap; gap:6px;}
.upsell-chips span{
  padding:3px 10px; border:1px solid rgba(var(--cyan-rgb),0.5); border-radius:999px;
  font-family:var(--head); font-weight:600; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--cyan);
  background:rgba(var(--teal-rgb),0.12);
}
.upsell-text small{font-size:0.85rem; color:var(--silver);}
.cart-upsell{grid-column:1; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:22px 28px; border:1px dashed var(--teal); border-radius:12px; background:rgba(var(--teal-rgb),0.06);}
.cart-upsell h2{margin-top:4px; font-size:1.5rem;}
.cart-upsell h2 span{color:var(--cyan);}
.cart-upsell p{margin-top:6px; color:var(--silver); font-size:0.92rem;}
.cart-upsell .btn{background:transparent;}
.cart-summary{grid-column:2; grid-row:1 / span 2;}
.cart-options dd .cart-link{margin-left:10px;}
@media (max-width: 820px){
  .cart-upsell, .cart-summary{grid-column:auto; grid-row:auto;}
}

/* struck-through regular price next to the bundle price */
.was{color:var(--gray); text-decoration-thickness:2px; text-decoration-color:#E5484D; font-size:0.85em; -webkit-text-fill-color:var(--gray);}

/* ======================================================================
   Motion & light layer: animated hero, ticker, card spotlights,
   glowing borders and button shine. All motion is reduced by the
   prefers-reduced-motion rule at the top of this file.
   ====================================================================== */
@property --angle{syntax:'<angle>'; initial-value:0deg; inherits:false;}

/* ---------- Nav: solidifies on scroll + progress bar ---------- */
.site-nav{transition:background .25s ease, box-shadow .25s ease;}
.site-nav.scrolled{background:rgba(10,10,10,0.94); box-shadow:0 10px 30px rgba(0,0,0,0.45);}
.site-nav::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg, var(--teal), var(--cyan));
  box-shadow:0 0 10px rgba(var(--cyan-rgb),0.7);
  transform-origin:left; transform:scaleX(var(--progress, 0));
}
.nav-links a{position:relative;}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-links a:hover::after{transform:scaleX(1);}
@media (max-width: 820px){ .nav-links a::after{display:none;} }

/* ---------- Buttons: shine sweep ---------- */
.btn{position:relative; overflow:hidden; isolation:isolate;}
.btn-teal{background:linear-gradient(100deg, var(--teal), var(--teal-2, #19c3e4));}
.btn-teal::after{
  content:""; position:absolute; top:0; bottom:0; left:-75%; width:50%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-teal:hover::after{left:130%;}
.btn-teal:hover{box-shadow:0 10px 30px rgba(var(--teal-rgb),0.45), 0 0 0 1px rgba(var(--cyan-rgb),0.4);}
.btn-outline:hover{box-shadow:inset 0 0 18px rgba(var(--teal-rgb),0.18), 0 0 18px rgba(var(--teal-rgb),0.15);}
.btn:disabled::after{display:none;}

/* ---------- Hero ---------- */
.hero::before{animation:grid-pan 22s linear infinite;}
@keyframes grid-pan{to{background-position:56px 56px, 56px 56px;}}
.hero-glow{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.hero-glow span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;}
.hero-glow span:nth-child(1){
  width:520px; height:520px; right:-120px; top:-140px;
  background:radial-gradient(circle, rgba(var(--teal-rgb),0.55), transparent 65%);
  animation:orb-a 14s ease-in-out infinite alternate;
}
.hero-glow span:nth-child(2){
  width:380px; height:380px; left:-120px; bottom:-160px;
  background:radial-gradient(circle, rgba(var(--cyan-rgb),0.32), transparent 65%);
  animation:orb-b 18s ease-in-out infinite alternate;
}
@keyframes orb-a{to{transform:translate(-140px, 90px) scale(1.15);}}
@keyframes orb-b{to{transform:translate(160px, -60px) scale(1.2);}}

/* staggered entrance */
.hero-inner > *{animation:hero-in .8s cubic-bezier(.2,.7,.3,1) both;}
.hero-inner > :nth-child(2){animation-delay:.12s;}
.hero-inner > :nth-child(3){animation-delay:.26s;}
.hero-inner > :nth-child(4){animation-delay:.38s;}
@keyframes hero-in{from{opacity:0; transform:translateY(22px);}}

.hero h1 .accent{
  background:linear-gradient(90deg, var(--teal), var(--cyan), #ffffff, var(--cyan), var(--teal));
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:accent-shine 6s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(var(--teal-rgb),0.35));
}
@keyframes accent-shine{0%,100%{background-position:0 0;} 50%{background-position:100% 0;}}

.tracer{fill:#fff; filter:drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 14px var(--teal)); opacity:0; animation:tracer-on .2s .2s forwards, tracer-pulse 1.6s 2.6s ease-in-out infinite;}
@keyframes tracer-on{to{opacity:1;}}
@keyframes tracer-pulse{50%{opacity:.45;}}

/* ---------- Ticker ---------- */
.ticker{
  overflow:hidden; border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(var(--teal-rgb),0.08), rgba(var(--cyan-rgb),0.03), rgba(var(--teal-rgb),0.08));
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{display:flex; width:max-content; animation:ticker 38s linear infinite;}
.ticker span{
  display:flex; align-items:center; gap:28px; padding:14px 0 14px 28px; white-space:nowrap;
  font-family:var(--head); font-weight:600; font-size:0.9rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--silver);
}
.ticker span::after{content:""; width:6px; height:6px; background:var(--teal); transform:rotate(45deg); box-shadow:0 0 8px var(--cyan);}
@keyframes ticker{to{transform:translateX(-50%);}}

/* ---------- Stats ---------- */
.stat{position:relative; transition:background .25s ease;}
.stat::before{
  content:""; position:absolute; left:50%; top:0; width:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  transform:translateX(-50%); transition:width .35s ease;
}
.stat:hover{background:rgba(var(--teal-rgb),0.05);}
.stat:hover::before{width:70%;}
.stat-num{
  background:linear-gradient(180deg, var(--cyan), var(--teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(var(--teal-rgb),0.3));
}

/* ---------- Section heads ---------- */
.section-head .kicker::before{transition:width .7s .2s ease;}
html:not(.no-js) .section-head.reveal:not(.in) .kicker::before{width:0;}
.section-alt{position:relative;}
.section-alt::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--teal), transparent); opacity:.7;
}

/* ---------- Card spotlight (tiers, caps, track features) ---------- */
.tier, .cap, .track-feature{isolation:isolate;}
.tier::before, .cap::before, .track-feature::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--teal-rgb),0.14), transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
.tier:hover::before, .cap:hover::before, .track-feature:hover::before{opacity:1;}
.track-feature{position:relative; transition:transform .2s ease, border-color .2s ease;}
.track-feature:hover{transform:translateX(4px); border-color:#33393f; border-left-color:var(--cyan);}
.cap{transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
.cap:hover{transform:translateY(-4px); border-color:#33393f; box-shadow:0 16px 40px rgba(0,0,0,0.4);}
.cap:hover .cap-idx{-webkit-text-stroke-color:var(--cyan); filter:drop-shadow(0 0 10px rgba(var(--cyan-rgb),0.5));}
.cap-idx{transition:filter .25s ease;}
.tier:hover{box-shadow:0 18px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--teal-rgb),0.25);}

/* featured: rotating light around the border */
.tier.featured::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--angle), transparent 0deg, var(--cyan) 40deg, #fff 60deg, var(--cyan) 80deg, transparent 140deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin-border 5s linear infinite;
}
@keyframes spin-border{to{--angle:360deg;}}
.tier.featured:hover{box-shadow:0 0 0 1px var(--teal), 0 24px 60px rgba(var(--teal-rgb),0.28);}
.tier-badge{
  z-index:2; background:linear-gradient(90deg, var(--teal), var(--cyan));
  box-shadow:0 0 18px rgba(var(--cyan-rgb),0.5);
}
.gains{text-shadow:0 0 14px rgba(var(--cyan-rgb),0.35);}

/* ---------- Gallery placeholders ---------- */
.g{position:relative; overflow:hidden; transition:border-color .2s ease, transform .2s ease;}
.g:hover{border-color:var(--teal); transform:translateY(-3px);}
.g::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 35%, rgba(var(--cyan-rgb),0.08) 50%, transparent 65%);
  background-size:250% 100%; animation:g-shimmer 3.5s ease-in-out infinite;
}
.g:has(img)::after{display:none;}
@keyframes g-shimmer{from{background-position:120% 0;} to{background-position:-120% 0;}}

/* ---------- Booking CTA ---------- */
.cta-band::before{
  content:""; position:absolute; left:50%; top:46px; width:240px; height:240px; margin-left:-120px; pointer-events:none;
  border-radius:50%;
  background:conic-gradient(from var(--angle), transparent, rgba(var(--teal-rgb),0.45), transparent 40%, rgba(var(--cyan-rgb),0.3), transparent 75%);
  filter:blur(36px); animation:spin-border 10s linear infinite;
}
.cta-band .wrap{position:relative;}
.cta-mono{animation:float 5s ease-in-out infinite; filter:drop-shadow(0 0 20px rgba(var(--teal-rgb),0.45));}
@keyframes float{50%{transform:translateY(-8px);}}
.cta-band .btn-teal{animation:cta-pulse 2.6s ease-in-out infinite;}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--cyan-rgb),0.45);}
  60%{box-shadow:0 0 0 14px rgba(var(--cyan-rgb),0);}
}

/* ---------- Footer ---------- */
.site-footer{position:relative;}
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--teal), transparent);
}
.socials a:hover{box-shadow:0 0 16px rgba(var(--teal-rgb),0.4);}

/* ---------- Why Snizz: experience + simplicity ---------- */
.why{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 45% 60% at 0% 30%, rgba(var(--teal-rgb),0.12), transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 90%, rgba(var(--cyan-rgb),0.07), transparent 70%),
    var(--black);
}
.why .section-head{max-width:760px;}
.why .section-head .accent{
  display:block; margin-top:6px;
  background:linear-gradient(90deg, var(--teal), var(--cyan), #ffffff, var(--cyan), var(--teal));
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:accent-shine 6s ease-in-out infinite;
}
.why-grid{
  display:grid; gap:22px;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:"exp simple simple" "exp a b";
}
.why-exp{grid-area:exp;}
.why-simple{grid-area:simple;}
.why-card{display:flex; flex-direction:column; padding:32px 28px;}
.why-card p{max-width:520px;}
.why-icon{
  width:50px; height:50px; border-radius:12px; display:grid; place-items:center;
  color:var(--cyan); background:rgba(var(--teal-rgb),0.1); border:1px solid rgba(var(--cyan-rgb),0.35);
  box-shadow:0 0 22px rgba(var(--teal-rgb),0.18);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.why-icon svg{width:24px; height:24px;}
.why-card:hover .why-icon{transform:rotate(-8deg) scale(1.08); background:rgba(var(--teal-rgb),0.2); box-shadow:0 0 30px rgba(var(--cyan-rgb),0.45);}
.why-tag{margin-top:22px; font-family:var(--head); font-weight:600; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal);}
.why-card h3{margin-top:6px; font-size:1.6rem;}

/* Experience card: hero of the grid */
.why-exp{
  justify-content:flex-end; min-height:420px;
  border-color:rgba(var(--teal-rgb),0.45);
  background:linear-gradient(160deg, rgba(var(--teal-rgb),0.16), var(--panel) 55%);
}
.why-exp h3{font-size:clamp(2rem, 3.4vw, 2.7rem);}
.why-exp p{font-size:1rem;}
.why-exp::after{
  width:auto; height:auto; inset:-1px; border-radius:inherit; padding:2px; top:-1px; left:-1px;
  background:conic-gradient(from var(--angle), transparent 0deg, var(--cyan) 40deg, #fff 60deg, var(--cyan) 80deg, transparent 140deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin-border 6s linear infinite; pointer-events:none;
}
.why-exp:hover::after{width:auto;}
.why-exp .why-icon{position:absolute; top:28px; left:28px;}
.why-mark{
  position:absolute; top:6px; right:-8px; z-index:-1; pointer-events:none;
  font-family:var(--head); font-weight:700; font-size:clamp(6rem, 12vw, 9.5rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(var(--cyan-rgb),0.28);
  animation:float 7s ease-in-out infinite;
}
.why-chips{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.why-chips li{
  padding:4px 12px; border:1px solid rgba(var(--cyan-rgb),0.45); border-radius:999px;
  font-family:var(--head); font-weight:600; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cyan); background:rgba(var(--teal-rgb),0.1);
}

/* How it works */
.why-steps{
  list-style:none; position:relative; margin-top:44px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.why-steps::before{ /* connecting line, draws in on reveal */
  content:""; position:absolute; top:27px; left:28px; right:28px; height:2px;
  background:linear-gradient(90deg, var(--teal), var(--cyan), var(--teal));
  box-shadow:0 0 12px rgba(var(--cyan-rgb),0.5);
  transform-origin:left; transition:transform 1.2s .3s cubic-bezier(.2,.7,.3,1);
}
html:not(.no-js) .why-steps:not(.in)::before{transform:scaleX(0);}
.why-steps li{position:relative; display:flex; flex-direction:column; gap:14px;}
.why-step-num{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--head); font-weight:700; font-size:1.2rem; color:var(--black);
  background:linear-gradient(135deg, var(--teal), var(--cyan));
  box-shadow:0 0 0 6px var(--black), 0 0 24px rgba(var(--cyan-rgb),0.5);
  position:relative; z-index:1; transition:transform .25s ease;
}
.why-steps li:hover .why-step-num{transform:scale(1.1);}
.why-steps strong{display:block; font-family:var(--head); font-size:1.3rem; text-transform:uppercase; letter-spacing:0.03em;}
.why-steps li span:not(.why-step-num){display:block; margin-top:4px; color:var(--silver); font-size:0.93rem;}

@media (max-width: 960px){
  .why-grid{grid-template-columns:1fr 1fr; grid-template-areas:"exp exp" "simple simple" "a b";}
  .why-exp{min-height:360px;}
}
@media (max-width: 640px){
  .why-grid{grid-template-columns:1fr; grid-template-areas:"exp" "simple" "a" "b";}
  .why-steps{grid-template-columns:1fr; gap:26px;}
  .why-steps::before{top:28px; bottom:28px; left:27px; right:auto; width:2px; height:auto; transform-origin:top;}
  .why-steps li{flex-direction:row; align-items:flex-start;}
}
.why-a{grid-area:a;} .why-b{grid-area:b;}
@media (max-width: 640px){ html:not(.no-js) .why-steps:not(.in)::before{transform:scaleY(0);} }

/* ======================================================================
   Sales layer: promo bar, trust badges, stage finder, comparison table,
   FAQ, sticky mobile CTA
   ====================================================================== */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
html{scroll-padding-top:84px;}

/* promo bar (collapses once you scroll) */
.promo-bar{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  max-height:60px; overflow:hidden; padding:8px 16px;
  background:linear-gradient(90deg, #00718a, var(--teal), #00718a); background-size:200% 100%;
  animation:accent-shine 8s ease-in-out infinite;
  color:#fff; text-decoration:none; text-align:center;
  font-family:var(--head); font-weight:600; font-size:0.9rem; letter-spacing:0.06em; text-transform:uppercase;
  transition:max-height .3s ease, padding .3s ease;
}
.promo-bar strong{color:#fff;}
.promo-bar s{opacity:.7;}
.promo-bar:hover{filter:brightness(1.1);}
.promo-pill{padding:1px 8px; border-radius:4px; background:var(--black); color:var(--cyan); font-size:0.75rem; letter-spacing:0.14em;}
.site-nav.scrolled .promo-bar{max-height:0; padding-top:0; padding-bottom:0;}
.hero{padding-top:190px;}
@media (max-width: 820px){ .nav-links{top:100%;} }
@media (max-width: 480px){ .hero{padding-top:160px;} .promo-bar{font-size:0.78rem; gap:6px;} }

/* trust badges */
.trust-row{list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px;}
.trust-row li{display:flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--silver);}
.trust-row li::before{
  content:""; width:16px; height:16px; flex-shrink:0; border-radius:50%;
  background:rgba(var(--teal-rgb),0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.5 2.4L12 5.4' fill='none' stroke='%234DE3F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow:0 0 0 1px rgba(var(--cyan-rgb),0.4);
}
.hero .trust-row{animation:hero-in .8s .5s cubic-bezier(.2,.7,.3,1) both;}
.trust-center{justify-content:center; margin-top:26px;}

/* stage finder */
.finder{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin:-20px 0 34px;
  padding:18px 22px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(90deg, rgba(var(--teal-rgb),0.10), var(--panel) 60%);
}
.finder-q{color:var(--silver);}
.finder-q strong{color:var(--white); font-family:var(--head); font-size:1.15rem; text-transform:uppercase; letter-spacing:0.04em; margin-right:6px;}
.finder-opts{display:flex; flex-wrap:wrap; gap:8px;}
.finder-opts button{
  font-family:var(--head); font-weight:600; font-size:0.9rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; cursor:pointer;
  color:var(--white); background:var(--black); border:1px solid #3a3f44;
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.finder-opts button:hover{border-color:var(--teal); color:var(--cyan);}
.finder-opts button[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:var(--black); box-shadow:0 0 18px rgba(var(--teal-rgb),0.45);}
.finder-result{width:100%; color:var(--cyan); font-family:var(--head); font-weight:600; letter-spacing:0.05em; text-transform:uppercase; font-size:0.95rem;}
.finder-result:empty{display:none;}
.tier.match{border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan), 0 0 44px rgba(var(--cyan-rgb),0.35); transform:translateY(-6px);}

/* bundle hint on stage cards */
.tier-bundle{margin-top:16px; padding:9px 12px; border:1px dashed rgba(var(--cyan-rgb),0.45); border-radius:6px; font-size:0.85rem; color:var(--silver); background:rgba(var(--teal-rgb),0.06);}
.tier-bundle strong{color:var(--cyan);}
.tier-bundle s{color:var(--gray);}
.tier .tier-bundle + .tier-error{margin-top:10px;}
.tier .tier-bundle + .tier-error[hidden] + .btn{margin-top:14px;}

.pay-note{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:26px; text-align:center; font-size:0.88rem; color:var(--gray);}
.pay-note svg{color:var(--teal); display:inline-block;}

/* comparison table */
.compare{margin-top:64px;}
.compare-title{font-size:1.8rem; margin-bottom:20px;}
.compare-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel);}
.compare table{width:100%; min-width:640px; border-collapse:collapse; font-size:0.93rem;}
.compare th, .compare td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line);}
.compare tbody tr:last-child > *{border-bottom:none;}
.compare thead th{font-family:var(--head); font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--teal);}
.compare thead th span{display:block; color:var(--white); font-size:1.3rem;}
.compare tbody th{font-weight:500; color:var(--silver);}
.compare tbody tr{transition:background .15s;}
.compare tbody tr:hover{background:rgba(var(--teal-rgb),0.05);}
.compare .hl{background:rgba(var(--teal-rgb),0.08);}
.compare thead .hl{box-shadow:inset 0 3px 0 var(--teal);}
.compare i{font-style:normal;}
.compare .yes{color:var(--cyan);}
.compare .yes::before{content:"\2713\00a0";}
.compare .no{color:#555;}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.3fr); gap:48px; align-items:start;}
.faq-grid .section-head{position:sticky; top:110px; margin-bottom:0;}
.faq-grid .section-head .btn{margin-top:26px;}
.faq-list{display:flex; flex-direction:column; gap:12px;}
.faq-list details{background:var(--panel); border:1px solid var(--line); border-radius:10px; transition:border-color .2s;}
.faq-list details[open]{border-color:rgba(var(--teal-rgb),0.5); box-shadow:0 0 24px rgba(var(--teal-rgb),0.08);}
.faq-list summary{
  list-style:none; cursor:pointer; position:relative; padding:18px 54px 18px 22px;
  font-family:var(--head); font-weight:700; font-size:1.15rem; text-transform:uppercase; letter-spacing:0.03em;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:1.2rem; color:var(--cyan); border:1px solid rgba(var(--cyan-rgb),0.4); transition:transform .2s;
}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-list summary:hover{color:var(--cyan);}
.faq-list details p{padding:0 22px 20px; color:var(--silver); font-size:0.95rem;}
@media (max-width: 960px){
  .faq-grid{grid-template-columns:1fr; gap:30px;}
  .faq-grid .section-head{position:static;}
}

/* sticky mobile CTA */
.sticky-cta{display:none;}
@media (max-width: 820px){
  .sticky-cta{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:fixed; left:12px; right:12px; bottom:12px; z-index:40;
    padding:10px 10px 10px 16px; border-radius:12px;
    background:rgba(17,19,21,0.95); border:1px solid rgba(var(--teal-rgb),0.5);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 12px 36px rgba(0,0,0,0.6), 0 0 24px rgba(var(--teal-rgb),0.2);
    transform:translateY(140%); transition:transform .3s ease;
  }
  .sticky-cta.show{transform:none;}
  .sticky-cta strong{display:block; font-family:var(--head); font-size:1.05rem; text-transform:uppercase; letter-spacing:0.03em;}
  .sticky-cta span{display:block; font-size:0.78rem; color:var(--gray);}
  .sticky-cta .btn{padding:11px 16px; font-size:0.85rem; white-space:nowrap;}
}
