/* ===================================================================
   HorusVPN — Design System
   =================================================================== */

:root{
  /* Brand */
  --brand-600:#1E4FD6;
  --brand-500:#2F6FED;
  --brand-400:#4A90FF;
  --cyan-400:#3FE0F0;
  --cyan-300:#7CEBF7;

  /* Ink (dark surfaces) */
  --ink-900:#04070D;
  --ink-800:#070E1A;
  --ink-700:#0B1626;
  --ink-600:#111F35;
  --ink-500:#182B47;

  /* Paper (light surfaces) */
  --paper-000:#FFFFFF;
  --paper-050:#F6F8FB;
  --paper-100:#ECF1F7;
  --paper-line:#DFE6EF;
  --paper-ink:#0B1626;
  --paper-dim:#4B5A70;

  /* Text on dark */
  --text-000:#FFFFFF;
  --text-dim:rgba(255,255,255,.66);
  --text-faint:rgba(255,255,255,.6);
  --line-dark:rgba(255,255,255,.09);
  --line-dark-strong:rgba(255,255,255,.16);

  /* Semantic */
  --ok:#33D69F;
  --warn:#FFB74A;

  /* Radii */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  /* Shadows */
  --shadow-glow: 0 0 0 1px rgba(74,144,255,.16), 0 20px 60px -20px rgba(47,111,237,.45);
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.5);
  --shadow-card-light: 0 1px 2px rgba(11,22,38,.04), 0 20px 40px -24px rgba(11,22,38,.14);

  /* Type scale */
  --step-display: clamp(2.75rem, 3.2vw + 1.8rem, 5.25rem);
  --step-h1: clamp(2.25rem, 2vw + 1.6rem, 3.25rem);
  --step-h2: clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem);
  --step-h3: clamp(1.25rem, .5vw + 1.1rem, 1.5rem);
  --step-lead: clamp(1.0625rem, .3vw + 1rem, 1.25rem);

  --container: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  background:var(--ink-900);
  color:var(--text-000);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
::selection{ background:var(--brand-500); color:#fff; }

.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block: clamp(64px, 9vw, 132px); position:relative; }
.section--tight{ padding-block: clamp(40px, 5vw, 72px); }
.section--paper{ background:var(--paper-050); color:var(--paper-ink); }
.section--ink{ background:var(--ink-900); }
.section--ink-2{ background:var(--ink-800); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cyan-300);
  margin-bottom:16px;
}
.section--paper .eyebrow{ color:var(--brand-600); }
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-400),var(--cyan-400));
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.02em; line-height:1.08; }
.display{ font-size:var(--step-display); line-height:1.02; letter-spacing:-0.03em; font-weight:600; }
h2{ font-size:var(--step-h2); }
h3{ font-size:var(--step-h3); }
p{ margin:0; }
.lead{ font-size:var(--step-lead); line-height:1.5; color:var(--text-dim); }
.section--paper .lead{ color:var(--paper-dim); }

