/* Shared visual system copied from the current homepage. Homepage design is not changed. */

:root {
  --blue: #0066ff;
  --blue-dark: #0047b8;
  --blue-soft: #eaf3ff;
  --yellow: #ffd500;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f7fbff;
  --white: #fff;
  --green: #10b981;
  --shadow: 0 20px 50px rgba(15, 23, 42, .10);
  --radius: 22px;
  --container: 1120px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.container {
  width: min(var(--container), 92%);
  margin-inline: auto;
}

.topbar {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, .8);
  transition: box-shadow .25s ease, background .25s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
}

.nav {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -.03em;
  font-size: 20px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--blue);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 8px 24px rgba(0, 102, 255, .28);
}

.menu {
  display: flex;
  align-items: center;
  gap: 24px;
  color: #334155;
  font-weight: 750;
  font-size: 14px;
}

.menu a:not(.nav-cta) {
  position: relative;
  padding: 10px 2px;
}

.menu a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.menu a:not(.nav-cta):hover::after,
.menu a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
}

.nav-cta {
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: 0 10px 24px rgba(0, 102, 255, .18);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 5px 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.section-pad { padding: 88px 0; }

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 78px;
  padding-bottom: 64px;
  background:
    radial-gradient(circle at 85% 15%, rgba(0,102,255,.18), transparent 28%),
    radial-gradient(circle at 10% 70%, rgba(255,213,0,.18), transparent 23%),
    linear-gradient(180deg, #fff 0%, #f3f8ff 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 48px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: #fff;
  border: 1px solid #d7e7ff;
  border-radius: 999px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

h1, h2, h3 { text-wrap: balance; }

h1 {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.055em;
  margin: 18px 0;
}

h1 span { color: var(--blue); }

.hero-copy > p {
  font-size: 18px;
  color: #475569;
  max-width: 620px;
  margin: 0 0 28px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 102, 255, .22);
}

.btn-primary:hover { box-shadow: 0 16px 30px rgba(0, 102, 255, .28); }

.btn-secondary {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

.hero-note {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 25px;
  color: #475569;
  font-size: 14px;
}

.hero-note span { display: flex; align-items: center; gap: 7px; }

.check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dff8e9;
  color: #0a8f49;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.visual {
  position: relative;
  isolation: isolate;
  min-height: 430px;
  border-radius: 34px;
  padding: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, var(--blue) 0%, var(--blue-dark) 100%);
}

.visual::before,
.visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  z-index: -1;
}

.visual::before { width: 290px; height: 290px; right: -110px; top: -80px; }
.visual::after { width: 180px; height: 180px; left: -90px; bottom: -70px; }

.visual-ring {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  pointer-events: none;
}

.ring-one { width: 350px; height: 350px; }
.ring-two { width: 255px; height: 255px; }

.router {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  width: min(300px, 76%);
  height: 155px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff, #dfeaff);
  box-shadow: 0 28px 50px rgba(0,0,0,.20);
}

.router::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 17px;
  height: 9px;
  background: linear-gradient(90deg, #0066ff 12%, #63a0ff 12% 18%, #0066ff 18% 42%, #63a0ff 42% 48%, #0066ff 48% 70%, #63a0ff 70% 76%, #0066ff 76%);
  border-radius: 10px;
}

.router-top {
  position: absolute;
  left: 50%;
  top: 29px;
  transform: translateX(-50%);
  width: 92px;
  height: 46px;
  border-radius: 18px;
  background: #d9e7ff;
}

.signal {
  position: absolute;
  left: 50%;
  top: 41px;
  transform: translateX(-50%);
  width: 38px;
  height: 24px;
  border: 4px solid #0066ff;
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
}

.signal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0066ff;
}

.visual-label {
  position: absolute;
  top: 28px;
  left: 28px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

.speed-card {
  position: absolute;
  right: 26px;
  bottom: 24px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 14px 16px;
  min-width: 150px;
}

.speed-card strong { display: block; font-size: 26px; line-height: 1; }
.speed-card small { opacity: .82; }

.section-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 42px;
}

.eyebrow {
  color: var(--blue);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .13em;
}

.eyebrow.light { color: #dbeafe; }

h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 10px 0 12px;
}

.section-head p {
  color: var(--muted);
  margin: 0;
  font-size: 16px;
}

.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.package {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  position: relative;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.package:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(15,23,42,.10);
}

.package.featured {
  border: 2px solid var(--blue);
  box-shadow: 0 18px 40px rgba(0,102,255,.14);
  transform: translateY(-8px);
}

.package.featured:hover { transform: translateY(-12px); }

.tag {
  position: absolute;
  right: 18px;
  top: 18px;
  background: var(--yellow);
  color: #111827;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
}

.package h3 { margin: 0 0 8px; font-size: 21px; }

.speed {
  font-size: 48px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.05em;
  color: var(--blue);
}

.speed small {
  font-size: 17px;
  color: var(--muted);
  letter-spacing: 0;
}

.price { margin: 18px 0 20px; }
.price .old { text-decoration: line-through; color: #94a3b8; font-size: 13px; }
.price strong { display: block; font-size: 29px; letter-spacing: -.03em; }
.price span { font-size: 13px; color: var(--muted); }

.features {
  padding: 0;
  margin: 0 0 22px;
  list-style: none;
  display: grid;
  gap: 10px;
  color: #475569;
  font-size: 14px;
}

.features li { display: flex; gap: 9px; align-items: flex-start; }

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6f1ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  flex: none;
}

.package-btn { width: 100%; }

.small-note {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  margin-top: 14px;
}

