/* SatSIM public website */
:root {
  --bg: #0c0e12; --bg2: #14171e; --bg3: #1b1f28;
  --text: #eef1f5; --muted: #8b93a1;
  --accent: #01d7c3; --accent2: #66eadb; --ok: #2ecc71;
  /* accent tints — kept as variables so a white-label storefront can repaint the
     whole UI from one colour (see website.py brand_css). */
  --accent-08: #01d7c314; --accent-12: #01d7c31f; --accent-26: #01d7c344;
  --accent-40: #01d7c366; --accent-33: #01d7c355; --accent-15: #01d7c326;
  --on-accent: #031a3b;                       /* text on an accent background */
  --accent-dark1: #07211d; --accent-dark2: #062019;   /* warm card gradients */
  --line: #ffffff10; --line2: #ffffff1c; --line3: #ffffff26;
  --shadow-strong: #000a; --shadow-soft: #0007; --text-soft: #c7cdd6;
  --radius: 14px; --max: 1020px;
}

/* Light theme — the default since 2026-09-11; dark stays one toggle away.
   Tenant storefront pages never get the data-theme attribute, so their inline
   :root brand overrides keep working untouched. */
html[data-theme="light"] {
  --bg: #f6f7f9; --bg2: #ffffff; --bg3: #eef1f5;
  --text: #101828; --muted: #5d6675;
  --accent: #089e90; --accent2: #01d7c3;
  --accent-08: #089e9014; --accent-12: #089e901f; --accent-26: #089e9044;
  --accent-40: #089e9066; --accent-33: #089e9055; --accent-15: #089e9026;
  --on-accent: #ffffff;
  --accent-dark1: #e8f8f5; --accent-dark2: #def4f0;
  --line: #0f1b2e14; --line2: #0f1b2e26; --line3: #0f1b2e3d;
  --shadow-strong: #0f1b2e2b; --shadow-soft: #0f1b2e1c;
  --text-soft: #3a4454;
}
html[data-theme="light"] .lang-item:hover { background: #0f1b2e0a; }
html[data-theme="light"] .results a:hover { background: #0f1b2e08; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.hl { color: var(--accent); }

/* nav */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max); margin: 0 auto; padding: 16px 20px;
}
.brand { font-size: 19px; white-space: nowrap; flex-shrink: 0; }
.topnav { flex-wrap: wrap; row-gap: 8px; }
.nav-links { display: flex; gap: 20px; align-items: center; font-size: 14.5px; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  background: var(--accent); color: var(--on-accent) !important; font-weight: 700;
  padding: 8px 16px; border-radius: 11px;
}

/* language selector (header) */
.lang-dd { position: relative; }
.lang-dd summary {
  list-style: none; cursor: pointer; user-select: none;
  background: var(--bg2); border: 1px solid var(--line2); color: var(--text);
  padding: 8px 14px; border-radius: 11px; font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover, .lang-dd[open] summary { border-color: var(--accent); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--bg3, #1b1f28); border: 1px solid var(--line2); border-radius: 14px;
  min-width: 190px; box-shadow: 0 16px 40px var(--shadow-strong); padding: 6px;
  /* 20+ languages: scroll inside the menu instead of running off the screen */
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  columns: 1;
}
@media (min-width: 700px) { .lang-menu { columns: 2; column-gap: 4px; min-width: 340px; } }
.lang-menu .lang-item { break-inside: avoid; }
.lang-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; font-size: 14px; color: var(--text) !important;
}
.lang-item b { color: var(--accent); font-size: 12px; width: 24px; }
.lang-item:hover { background: var(--line); }
.lang-item.current { background: var(--accent-12); }

@media (max-width: 640px) { .nav-links > a:not(.nav-cta) { display: none; } }

/* hero */
.hero { max-width: var(--max); margin: 0 auto; padding: 56px 20px 30px; text-align: center; }
.hero h1 { font-size: clamp(30px, 6vw, 52px); letter-spacing: -.5px; }
.hero-sub { color: var(--muted); max-width: 640px; margin: 14px auto 0; font-size: 17px; }
.hero-sub b { color: var(--text); }
.hero-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.hero-badges span {
  background: var(--bg2); border: 1px solid var(--line); padding: 7px 14px;
  border-radius: 20px; font-size: 13.5px; color: var(--muted);
}