.section-head{ max-width:680px; margin-bottom:clamp(36px,5vw,64px); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--r-pill);
  font-weight:600; font-size:.9375rem; letter-spacing:-0.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(135deg,var(--brand-500),var(--cyan-400));
  color:#04101F;
  box-shadow:var(--shadow-glow);
}
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(74,144,255,.3), 0 24px 60px -16px rgba(47,111,237,.6); }
.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--line-dark-strong);
  color:var(--text-000);
}
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.section--paper .btn-ghost{ background:var(--paper-000); border-color:var(--paper-line); color:var(--paper-ink); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 30px; font-size:1rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(4,7,13,.72);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line-dark);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.0625rem; letter-spacing:-0.01em; }
.brand svg, .brand img{ height:30px; width:auto; flex:none; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ font-size:.9375rem; color:var(--text-dim); transition:color .15s ease; }
.nav-links a:hover{ color:var(--text-000); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:0; color:var(--text-000); padding:10px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block: clamp(96px,12vw,168px) clamp(72px,8vw,120px);
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background:radial-gradient(120% 90% at 50% -10%, #0E1E3B 0%, var(--ink-900) 55%);
}
.hero-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.55; mix-blend-mode:screen;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,7,13,0) 0%, var(--ink-900) 92%);
}
.hero-inner{ text-align:center; max-width:820px; margin-inline:auto; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid var(--line-dark-strong);
  font-size:.8125rem; color:var(--text-dim); margin-bottom:28px;
}
.hero h1{ font-size:var(--step-display); letter-spacing:-0.035em; margin-bottom:22px; }
.hero h1 em{ font-style:normal; background:linear-gradient(135deg,var(--brand-400),var(--cyan-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead{ max-width:560px; margin-inline:auto; font-size:var(--step-lead); }
.hero-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero-meta{ margin-top:20px; font-size:.8125rem; color:var(--text-faint); }
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:clamp(56px,7vw,88px);
  background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r-lg);
  overflow:hidden;
}
.hero-stat{ background:rgba(255,255,255,.02); padding:24px 16px; text-align:center; }
.hero-stat b{ display:block; font-size:1.75rem; letter-spacing:-0.02em; margin-bottom:4px; }
.hero-stat span{ font-size:.8125rem; color:var(--text-faint); }

/* ---------- Trust bar ---------- */
.trustbar{ padding-block:28px; border-block:1px solid var(--line-dark); }
.trustbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.trust-item{ display:flex; align-items:center; gap:10px; font-size:.875rem; color:var(--text-dim); }
.trust-item svg{ flex:none; color:var(--cyan-300); }

/* ---------- Feature grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r-lg); overflow:hidden; }
.section--paper .grid-3{ background:var(--paper-line); border-color:var(--paper-line); }
.feature{ background:var(--ink-900); padding:clamp(28px,3vw,40px); }
.section--paper .feature{ background:var(--paper-000); }
.feature-icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(47,111,237,.18), rgba(63,224,240,.14));
  border:1px solid rgba(74,144,255,.25);
  color:var(--cyan-300);
}
.feature h3{ margin-bottom:10px; }
.feature p{ color:var(--text-dim); font-size:.9375rem; line-height:1.6; }
.section--paper .feature p{ color:var(--paper-dim); }

/* ---------- Server map ---------- */
.servers{ position:relative; }
.server-visual{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line-dark);
  aspect-ratio:2.26/1; margin-bottom:clamp(32px,4vw,56px);
  background:var(--ink-800);
}
.server-visual img{ width:100%; height:100%; object-fit:contain; }
.server-visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,7,13,.55), transparent 45%); }
.server-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.server-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px; border-radius:var(--r-md);
  background:rgba(255,255,255,.03); border:1px solid var(--line-dark);
}
.server-chip .country{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.9375rem; }
.server-chip .flag{ display:inline-flex; flex:none; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px var(--line-dark); }
.server-chip .flag svg{ display:block; width:20px; height:14px; }
.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(51,214,159,.18); }
.status-dot.soon{ background:var(--warn); box-shadow:0 0 0 3px rgba(255,183,74,.18); }
.server-chip .tag{ font-size:.75rem; color:var(--text-faint); }

/* ---------- How it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); counter-reset:step; }
.step{ position:relative; padding-top:56px; }
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9375rem;
  background:linear-gradient(135deg,var(--brand-500),var(--cyan-400)); color:#04101F;
}
.step h3{ margin-bottom:10px; }
.step p{ color:var(--paper-dim); font-size:.9375rem; }
.section--ink .step p{ color:var(--text-dim); }

/* ---------- Pricing ---------- */
.pricing-toggle{ display:flex; justify-content:center; margin-bottom:clamp(32px,4vw,52px); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-800); border:1px solid var(--line-dark);
  border-radius:var(--r-lg); padding:clamp(28px,3vw,36px);
}
.plan.featured{
  background:linear-gradient(180deg, rgba(47,111,237,.14), rgba(11,22,38,0) 40%), var(--ink-800);
  border-color:rgba(74,144,255,.45);
  box-shadow:var(--shadow-glow);
}
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--brand-500),var(--cyan-400)); color:#04101F;
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  padding:6px 16px; border-radius:var(--r-pill);
}
.plan-name{ font-size:1.0625rem; font-weight:600; margin-bottom:6px; }
.plan-save{ font-size:.8125rem; color:var(--cyan-300); margin-bottom:18px; height:16px; }
.plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.plan-price b{ font-size:2.5rem; letter-spacing:-0.03em; }
.plan-price span{ color:var(--text-faint); font-size:.875rem; }
.plan-billed{ font-size:.8125rem; color:var(--text-faint); margin-bottom:26px; }
.plan-features{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex:1; }
.plan-features li{ display:flex; align-items:flex-start; gap:10px; font-size:.875rem; color:var(--text-dim); }
.plan-features svg{ flex:none; margin-top:2px; color:var(--ok); }

