/* Dala-inspired visual layer for the existing Giga Insider site.
   The checkout markup and behavior remain in the original styles/scripts. */

body[data-theme="dark"] {
  --bg: #030304;
  --bg-2: #08070d;
  --surface: #0d0b15;
  --surface-2: #14101e;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .19);
  --text: #fff;
  --text-2: #c6c3cf;
  --text-3: #aaa5b5;
  --text-mute: #8d8899;
  --blue: #8052ff;
  --blue-2: #6c3ff0;
  --violet: #a78bfa;
  --green: #ffb829;
  --green-glow: rgba(255, 184, 41, .25);
  --shadow-card: none;
  --shadow-cta: none;
  background: #030304;
  background-image: none;
}

body[data-theme="dark"] .header {
  background: rgba(3, 3, 4, .84);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
}

.header__inner { max-width: 1340px; }
.brand { font-weight: 400; letter-spacing: -.04em; }
.brand b { font-weight: 600; }
.brand__dot {
  width: 10px;
  height: 10px;
  margin-right: 11px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: #8052ff;
  box-shadow: 0 0 18px rgba(128, 82, 255, .45);
}
body[data-theme="dark"] .nav a {
  color: #aaa5b5;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .075em;
}
body[data-theme="dark"] .nav a:hover { color: #fff; background: transparent; }

body[data-theme="dark"] .btn--primary,
body[data-theme="dark"] .trial-note__btn {
  background: #8052ff;
  border-color: #8052ff;
  color: #fff;
  box-shadow: none;
}
body[data-theme="dark"] .btn--primary:hover,
body[data-theme="dark"] .trial-note__btn:hover {
  background: #936eff;
  border-color: #936eff;
  box-shadow: 0 0 32px rgba(128, 82, 255, .28);
}
body[data-theme="dark"] .btn--ghost {
  color: #e8e5ee;
  background: transparent;
  border-color: rgba(255, 255, 255, .27);
}
body[data-theme="dark"] .btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border-color: #fff;
}
body[data-theme="dark"] :is(.btn, .tariff, .faq-item__btn, .theme-toggle):focus-visible {
  outline: 2px solid #ffb829;
  outline-offset: 3px;
  box-shadow: none;
}

