/* ===== ThreadsPVA — Design tokens (LIGHT theme) =====
   Clean white canvas with an Instagram-gradient accent
   (#F58529 → #DD2A7B → #8134AF → #515BD4) plus Threads monochrome contrast.
   Floating pill navbar (glass-on-white), comparison-style pricing TABLES
   (collapsing to stacked cards on mobile) as the signature component.
   Type: 'Manrope' throughout.
*/
:root{
  --bg:#FFFFFF; --bg-2:#F7F6FC; --panel:#FFFFFF;
  --ig1:#F58529; --ig2:#DD2A7B; --ig3:#8134AF; --ig4:#515BD4;
  --igrad:linear-gradient(115deg, var(--ig1) 0%, var(--ig2) 40%, var(--ig3) 70%, var(--ig4) 100%);
  --ink:#18151F; --mute:#6C6680; --line:#E9E7F2;
  --card:#FFFFFF;
  --radius:20px;
  --shadow:0 16px 40px rgba(24,21,31,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; width:100%;
}
h1,h2,h3,h4{font-family:'Manrope',sans-serif; font-weight:800; line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1180px; margin:0 auto; padding:0 20px}
.mono{font-family:'IBM Plex Mono',monospace}
.grad-text{background:var(--igrad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- background confetti ---------- */
.icon-field{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.icon-field span{position:absolute; opacity:.08}
.icon-field span:nth-child(1){top:8%; left:5%; transform:rotate(-10deg)}
.icon-field span:nth-child(2){top:15%; left:85%; transform:rotate(12deg)}
.icon-field span:nth-child(3){top:60%; left:90%; transform:rotate(-6deg)}
.icon-field span:nth-child(4){top:78%; left:8%; transform:rotate(14deg)}
.icon-field span:nth-child(5){top:38%; left:46%; transform:rotate(-4deg)}
.icon-field span:nth-child(6){top:4%; left:44%; transform:rotate(8deg)}
section{position:relative}
section > .container{position:relative; z-index:1}

/* ---------- floating pill navbar ---------- */
.nav-wrap{position:sticky; top:0; z-index:50; padding:16px 20px 0}
.site-header{
  max-width:1180px; margin:0 auto; background:rgba(255,255,255,.78); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:99px; box-shadow:var(--shadow);
}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; padding:10px 10px 10px 22px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; color:var(--ink)}
.logo .stamp{width:32px;height:32px;border-radius:50%;background:var(--igrad);
  display:flex;align-items:center;justify-content:center;flex-shrink:0; font-size:.85rem; font-weight:800}
nav.main-nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
nav.main-nav a{font-size:.86rem; color:var(--mute); transition:color .15s; padding:8px 12px; border-radius:99px}
nav.main-nav a:hover{color:var(--ink); background:var(--bg-2)}
.header-actions{display:flex; align-items:center; gap:8px}
.cart-pill{display:flex; align-items:center; gap:6px; background:var(--igrad); padding:9px 16px; border-radius:99px; font-size:.85rem; font-weight:700; color:#fff}
.cart-pill .count{background:rgba(0,0,0,.28); border-radius:99px; padding:1px 8px; font-size:.76rem}
.mobile-toggle{display:none; background:var(--bg-2); border:0; color:var(--ink); cursor:pointer; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center}
@media (max-width:900px){
  nav.main-nav{display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; background:var(--panel); flex-direction:column; align-items:stretch; padding:14px; gap:4px; border-radius:20px; border:1px solid var(--line); box-shadow:var(--shadow)}
  nav.main-nav.open{display:flex}
  nav.main-nav a{padding:12px 14px}
  .mobile-toggle{display:flex}
  .cart-pill span:not(.count){display:none}
}

/* ---------- services dropdown ---------- */
.has-dropdown{position:relative}
.dropdown-toggle{display:flex; align-items:center; gap:5px; cursor:pointer}
.has-dropdown.open .dropdown-toggle svg{transform:rotate(180deg)}
.mega-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--panel); border-radius:20px; box-shadow:var(--shadow);
  padding:14px; display:none; grid-template-columns:repeat(2,1fr); gap:2px;
  width:420px; max-width:90vw; z-index:60; border:1px solid var(--line);
}
.has-dropdown.open .mega-menu{display:grid}
.mega-menu a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color:var(--ink) !important; font-size:.85rem; font-weight:600}
.mega-menu a:hover{background:var(--bg-2)}
@media (max-width:900px){
  .mega-menu{position:static; transform:none; width:auto; box-shadow:none; border:0; padding:4px 0 0 10px; grid-template-columns:1fr; background:transparent}
  .mega-menu a{color:var(--mute) !important; padding:8px 0}
}

/* ---------- hero ---------- */
.hero{padding:56px 0 40px; overflow:hidden}
.hero-glow{position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:900px; height:500px; background:var(--igrad); filter:blur(160px); opacity:.14; pointer-events:none; z-index:0}
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--line); padding:7px 16px; border-radius:99px; font-size:.8rem; font-weight:700; margin-bottom:22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%; background:var(--igrad)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem); max-width:760px; color:var(--ink)}
.hero p.lead{font-size:1.12rem; color:var(--mute); max-width:600px; margin-bottom:30px}
.hero-stats{display:flex; gap:32px; margin-top:38px; flex-wrap:wrap}
.hero-stats div strong{display:block; font-size:1.5rem; font-weight:800}
.hero-stats div span{font-size:.8rem; color:var(--mute)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:99px; font-weight:700; font-size:.92rem; border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s}
.btn-primary{background:var(--igrad); color:#fff; box-shadow:0 10px 26px rgba(221,42,123,.35)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(221,42,123,.45)}
.btn-outline{background:#fff; border-color:var(--line); color:var(--ink); box-shadow:0 2px 8px rgba(24,21,31,.06)}
.btn-outline:hover{background:var(--bg-2)}
.btn-dark{background:var(--ink); color:#fff; border-radius:12px; font-weight:800}
.btn-dark:hover{transform:translateY(-1px)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px; font-size:.82rem}

/* ---------- sections ---------- */
section{padding:56px 0}
.section-head{max-width:640px; margin-bottom:36px}
.section-head .kicker{color:var(--ig2); font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:8px}
.section-head h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.section-head p{color:var(--mute)}

/* ---------- platform cards (home) ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.cat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:transform .18s, border-color .18s}
.cat-card:hover{transform:translateY(-4px); border-color:var(--ig2); box-shadow:var(--shadow)}
.cat-card .icon{width:48px;height:48px;border-radius:14px; background:var(--bg-2); display:flex;align-items:center;justify-content:center; margin-bottom:16px}
.cat-card h3{font-size:1.02rem; margin-bottom:6px; color:var(--ink)}
.cat-card p{color:var(--mute); font-size:.85rem; margin:0 0 14px}
.cat-card .go{font-size:.82rem; font-weight:700; color:var(--ig2)}

/* ================= PRICING TABLE (signature component) ================= */
.pricing-table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel)}
.pricing-table{width:100%; border-collapse:collapse; min-width:640px}
.pricing-table th, .pricing-table td{padding:18px 20px; text-align:center; border-bottom:1px solid var(--line)}
.pricing-table th:first-child, .pricing-table td:first-child{text-align:left; position:sticky; left:0; background:var(--panel); z-index:2}
.pricing-table thead th{background:var(--bg-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); font-weight:700}
.pricing-table thead th.tier-head{padding-top:22px; padding-bottom:14px}
.pricing-table .tier-qty{display:block; font-size:1.15rem; font-weight:800; color:var(--ink); text-transform:none; letter-spacing:0; margin-bottom:2px}
.pricing-table .tier-price{display:block; font-size:1.6rem; font-weight:800; background:var(--igrad); -webkit-background-clip:text; background-clip:text; color:transparent}
.pricing-table .feature-row td:first-child{font-weight:600; color:var(--ink); font-size:.88rem}
.pricing-table .feature-row td{color:var(--mute); font-size:1rem}
.pricing-table .check{color:var(--ig2); font-weight:800}
.pricing-table .cta-row td{border-bottom:0; padding-top:22px; padding-bottom:22px}
.pricing-table .cta-row td:first-child{background:transparent}
.pricing-table th.popular, .pricing-table td.popular-col{background:rgba(221,42,123,.06)}
.popular-badge{display:inline-block; background:var(--igrad); color:#fff; font-size:.65rem; font-weight:800; padding:3px 10px; border-radius:99px; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em}
@media (max-width:700px){
  .pricing-table th, .pricing-table td{padding:14px 12px; font-size:.85rem}
  .pricing-table .tier-price{font-size:1.25rem}
}

/* ---------- IP / country picker ---------- */
.country-picker{position:relative}
.country-picker input[type="text"]{margin-bottom:0}
.country-list{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:260px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); z-index:40;
}
.country-list.open{display:block}
.country-option{padding:11px 16px; font-size:.88rem; cursor:pointer; color:var(--ink)}
.country-option:hover{background:var(--bg-2)}

/* ---------- article / FAQ ---------- */
.content-block{max-width:820px}
.content-block h2{margin-top:1.5em; font-size:1.4rem}
.content-block h3{margin-top:1.2em; font-size:1.1rem}
.content-block p{color:var(--mute); margin-bottom:1.1em}
.content-block ul{color:var(--mute); padding-left:1.3em}
.content-block li{margin-bottom:.5em}
.faq-item{border:1px solid var(--line); border-radius:16px; padding:0; margin-bottom:10px; background:var(--card)}
.faq-item summary{padding:16px 20px; font-weight:700; font-size:.92rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; font-size:1.3rem; color:var(--ig2); flex-shrink:0; margin-left:12px}
.faq-item[open] summary::after{content:'−'}
.faq-item p{padding:0 20px 18px; margin:0; color:var(--mute); font-size:.88rem}

/* ---------- forms ---------- */
.form-field{margin-bottom:16px}
.form-field label{display:block; font-size:.85rem; font-weight:700; margin-bottom:6px; color:var(--ink)}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-family:inherit; font-size:.92rem;
  background:var(--card); color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--ig2); outline-offset:1px}
