:root {
  --bg: #060b09;
  --bg-soft: #0b1612;
  --panel: #0e1a15;
  --panel-2: #122019;
  --line: rgba(255, 255, 255, 0.08);
  --text: #eaf3ee;
  --muted: #9fb3a8;
  --green: #19e08a;
  --green-2: #07c977;
  --green-deep: #04895a;
  --lime: #b6ff5b;
  --gold: #ffce4d;
  --danger: #ff5d6c;
  --radius: 20px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --glow: 0 0 60px -12px rgba(25, 224, 138, 0.55);
  --ff: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(25, 224, 138, 0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(182, 255, 91, 0.08), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; }

.wrap { width: min(1180px, 92vw); margin: 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green);
  background: rgba(25, 224, 138, 0.1);
  border: 1px solid rgba(25, 224, 138, 0.28);
  padding: 7px 14px; border-radius: 999px;
}

.grad-text {
  background: linear-gradient(100deg, var(--lime), var(--green) 45%, #7df0ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.announce {
  position: relative; z-index: 60;
  background: linear-gradient(90deg, var(--green-deep), var(--green-2));
  color: #022017; text-align: center;
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em;
  padding: 9px 16px;
}
.announce b { font-weight: 800; }

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(6, 11, 9, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -0.01em; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  box-shadow: var(--glow); color: #04201640; font-weight: 900;
}
.brand .mark svg { width: 19px; height: 19px; }
.brand small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 14.5px; font-weight: 600; transition: color .2s; }
.nav-links a:hover { color: var(--text); }

.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: var(--text); padding: 9px 15px; border-radius: 12px; font-weight: 700; font-size: 14px;
  transition: border-color .2s, background .2s;
}
.cart-btn:hover { border-color: rgba(25, 224, 138, 0.5); background: rgba(25, 224, 138, 0.08); }
.cart-btn svg { width: 18px; height: 18px; }
.cart-count {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--green); color: #04201a; border-radius: 999px; font-size: 11.5px; font-weight: 900;
  display: grid; place-items: center; box-shadow: var(--glow);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 800; font-size: 16px; letter-spacing: 0.01em;
  padding: 16px 26px; border-radius: 14px; transition: transform .15s ease, box-shadow .25s, filter .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn-primary {
  background: linear-gradient(100deg, var(--lime), var(--green) 55%, var(--green-2));
  color: #042017; box-shadow: 0 18px 40px -14px rgba(25, 224, 138, 0.7);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 22px 55px -12px rgba(25, 224, 138, 0.8); }
.btn-ghost { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: rgba(25, 224, 138, 0.45); }
.btn-block { width: 100%; }
.btn-lg { padding: 19px 30px; font-size: 17.5px; }
.btn .sub { font-weight: 600; opacity: 0.75; font-size: 12.5px; }

.hero { position: relative; padding: 70px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; }
.hero h1 {
  font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.025em;
  font-weight: 800; margin: 20px 0 18px;
}
.hero p.lead { font-size: 18.5px; color: var(--muted); max-width: 540px; }
.video-flag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 4px;
  background: rgba(255, 206, 77, 0.1); border: 1px solid rgba(255, 206, 77, 0.3);
  color: var(--gold); padding: 8px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700;
}
.video-flag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255,206,77,.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,206,77,.6)} 70%{box-shadow:0 0 0 12px rgba(255,206,77,0)} 100%{box-shadow:0 0 0 0 rgba(255,206,77,0)} }

.hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--green); }

.stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }

.compare {
  position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: var(--shadow); border: 1px solid var(--line); user-select: none; background: #0a120e;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .after-img { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare .tag {
  position: absolute; bottom: 16px; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.compare .tag.before { left: 16px; background: rgba(0,0,0,.55); color: #fff; }
.compare .tag.after { right: 16px; background: rgba(25,224,138,.85); color: #04201a; }
.compare .handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; transform: translateX(-50%);
  background: linear-gradient(var(--green), #fff); cursor: ew-resize;
}
.compare .knob {
  position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: #fff; cursor: ew-resize;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); color: #042017;
}
.compare .knob svg { width: 22px; height: 22px; }
.compare .days {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(6,11,9,.7); backdrop-filter: blur(6px); border: 1px solid var(--line);
  color: var(--lime); font-weight: 800; font-size: 12.5px; padding: 7px 14px; border-radius: 999px;
}

.hero-shot {
  position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: var(--shadow); border: 1px solid var(--line); background: #0a120e;
}
.hero-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.72)); }
.hero-shot .days {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: rgba(6,11,9,.7); backdrop-filter: blur(6px); border: 1px solid var(--line);
  color: var(--lime); font-weight: 800; font-size: 12.5px; padding: 7px 14px; border-radius: 999px;
}
.hero-shot .tag.after {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(25,224,138,.9); color: #04201a; padding: 6px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
}
.hero-shot .shot-badge {
  position: absolute; left: 16px; bottom: 54px; z-index: 2;
  background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #04201a;
  border-radius: 14px; padding: 10px 16px; box-shadow: var(--glow);
}
.hero-shot .shot-badge b { display: block; font-size: 26px; line-height: 1; font-weight: 900; }
.hero-shot .shot-badge span { font-size: 11.5px; font-weight: 700; opacity: .85; }
.hero-shot .shot-stars {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  color: var(--gold); font-size: 15px; letter-spacing: 1px;
}
.hero-shot .shot-stars em { color: #dcebe1; font-style: normal; font-size: 12px; letter-spacing: 0; margin-left: 6px; }

.statbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.statbar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 28px 0; }
.stat { text-align: center; }
.stat .num { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
.stat .lbl { color: var(--muted); font-size: 13px; margin-top: 2px; }

section.block { padding: 88px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 54px; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; margin: 16px 0 14px; }
.section-head p { color: var(--muted); font-size: 17px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; position: relative; overflow: hidden;
}
.step::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 140px at 0% 0%, rgba(25,224,138,.1), transparent 70%); pointer-events: none; }
.step .ic {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(25,224,138,.12); border: 1px solid rgba(25,224,138,.3); color: var(--green);
}
.step .ic svg { width: 26px; height: 26px; }
.step h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.01em; }
.step p { color: var(--muted); font-size: 14.5px; }
.step .n { position: absolute; top: 22px; right: 24px; font-size: 46px; font-weight: 900; color: rgba(255,255,255,.05); }

.trans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trans {
  border-radius: 18px; overflow: hidden; position: relative; border: 1px solid var(--line);
  background: #0a120e; aspect-ratio: 3/4;
}
.trans img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.trans:hover img { transform: scale(1.06); }
.trans .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.trans .cap .name { font-weight: 800; }
.trans .cap .lost { color: var(--lime); font-size: 13px; font-weight: 700; }
.trans .badge {
  position: absolute; top: 12px; right: 12px; background: rgba(25,224,138,.9); color: #042017;
  font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 8px;
}

.product { background: linear-gradient(180deg, transparent, rgba(25,224,138,.04)); }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.book-stage { display: grid; place-items: center; perspective: 1600px; padding: 20px; }
.book {
  position: relative; width: 280px; height: 380px; transform-style: preserve-3d;
  transform: rotateY(-28deg) rotateX(6deg); transition: transform .6s cubic-bezier(.2,.8,.2,1);
  animation: float 5s ease-in-out infinite;
}
.book:hover { transform: rotateY(-12deg) rotateX(3deg); }
@keyframes float { 0%,100%{ translate: 0 0 } 50%{ translate: 0 -14px } }
.book .cover, .book .back, .book .spine, .book .pages {
  position: absolute; border-radius: 4px 8px 8px 4px;
}
.book .cover {
  inset: 0; transform: translateZ(20px);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.16), transparent 50%),
    linear-gradient(160deg, #0d3a2a, #06231a 55%, #021712);
  border: 1px solid rgba(25,224,138,.25);
  box-shadow: inset -8px 0 18px rgba(0,0,0,.5), var(--shadow);
  padding: 30px 26px; display: flex; flex-direction: column;
}
.book .spine {
  width: 40px; height: 100%; left: -20px; transform: rotateY(-90deg) translateZ(20px);
  background: linear-gradient(#062b20, #021510); border-radius: 4px 0 0 4px;
}
.book .pages {
  width: 40px; height: calc(100% - 16px); top: 8px; right: 20px;
  transform-origin: right center; transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f4f7f2, #f4f7f2 1px, #d9e2da 2px, #f4f7f2 3px);
  backface-visibility: hidden;
}
.book .back {
  inset: 0; transform: translateZ(-20px) rotateY(180deg);
  background: linear-gradient(160deg, #06231a, #021712); border-radius: 8px 4px 4px 8px;
}
.book .cover .ks { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--green); font-weight: 800; }
.book .cover .bt { margin-top: auto; font-size: 27px; line-height: 1.04; font-weight: 800; letter-spacing: -0.02em; }
.book .cover .bt em { font-style: normal; color: var(--lime); }
.book .cover .bsub { margin-top: 10px; color: var(--muted); font-size: 12px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; }
.book .glow { position: absolute; inset: -40px; background: radial-gradient(circle, rgba(25,224,138,.3), transparent 60%); filter: blur(20px); transform: translateZ(-60px); z-index: -1; }

.shelf { width: 320px; height: 30px; background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%); border-radius: 50%; margin-top: 8px; }