.why { background: #fff; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.why-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}

.icon {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 21px;
  margin-bottom: 16px;
}

.why-card h3 { margin: 0 0 7px; font-size: 17px; }
.why-card p { margin: 0; color: var(--muted); font-size: 14px; }

.coverage {
  background: linear-gradient(135deg, #0b1220, #18273e);
  color: #fff;
  border-radius: 28px;
  padding: 46px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  box-shadow: var(--shadow);
}

.coverage p { color: #cbd5e1; max-width: 680px; margin: 0; }
.coverage h2 { margin-top: 8px; }

.coverage-btn {
  background: #fff;
  color: var(--blue);
  box-shadow: none;
}

.faq {
  display: grid;
  gap: 12px;
  max-width: 850px;
  margin: auto;
}

details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

details[open] {
  border-color: #bfd8ff;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

summary { cursor: pointer; font-weight: 850; }
details p { color: var(--muted); margin: 12px 0 0; }

.cta {
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.18), transparent 25%),
    linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
}

.cta-inner {
  text-align: center;
  max-width: 760px;
  margin: auto;
}

.cta p { color: #dbeafe; font-size: 17px; }

.btn-cta {
  background: var(--yellow);
  color: #111827;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

.selected-package {
  min-height: 22px;
  margin-top: 12px;
  font-size: 14px;
  color: #e0ecff;
}

footer {
  background: #08101f;
  color: #94a3b8;
  padding: 28px 0;
  font-size: 13px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-brand { color: #fff; font-weight: 900; }

.floating-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 13px 18px;
  font-weight: 900;
  box-shadow: 0 15px 35px rgba(16,185,129,.30);
  transition: transform .2s ease;
}

.floating-wa:hover { transform: translateY(-3px); }

.back-top {
  position: fixed;
  right: 18px;
  bottom: 82px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 25px rgba(15,23,42,.10);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  cursor: pointer;
}

.back-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Entrance animation */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keyboard focus */
:focus-visible {
  outline: 3px solid rgba(0, 102, 255, .28);
  outline-offset: 3px;
}


/* Coverage form modal */
.coverage-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 23, .62);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.coverage-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.coverage-dialog {
  width: min(620px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(2, 8, 23, .28);
  transform: translateY(18px) scale(.98);
  transition: transform .25s ease;
}
.coverage-modal.open .coverage-dialog {
  transform: translateY(0) scale(1);
}
.coverage-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 26px 8px;
}
.coverage-dialog-header h2 {
  font-size: clamp(28px, 5vw, 38px);
  margin: 5px 0 8px;
}
.coverage-dialog-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.coverage-close {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.coverage-form {
  padding: 18px 26px 26px;
}
.coverage-field {
  display: grid;
  gap: 7px;
  margin-bottom: 17px;
}
.coverage-field label {
  font-size: 14px;
  font-weight: 850;
}
.coverage-field select,
.coverage-field input,
.coverage-field textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 13px;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.coverage-field textarea {
  min-height: 108px;
  resize: vertical;
}
.coverage-field select:focus,
.coverage-field input:focus,
.coverage-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,102,255,.10);
}
.coverage-help {
  color: #64748b;
  font-size: 12px;
  margin-top: -5px;
}
.coverage-submit {
  width: 100%;
  border: 0;
  margin-top: 4px;
}
.coverage-result {
  display: none;
  margin-top: 16px;
  padding: 15px;
  border-radius: 14px;
  background: #eff6ff;
  color: #164e63;
  font-size: 14px;
}
.coverage-result.show { display: block; }
@media (max-width: 560px) {
  .coverage-modal { padding: 10px; }
  .coverage-dialog { border-radius: 20px; }
  .coverage-dialog-header,
  .coverage-form { padding-left: 18px; padding-right: 18px; }
}


.map-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.map-location-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 11px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.map-toolbar span {
  color: #64748b;
  font-size: 12px;
}
.map-wrap {
  position: relative;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  font-size: 32px;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.25));
  pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
  .menu-toggle { display: block; }

  .menu {
    position: fixed;
    inset: 74px 0 auto 0;
    display: grid;
    gap: 2px;
    padding: 12px 4%;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(15,23,42,.08);
    transform: translateY(-130%);
    transition: transform .25s ease;
  }

  .menu.open { transform: translateY(0); }

  .menu a { padding: 13px 0 !important; }

  .menu .nav-cta {
    text-align: center;
    margin-top: 8px;
  }

  .hero-grid { grid-template-columns: 1fr; }
  .visual { min-height: 360px; }
  .packages { grid-template-columns: 1fr; }
  .package.featured,
  .package.featured:hover { transform: none; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .coverage { grid-template-columns: 1fr; padding: 34px; }
}

@media (max-width: 560px) {
  .topbar { font-size: 12px; }
  .nav { min-height: 65px; }
  .menu { top: 65px; }
  .hero { padding-top: 55px; padding-bottom: 55px; }
  .section-pad { padding: 64px 0; }
  .why-grid { grid-template-columns: 1fr; }
  h1 { font-size: 45px; }
  .visual { min-height: 320px; border-radius: 26px; }
  .router { height: 125px; }
  .floating-wa { left: 15px; right: 15px; justify-content: center; }
  .back-top { bottom: 78px; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
}

.package-selection-copy#paket-a .section-head {
  margin-bottom: 36px;
}

.package-only-title {
  margin: 14px 0 0 !important;
  color: var(--blue) !important;
  font-size: clamp(20px, 2.4vw, 30px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.package-selection-copy {
  padding-top: 68px;
  padding-bottom: 68px;
}

.package-selection-copy .section-head {
  margin-bottom: 34px;
}

.package-selection-copy .package-only-title {
  margin-bottom: 0 !important;
}

@media (max-width: 560px) {
  .package-selection-copy {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .package-selection-copy .section-head {
    margin-bottom: 28px;
  }
}

.local-seo { background: #fff; }
.area-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.area-card { padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.area-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.10); border-color:#b9d4ff; }
.area-card strong { display:block; font-size:17px; }
.area-card span { display:block; margin-top:5px; color:var(--muted); font-size:13px; }
@media (max-width: 900px) { .area-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px) { .area-grid { grid-template-columns:1fr; } }


.footer-disclaimer { margin-top:10px; color:#94a3b8; font-size:12px; line-height:1.5; }


.local-target-note { margin: 14px 0 0; padding: 12px 14px; border:1px solid #dbeafe; border-radius:14px; background:#eff6ff; color:#334155; font-size:13px; }
.local-target-note strong { color:var(--blue-dark); }


/* =========================
   CONVERSION OPTIMIZATION
   ========================= */
.conversion-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.conversion-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  background: rgba(255,255,255,.82);
  border-radius: 12px;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}
.conversion-trust-item b {
  color: #0a8f49;
  font-size: 14px;
}
.package-btn {
  min-height: 54px;
}
.package-btn .btn-arrow {
  margin-left: 7px;
  transition: transform .2s ease;
}
.package-btn:hover .btn-arrow { transform: translateX(3px); }

.package-conversion-note {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #f0f7ff;
  color: #335b8f;
  font-size: 12px;
  line-height: 1.45;
}

.form-progress {
  display: flex;
  gap: 7px;
  margin: 0 0 18px;
}
.form-progress span {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #e2e8f0;
}
.form-progress span.active { background: var(--blue); }

.coverage-selected-package {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  margin: 0 0 17px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #164e63;
  font-size: 13px;
}
.coverage-selected-package strong { color: var(--blue-dark); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 15px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}
.consent input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--blue);
}
.conversion-success {
  margin-top: 16px;
  padding: 15px;
  border-radius: 14px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 13px;
}
.conversion-success a {
  display: inline-flex;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #16a34a;
  color: white;
  font-weight: 850;
}

.mobile-conversion-bar {
  display: none;
}
@media (max-width: 700px) {
  .conversion-trust { grid-template-columns: 1fr; }
  .conversion-trust-item { justify-content: center; }
  body { padding-bottom: 74px; }
  .mobile-conversion-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 180;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 8px;
    padding: 8px;
    background: rgba(255,255,255,.96);
    border: 1px solid #dbeafe;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(15,23,42,.18);
    backdrop-filter: blur(12px);
  }
  .mobile-conversion-bar a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 900;
  }
  .mobile-conversion-bar .mobile-check {
    background: var(--blue);
    color: white;
  }
  .mobile-conversion-bar .mobile-wa {
    background: #10b981;
    color: white;
  }
}


/* =========================
   PROFESSIONAL HEADER
   ========================= */
.site-header .nav {
  min-height: 76px;
  gap: 22px;
}
.brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand img {
  width: 236px;
  height: auto;
  display: block;
}
.header-provider {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #f8fbff;
  color: #355276;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.header-provider strong { color: #0b72e7; }
.header-cta {
  min-height: 44px !important;
  padding: 0 17px !important;
  white-space: nowrap;
}
@media (max-width: 920px) {
  .header-provider { display: none; }
  .brand img { width: 210px; }
}
@media (max-width: 700px) {
  .site-header .nav {
    min-height: 64px;
    gap: 10px;
  }
  .brand img { width: 190px; }
  .header-cta { padding: 0 12px !important; font-size: 12px !important; }
}


/* ===== HEADER PAKET EDITABLE =====
   Ubah teks .paket-title dan .paket-subtitle langsung di HTML.
*/
.package .paket-header{
  position:relative;
  margin:-1px -1px 18px;
  padding:20px 20px 18px;
  color:#fff;
  border-radius:16px 16px 0 0;
  background:linear-gradient(135deg,#0b72e7 0%,#1558c7 100%);
  overflow:hidden;
}
.package .paket-header::after{
  content:"";
  position:absolute;
  width:120px;height:120px;
  right:-45px;top:-55px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
}
.package .paket-icon{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:9px;
  border-radius:12px;
  background:rgba(255,255,255,.16);
  font-size:19px;font-weight:900;
}
.package .paket-title{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.2px;
}
.package .paket-subtitle{
  margin:7px 0 0;
  color:rgba(255,255,255,.93);
  font-size:13px;
  line-height:1.4;
  font-weight:650;
}
.package.featured .paket-header{
  background:linear-gradient(135deg,#0b72e7 0%,#174bc0 100%);
}
.package .paket-popular{
  position:absolute;
  z-index:2;
  top:12px;right:12px;
  padding:6px 9px;
  border-radius:999px;
  background:#facc15;
  color:#172033;
  font-size:10px;
  font-weight:950;
}
@media(max-width:700px){
  .package .paket-header{padding:17px 16px 15px}
  .package .paket-title{font-size:18px}
  .package .paket-subtitle{font-size:12px}
}


/* =========================
   PREMIUM FEATURE STRIP
   EDIT ICON: ganti src pada .package-benefit__icon img
   EDIT TEKS: ubah .package-benefit__title dan .package-benefit__text di HTML
   ========================= */
.package-benefits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 auto 42px;
  padding: 22px;
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,251,255,.96));
  box-shadow: 0 20px 55px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
  overflow: hidden;
}
.package-benefits::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -120px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,215,160,.14), transparent 68%);
  pointer-events: none;
}
.package-benefit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 28px rgba(15,23,42,.05);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.package-benefit:hover {
  transform: translateY(-5px);
  border-color: rgba(11,114,231,.18);
  box-shadow: 0 18px 38px rgba(15,23,42,.10);
}
.package-benefit__icon {
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #eff8ff, #ecfff8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 25px rgba(11,114,231,.08);
}
.package-benefit__icon img {
  width: 76px;
  height: 76px;
  display: block;
  object-fit: contain;
  transition: transform .3s ease;
}
.package-benefit:hover .package-benefit__icon img { transform: scale(1.06) translateY(-2px); }
.package-benefit__copy { min-width: 0; }
.package-benefit__title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.02em;
}
.package-benefit__text {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
}
.package-benefit__accent {
  width: 34px;
  height: 4px;
  margin-top: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b72e7, #20d7a0);
}
.package-selection-copy .section-head { position: relative; }
.package-selection-copy .eyebrow {
  letter-spacing: .12em;
  font-weight: 900;
}
@media (max-width: 900px) {
  .package-benefits { grid-template-columns: 1fr; gap: 12px; padding: 16px; border-radius: 24px; }
  .package-benefit { padding: 15px; }
  .package-benefit__icon { flex-basis: 72px; width: 72px; height: 72px; border-radius: 18px; }
  .package-benefit__icon img { width: 64px; height: 64px; }
}
@media (max-width: 560px) {
  .package-benefits { margin-bottom: 30px; padding: 10px; border-radius: 20px; }
  .package-benefit { gap: 13px; padding: 13px; border-radius: 17px; }
  .package-benefit__icon { flex-basis: 62px; width: 62px; height: 62px; border-radius: 16px; }
  .package-benefit__icon img { width: 55px; height: 55px; }
  .package-benefit__text { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .package-benefit, .package-benefit__icon img { transition: none; }
}

/* =========================================================
   PREMIUM SALES UI — clean / smooth / responsive / HD
   ========================================================= */
:root{
  --premium-blue:#0b72e7;
  --premium-blue-2:#1647d8;
  --premium-cyan:#20d7a0;
  --premium-navy:#0b1834;
  --premium-border:rgba(15,23,42,.08);
  --premium-glass:rgba(255,255,255,.78);
}

body{
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(11,114,231,.09), transparent 65%),
    radial-gradient(700px 450px at -10% 18%, rgba(32,215,160,.06), transparent 62%),
    #f7faff;
}

.topbar{
  background:linear-gradient(90deg,#08152e,#0d2b5f 48%,#08152e);
  letter-spacing:.01em;
}

.site-header{
  background:rgba(255,255,255,.88);
  border-bottom-color:rgba(148,163,184,.16);
}

.nav{
  min-height:76px;
}

.brand-mark{
  background:linear-gradient(145deg,#0b72e7,#1647d8);
  box-shadow:0 10px 28px rgba(11,114,231,.24);
}

.nav-cta,.header-cta{
  background:linear-gradient(135deg,#0b72e7,#1647d8)!important;
  box-shadow:0 12px 28px rgba(11,114,231,.22)!important;
}

.hero{
  padding-top:76px;
  padding-bottom:72px;
  background:
    radial-gradient(520px 320px at 92% 8%, rgba(11,114,231,.17), transparent 68%),
    radial-gradient(480px 280px at 6% 80%, rgba(32,215,160,.10), transparent 70%),
    linear-gradient(180deg,#fff 0%,#f3f8ff 100%);
}

.hero-copy h1{
  max-width:760px;
}

.hero-copy > p{
  font-size:18px;
  line-height:1.7;
}

.badge{
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.btn{
  min-height:48px;
  border-radius:14px;
  font-weight:900;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:linear-gradient(135deg,#0b72e7,#1647d8);
  box-shadow:0 14px 30px rgba(11,114,231,.22);
}

.btn-secondary{
  background:rgba(255,255,255,.9);
  border-color:#cfe0fb;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.conversion-trust-item{
  border-radius:14px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}

/* Feature strip: premium, centered, directly above package cards */
.package-selection-copy{
  position:relative;
  padding-top:88px;
  padding-bottom:88px;
  background:linear-gradient(180deg,#f7faff 0%,#fff 48%,#f8fbff 100%);
}

.package-selection-copy::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.7),transparent 30%);
}

.package-selection-copy > .container{
  position:relative;
  z-index:1;
}

.package-selection-copy > .container > .section-head:first-child{
  margin-bottom:34px;
}

.package-selection-copy > .container > .section-head:first-child h2{
  font-size:clamp(36px,4.8vw,58px);
  color:var(--premium-navy);
}

.package-selection-copy > .container > .section-head:first-child p.package-only-title{
  color:#51627d!important;
  text-transform:none;
  font-size:16px!important;
  font-weight:650!important;
  margin-top:12px!important;
}

.package-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:0 auto 48px;
  padding:18px;
  border:1px solid rgba(11,114,231,.10);
  border-radius:30px;
  background:rgba(255,255,255,.72);
  box-shadow:0 24px 70px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
}

.package-benefits::before{
  width:360px;
  height:360px;
  right:-150px;
  top:-200px;
  background:radial-gradient(circle,rgba(32,215,160,.16),transparent 67%);
}

.package-benefit{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:0;
  min-height:265px;
  padding:26px 22px 24px;
  border:1px solid rgba(15,23,42,.06);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.94));
  box-shadow:0 12px 30px rgba(15,23,42,.05);
  overflow:hidden;
}

.package-benefit::after{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  top:-78px;
  right:-54px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(11,114,231,.11),transparent 68%);
  pointer-events:none;
}

.package-benefit:hover{
  transform:translateY(-7px);
  border-color:rgba(11,114,231,.20);
  box-shadow:0 22px 46px rgba(15,23,42,.10);
}