/* search */
.search-wrap { position: relative; max-width: 520px; margin: 28px auto 0; }
.search-wrap input {
  width: 100%; padding: 16px 20px; font-size: 17px; border-radius: 16px;
  border: 2px solid var(--line2); background: var(--bg2); color: var(--text); outline: none;
}
.search-wrap input:focus { border-color: var(--accent); }
.results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--bg3); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 16px 40px var(--shadow-strong); text-align: left;
}
.results a {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); font-size: 15px;
}
.results a:hover { background: var(--line); }
.results img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.results em { margin-left: auto; font-style: normal; color: var(--accent); font-size: 13.5px; }
.nores { padding: 14px 16px; color: var(--muted); font-size: 14px; }

/* sections */
.section { max-width: var(--max); margin: 0 auto; padding: 40px 20px; }
.section h2 { font-size: 26px; margin-bottom: 6px; }
.section-sub { color: var(--muted); margin-bottom: 18px; }
.muted-h { font-size: 14px; color: var(--muted); font-weight: 400; }

/* destination cards */
.dest-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin-top: 16px;
}
.dest-grid.small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.dest-card {
  display: flex; align-items: center; gap: 12px; background: var(--bg2);
  padding: 13px 15px; border-radius: var(--radius); border: 1px solid transparent;
  transition: border-color .12s, transform .12s; font-size: 15px;
}
.dest-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.dest-card img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.dest-card div { display: flex; flex-direction: column; }
.dest-card span { color: var(--muted); font-size: 12.5px; }
.all-dest { margin-top: 22px; }
.all-dest summary { cursor: pointer; color: var(--accent); font-weight: 600; }

/* comparison table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.compare { width: 100%; border-collapse: collapse; background: var(--bg2); font-size: 14.5px; }
.compare th, .compare td { padding: 11px 14px; text-align: left; white-space: nowrap; }
.compare thead th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.compare tbody tr { border-top: 1px solid var(--line); }
.compare .strike { color: var(--muted); text-decoration: line-through; }
.compare .us { color: var(--accent); font-weight: 700; }
.compare .pct { color: var(--ok); font-weight: 700; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0 26px; }
.step { background: var(--bg2); border-radius: var(--radius); padding: 20px; }
.step em {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-style: normal; font-weight: 800; margin-bottom: 12px;
}
.step b { display: block; margin-bottom: 4px; }
.step span { color: var(--muted); font-size: 14px; }
.cta-big {
  display: block; text-align: center; background: var(--accent); color: var(--on-accent);
  font-weight: 800; font-size: 17px; padding: 16px; border-radius: 16px; margin-top: 10px;
}
.cta-big:hover { background: var(--accent2); }

/* premium destination sales page */
.prem-hero { max-width: var(--max); margin: 0 auto; padding: 24px 20px 8px; text-align: center; }
.prem-kicker { display: inline-flex; align-items: center; gap: 8px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 20px; padding: 7px 16px; font-size: 13.5px;
  color: var(--muted); margin: 8px 0 4px; }
.prem-flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.prem-h1 { font-size: clamp(28px, 6vw, 52px); letter-spacing: -.6px; margin: 8px 0; }
.prem-sub { color: var(--muted); max-width: 620px; margin: 12px auto 0; font-size: 17px; }
.prem-sub b { color: var(--text); }
.hero-offer { max-width: 380px; margin: 26px auto 0; background: linear-gradient(160deg,var(--accent-dark1),var(--bg2));
  border: 1px solid var(--accent-33); border-radius: 22px; padding: 26px 24px; position: relative;
  box-shadow: 0 20px 60px var(--shadow-soft); }
.offer-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12px;
  padding: 5px 14px; border-radius: 20px; white-space: nowrap; }
.offer-unit { color: var(--muted); font-size: 14px; margin-top: 6px; }
.offer-price { font-size: 52px; font-weight: 800; color: var(--accent); letter-spacing: -1px;
  line-height: 1.1; margin-top: 4px; }
