:root{
  --lime:#C8FF4D;
  --lime-2:#E9FFB5;
  --pink:#FF1A6A;
  --ink:#062420;
  --ink-2:#0B2F2A;
  --teal:#00B6B0;
  --bg:#F6F7F4;
  --card:#FFFFFF;
  --muted:#5C6B67;
  --border:#D9E2DE;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.35;
}

a{color:inherit}
.wrap{max-width:1160px; margin:0 auto; padding:0 20px}
.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#fff; border-radius:10px; z-index:9999}

.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

.site-header{
  background:var(--lime);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{
  display:flex; align-items:center; gap:14px;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800}
.brand-mark{
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  text-transform:uppercase;
}
.brand-name{letter-spacing:-.02em}

.nav{flex:1}
.nav-toggle{display:none; background:transparent; border:0; padding:10px; border-radius:12px}
.hamburger{width:22px; height:2px; background:var(--ink); display:block; position:relative}
.hamburger:before,.hamburger:after{content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink)}
.hamburger:before{top:-7px}
.hamburger:after{top:7px}

.nav-menu{display:flex; justify-content:center}
.nav-items{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav-link,.dd-btn{
  background:rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.08);
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.nav-link:hover,.dd-btn:hover{background:rgba(255,255,255,.6)}
.dd{position:relative}
.dd-btn{cursor:pointer}
.chev{
  width:10px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg); margin-top:-2px;
}
.dd-panel{
  position:absolute; top:48px; left:0;
  min-width:240px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:10px;
  display:none;
}
.dd.open .dd-panel{display:block}
.dd-top{
  display:block; padding:10px 12px; border-radius:14px;
  background:var(--lime-2);
  text-decoration:none; font-weight:800;
  margin-bottom:6px;
}
.dd-item{
  display:block; padding:10px 12px; border-radius:14px;
  text-decoration:none; color:var(--ink-2);
}
.dd-item:hover{background:rgba(0,0,0,.04)}

.header-actions{display:flex; align-items:center; gap:10px}
.help-link{
  text-decoration:none; font-weight:700;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.35);
}
.help-link:hover{background:rgba(255,255,255,.6)}

.btn{
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  cursor:pointer;
  transition:transform .05s ease;
}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 12px; border-radius:14px; font-size:14px}
.btn-dark{
  background:linear-gradient(180deg, #07332D, #041F1A);
  color:#E9FFB5;
}
.btn-ghost{background:transparent}
.btn-teal{background:var(--teal); color:var(--ink)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.55)}
.badge-teal{background:rgba(0,182,176,.12); border-color:rgba(0,182,176,.35)}
.badge-lime{background:rgba(200,255,77,.35)}

main{padding:28px 0 90px}
.hero{
  background:var(--lime);
  border-bottom-left-radius:34px;
  border-bottom-right-radius:34px;
  padding:34px 0 18px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:26px;
  align-items:center;
}
.kicker{display:inline-flex; align-items:center; gap:10px}
.kicker .dot{width:10px; height:10px; border-radius:50%; background:var(--pink)}
.h1{
  font-size:56px; line-height:0.95; letter-spacing:-.04em;
  margin:14px 0 10px;
  color:var(--pink);
  font-weight:900;
}
.lead{font-size:16px; max-width:60ch}
.hero-card{
  background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.10);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:18px;
}
.tabs{display:flex; gap:8px; padding:6px; border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.6); border-radius:18px; width:max-content}
.tab{border:0; background:transparent; font-weight:800; padding:10px 14px; border-radius:14px; cursor:pointer}
.tab.on{background:#fff; border:1px solid rgba(0,0,0,.08)}
.form-row{margin-top:14px}
.input{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.14);
  font-size:14px;
  outline:none;
}
.input:focus{box-shadow:0 0 0 4px rgba(0,182,176,.18); border-color:rgba(0,182,176,.5)}
.hero-illus{
  aspect-ratio: 4/3;
  border-radius:28px;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,26,106,.18), transparent 60%),
    radial-gradient(circle at 65% 55%, rgba(0,182,176,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.10));
  border:1px solid rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
}
.speech{
  position:absolute; right:18px; top:18px;
  background:#0b2320;
  color:var(--lime);
  padding:10px 12px;
  border-radius:18px;
  font-weight:900;
  transform:rotate(-3deg);
}
.speech span{color:var(--pink)}
.megaphone{
  position:absolute; right:22px; bottom:18px;
  width:150px; height:150px;
  border-radius:30px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.10);
  display:grid; place-items:center;
}
.megaphone svg{width:82px; height:82px}

.section{padding:44px 0}
.h2{font-size:40px; letter-spacing:-.03em; margin:0 0 10px}
.p{color:var(--muted); max-width:70ch}
.row{display:flex; align-items:center; justify-content:space-between; gap:14px}
.slider{
  position:relative;
  margin-top:18px;
}
.slider-controls{
  display:flex; gap:10px; align-items:center;
}
.icon-btn{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  display:grid; place-items:center;
  cursor:pointer;
}
.icon-btn svg{width:18px; height:18px}
.dots{display:flex; gap:6px}
.dot{width:10px; height:10px; border-radius:50%; background:#cfd8d4}
.dot.on{background:var(--pink)}
.cards{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px, 1fr);
  gap:18px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
}