.package-benefit__icon{
  flex:0 0 auto;
  width:108px;
  height:108px;
  margin-bottom:18px;
  border-radius:30px;
  background:linear-gradient(145deg,#edf7ff,#ecfff8);
  border:1px solid rgba(11,114,231,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 30px rgba(11,114,231,.10);
}

.package-benefit__icon img{
  width:92px;
  height:92px;
}

.package-benefit__title{
  font-size:clamp(18px,2vw,22px);
  color:var(--premium-navy);
  letter-spacing:-.025em;
}

.package-benefit__text{
  max-width:290px;
  margin-top:8px;
  color:#60708a;
  font-size:13px;
  line-height:1.6;
  font-weight:600;
}

.package-benefit__accent{
  width:42px;
  height:4px;
  margin-top:auto;
  padding-top:0;
  background:linear-gradient(90deg,#0b72e7,#20d7a0);
}

/* Package section */
.package-selection-copy .section-head:not(:first-child){
  margin-bottom:30px;
}

.package-selection-copy .section-head:not(:first-child) .eyebrow{
  color:#0b72e7;
}

.packages{
  gap:22px;
  align-items:stretch;
}

.package{
  min-height:100%;
  padding:0 24px 24px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:26px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 45px rgba(15,23,42,.07);
  overflow:hidden;
}

.package:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 58px rgba(15,23,42,.12);
}

.package.featured{
  border:1px solid rgba(11,114,231,.45);
  box-shadow:0 28px 65px rgba(11,114,231,.18);
  transform:translateY(-10px);
}

.package.featured:hover{
  transform:translateY(-14px);
}

.package .paket-header{
  margin:0 -24px 22px;
  padding:22px 24px 20px;
  min-height:132px;
  border-radius:0;
  background:linear-gradient(135deg,#0b72e7,#1647d8);
}

.package:not(.featured) .paket-header{
  background:linear-gradient(135deg,#0e4fb5,#0b72e7);
}

.package.featured .paket-header{
  background:linear-gradient(135deg,#0b72e7 0%,#1647d8 55%,#20b98c 120%);
}

.package .paket-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.18);
}

.package .paket-title{
  font-size:19px;
}

.package .paket-subtitle{
  font-size:12px;
  opacity:.92;
}

.package .paket-popular{
  top:14px;
  right:14px;
  background:#20d7a0;
  color:#063b2d;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

.package .speed{
  color:var(--premium-navy);
  font-size:58px;
}

.package.featured .speed{
  color:#0b72e7;
}

.package .speed small{
  color:#60708a;
}

.price strong{
  color:var(--premium-navy);
  font-size:32px;
}

.package.featured .price strong{
  color:#0b72e7;
}

.features{
  min-height:106px;
  margin-bottom:22px;
}

.features li{
  color:#475569;
}

.dot{
  background:linear-gradient(135deg,#e8fff6,#eaf3ff);
  color:#08a977;
  border:1px solid rgba(32,215,160,.18);
}

.package-btn{
  min-height:52px;
  border-radius:15px;
}

.package.featured .package-btn{
  background:linear-gradient(135deg,#0b72e7,#1647d8);
  box-shadow:0 14px 30px rgba(11,114,231,.22);
}

.package-conversion-note{
  max-width:780px;
  margin:22px auto 0;
  padding:14px 18px;
  border:1px solid rgba(11,114,231,.10);
  border-radius:16px;
  background:#fff;
  color:#64748b;
  text-align:center;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}

.why-card,.area-card,details{
  border-radius:22px;
  box-shadow:0 10px 28px rgba(15,23,42,.045);
}

.coverage{
  border-radius:30px;
  background:
    radial-gradient(380px 240px at 85% 20%,rgba(32,215,160,.14),transparent 68%),
    linear-gradient(135deg,#08152e,#12366c 58%,#0b72e7);
  box-shadow:0 28px 65px rgba(8,21,46,.18);
}

.btn-cta{
  border-radius:15px;
  background:#20d7a0;
  color:#063b2d;
}

.floating-wa{
  background:linear-gradient(135deg,#11b77d,#079761);
  box-shadow:0 18px 40px rgba(16,185,129,.28);
}

.mobile-conversion-bar{
  box-shadow:0 -8px 30px rgba(15,23,42,.10);
}

/* Tablet */
@media (max-width:900px){
  .package-benefits{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    padding:12px;
  }
  .package-benefit{
    min-height:240px;
    padding:22px 12px 18px;
  }
  .package-benefit__icon{
    width:82px;height:82px;border-radius:22px;
  }
  .package-benefit__icon img{width:70px;height:70px}
  .package-benefit__text{font-size:12px}
}

/* Mobile: horizontal snap cards for the feature strip, then package cards */
@media (max-width:700px){
  .hero{padding-top:54px;padding-bottom:54px}
  .package-selection-copy{padding-top:62px;padding-bottom:64px}
  .package-selection-copy > .container > .section-head:first-child h2{font-size:36px}
  .package-benefits{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:10px;
    border-radius:24px;
    margin-bottom:36px;
  }
  .package-benefit{
    min-height:0;
    padding:20px 18px;
    display:grid;
    grid-template-columns:78px 1fr;
    align-items:center;
    gap:16px;
    text-align:left;
  }
  .package-benefit__icon{
    width:78px;height:78px;border-radius:20px;margin:0;
  }
  .package-benefit__icon img{width:68px;height:68px}
  .package-benefit__copy{display:block}
  .package-benefit__title{font-size:18px}
  .package-benefit__text{font-size:12px;max-width:none}
  .package-benefit__accent{margin-top:10px}
  .packages{gap:16px}
  .package,.package.featured{transform:none}
  .package:hover,.package.featured:hover{transform:none}
  .package .paket-header{margin-left:-24px;margin-right:-24px}
}

@media (max-width:480px){
  .topbar{font-size:11px;padding:7px 12px}
  .brand-mark{width:34px;height:34px;border-radius:10px;font-size:16px}
  .brand{font-size:17px}
  h1{font-size:42px}
  .hero-copy > p{font-size:16px}
  .package-selection-copy > .container > .section-head:first-child h2{font-size:32px}
  .package-benefit{grid-template-columns:68px 1fr;gap:13px;padding:17px 14px}
  .package-benefit__icon{width:68px;height:68px;border-radius:18px}
  .package-benefit__icon img{width:59px;height:59px}
  .package .speed{font-size:50px}
  .package{padding-left:20px;padding-right:20px}
  .package .paket-header{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
}

@media (prefers-reduced-motion:reduce){
  .package,.package-benefit,.btn,.floating-wa{transition:none!important}
}


/* ===== PREMIUM HD V3 ===== */
:root{
  --blue:#0757ff; --blue-2:#1b7cff; --blue-dark:#073a9a;
  --ink:#08152f; --muted:#66758f; --line:rgba(18,45,92,.10);
  --bg:#f5f9ff; --white:#fff; --green:#12c98b; --yellow:#ffd43b;
  --shadow-soft:0 14px 45px rgba(20,56,120,.10);
  --shadow-card:0 22px 65px rgba(18,53,120,.13);
  --radius:28px; --container:1180px;
}
body{background:radial-gradient(circle at 50% -10%,#e8f2ff 0,#f7fbff 34%,#f5f8fc 100%);}
.site-header{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(7,87,255,.08)!important;box-shadow:0 8px 35px rgba(11,42,94,.06);}
.nav{min-height:76px!important}.logo{font-weight:950!important;letter-spacing:-.045em}.logo-mark{box-shadow:0 8px 22px rgba(7,87,255,.25)!important}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 48%,#ffffff 100%);min-height:690px;display:flex;align-items:center}
.hero:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 78% 35%,rgba(34,123,255,.16),transparent 26%),radial-gradient(circle at 20% 15%,rgba(18,201,139,.08),transparent 22%);pointer-events:none}
.hero-grid{position:relative;z-index:1;gap:clamp(28px,5vw,76px)}
.hero-copy{max-width:650px}.badge{border:1px solid rgba(7,87,255,.12)!important;background:rgba(255,255,255,.76)!important;box-shadow:0 8px 30px rgba(7,87,255,.08);padding:9px 14px!important;border-radius:999px!important;font-weight:850}
.hero h1{font-size:clamp(42px,5.6vw,74px)!important;line-height:1.01!important;letter-spacing:-.055em!important;margin:20px 0 22px!important}.hero h1 span{background:linear-gradient(100deg,#0757ff,#17a0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{font-size:18px!important;max-width:610px;color:#4f607b!important}.local-target-note{font-size:13px!important;font-weight:800;letter-spacing:.02em;color:#6b7b93!important}
.hero-actions{margin-top:28px!important;gap:12px}.btn{min-height:52px!important;padding:0 22px!important;border-radius:16px!important;font-weight:900!important;transition:transform .25s ease,box-shadow .25s ease,background .25s ease!important}.btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(135deg,#0757ff,#1a7dff)!important;box-shadow:0 14px 30px rgba(7,87,255,.25)!important}.btn-secondary{background:#fff!important;border:1px solid rgba(7,87,255,.12)!important;box-shadow:0 10px 28px rgba(14,45,90,.08)!important}
.hero-note{display:flex!important;flex-wrap:wrap;gap:10px!important;margin-top:24px!important}.hero-note span{background:rgba(255,255,255,.72);border:1px solid rgba(20,60,120,.08);padding:9px 12px;border-radius:999px;font-size:13px;font-weight:800;color:#53637d}
.visual{min-height:430px!important;border-radius:40px!important;background:linear-gradient(145deg,#0b4bc4,#0877ff 55%,#1ccda0)!important;box-shadow:0 35px 80px rgba(7,76,180,.24)!important;overflow:hidden;border:1px solid rgba(255,255,255,.42)!important}
.visual:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 35%,transparent 70%,rgba(255,255,255,.08));pointer-events:none}
.visual-label{background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);border-radius:999px;padding:8px 12px!important}
.speed-card{background:rgba(255,255,255,.96)!important;border:1px solid rgba(255,255,255,.8);box-shadow:0 20px 45px rgba(0,25,90,.2)!important;border-radius:22px!important}
.section-pad{padding:92px 0!important}.section-head{max-width:760px!important}.eyebrow{letter-spacing:.16em!important;font-size:11px!important;font-weight:950!important;color:#0757ff!important}.section-head h2{font-size:clamp(32px,4vw,52px)!important;letter-spacing:-.045em!important;line-height:1.05!important}
.package-selection-copy{background:linear-gradient(180deg,#fff 0%,#f6faff 100%);position:relative}.package-selection-copy:before{content:"";position:absolute;top:0;left:50%;width:min(800px,70%);height:1px;background:linear-gradient(90deg,transparent,rgba(7,87,255,.18),transparent);transform:translateX(-50%)}
.package-benefits{gap:16px!important;margin:38px auto 68px!important}.package-benefit{position:relative!important;background:rgba(255,255,255,.86)!important;border:1px solid rgba(7,87,255,.10)!important;border-radius:24px!important;padding:24px!important;box-shadow:var(--shadow-soft)!important;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important}.package-benefit:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(7,87,255,.055),transparent 45%,rgba(18,201,139,.045));pointer-events:none}.package-benefit:hover{transform:translateY(-7px);box-shadow:0 25px 55px rgba(18,60,125,.15)!important;border-color:rgba(7,87,255,.20)!important}.package-benefit__icon{width:74px!important;height:74px!important;border-radius:20px!important;background:linear-gradient(145deg,#eaf3ff,#fff)!important;box-shadow:inset 0 0 0 1px rgba(7,87,255,.08),0 12px 24px rgba(7,87,255,.10)!important;padding:9px!important}.package-benefit__icon svg{width:100%;height:100%;filter:drop-shadow(0 7px 8px rgba(7,87,255,.12))}.package-benefit__title{font-size:20px!important;letter-spacing:-.025em}.package-benefit__text{font-size:14px!important;color:#6a7890!important}
.packages{gap:20px!important;align-items:stretch}.package{position:relative!important;background:rgba(255,255,255,.95)!important;border:1px solid rgba(12,49,110,.09)!important;border-radius:30px!important;padding:28px!important;box-shadow:var(--shadow-card)!important;transition:transform .3s ease,box-shadow .3s ease!important;overflow:hidden}.package:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(7,87,255,.045),transparent 28%)}.package:hover{transform:translateY(-8px);box-shadow:0 30px 75px rgba(16,55,120,.18)!important}.package.featured{border:2px solid rgba(7,87,255,.7)!important;transform:translateY(-12px);box-shadow:0 34px 85px rgba(7,87,255,.20)!important}.package.featured:hover{transform:translateY(-17px)}
.paket-header{min-height:126px!important}.paket-icon{width:54px!important;height:54px!important;border-radius:18px!important;background:linear-gradient(135deg,#0757ff,#18a5ff)!important;color:#fff!important;display:grid;place-items:center;font-size:24px!important;box-shadow:0 12px 25px rgba(7,87,255,.24)!important}.featured .paket-icon{background:linear-gradient(135deg,#0a4bd8,#17c99b)!important}.paket-popular{background:#08152f!important;color:#fff!important;border-radius:999px!important;padding:6px 10px!important;font-size:10px!important;box-shadow:0 8px 18px rgba(8,21,47,.18)}.paket-title{font-size:15px!important;letter-spacing:.08em!important}.paket-subtitle{color:#7a889d!important;font-size:13px!important}.speed{font-size:58px!important;letter-spacing:-.055em!important}.speed small{font-size:17px!important;letter-spacing:0}.price strong{font-size:31px!important;letter-spacing:-.04em}.features{min-height:128px}.features li{font-size:14px!important}.dot{background:#eaf8f2!important;color:#08a877!important}.package-btn{width:100%;justify-content:center;margin-top:12px}
.small-note{text-align:center!important;margin-top:26px!important;color:#74829a!important;font-size:12px!important}
.why{background:#08152f!important;color:#fff!important;position:relative;overflow:hidden}.why:before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(16,112,255,.35),transparent 65%);top:-380px;right:-220px}.why .section-head p,.why .muted{color:#a9b7cd!important}.why-grid{gap:16px!important}.why-card{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.10)!important;backdrop-filter:blur(14px);border-radius:24px!important;transition:transform .25s ease,background .25s ease!important}.why-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.10)!important}
#coverage{background:linear-gradient(180deg,#f6faff,#eef6ff)}.coverage{border-radius:32px!important;border:1px solid rgba(7,87,255,.10)!important;box-shadow:var(--shadow-card)!important;background:#fff!important}.coverage h2{font-size:clamp(30px,4vw,48px)!important;letter-spacing:-.04em}
.local-seo,.faq{background:#fff}.faq details{border:1px solid rgba(12,49,110,.09)!important;border-radius:18px!important;margin-bottom:10px;box-shadow:0 8px 22px rgba(18,45,90,.05)}
.cta{background:linear-gradient(135deg,#0757ff,#063d9d)!important;color:#fff!important}.cta .btn-secondary{background:#fff!important}
.mobile-check{box-shadow:0 12px 30px rgba(7,87,255,.28)!important;border-radius:999px!important}
@media(max-width:900px){.hero{min-height:auto;padding-top:56px!important}.hero-grid{grid-template-columns:1fr!important}.visual{min-height:360px!important}.package-benefits{grid-template-columns:1fr!important}.packages{grid-template-columns:1fr!important}.package.featured{transform:none}.package.featured:hover{transform:translateY(-8px)}}
@media(max-width:560px){.section-pad{padding:68px 0!important}.container{width:min(94%,560px)}.hero h1{font-size:43px!important}.hero-copy>p{font-size:16px!important}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%;justify-content:center}.visual{min-height:300px!important;border-radius:28px!important}.speed-card{right:16px!important;bottom:16px!important}.package{padding:22px!important;border-radius:24px!important}.speed{font-size:52px!important}.package-benefit{padding:20px!important}.package-benefit__icon{width:64px!important;height:64px!important}.why-grid{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* =========================
   PREMIUM V6 — READABILITY + PROPORTION + DENSITY
   ========================= */
.package-selection-copy{
  padding-top:46px !important;
  padding-bottom:46px !important;
}
#paket-a{
  padding-top:52px !important;
  padding-bottom:34px !important;
}
#paket-a > .container > .section-head{
  margin-bottom:24px !important;
  text-align:center;
  max-width:900px !important;
  margin-left:auto;
  margin-right:auto;
}
#paket-a > .container > .section-head .eyebrow{
  color:#0757ff !important;
  font-size:13px !important;
  line-height:1.2 !important;
  letter-spacing:.14em !important;
  margin-bottom:8px !important;
}
#paket-a > .container > .section-head h2{
  font-size:clamp(30px,4vw,44px) !important;
  line-height:1.08 !important;
  letter-spacing:-.04em !important;
  margin:0 0 8px !important;
  color:#092554 !important;
}
#paket-a > .container > .section-head .package-only-title{
  color:#2f4669 !important;
  font-size:clamp(16px,2vw,20px) !important;
  line-height:1.45 !important;
  font-weight:650 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  margin:0 !important;
}
#paket-a .package-benefits{
  margin:24px auto 34px !important;
  gap:14px !important;
}
#paket-a .package-benefit{
  min-height:220px !important;
  padding:20px 20px 18px !important;
  border-radius:22px !important;
}
#paket-a .package-benefit__icon{
  width:82px !important;
  height:82px !important;
  border-radius:22px !important;
  margin-bottom:12px !important;
}
#paket-a .package-benefit__title{
  font-size:19px !important;
  line-height:1.15 !important;
  margin-bottom:7px !important;
}
#paket-a .package-benefit__text{
  font-size:13px !important;
  line-height:1.55 !important;
  color:#536783 !important;
}
#paket-a .section-head:has(.eyebrow:first-child){
  /* keep the package heading visually distinct from the benefit strip */
}
#paket-a .packages{
  gap:16px !important;
}
#paket-a .section-head:nth-of-type(2){
  margin-top:4px !important;
  margin-bottom:22px !important;
}
#paket-a .section-head:nth-of-type(2) .eyebrow{
  color:#0a8f49 !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  margin-bottom:7px !important;
}
#paket-a .section-head:nth-of-type(2) h2{
  font-size:clamp(27px,3.2vw,38px) !important;
  line-height:1.1 !important;
  margin:0 0 7px !important;
  color:#0a2352 !important;
}
#paket-a .section-head:nth-of-type(2) .package-only-title{
  font-size:clamp(16px,1.8vw,19px) !important;
  line-height:1.35 !important;
  color:#0a8f49 !important;
  font-weight:800 !important;
  text-transform:none !important;
  margin:0 !important;
}
#paket-a .package-subnote{
  color:#64748b !important;
  font-size:14px !important;
  margin:7px 0 0 !important;
}
#paket-b,#paket-c{
  padding-top:34px !important;
  padding-bottom:34px !important;
}
#paket-b .section-head,#paket-c .section-head{
  margin-bottom:20px !important;
}
#paket-b .packages,#paket-c .packages{
  gap:16px !important;
}
#paket-b .small-note,#paket-c .small-note{
  margin-top:16px !important;
}
.package-help-line{
  margin:18px auto 0 !important;
  max-width:920px !important;
  padding:13px 18px !important;
  border:1px solid #dce7f5 !important;
  border-radius:14px !important;
  background:#f7faff !important;
  color:#526681 !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.5 !important;
}
.package-help-line a{
  color:#0757ff !important;
  font-weight:850 !important;
  text-decoration:none !important;
}
.package-help-line a:hover{text-decoration:underline !important}