.offer-approx { color: var(--muted); font-size: 13px; }
.hero-offer .net-line { justify-content: center; margin-top: 16px; }
.hero-offer .net-label { text-align: center; }
.hero-vs { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.hero-vs s { color: #e5484d; text-decoration-thickness: 2px; }
.offer-cta { width: 100%; margin-top: 18px; padding: 15px; border-radius: 14px; font-size: 17px; }

.prem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-top: 16px; }
.prem-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.prem-card.featured { border-color: var(--accent-40); background: linear-gradient(160deg,var(--accent-dark2),var(--bg2)); }
.prem-card.featured .op-chip { border-color: var(--accent-26); background: var(--accent-08); }
.prem-networks { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--text); background: var(--line);
  border: 1px solid var(--line); border-radius: 24px; padding: 7px 15px; }
.pc-top { display: flex; align-items: center; justify-content: space-between; }
.pc-top b { font-size: 16px; }
.prem-save { background: #2ecc7122; color: var(--ok); font-weight: 800; font-size: 11.5px;
  padding: 2px 8px; border-radius: 20px; }
.pc-days { color: var(--muted); font-size: 13px; margin-top: -4px; }
.pc-price { font-size: 15px; }
.pc-price b { color: var(--accent); font-size: 20px; }
.prem-old { color: var(--muted); text-decoration: line-through; font-size: 13px; margin-right: 4px; }
.prem-card .buy-btn { margin-top: 6px; width: 100%; padding: 11px; border-radius: 11px; }
.prem-cmp .hero-cmp td { background: var(--accent-08); font-size: 14.5px; }
.prem-cmp .mini { color: var(--muted); font-size: 11px; }

/* features */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-top: 16px; }
.feat { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font-size: 14.5px; color: var(--text); }

/* device compatibility check */
.dev-check { max-width: 560px; margin-top: 14px; }
.dev-check input { width: 100%; padding: 13px 16px; font-size: 16px; border-radius: 14px;
  border: 2px solid var(--line2); background: var(--bg2); color: var(--text); outline: none; }
.dev-check input:focus { border-color: var(--accent); }
.dev-result { margin-top: 10px; font-size: 14px; }
.dev-result.ok { color: var(--ok); }
.dev-result.no { color: var(--muted); background: var(--bg2); padding: 12px 14px;
  border-radius: 12px; }
.dev-hit { display: inline-block; background: var(--bg2); color: var(--text);
  padding: 4px 10px; border-radius: 20px; font-size: 12.5px; margin: 3px 3px 0 0; }

