@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap");

:root{
  --bg:#0c0507;
  --surface:#16090d;
  --card-border:rgba(0,0,0,.08);
  --wine:#6b0f1a;
  --wine-dark:#3a050b;
  --wine-light:#9e2438;
  --green:#00a651;
  --green-hover:#008c44;
  --gold:#e8b930;
  --gold-soft:#f5d76e;
  --panini-blue:#003da5;
  --ink:#151522;
  --muted:#6c7280;
  --text:#f2ece6;
  --text-dim:rgba(242,236,230,.55);
  --font:"Inter",system-ui,sans-serif;
  --display:"Bebas Neue",Impact,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --max:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:var(--font);scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{margin:0;line-height:1.55}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer}
main{overflow:hidden}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:none}}
@keyframes slideOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(100%)}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* ── topbar ── */
.topbar{background:var(--wine);color:#fff;text-align:center;padding:9px 16px;font-size:12px;font-weight:700;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:8px}
.topbar__dot{width:7px;height:7px;border-radius:50%;background:#ff4d4d;animation:pulse 1.4s ease infinite;flex-shrink:0}
.topbar strong{font-variant-numeric:tabular-nums}

/* ── header ── */
.header{display:flex;align-items:center;justify-content:center;flex-direction:column;max-width:var(--max);margin:0 auto;position:relative;z-index:5;gap:10px}
.logo img{width:100%;max-width:100px;height:auto}
.nav{display:none;gap:20px}
.nav a{font-size:13px;font-weight:700;color:var(--text-dim);transition:color .2s}
.nav a:hover{color:#fff}

/* ── hero ── */
.hero{background:radial-gradient(ellipse at 70% 30%,rgba(107,15,26,.6),transparent 55%),radial-gradient(ellipse at 20% 70%,rgba(232,185,48,.1),transparent 45%),var(--bg);padding:16px 20px 0;position:relative;overflow:hidden;color:#fff}
.hero::after{display:none}

.hero__inner{display:grid;gap:24px;max-width:var(--max);margin:0 auto;padding:28px 0 100px;position:relative;z-index:1;align-items:center}
.hero__text{text-align:center}

.pill{display:inline-block;padding:6px 14px;border:1px solid rgba(232,185,48,.3);border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.sub{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:0 0 8px}

.hero h1{font-family:var(--display);font-size:clamp(5rem,18vw,11rem);line-height:.82;margin:0 0 18px;text-transform:uppercase;background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.45));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero__desc{color:var(--text-dim);font-size:clamp(.95rem,2vw,1.15rem);max-width:480px;margin:0 auto 24px;line-height:1.6}
.hero__desc strong{color:#fff;font-weight:700}

/* ── CTA verde ── */
.cta{display:inline-flex;align-items:center;gap:8px;padding:15px 32px;border-radius:99px;background:var(--green);color:#fff;font-size:14px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 8px 24px rgba(0,166,81,.3)}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,166,81,.4);background:var(--green-hover)}
.cta svg{transition:transform .2s}.cta:hover svg{transform:translateX(3px)}
.cta--sm{padding:10px 20px;font-size:12px}

.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:400px;margin:28px auto 0}
.hero__stats div{text-align:center;padding:10px 6px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.03)}
.hero__stats strong{display:block;font-size:20px;color:#fff;font-variant-numeric:tabular-nums}
.hero__stats span{font-size:11px;color:var(--text-dim);font-weight:600}

.hero__visual{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;animation:float 7s ease-in-out infinite}
.hero__img{width:min(100%,520px);position:relative;z-index:1;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.hero__badge{position:absolute;top:0;left:4px;width:clamp(64px,16vw,96px);z-index:2;background:rgba(255,255,255,.9);border-radius:18px;padding:7px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.hero__tag{position:absolute;bottom:14px;right:4px;z-index:2;background:rgba(255,255,255,.95);color:var(--ink);border-radius:16px;padding:12px 16px;box-shadow:0 14px 36px rgba(0,0,0,.3);text-align:left}
.hero__tag small{font-size:10px;font-weight:800;text-transform:uppercase;color:#777;display:block}
.hero__tag strong{font-size:28px;font-weight:900;color:var(--wine);display:block;line-height:1}

/* ── trust ── */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:var(--max);margin:0 auto;position:relative;z-index:5;padding-bottom:12px}
.trust span{font-size:11px;font-weight:800;color:#fff;padding:9px 16px;border:none;border-radius:99px;background:var(--wine);white-space:nowrap;box-shadow:0 4px 12px rgba(107,15,26,.35)}

/* ── blocks ── */
.block{padding:72px 20px 0}
.block--white{background:#fff;color:var(--ink)}
.block--white .block__head h2{color:var(--ink)}
.block--white .block__head p{color:var(--muted)}
.block--white .label{color:var(--wine)}

.block--dark{background:radial-gradient(ellipse at 50% 0%,rgba(107,15,26,.2),transparent 60%),var(--surface);padding:72px 20px 64px;color:#fff}
.block--dark .nums{max-width:var(--max);margin:0 auto}
.block--dark .block__head h2{color:#fff}
.block--dark .block__head p{color:var(--text-dim)}

.block__head{text-align:center;margin-bottom:32px;max-width:var(--max);margin-left:auto;margin-right:auto}
.block__head h2{font-size:clamp(1.7rem,4.5vw,2.8rem);letter-spacing:-.02em;line-height:1.05;margin:0 0 10px}
.block__head p{font-size:15px;margin:0;max-width:460px;margin-inline:auto}

.label{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.label--gold{color:var(--gold)}

/* ── kit cards ── */
.kits{display:grid;gap:16px;max-width:var(--max);margin:0 auto;padding-bottom:64px}

.kit{background:#fff;border:1px solid #e8e8e8;border-radius:20px;padding:14px;text-align:center;position:relative;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.kit:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 20px 50px rgba(0,0,0,.1)}
.kit--pop{border-color:var(--green);box-shadow:0 0 0 2px rgba(0,166,81,.15)}
.kit--gold{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,185,48,.15)}

.kit__badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:99px;color:#fff;z-index:2}
.kit__badge--sell{background:#dc2626}
.kit__badge--value{background:var(--green)}
.kit__badge--exclusive{background:linear-gradient(135deg,var(--gold),#c99b1d);color:#1a0a0e}

.kit__thumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:16px;background:#f7f7f5;margin-bottom:12px}
.kit__thumb img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(0,0,0,.12));transition:transform .35s var(--ease)}
.kit:hover .kit__thumb img{transform:scale(1.06)}

.kit h3{font-size:17px;margin:0 0 2px;color:var(--ink)}
.kit__info{font-size:13px;color:var(--green);font-weight:800;margin:0}
.kit__sub{font-size:12px;color:var(--muted);margin:2px 0 0;min-height:34px}

.kit__price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:8px 0 10px}
.kit__price del{color:#bbb;font-size:13px}
.kit__price strong{font-size:26px;font-weight:900;color:var(--green)}

.kit__btn{display:block;width:100%;padding:13px;border-radius:14px;background:var(--green);color:#fff;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;transition:background .2s,transform .2s;cursor:pointer}
.kit__btn:hover{background:var(--green-hover);transform:translateY(-1px)}

.kit__saving{font-size:11px;font-weight:900;color:#fff;background:#dc2626;padding:2px 7px;border-radius:6px}

/* ── perks ── */
.perks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:var(--max);margin:0 auto;padding-bottom:64px}
.perk{background:#f9f9f7;border:1px solid #eee;border-radius:18px;padding:24px 20px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s}
.perk:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.06)}
.perk__icon{font-size:28px;margin-bottom:10px}
.perk strong{display:block;font-size:15px;margin-bottom:6px;color:var(--ink)}
.perk p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}

/* ── nums ── */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.num{text-align:center;padding:24px 16px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.03)}
.num strong{display:block;font-family:var(--display);font-size:clamp(3rem,9vw,4.6rem);line-height:.85;color:var(--gold);font-weight:400}
.num span{display:block;font-size:13px;font-weight:700;margin-top:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}

/* ── reviews ── */
.reviews{display:grid;gap:14px;max-width:var(--max);margin:0 auto;padding-bottom:64px}
.rev{background:#fff;border:1px solid #eee;border-radius:20px;padding:20px;display:grid;gap:10px;transition:transform .3s var(--ease),box-shadow .3s}
.rev:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
.rev__top{display:flex;align-items:center;gap:12px}
.rev__top img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #eee}
.rev__top strong{display:block;font-size:14px;color:var(--ink)}
.rev__top small{color:var(--muted);font-size:12px}
.rev__stars{color:#f3b400;font-size:13px;letter-spacing:2px;margin-top:2px}
.rev h3{font-size:15px;margin:0;color:var(--ink)}
.rev p{font-size:13px;color:var(--muted);margin:0;line-height:1.55}
.rev__tag{font-size:11px;font-weight:800;color:var(--green)}

/* ── faq ── */
.faq{max-width:640px;margin:0 auto;display:grid;gap:8px;padding-bottom:64px}
.faq__item{border:1px solid #eee;border-radius:16px;background:#fff;overflow:hidden;transition:border-color .3s}
.faq__item:hover{border-color:#ccc}
.faq__q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 18px;font-size:14px;font-weight:700;color:var(--ink);gap:12px;text-align:left}
.faq__icon{width:22px;height:22px;border-radius:50%;background:rgba(0,166,81,.1);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:14px;font-weight:900;flex-shrink:0;transition:transform .3s var(--ease),background .25s}
.faq__item.open .faq__icon{transform:rotate(45deg);background:var(--green);color:#fff}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq__item.open .faq__a{max-height:250px}
.faq__a p{margin:0;padding:0 18px 16px;font-size:13px;color:var(--muted);line-height:1.6}

/* ── closer ── */
.closer{text-align:center;padding:80px 20px;max-width:var(--max);margin:0 auto;background:radial-gradient(ellipse at 50% 50%,rgba(107,15,26,.08),transparent 60%),#fff}
.closer h2{font-size:clamp(1.8rem,5vw,2.5rem);margin:0 0 12px;color:var(--ink);font-family:var(--display)}
.closer p{color:var(--muted);margin:0 0 32px;font-size:16px;max-width:400px;margin-inline:auto}
.closer .cta{font-size:16px;padding:18px 40px;box-shadow:0 8px 24px rgba(0,166,81,.25)}

/* ── toast notification ── */
.toast{position:fixed;bottom:80px;left:16px;z-index:200;background:#fff;border:1px solid #eee;border-radius:16px;padding:12px 16px;box-shadow:0 16px 48px rgba(0,0,0,.15);display:flex;align-items:center;gap:12px;max-width:340px;opacity:0;transform:translateX(-20px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translateX(0)}
.toast__avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}
.toast__thumb{width:52px;height:52px;border-radius:12px;object-fit:contain;flex-shrink:0;background:#f7f7f5;padding:4px}
.toast__text{font-size:12px;color:var(--muted);line-height:1.4}
.toast__text strong{color:var(--ink);display:block;font-size:13px}
.toast__text small{color:var(--green);font-weight:700}
.toast__icon{font-size:22px;flex-shrink:0}

/* ── sticky ── */
.sticky{position:fixed;bottom:0;left:0;right:0;z-index:100;transform:translateY(100%);transition:transform .35s var(--ease);background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-top:1px solid #eee;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sticky.visible{transform:none}
.sticky strong{font-size:15px;color:var(--ink)}

/* ── footer ── */
.foot{background:var(--surface);margin-top:0;padding:40px 20px 16px;border-top:1px solid rgba(255,255,255,.06);color:#fff}
.foot__inner{display:grid;gap:28px;max-width:var(--max);margin:0 auto}
.foot__inner img{height:48px;width:auto;margin-bottom:10px}
.foot__inner p{color:var(--text-dim);font-size:13px;margin:0;max-width:280px}
.foot__inner nav{display:grid;gap:6px}
.foot__inner a{font-size:13px;color:var(--text-dim);font-weight:600;transition:color .2s}
.foot__inner a:hover{color:#fff}
.foot__pay{display:flex;flex-wrap:wrap;gap:6px}
.foot__pay span{font-size:11px;font-weight:800;padding:6px 10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--text-dim)}
.foot__copy{text-align:center;font-size:11px;color:rgba(255,255,255,.3);margin:28px auto 0;max-width:var(--max);border-top:1px solid rgba(255,255,255,.06);padding-top:14px}

/* ── desktop ── */
@media(min-width:680px){
  .nav{display:flex}
  .hero__inner{grid-template-columns:.9fr 1.1fr;padding-top:48px}
  .hero__text{text-align:left}
  .hero__desc{margin-left:0}
  .hero__stats{margin-left:0}
  .trust{flex-wrap:nowrap}
  .kits{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:repeat(4,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .perks{grid-template-columns:repeat(4,1fr)}
  .foot__inner{grid-template-columns:1.4fr 1fr 1fr}
  .sticky{display:none}
  .toast{bottom:24px;left:24px}
}
@media(min-width:1080px){
  .kits{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:520px){
  .hero__visual{min-height:280px}
  .hero__stats{grid-template-columns:repeat(3,1fr)}
  .hero__stats div{padding:8px 4px}
  .hero__stats strong{font-size:17px}
}