.buybox h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; margin: 14px 0 10px; }
.buybox .stars-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--muted); font-size: 14px; }
.buybox ul { list-style: none; margin: 22px 0; display: grid; gap: 12px; }
.buybox li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.buybox li svg { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 2px; }
.price-row { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 6px; }
.price-now { font-size: 46px; font-weight: 900; letter-spacing: -0.03em; }
.price-old { font-size: 22px; color: var(--muted); text-decoration: line-through; }
.price-off { background: var(--danger); color: #fff; font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 8px; }
.installment { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.guarantee-mini { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 13.5px; }
.guarantee-mini svg { width: 22px; height: 22px; color: var(--green); }

.urgency {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(100deg, rgba(255,93,108,.12), rgba(255,206,77,.1));
  border: 1px solid rgba(255,93,108,.3); border-radius: 16px; padding: 16px 22px; margin: 22px 0;
}
.urgency .txt { font-weight: 700; font-size: 14.5px; }
.timer { display: flex; gap: 8px; }
.timer .seg { background: #04140e; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; min-width: 52px; text-align: center; }
.timer .seg b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.timer .seg span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.tcard .top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tcard .av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(25,224,138,.4); }
.tcard .who { font-weight: 800; font-size: 15px; }
.tcard .who small { display: block; color: var(--green); font-weight: 700; font-size: 12.5px; }
.tcard p { color: #cfe0d6; font-size: 14.5px; }
.tcard .stars { font-size: 13px; margin-top: 12px; }

.guarantee {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  background: linear-gradient(120deg, var(--panel-2), var(--bg-soft));
  border: 1px solid rgba(25,224,138,.25); border-radius: 26px; padding: 40px;
}
.seal {
  width: 130px; height: 130px; border-radius: 50%; flex: none; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 30% 25%, rgba(25,224,138,.35), rgba(4,137,90,.15));
  border: 2px dashed rgba(25,224,138,.6); color: var(--green); font-weight: 900;
}
.seal b { font-size: 38px; line-height: 1; }
.seal span { font-size: 11px; letter-spacing: .12em; }
.guarantee h3 { font-size: 26px; letter-spacing: -0.01em; margin-bottom: 8px; }
.guarantee p { color: var(--muted); }

.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.qa { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.qa summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .plus { transition: transform .25s; color: var(--green); font-size: 22px; }
.qa[open] summary .plus { transform: rotate(45deg); }
.qa .a { padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

.final {
  text-align: center; background:
    radial-gradient(600px 300px at 50% 0%, rgba(25,224,138,.18), transparent 60%), var(--bg-soft);
  border-top: 1px solid var(--line);
}
.final h2 { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -0.025em; font-weight: 800; margin-bottom: 16px; }
.final p { color: var(--muted); font-size: 18px; max-width: 560px; margin: 0 auto 30px; }

footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--muted); font-size: 13px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer .disc { max-width: 620px; font-size: 12px; line-height: 1.5; opacity: .8; }

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 90;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); z-index: 100;
  background: linear-gradient(180deg, var(--panel), var(--bg)); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.drawer.show { transform: translateX(0); }
.drawer .dhead { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.drawer .dhead h3 { font-size: 18px; }
.drawer .close { background: rgba(255,255,255,.06); width: 36px; height: 36px; border-radius: 10px; color: var(--text); display: grid; place-items: center; }
.drawer .ditems { flex: 1; overflow-y: auto; padding: 18px 24px; display: grid; gap: 14px; align-content: start; }
.ditem { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ditem .thumb { width: 60px; height: 76px; border-radius: 8px; background: linear-gradient(160deg, #0d3a2a, #021712); border: 1px solid rgba(25,224,138,.3); display: grid; place-items: center; color: var(--lime); font-weight: 900; font-size: 10px; text-align: center; padding: 6px; }
.ditem .nm { font-weight: 700; font-size: 14.5px; }
.ditem .pr { color: var(--green); font-weight: 800; }
.qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-top: 6px; }
.qty button { width: 28px; height: 28px; background: rgba(255,255,255,.05); color: var(--text); font-size: 16px; }
.qty span { width: 32px; text-align: center; font-weight: 700; font-size: 13px; }
.drawer .empty { text-align: center; color: var(--muted); padding: 60px 24px; }
.drawer .dfoot { padding: 20px 24px; border-top: 1px solid var(--line); background: rgba(0,0,0,.2); }
.drawer .sub-row { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 15px; }
.drawer .sub-row b { font-size: 22px; }
.remove { background: none; color: var(--muted); font-size: 12px; text-decoration: underline; margin-top: 4px; }
.remove:hover { color: var(--danger); }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 30px);
  background: var(--panel-2); border: 1px solid rgba(25,224,138,.4); color: var(--text);
  padding: 14px 22px; border-radius: 14px; font-weight: 700; font-size: 14.5px; z-index: 120;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: all .35s; display: flex; gap: 10px; align-items: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 20px; height: 20px; color: var(--green); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.checkout-main { padding: 40px 0 80px; }
.co-back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 26px; }
.co-back:hover { color: var(--text); }
.co-grid { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 40px; align-items: start; }
.co-card { background: linear-gradient(180deg, var(--panel), var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.co-card + .co-card { margin-top: 20px; }
.co-card h3 { font-size: 19px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.co-card .step-n { width: 26px; height: 26px; border-radius: 8px; background: rgba(25,224,138,.15); border: 1px solid rgba(25,224,138,.35); color: var(--green); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.co-card .hint { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; background: #04140e; border: 1px solid var(--line); border-radius: 11px;
  padding: 14px 15px; color: var(--text); font-size: 15px; font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(25,224,138,.15); }
.field input::placeholder { color: #5d7268; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.pay-opt { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color .2s, background .2s; display: flex; align-items: center; gap: 12px; }
.pay-opt.active { border-color: var(--green); background: rgba(25,224,138,.07); }
.pay-opt input { position: absolute; opacity: 0; }
.pay-opt .pic { width: 40px; height: 28px; border-radius: 6px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: var(--green); }
.pay-opt .pic svg { width: 22px; height: 22px; }
.pay-opt b { font-size: 14.5px; }
.pay-opt small { display: block; color: var(--muted); font-size: 12px; }

.summary-card { position: sticky; top: 86px; }
.sum-line { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.sum-line.total { border: none; padding-top: 18px; font-size: 16px; }
.sum-line.total b { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; }
.sum-item { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.sum-item .th { width: 54px; height: 68px; border-radius: 8px; background: linear-gradient(160deg, #0d3a2a, #021712); border: 1px solid rgba(25,224,138,.3); display: grid; place-items: center; color: var(--lime); font-size: 9px; font-weight: 900; text-align: center; padding: 5px; }
.sum-item .nm { font-weight: 700; font-size: 14px; }
.sum-item .mt { color: var(--muted); font-size: 12.5px; }
.co-trust { display: grid; gap: 10px; margin-top: 18px; }
.co-trust div { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.co-trust svg { width: 17px; height: 17px; color: var(--green); flex: none; }

.coupon { display: flex; gap: 8px; margin: 14px 0; }
.coupon input { flex: 1; }
.coupon button { padding: 0 18px; border-radius: 11px; background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text); font-weight: 700; }

.pix-explain { display: grid; gap: 10px; margin: 4px 0 18px; }
.pix-step { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #d3e3da; }
.pix-step b { color: var(--text); }
.pix-step .pic { width: 38px; height: 38px; flex: none; border-radius: 10px; background: rgba(25,224,138,.1); border: 1px solid rgba(25,224,138,.28); color: var(--green); display: grid; place-items: center; }
.pix-step .pic svg { width: 19px; height: 19px; }
.pix-brand { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; background: rgba(25,224,138,.05); border: 1px solid rgba(25,224,138,.2); border-radius: 12px; padding: 12px 14px; }
.pix-brand svg { width: 20px; height: 20px; flex: none; }
.pix-status { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13.5px; margin-top: 6px; }

.pix-box { text-align: center; }
.pix-qr { width: 232px; height: 232px; margin: 12px auto 16px; background: #fff; border-radius: 16px; padding: 14px; display: grid; place-items: center; }
.pix-qr img, .pix-qr canvas { width: 204px !important; height: 204px !important; display: block; }
.pix-code { display: flex; gap: 8px; margin: 14px 0; }
.pix-code input { font-size: 12px; }
.copybtn { padding: 0 16px; border-radius: 11px; background: var(--green); color: #042017; font-weight: 800; }

.success { text-align: center; padding: 40px 20px; }
.success .check { width: 84px; height: 84px; border-radius: 50%; background: rgba(25,224,138,.15); border: 2px solid var(--green); display: grid; place-items: center; margin: 0 auto 20px; color: var(--green); animation: pop .5s ease; }
.success .check svg { width: 44px; height: 44px; }
@keyframes pop { 0%{ transform: scale(0); } 70%{ transform: scale(1.12); } 100%{ transform: scale(1); } }
.success h2 { font-size: 28px; margin-bottom: 10px; }
.success p { color: var(--muted); }

.spinner { width: 20px; height: 20px; border: 2.5px solid rgba(4,32,23,.3); border-top-color: #042017; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 940px) {
  .hero-grid, .product-grid, .co-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .steps, .trans-grid, .tcards { grid-template-columns: 1fr; }
  .statbar .wrap { grid-template-columns: 1fr 1fr; gap: 26px; }
  .guarantee { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .compare { max-width: 420px; margin: 0 auto; }
  .summary-card { position: static; }
  .hero { padding-top: 40px; }
}
@media (max-width: 560px) {
  .row-2, .pay-methods { grid-template-columns: 1fr; }
  .timer .seg { min-width: 46px; }
}