.page-commerce { min-height:100vh; background:radial-gradient(circle at 50% -12%,rgba(45,125,255,.18),transparent 36%),radial-gradient(circle at 90% 45%,rgba(123,130,255,.08),transparent 25%),#02050b; }
.commerce-main { position:relative; padding:148px 0 90px; }
.commerce-hero { text-align:center; max-width:920px; margin:0 auto; }
.commerce-hero .lead { margin-inline:auto; }
.commerce-back { display:inline-flex; align-items:center; gap:8px; color:var(--muted); text-decoration:none; font-size:.8rem; margin-bottom:26px; }
.commerce-back:hover { color:var(--white); }
.billing-switch { position:relative; width:min(520px,100%); margin:38px auto 0; padding:6px; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line-strong); border-radius:999px; background:rgba(5,13,26,.74); box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 55px rgba(0,0,0,.28); }
.billing-switch::before { content:""; position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 12px)/3); border-radius:999px; background:linear-gradient(135deg,#226cf5,#36acff); box-shadow:0 10px 28px rgba(45,125,255,.28),inset 0 1px rgba(255,255,255,.2); transform:translateX(calc(var(--period-index,0)*100%)); transition:transform .42s var(--ease); }
.billing-switch button { position:relative; z-index:1; min-height:46px; border:0; background:transparent; color:#70849e; font-weight:700; font-size:.78rem; cursor:pointer; transition:color .25s ease; }
.billing-switch button.active { color:#fff; }
.billing-switch small { display:block; margin-top:3px; font-size:.55rem; color:inherit; opacity:.75; }
.plans-page-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:52px; }
.plan-card { position:relative; min-height:610px; padding:28px; display:flex; flex-direction:column; overflow:hidden; }
.plan-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--plan-accent,var(--blue-2)); box-shadow:0 0 22px var(--plan-accent,var(--blue-2)); }
.plan-card.falcon { --plan-accent:#ffad55; }
.plan-card.khameleon { --plan-accent:#3ce1b4; }
.plan-card.suite { --plan-accent:#56c7ff; border-color:rgba(86,199,255,.42); transform:none; box-shadow:0 32px 90px rgba(15,87,196,.18), inset 0 1px rgba(255,255,255,.045); background:radial-gradient(circle at 50% 0,rgba(45,125,255,.13),transparent 34%),linear-gradient(145deg,rgba(10,21,42,.94),rgba(5,12,25,.94)); }
.plan-card-badge { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.plan-card-name { margin-top:28px; color:#fff; font:600 1.8rem/1 "Space Grotesk",sans-serif; letter-spacing:-.035em; }
.plan-card-desc { min-height:70px; margin:12px 0 0; color:var(--muted); line-height:1.65; font-size:.82rem; }
.commerce-price { display:flex; align-items:baseline; gap:7px; margin-top:28px; }
.commerce-price .currency { color:var(--muted); font-size:.86rem; font-weight:700; }
.commerce-price .amount { color:#fff; font:600 clamp(3.4rem,6vw,4.8rem)/.9 "Space Grotesk",sans-serif; letter-spacing:-.065em; }
.commerce-price .period { color:var(--muted); font-size:.78rem; }
.plan-billing-note { min-height:42px; margin-top:10px; color:#61738d; font-size:.68rem; line-height:1.55; }
.plan-benefits { display:grid; gap:0; margin:24px 0 28px; }
.plan-benefit { display:flex; align-items:center; gap:10px; min-height:44px; border-bottom:1px solid rgba(255,255,255,.055); color:#aebed0; font-size:.76rem; }
.plan-benefit::before { content:"✓"; width:20px; height:20px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--plan-accent) 38%,transparent); border-radius:7px; color:var(--plan-accent); background:color-mix(in srgb,var(--plan-accent) 7%,transparent); font-size:.65rem; }
.plan-card .btn { width:100%; margin-top:auto; }
.plan-maintenance { margin-top:14px; padding:10px 12px; border:1px solid rgba(255,173,85,.18); border-radius:12px; background:rgba(255,173,85,.055); color:#d6a36e; font-size:.66rem; line-height:1.55; }
.commerce-trust { margin-top:34px; display:flex; justify-content:center; flex-wrap:wrap; gap:10px 22px; color:#60728b; font-size:.7rem; }
.commerce-trust span { display:flex; gap:7px; align-items:center; }
.commerce-trust i { width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); }

.checkout-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:22px; align-items:start; }
.checkout-card { padding:30px; }
.checkout-section-title { margin:0; color:#fff; font:600 1.25rem/1.2 "Space Grotesk",sans-serif; }
.checkout-section-copy { margin:8px 0 24px; color:var(--muted); font-size:.78rem; line-height:1.55; }
.payment-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:24px 0; padding:5px; border:1px solid var(--line); border-radius:14px; background:rgba(3,9,19,.58); }
.payment-tabs button { min-height:48px; border:1px solid transparent; border-radius:10px; background:transparent; color:#6e829b; font-weight:700; cursor:pointer; }
.payment-tabs button.active { border-color:rgba(86,199,255,.28); background:rgba(45,125,255,.12); color:#e9f8ff; box-shadow:inset 2px 0 var(--blue-2); }
.payment-panel { display:none; }
.payment-panel.active { display:block; animation:paymentIn .35s var(--ease); }
@keyframes paymentIn { from { opacity:0; transform:translateY(6px); } }
.card-row { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; }
.secure-field { position:relative; }
.secure-field .input { padding-right:44px; }
.field-seal { position:absolute; right:14px; bottom:15px; color:#4f718e; font-size:.68rem; }
.pix-box { padding:24px; text-align:center; border:1px solid rgba(60,225,180,.18); border-radius:18px; background:radial-gradient(circle at 50% 0,rgba(60,225,180,.12),transparent 48%),rgba(3,11,18,.7); }
.pix-symbol { width:72px; height:72px; margin:0 auto 18px; display:grid; place-items:center; border:1px solid rgba(60,225,180,.3); border-radius:22px; color:var(--mint); font-size:1.8rem; box-shadow:0 0 34px rgba(60,225,180,.14); }
.pix-box h3 { margin:0; color:#effff9; }
.pix-box p { color:#759386; font-size:.78rem; line-height:1.6; }
.checkout-consent { display:flex; gap:10px; align-items:flex-start; margin:20px 0; color:#708299; font-size:.7rem; line-height:1.5; }
.checkout-consent input { margin-top:2px; accent-color:var(--blue); }
.order-summary { position:sticky; top:110px; padding:30px; }
.order-product { display:flex; gap:14px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line); }
.order-icon { width:54px; height:54px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:17px; background:linear-gradient(145deg,rgba(45,125,255,.18),rgba(86,199,255,.05)); }
.order-icon img { width:46px; height:46px; border-radius:13px; object-fit:cover; }
.order-product strong { display:block; color:#fff; }
.order-product span { display:block; margin-top:5px; color:var(--muted-2); font-size:.68rem; }
.order-lines { display:grid; gap:13px; margin:22px 0; }
.order-line { display:flex; justify-content:space-between; gap:18px; color:#71849c; font-size:.76rem; }
.order-line strong { color:#cedbea; }
.order-total { padding-top:20px; border-top:1px solid var(--line); }
.order-total-label { display:flex; justify-content:space-between; align-items:center; color:#8495a9; font-size:.75rem; }
.summary-price { display:flex; align-items:baseline; gap:7px; margin-top:12px; }
.summary-price .currency { color:var(--muted); font-size:.82rem; font-weight:700; }
.summary-price .amount { color:#fff; font:600 3.9rem/.9 "Space Grotesk",sans-serif; letter-spacing:-.06em; }
.summary-price .period { color:var(--muted); font-size:.75rem; }
.order-security { display:grid; gap:10px; margin-top:24px; }
.order-security div { display:flex; gap:9px; align-items:center; color:#667b92; font-size:.68rem; }
.order-security svg { width:16px; color:var(--mint); }
.checkout-success { display:none; padding:24px; margin-top:18px; border:1px solid rgba(60,225,180,.22); border-radius:18px; background:rgba(60,225,180,.06); }
.checkout-success.show { display:block; animation:paymentIn .4s var(--ease); }

@media (max-width:980px) { .plans-page-grid{grid-template-columns:1fr;max-width:680px;margin-inline:auto;margin-top:44px}.plan-card.suite{transform:none}.checkout-grid{grid-template-columns:1fr}.order-summary{position:relative;top:auto;order:-1}.commerce-main{padding-top:125px} }
@media (max-width:620px) { .commerce-main{padding-top:112px}.billing-switch{border-radius:20px}.billing-switch::before{border-radius:15px}.billing-switch button{font-size:.68rem}.plan-card,.checkout-card,.order-summary{padding:22px}.card-row{grid-template-columns:1fr}.commerce-price .amount{font-size:3.5rem}.summary-price .amount{font-size:3.4rem} }