/* Cek jaringan: stronger contrast and clearer CTA */
#coverage .coverage{
  background:linear-gradient(135deg,#061b3d 0%,#0b4fa8 58%,#0878d9 100%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
#coverage .coverage .eyebrow.light{
  color:#b8ffe8 !important;
  font-weight:950 !important;
  letter-spacing:.14em !important;
}
#coverage .coverage h2{
  color:#ffffff !important;
  font-size:clamp(28px,3.4vw,42px) !important;
  line-height:1.08 !important;
  text-shadow:0 2px 18px rgba(0,0,0,.18) !important;
}
#coverage .coverage p{
  color:#f1f7ff !important;
  font-size:16px !important;
  line-height:1.6 !important;
}
#coverage .coverage-btn{
  background:#20d7a0 !important;
  color:#052f25 !important;
  font-weight:900 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18) !important;
}

/* Final CTA: make the small heading readable without competing with the main CTA */
#pesan .eyebrow.light{
  display:inline-flex !important;
  align-items:center;
  padding:7px 12px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#baffdf !important;
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
}
#pesan h2{color:#ffffff !important}
#pesan p{color:#edf6ff !important}

@media(max-width:760px){
  .package-selection-copy{padding-top:38px !important;padding-bottom:38px !important}
  #paket-a{padding-top:42px !important;padding-bottom:28px !important}
  #paket-a .package-benefits{margin:20px auto 28px !important}
  #paket-a .package-benefit{min-height:0 !important;padding:18px !important}
  #paket-b,#paket-c{padding-top:28px !important;padding-bottom:28px !important}
  #paket-a .section-head:nth-of-type(2) h2{font-size:28px !important}
  .package-help-line{font-size:13px !important;padding:12px 14px !important;margin-top:14px !important}
}