/* order-page actions */
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.order-act { background: var(--bg3, #1b1f28); border: 1px solid var(--line2); color: var(--text);
  text-decoration: none; padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.order-act:hover { border-color: var(--accent); color: var(--accent); }

/* faq */
#faq details { background: var(--bg2); border-radius: var(--radius); padding: 14px 18px; margin-top: 10px; }
#faq summary { cursor: pointer; font-weight: 600; }
#faq p { color: var(--muted); margin-top: 8px; font-size: 14.5px; }

/* destination page */
.dest-hero { max-width: var(--max); margin: 0 auto; padding: 30px 20px 0; }
.crumb { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.crumb a:hover { color: var(--text); }
.dest-title { display: flex; align-items: center; gap: 14px; }
.dest-flag { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.dest-title h1 { font-size: clamp(26px, 5vw, 40px); }
.coverage { color: var(--muted); font-size: 13.5px; margin-top: 12px; }
.comp-note {
  margin-top: 16px; background: var(--accent-12); border: 1px solid var(--accent-26);
  padding: 12px 16px; border-radius: var(--radius); font-size: 14.5px;
}
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg2); border-radius: var(--radius); padding: 14px 16px;
}
.plan-info { display: flex; flex-direction: column; gap: 2px; }
.plan-info .muted, .plan-info span { color: var(--muted); font-size: 13px; }
.badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  padding: 2px 8px; border-radius: 20px; background: var(--accent-15); color: var(--accent);
}
.net-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.net-label { display: block; width: 100%; font-size: 10.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.op-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--text); background: var(--line); border: 1px solid var(--line);
  border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.op-logo { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.plan-info .op-chip { color: var(--text); font-size: 12px; }
.plan-info .net-label { font-size: 10.5px; }
.consent-note { color: var(--muted); font-size: 12px; line-height: 1.55; margin-top: 16px;
  max-width: 560px; margin-left: auto; margin-right: auto; }
.consent-note a { color: var(--accent); }
.plan-buy { display: flex; align-items: center; gap: 14px; }
.price-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.price { color: var(--accent); font-weight: 800; font-size: 17px; white-space: nowrap; }
.approx { color: var(--muted); font-size: 11px; white-space: nowrap; }
.langs { margin-top: 12px; letter-spacing: 1px; }
.langs a { color: var(--muted); margin: 0 3px; }
.langs a:hover { color: var(--text); }
.langs b { color: var(--accent); margin: 0 3px; }
.buy-btn {
  background: var(--bg3); border: 1px solid var(--line2); padding: 9px 14px;
  border-radius: 11px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.buy-btn:hover { border-color: var(--accent); color: var(--accent); }

/* web checkout */
.buy-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.buy-btn.primary { background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
  font-weight: 700; }
.buy-btn.primary:hover { background: var(--accent2); color: var(--on-accent); }
.buy-btn.primary[disabled] { opacity: .6; }
.tg-alt { color: var(--muted); font-size: 11.5px; }
.tg-alt:hover { color: var(--accent); }

.order-shell { max-width: 560px; margin: 34px auto 0; padding: 0 20px;
  display: flex; justify-content: center; }
.order-card-web { background: var(--bg2); border: 1px solid var(--line); border-radius: 20px;
  padding: 36px 30px; text-align: center; width: 100%; }
.order-card-web h1, .order-card-web h2, .order-card-web p { text-align: center; }
.order-card-web h1 { font-size: 25px; }
.pay-amount { display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin: 20px 0 8px; text-align: center; }
.pay-amount span { color: var(--muted); font-size: 13.5px; }
.pay-amount b { font-size: 34px; color: var(--accent); letter-spacing: -.5px; }
.qr-wrap { display: grid; place-items: center; margin: 18px 0 14px; }
.qr-wrap img { width: 230px; height: 230px; background: #fff; padding: 10px;
  border-radius: 16px; box-shadow: 0 10px 34px var(--shadow-soft); }
.addr-line { display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg3); border-radius: 12px; padding: 10px 12px; margin: 6px auto 0;
  max-width: 440px; }
.addr-line code { flex: 1; font-size: 12.5px; word-break: break-all; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-mini { background: var(--accent); color: var(--on-accent); border: none; font-weight: 700;
  padding: 7px 13px; border-radius: 9px; cursor: pointer; font-size: 12.5px; flex: 0 0 auto; }
.copy-mini:hover { background: var(--accent2); }
.net-note { margin: 16px auto 0; background: var(--accent-12); border: 1px solid var(--accent-26);
  padding: 10px 14px; border-radius: 12px; font-size: 13px; max-width: 440px;
  text-align: center; }
.wait-note { margin: 16px auto 0; color: var(--muted); background: var(--bg3);
  border-radius: 12px; padding: 12px; font-size: 14px; max-width: 440px;
  text-align: center; }
.install-hints { margin-top: 18px; color: var(--muted); font-size: 13px;
  text-align: center; }
.install-hints p { margin-top: 4px; text-align: center; }
.countdown { display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 16px auto 0; }
.countdown span { color: var(--muted); font-size: 12.5px; }
.countdown b { font-size: 30px; color: var(--accent); font-variant-numeric: tabular-nums;
  letter-spacing: 1px; }
.tx-details { margin: 20px auto 0; max-width: 440px; background: var(--bg3, #1b1f28);
  border-radius: 12px; padding: 6px 14px; text-align: left; }
.tx-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.tx-row:last-child { border-bottom: none; }
.tx-row > span:first-child { color: var(--muted); flex: 0 0 auto; }
.tx-row .mono, .tx-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; word-break: break-all; text-align: right; }
.tx-link { color: var(--accent); }
.order-card-web .cta-big { max-width: 440px; margin-left: auto; margin-right: auto; }
@media (min-width: 700px) { .order-shell { margin-top: 48px; }
  .order-card-web { padding: 44px 48px; } }

/* legal pages */
.legal { max-width: 760px; margin: 20px auto 0; padding: 0 20px; }
.legal h1 { font-size: clamp(24px, 4vw, 32px); margin: 8px 0; }
.legal h2 { font-size: 18px; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--text-soft); font-size: 15px; line-height: 1.65; }
.legal ul { margin: 8px 0 8px 20px; }
.legal li { margin-top: 6px; }
.legal a { color: var(--accent); }
.legal .muted { color: var(--muted); font-size: 13px; }
.legal-note { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; font-size: 13.5px; color: var(--muted); margin: 14px 0; }
.legal-summary { background: var(--accent-08); border: 1px solid var(--accent-26); border-radius: 12px;
  padding: 14px 16px; font-size: 15px; color: var(--text); margin: 14px 0; }
.fair-note { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--accent);
  text-decoration: none; }
.fair-note:hover { text-decoration: underline; }

/* contact page + chat */
.contact-wrap { max-width: 960px; margin: 16px auto 0; padding: 0 20px; }
.contact-wrap h1 { font-size: clamp(24px, 4vw, 32px); margin: 8px 0; }
.contact-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; margin-top: 18px; display: flex; flex-direction: column; gap: 10px;
  max-width: 640px; }