.form-field input::placeholder{color:var(--mute)}

.pay-method{border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:10px; cursor:pointer; display:flex; align-items:center; gap:12px; background:var(--card)}
.pay-method.active{border-color:var(--ig2); background:rgba(221,42,123,.06)}

/* ---------- cart / checkout ---------- */
.checkout-steps{display:flex; gap:8px; margin-bottom:32px; font-size:.8rem; color:var(--mute)}
.checkout-steps span{padding:6px 14px; border-radius:99px; background:var(--card); border:1px solid var(--line)}
.checkout-steps span.active{background:var(--igrad); color:#fff; border-color:transparent}
.cart-table{width:100%; border-collapse:collapse}
.cart-table th{text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mute); padding:12px 0; border-bottom:1px solid var(--line)}
.cart-table td{padding:16px 0; border-bottom:1px solid var(--line); vertical-align:middle}
.qty-input{width:64px; padding:8px; border:1px solid var(--line); border-radius:10px; text-align:center; background:var(--card); color:var(--ink)}
.summary-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:sticky; top:100px}
.summary-box .row{display:flex; justify-content:space-between; padding:8px 0; font-size:.9rem; color:var(--mute)}
.summary-box .row.total{font-weight:800; color:var(--ink); font-size:1.1rem; border-top:1px solid var(--line); margin-top:8px; padding-top:14px}