/* ---------- Testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.quote{ background:var(--paper-000); border:1px solid var(--paper-line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-card-light); }
.quote p{ font-size:.9375rem; line-height:1.65; color:var(--paper-ink); margin-bottom:18px; }
.quote-stars{ color:#F5A623; letter-spacing:2px; margin-bottom:14px; font-size:.875rem; }
.quote-who{ display:flex; align-items:center; gap:10px; }
.quote-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--brand-400),var(--cyan-400)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8125rem; color:#04101F; }
.quote-who b{ font-size:.875rem; display:block; }
.quote-who span{ font-size:.75rem; color:var(--paper-dim); }

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r-lg); overflow:hidden; }
.faq-item{ background:var(--ink-900); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; font-weight:600; font-size:.9375rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ flex:none; transition:transform .2s ease; color:var(--cyan-300); }
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item .a{ padding:0 26px 24px; color:var(--text-dim); font-size:.9375rem; line-height:1.6; max-width:640px; }

/* ---------- Final CTA ---------- */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  border-radius:var(--r-xl); padding:clamp(56px,7vw,96px) clamp(24px,5vw,64px);
  background:linear-gradient(135deg, var(--ink-700), var(--ink-800));
  border:1px solid var(--line-dark-strong);
}
.cta-band h2{ margin-bottom:16px; }
.cta-band .lead{ max-width:520px; margin-inline:auto; margin-bottom:32px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line-dark); padding-block:clamp(48px,6vw,72px) 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; margin-bottom:48px; }
.footer-brand p{ color:var(--text-faint); font-size:.875rem; margin-top:14px; max-width:280px; }
.footer-col h4, .footer-col .footer-h{ margin-top:0; font-weight:600; font-size:.8125rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.875rem; color:var(--text-dim); }
.footer-col a:hover{ color:var(--text-000); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--line-dark); font-size:.8125rem; color:var(--text-faint); }

/* ---------- WooCommerce shop / cart / checkout (light utility pass) ---------- */
.woocommerce ul.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; padding:0; }
.woocommerce ul.products li.product{ background:var(--ink-800); border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:24px; text-align:left; }
.woocommerce ul.products li.product img{ border-radius:var(--r-md); margin-bottom:14px; }
.woocommerce ul.products li.product .price{ color:var(--cyan-300); font-weight:700; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-pill); font-weight:600; font-size:.875rem;
  background:linear-gradient(135deg,var(--brand-500),var(--cyan-400)); color:#04101F !important; border:0;
}
.woocommerce-page{ background:var(--paper-050); color:var(--paper-ink); }
.woocommerce-page .wrap{ padding-block:56px; }
.woocommerce-page table.shop_table{ border-color:var(--paper-line); }
.woocommerce-page #payment div.payment_box{ background:var(--paper-100); }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .grid-3, .steps, .pricing-grid, .quotes, .server-list, .woocommerce ul.products{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .nav-links{ display:none; }
  .grid-3, .steps, .pricing-grid, .quotes, .server-list, .footer-grid, .woocommerce ul.products{ grid-template-columns:1fr; }
  .trustbar .wrap{ justify-content:flex-start; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}

/* ===================================================================
   SEO audit pass (Oct 2026): mobile nav, content pages, comparison
   =================================================================== */
.nav-menu{ display:flex; align-items:center; gap:32px; }
.brand picture{ display:contents; }
.hero-bg picture{ display:contents; }

@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }
  .nav-menu{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:18px;
    padding:20px var(--gutter) 28px;
    background:#04070d; border-bottom:1px solid var(--line-dark);
  }
  .site-header.menu-open .nav-menu{ display:flex; }
  .nav-menu .nav-links{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  .nav-menu .nav-links a{ font-size:1.0625rem; }
  .nav-menu .nav-cta{ flex-direction:column; align-items:stretch; }
  .nav-menu .nav-cta .btn{ width:100%; }
}
@media (max-width: 720px){
  .nav-menu .nav-links{ display:flex; }
  .hero h1{ font-size:clamp(2.1rem, 9vw, 2.75rem); }
}