.contact-row { display: flex; gap: 10px; }
.contact-row input { flex: 1; min-width: 0; }
.contact-card input, .contact-card textarea {
  width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line2);
  background: var(--bg3, #1b1f28); color: var(--text); font-size: 15px; font-family: inherit; }
.contact-card input:focus, .contact-card textarea:focus {
  outline: none; border-color: var(--accent); }
.contact-card .cta-big { max-width: none; }
.done-check { font-size: 16px; font-weight: 600; color: var(--ok, #2ecc71); }
#done-ref { font-size: 13px; letter-spacing: .3px; }
.tg-alt-note { margin-top: 16px; font-size: 14px; }
.tg-alt-note a { color: var(--accent); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .contact-row { flex-direction: column; } }

/* footer */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 30px 20px 40px; text-align: center; color: var(--muted); font-size: 14px; }
footer a { color: var(--accent); }
.legal-links { margin-top: 12px; font-size: 13px; }
.legal-links a { margin: 0 2px; }
.fine { font-size: 12px; margin-top: 10px; }

/* honest FUP footnote on sales pages */
.fup-foot { margin-top: 14px; color: var(--muted); font-size: 13px; max-width: 720px;
  line-height: 1.55; }
.fup-foot a { color: var(--accent); }

/* partners / affiliate programme page */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 8px; }
.tier { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; display: flex; flex-direction: column; }
.tier.featured { border-color: var(--accent-40); background: linear-gradient(160deg,var(--accent-dark1),var(--bg2)); }
.tier-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.tier-badge { display: inline-block; background: var(--accent); color: var(--on-accent);
  font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 20px; }
.tier h3 { font-size: 21px; margin-top: 10px; }
.tier-for { color: var(--muted); font-size: 13px; }
.tier-desc { font-size: 14.5px; line-height: 1.6; margin-bottom: 14px; }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.tier-list li { position: relative; padding-left: 22px; font-size: 14px;
  color: var(--muted); line-height: 1.5; }
.tier-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent);
  font-weight: 800; }
.rules-list { list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin-top: 14px; max-width: 780px; }
.rules-list li { position: relative; padding-left: 24px; font-size: 14.5px;
  color: var(--muted); line-height: 1.6; }
.rules-list li::before { content: "•"; position: absolute; left: 6px; color: var(--accent);
  font-weight: 800; }
.join-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.join-cta .cta-big { display: inline-block; margin-top: 0; padding: 15px 28px; }
.cta-ghost { display: inline-block; padding: 15px 26px; border-radius: 16px;
  border: 1px solid var(--line2); font-weight: 700; font-size: 16px; color: var(--text); }
.cta-ghost:hover { border-color: var(--accent); }
.tier-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 780px; }
.cash-back { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700;
  color: var(--ok); background: #2ecc7118; border: 1px solid #2ecc7133;
  border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.cash-note { display: inline-block; margin: 2px 0 14px; font-size: 13.5px;
  color: var(--ok); font-weight: 600; }
.cash-note:hover, .cash-back:hover { border-color: var(--ok); }
.plan-buy .price-stack { align-items: flex-end; }

/* trust signals on sales pages */
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 760px; margin: 22px auto 0; }
.trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--muted); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 20px; padding: 8px 14px; text-align: left; }
a.trust-item:hover { border-color: var(--ok); color: var(--text); }

