/* TrigVPN home page sections: hero, trust strip, features, steps, locations, pricing, comparison, FAQ, CTA */
.section{padding:96px 0}
.section.alt{background:var(--paper2)}
.eyebrow{display:inline-block;color:var(--green2);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.section-head{text-align:center;max-width:700px;margin:0 auto 48px}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.section-head p{color:var(--ink2);font-size:1.08rem}
.ico{width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;background:#e3fbf0;color:var(--green2)}
.ico svg{width:26px;height:26px}
.ico.b{background:#e6eeff;color:var(--blue)}

/* Hero (dark) */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 600px at 85% 10%,rgba(25,195,125,.28),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(61,123,255,.30),transparent 60%),var(--navy);color:#fff;padding:80px 0 88px}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero .eyebrow{color:var(--mint)}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);font-weight:800;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--mint)}
.lead{font-size:1.2rem;color:#c9d3ec;max-width:540px;margin-bottom:28px}
.checks{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:center;font-weight:600}
.checks svg{width:22px;height:22px;flex:none}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:flex;align-items:center;gap:12px;background:#000;border:1.5px solid #3a4a78;color:#fff;border-radius:14px;padding:10px 20px 10px 16px;min-width:200px;text-decoration:none}
.store svg{width:28px;height:28px;flex:none}
.store small{display:block;font-size:.72rem;color:#b9c3e0;line-height:1.2}
.store strong{display:block;font-size:1.12rem;line-height:1.2}
.store[aria-disabled="true"]{cursor:default}
.soon{display:inline-block;margin-top:14px;color:#a9b6d6;font-size:.9rem}
.hero-visual{display:flex;justify-content:center}
.hero-visual img{width:min(330px,80vw);filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}

/* Trust strip */
.trust{background:#fff;border-bottom:1px solid var(--rule)}
.trust ul{list-style:none;margin:0 auto;padding:26px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:.98rem}
.trust li span{display:block;font-weight:400;color:var(--ink2);font-size:.85rem}

/* Features */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:30px;box-shadow:0 1px 2px rgba(13,27,58,.04);transition:box-shadow .2s,transform .2s}
.feat:hover{box-shadow:0 14px 40px rgba(13,27,58,.10);transform:translateY(-2px)}
.feat .ico{margin-bottom:18px}
.feat h3{font-size:1.18rem}
.feat p{color:var(--ink2);margin:0}

/* Steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;padding:0;margin:0}
.steps li{background:#fff;padding:30px;border-radius:var(--radius);border:1px solid var(--rule)}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--green);color:#03140c;font-weight:800;font-size:1.2rem;margin-bottom:16px}
.steps h3{font-size:1.15rem}
.steps p{color:var(--ink2);margin:0}

/* Locations */
.locs{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}
.loc{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:16px 22px;min-width:230px}
.loc .cc{font-weight:800;font-size:.85rem;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--mint)}
.loc strong{display:block}
.loc span{color:var(--green2);font-size:.88rem;font-weight:600}
.loc.planned{border-style:dashed}
.loc.planned span{color:var(--ink2)}

/* Pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.plan{position:relative;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:36px}
.plan.vip{background:var(--navy);color:#fff;border:2px solid var(--green);box-shadow:0 24px 60px rgba(11,23,54,.25)}
.badge{position:absolute;top:-14px;right:28px;background:var(--green);color:#03140c;font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan h3{font-size:1.3rem;margin-bottom:4px}
.price{font-size:2.9rem;font-weight:800;letter-spacing:-.03em;margin:10px 0 4px}
.price small{font-size:1rem;color:var(--ink2);font-weight:600}
.plan.vip .price small,.plan.vip .sub{color:#b9c3e0}
.plan .sub{color:var(--ink2);margin-bottom:22px}
.plan ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{width:20px;height:20px;flex:none;margin-top:3px}
.fine{text-align:center;color:var(--ink2);font-size:.88rem;margin-top:24px}

/* Comparison table */
.cmp-wrap{overflow-x:auto;max-width:1000px;margin:0 auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;font-size:1rem}
.cmp th,.cmp td{padding:18px 14px;text-align:center}
.cmp thead th{font-weight:700;font-size:.98rem;color:var(--ink2);vertical-align:bottom}
.cmp tbody th{text-align:left;font-weight:600;padding-left:22px}
.cmp tbody tr:nth-child(odd) th,.cmp tbody tr:nth-child(odd) td{background:var(--paper2)}
.cmp tbody tr:nth-child(odd) th{border-radius:12px 0 0 12px}
.cmp tbody tr:nth-child(odd) td:last-child{border-radius:0 12px 12px 0}
.cmp .us{background:var(--navy)!important;color:#fff;font-weight:700}
.cmp thead .us{border-radius:18px 18px 0 0;color:#fff;font-size:1.1rem;padding-top:24px}
.cmp tbody tr:last-child .us{border-radius:0 0 18px 18px}
.cmp svg{width:24px;height:24px;margin:0 auto}
.cmp .note{font-size:.85rem;font-weight:400;color:var(--ink2)}
.cmp .us .note{color:#b9c3e0}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:0 22px}
.faq details[open]{border-color:var(--green)}
.faq summary{cursor:pointer;list-style:none;padding:20px 32px 20px 0;font-weight:700;font-size:1.06rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--green2);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--ink2);margin:0 0 20px}

/* Final CTA */
.cta{background:radial-gradient(700px 400px at 15% 0,rgba(61,123,255,.35),transparent 60%),radial-gradient(700px 400px at 90% 100%,rgba(25,195,125,.30),transparent 60%),var(--navy2);color:#fff;text-align:center;padding:88px 0}
.cta h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.cta p{color:#c9d3ec;max-width:560px;margin:0 auto 28px}
.cta .stores{justify-content:center}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .trust ul{grid-template-columns:1fr 1fr}
  .grid3,.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .hero{padding:44px 0 64px}
  .trust ul,.grid3,.steps,.plans{grid-template-columns:1fr}
  .store{flex:1 1 100%}
  .plan{padding:28px 22px}
}