body[data-theme="dark"] .hero {
  min-height: min(860px, calc(100svh - 72px));
  padding: clamp(48px, 4.5vw, 68px) 0 90px;
  overflow: hidden;
  background: #030304;
}
body[data-theme="dark"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 77% 48%, rgba(57, 31, 106, .15), transparent 44%);
}
.hero__grid {
  max-width: 1340px;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 0;
}
.hero__copy { padding: 8px 0 56px; }
.hero__kicker {
  color: #ffb829;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body[data-theme="dark"] .hero .h1 {
  max-width: 720px;
  margin: 26px 0 32px;
  font-size: clamp(55px, 7vw, 104px);
  line-height: .98;
  letter-spacing: -.057em;
  font-weight: 400;
  text-wrap: balance;
}
body[data-theme="dark"] .hero .h1 span { color: #fff; }
body[data-theme="dark"] .hero .lede {
  max-width: 49ch;
  color: #c7c3cf;
  font-size: clamp(17px, 1.45vw, 19px);
  line-height: 1.62;
  font-weight: 300;
}
.hero__ctas { margin-top: 36px; gap: 16px; }
.hero__ctas .btn--ghost { border-color: transparent !important; text-decoration: underline; text-underline-offset: 5px; }
.hero__ctas .btn--ghost:hover { background: transparent !important; }
.hero__visual {
  min-height: 560px;
  overflow: visible;
  z-index: 1;
}
.constellation { display: none; }
html.has-constellation .hero__visual .constellation {
  display: block;
  position: absolute;
  top: -11%;
  left: -24%;
  width: 145%;
  height: 122%;
  max-width: none;
  pointer-events: none;
}
html.has-constellation .hero__visual .planet-wrap { display: none; }

body[data-theme="dark"] :is(.h2, .h3) {
  font-weight: 400;
  letter-spacing: -.045em;
}
body[data-theme="dark"] .h2 { font-size: clamp(42px, 5.3vw, 76px); line-height: 1.04; }
body[data-theme="dark"] .eyebrow {
  color: #ffb829;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
}
body[data-theme="dark"] .eyebrow::before { background: #ffb829; opacity: 1; }
body[data-theme="dark"] :is(.section--surface, .section--invert) { background: transparent; }
body[data-theme="dark"] .section { padding-block: clamp(82px, 9vw, 128px); }
body[data-theme="dark"] .section--no-top { padding-top: 0; }
body[data-theme="dark"] .section--tight { padding-block: 55px; }
body[data-theme="dark"] .sec-head { gap: 48px; }
body[data-theme="dark"] .sec-head .lede { color: #b7b2c1; }

body[data-theme="dark"] .trust-strip {
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
body[data-theme="dark"] .trust-strip__item { border-left: none; padding-block: 24px; }
body[data-theme="dark"] .trust-strip__title { font-size: 21px; font-weight: 400; }
body[data-theme="dark"] .trust-strip__label { color: #9993a5; }

body[data-theme="dark"] :is(.benefit, .step, .device, .contact) {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 8px 24px 0;
}
body[data-theme="dark"] :is(.benefit, .step, .device, .contact):hover {
  background: transparent;
  border-color: #8052ff;
  box-shadow: none;
  filter: none;
  transform: translateY(-3px);
}
body[data-theme="dark"] :is(.benefit__icon, .step__icon, .contact .icon) {
  border: 0;
  background: transparent;
  color: #a789ff;
  box-shadow: none;
  justify-content: start;
}
body[data-theme="dark"] :is(.benefit__title, .step__title) { font-weight: 400; font-size: 22px; }
body[data-theme="dark"] :is(.benefit__desc, .step__desc) { color: #aaa5b5; font-size: 15px; }

body[data-theme="dark"] .trial-note {
  background: transparent;
  border: 1px solid rgba(128, 82, 255, .38);
  border-radius: 24px;
  box-shadow: none;
}
body[data-theme="dark"] .trial-note__badge {
  background: rgba(128, 82, 255, .13);
  border-color: rgba(128, 82, 255, .45);
  color: #c3b2ff;
}
body[data-theme="dark"] .tariff {
  background: #0b0912;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  box-shadow: none;
}
body[data-theme="dark"] .tariff:hover { background: #110d1d; border-color: rgba(167, 137, 255, .55); box-shadow: none; }
body[data-theme="dark"] .tariff.is-selected,
body[data-theme="dark"] .tariff[aria-pressed="true"] {
  background: #130e22;
  border-color: #8052ff;
  box-shadow: inset 0 0 0 1px rgba(128, 82, 255, .4);
}
body[data-theme="dark"] .tariff__save { color: #ffb829; }

body[data-theme="dark"] :is(.checkout-card, .restore-card, .final-cta, .faq-item) {
  background: #0a0910;
  border-color: rgba(255, 255, 255, .15);
  box-shadow: none;
}
body[data-theme="dark"] :is(.input, .textarea, .select) {
  background: #100d19;
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow: none;
}
body[data-theme="dark"] :is(.input, .textarea, .select)::placeholder { color: #918b9f; }
body[data-theme="dark"] :is(.input, .textarea, .select):hover,
body[data-theme="dark"] :is(.input, .textarea, .select):focus {
  border-color: #a789ff;
}
body[data-theme="dark"] .promo-box {
  background: #0f0c17;
  border-color: rgba(255, 255, 255, .14);
}
body[data-theme="dark"] :is(.checkout-card, .restore-card, .final-cta) { border-radius: 24px; }
body[data-theme="dark"] .faq-item { border-radius: 16px; }
body[data-theme="dark"] .faq-item:hover,
body[data-theme="dark"] .faq-item[open] { background: #110d1b; border-color: rgba(128, 82, 255, .45); box-shadow: none; }
body[data-theme="dark"] .final-cta { background: #100b1c; }
body[data-theme="dark"] .footer { background: #050407; border-top-color: rgba(255, 255, 255, .12); }
body[data-theme="dark"] .theme-toggle {
  background: rgba(12, 10, 18, .88);
  border-color: rgba(255, 255, 255, .19);
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  body[data-theme="dark"] .hero { padding-bottom: 38px; }
  .hero__copy { padding-bottom: 0; }
  .hero__visual { width: min(100%, 600px); min-height: 430px; margin: -16px auto 0; }
  html.has-constellation .hero__visual .constellation { left: -10%; width: 120%; top: -8%; height: 115%; }
}
@media (max-width: 600px) {
  body[data-theme="dark"] .hero { padding-top: 56px; }
  body[data-theme="dark"] .hero .h1 { font-size: clamp(48px, 12vw, 72px); margin: 20px 0 24px; }
  body[data-theme="dark"] .hero .lede { font-size: 16px; }
  .hero__visual { min-height: 310px; margin-top: 0; }
  .hero__ctas { gap: 8px; }
  .hero__ctas .btn { width: 100%; }
  body[data-theme="dark"] .h2 { font-size: clamp(38px, 10vw, 58px); }
  body[data-theme="dark"] .section { padding-block: 72px; }
  body[data-theme="dark"] .section--no-top { padding-top: 0; }
  body[data-theme="dark"] .section--tight { padding-block: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html.has-constellation .hero__visual .constellation { animation: none; }
}