/* web order history (no Telegram) */
.wo-wrap { max-width: 760px; }
.wo-wrap h1 { font-size: clamp(24px,5vw,34px); margin-bottom: 6px; }
.wo-list { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.wo-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; transition: border-color .12s; }
.wo-row:hover { border-color: var(--accent); }
.wo-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* a top-up adds a plan to an existing eSIM — never a new SIM */
.wo-topup { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px;
  background: var(--accent); color: var(--on-accent); vertical-align: middle; }
.wo-sim { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.wo-row.is-topup { border-left: 3px solid var(--accent); }
/* activation + data consumption, mirroring the Mini App order list */
.wo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.wo-chip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  white-space: nowrap; }
.wo-chip.on { background: rgba(46,204,113,.14); color: #2ecc71; }
.wo-chip.off { background: var(--accent-15); color: var(--accent); }
.wo-chip.use { background: rgba(0,0,0,.06); color: var(--muted); }
.wo-chip.use.hot { background: var(--accent-15); color: var(--accent); }
.wo-main .muted { font-size: 12.5px; }
.wo-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.wo-price { color: var(--accent); font-weight: 700; white-space: nowrap; }
.wo-status { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  background: var(--line); color: var(--muted); white-space: nowrap; }
.wo-status.delivered { background: #2ecc7118; color: var(--ok); }
.wo-status.expired, .wo-status.cancelled { background: #e5484d18; color: #ef6b6f; }
.wo-key { background: var(--accent-08); border: 1px solid var(--accent-26);
  border-radius: var(--radius); padding: 16px 18px; margin: 18px 0; }
.wo-key h3 { font-size: 16px; margin-bottom: 8px; }
.wo-key code { display: block; font-size: 15px; word-break: break-all; color: var(--accent);
  background: var(--bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.wo-restore { background: var(--bg2); border-radius: var(--radius); padding: 18px; margin-top: 24px; }
.wo-restore h3 { font-size: 16px; margin-bottom: 4px; }
.wo-restore form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wo-restore input { flex: 1; min-width: 200px; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--line2); background: var(--bg); color: var(--text); font-size: 15px; }
.wo-restore input:focus { outline: none; border-color: var(--accent); }
.wo-restore button, .wo-forget button { background: var(--accent); color: var(--on-accent);
  border: none; font-weight: 700; padding: 12px 20px; border-radius: 11px; cursor: pointer; }
.wo-forget button { background: none; color: var(--muted); padding: 12px 0; font-weight: 500; }
.wo-forget button:hover { color: var(--text); }
.wo-err { color: #ef6b6f; font-size: 14px; margin-top: 10px; }
.wo-note { color: var(--ok); font-size: 14px; margin-top: 10px; }
.wo-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 26px; flex-wrap: wrap; }
.ord-hist { text-align: center; margin-top: 18px; }
.ord-hist a { color: var(--accent); font-weight: 600; font-size: 14.5px; }

/* guest / private-mode block on the payment page */
.guest-box { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; margin-top: 22px; max-width: 560px; margin-left: auto; margin-right: auto; }
.gk-head { font-size: 15px; font-weight: 700; }
.gk-body { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.gk-key { display: block; font-size: 15px; word-break: break-all; color: var(--accent);
  background: var(--bg); border-radius: 10px; padding: 12px 14px; margin: 12px 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.gk-warn { color: var(--muted); font-size: 12px; line-height: 1.5; }
.gk-sep { margin: 16px 0 10px; font-size: 13px; font-weight: 600; color: var(--text);
  border-top: 1px solid var(--line); padding-top: 14px; }
.gk-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.gk-opt { display: flex; flex-direction: column; gap: 3px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.gk-opt:hover { border-color: var(--accent); }
.gk-opt b { font-size: 14px; color: var(--accent); }
.gk-opt span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.acct-card { background: var(--bg2); border-radius: var(--radius); padding: 18px;
  margin-top: 16px; display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.acct-card input { padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line2);
  background: var(--bg); color: var(--text); font-size: 15px; }
.acct-card input:focus { outline: none; border-color: var(--accent); }
.acct-card button { background: var(--accent); color: var(--on-accent); border: none;
  font-weight: 700; padding: 13px; border-radius: 11px; cursor: pointer; font-size: 15px; }
.acct-alt { margin-top: 14px; font-size: 14px; }
.acct-alt a { color: var(--accent); font-weight: 600; }

/* auth: nav link, Google button */
.nav-auth { color: var(--accent) !important; font-weight: 600; }
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 420px; background: #fff; color: #1f1f1f; font-weight: 600;
  font-size: 15px; padding: 13px 18px; border-radius: 11px; margin-top: 16px;
  border: 1px solid #dadce0; }
.gbtn:hover { background: #f7f8f8; }
.or-sep { display: flex; align-items: center; gap: 12px; max-width: 420px;
  margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pay-cash-web { text-align: center; margin-top: 12px; font-size: 14px; font-weight: 700;
  color: var(--ok); }
.wo-topcount { font-size: 11px; font-weight: 700; color: var(--accent); }

/* review page — radio-based stars so it works without JavaScript */
.rv-wrap { max-width: 560px; }
.rv-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 26px; text-align: center; }
.rv-card h1 { font-size: clamp(21px, 4vw, 28px); }
.rv-sub { color: var(--muted); margin-top: 10px; }
.rv-plan { color: var(--muted); font-size: 13px; margin-top: 8px; }
.rv-big { font-size: 46px; margin-bottom: 6px; }
.rv-hint { color: var(--muted); font-size: 13px; margin-top: 2px; }
.rv-stars { display: inline-flex; flex-direction: row-reverse; justify-content: center;
  gap: 6px; margin: 20px 0 2px; }
.rv-stars input { display: none; }
.rv-stars label { font-size: 40px; line-height: 1; cursor: pointer; color: var(--line3);
  transition: color .12s, transform .12s; }
/* light up the hovered/checked star and every star before it */
.rv-stars label:hover, .rv-stars label:hover ~ label,
.rv-stars input:checked ~ label { color: var(--accent); }
.rv-stars label:hover { transform: scale(1.12); }
.rv-card textarea { width: 100%; margin-top: 18px; padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--line2); background: var(--bg); color: var(--text);
  font: inherit; font-size: 15px; outline: none; resize: vertical; }
.rv-card textarea:focus { border-color: var(--accent); }
.rv-card .cta-big { margin-top: 16px; }

/* partner image-logo brand block: logo on top, tagline beneath */
.wl-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-decoration: none; }
.wl-brand img { height: 30px; width: auto; display: block; }
.wl-brand small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; }


/* theme toggle */
.theme-toggle {
  background: var(--bg2); border: 1px solid var(--line2); color: var(--text);
  padding: 8px 12px; border-radius: 11px; font-size: 14px; cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); }

/* plan groups: unlimited/metered separation with quick-access chips */
.pg-chips { display: flex; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
.pg-chip {
  background: var(--bg2); border: 1px solid var(--line2); color: var(--text);
  padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600;
}
.pg-chip:hover { border-color: var(--accent); color: var(--accent); }
details.plan-group { margin-bottom: 14px; }
details.plan-group summary {
  cursor: pointer; user-select: none; list-style: none;
  font-size: 18px; font-weight: 700; padding: 12px 16px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
}
details.plan-group summary::-webkit-details-marker { display: none; }
details.plan-group summary::after { content: "▾"; float: right; color: var(--muted); }
details.plan-group:not([open]) summary::after { content: "▸"; }
details.plan-group[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pg-body { border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius); padding: 6px 14px 14px; }
.pg-body .prem-grid { margin-top: 8px; }

/* compact networks link + networks page */
.net-more { color: var(--accent); font-size: 13.5px; }
.net-more:hover { color: var(--accent2); }
.net-page .net-group { margin-top: 22px; }
.net-page .net-group h2 { font-size: 18px; margin-bottom: 10px; }
.net-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.net-chips .op-chip {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  padding: 6px 12px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px;
}

/* AI crawler info */
.llm-pre { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; font-size: 13.5px; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* mobile: two-line hero tagline; compact header that fits on one line */
@media (max-width: 640px) {
  .hero h1 .hl { display: block; }
  .topnav { padding: 10px 12px; gap: 6px; }
  .brand { font-size: 16px; white-space: nowrap; flex-shrink: 0; }
  .nav-links { gap: 8px; }
  .lang-dd summary, .theme-toggle {
    padding: 5px 8px; font-size: 12px; border-radius: 9px;
  }
  .nav-cta { padding: 6px 10px; font-size: 12.5px; border-radius: 9px; white-space: nowrap; }
}

/* Pay by Card (Paddle) on the web order page */
.pay-card-btn { display: block; width: 100%; margin: 14px 0 4px; cursor: pointer; border: 0; }
.or-sep-pay { text-align: center; font-size: 13px; margin: 8px 0 12px; }

/* featured-page headline: tagline part 2 on its own line */
.prem-h1 .hl { display: block; }

/* partners page: everything centered (operator request 2026-09-11) */
.partners-page { text-align: center; }
.partners-page .tier, .partners-page .step { text-align: center; }
.partners-page .tier-list { list-style-position: inside; padding-left: 0; }
.partners-page .steps { justify-content: center; }
.partners-page .tier-grid { justify-content: center; }

/* buttons inside .legal prose keep button text color (".legal a" made it invisible) */
.legal a.cta-big { color: var(--on-accent); }

/* premium hero coverage line (regions) */
.prem-cov { color: var(--muted); font-size: 14.5px; margin-top: 10px; }

/* accepted payment methods under the homepage hero */
.pay-strip { margin: 22px auto 0; max-width: 760px; text-align: center; }
.pay-h { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.pay-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 6px; }
/* badges stay light in dark mode so dark brand marks (Apple Pay) stay legible */
.pay-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff;
  color: #1b2330; border: 1px solid var(--line2); border-radius: 8px;
  padding: 5px 9px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pay-badge img { width: 24px; height: 16px; display: block; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 27, 46, .12); }
.pay-note { font-size: 12px; color: var(--muted); margin-top: 9px; }
.pay-credit { font-size: 10.5px; color: var(--muted); opacity: .75; margin-top: 4px; }
.pay-credit a { color: inherit; text-decoration: underline; }

/* order page: choose card or USDT before any QR code is shown */
.pay-total { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 10px 0 16px; }
.pay-choice { display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin: 0 auto; }
.pay-choice .pay-card-btn { margin: 0; }
.pay-card-btn small { display: block; font-size: 12px; font-weight: 600; opacity: .8; margin-top: 4px; }
.pay-usdt-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: 13px;
  padding: 14px 18px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.pay-usdt-btn:hover { border-color: var(--accent); }
.pay-usdt-btn img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 27, 46, .12); }
.pay-crypto-h { font-size: 22px; margin: 4px 0 8px; }
.pay-back { background: none; border: 0; color: var(--accent); font: inherit; font-size: 14px;
  cursor: pointer; margin-top: 14px; }

/* country flag in the order page plan line (image: flag emoji are blank on Windows) */
.order-flag { display: inline-block; width: 24px; height: 18px; vertical-align: -3px; margin-right: 7px;
  border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 27, 46, .15); }

/* partner promo bar under the header (website + blog, not the Mini App) */
.partner-bar { background: var(--accent-08); border-top: 1px solid var(--accent-26);
  border-bottom: 1px solid var(--accent-26); }
.partner-bar-in { max-width: var(--max); margin: 0 auto; padding: 10px 20px; display: flex;
  align-items: center; justify-content: center; gap: 4px 14px; flex-wrap: wrap; text-align: center; }
.partner-bar p { font-size: 14.5px; color: var(--text-soft); line-height: 1.45; }
.partner-bar p strong { color: var(--text); }
.partner-lock { color: var(--accent); vertical-align: -3px; margin-right: 8px; }
[dir="rtl"] .partner-lock { margin-right: 0; margin-left: 8px; }
.partner-cta { color: var(--accent); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.partner-cta:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .partner-bar-in { padding: 9px 16px; }
  .partner-bar p, .partner-cta { font-size: 13px; }
}

/* card checkout adds VAT on top — say so next to the card button */
.pay-vat-note { font-size: 12px; color: var(--muted); margin: -4px 0 2px; }