/* Typography refinement — clean, proportionate, readable */
:root{
  --font-ui:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body{font-family:var(--font-ui);font-weight:400;line-height:1.62;letter-spacing:-.008em;}
h1,h2,h3,h4,strong,.brand,.menu,.btn,.nav-cta,.package h3,.price strong{font-family:var(--font-ui);}
h1{font-size:clamp(38px,5.1vw,64px);line-height:1.055;letter-spacing:-.045em;font-weight:800;}
h2{font-size:clamp(30px,3.7vw,46px);line-height:1.12;letter-spacing:-.035em;font-weight:800;}
h3{line-height:1.25;letter-spacing:-.02em;font-weight:700;}
.hero-copy>p{font-size:clamp(16px,1.45vw,18px);line-height:1.7;font-weight:400;letter-spacing:-.006em;}
.brand{font-weight:800;letter-spacing:-.025em;}
.menu{font-weight:600;}
.btn,.nav-cta{font-weight:700;letter-spacing:-.01em;}
.package h3{font-weight:700;}
.price strong{font-weight:800;}
.section-head p,.why-card p,.package p,.faq-item p,.trust-copy,.about-copy{line-height:1.68;}
.topbar{font-weight:500;letter-spacing:0;}
@media (max-width:760px){
  h1{font-size:clamp(34px,9.5vw,48px);line-height:1.08;letter-spacing:-.04em;}
  h2{font-size:clamp(28px,7.5vw,38px);}
  .hero-copy>p{font-size:16px;line-height:1.65;}
}
@media (max-width:420px){
  h1{font-size:34px;}
  h2{font-size:28px;}
  .brand{font-size:18px;}
}


/* V10 — Section C: payment plans lebih menonjol & mobile-first */
.fwa-payments{padding:24px!important}
.fwa-payment-heading{margin-bottom:16px!important}
.fwa-payment-heading span{font-size:12px!important}
.fwa-pay{position:relative!important;min-height:92px!important;padding:18px 20px!important;border:1px solid #dbe5f2!important;background:#fff!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.fwa-pay:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,40,80,.08)!important}
.fwa-pay.active{border:2px solid #0757ff!important;background:linear-gradient(135deg,#f1f6ff,#ffffff)!important;box-shadow:0 12px 28px rgba(7,87,255,.10)!important}
.fwa-pay-copy{min-width:0}
.fwa-pay-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fwa-pay-title strong{font-size:16px!important;color:#0b285c!important}
.fwa-pay-copy>span{font-size:11px!important;color:#71819a!important;margin-top:5px!important}
.fwa-pay-price b{font-size:24px!important;font-weight:950!important;color:#071b3d!important;white-space:nowrap}
.fwa-pay-price small{font-size:10px!important;color:#71819a!important;max-width:185px;line-height:1.35!important}
.fwa-pay-title em{font-style:normal;font-size:9px;font-weight:950;letter-spacing:.05em;padding:5px 8px;border-radius:999px;white-space:nowrap}
.fwa-badge-green{background:#dff8ea;color:#07945f}
.fwa-badge-purple{background:#eee8ff;color:#6842c7}
.fwa-pay:nth-of-type(3){border-color:#bfe9d5!important;background:linear-gradient(135deg,#f7fffb,#ffffff)!important}
.fwa-pay:nth-of-type(4){border-color:#dcd0ff!important;background:linear-gradient(135deg,#fbf9ff,#ffffff)!important}
@media(max-width:560px){
  .fwa-payments{padding:18px!important}
  .fwa-pay{min-height:84px!important;padding:14px 15px!important;gap:10px!important}
  .fwa-pay-title strong{font-size:13px!important}
  .fwa-pay-copy>span{font-size:9px!important}
  .fwa-pay-price{text-align:right!important}
  .fwa-pay-price b{font-size:18px!important}
  .fwa-pay-price small{font-size:8px!important;max-width:125px!important}
  .fwa-pay-title em{font-size:8px!important;padding:4px 6px!important}
}


/* FINAL accessibility helpers */
.skip-link{position:fixed;left:12px;top:12px;z-index:9999;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:#08152f;color:#fff;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:transform .2s ease}.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid rgba(7,87,255,.45);outline-offset:3px}



/* =========================================================
   REFERENCE-STYLE PACKAGE PAGE V4
   Clean / premium / HD / responsive / conversion focused
   ========================================================= */
:root{--ref-blue:#0b55f5;--ref-blue2:#0839b8;--ref-navy:#10244b;--ref-green:#16a34a;--ref-line:#e7edf5;--ref-bg:#f6f9ff}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--ref-navy)}
.topbar{display:none!important}
.site-header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #edf1f7!important;box-shadow:0 4px 18px rgba(15,23,42,.045)!important}
.site-header .nav{max-width:1440px;min-height:80px;padding-left:26px;padding-right:26px}
.brand{min-width:310px!important;text-decoration:none!important}
.brand-mark{display:none!important}
.brand-text{display:grid;line-height:1.05;letter-spacing:-.035em}
.brand-text strong{font-size:24px;color:#0b55d8;font-weight:950}
.brand-text{font-size:24px;font-weight:950;color:#10244b}
.brand-text small{display:block;font-size:12px;color:#17233b;font-weight:800;letter-spacing:0;margin-top:5px}
.menu{gap:30px!important;font-size:16px!important;color:#101828!important}
.menu a:not(.nav-cta){padding:30px 2px 26px!important;font-weight:800}
.menu a:not(.nav-cta)::after{height:2px!important;bottom:18px!important;background:#0b55f5!important}
.menu a.active{color:#0b55f5!important}
.menu a.active::after{transform:scaleX(1)!important}
.header-cta{background:#0aa34a!important;border-radius:12px!important;min-height:44px!important;padding:0 22px!important;box-shadow:0 8px 20px rgba(10,163,74,.18)!important}
.header-cta:hover{background:#078b3f!important}

/* Package page starts immediately below navigation */
#paket-a.package-selection-copy{padding:28px 0 92px!important;background:linear-gradient(180deg,#f7faff 0%,#f8fbff 36%,#fff 100%)!important}
.package-selection-copy:before{display:none!important}
.package-selection-copy > .container{max-width:1360px!important}
.package-selection-copy > .container > .section-head:first-child{margin:0 auto 34px!important;max-width:920px!important}
.package-selection-copy > .container > .section-head:first-child .eyebrow{display:none!important}
.package-selection-copy > .container > .section-head:first-child h2{font-size:clamp(38px,4vw,60px)!important;color:#05070c!important;margin:0 0 14px!important;letter-spacing:-.045em!important}
.package-selection-copy > .container > .section-head:first-child p{font-size:20px!important;color:#4a5b78!important;line-height:1.5!important;font-weight:500!important}

/* Benefit panel like reference: one clean glass/white panel, icons centered */
.package-benefits{max-width:1290px!important;margin:0 auto 38px!important;padding:30px 36px!important;gap:20px!important;border:1px solid #e5ebf4!important;border-radius:20px!important;background:#fff!important;box-shadow:0 12px 32px rgba(31,52,88,.08)!important;backdrop-filter:none!important}
.package-benefits::before{display:none!important}
.package-benefit{min-height:315px!important;padding:18px 28px 24px!important;border:0!important;border-radius:16px!important;background:transparent!important;box-shadow:none!important}
.package-benefit:after{display:none!important}
.package-benefit:hover{transform:translateY(-4px)!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;box-shadow:0 14px 28px rgba(20,55,110,.06)!important}
.package-benefit__icon{width:132px!important;height:132px!important;margin:0 auto 16px!important;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.package-benefit__icon img{width:122px!important;height:122px!important;filter:drop-shadow(0 8px 10px rgba(15,54,115,.08))!important}
.package-benefit__copy{width:100%!important;text-align:center!important}
.package-benefit__title{font-size:27px!important;color:#0b0f18!important;font-weight:900!important;line-height:1.18!important}
.package-benefit__text{max-width:310px!important;margin:10px auto 0!important;font-size:16px!important;line-height:1.55!important;color:#44536d!important;font-weight:500!important}
.package-benefit__accent{width:0!important;height:0!important;margin:0!important}

/* Package heading */
.package-selection-copy .section-head:not(:first-child){margin:0 auto 18px!important;max-width:850px!important}
.package-selection-copy .section-head:not(:first-child) .eyebrow{font-size:34px!important;line-height:1.1!important;letter-spacing:-.035em!important;text-transform:none!important;color:#10244b!important}
.package-selection-copy .section-head:not(:first-child) h2{font-size:0!important;margin:0!important;height:0!important;overflow:hidden!important}
.package-selection-copy .section-head:not(:first-child) p.package-only-title{font-size:20px!important;color:#16a34a!important;font-weight:800!important;margin:0!important}
.package-subnote{font-size:15px!important;color:#53627a!important;margin:12px 0 0!important}

/* Pricing cards */
.packages{max-width:1180px!important;margin:0 auto!important;gap:28px!important;align-items:start!important}
.package{padding:12px 30px 28px!important;border:1px solid #e3e8f0!important;border-radius:18px!important;background:#fff!important;box-shadow:0 12px 32px rgba(15,23,42,.06)!important;overflow:visible!important}
.package:hover{transform:translateY(-5px)!important;box-shadow:0 20px 40px rgba(15,23,42,.10)!important}
.package.featured{border:1px solid #0b55f5!important;box-shadow:0 18px 42px rgba(11,85,245,.18)!important;transform:translateY(-2px)!important;padding-top:0!important}
.package.featured:hover{transform:translateY(-7px)!important}
.package .paket-header{margin:0 -30px 16px!important;padding:11px 18px!important;min-height:0!important;height:38px!important;border-radius:18px 18px 0 0!important;background:transparent!important;color:#118447!important;display:flex!important;align-items:center!important;justify-content:center!important}
.package.featured .paket-header{height:40px!important;margin:0 -30px 16px!important;border-radius:18px 18px 0 0!important;background:linear-gradient(90deg,#0b55f5,#19b5c7)!important;color:#fff!important}
.package-label{display:inline-flex!important;align-items:center;justify-content:center;min-width:96px;height:28px;padding:0 14px;border-radius:9px;background:#e9f9ee;color:#118447;font-size:14px;font-weight:900;letter-spacing:.02em}
.package.featured .package-label{background:transparent!important;color:#fff!important;font-size:15px!important;min-width:auto!important}
.package .speed{font-size:58px!important;color:#10244b!important;text-align:center!important;line-height:1!important;margin-top:4px!important}
.package.featured .speed{color:#0b55f5!important}
.package .speed small{font-size:18px!important;color:#17376d!important}
.speed-divider{width:62px;height:3px;background:#16a34a;border-radius:99px;margin:16px auto 18px}
.package .features{margin:0 0 22px!important;gap:10px!important;color:#4a5870!important;font-size:15px!important}
.package .features li{align-items:center!important}
.package .dot{width:18px!important;height:18px!important;background:#10a64f!important;color:#fff!important;font-size:10px!important}
.package .price{margin:0 0 20px!important;text-align:center!important}
.package .price .old{display:none!important}
.package .price strong{font-size:27px!important;color:#10244b!important}
.package .price span{font-size:14px!important;color:#61708a!important}
.package-btn{border-radius:12px!important;min-height:50px!important;font-size:15px!important}
.package:not(.featured) .package-btn{background:#fff!important;border:1px solid #d7dfeb!important;color:#0b55f5!important}
.package.featured .package-btn{background:#0b55f5!important}
.small-note{display:none!important}

/* Keep lower sections visually consistent */
.why{background:#fff!important}

@media(max-width:1050px){
  .site-header .nav{padding-left:18px;padding-right:18px}
  .menu{gap:18px!important}
  .brand{min-width:250px!important}
  .brand-text strong,.brand-text{font-size:20px}
  .package-benefits{padding:26px 20px!important}
  .package-benefit{padding:18px 12px 22px!important}
  .package-benefit__icon{width:112px!important;height:112px!important}
  .package-benefit__icon img{width:104px!important;height:104px!important}
  .package-benefit__title{font-size:22px!important}
  .package-benefit__text{font-size:14px!important}
}
@media(max-width:900px){
  .menu{gap:12px!important}
  .menu a:not(.nav-cta){font-size:13px!important}
  .header-cta{font-size:12px!important;padding:0 14px!important}
  .package-benefits{grid-template-columns:1fr!important;gap:8px!important}
  .package-benefit{min-height:auto!important;padding:22px 16px!important}
  .package-benefit__icon{width:120px!important;height:120px!important}
  .package-benefit__icon img{width:112px!important;height:112px!important}
  .packages{grid-template-columns:1fr!important;max-width:560px!important}
  .package.featured{transform:none!important}
  .package.featured:hover{transform:translateY(-5px)!important}
}
@media(max-width:700px){
  .site-header .nav{min-height:66px!important}
  .brand{min-width:0!important}
  .brand-text strong,.brand-text{font-size:18px!important}
  .brand-text small{font-size:10px!important;margin-top:3px}
  .menu-toggle{display:block!important}
  .menu{position:absolute!important;left:10px!important;right:10px!important;top:72px!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:10px!important;background:#fff!important;border:1px solid #e5eaf2!important;border-radius:16px!important;box-shadow:0 18px 45px rgba(15,23,42,.14)!important}
  .menu.open{display:flex!important}
  .menu a:not(.nav-cta){padding:13px 10px!important;font-size:14px!important}
  .menu a:not(.nav-cta)::after{display:none!important}
  .header-cta{margin-top:7px!important;width:100%!important}
  #paket-a.package-selection-copy{padding:28px 0 72px!important}
  .package-selection-copy > .container > .section-head:first-child h2{font-size:36px!important}
  .package-selection-copy > .container > .section-head:first-child p{font-size:16px!important}
  .package-benefits{padding:12px!important;border-radius:18px!important;margin-bottom:30px!important}
  .package-benefit{padding:22px 12px!important}
  .package-benefit__icon{width:110px!important;height:110px!important}
  .package-benefit__icon img{width:102px!important;height:102px!important}
  .package-benefit__title{font-size:22px!important}
  .package-benefit__text{font-size:14px!important}
  .package-selection-copy .section-head:not(:first-child) .eyebrow{font-size:28px!important}
  .package-selection-copy .section-head:not(:first-child) p.package-only-title{font-size:17px!important}
  .package-subnote{font-size:13px!important}
  .package{padding:10px 20px 24px!important}
  .package .paket-header,.package.featured .paket-header{margin-left:-20px!important;margin-right:-20px!important}
  .package .speed{font-size:52px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Contrast & readability fixes */
body{color:#0b1730;background:#f7faff}
.section-head h2,.package-selection-copy .section-head h2{color:#081a3a!important;text-shadow:none}
.section-head p,.package-only-title,.package-subnote,.package-benefit__text{color:#425574!important}
.package-benefit__title{color:#071936!important}
.menu a{color:#0b1730!important}
.menu a:hover,.menu a.active{color:#0757ff!important}
.package{color:#102044!important;background:#fff!important}
.package .speed,.package .price strong,.paket-title{color:#071936!important}
.package .price .old,.package .price span{color:#687995!important}
.package .features li{color:#334766!important}
.package .package-label{color:#087f3f!important}
.package.featured{border-color:#1b63ff!important;box-shadow:0 28px 70px rgba(0,91,255,.18)!important}
.package.featured .paket-header{color:#fff!important}
.package.featured .paket-header *{color:#fff!important}
.package-selection-copy .section-head:not(:first-child) .eyebrow{color:#0b285c!important}
/* Sales sections B/C */
#paket-b,#paket-c{background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%)!important;border-top:1px solid #e8eef7}
#paket-b .section-head,#paket-c .section-head{margin-bottom:28px!important}
#paket-b .section-head .package-only-title,#paket-c .section-head .package-only-title{font-size:clamp(24px,3vw,34px)!important;font-weight:900!important;color:#0a2352!important;letter-spacing:-.03em!important}
#paket-b .package,#paket-c .package{border:1px solid #dfe8f5!important;box-shadow:0 18px 45px rgba(16,40,80,.08)!important}
#paket-b .package:hover,#paket-c .package:hover{transform:translateY(-7px);box-shadow:0 28px 60px rgba(16,40,80,.13)!important}
#paket-b .paket-header,#paket-c .paket-header{background:linear-gradient(135deg,#f4f8ff,#ffffff)!important;border-bottom:1px solid #e5edf8!important}
#paket-b .paket-title,#paket-c .paket-title{color:#082452!important}
#paket-b .paket-subtitle,#paket-c .paket-subtitle{color:#61728f!important}
#paket-b .features li,#paket-c .features li{color:#334766!important}
@media(max-width:760px){#paket-b .packages,#paket-c .packages{grid-template-columns:1fr!important}.package-selection-copy .package-benefits{grid-template-columns:1fr!important}.package-benefit{text-align:left!important}.package-benefit__icon{margin-inline:auto!important}.package-benefit__copy{text-align:center!important}}

/* V5 SEO-safe branding & compact hero */
.hero-compact{background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 52%,#ffffff 100%);border-top:1px solid #eef3fa;border-bottom:1px solid #e6eef8;min-height:520px;display:flex;align-items:center}
.hero-compact .hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);align-items:center}
.hero-compact .hero-copy h1{max-width:900px;font-size:clamp(38px,5vw,66px)!important}
.hero-trust-card{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.9);border:1px solid #dfe9f7;border-radius:24px;padding:22px;box-shadow:0 18px 45px rgba(16,40,80,.08);color:#18345e}
.hero-trust-card strong{display:block;font-size:17px;color:#082452}.hero-trust-card p{margin:7px 0 0;font-size:13px;line-height:1.65;color:#5b6d87}.hero-trust-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:#eaf3ff;color:#0757ff;font-weight:950}
@media(max-width:900px){.hero-compact{min-height:auto;padding-top:56px!important;padding-bottom:56px!important}.hero-compact .hero-grid{grid-template-columns:1fr;gap:26px}.hero-trust-card{max-width:680px}}
@media(max-width:560px){.hero-compact{padding-top:42px!important;padding-bottom:42px!important}.hero-compact .hero-copy h1{font-size:39px!important;line-height:1.06!important}.hero-trust-card{padding:18px;border-radius:20px}.hero-note span{font-size:12px}}


/* SALES SECTIONS A/B/C — compact, premium, conversion-first */
.sales-section{background:linear-gradient(180deg,#fff 0%,#f7faff 100%);position:relative;overflow:hidden}
.sales-section:before{content:"";position:absolute;inset:-180px -10% auto;height:420px;background:radial-gradient(circle at 50% 0,rgba(7,87,255,.10),transparent 62%);pointer-events:none}
.sales-head{position:relative;z-index:1;margin-bottom:34px!important;max-width:920px!important}
.sales-head .eyebrow{font-size:11px!important;letter-spacing:.15em!important;color:#0757ff!important;font-weight:900!important}
.sales-head h2{font-size:clamp(30px,4vw,52px)!important;line-height:1.05!important;margin:8px 0 12px!important}
.sales-head .package-only-title{font-size:18px!important;color:#52627b!important;line-height:1.55!important}
.sales-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.sales-trust span{padding:8px 12px;border:1px solid #dbe6f5;border-radius:999px;background:#fff;color:#355071;font-size:12px;font-weight:800}
.sales-grid{display:grid!important;gap:16px!important;align-items:stretch}.sales-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sales-card{min-width:0;padding:24px!important;border:1px solid #dbe5f2!important;border-radius:24px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 12px 35px rgba(12,43,86,.07)!important;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important}
.sales-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(12,43,86,.13)!important;border-color:#bcd2f3!important}.sales-card.featured{border:2px solid #0757ff!important;box-shadow:0 18px 50px rgba(7,87,255,.14)!important}
.sales-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}.sales-card .package-label{display:inline-flex!important;padding:7px 10px!important;border-radius:999px!important;background:#edf4ff!important;color:#0757ff!important;font-size:10px!important;letter-spacing:.08em}.sales-mini{font-size:10px;font-weight:900;color:#70809a;text-transform:uppercase;letter-spacing:.08em}.sales-card h3{font-size:20px!important;margin:0 0 8px!important;color:#081a3a!important}.sales-use{font-size:13px!important;color:#63748e!important;line-height:1.55!important;min-height:42px;margin:0 0 10px!important}.sales-card .speed{font-size:48px!important;line-height:1!important;margin:5px 0 9px!important;color:#0a2352!important}.sales-card .speed small{font-size:15px!important}.sales-card .price{margin-top:4px!important}.sales-card .price strong{font-size:27px!important;color:#071b3d!important}.sales-card .price .old{font-size:11px!important;color:#8a98ab!important}.sales-card .price span{font-size:11px!important}.sales-card .features{margin:13px 0 18px!important;flex:1}.sales-card .features li{font-size:12px!important;margin:8px 0!important}.sales-card .package-btn{width:100%;justify-content:center!important}.combo-stat{display:flex;align-items:baseline;gap:7px;margin:2px 0 8px;color:#63748e}.combo-stat strong{font-size:25px;color:#0757ff}.combo-stat span{font-size:11px;font-weight:800}.sales-combo{background:linear-gradient(180deg,#f7faff 0%,#eef5ff 100%)}
.fwa-shell{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:18px;max-width:1050px;margin:0 auto}.fwa-product,.fwa-payments{background:#fff;border:1px solid #dbe5f2;border-radius:28px;padding:28px;box-shadow:0 18px 55px rgba(12,43,86,.08)}.fwa-product h3{font-size:28px;margin:0 0 8px;color:#081a3a}.fwa-product .sales-use{font-size:14px!important;max-width:560px;min-height:auto}.fwa-speed-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 15px}.fwa-speed{border:1px solid #d6e1ef;background:#f7faff;border-radius:16px;padding:16px;color:#24405f;font-size:25px;font-weight:900;cursor:pointer}.fwa-speed small{font-size:11px}.fwa-speed.is-active{border-color:#0757ff;background:#0757ff;color:#fff;box-shadow:0 10px 25px rgba(7,87,255,.18)}.fwa-highlights{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}.fwa-highlights span{font-size:11px;font-weight:800;color:#45617f;background:#f2f7fd;padding:8px 10px;border-radius:10px}.fwa-product .btn{width:100%;justify-content:center}.fwa-payment-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:13px}.fwa-payment-heading span{font-size:11px;letter-spacing:.12em;font-weight:950;color:#0757ff}.fwa-payment-heading small{font-size:10px;color:#8190a5;text-align:right}.fwa-pay{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #e1e8f2;border-radius:18px;padding:15px;margin:10px 0;background:#fbfdff}.fwa-pay.active{border-color:#0757ff;background:#f1f6ff}.fwa-pay strong{display:block;color:#0b285c;font-size:14px}.fwa-pay span{display:block;color:#75859b;font-size:10px;margin-top:3px}.fwa-pay-price{text-align:right}.fwa-pay-price b{display:block;color:#071b3d;font-size:19px}.fwa-pay-price small{display:block;color:#7a8aa0;font-size:9px}.fwa-note{max-width:1050px;margin:16px auto 0;background:#fff8e8;border:1px solid #f1dfb5;border-radius:16px;padding:14px 16px;color:#70551f;font-size:11px;line-height:1.55;position:relative;z-index:1}
@media(max-width:900px){.sales-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.fwa-shell{grid-template-columns:1fr}}
@media(max-width:560px){.sales-grid-3{grid-template-columns:1fr}.sales-card{padding:21px!important}.sales-head{margin-bottom:25px!important}.sales-trust{gap:6px}.sales-trust span{font-size:10px;padding:7px 9px}.fwa-product,.fwa-payments{padding:20px;border-radius:22px}.fwa-pay{padding:13px}.fwa-pay-price b{font-size:16px}}


/* FINAL COMPACT SPACING — spacing only; typography, colors and content unchanged */
.section-pad{padding:52px 0!important}
.hero-compact{min-height:0!important;padding-top:48px!important;padding-bottom:42px!important}
.hero-compact .hero-grid{gap:32px!important}
.hero-compact .hero-copy>p{margin-bottom:20px!important}
.hero-note{margin-top:18px!important}
#paket-a.package-selection-copy{padding:34px 0 42px!important}
#paket-a .package-benefits{margin:18px auto 24px!important;gap:12px!important}
#paket-a .package-benefit{min-height:190px!important;padding:17px 18px 15px!important}
#paket-a .package-benefit__icon{width:72px!important;height:72px!important;margin-bottom:9px!important}
#paket-a .section-head:nth-of-type(2){margin-top:0!important;margin-bottom:18px!important}
#paket-a .packages{gap:13px!important}
#paket-b,#paket-c{padding-top:34px!important;padding-bottom:34px!important}
#paket-b .section-head,#paket-c .section-head{margin-bottom:18px!important}
.sales-head{margin-bottom:22px!important}
.sales-grid{gap:13px!important}
.sales-card{padding:20px!important;border-radius:20px!important}
.sales-card-top{margin-bottom:10px!important}
.sales-card h3{margin-bottom:6px!important}
.sales-use{margin-bottom:7px!important}
.sales-card .speed{margin:3px 0 7px!important}
.sales-card .features{margin:10px 0 14px!important}
.sales-card .features li{margin:6px 0!important}
.fwa-shell{gap:14px!important}
.fwa-product,.fwa-payments{padding:22px!important}
.fwa-speed-toggle{margin:16px 0 12px!important}
.fwa-highlights{margin-bottom:15px!important}
.fwa-note{margin-top:12px!important}
.about-compact .section-head,.trust-section .section-head{margin-bottom:20px!important}
#coverage .coverage{padding:34px!important}
#coverage .coverage p{margin-bottom:16px!important}
#area .section-head,#faq .section-head{margin-bottom:20px!important}
.compact-faq{gap:8px!important}
.cta-inner{padding-top:34px!important;padding-bottom:34px!important}
@media(max-width:760px){
  .section-pad{padding:42px 0!important}
  .hero-compact{padding-top:38px!important;padding-bottom:34px!important}
  #paket-a.package-selection-copy{padding:30px 0 34px!important}
  #paket-a .package-benefits{margin:16px auto 20px!important}
  #paket-b,#paket-c{padding-top:28px!important;padding-bottom:28px!important}
  .sales-head{margin-bottom:18px!important}
  .sales-grid{gap:11px!important}
  #coverage .coverage{padding:26px!important}
  .cta-inner{padding-top:28px!important;padding-bottom:28px!important}
}
@media(max-width:560px){
  .section-pad{padding:36px 0!important}
  .hero-compact{padding-top:32px!important;padding-bottom:30px!important}
  #paket-a.package-selection-copy{padding:26px 0 30px!important}
  #paket-a .package-benefit{padding:15px!important}
  #paket-b,#paket-c{padding-top:24px!important;padding-bottom:24px!important}
  .sales-card{padding:18px!important}
  .fwa-product,.fwa-payments{padding:18px!important}
  #coverage .coverage{padding:22px!important}
  .cta-inner{padding-top:24px!important;padding-bottom:24px!important}
}


/* SECTION A & B ONLY — one-row horizontal package cards; SECTION C untouched */
#paket-a .sales-grid,
#paket-b .sales-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(245px,1fr))!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(245px,1fr)!important;
  gap:16px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:8px 6px 18px!important;
  margin-inline:-6px!important;
  scroll-snap-type:x mandatory!important;
  scroll-padding-inline:6px!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(7,87,255,.38) rgba(7,87,255,.07);
  cursor:grab;
}
#paket-a .sales-grid:active,
#paket-b .sales-grid:active{cursor:grabbing}
#paket-a .sales-grid::-webkit-scrollbar,
#paket-b .sales-grid::-webkit-scrollbar{height:8px}
#paket-a .sales-grid::-webkit-scrollbar-track,
#paket-b .sales-grid::-webkit-scrollbar-track{background:rgba(7,87,255,.06);border-radius:999px}
#paket-a .sales-grid::-webkit-scrollbar-thumb,
#paket-b .sales-grid::-webkit-scrollbar-thumb{background:rgba(7,87,255,.35);border-radius:999px}
#paket-a .sales-grid > *,
#paket-b .sales-grid > *{
  min-width:0!important;
  scroll-snap-align:start;
  animation:abCardIn .45s ease both;
}
#paket-a .sales-grid > *:nth-child(2),#paket-b .sales-grid > *:nth-child(2){animation-delay:.04s}
#paket-a .sales-grid > *:nth-child(3),#paket-b .sales-grid > *:nth-child(3){animation-delay:.08s}
#paket-a .sales-grid > *:nth-child(4),#paket-b .sales-grid > *:nth-child(4){animation-delay:.12s}
#paket-a .sales-grid > *:nth-child(5),#paket-b .sales-grid > *:nth-child(5){animation-delay:.16s}
#paket-a .sales-grid > *:nth-child(6),#paket-b .sales-grid > *:nth-child(6){animation-delay:.20s}
@keyframes abCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#paket-a .sales-grid > *:hover,
#paket-b .sales-grid > *:hover{transform:translateY(-6px)}
@media(max-width:900px){
  #paket-a .sales-grid,
  #paket-b .sales-grid{
    grid-template-columns:repeat(6,minmax(285px,1fr))!important;
    grid-auto-columns:minmax(285px,1fr)!important;
  }
}
@media(max-width:600px){
  #paket-a .sales-grid,
  #paket-b .sales-grid{
    grid-template-columns:repeat(6,minmax(82vw,1fr))!important;
    grid-auto-columns:minmax(82vw,1fr)!important;
    gap:12px!important;
    padding-bottom:15px!important;
    scroll-snap-type:x mandatory!important;
  }
  #paket-a .sales-grid > *,
  #paket-b .sales-grid > *{scroll-snap-align:center}
}
@media(prefers-reduced-motion:reduce){
  #paket-a .sales-grid > *,#paket-b .sales-grid > *{animation:none!important}
}


/* =========================================================
   THANK YOU POPUP — RESPONSIVE, SMOOTH & TEMPLATE MATCHED
   ========================================================= */
body.thank-you-open { overflow: hidden; }
.thank-you-popup { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .28s ease,visibility .28s ease; }
.thank-you-popup.show { visibility:visible; opacity:1; pointer-events:auto; }
.thank-you-backdrop { position:absolute; inset:0; background:rgba(5,18,43,.58); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.thank-you-dialog { position:relative; width:min(100%,470px); padding:34px 30px 28px; border:1px solid rgba(255,255,255,.78); border-radius:28px; background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(246,250,255,.98)); box-shadow:0 30px 90px rgba(3,24,65,.28); text-align:center; transform:translateY(18px) scale(.97); transition:transform .42s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.thank-you-dialog::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#0757ff,#1a7dff,#20c997); }
.thank-you-popup.show .thank-you-dialog { transform:translateY(0) scale(1); }
.thank-you-close { position:absolute; top:12px; right:12px; width:38px; height:38px; border:0; border-radius:50%; background:rgba(10,48,105,.06); color:#52627b; font-size:25px; line-height:1; cursor:pointer; transition:transform .2s ease,background .2s ease,color .2s ease; }
.thank-you-close:hover { transform:rotate(6deg) scale(1.05); background:rgba(7,87,255,.10); color:#0757ff; }
.thank-you-icon { width:78px; height:78px; margin:4px auto 18px; color:#10b981; filter:drop-shadow(0 12px 20px rgba(16,185,129,.18)); animation:thankYouPop .6s cubic-bezier(.2,1.35,.3,1) both; }
.thank-you-icon svg { width:100%; height:100%; display:block; }
.thank-you-eyebrow { display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; background:#edf8f4; color:#087a5c; font-size:10px; font-weight:950; letter-spacing:.12em; }
.thank-you-dialog h2 { margin:12px 0 8px; color:#10244b; font-size:clamp(27px,6vw,34px); line-height:1.1; letter-spacing:-.035em; }
.thank-you-dialog p { max-width:390px; margin:0 auto; color:#65748d; font-size:14px; line-height:1.7; }
.thank-you-next { display:flex; align-items:center; gap:9px; width:fit-content; max-width:100%; margin:20px auto 0; padding:11px 14px; border:1px solid rgba(7,87,255,.09); border-radius:14px; background:rgba(7,87,255,.045); color:#274064; font-size:12px; font-weight:750; line-height:1.4; text-align:left; }
.thank-you-dot { flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:#20c997; box-shadow:0 0 0 5px rgba(32,201,151,.12); animation:thankYouPulse 1.4s ease-in-out infinite; }
.thank-you-progress { height:4px; margin:22px -2px 0; border-radius:999px; overflow:hidden; background:#e8eef7; }
.thank-you-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0757ff,#20c997); }
.thank-you-popup.show .thank-you-progress span { animation:thankYouProgress 5.2s linear forwards; }
@keyframes thankYouPop { 0%{opacity:0;transform:scale(.55) rotate(-7deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes thankYouPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.18);opacity:1} }
@keyframes thankYouProgress { from{width:0} to{width:100%} }
@media (max-width:520px) { .thank-you-popup{padding:16px}.thank-you-dialog{padding:31px 20px 22px;border-radius:24px}.thank-you-icon{width:68px;height:68px;margin-bottom:15px}.thank-you-dialog p{font-size:13px;line-height:1.65}.thank-you-next{margin-top:17px;font-size:11.5px}.thank-you-close{width:34px;height:34px;top:10px;right:10px;font-size:23px} }
@media (prefers-reduced-motion:reduce) { .thank-you-popup,.thank-you-dialog,.thank-you-icon,.thank-you-progress span{animation:none!important;transition:none!important}.thank-you-popup.show .thank-you-progress span{width:100%} }


/* Production additions only. Existing template/layout styles remain unchanged. */
.trust-section{background:#f7faff;border-top:1px solid #e8eef7;border-bottom:1px solid #e8eef7}
.about-compact,.trust-section{background:#f7faff;border-top:1px solid #e8eef7;border-bottom:1px solid #e8eef7}
.about-compact .section-head,.trust-section .section-head{max-width:850px;margin:0 auto 28px;text-align:center}
.compact-faq{max-width:900px;margin:0 auto;display:grid;gap:10px}
.compact-faq details{background:#fff;border:1px solid #e1e8f2;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.045);overflow:hidden}
.compact-faq details[open]{border-color:#cfe0ff;box-shadow:0 12px 30px rgba(7,87,255,.07)}
.compact-faq summary{list-style:none;display:flex;align-items:center;gap:14px;padding:17px 18px;cursor:pointer;color:#10244b;min-width:0}
.compact-faq summary::-webkit-details-marker{display:none}
.compact-faq summary::after{content:'+';margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef5ff;color:#0b55f5;font-size:20px;font-weight:700;transition:transform .22s ease,background .22s ease}
.compact-faq details[open] summary::after{content:'−';background:#0b55f5;color:#fff}
.compact-summary-icon{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eaf3ff;color:#0b55f5;font-weight:950;font-size:17px}
.compact-faq summary > span:nth-child(2){display:grid;gap:3px;min-width:0}
.compact-faq summary strong{font-size:15px;line-height:1.3}
.compact-faq summary small{font-size:12px;line-height:1.45;color:#65748d;font-weight:600}
.compact-faq details > p{margin:0;padding:0 62px 18px 72px;color:#52627b;font-size:13px;line-height:1.7}
.compact-faq a{color:#0b55f5;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.trust-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:24px;color:#52627b;font-size:13px}
.trust-links a,.footer-links a,.consent a{color:#0b55f5;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
/* Full-width safeguards: section backgrounds span the viewport; inner content keeps the original container. */
.hero,.section-pad,.why,.local-seo,.cta,footer{width:100%;max-width:none}
html,body{width:100%;max-width:100%;overflow-x:hidden}
img,svg,iframe,video{max-width:100%}

@media(max-width:760px){.container{width:min(94%,1120px)}.hero-grid{grid-template-columns:1fr;gap:28px}.hero{padding-top:54px;padding-bottom:48px}.section-pad{padding:64px 0}.visual{min-height:360px}.menu{gap:12px}}
@media(max-width:560px){.container{width:calc(100% - 28px)}.hero-grid{gap:22px}.hero{padding-top:42px;padding-bottom:38px}.section-pad{padding:52px 0}.trust-links{justify-content:flex-start}.compact-faq summary{padding:15px}.compact-faq details > p{padding:0 54px 16px 69px}.footer-links{display:grid;gap:8px}.hero-actions .btn{width:100%}.visual{min-height:320px;border-radius:26px;padding:20px}.router{width:min(270px,78%);height:140px}.ring-one{width:300px;height:300px}.ring-two{width:215px;height:215px}}
@media(max-width:560px){.compact-faq{gap:8px}.compact-faq summary{gap:10px;padding:14px}.compact-summary-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px}.compact-faq summary strong{font-size:14px}.compact-faq summary small{font-size:11px}.compact-faq summary::after{width:28px;height:28px}.compact-faq details > p{padding:0 48px 16px 60px;font-size:12.5px}.about-compact .section-head,.trust-section .section-head{margin-bottom:20px}}
@media(max-width:380px){.container{width:calc(100% - 22px)}h1{font-size:clamp(34px,12vw,46px)}.visual{min-height:290px}.router{width:74%;height:125px}.ring-one{width:250px;height:250px}.ring-two{width:185px;height:185px}}

/* FINAL TYPE SCALE — last override keeps typography proportionate across all existing sections */
body{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-weight:400;line-height:1.62;letter-spacing:-.006em;}
h1,h2,h3,h4,.brand,.menu,.btn,.nav-cta,.package h3,.price strong{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;}
.hero h1{font-size:clamp(38px,5.2vw,64px)!important;line-height:1.06!important;letter-spacing:-.045em!important;font-weight:800!important;margin:18px 0 20px!important;}
.section-head h2,.package-selection-copy .section-head h2{font-size:clamp(30px,3.8vw,46px)!important;line-height:1.12!important;letter-spacing:-.035em!important;font-weight:800!important;}
.hero-copy>p{font-size:clamp(16px,1.45vw,18px)!important;line-height:1.68!important;font-weight:400!important;}
.brand{font-weight:800!important;letter-spacing:-.025em!important;}
.menu{font-weight:600!important;}
.btn,.nav-cta{font-weight:700!important;letter-spacing:-.008em!important;}
.package h3{font-weight:700!important;}
.price strong{font-weight:800!important;}
.eyebrow{font-weight:700!important;letter-spacing:.13em!important;}
@media(max-width:760px){
  .hero h1{font-size:clamp(34px,9.4vw,48px)!important;line-height:1.08!important;}
  .section-head h2,.package-selection-copy .section-head h2{font-size:clamp(28px,7.4vw,38px)!important;line-height:1.14!important;}
}
@media(max-width:420px){
  .hero h1{font-size:34px!important;}
  .section-head h2,.package-selection-copy .section-head h2{font-size:28px!important;}
  .brand{font-size:18px!important;}
}



/* =========================================================
   XL / XL SATU INSPIRED COLOR PALETTE — COLOR & STYLE ONLY
   No layout, spacing, content, structure, or component sizing changes.
   ========================================================= */
:root{
  --xl-primary:#004FC4;
  --xl-primary-deep:#002E73;
  --xl-primary-soft:#E4F0FF;
  --xl-cyan:#009BD6;
  --xl-teal:#079E91;
  --xl-teal-deep:#066C67;
  --xl-navy:#06152F;
  --xl-text:#0C2348;
  --xl-muted:#52657F;
  --xl-line:#CFDFF2;
  --xl-surface:#F2F7FF;
}

/* Base surfaces and readable text */
body{background:#F5F9FF;color:var(--xl-text)}
.site-header{background:rgba(255,255,255,.96)!important;border-bottom-color:rgba(0,79,196,.13)!important;box-shadow:0 8px 30px rgba(0,45,105,.09)!important}
.topbar{background:linear-gradient(90deg,var(--xl-primary-deep),var(--xl-primary),var(--xl-primary-deep))!important;color:#fff!important}

/* Brand / navigation */
.brand-mark,.logo-mark{background:linear-gradient(145deg,var(--xl-primary),var(--xl-cyan))!important;box-shadow:0 10px 26px rgba(0,79,196,.25)!important}
.brand,.menu,.nav a{color:var(--xl-navy)!important}
.nav a:hover,.menu a:hover{color:var(--xl-primary)!important}
.nav-cta,.header-cta{background:linear-gradient(135deg,var(--xl-primary),var(--xl-cyan))!important;color:#fff!important;box-shadow:0 12px 28px rgba(0,79,196,.25)!important}

/* Hero — stronger blue/teal character while keeping existing design */
.hero{background:
  radial-gradient(520px 320px at 92% 8%,rgba(7,87,217,.20),transparent 68%),
  radial-gradient(480px 280px at 6% 80%,rgba(18,184,166,.13),transparent 70%),
  linear-gradient(180deg,#FFFFFF 0%,#EDF5FF 100%)!important}
.hero:before{background:
  radial-gradient(circle at 78% 35%,rgba(0,167,230,.18),transparent 26%),
  radial-gradient(circle at 20% 15%,rgba(18,184,166,.10),transparent 22%)!important}
.hero h1,.hero-copy h1{color:var(--xl-navy)!important}
.hero h1 span{background:linear-gradient(100deg,var(--xl-primary),var(--xl-teal))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.hero-copy>p{color:#435876!important}
.badge{background:rgba(255,255,255,.94)!important;border-color:rgba(0,79,196,.17)!important;color:var(--xl-text)!important}
.btn-primary{background:linear-gradient(135deg,var(--xl-primary),var(--xl-cyan))!important;color:#fff!important;box-shadow:0 14px 30px rgba(0,79,196,.28)!important}
.btn-secondary{background:#fff!important;color:var(--xl-primary-deep)!important;border-color:#BFD5F0!important}
.hero-note span{background:rgba(255,255,255,.86)!important;border-color:rgba(0,79,196,.12)!important;color:#405573!important}

/* Existing visual area: color treatment only */
.visual{background:linear-gradient(145deg,var(--xl-primary-deep),var(--xl-primary) 55%,var(--xl-teal))!important;box-shadow:0 35px 80px rgba(0,47,115,.27)!important}
.visual-label{background:rgba(255,255,255,.15)!important;border-color:rgba(255,255,255,.24)!important;color:#fff!important}
.speed-card{background:rgba(255,255,255,.97)!important;color:var(--xl-text)!important}

/* Section headings and light backgrounds */
.section-head h2,.package-selection-copy .section-head h2{color:var(--xl-navy)!important}
.eyebrow,.package-selection-copy .section-head:not(:first-child) .eyebrow{color:var(--xl-primary)!important}
.package-selection-copy{background:linear-gradient(180deg,#FFFFFF 0%,#F1F7FF 100%)!important}
.package-selection-copy:before{background:linear-gradient(90deg,transparent,rgba(0,79,196,.25),transparent)!important}
.package-only-title{color:#52647E!important}

/* Benefit cards */
.package-benefits{border-color:rgba(7,87,217,.13)!important;background:rgba(255,255,255,.84)!important;box-shadow:0 24px 70px rgba(0,48,120,.10),inset 0 1px 0 rgba(255,255,255,.96)!important}
.package-benefits::before{background:radial-gradient(circle,rgba(18,184,166,.15),transparent 67%)!important}
.package-benefit{background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(246,250,255,.96))!important;border-color:rgba(0,79,196,.12)!important}
.package-benefit:before{background:linear-gradient(135deg,rgba(7,87,217,.06),transparent 45%,rgba(18,184,166,.055))!important}
.package-benefit:after{background:radial-gradient(circle,rgba(0,79,196,.13),transparent 68%)!important}
.package-benefit:hover{border-color:rgba(0,79,196,.25)!important;box-shadow:0 22px 46px rgba(0,45,115,.14)!important}
.package-benefit__icon{background:linear-gradient(145deg,#EAF3FF,#ECFFFA)!important;border-color:rgba(0,79,196,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 14px 30px rgba(0,79,196,.12)!important}
.package-benefit__title{color:var(--xl-navy)!important}
.package-benefit__text{color:#5D6D86!important}
.package-benefit__accent{background:linear-gradient(90deg,var(--xl-primary),var(--xl-teal))!important}

/* Package cards */
.package{background:rgba(255,255,255,.98)!important;border-color:rgba(12,49,110,.10)!important;box-shadow:0 18px 45px rgba(13,53,115,.08)!important}
.package:after{background:linear-gradient(145deg,rgba(7,87,217,.045),transparent 28%)!important}
.package:hover{box-shadow:0 28px 58px rgba(0,45,115,.17)!important}
.package.featured{border-color:rgba(7,87,217,.62)!important;box-shadow:0 28px 65px rgba(0,79,196,.21)!important}
.package .paket-header{background:linear-gradient(135deg,var(--xl-primary-deep),var(--xl-primary))!important}
.package:not(.featured) .paket-header{background:linear-gradient(135deg,#003F9F,var(--xl-primary))!important}
.package.featured .paket-header{background:linear-gradient(135deg,var(--xl-primary) 0%,var(--xl-cyan) 58%,var(--xl-teal) 120%)!important}
.package .paket-icon{background:linear-gradient(135deg,var(--xl-primary),var(--xl-cyan))!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important}
.package.featured .paket-icon{background:linear-gradient(135deg,var(--xl-primary),var(--xl-teal))!important}
.package .paket-popular{background:var(--xl-teal)!important;color:#fff!important;box-shadow:0 8px 20px rgba(6,108,103,.22)!important}
.package .paket-title{color:#fff!important}
.package .paket-subtitle{color:rgba(255,255,255,.86)!important}
.package .speed,.price strong{color:var(--xl-navy)!important}
.package.featured .speed,.package.featured .price strong{color:var(--xl-primary)!important}
.package .speed small{color:#65758E!important}
.features li{color:#465B78!important}
.dot{background:#E9FAF6!important;color:var(--xl-teal-deep)!important;border-color:rgba(18,184,166,.20)!important}
.package.featured .package-btn{background:linear-gradient(135deg,var(--xl-primary),var(--xl-cyan))!important;color:#fff!important;box-shadow:0 14px 30px rgba(0,79,196,.25)!important}
.package-conversion-note{border-color:rgba(7,87,217,.11)!important;color:#60718B!important;background:#fff!important}
.small-note{color:#6A7A91!important}

/* Dark feature / why section */
.why{background:linear-gradient(135deg,#032D79 0%,var(--xl-primary-deep) 58%,#0757D9 100%)!important;color:#fff!important}
.why:before{background:radial-gradient(circle,rgba(0,167,230,.30),transparent 65%)!important}
.why .section-head h2,.why .section-head .eyebrow{color:#fff!important}
.why .section-head p,.why .muted{color:#C6D8F1!important}
.why-card{background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.14)!important}
.why-card:hover{background:rgba(255,255,255,.11)!important}

/* Coverage / FAQ / CTA */
#coverage{background:linear-gradient(180deg,#F5F9FF,#EAF3FF)!important}
.coverage{background:#fff!important;border-color:rgba(0,79,196,.13)!important}
.faq details,.compact-faq details{background:#fff!important;border-color:#D9E5F3!important}
.faq details[open],.compact-faq details[open]{border-color:#B9D3F4!important;box-shadow:0 12px 30px rgba(7,87,217,.08)!important}
.compact-faq summary{color:var(--xl-text)!important}
.compact-faq summary::after{background:#EAF3FF!important;color:var(--xl-primary)!important}
.compact-faq details[open] summary::after{background:var(--xl-primary)!important;color:#fff!important}
.compact-summary-icon{background:#EAF3FF!important;color:var(--xl-primary)!important}
.compact-faq summary small,.compact-faq details>p{color:#60718B!important}
.compact-faq a,.trust-links a,.footer-links a,.consent a{color:var(--xl-primary)!important}
.cta{background:linear-gradient(135deg,var(--xl-primary-deep),var(--xl-primary))!important;color:#fff!important}
.cta .btn-secondary{background:#fff!important;color:var(--xl-primary-deep)!important}

/* Conversion / WhatsApp / notices */
.floating-wa{background:linear-gradient(135deg,#12B981,#079A78)!important;box-shadow:0 18px 40px rgba(7,127,100,.25)!important}
.mobile-check{background:linear-gradient(135deg,var(--xl-primary),var(--xl-cyan))!important;box-shadow:0 12px 30px rgba(7,87,217,.25)!important}
.trust-section,.about-compact{background:#F5F9FF!important;border-top-color:#DCE7F4!important;border-bottom-color:#DCE7F4!important}
.conversion-trust-item{border-color:rgba(7,87,217,.08)!important}

/* Footer — deep XL-style blue with teal accent */
footer{background:linear-gradient(135deg,#021F59 0%,#003B95 55%,#0757D9 100%)!important;color:#fff!important}
footer a,footer .footer-links a{color:#D9E9FF!important}
footer a:hover{color:#5FE0D1!important}
footer .muted,footer small{color:#B9CCE7!important}

/* Thank-you dialog and progress accents */
.thank-you-dialog h2{color:var(--xl-navy)!important}
.thank-you-dialog p{color:#60718B!important}
.thank-you-eyebrow{background:#E9FAF6!important;color:var(--xl-teal-deep)!important}
.thank-you-next{border-color:rgba(0,79,196,.12)!important;background:rgba(7,87,217,.045)!important;color:#3F5574!important}
.thank-you-dot{background:var(--xl-teal)!important;box-shadow:0 0 0 5px rgba(18,184,166,.12)!important}
.thank-you-progress span{background:linear-gradient(90deg,var(--xl-primary),var(--xl-teal))!important}

/* Preserve strong text contrast on all light surfaces */
.package p,.package li,.package-conversion-note,.package-benefit__text,.trust-links{color:#465B78}

/* SEO product detail page additions — intentionally restrained and consistent with current design. */
.product-detail-shell{padding:42px 0 82px;background:linear-gradient(180deg,#f7faff 0%,#fff 65%)}
.product-detail{max-width:980px;margin:0 auto;background:#fff;border:1px solid #e3e8f0;border-radius:22px;box-shadow:0 18px 42px rgba(15,23,42,.08);padding:34px}
.product-breadcrumb{font-size:12px;color:#6d7c92;margin-bottom:18px}
.product-breadcrumb a{color:#0b55f5;font-weight:800;text-decoration:none}
.product-eyebrow{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:#edf4ff;color:#0757ff;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.product-detail h1{margin:14px 0 8px;color:#071b3d;font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-.045em}
.product-description{color:#52627b;font-size:16px;line-height:1.7;max-width:760px}
.product-main{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.product-panel{border:1px solid #e4eaf2;border-radius:18px;padding:24px;background:#fbfdff}
.product-speed{font-size:52px;font-weight:900;line-height:1;color:#0b55f5;letter-spacing:-.05em}
.product-speed small{font-size:16px;color:#17376d;letter-spacing:0}
.product-price{margin-top:18px}
.product-price strong{display:block;font-size:30px;color:#071b3d;letter-spacing:-.035em}
.product-price span{font-size:11px;color:#71819a}
.product-channels{margin-top:12px;color:#52627b;font-weight:700}
.product-features{list-style:none;margin:18px 0 0;padding:0}
.product-features li{margin:10px 0;color:#4a5870}
.product-features li::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:9px;border-radius:50%;background:#10a64f;color:#fff;font-size:11px;font-weight:900}
.product-note{margin-top:24px;padding:14px 16px;border:1px solid #f1dfb5;border-radius:14px;background:#fff8e8;color:#70551f;font-size:12px;line-height:1.6}
.product-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.product-actions .btn{min-height:48px}
.product-related{margin-top:30px}
.product-related h2{font-size:24px;margin-bottom:14px}
.product-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.product-related-grid a{display:block;padding:14px;border:1px solid #e3e8f0;border-radius:14px;background:#fff;color:#10244b;text-decoration:none;font-weight:800}
.product-related-grid a span{display:block;color:#6d7c92;font-size:11px;margin-top:4px;font-weight:600}
@media(max-width:760px){.product-detail-shell{padding:28px 0 60px}.product-detail{padding:22px;border-radius:18px}.product-main{grid-template-columns:1fr;gap:14px}.product-speed{font-size:46px}.product-related-grid{grid-template-columns:1fr}.product-actions{display:grid}.product-actions .btn{width:100%;justify-content:center}}