/* ---------- product cards (used on shop.php) ---------- */
.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.product-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; position:relative}
.product-card .batch-id{font-size:.7rem; color:var(--mute); margin-bottom:8px}
.product-card h3{font-size:1rem; margin-bottom:8px; color:var(--ink)}
.product-card .price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:16px}
.product-card .price{font-size:1.5rem; font-weight:800; background:var(--igrad); -webkit-background-clip:text; background-clip:text; color:transparent}
.badge-sale{position:absolute; top:18px; right:18px; background:var(--igrad); color:#fff; font-size:.68rem; font-weight:800; padding:4px 10px; border-radius:99px}

/* ---------- floating contact dock ---------- */
/* ================= Floating chat widget (bottom-right) — expands to WhatsApp + Telegram only ================= */
.chat-widget{position:fixed; right:20px; bottom:20px; z-index:90}
.chat-fab{
  width:58px; height:58px; border-radius:50%; background:var(--igrad); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:transform .15s;
}
.chat-fab:hover{transform:scale(1.08)}
.chat-panel{
  position:absolute; bottom:72px; right:0; width:260px; background:#fff; border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:14px; display:none; flex-direction:column; gap:8px;
}
.chat-panel.open{display:flex}
.chat-panel-head{padding:4px 6px 10px; border-bottom:1px solid var(--line); margin-bottom:4px}
.chat-panel-head strong{display:block; font-size:.92rem; color:var(--ink)}
.chat-panel-head span{font-size:.76rem; color:var(--mute)}
.chat-option{display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:12px; color:var(--ink)}
.chat-option:hover{background:var(--bg-2)}
.chat-option svg{flex-shrink:0}
.chat-option small{color:var(--mute); font-weight:400}
.chat-whatsapp svg{color:#25D366}
.chat-telegram svg{color:#26A5E4}
@media (max-width:640px){ .chat-widget{right:14px; bottom:14px} .chat-fab{width:52px; height:52px} .chat-panel{width:230px} }

/* ---------- footer ---------- */
footer.site-footer{background:var(--bg-2); color:var(--mute); padding:56px 0 28px; margin-top:60px; border-top:1px solid var(--line)}
footer.site-footer h4{color:var(--ink); font-size:.92rem; margin-bottom:14px}
footer.site-footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; margin-bottom:36px}
footer.site-footer a{color:var(--mute); font-size:.86rem; display:block; margin-bottom:8px}
footer.site-footer a:hover{color:var(--ig2)}
footer.site-footer .bottom{border-top:1px solid var(--line); padding-top:22px; font-size:.78rem; color:#605D75; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
@media (max-width:800px){ footer.site-footer .cols{grid-template-columns:1fr 1fr} }

/* ---------- utility ---------- */
.flash{padding:14px 18px; border-radius:14px; margin-bottom:20px; font-size:.9rem}
.flash-success{background:rgba(81,91,212,.12); color:#A8B0F5; border:1px solid rgba(81,91,212,.3)}
.flash-error{background:rgba(220,60,60,.1); color:#F29B9B; border:1px solid rgba(220,60,60,.3)}
.empty-state{text-align:center; padding:60px 20px; color:var(--mute)}
@media (max-width:860px){
  section > .container[style*="grid-template-columns"], form[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .summary-box[style*="sticky"]{position:static !important}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important} }

/* standalone icon badge (product page) */
.icon-badge{width:52px; height:52px; border-radius:16px; background:var(--bg-2); display:inline-flex; align-items:center; justify-content:center}

/* ---- pricing table: mobile-friendly stacked cards below 700px ---- */
.pricing-cards-mobile{display:none}
@media (max-width:700px){
  .pricing-table-wrap{display:none}
  .pricing-cards-mobile{display:flex; flex-direction:column; gap:16px}
  .price-card-mobile{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px; box-shadow:0 4px 16px rgba(24,21,31,.05);
  }
  .price-card-mobile.popular{border-color:var(--ig2); box-shadow:var(--shadow)}
  .price-card-mobile-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-top:4px}
  .price-card-mobile .tier-qty{font-weight:800; font-size:1.05rem; color:var(--ink)}
  .price-card-mobile .tier-price{font-size:1.4rem; font-weight:800; background:var(--igrad); -webkit-background-clip:text; background-clip:text; color:transparent}
  .price-card-mobile-features{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:9px}
  .price-card-mobile-features li{font-size:.86rem; color:var(--mute); display:flex; align-items:center; gap:8px}
  .price-card-mobile-features .check{color:var(--ig2); font-weight:800}
  .price-card-mobile .popular-badge{display:inline-block; margin-bottom:10px}
}

/* ---- IP/country picker: made unmistakably visible and clickable ---- */
.ip-picker-box{
  background:linear-gradient(180deg, rgba(221,42,123,.05), rgba(81,91,212,.05));
  border:1.5px solid var(--ig2); border-radius:16px; padding:20px; margin:24px 0;
}
.country-picker input[type="text"]{
  background:#fff; border:2px solid var(--ig2); font-weight:600; cursor:pointer;
}
.country-picker input[type="text"]:focus{outline:none; box-shadow:0 0 0 3px rgba(221,42,123,.15)}

/* ================= Category tab strip (replaces the dropdown menu — always visible, scrollable) ================= */
.category-tabs{background:var(--bg-2); border-bottom:1px solid var(--line); padding:12px 0}
.category-tabs-scroll{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.category-tabs-scroll::-webkit-scrollbar{display:none}
.category-tab{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:99px;
  background:#fff; border:1px solid var(--line); font-size:.82rem; font-weight:600; color:var(--mute); white-space:nowrap;
}
.category-tab:hover{border-color:var(--ig2); color:var(--ink)}
.category-tab.active{background:var(--igrad); color:#fff; border-color:transparent}
.category-tab svg{flex-shrink:0}

/* ================= Orbital platform hub (homepage hero visual) ================= */
.orbit-wrap{position:relative; height:340px; display:flex; align-items:center; justify-content:center}
.orbit-hub{
  width:110px; height:110px; border-radius:50%; background:var(--igrad);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color:#fff; font-weight:800; font-size:.82rem; text-align:center; line-height:1.2;
  box-shadow:0 0 0 10px rgba(221,42,123,.08), 0 20px 40px rgba(221,42,123,.3); z-index:3;
  animation:orbitPulse 3.2s ease-in-out infinite;
}
@keyframes orbitPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.orbit-ring-deco{position:absolute; border:1.5px dashed var(--line); border-radius:50%}
.orbit-ring-deco.r1{width:220px; height:220px}
.orbit-ring-deco.r2{width:320px; height:320px}
.orbit-icon-item{
  position:absolute; width:56px; height:56px; border-radius:16px; background:#fff;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(24,21,31,.1); animation:orbitFloat 5s ease-in-out infinite; animation-delay:calc(var(--d) * .3s);
}
.orbit-icon-item:nth-child(3){top:2%; left:44%}
.orbit-icon-item:nth-child(4){top:16%; left:80%}
.orbit-icon-item:nth-child(5){top:78%; left:80%}
.orbit-icon-item:nth-child(6){top:92%; left:42%}
.orbit-icon-item:nth-child(7){top:78%; left:6%}
.orbit-icon-item:nth-child(8){top:16%; left:8%}
@keyframes orbitFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:900px){ .orbit-wrap{display:none} }

/* ================= Comparison table ("ThreadsPVA vs Others") ================= */
.compare-table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}
.compare-table{width:100%; border-collapse:collapse; min-width:520px}
.compare-table th, .compare-table td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem}
.compare-table th:first-child, .compare-table td:first-child{color:var(--ink); font-weight:600}
.compare-table thead th{color:#fff; font-weight:800; font-size:.92rem}
.compare-table thead th:first-child{background:var(--ink)}
.compare-table thead th:nth-child(2){background:var(--igrad)}
.compare-table thead th:nth-child(3){background:var(--bg-2); color:var(--mute)}
.compare-table td:nth-child(2){color:var(--ig2); font-weight:700}
.compare-table td:nth-child(3){color:var(--mute)}
.compare-table tbody tr:last-child td{border-bottom:0}

/* ================= Hero — stacked price-card preview (replaces orbital decoration) ================= */
.hero-price-stack{display:flex; flex-direction:column; gap:14px}
.hero-price-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  display:flex; align-items:center; gap:12px; box-shadow:var(--shadow); transition:transform .15s;
  transform:translateX(calc(var(--i) * 14px)); position:relative;
}
.hero-price-card:hover{transform:translateX(calc(var(--i) * 14px)) translateY(-3px)}
.hpc-icon{width:38px; height:38px; border-radius:11px; background:var(--bg-2); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.hpc-name{flex:1; font-size:.86rem; font-weight:700; color:var(--ink)}
.hpc-price{font-weight:800; font-size:1.1rem; background:var(--igrad); -webkit-background-clip:text; background-clip:text; color:transparent; flex-shrink:0}
@media (max-width:900px){ .hero-price-stack{display:none} }

/* ================= Bento grid (replaces the repeated uniform card-grid sections) ================= */
.bento-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:150px; gap:16px;
}
.bento-tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; justify-content:center; gap:6px;
  transition:transform .18s, box-shadow .18s; position:relative; overflow:hidden;
}
a.bento-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ig2)}
.bento-tile .icon{font-size:1.3rem; margin-bottom:4px}
.bento-tile h3{font-size:1.02rem; margin:0 0 4px; color:var(--ink)}
.bento-tile p{font-size:.84rem; color:var(--mute); margin:0}
.bento-tile .go{font-size:.8rem; font-weight:700; color:var(--ig2); margin-top:6px}
.bento-big{grid-column:span 2; grid-row:span 2; justify-content:flex-end}
.bento-big h3{font-size:1.3rem}
.bento-big .icon{font-size:1.8rem}
.bento-dark{background:var(--ink); border-color:var(--ink)}
.bento-dark h3, .bento-dark p{color:#fff}
.bento-dark p{opacity:.7}
.bento-grad{background:var(--igrad); border-color:transparent; grid-column:span 2}
.bento-grad h3, .bento-grad p{color:#fff}
.bento-grad p{opacity:.9}
@media (max-width:900px){
  .bento-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto}
  .bento-big, .bento-grad{grid-column:span 2}
  .bento-tile{min-height:150px}
}
@media (max-width:600px){
  .bento-grid{grid-template-columns:1fr}
  .bento-big, .bento-grad{grid-column:span 1}
}

/* ================= Stats strip ================= */
.stats-strip{padding:44px 0}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.stats-grid strong{display:block; font-size:2rem; font-weight:800; font-family:'Manrope'}
.stats-grid span{font-size:.82rem; color:var(--mute)}
@media (max-width:700px){ .stats-grid{grid-template-columns:repeat(2,1fr); gap:28px} }

/* ================= Testimonials ================= */
.testimonial-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.testimonial-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.testimonial-card .stars{color:#F59E0B; font-size:.9rem; margin-bottom:10px; letter-spacing:2px}
.testimonial-card p{font-size:.9rem; color:var(--ink); font-style:italic; margin-bottom:14px}
.testimonial-name{font-size:.8rem; color:var(--mute); font-weight:600}

/* ================= CTA banner ================= */
.cta-banner{
  background:var(--igrad); border-radius:28px; padding:40px 36px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
@media (max-width:700px){ .cta-banner{flex-direction:column; text-align:center; padding:32px 24px} }