/* Emerald sections, shared gold details and readable mint-white copy. */
:root {
  --bg: #08291f;
  --bg-alt: #144b35;
  --text: #f7fcf8;
  --text-soft: #e0f0e6;
  --muted: #cde6d7;
  --line: #44745a;
  --emerald: #76f4ad;
  --emerald-light: #c2ffe2;
  --champagne: #f4d486;
  --action-gold: #ffd45c;
  --support-active-fill: linear-gradient(170deg, #206a47 0%, #1a6242 48%, #104b32 100%);
  --support-active-text: var(--action-gold);
  --gold-fill: linear-gradient(170deg, #a3f9d0 0%, #58e6a8 36%, #1ac989 70%, #08a66e 100%);
  --silver-fill: linear-gradient(175deg, #1d5544 0%, #123d30 100%);
  --panel-fill: linear-gradient(145deg, #1b593f, #103b2c 70%, #0d3227);
  --ui-duration: .2s;
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
  --panel-shadow: inset 0 1px 0 #b4f5cb26, 0 14px 38px -12px #001a1380;
}
body { background: var(--bg); }
/* Use the same feedback timing and emerald halo throughout the green theme. */
.btn, .features .feature, .feature__art, .feature__art svg, .feature h3,
.features .feature-select, .install .guide-detail > summary,
.faq .faq__list > details, .faq .faq__list > details > summary,
.faq .faq__list > details > summary svg {
  transition-duration: var(--ui-duration);
  transition-timing-function: var(--ui-ease);
}
.btn--gold, .btn--silver, .btn--orange { --glow: 118, 244, 173; }
.site-header {
  background: linear-gradient(110deg, #07271ef5, #0d3829f5);
  border-bottom-color: #6cae844f;
  box-shadow: 0 5px 28px #000c092e, inset 0 1px 0 #c2ffe21a;
}
.nav__links a { color: var(--text-soft); }
/* Shared gold labels and numbers; feature illustrations use bright emerald. */
.eyebrow, .facts__list dt, .feature__num, .feature__num--silver,
.quick-steps span, .steps__num, .steps[data-panel="ios"] .steps__num {
  color: var(--champagne);
}
.eyebrow::before { background: linear-gradient(90deg, #bda15c, var(--champagne)); }
.section-title .accent, .cta__title > .accent { color: var(--emerald); }
.topup .section-title .accent { color: var(--action-gold); }
.hero {
  background:
    radial-gradient(ellipse at 80% 44%, #30c18363, transparent 39%),
    radial-gradient(ellipse at 74% 12%, #f4d4861f, transparent 30%),
    linear-gradient(112deg, #041e18 8%, #0b3427 48%, #176448 100%);
}
.hero::before {
  background: url('../img/ks99-stage-optimized.webp?v=d43dfe43d0b6') 60% 35% / cover no-repeat;
  filter: hue-rotate(68deg) saturate(.55);
  opacity: .16;
  mix-blend-mode: screen;
}
.hero::after { background: linear-gradient(180deg, transparent, #0b3527); }
.hero__visual--handheld { position: relative; isolation: isolate; }
.hero__visual--handheld::before {
  content: "";
  position: absolute;
  inset: 8% -10% 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 52% 45%, #78ffbe33, #25d28c12 44%, transparent 70%);
}
.hero__title { text-shadow: 0 3px 24px #00180b1a; }
.hero__app-icon {
  background: radial-gradient(ellipse at 30% 15%, #245e43, #0a2b22 74%);
  border-color: #b1ffcf;
  box-shadow: 0 0 3px #b1ffcf, 0 0 22px #56e6a552, 0 0 60px #30ba6b38, inset 0 1px 1px #e6f9d838;
}
.hero__loading-bar { background: #315847; }
.facts {
  background: linear-gradient(110deg, #164b36, #236b4b 50%, #123e2d);
  border-top-color: #91e9b380;
  border-bottom-color: #73c89859;
  box-shadow: inset 0 1px 0 #caffde1a;
}
.facts__list dd { color: var(--text); }
.about {
  padding-bottom: clamp(40px,4vw,64px);
  background: radial-gradient(ellipse at 12% 5%, #26724e42, transparent 55%), linear-gradient(135deg, #123f2e, #092b22 80%);
}
.about__lead {
  padding: 0;
  color: #eafff1;
  font-weight: 600;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.features {
  background: radial-gradient(ellipse at 50% 0%, #276b4b70, transparent 64%), linear-gradient(160deg, #0a2b22, #103e2e 55%, #07251e);
  border-top: 1px solid #75c49330;
}
.panel {
  background: var(--panel-fill);
  border-color: #528368;
  box-shadow: var(--panel-shadow);
}
.feature__art {
  border-color: #6eb58a66;
  background: radial-gradient(ellipse at 50% 38%, #65e9ab24, transparent 67%), linear-gradient(145deg, #206449, #123c2c);
  box-shadow: inset 0 1px 0 #d0ffe038, 0 6px 20px #03231826;
}
.features .feature { --feature-icon: var(--emerald); }
.features .feature__art svg [stroke="#FFC83D"],
.features .feature__art svg [stroke="#D5DAE0"] { stroke: var(--feature-icon); transition: stroke .2s; }
.features .feature__art svg [fill="#FFC83D"] { fill: var(--feature-icon); transition: fill .2s; }
.features .feature__art svg [fill="#0C0C0E"] { fill: #164a36; }
.feature h3 { color: var(--text); }
/* Show a scannable summary; the existing detail panel keeps the full copy. */
.feature-short { display: none; }
.enhanced .feature-short { display: block; font-size: 17px; line-height: 1.75; }
.enhanced .feature-full { display: none; }
.features .feature:is(.is-selected, :focus-within, .is-touch-pressed) {
  --feature-icon: var(--champagne);
  border-color: #b2ffcf;
  background: linear-gradient(145deg, #21694b, #164c37 65%, #103d2c);
  box-shadow: inset 0 1px 0 #e3ffec99, 0 0 0 1px #9cfcc733, 0 12px 30px #00180f4d, 0 0 26px #67eaa522;
}
.features .feature:is(.is-selected, :focus-within, .is-touch-pressed) h3 { color: var(--action-gold); }
.features .feature:is(.is-selected, :focus-within, .is-touch-pressed) .feature__art {
  border-color: #9ce9bc;
  background: radial-gradient(ellipse at 50% 38%, #f4d48626, transparent 70%), linear-gradient(145deg, #286b4b, #164631);
}
.features .feature-select, .install .guide-detail > summary {
  background: linear-gradient(150deg, #164c36, #0f3c2b);
  border-color: #6eae83;
  color: #e3faea;
  box-shadow: inset 0 1px 0 #c7f5d512;
}
.install .guide-detail > summary { width: 100%; }
.install .guide-detail > summary::before,
.install .guide-detail > summary::after { background: var(--action-gold); }
.features .feature-select[aria-expanded="true"] {
  background: linear-gradient(135deg, #bcf5d5, #76dca9);
  color: #0a3423;
  border-color: #c9f3cf;
}
.feature-detail.panel {
  background: linear-gradient(110deg, #1d6043, #123f2f);
  box-shadow: 0 8px 28px #001d1233;
}
@media (max-width: 700px) {
  .features__grid > .feature-detail {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}
.install {
  background: radial-gradient(ellipse at 80% 15%, #91efb426, transparent 48%), linear-gradient(115deg, #19573c, #276e4e 52%, #154c35);
  border-color: #77bc9466;
}
.enhanced .quick-steps li {
  background: linear-gradient(145deg, #1b583f, #103e2c);
  border-color: #72b98a80;
  box-shadow: inset 0 2px 0 #8fffc242;
}
.quick-steps strong, .guide-detail h3 { color: var(--text); }
.install .guide-detail > ol, .install .guide-detail > ol > li { border-color: #80bc914f; }
.install__card.panel {
  background: linear-gradient(150deg, #206348, #124731 72%, #103a2c);
  border-color: #89d7a4;
  box-shadow: 0 12px 36px #04241766;
}
.install__card-title { color: var(--emerald); }
.app-id__meta { color: var(--champagne); }
.topup {
  padding-bottom: clamp(40px,4vw,64px);
  background: radial-gradient(ellipse at 80% 45%, #d5ba6621, transparent 48%), linear-gradient(135deg, #0a2b22, #124532 58%, #0b3025);
}
.topup__list li {
  background: linear-gradient(145deg, #fcfff5, #e1f0e3);
  border-color: #a3d6b4;
  box-shadow: inset 0 2px 0 #fff, 0 8px 18px #062f2138;
}
.faq {
  background: linear-gradient(125deg, #174d36, #103c2c 65%, #092e23);
  border-top: 1px solid #7ac79438;
}
.faq .faq__list > details {
  background: linear-gradient(125deg, #174e38, #103d2c);
  border-color: #629b77;
  box-shadow: inset 0 1px 0 #c1efcf12;
}
.faq .faq__list > details > summary { color: var(--text); }
.faq .faq__list > details[open] {
  background: linear-gradient(125deg, #21694b, #164d36);
  border-color: #95e6b5;
  box-shadow: 0 6px 22px #062c1d33;
}
.faq .faq__list > details[open] > summary { color: var(--action-gold); }
.faq .faq__list > details > summary svg,
.faq .faq__list > details[open] > summary svg {
  stroke: var(--champagne);
  border-color: #86bd9459;
  background: #0f3b29;
}
.chat.panel {
  background: linear-gradient(110deg, #21694b, #174f36 65%, #103f2c);
  border-color: #91d6a6;
  box-shadow: inset 0 1px 0 #c1efcf12, 0 14px 40px #0426194d;
}
.chat__title { color: var(--action-gold); }
.brand-icon { border-color: #8dd4a466; background: #0c3526; }
.cta__icon { box-shadow: 0 0 0 8px #9af8bd12, 0 0 60px #82e1a529, 0 18px 45px #00170d66; }
.closing {
  border-color: #9cdbab73;
  background: radial-gradient(ellipse at 50% 17%, #36bd7c4a, transparent 51%), radial-gradient(ellipse at 80% 50%, #d2b96512, transparent 40%), linear-gradient(150deg, #0c3226, #154c35 48%, #041f19);
}
.closing::before {
  display: block;
  background: url('../img/ks99-stage-optimized.webp?v=d43dfe43d0b6') 60% 50% / cover no-repeat;
  filter: hue-rotate(68deg) saturate(.55);
  opacity: .12;
  mix-blend-mode: screen;
}
.footer { border-color: #8dcf9d73; }
.btn--gold {
  border-color: #b6f0c6;
  box-shadow: inset 0 1px 0 #f2ffe9aa, 0 16px 35px -15px #31eba27d, 0 3px 6px #001d1459;
}
.btn--silver {
  --entry-border: #69b893;
  background: var(--silver-fill);
  color: #e4fff0;
  border-color: var(--entry-border);
  box-shadow: inset 0 1px 0 #cbf6db33, 0 14px 30px -16px #51d8a54d;
}
.btn--orange {
  background: var(--gold-fill);
  color: #042b1c;
  border-color: #b6f0c6;
  box-shadow: inset 0 1px 0 #f4ffdfb3, 0 14px 30px -15px #31eba27d;
}
.btn--silver:focus-visible, .btn--silver:active, .btn--silver.is-touch-pressed {
  color: var(--action-gold);
  background: linear-gradient(175deg, #24694b, #185b40);
  border-color: var(--entry-border);
  text-shadow: none;
}
.btn--orange:focus-visible, .btn--orange:active, .btn--orange.is-touch-pressed {
  color: var(--support-active-text);
  background: var(--support-active-fill);
  border-color: #caffdf;
  text-shadow: none;
}
.btn--orange:is(:focus-visible, :active, .is-touch-pressed) svg { filter: none; }
.language-switch, .tabs.tabs--sliding { background: #09271f; border-color: #79896770; }
.language-switch__indicator, .tabs__indicator { box-shadow: inset 0 1px 0 #f4ffdfb3, 0 3px 14px #3bc68833; }
/* The hover fills the spare half; the selected pill shapes its curved inner edge. */
.language-switch::before, .tabs.tabs--sliding::before {
  content: "";
  position: absolute;
  inset: 4px 2px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: transparent;
  transition: background .2s;
}
.tabs.tabs--sliding::before { inset-inline: 4px; }
.language-switch__indicator, .tabs.tabs--sliding > .tabs__indicator {
  box-shadow: inset 0 1px 0 #f4ffdfb3, 0 0 0 2px #09271f;
}
@media (hover:hover) and (pointer:fine) {
  .language-switch .language-option[aria-pressed="false"]:hover,
  .tabs.tabs--sliding button[data-tab][aria-pressed="false"]:hover { background: transparent; }
  .language-switch:has(.language-option[aria-pressed="false"]:hover)::before,
  .tabs.tabs--sliding:has(button[data-tab][aria-pressed="false"]:hover)::before { background: #265740; }
}
.menu-toggle, .menu-close, .detail-close { background: linear-gradient(145deg, #163b2d, #0a291f); border-color: #7a906354; }
.mobile-actions { background: #08271ff5; border-color: #b6a16c66; }
@media (hover:hover) and (pointer:fine) {
  .btn--silver:hover { color: var(--action-gold); background: linear-gradient(175deg, #24694b, #185b40); border-color: var(--entry-border); text-shadow: none; }
  .btn--orange:hover { color: var(--support-active-text); background: var(--support-active-fill); border-color: #caffdf; text-shadow: none; }
  .btn--orange:hover svg { filter: none; }
  .features .feature:hover {
    --feature-icon: var(--champagne);
    border-color: #b2ffcf;
    background: linear-gradient(145deg, #21694b, #164c37 65%, #103d2c);
    box-shadow: inset 0 1px 0 #e3ffec99, 0 0 0 1px #9cfcc733, 0 12px 30px #00180f4d, 0 0 26px #67eaa522;
  }
  .features .feature:hover h3 { color: var(--action-gold); }
  .features .feature:hover .feature__art {
    border-color: #9ce9bc;
    background: radial-gradient(ellipse at 50% 38%, #f4d48626, transparent 70%), linear-gradient(145deg, #286b4b, #164631);
  }
  .features .feature-select:hover, .install .guide-detail > summary:hover { color: var(--action-gold); background: #1b563c; border-color: #8ad8a4; }
  .features .feature-select[aria-expanded="true"]:hover { color: #0a3423; background: #c4f7da; }
}
@media (max-width:700px) {
  .enhanced .feature-short { font-size: 14px; line-height: 1.75; }
  .hero { background: radial-gradient(ellipse at 70% 78%, #32bd8063, transparent 40%), linear-gradient(165deg, #06251d, #103f2d 62%, #18573d); }
  .hero::before { opacity: .12; background-position: 70% 20%; }
  .hero::after { background: linear-gradient(180deg, transparent, #12432f); }
  .mobile-actions .btn--silver { background: var(--silver-fill); color: #e4fff0; }
  .mobile-actions .mobile-actions__chat { color: #042b1c; background: var(--gold-fill); border-color: #b6f0c6; }
  .mobile-actions .mobile-actions__chat:focus-visible,
  .mobile-actions .mobile-actions__chat:active,
  .mobile-actions .mobile-actions__chat.is-touch-pressed {
    color: var(--support-active-text);
    background: var(--support-active-fill);
    border-color: #caffdf;
    text-shadow: none;
  }
}

/* All website-entry actions share gold text and currentColor arrows on interaction. */
.btn--silver:focus-visible, .btn--silver:active, .btn--silver.is-touch-pressed,
.mobile-actions .btn--silver:focus-visible, .mobile-actions .btn--silver:active,
.mobile-actions .btn--silver.is-touch-pressed {
  color: var(--action-gold);
  background: linear-gradient(175deg, #24694b, #185b40);
  border-color: var(--entry-border);
  text-shadow: none;
}
@media (hover:hover) and (pointer:fine) {
  .btn--silver:hover, .mobile-actions .btn--silver:hover {
    color: var(--action-gold);
    background: linear-gradient(175deg, #24694b, #185b40);
    border-color: var(--entry-border);
  }
}

@media (hover:hover) and (pointer:fine) {
  .faq .faq__list > details > summary:hover { color: var(--action-gold); }
}

/* Use the supplied glass app icon as one complete image, including its own frame. */
.hero__app-icon.glass-icon,
.brand-icon.glass-icon {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  filter: drop-shadow(0 8px 18px #00281e40);
}
.hero__artwork .hero__app-icon.glass-icon img,
.brand-icon.glass-icon img,
.app-id .brand-icon.glass-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: none;
}

/* The closing icon is the original square artwork, with no second tile or corner crop. */
.closing .cta__icon.glass-icon {
  display: block;
  flex: none;
  width: 128px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: drop-shadow(0 8px 18px #00281e40);
}
.footer__brand img {
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
}