/* Server list with only live locations */
.server-list.server-list--live{ grid-template-columns:repeat(2, minmax(0, 320px)); }
.server-chip .meta{ display:block; font-size:.75rem; font-weight:400; color:var(--paper-dim); margin-top:2px; }
@media (max-width: 720px){ .server-list.server-list--live{ grid-template-columns:1fr; } }

/* Comparison table */
.compare{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--paper-line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-000); font-size:.9375rem; }
.compare th, .compare td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--paper-line); vertical-align:top; }
.compare tr:last-child th, .compare tr:last-child td{ border-bottom:0; }
.compare thead th{ background:var(--paper-100); font-size:.8125rem; text-transform:uppercase; letter-spacing:.05em; color:var(--paper-dim); }
.compare tbody th{ font-weight:600; width:28%; }
.compare td.us{ color:var(--brand-600); font-weight:600; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Content pages (about, policies, guides, landing pages) */
.page-main .wrap{ max-width:820px; }
.section.page-main{ padding-top:clamp(28px, 4vw, 56px); }
.breadcrumbs{ font-size:.8125rem; color:var(--paper-dim); margin-bottom:18px; }
.breadcrumbs a{ color:var(--brand-600); }
.page-title{ font-size:var(--step-h1); margin-bottom:24px; line-height:1.1; }
.page-meta{ font-size:.8125rem; color:var(--paper-dim); margin:-12px 0 28px; }
.entry-content{ color:var(--paper-ink); font-size:1.0625rem; line-height:1.7; }
.entry-content > * + *{ margin-top:1.1em; }
.entry-content p{ margin-block:0; }
.entry-content h2{ font-size:clamp(1.5rem, 1vw + 1.2rem, 2rem); margin-top:2em; line-height:1.2; }
.entry-content h3{ font-size:1.25rem; margin-top:1.6em; line-height:1.3; }
.entry-content a{ color:var(--brand-600); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul, .entry-content ol{ padding-left:1.4em; }
.entry-content ul{ list-style:disc; }
.entry-content ol{ list-style:decimal; }
.entry-content li + li{ margin-top:.45em; }
.entry-content code{ font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.9em; background:var(--paper-100); padding:2px 6px; border-radius:6px; word-break:break-word; }
.entry-content table{ width:100%; border-collapse:collapse; font-size:.9375rem; }
.entry-content th, .entry-content td{ border:1px solid var(--paper-line); padding:10px 14px; text-align:left; vertical-align:top; }
.entry-content thead th{ background:var(--paper-100); }
.entry-content .callout{ background:var(--paper-000); border:1px solid var(--paper-line); border-left:4px solid var(--brand-500); border-radius:var(--r-md); padding:18px 22px; }
.entry-content .cta-inline{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6em; }
.entry-content .cta-inline a{ text-decoration:none; }
.entry-content .btn-primary{ color:#04101F; }
.entry-content .btn-ghost{ color:var(--paper-ink); border-color:var(--paper-line); }
.entry-content .guide-list{ list-style:none; padding:0; display:grid; gap:14px; }
.entry-content .guide-list li{ margin:0; background:var(--paper-000); border:1px solid var(--paper-line); border-radius:var(--r-md); padding:18px 22px; }
.entry-content .guide-list a{ font-weight:600; font-size:1.125rem; text-decoration:none; }
.entry-content .guide-list p{ margin-top:6px; font-size:.9375rem; color:var(--paper-dim); }

/* WooCommerce single product */
.woocommerce div.product .product_title{ font-size:var(--step-h1); margin-bottom:12px; }
.woocommerce div.product div.images img{ border-radius:var(--r-lg); }
.woocommerce .woocommerce-breadcrumb{ font-size:.8125rem; margin-bottom:18px; }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.section--paper .server-chip{ background:var(--paper-000); border-color:var(--paper-line); box-shadow:var(--shadow-card-light); }
.woocommerce-page .site-header{ background:rgba(4,7,13,.95); color:var(--text-000); }
.woocommerce-page .site-footer{ color:var(--text-000); }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--brand-600); font-weight:700; font-size:1.5rem; }
.woocommerce-page .site-header .wrap.nav{ padding-block:14px; } .woocommerce-page .site-footer .wrap{ padding-block:0; }

/* Guide pages: app-store QR cards */
.entry-content .qr-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.entry-content .qr-card{ margin:0; background:var(--paper-000); border:1px solid var(--paper-line); border-radius:var(--r-md); padding:22px 20px; text-align:center; box-shadow:var(--shadow-card-light); }
.entry-content .qr-card img{ display:block; width:176px; max-width:100%; height:auto; margin:0 auto 16px; border:1px solid var(--paper-line); border-radius:var(--r-sm); }
.entry-content .qr-card .qr-title{ display:block; font-size:1.0625rem; font-weight:600; line-height:1.3; }
.entry-content .qr-card .qr-hint{ display:block; margin:4px 0 16px; font-size:.875rem; color:var(--paper-dim); }
.entry-content .qr-card a.btn{ text-decoration:none; }
@media (max-width: 560px){
  .entry-content .qr-grid{ grid-template-columns:1fr; }
}

/* Animated hero tunnel (SVG): streaks carry their own opacity, so no dimming or blend mode */
.hero-bg--tunnel img{ opacity:1; mix-blend-mode:normal; }

/* Spacing pass (Oct 2026) */
/* 1) Two sections on the same background: padding used to stack (bottom + top) into a dead band.
      Servers -> "Getting started" are both light, so keep the join compact. */
#servers{ padding-bottom:clamp(28px, 3.5vw, 48px); }
#servers + .section--paper{ padding-top:clamp(28px, 3.5vw, 48px); }

/* 2) Text pages (guides, legal, about): `.entry-content p{ margin-block:0 }` cancelled the
      sibling rhythm, so heading->paragraph and paragraph->paragraph had no gap at all.
      Restore the 1.1em rhythm for direct-child paragraphs only (nested ones stay flush). */
.entry-content > p{ margin-top:1.1em; }
.entry-content > p:first-child{ margin-top:0; }

/* Coming soon tag legibility: the default tag colour is translucent white, invisible on the white chips */
.section--paper .server-chip .tag{ font-size:.8125rem; font-weight:500; color:var(--paper-dim); white-space:nowrap; }


/* Trust bar: six items as a balanced 3 x 2 grid on desktop (was 4 + 1 with a hole) */
@media (min-width:900px){
  .trustbar .wrap{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:18px 32px; justify-content:normal; }
}

/* Order-received page: key block spacing */
.horus-key{ margin-top:32px; }
.horus-key h2{ margin:0 0 16px; }
.horus-key p{ margin:0; }
.horus-key__cta{ margin-bottom:20px !important; }
.horus-key__btn{ display:inline-block; background:#2f6fed; color:#fff; text-decoration:none; font-weight:600; padding:12px 26px; border-radius:999px; }
.horus-key__btn:hover{ background:#2760d4; color:#fff; }
.horus-key__label{ margin-bottom:8px !important; }
.horus-key__code{ display:block; padding:12px 14px; background:#f1f3f7; border-radius:8px; word-break:break-all; margin-bottom:16px; }


/* Telegram bot callout (home, under "three steps") */
.bot-callout{
  display:flex; align-items:center; gap:24px;
  margin-top:clamp(32px,4vw,48px); padding:clamp(20px,3vw,28px) clamp(20px,3vw,32px);
  background:var(--paper-000); border:1px solid var(--paper-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card-light);
}
.bot-callout__icon{
  flex:none; display:grid; place-items:center; width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg,var(--brand-500),var(--cyan-400)); color:#04101F;
}
.bot-callout__text{ flex:1; min-width:0; }
.bot-callout__text h3{ margin:0 0 6px; font-size:1.25rem; }
.bot-callout__text p{ margin:0; color:var(--paper-dim); font-size:.9375rem; }
@media (max-width:760px){
  .bot-callout{ flex-direction:column; align-items:flex-start; gap:16px; }
  .bot-callout .btn{ width:100%; }
}

.bot-callout__text .bot-callout__ref{ margin-top:10px; }
.bot-callout__text .bot-callout__ref b{ color:var(--paper-ink); }
.horus-key__bot{ margin-top:12px !important; }

/* SEO audit 26 Oct 2026: crawlable plan links, larger tap targets, swipe hint for wide tables */
.plan-details{ display:block; text-align:center; margin-top:12px; padding:8px 0; font-size:.875rem; color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; }
.plan-details:hover{ color:var(--text-000); }
.footer-col a{ display:inline-block; padding:4px 0; }
@media (max-width:720px){
  .table-scroll::after{ content:"Swipe to see more \2192"; display:block; margin-top:8px; font-size:.75rem; opacity:.7; text-align:right; }
}