.cards.grid{
  grid-auto-flow:unset;
  grid-auto-columns:unset;
  overflow:visible;
  scroll-snap-type:none;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:18px;
  scroll-snap-align:start;
}
.card-top{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
.icon{
  width:44px; height:44px; border-radius:16px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.10);
  display:grid; place-items:center;
}
.icon svg{width:22px; height:22px}
.card h3{margin:6px 0 2px; font-size:18px}
.small{font-size:13px; color:var(--muted)}
.ul{margin:12px 0 14px; padding-left:18px; color:var(--ink-2)}
.ul li{margin:6px 0}
.pills{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.price{
  display:flex; align-items:flex-end; gap:8px; margin:12px 0 8px;
}
.price .now{font-size:28px; font-weight:900}
.price .was{color:var(--muted); text-decoration:line-through; font-weight:800}
.price .per{color:var(--muted); font-weight:700}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.panel{
  border-radius:26px;
  border:1px solid rgba(0,0,0,.10);
  overflow:hidden;
  background:#fff;
  min-height:320px;
}
.panel.lime{background:var(--lime)}
.panel .pad{padding:22px}
.panel .tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px;
  background:var(--pink);
  color:#fff;
  border-radius:999px;
  font-weight:900;
  position:absolute;
  right:16px; top:16px;
}
.panel-img{
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.32));
  min-height:320px;
  position:relative;
}
.panel-img .caption{
  position:absolute; left:18px; bottom:18px; right:18px;
  color:#fff;
}
.panel-img .caption h3{margin:0 0 6px; font-size:22px}
.panel-img .caption p{margin:0; color:rgba(255,255,255,.85); font-size:13px}

.notice{
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.65);
  border-radius:18px;
  padding:14px 16px;
  color:var(--muted);
  margin-top:18px;
}

.kv{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:18px;
}
.kv .mini{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:20px;
  padding:16px;
}
.mini h4{margin:0 0 6px}
.mini p{margin:0; color:var(--muted); font-size:14px}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:#fff;
}
.table th,.table td{padding:12px 12px; border-bottom:1px solid rgba(0,0,0,.08); font-size:14px}
.table th{background:rgba(0,0,0,.03); text-align:left}
.table tr:last-child td{border-bottom:0}

.accordion{
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.acc-item + .acc-item{border-top:1px solid rgba(0,0,0,.08)}
.acc-btn{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:14px 16px;
  font-weight:900;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.acc-panel{display:none; padding:0 16px 14px; color:var(--muted); font-size:14px}
.acc-item.open .acc-panel{display:block}
.plus{
  width:18px; height:18px; position:relative;
}
.plus:before,.plus:after{content:""; position:absolute; background:var(--ink); border-radius:2px}
.plus:before{width:18px; height:2px; left:0; top:8px}
.plus:after{width:2px; height:18px; left:8px; top:0}
.acc-item.open .plus:after{display:none}

.site-footer{padding:46px 0 22px; background:#EEF0ED; border-top:1px solid rgba(0,0,0,.06)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:18px}
.footer-h{margin:0 0 10px; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin:8px 0}
.footer-links a{text-decoration:none; color:var(--ink-2)}
.footer-links a:hover{text-decoration:underline}
.footer-bottom{padding-top:18px; border-top:1px solid rgba(0,0,0,.06); margin-top:24px}
.tiny{font-size:12px}

.muted{color:var(--muted)}
.brand--footer{margin-bottom:10px}

.sticky-check{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:14px;
  background:rgba(200,255,77,.92);
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:10px;
  display:flex; align-items:center; gap:10px;
  max-width:880px;
  width:calc(100% - 24px);
  z-index:80;
}
.sticky-close{
  width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.65);
  cursor:pointer;
  font-size:18px;
}
.pill{
  display:flex; gap:6px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  padding:6px;
}
.seg{
  border:0; background:transparent; cursor:pointer;
  padding:8px 12px; border-radius:999px;
  font-weight:900; font-size:13px;
  color:var(--ink-2);
}
.seg.on{background:#fff; border:1px solid rgba(0,0,0,.10); color:var(--ink)}
.sticky-input{
  flex:1;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  outline:none;
}
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr; }
  .hero-illus{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:inline-flex}
  .nav-menu{display:none; position:absolute; left:0; right:0; top:64px; background:var(--lime); border-bottom:1px solid rgba(0,0,0,.06)}
  .nav-menu.open{display:block}
  .nav-items{padding:10px 0; justify-content:flex-start}
  .dd-panel{position:static; box-shadow:none; border:0; background:transparent; padding:0; display:none}
  .dd.open .dd-panel{display:block}
  .dd-top{margin:8px 0}
  .footer-grid{grid-template-columns:1fr}
  .h1{font-size:44px}
  .h2{font-size:32px}
  .sticky-check{flex-wrap:wrap}
  .sticky-input{min-width:180px}
}