/* ============================================================
   APR – Main Stylesheet
   Design tokens extracted from Figma node 24096:8102
   ============================================================ */






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

:root {
  /* ── Figma: Neutral/Background/1/Rest ── */
  --bg:            #242b35;
  /* ── Figma: Neutral/Background/2/Rest ── */
  --bg-2:          #171c23;
  --bg-card:       #242b35;
  /* ── Figma: Brand/Background/1/Rest ── */
  --yellow:        #fcd900;
  --yellow-border: #c8a800;
  /* ── Derived from #ffd633 = rgb(255,214,51) ── */
  --yellow-glow:   rgba(255, 214, 51, 0.28);
  --yellow-accent: #ffd633;
  /* ── Figma: Neutral/Foreground/1/Rest ── */
  --text-white:    #ffffff;
  /* ── Figma: Neutral/Foreground/on Color/Rest ── */
  --text-1:        #171c23;
  /* ── Figma: Neutral/Foreground/2/Rest ── */
  --text-2:        #bfcad7;
  /* ── Figma: Neutral/Foreground/3/Rest ── */
  --text-3:        #778ca7;
  /* ── Figma: Neutral/Stroke/1/Rest ── */
  --stroke-1:      #344051;
  /* ── Figma: CompoundBrandStroke.Rest ── */
  --brand-stroke:  #479ef5;
  --faq-border:    rgba(59, 90, 255, 0.44);
  --card-radius:   20px;
  --section-x:     108px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text-white);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  line-height: 1.5;
  position: relative; /* anchor for page-level .blue-hue-top */
}

img { display: block; max-width: 100%; }



/* ─────────────────────────────────────────────
   CUSTOM COMPONENTS
───────────────────────────────────────────── */


/* pako...php style */

#myModalLabel{
  font-size: 20px;
  margin-bottom: 15px;
}

#klauzolaOverlay h6{
    font-size:20px;
}

#klauzolaOverlay .tc-modal{
    max-width:550px;   
}


.arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-2);
    border-bottom: 2px solid var(--text-2);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.arrow.open {
    transform: rotate(-135deg);
}

.arrow-left {
    transform: rotate(-225deg);
}

.arrow-right {
    transform: rotate(-45deg);
}

.rreth-slider .arrow{
  width: 15px;
  height: 15px;
}

.nav-row-1 {
  transition: none; /* no transition — JS drives it directly */
  overflow: hidden;
  will-change: max-height, opacity;
}

.plus-sign{
  font-size:20px;
  transition: transform 0.3s;
}
.faq-item.open .plus-sign {
  transform: rotate(45deg);
}

a{
  text-decoration: none;
}

/* language selection on header */
.nav-lang-btn { position: relative; cursor: pointer; }

.nav-lang-dropdown {
  display: none;
  position: fixed;
  background: var(--bg);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
  min-width: 140px;
  z-index: 500;
}
.nav-lang-dropdown.lang-open { display: block; }

.nav-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
}
.nav-lang-option:hover { background: rgba(255,255,255,.07); color: #fff; }

/* hamburger icon on mobile menu on header */
.menu-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}

.menu-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: #000;
  border-radius: 2px;
  background: var(--text-2);
}

.x-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  color: var(--text-2);
}

.x-icon::before,
.x-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
}

.x-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.x-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* arrow on select input on pako.php */
.pako-select-wrap .arrow{
  position: absolute;
  top: 27px;
  right: 40px;
}

/* style for download-app.php */


.apc-hue-download-app{
  position: absolute;
  top: 49px;
  left: 44%;
  transform: translateX(-50%);
  width: 866px;
  height: 1010px;
  background: radial-gradient(ellipse 1000px 1078px at 50% 40%, rgb(255, 230, 40) 1%, rgba(255, 210, 40, 0.1) 30%, transparent 50%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.download-content{
  position: relative;
  overflow: hidden;

}
/* PreLoader Style */
#pageLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
#pageLoader img {
  width: 80px;
  opacity: 0.9;
  animation: loaderPulse 1.2s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%       { transform: scale(1.08); opacity: 1;   }
}
.loader-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #fcd700;
  animation: loaderFill 1.8s ease-out forwards;
}
@keyframes loaderFill {
  from { width: 0; }
  to   { width: 100%; }
}
#pageLoader.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Partner Page Style */
.partner-text{
  font-size: 19px;
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.441;
  letter-spacing: -0.48px;
  width: 95%;
}

.partner-main ul{
  padding-left: 35px;
}

#partner .text-container{
  margin-bottom:70px;
}


/* ─────────────────────────────────────────────
   SHARED COMPONENTS
───────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--yellow);
  color: var(--text-1);
  border: 1px solid var(--yellow-border);
  padding: 20px 36px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,214,51,.55) inset, 0 10px 19px rgba(255,214,51,.28);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255,255,255,.45) 0%, transparent 80%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,214,51,.55) inset, 0 14px 26px rgba(255,214,51,.38);
}
.btn-sm { padding: 10px 20px; font-size: 14px; }

/* gradient text helper */
.grad-text {
  background: linear-gradient(172.94deg, #fff 18.174%, rgba(255,255,255,0) 152.61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────────── */

/* ── Liquid-glass nav ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(22,27,35,.30);
  backdrop-filter: blur(28px) saturate(160%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.07) inset,
              0 -1px 0 0 rgba(255,255,255,.04) inset,
              0 4px 32px rgba(0,0,0,.22);
  transition: background .3s, border-color .3s, box-shadow .3s;
}

.nav.scrolled {
  background: rgba(22,27,35,.60);
  border-bottom-color: rgba(255,255,255,.13);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.08) inset,
              0 -1px 0 0 rgba(255,255,255,.04) inset,
              0 4px 32px rgba(0,0,0,.36);
}

/* ─── Nav Row 1 ─── */
.nav-row-1 {
  height: 64px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-row-1-inner {
  max-width: 1278px;
  width: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo img{
  max-width:30px;
}

.nav-logo-icon {
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  object-fit: contain;
}
.nav-logo-text {
  font-family: 'F37 Ginger Pro', sans-serif;
  font-size: 16.2px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  line-height: 1.2;
  white-space: nowrap;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* APR/eSIM toggle — h:32px w:130px pill, bg #eff2f7@15%, knob #d6b011 */
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 130px;
  height: 32px;
  padding: 2px;
  border-radius: 100px;
  background-color: var(--bg);
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.nav-toggle-knob {
  width: 63px;
  min-width: 63px;
  height: 28px;
  border-radius: 100px;
  background: #d6b011;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-1);
  flex-shrink: 0;
}
.nav-toggle-esim {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
}

/* Language split button — h:32px, bg #eff2f7@18% */
.nav-lang-btn {
  display: flex;
  align-items: stretch;
  height: 32px;
  border-radius: 12px;
  flex-shrink: 0;
  background-color: var(--bg);
}
.nav-lang-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  border-radius: 12px 0 0 12px;
}
.nav-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.nav-lang-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 0 12px 12px 0;
  min-width: 24px;
  transition: transform 0.2s;
}
.nav-lang-btn.lang-open .nav-lang-chevron {
  transform: rotate(180deg);
}
.nav-chevron-img {
  width: 12px;
  height: 12px;
  opacity: .7;
}

/* Top-row tabs (Install App, Rreth Nesh) */
.nav-top-tab {
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  transition: color .2s;
}
.nav-top-tab:hover { color: rgba(255,255,255,.9); }

/* ─── Nav Row 2 ─── */
.nav-row-2 {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
.nav-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
}
.nav-tab-item {
  display: block;
  padding: 12px 10px;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .2s;
  line-height: 20px;
}
.nav-tab-item:hover { color: rgba(255,255,255,.85); }
.nav-tab-item.active { color: rgba(255,255,255,.95); }
.nav-tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  background: #479ef5;
  border-radius: 999px;
}

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */

.hero {
  padding-top: 145px; /* nav height: 2 × 64px rows */
  position: relative;
  overflow: visible; /* allow hue glow to extend above hero */
  background: var(--bg);
}

/* ═══════════════════════════════════════════════
   YELLOW HUE GLOWS  (Figma nodes 24096:8109 / 8104)
   Each has:
   · Two conic-gradient fans from top-left + top-right corners (opacity 0.6)
   · A blur-66px horizontal band underneath (opacity 0.6)
   Exact conic stops from Figma SVG foreignObject
═══════════════════════════════════════════════ */

/* Shared conic stop shorthand (for DRY reference in comments):
   from 270deg at 0% 0%  → left fan pointing down-right
   from  90deg at 100% 0% → right fan pointing down-left
   stops: #ffe931 0.5% → #c2b21a 10.8% → #867903 21% → transparent 33.6%
*/

.blue-hue {
  position: absolute;
  width: 1612px;
  height: 831px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* ── TOP HUE: page-level absolute, fans from corners, glow fans downward ── */
.blue-hue-top {
  /* Figma: x=-89px, y=-342px relative to page frame */
  top: -342px;
  left: 50%;
  transform: translateX(-50%);
}

/* Conic fans — exact Figma stops (node 24096:8111/8112), opacity 0.60 */
.blue-hue-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Right fan: from top-right corner — exact Figma gradient */
    conic-gradient(from 90deg at 100% 0%,
      rgba(233,225,73,.18)   -0.685%,
      rgba(244,230,61,.59)   -0.091%,
      rgb(255,234,49)         0.503%,
      rgb(194,178,26)        10.822%,
      rgb(164,149,14)        15.981%,
      rgb(134,121,3)         21.14%,
      rgba(105,96,9,.783)    24.266%,
      rgba(77,71,14,.566)    27.391%,
      rgba(48,47,20,.348)    30.517%,
      rgba(19,22,26,.131)    33.642%,
      rgba(7,11,22,0)        83.534%,
      rgba(0,0,0,0)          97.148%,
      rgba(116,112,36,.09)   98.232%,
      rgba(175,169,54,.135)  98.773%,
      rgba(233,225,73,.18)   99.315%,
      rgba(244,230,61,.59)   99.909%,
      rgb(255,234,49)       100.503%
    ),
    /* Left fan: from top-left corner — same gradient, mirrored */
    conic-gradient(from 270deg at 0% 0%,
      rgba(233,225,73,.18)   -0.685%,
      rgba(244,230,61,.59)   -0.091%,
      rgb(255,234,49)         0.503%,
      rgb(194,178,26)        10.822%,
      rgb(164,149,14)        15.981%,
      rgb(134,121,3)         21.14%,
      rgba(105,96,9,.783)    24.266%,
      rgba(77,71,14,.566)    27.391%,
      rgba(48,47,20,.348)    30.517%,
      rgba(19,22,26,.131)    33.642%,
      rgba(7,11,22,0)        83.534%,
      rgba(0,0,0,0)          97.148%,
      rgba(116,112,36,.09)   98.232%,
      rgba(175,169,54,.135)  98.773%,
      rgba(233,225,73,.18)   99.315%,
      rgba(244,230,61,.59)   99.909%,
      rgb(255,234,49)       100.503%
    );
  opacity: 0.6;
}

/* Blurred band — Figma node 24096:8113: top=52px left=-89px w=1612px h=437px blur=66px opacity=0.60
   Figma has no fill; uses backdrop-blur to pick up fan colors. CSS approximation: gradient from fan mid-tones */
.blue-hue-top::after {
  content: '';
  position: absolute;
  top: 52px;
  left: -89px;
  width: 1612px;
  height: 437px;
  background:
    conic-gradient(from 90deg at 100% 0%,
      rgb(255,234,49)         0.503%,
      rgb(194,178,26)        10.822%,
      rgb(164,149,14)        15.981%,
      rgb(134,121,3)         21.14%,
      rgba(105,96,9,.783)    24.266%,
      rgba(77,71,14,.566)    27.391%,
      rgba(48,47,20,.348)    30.517%,
      rgba(19,22,26,.131)    33.642%,
      transparent            83.534%
    ),
    conic-gradient(from 270deg at 0% 0%,
      rgb(255,234,49)         0.503%,
      rgb(194,178,26)        10.822%,
      rgb(164,149,14)        15.981%,
      rgb(134,121,3)         21.14%,
      rgba(105,96,9,.783)    24.266%,
      rgba(77,71,14,.566)    27.391%,
      rgba(48,47,20,.348)    30.517%,
      rgba(19,22,26,.131)    33.642%,
      transparent            83.534%
    ),
    radial-gradient(ellipse 55% 60% at 50% 0%, rgba(134,121,3,.30) 0%, transparent 100%);
  filter: blur(66px);
  opacity: 0.6;
}

/* ── BOTTOM HUE: inside footer, same conic fans, glow from footer top ── */
.blue-hue-bottom {
  top: -342px;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom hue fans — same exact Figma stops as top hue */
.blue-hue-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 90deg at 100% 0%,
      rgba(233,225,73,.18)   -0.685%,
      rgba(244,230,61,.59)   -0.091%,
      rgb(255,234,49)         0.503%,
      rgb(194,178,26)        10.822%,
      rgb(164,149,14)        15.981%,
      rgb(134,121,3)         21.14%,
      rgba(105,96,9,.783)    24.266%,
      rgba(77,71,14,.566)    27.391%,
      rgba(48,47,20,.348)    30.517%,
      rgba(19,22,26,.131)    33.642%,
      rgba(7,11,22,0)        83.534%,
      rgba(0,0,0,0)          97.148%,
      rgba(116,112,36,.09)   98.232%,
      rgba(175,169,54,.135)  98.773%,
      rgba(233,225,73,.18)   99.315%,
      rgba(244,230,61,.59)   99.909%,
      rgb(255,234,49)       100.503%
    ),
    conic-gradient(from 270deg at 0% 0%,
      rgba(233,225,73,.18)   -0.685%,
      rgba(244,230,61,.59)   -0.091%,
      rgb(255,234,49)         0.503%,
      rgb(194,178,26)        10.822%,
      rgb(164,149,14)        15.981%,
      rgb(134,121,3)         21.14%,
      rgba(105,96,9,.783)    24.266%,
      rgba(77,71,14,.566)    27.391%,
      rgba(48,47,20,.348)    30.517%,
      rgba(19,22,26,.131)    33.642%,
      rgba(7,11,22,0)        83.534%,
      rgba(0,0,0,0)          97.148%,
      rgba(116,112,36,.09)   98.232%,
      rgba(175,169,54,.135)  98.773%,
      rgba(233,225,73,.18)   99.315%,
      rgba(244,230,61,.59)   99.909%,
      rgb(255,234,49)       100.503%
    );
  opacity: 0.6;
}

.blue-hue-bottom::after {
  content: '';
  position: absolute;
  top: 0;
  left: -89px;
  width: 1612px;
  height: 437px;
  background:
    conic-gradient(from 90deg at 100% 0%,
      rgb(255,234,49)         0.503%,
      rgb(194,178,26)        10.822%,
      rgb(164,149,14)        15.981%,
      rgb(134,121,3)         21.14%,
      rgba(105,96,9,.783)    24.266%,
      rgba(77,71,14,.566)    27.391%,
      rgba(48,47,20,.348)    30.517%,
      rgba(19,22,26,.131)    33.642%,
      transparent            83.534%
    ),
    conic-gradient(from 270deg at 0% 0%,
      rgb(255,234,49)         0.503%,
      rgb(194,178,26)        10.822%,
      rgb(164,149,14)        15.981%,
      rgb(134,121,3)         21.14%,
      rgba(105,96,9,.783)    24.266%,
      rgba(77,71,14,.566)    27.391%,
      rgba(48,47,20,.348)    30.517%,
      rgba(19,22,26,.131)    33.642%,
      transparent            83.534%
    ),
    radial-gradient(ellipse 55% 60% at 50% 0%, rgba(134,121,3,.30) 0%, transparent 100%);
  filter: blur(66px);
  opacity: 0.6;
}

.hero-image-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 20px 0 0;
}

.hero-globe-container {
  position: relative;
  width: 95%;
  max-width: 1186px;
  height: 544px;
  background: linear-gradient(160deg, #1a2a4a 0%, #0d1930 55%, #171c23 100%);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-real-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── Hero Slider ── */
.hero-slides {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  border-radius: inherit;
  pointer-events: none;
}
.hero-slide--active {
  opacity: 1;
  pointer-events: auto;
}

/* Arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(28,33,42,.20);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.hero-arrow:hover {
  background: rgba(252,215,0,.15);
  border-color: rgba(252,215,0,.4);
  color: #fcd700;
}
.hero-arrow--prev { left: 20px; }
.hero-arrow--next { right: 20px; }

/* Dots */
.hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, width 0.25s;
}
.hero-dot--active {
  background: #fcd700;
  width: 24px;
  border-radius: 4px;
}

.globe {
  position: absolute;
  width: 560px;
  height: 560px;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
}
.globe-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 80px rgba(30,80,200,.35));
}

.hero-banner {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(252,215,0,.1);
  border: 1px solid rgba(252,215,0,.28);
  border-radius: 100px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--yellow);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
  z-index: 2;
}

.hero-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
}
.hero-badge-inner {
  background: rgba(28,33,42,.8);
  border: 1px solid rgba(252,215,0,.25);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(3px);
}
.hero-badge-dot {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* ─────────────────────────────────────────────
   BRAND LOGOS STRIP
───────────────────────────────────────────── */

.logos-strip {
  overflow: hidden;
  padding: 24px 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  margin-top: 30px;
}
.logos-strip.is-dragging { cursor: grabbing; }

.logos-inner {
  max-width: 92%;
  margin: 0 auto;
  overflow: hidden;
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
}
.logos-track.paused { animation-play-state: paused !important; }

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--logos-half-w)); }
}

.logo-item {
  height: 30px;
  width: auto;
  object-fit: contain;
  opacity: .55;
  flex-shrink: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.logos-strip:hover .logo-item { opacity: .72; }

/* ─────────────────────────────────────────────
   PRICING TOGGLE
───────────────────────────────────────────── */

.pricing-toggle-wrapper {
  display: flex;
  justify-content: center;
  padding: 48px 0 24px;
}
.pricing-toggle {
  background: rgba(255,255,255,.07);
  border-radius: 100px;
  padding: 5px;
  display: flex;
  gap: 4px;
}
.toggle-option {
  padding: 12px 34px;
  border-radius: 100px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
  color: var(--text-2);
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
}
.toggle-option.active {
  background: var(--yellow);
  color: var(--text-1);
  box-shadow: 0 4px 14px var(--yellow-glow);
}

/* ─────────────────────────────────────────────
   SERVICE CARDS SECTION
───────────────────────────────────────────── */

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 48px 108px;
}

.section-heading {
  text-align: center;
  font-size: 52px;
  font-weight: 600;
  line-height: 77px;
  letter-spacing: -1.04px;
  background: linear-gradient(172.94deg, #fff 18.174%, rgba(255,255,255,0) 152.61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  max-width: 941px;
}

.cards-grid {
  display: flex;
  justify-content: center;
  gap: 28px;
  width: 100%;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
  flex: 0 0 286px;
  transition: transform .25s;
}
.service-card:hover { transform: translateY(-4px); }

.service-card-img {
  width: 100%;
  aspect-ratio: 1080 / 1441;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  margin: 15px 0;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card-body {
  display: flex;
  justify-content: center;
}
.plan-badge {
  display: inline-block;
  background: rgba(255,214,51,.1);
  border: 1px solid rgba(255,214,51,.22);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--yellow);
  margin-bottom: 12px;
}
.service-card-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 18px;
  letter-spacing: -.5px;
}
.service-card-price span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
}
.service-card-btn {
  background: var(--yellow);
  border: 1px solid #c7ab38;
  border-radius: 100px;
  padding: 20px 36px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 0 0 1px rgba(248,210,73,.55) inset, 0 10px 19px rgba(255,214,51,.28);
  position: relative;
  overflow: hidden;
}
.service-card-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255,255,255,.45) 0%, transparent 80%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.service-card-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,214,51,.55) inset, 0 12px 22px rgba(255,214,51,.36);
}

.cards-row-2 {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.cards-row-2 .service-card { flex: 0 0 286px; }

/* ─────────────────────────────────────────────
   APR SERVICES CAROUSEL
───────────────────────────────────────────── */

.apc-section {
  position: relative;
  padding: 72px 0 60px;
}

/* yellow ambient glow */
.apc-hue {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 420px;
  background: radial-gradient(ellipse 700px 280px at 50% 40%,
    rgba(255, 230, 40, 0.38) 0%,
    rgba(255, 210, 40, 0.18) 40%,
    transparent 70%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.apc-inner {
  position: relative;
  padding-left: var(--section-x); /* 108px */
}

/* overflow clip for the card track */
.apc-viewport {
  overflow: hidden;
  height: 490px; /* tallest (active) card */
}

.apc-track {
  display: flex;
  align-items: flex-end;
  gap: 35px;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Card base ── */
.apc-card {
  position: relative;
  flex-shrink: 0;
  width: 343px;
  height: 400px;
  border-radius: 21px;
  overflow: hidden;
  cursor: pointer;
  transition:
    width  0.5s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.apc-card--active {
  width: 420px;
  height: 490px;
}

/* background photo */
.apc-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 21px;
}

/* bottom-to-top dark gradient */
.apc-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(68, 62, 56, 0) 0%, rgba(17, 17, 21, 0.5) 100%);
  border-radius: 21px;
  z-index: 1;
}

/* colour tint (multiply) */
.apc-card__tint {
  position: absolute;
  inset: 0;
  border-radius: 21px;
  mix-blend-mode: multiply;
  z-index: 1;
}
.apc-tint--grey   { background: rgba(105, 105, 105, 0.2); }
.apc-tint--yellow { background: rgba(248, 210, 73, 0.2); }

/* dark left panel */
.apc-card__dark {
  position: absolute;
  inset: 0 auto 0 0;
  width: 150px;
  background: #171c23;
  border-radius: 17px 0 0 17px;
  z-index: 2;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.apc-card--active .apc-card__dark { width: 182px; }

/* heading */
.apc-card__title {
  position: absolute;
  z-index: 3;
  left: 19px;
  top: 29px;
  width: 269px;
  font-family: 'F37 Ginger Pro', sans-serif;
  font-weight: 600;
  font-size: 41px;
  line-height: 1.2;
  letter-spacing: -0.83px;
  background: linear-gradient(164deg, #ffffff 18%, rgba(255, 255, 255, 0) 152%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: font-size 0.5s, letter-spacing 0.5s, left 0.5s, top 0.5s, width 0.5s;
}
.apc-card--active .apc-card__title {
  left: 24px;
  top: 36px;
  font-size: 50px;
  letter-spacing: -1.01px;
  width: 255px;
}

/* subtitle */
.apc-card__sub {
  position: absolute;
  z-index: 3;
  left: 26px;
  top: 157px;
  transform: translateY(-50%);
  width: 227px;
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.055px;
  color: #bfcad7;
  transition: font-size 0.5s, color 0.5s, left 0.5s, top 0.5s, width 0.5s;
}
.apc-card--active .apc-card__sub {
  left: 24px;
  top: 209px;
  font-size: 20px;
  color: #ffffff;
  width: 255px;
}

/* icon (bottom-left) */
.apc-card__icon {
  position: absolute;
  z-index: 3;
  left: 32px;
  bottom: 27px;
  width: 73px;
  height: 73px;
  transition: width 0.5s, height 0.5s, bottom 0.5s, left 0.5s;
}
.apc-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.apc-card--active .apc-card__icon {
  left: 39px;
  bottom: 37px;
  width: 80px;
  height: 80px;
}

/* ── Navigation arrows ── */
.apc-arrow {
  position: absolute;
  top: 0px;    /* mid of tallest card */
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  border-radius: 16px;
  border: 1px solid var(--stroke-1);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-white);
  z-index: 10;
  transition: background 0.2s;
}
.apc-arrow:hover { background: rgba(72, 84, 102, 0.9); }
.apc-arrow--prev { left:  calc(var(--section-x) - 64px); } /* 44px from section left */
.apc-arrow--next { right: calc(var(--section-x) - 64px); } /* symmetric right       */

/* ── Dots ── */
.apc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8.6px;
  margin-top: 32px;
  background: rgba(60, 60, 60, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 15px;
  padding: 11px 16px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.apc-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.3s, transform 0.3s;
}
.apc-dot--active {
  background: #ffffff;
  transform: scale(1.15);
}

/* ─────────────────────────────────────────────
   AI SECTION
───────────────────────────────────────────── */

.ai-section {
  padding: 80px var(--section-x) 64px;
  text-align: center;
}
.ai-heading {
  font-size: 52px;
  font-weight: 600;
  line-height: 77px;
  letter-spacing: -1.04px;
  background: linear-gradient(172.94deg, #fff 18.174%, rgba(255,255,255,0) 152.61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
  max-width: 756px;
  margin-left: auto;
  margin-right: auto;
}
.ai-subtitle {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: rgba(255,255,255,.48);
  line-height: 1.441;
  max-width: 717px;
  margin: 0 auto;
  letter-spacing: -.48px;
}

/* ─────────────────────────────────────────────
   NEWS CAROUSEL
───────────────────────────────────────────── */

.news-section {
  padding: 0 0 80px;
  position: relative;
  overflow: hidden;
}
.news-inner {
  position: relative;
  margin: 0 172px;
  z-index: 1;
}
.news-track-outer {
  overflow: hidden;
}
.news-track {
  display: flex;
  gap: 35px;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}

/* ── News cards: full-bleed photo + white left panel ── */
.news-card {
  flex: 0 0 343px;
  height: 400.167px;
  border-radius: 21px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transition: transform .25s;
}
.news-card:hover { transform: translateY(-4px); }
.news-card-featured { flex: 0 0 419.624px; height: 489.561px; }

.nc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.nc-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(68,62,56,0) 0%, rgba(17,17,21,.5) 100%);
  border-radius: inherit;
  z-index: 1;
}

.nc-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
}
.nc-overlay-gray   { background: rgba(105,105,105,.2);  mix-blend-mode: multiply; }
.nc-overlay-yellow { background: rgba(248,210,73,.2);   mix-blend-mode: multiply; }

.nc-white-panel {
  position: absolute;
  top: 0; left: 0;
  width: 150px;
  height: 100%;
  background: #fff;
  border-radius: 17.15px 0 0 17.15px;
  z-index: 3;
}
.news-card-featured .nc-white-panel { width: 182px; }

.nc-title {
  position: absolute;
  top: 29px;
  left: 19px;
  width: 270px;
  font-size: 41.31px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.8262px;
  background: linear-gradient(164.34deg, #fff 18.174%, rgba(255,255,255,0) 152.61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: 4;
  margin: 0;
}
.news-card-featured .nc-title {
  font-size: 50.539px;
  letter-spacing: -1.0108px;
  width: 255px;
  top: 36px;
  left: 24px;
  background-image: linear-gradient(160.12deg, #fff 18.174%, rgba(255,255,255,0) 152.61%);
}

.nc-subtitle {
  position: absolute;
  top: 156.92px;
  transform: translateY(-50%);
  left: 26px;
  width: 227px;
  font-size: 15px;
  color: #38465a;
  line-height: 1.2;
  letter-spacing: -0.0551px;
  z-index: 4;
  margin: 0;
}
.news-card-featured .nc-subtitle {
  top: 208.77px;
  transform: translateY(-50%);
  left: 24px;
  width: 255px;
  font-size: 20px;
  color: #262e39;
  letter-spacing: -0.0674px;
}

.nc-icon {
  position: absolute;
  left: 32px;
  bottom: 28px;
  width: 68px;
  height: 68px;
  object-fit: contain;
  z-index: 5;
}
.news-card-featured .nc-icon {
  left: 38.9px;
  bottom: 40.27px;
  width: 71.6px;
  height: 71.71px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 65px; height: 65px;
  padding: 10px;
  background: #dbe1e9;
  border: 1px solid #b7c3d3;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  z-index: 10;
}
.carousel-btn:hover { background: #cdd4de; }
.carousel-prev { left: -64px; }
.carousel-next { right: -64px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8.586px;
  margin-top: 32px;
  /* pill container — Figma: px-15.741px py-11.448px rounded-15px
     backdrop-blur 97.249px, bg rgba(248,248,248,0.7) at 56% opacity */
  padding: 11.448px 15.741px;
  border-radius: 15px;
  background: rgba(248,248,248,0.39); /* 0.7 × 0.56 ≈ 0.39 */
  backdrop-filter: blur(97.249px);
  -webkit-backdrop-filter: blur(97.249px);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.dot {
  width: 11.448px; height: 11.448px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: width .25s, background .25s, border-radius .25s;
  flex-shrink: 0;
}
.dot.active {
  width: 22.9px;
  border-radius: 5.724px;
  background: var(--yellow);
}

/* ─────────────────────────────────────────────
   GOOGLE RATING
───────────────────────────────────────────── */

.reviews-section {
  padding: 108px 0 72px;
  overflow: hidden;
}
.reviews-header {
  text-align: center;
  padding: 0 var(--section-x);
  margin-bottom: 48px;
}
.google-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}
.google-logo { height: 73px; width: auto; object-fit: contain; }
.rating-word {
  font-size: 70px;
  font-weight: 600;
  line-height: 77px;
  letter-spacing: -1.4px;
  background: linear-gradient(163.99deg, #fff 18.174%, rgba(255,255,255,0) 152.61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.reviews-subtitle {
  font-size: 24px;
  color: rgba(255,255,255,.48);
  max-width: 717px;
  margin: 0 auto 24px;
  line-height: 1.44;
  letter-spacing: -.48px;
}
.score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.score-num {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-white);
}
.stars-img {
  height: 24px;
  width: 136px;
  object-fit: contain;
}
.review-count {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* Testimonials */
.testimonials-wrapper { position: relative; }
.testi-row {
  display: flex;
  gap: 24px;
  padding: 0 0 24px;
  width: max-content;
}
.testi-row-1 { padding-left: var(--section-x); }
.testi-row-2 { padding-left: calc(var(--section-x) - 120px); }

.testi-card {
  width: 492px;
  background: var(--bg-2);
  border-radius: 24px;
  padding: 24px;
  flex-shrink: 0;
  gap: 25px;
  display: flex;
  flex-direction: column;
}
.testi-top {
  display: flex;
  align-items: center;
  gap: 17px;
}
.testi-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e0e8f0;
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-white);
  margin-bottom: 2px;
}
.testi-handle { font-size: 14px; color: var(--text-2); }
.testi-text { font-size: 16px; color: var(--text-2); line-height: 1.55; }
.testi-highlight { color: var(--yellow-accent); font-weight: 500; }

.fade-left, .fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 180px;
  pointer-events: none;
  z-index: 5;
}
.fade-left  { left: 0;  background: linear-gradient(90deg,  var(--bg) 0%, transparent 100%); }
.fade-right { right: 0; background: linear-gradient(-90deg, var(--bg) 0%, transparent 100%); }

.reviews-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ─────────────────────────────────────────────
   DOWNLOAD APP
───────────────────────────────────────────── */

.download-section {
  padding: 80px var(--section-x);
}
.download-inner {
  max-width: 1150px;
  margin: 0 auto;
}
.download-header {
  text-align: center;
  margin-bottom: 64px;
}
.download-title {
  font-size: 68px;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: -1.36px;
  background: linear-gradient(177.47deg, #fff 11.53%, rgba(255,255,255,0) 109.53%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}
.download-subtitle {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: rgba(255,255,255,.48);
  max-width: 717px;
  margin: 0 auto;
  line-height: 1.441;
  letter-spacing: -.48px;
}

.download-content {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 470px;
}

.download-glow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 901px;
  height: 130px;
  background: radial-gradient(ellipse 60% 60% at 50% 80%, rgba(255,214,51,.14) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.phones-wrap {
  position: relative;
  width: 490px;
  height: 480px;
  flex-shrink: 0;
}

.phone {
  position: absolute;
  box-shadow: 0 40px 80px rgba(0,0,0,.55);
}
.phone-back {
  width: 285px;
  left: 0; top: 0;
  z-index: 2;
}
.phone-front {
  width: 261px;
  right: 14px; bottom: 0;
  z-index: 1;
}

.phone-notch {
  width: 90px; height: 24px;
  background: #000;
  border-radius: 0 0 14px 14px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.phone-screen {
  flex: 1;
  background: linear-gradient(170deg, #1a2235 0%, #0c1320 100%);
  height: calc(100% - 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.phone-app-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.phone-logo-circle {
  width: 56px; height: 56px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px var(--yellow-glow);
}

.store-buttons {
  display: flex;
  flex-direction: column;
  gap: 12.27px;
  align-self: center;
  flex-shrink: 0;
}
.store-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  border: none;
  border-radius: 6px;
  padding: 12.27px 12.27px;
  cursor: pointer;
  transition: opacity .2s;
  text-decoration: none;
  width: 184px;
  height: 61.33px;
  overflow: hidden;
}
.store-btn:hover { opacity: .9; }
.store-btn-text { display: flex; flex-direction: column; gap: 2px; }
.store-small { font-size: 11px; color: var(--text-1); text-transform: uppercase; letter-spacing: .2px; }
.store-big   { font-size: 18px; font-weight: 600; color: var(--text-1); letter-spacing: -.3px; }

/* ─────────────────────────────────────────────
   FAQ
───────────────────────────────────────────── */

.faq-section {
  padding: 80px 145px;
}
.faq-inner {
  max-width: 1150px;
  margin: 0 auto;
  display: flex;
  gap: 112px;
  align-items: flex-start;
}
.faq-left {
  flex: 0 0 392px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: sticky;
  top: 100px;
}
.faq-heading {
  font-size: 68.636px;
  font-weight: 700;
  line-height: 77px;
  letter-spacing: -1.37px;
  background: linear-gradient(155.88deg, #fff 18.174%, rgba(255,255,255,0) 152.61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-right { flex: 1; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--bg-2);
  border: 1px solid var(--faq-border);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: border-color .2s;
}
.faq-item:hover { border-color: rgba(59,90,255,.65); }

.faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 16px;
  cursor: pointer;
  user-select: none;
}
.faq-q {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-white);
  line-height: 24.552px;
}
.faq-icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
  transition: transform .25s;
  object-fit: contain;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s;
  padding: 0 16px;
}
.faq-item.open .faq-answer {
  max-height: 200px;
  padding: 0 16px 24px;
}
.faq-answer p {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ─────────────────────────────────────────────
   RRETH NESH SECTION
───────────────────────────────────────────── */

.rreth-section {
  padding: 80px 0;
  overflow: visible;
}
.rreth-inner {
  max-width: 1004px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
}
.rreth-heading {
  font-family: 'F37 Ginger Pro', sans-serif;
  font-size: 68px;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: -1.36px;
  text-align: center;
  background: linear-gradient(177.47deg, #fff 11.53%, rgba(255,255,255,0) 109.53%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Rreth Nesh slider ─── */
.rreth-slider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.rreth-slides-outer {
  flex: 1;
  overflow: hidden;
}
.rreth-slides-track {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.rreth-slide {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.rreth-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.rreth-slide-label {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-white);
  line-height: 24.552px;
}
.rreth-slide-text {
  font-size: 24px;
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.441;
  letter-spacing: -0.48px;
  width:80%;
}
.rreth-arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 -24px;
  z-index: 2;
  margin-bottom: 150px;
}
.rreth-arrow:hover { opacity: .7; }
.rreth-arrow-icon {
  width: 20px;
  height: 17.5px;
  display: block;
}
.rreth-arrow-icon--left {
  transform: rotate(180deg);
}

/* ─── Rreth Nesh brand (logo below slides) ─── */
.rreth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rreth-brand-icon {
  width: 38.5px;
  height: 38.5px;
}
.rreth-brand-text {
  font-family: 'F37 Ginger Pro', sans-serif;
  font-size: 16.15px;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   SITE FOOTER  (Figma node 24096:8590)
───────────────────────────────────────────── */

/* Outer: border-top, px-156px, pt-1px */
.site-footer {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 0 156px;
  position: relative;
}

/* Inner: max-width 1128px centered */
.site-footer-inner {
  max-width: 1128px;
  width: 100%;
  margin: 0 auto;
}

/* Footer top: height 336px, border-bottom */
.site-footer-top {
  display: flex;
  align-items: stretch;
  min-height: 336px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-top: 80px;
  padding-bottom: 41px;
  gap: 0;
}

/* Brand column: width 444px (39.4% of 1128px) */
.site-footer-brand {
  width: 444px;
  min-width: 444px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Logo link: icon (38.5px) + text gap 12.4px */
.site-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.site-footer-logo-icon {
  width: 39px;
  height: 39px;
  flex-shrink: 0;
  object-fit: contain;
}
.site-footer-logo-text {
  font-family: 'F37 Ginger Pro', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  line-height: 1.2;
  white-space: nowrap;
}

/* Social icons: gap 9px, 26×26px rounded-5px */
.site-footer-social {
  display: flex;
  align-items: center;
  gap: 9px;
}
.site-footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .2s;
}
.site-footer-social-btn:hover { opacity: 1; }
.site-footer-social-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nav columns: flex 1, fill remaining width (684px) */
.site-footer-nav {
  display: flex;
  flex: 1;
  gap: 0;
}

/* Column: flex-1, pr-16px, gap-20px, font Inter 14px */
.site-footer-col {
  flex: 1;
  padding-right: 16px;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.site-footer-col-2 {
  padding-top: 34px;
}

/* Column heading: Inter Medium 14px, lh 20px, white */
.site-footer-col-heading {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255,255,255,.95);
  margin: 0;
}

/* Links list: gap-20px, Inter Regular 14px, color #43556e adapted */
.site-footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer-col-links a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
  display: block;
}
.site-footer-col-links a:hover { color: rgba(255,255,255,.75); }

/* Footer bottom: h-120px, pt-55px pb-114px, justify-between */
.site-footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 55px;
  padding-bottom: 55px;
  padding-right: 16px;
}

/* Legal links: Privacy Policy · Terms of Conditions */
.site-footer-legal {
  display: flex;
  align-items: center;
  gap: 0;
}
.site-footer-legal a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
}
.site-footer-legal a:hover { color: rgba(255,255,255,.75); }
.site-footer-dot {
  font-size: 14px;
  line-height: 20px;
  color: rgba(255,255,255,.4);
  padding: 0 16px;
}

/* Copyright: Inter Regular 14px, width 242px */
.site-footer-copyright {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255,255,255,.4);
  width: 242px;
  text-align: right;
  margin: 0;
}

/* ─────────────────────────────────────────────
   NAV HAMBURGER (hidden on desktop)
───────────────────────────────────────────── */

.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   MOBILE  @media (max-width: 768px)
   All rules below are mobile-only overrides.
   Desktop layout is untouched.
───────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Body ── */
  body {
    min-width: 0;
  }

  /* ── NAV ── */
  .nav-row-1 {
    height: 63px;
  }
  .nav-row-1-inner {
    padding: 0 20px;
  }
  .nav-logo-text {
    white-space: normal;
    line-height: 1.15;
    max-width: 140px;
    font-size: 14px;
  }
  .nav-controls {
    display: none;
  }
  .nav-row-2 {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }

  /* ── HERO ── */
  .hero {
    padding-top: 80px;
  }
  .hero-globe-container {
    height: 280px;
    border-radius: 16px;
  }
  .hero-image-wrapper {
    padding: 12px 12px 0;
  }

  /* yellow ambient glow */
  .apc-hue {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 320px;
    background: radial-gradient(ellipse 700px 280px at 50% 40%,
      rgba(255, 230, 40, 0.38) 0%,
      rgba(255, 210, 40, 0.18) 40%,
      transparent 70%);
    filter: blur(60px);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
  }

  /* ── APR Services Carousel (mobile) ── */
  .apc-section {
    padding: 40px 0 36px;
  }
  .apc-inner {
    padding-left: 0;
  }
  .apc-viewport {
    height: 370px;
  }
  .apc-track {
    gap: 16px;
  }
  .apc-card {
    width: 260px;
    height: 310px;
  }
  .apc-card--active {
    width: 300px;
    height: 360px;
  }
  .apc-arrow {
    display: none;
  }
  .apc-dots {
    margin-top: 20px;
  }

  /* Download our app */
  ..phones-wrap{
    width: 490px;
    position: absolute;
  }

  .phone-back{
    width: 230px;
  }
  .phone-front {
    width: 200px;
    right: 75px;
    bottom: 55px;
  }

  .store-buttons{
    position: absolute;
    top: 96px;
    right: 0px;
    gap: 0.73px;
  }

  /* ── Footer apr logo ── */
  .site-footer-logo{
    flex-direction: column;
  }
   /* ── download-app.php light hue ── */
  .apc-hue-download-app{
      top: 0px;
      background: radial-gradient(ellipse 701px 307px at 50% 40%, rgb(255, 230, 40) 1%, rgba(255, 210, 40, 0.1) 30%, transparent 50%);
  }

  .partner-main .text-container{
    display:none;
  }

  /* ── LOGOS STRIP ── */
  .logos-strip {
    padding: 18px 0;
  }
  .logo-item {
    height: 20px;
  }

  /* ── PRICING TOGGLE ── */
  .pricing-toggle-wrapper {
    padding: 28px 20px 14px;
  }
  .toggle-option {
    padding: 8px 20px;
    font-size: 14px;
  }

  /* ── SERVICE CARDS ── */
  .section {
    padding: 32px 20px;
    gap: 24px;
  }
  .section-heading {
    font-size: 20px;
    line-height: 25px;
    letter-spacing: -0.4px;
  }
  .cards-grid {
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }
    .service-card {
      flex: 0 0 auto;
      width: 85%;
      margin-bottom: 10px;
    }
    .service-card-body{
      margin:10px 0;
    }

    .cards-row-2 {
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 16px;
    }
    .cards-row-2 .service-card {
      flex: 0 0 auto;
    }
    .service-card-btn {
      padding: 10.32px 18.576px;
      border-radius: 51.599px;
      font-size: 16px;
      box-shadow: 0 0 0 1px rgba(248,210,73,.55) inset, 0 10px 19px rgba(248,210,73,.28);
    }

  /* ── AI SECTION ── */
  .ai-section {
    padding: 40px 20px 32px;
  }
  .ai-heading {
    font-size: 20px;
    line-height: 25.03px;
    letter-spacing: -0.4px;
  }
  .ai-subtitle {
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  /* ── NEWS CAROUSEL ── */
  .news-section {
    padding: 0 0 48px;
  }
  .news-inner {
    margin: 0 16px;
  }
  .carousel-prev { left: -20px; }
  .carousel-next { right: -20px; }
  .carousel-btn {
    width: 44px;
    height: 44px;
  }

  /* ── GOOGLE RATING ── */
  .reviews-section {
    padding: 48px 0 32px;
  }
  .reviews-header {
    padding: 0 20px;
  }
  .rating-word {
    font-size: 35.244px;
    line-height: 38.768px;
    letter-spacing: -0.7049px;
  }
  .google-logo {
    height: 36.552px;
  }
  .reviews-subtitle {
    font-size: 14px;
    letter-spacing: -0.28px;
  }
  .score-num {
    font-size: 13.261px;
  }
  .stars-img {
    height: 19.892px;
    width: auto;
  }
  .review-count {
    font-size: 9.946px;
  }

  /* ── DOWNLOAD ── */
  .download-section {
    padding: 48px 0px;
  }
  .download-inner {
    max-width: 100%;
  }
  .download-header {
    margin-bottom: 32px;
    padding: 0 20px;
  }
  .phones-wrap {
    transform: scale(0.7);
    transform-origin: top center;
    margin-bottom: -195px;
    width: 450px;
  }

  /* ── FAQ ── */
  .faq-section {
    padding: 48px 20px;
  }
  .faq-inner {
    flex-direction: column;
    gap: 32px;
  }
  .faq-left {
    flex: 0 0 auto;
    position: static;
    gap: 32px;
    align-items: center;
  }
  .faq-heading {
    font-size: 35.244px;
    line-height: 38.768px;
    letter-spacing: -0.7049px;
    text-align: center;
    width: fit-content;
  }
  .faq-list {
    gap: 8.966px;
  }
  .faq-item {
    border-radius: 7.845px;
    border-width: 0.56px;
  }
  .faq-header {
    padding: 14.009px 8.966px;
  }
  .faq-q {
    font-size: 14px;
  }

  /* ── RRETH NESH ── */
  .rreth-section {
    padding: 60px 0;
  }
  .rreth-inner {
    padding: 0 32px;
  }
  .rreth-heading {
    font-size: 40px;
    line-height: 41.777px;
    letter-spacing: -0.7596px;
  }
  .rreth-slide-label {
    font-size: 17.242px;
  }
  .rreth-slide-text {
    font-size: 14px;
    max-width: 270px;
  }
  .rreth-arrow {
    width: 32.328px;
    height: 32.328px;
  }
  .rreth-brand-icon {
    width: 41.496px;
    height: 41.496px;
  }
  .rreth-brand-text {
    font-size: 14px;
    white-space: normal;
    text-align: center;
    max-width: 300px;
  }

  /* ── SITE FOOTER ── */
  .site-footer {
    padding: 0 20px;
  }
  .site-footer-top {
    flex-direction: column;
    min-height: auto;
    padding-top: 32px;
    padding-bottom: 24px;
    gap: 32px;
    align-items: center;
  }
  .site-footer-brand {
    width: 100%;
    min-width: 0;
    display: contents;
  }
  .site-footer-social-btn {
    width: 25.957px;
    height: 25.957px;
  }
  .site-footer-social {
    gap: 9.085px;
  }
  .site-footer-nav {
    flex-wrap: wrap;
    gap: 24px;
    display: contents;
    text-align: center;
  }
  .site-footer-col {
    min-width: 45%;
    padding-right: 8px;
  }
  .site-footer-col-2 {
    padding-top: 0;
  }
  .site-footer-bottom {
    flex-direction: column;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-right: 0;
    gap: 12px;
    align-items: center;
  }
  .site-footer-copyright {
    width: auto;
    text-align: left;
  }

} /* end @media (max-width: 768px) */

/* ─────────────────────────────────────────────
   MOBILE MENU – Hamburger drawer
   Based on Figma node 24097:111130
───────────────────────────────────────────── */

/* Backdrop overlay */
.mm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.60);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.mm-backdrop.mm-open {
  display: block;
  opacity: 0.25;
}

/* Slide-in panel */
.mm-panel {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 301;
  border-radius: 20px;
  background: rgba(22, 27, 35, 0.5);
  backdrop-filter: blur(28px) saturate(160%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.07) inset,
    0 24px 48px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 21px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(calc(100% + 20px));
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.32s ease;
  opacity: 0;
  -webkit-overflow-scrolling: touch;
}
.mm-panel.mm-open {
  transform: translateY(0);
  opacity: 1;
}

/* ── Header ── */
.mm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}

.mm-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.mm-logo-icon {
  width: 31px;
  height: 31px;
  object-fit: contain;
  flex-shrink: 0;
}
.mm-logo-text {
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  line-height: 1.2;
}

.mm-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-top: 4px;
  border-radius: 6px;
  transition: background 0.2s;
}
.mm-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── APR / eSIM segment ── */
.mm-segment {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  padding: 4px;
  border-radius: 100px;
  background: rgba(239, 242, 247, 0.12);
  flex-shrink: 0;
  box-sizing: border-box;
}
.mm-seg-btn {
  flex: 1;
  height: 32px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.mm-seg-btn.mm-seg-active {
  background: #d6b011;
  color: #171c23;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 214, 51, 0.28);
}

/* ── Language row ── */
.mm-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  background: rgba(36, 43, 53, 0.70);
  border-radius: 20px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.18s;
}
.mm-lang-row:hover {
  background: rgba(44, 52, 68, 0.80);
}
.mm-lang-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mm-lang-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mm-lang-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}
.mm-lang-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.mm-lang-row.lang-open .mm-lang-chevron {
  transform: rotate(180deg);
}

/* ── Mobile language dropdown ── */
.mm-lang-dropdown {
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(30, 37, 48, 0.80);
  margin: 0 16px 4px;
}
.mm-lang-dropdown.lang-open {
  display: flex;
}
.mm-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.mm-lang-option:hover {
  background: rgba(255,255,255,0.08);
}
.mm-lang-opt-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Nav items list ── */
.mm-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.mm-nav-item {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 52px;
  background: rgba(36, 43, 53, 0.70);
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  flex-shrink: 0;
}
.mm-nav-item:hover {
  background: var(--bg-2);
  color: #ffffff;
}
.mm-nav-item:active {
  background: rgba(50, 57, 78, 0.85);
}

/* ── Body lock when menu open ── */
body.mm-body-lock {
  overflow: hidden;
}

/* ============================================================
   eSIM PAGE
   Dark-theme base; light-theme overrides further below.
   ============================================================ */

/* ── Wrapper ── */
.esim-page[hidden] { display: none; }
.esim-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 48px 108px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Section heading (same gradient-text treatment as .section-heading) ── */
.esim-heading {
  font-family: 'F37 Ginger Pro', sans-serif;
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -1.04px;
  line-height: 77px;
  text-align: center;
  background: linear-gradient(177.28deg, #fff 18.174%, rgba(255,255,255,0) 152.61%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  padding: 0;
}

/* ── Mobile separator (hidden on desktop) ── */
.esim-section-sep {
  display: none;
  border: none;
  margin: 0;
  padding: 0;
}

/* ──────────────────────────────────────────
   REGIONAL GRID  (3 columns on desktop)
   Uses gap + bg trick for grid lines.
────────────────────────────────────────── */
.esim-regional-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  width: 100%;
  max-width: 1200px;
}

.esim-region-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 33px 32px 27px;
  min-height: 196px;
  background: var(--bg);
  cursor: pointer;
  transition: background 0.18s;
}
.esim-region-card:hover {
  background: rgba(255,255,255,0.04);
}
.esim-card-empty {
  background: var(--bg) !important;
  cursor: default;
  pointer-events: none;
}

.esim-region-thumb {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 2px solid var(--stroke-1);
  overflow: hidden;
  flex-shrink: 0;
}
.esim-region-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.esim-region-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.esim-region-name {
  display: block;
  font-family: 'SF Pro Text', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.43px;
  color: var(--text-white);
  white-space: nowrap;
}
.esim-region-price {
  display: block;
  font-family: 'SF Pro Text', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.08px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esim-region-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #e6c000;
  font-family: 'SF Pro Text', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.08px;
  margin-top: 2px;
  white-space: nowrap;
}
.esim-badge-caret {
  flex-shrink: 0;
}

/* Arrow — absolute on desktop, flows on mobile */
.esim-card-arrow {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.40);
  flex-shrink: 0;
}

/* ──────────────────────────────────────────
   LOCAL GRID  (4 columns on desktop)
────────────────────────────────────────── */
.esim-local-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  width: 100%;
  max-width: 1200px;
}

/* Group header — hidden on desktop (doesn't disrupt grid) */
.esim-local-group-header {
  display: none;
}

.esim-country-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 50px 32px 33px;
  min-height: 196px;
  background: var(--bg);
  cursor: pointer;
  transition: background 0.18s;
}
.esim-country-card:hover {
  background: rgba(255,255,255,0.04);
}

.esim-flag {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.esim-country-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.esim-country-name {
  display: block;
  font-family: 'SF Pro Text', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.43px;
  color: var(--text-white);
  white-space: nowrap;
}
.esim-country-price {
  display: block;
  font-family: 'SF Pro Text', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.08px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Show All button row ── */
.esim-cta {
  display: flex;
  justify-content: center;
}

/* ── nav-toggle interactive cursor ── */
.nav-toggle {
  cursor: pointer;
}

/* ── eSIM active: knob sits on right side (knob text changes via JS) ── */
.nav-toggle.esim-active {
  flex-direction: row-reverse;
}

/* ============================================================
   LIGHT THEME  (@media prefers-color-scheme: light)
   Color-only overrides — layout, spacing, structure untouched.
   Source: Figma node 24096:9390  (light / white theme)
   Token mapping:
     --neutral/foreground/1/rest → #262e39
     --neutral/foreground/2/rest → #38465a
     --neutral/foreground/3/rest → #43556e
     --neutral/stroke/1/rest     → #b7c3d3
     --neutral/background/1/rest → #ffffff  (cards/panels)
     page background              → #f0f4f8
   ============================================================ */

@media (prefers-color-scheme: light) {

  /* ── CSS custom property overrides ── */
  :root {
    --bg:         #eff2f7;
    --bg-2:       #ffffff;
    --bg-card:    #ffffff;
    --text-white: #262e39;
    --text-2:     #38465a;
    --text-3:     #43556e;
    --stroke-1:   #b7c3d3;
    --faq-border: rgba(183, 195, 211, 0.7);
  }

  body {
    background: var(--bg);
    color: var(--text-white);
  }

  /* ── Navigation ── */
  .nav {
    background: rgba(239, 242, 247, 0.30);;
    border-bottom-color: rgba(0,0,0,.08);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.9) inset,
                0 4px 20px rgba(0,0,0,.07);
  }

  .nav.scrolled {
    background: rgba(255,255,255,.60);
    border-bottom-color: rgba(0,0,0,.12);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.9) inset,
                0 4px 20px rgba(0,0,0,.10);
  }
  .nav-row-1 {
    border-bottom: 1px solid rgba(0,0,0,.07);
  }
  .nav-logo-text {
    color: #262e39;
  }

  .nav-chevron-img {
    opacity: .5;
    filter: invert(1);
  }

  .nav-top-tab:hover { color: #262e39; }

  .nav-tab-item:hover { color: rgba(38,46,57,.85); }
  .nav-tab-item.active { color: #262e39; }
  .nav-tab-item.active::after {
    background: #479ef5;
  }

  /* ── Gradient headings: white→transparent becomes dark→transparent ── */
  .section-heading {
    background-image: linear-gradient(172.94deg, #262e39 18.174%, rgba(38,46,57,0.08) 152.61%);
  }
  .ai-heading {
    background-image: linear-gradient(172.94deg, #262e39 18.174%, rgba(38,46,57,0.08) 152.61%);
  }
  .faq-heading {
    background-image: linear-gradient(155.88deg, #262e39 18.174%, rgba(38,46,57,0.08) 152.61%);
  }
  .rreth-heading {
    background-image: linear-gradient(176.54deg, #262e39 14.108%, rgba(38,46,57,0.08) 89.22%);
  }
  .download-title {
    background-image: linear-gradient(177.47deg, #262e39 11.53%, rgba(38,46,57,0.08) 109.53%);
  }
  .rating-word {
    background-image: linear-gradient(163.99deg, #262e39 18.174%, rgba(38,46,57,0.08) 152.61%);
  }
  .grad-text {
    background: linear-gradient(172.94deg, #262e39 18.174%, rgba(38,46,57,0.08) 152.61%);
  }

  /* ── Logos strip ── */
  .logos-strip {
    margin-top: 20px;
  }
  .logo-item {
    opacity: .45;
  }

  /* ── Pricing toggle ── */
  .pricing-toggle {
    background: rgba(0,0,0,.06);
  }

  /* ── Service card price suffix ── */
  .service-card-price span {
    color: rgba(38,46,57,.45);
  }

  /* ── AI / Download / Reviews subtitles ── */
  .ai-subtitle,
  .download-subtitle,
  .reviews-subtitle {
    color: rgba(38,46,57,.55);
  }

  /* ── Carousel dots ── */
  .dot {
    background: rgba(38,46,57,.22);
  }

  /* ── APR Services Carousel ── */
  .apc-card__dark {
    background: #f0f4f8;
  }
  .apc-card__title {
    background: linear-gradient(164deg, #262e39 18%, rgba(38,46,57,0) 152%);
  }
  .apc-card__sub { color: #43556e; }
  .apc-card--active .apc-card__sub { color: #262e39; }
  .apc-hue {
    background: radial-gradient(ellipse 700px 280px at 50% 40%,
      rgba(255, 200, 0, 0.22) 0%, rgba(255, 190, 0, 0.1) 40%, transparent 70%);
  }
  .apc-dots { background: rgba(38,46,57,0.08); }
  .apc-dot  { background: rgba(38,46,57,.25); }
  .apc-dot--active { background: #262e39; }

  /* ── Reviews ── */
  .score-num  { color: #262e39; }
  .review-count { color: rgba(38,46,57,.5); }

  /* ── Hero badge ── */
  .hero-badge-inner {
    background: rgba(255,255,255,.85);
    border-color: rgba(252,215,0,.4);
  }

  /* ── Footer ── */
  .site-footer {
    border-top: 1px solid #b7c3d3;
  }
  .site-footer-top {
    border-bottom: 1px solid #b7c3d3;
  }
  .site-footer-logo-text {
    color: #262e39;
  }
  .site-footer-col-heading {
    color: #262e39;
  }
  .site-footer-col-links a {
    color: #43556e;
  }
  .site-footer-col-links a:hover { color: #262e39; }
  .site-footer-legal a {
    color: #43556e;
  }
  .site-footer-legal a:hover { color: #262e39; }
  .site-footer-dot {
    color: #43556e;
  }
  .site-footer-copyright {
    color: #43556e;
  }

  /* ── eSIM page ── */
  .esim-heading {
    background: linear-gradient(177.28deg, #262e39 18.174%, rgba(38,46,57,0.08) 152.61%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .esim-regional-grid,
  .esim-local-grid {
    background: rgba(0,0,0,.07);
    border-color: rgba(0,0,0,.07);
  }
  .esim-region-card,
  .esim-country-card,
  .esim-card-empty {
    background: var(--bg) !important;
  }
  .esim-region-card:hover,
  .esim-country-card:hover {
    background: rgba(0,0,0,.03) !important;
  }
  .esim-card-arrow {
    color: rgba(38,46,57,.35);
  }
  .esim-section-sep {
    background: var(--stroke-1);
  }
  .esim-local-group-header {
    color: #262e39;
  }

  /* ── Mobile menu glass panel ── */
  .mm-panel {
    background: rgba(240,244,248,.52);
    border: 1px solid rgba(0,0,0,.09);
    box-shadow: 0 24px 48px rgba(0,0,0,.10);
  }
  .mm-segment {
    background: rgba(255, 255, 255, 0.5);
  }
  .mm-seg-btn {
    color: var(--text-2);
  }
  .mm-lang-row {
   background: rgba(255, 255, 255, 0.5);
  }
  .mm-lang-row:hover {
    background: rgba(0,0,0,.08);
  }
  .mm-lang-label {
    color: #262e39;
  }
  .mm-lang-dropdown {
    background: rgba(255, 255, 255, 0.7);
  }
  .mm-lang-option {
    color: #262e39;
  }
  .mm-lang-option:hover {
    background: rgba(0,0,0,.06);
  }
  .mm-nav-item {
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-2);
  }
  .mm-nav-item:hover {
    background: rgba(0,0,0,.25);
    color: #262e39;
  }
  .mm-nav-item:active {
    background: rgba(0,0,0,.11);
  }
}

/* ============================================================
   eSIM PAGE – MOBILE OVERRIDES
   Must come after the base eSIM styles to win the cascade.
   ============================================================ */
@media (max-width: 768px) {



  .esim-page {
    gap: 0;
    padding: 0;
    align-items: stretch;
  }

  .esim-heading {
    font-size: 35px;
    line-height: 39px;
    letter-spacing: -0.7px;
    padding: 24px 20px 16px;
    text-align: center;
  }

  .esim-section-sep {
    display: block;
    width: 100%;
    height: 0.5px;
    background: var(--stroke-1);
  }

  /* ── Regional list ── */
  .esim-regional-grid {
    grid-template-columns: 1fr;
    background: transparent;
    border: none;
    gap: 0;
    max-width: 100%;
  }

  .esim-region-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 11px 16px;
    min-height: auto;
    background: transparent !important;
    border-bottom: 0.5px solid var(--stroke-1);
  }

  .esim-card-empty {
    display: none;
  }

  .esim-region-card .esim-card-arrow {
    position: static;
    transform: none;
    margin-left: auto;
  }

  /* ── Local list ── */
  .esim-local-grid {
    grid-template-columns: 1fr;
    background: transparent;
    border: none;
    gap: 0;
    max-width: 100%;
    margin-bottom: 24px;
  }

  .esim-local-group-header {
    display: flex;
    align-items: flex-end;
    padding: 0 16px 8px;
    height: 48px;
    font-family: 'SF Pro Text', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.43px;
    color: var(--text-white);
  }

  .esim-country-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 11px 16px;
    min-height: auto;
    background: transparent !important;
    border-bottom: 0.5px solid var(--stroke-1);
  }

  .esim-country-card .esim-card-arrow {
    position: static;
    transform: none;
    margin-left: auto;
  }

  /* ── Show All CTA ── */
  .esim-cta {
    padding: 32px 20px;
  }
  .download-title{
    font-size: 40px;
  }

}

    /* ─────────────────────────────────────────────
       PAKO.PHP PAGE
    ───────────────────────────────────────────── */


@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&display=swap');

    /* ─────────────────────────────────────────────
       PAKO FORM PAGE
    ───────────────────────────────────────────── */


    .pako-main {
      background: var(--bg);
      padding-bottom: 120px;
    }

    .pako-wrap {
      max-width: 1278px;
      margin: 0 auto;
      padding: 80px 131px;
    }

    /* ── Form outer ── */
    .pako-form {
      display: flex;
      flex-direction: column;
      gap: 50px;
    }

    /* ── Page title (mobile) ── */
    .pako-page-heading {
      display: none;
      font-family: 'F37 Ginger Pro', 'Inter', sans-serif;
      font-size: 28px;
      font-weight: 700;
      color: var(--text-white);
      text-align: center;
      line-height: 1.3;
      margin-bottom: 50px;
      background: linear-gradient(177.47deg, #fff 11.53%, rgba(255,255,255,0) 109.53%);
      background-clip: border-box;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      white-space: nowrap;
    }

    /* ── Form title ── */
    .pako-title {
      font-family: 'F37 Ginger Pro', 'Inter', sans-serif;
      font-size: 50px;
      font-weight: 700;
      line-height: 1.54;
      letter-spacing: -1px;
      background: linear-gradient(177.47deg, #fff 11.53%, rgba(255,255,255,0) 109.53%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      white-space: nowrap;
    }

    /* ── Divider ── */
    .pako-divider {
      width: 100%;
      height: 1px;
      background: var(--stroke-1);
      border: none;
      flex-shrink: 0;
    }

    /* ── Section heading ── */
    .pako-section-title {
      font-family: 'Inter', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.5;
    }

    /* ── Two-column row ── */
    .pako-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      width: 100%;
    }
    /* ── Three-column row ── */
    .pako-row--3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .pako-row--1 {
      grid-template-columns: 1fr;
    }

    /* ── Single field group ── */
    .pako-field {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* ── Field label ── */
    .pako-label {
      font-family: 'Sora', 'Inter', sans-serif;
      font-size: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.5;
      cursor: pointer;
    }

    /* ── Input / Select ── */
    .pako-input,
    .pako-select {
      border: 1px solid #3a495d;
      border-radius: 100px;
      padding: 20px 24px;
      background: transparent;
      font-family: 'Sora', 'Inter', sans-serif;
      font-size: 18px;
      font-weight: 400;
      color: var(--text-white);
      line-height: 1.5;
      outline: none;
      width: 100%;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .pako-input:focus,
    .pako-select:focus {
      border-color: var(--brand-stroke);
    }
    .pako-input--error {
      border-color: #e74c3c !important;
    }
    .pako-input::placeholder {
      color:  var(--text-2);
    }
    .pako-textarea {
      border-radius: 16px;
      resize: vertical;
      min-height: 120px;
      height: auto;
      padding-top: 14px;
      line-height: 1.6;
    }

    /* ── Select wrapper ── */
    .pako-select-wrap {
      position: relative;
    }
    .pako-select {
      appearance: none;
      -webkit-appearance: none;
      padding-right: 56px;
      cursor: pointer;
    }
    .pako-select option {
      background: #1c2233;
      color: #fff;
    }
    .pako-select-chevron {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      pointer-events: none;
    }

    /* ── Countries section ── */
    .pako-countries {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .pako-check-list {
      display: flex;
      flex-direction: column;
    }

    .pako-check-list--grid {
      display: grid;
      grid-template-columns: 1fr 5fr;
      gap: 0;
    }

    /* ── Checkbox item ── */
    .pako-check-item {
      display: flex;
      align-items: center;
      gap: 0;
      height: 32px;
      cursor: pointer;
      user-select: none;
    }
    .pako-check-item input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .pako-check-box {
      width: 16px;
      height: 16px;
      border: 1px solid #38465a;
      border-radius: 2px;
      flex-shrink: 0;
      margin: 0 8px;
      transition: background 0.15s, border-color 0.15s;
      position: relative;
    }
    .pako-check-item input:checked ~ .pako-check-box {
      background: var(--yellow);
      border-color: var(--yellow-border);
    }
    .pako-check-item input:checked ~ .pako-check-box::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 1px;
      width: 4px;
      height: 8px;
      border: 2px solid #171c23;
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg);
    }
    .pako-check-text {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
      line-height: 20px;
      padding: 5px 12px 7px 0;
    }

    /* ── Package + payment block ── */
    .pako-package-block {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* ── Package display button ── */
    .pako-package {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      padding: 20px 36px;
      background: var(--bg-2);
      border-radius: 24px;
      align-self: flex-start;
      cursor: default;
    }
    .pako-package-icon {
      width: 38.5px;
      height: 38.5px;
      object-fit: contain;
      flex-shrink: 0;
      border-radius: 6px;
    }
    .pako-package-label {
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-white);
      white-space: nowrap;
    }

    /* ── Radio list ── */
    .pako-radio-list {
      display: flex;
      flex-direction: column;
    }
    .pako-radio-item {
      padding: 20px;
      display: flex;
      align-items: center;
      height: 32px;
      cursor: pointer;
      user-select: none;
    }
    .pako-radio-item input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .pako-radio-dot {
      width: 16px;
      height: 16px;
      border: 1.5px solid #38465a;
      border-radius: 50%;
      flex-shrink: 0;
      margin: 0 8px;
      position: relative;
      transition: border-color 0.15s;
    }
    .pako-radio-item input:checked ~ .pako-radio-dot {
      border-color: var(--yellow);
    }
    .pako-radio-item input:checked ~ .pako-radio-dot::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background: var(--yellow);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .pako-radio-text {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
      line-height: 20px;
      padding: 5px 12px 7px 0;
    }
    .pako-radio-text.pako-muted {
      color: #38465a;
    }

    /* ── Terms checkbox – yellow text / trigger ── */
    .pako-terms-text {
      /* reset button defaults */
      background: none;
      border: none;
      padding: 5px 12px 7px 0;
      margin: 0;
      /* design */
      color: #ffd10f;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    .pako-terms-text:hover {
      opacity: 0.85;
    }

    /* ─────────────────────────────────────────────
       TERMS & CONDITIONS MODAL
       Figma node 24097:34557
    ───────────────────────────────────────────── */

    .tc-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(0, 0, 0, 0.62);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .tc-overlay.tc-open {
      opacity: 1;
      pointer-events: auto;
    }

    .tc-modal {
      background: #242b35;
      border-radius: 24px;
      padding: 24px;
      width: 100%;
      max-width: 1000px;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      gap: 24px;
      transform: translateY(16px) scale(0.98);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }
    .tc-overlay.tc-open .tc-modal {
      transform: translateY(0) scale(1);
    }

    /* Scrollable text area */
    .tc-scroll {
      overflow-y: auto;
      flex: 1;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .tc-scroll::-webkit-scrollbar {
      width: 4px;
    }
    .tc-scroll::-webkit-scrollbar-track {
      background: transparent;
    }
    .tc-scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.18);
      border-radius: 4px;
    }

    /* Contract text */
    .tc-content {
      font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      letter-spacing: -0.43px;
      line-height: 22px;
    }
    .tc-content p {
      margin: 0;
      line-height: 22px;
      color: #ffffff;
    }

    /* Pranoj button – full-width primary */
    .tc-pranoj {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fcd700;
      color: #221f1f;
      border: 1px solid #c7ab38;
      padding: 20px 36px;
      border-radius: 100px;
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
      box-shadow:
        0 0 0 1px rgba(248, 210, 73, 0.55) inset,
        0 10px 19px rgba(248, 210, 73, 0.28);
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .tc-pranoj::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255,255,255,.45) 0%, transparent 80%);
      mix-blend-mode: overlay;
      pointer-events: none;
    }
    .tc-pranoj:hover {
      transform: translateY(-2px);
      box-shadow:
        0 0 0 1px rgba(248, 210, 73, 0.55) inset,
        0 14px 26px rgba(248, 210, 73, 0.38);
    }

    /* ── Apliko button ── */
    .pako-apliko {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--yellow);
      color: var(--text-1);
      border: 1px solid var(--yellow-border);
      padding: 20px 36px;
      border-radius: 100px;
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 0 0 1px rgba(255,214,51,.55) inset,
                  0 10px 19px rgba(248,210,73,.28);
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      white-space: nowrap;
    }
    .pako-apliko::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255,255,255,.45) 0%, transparent 80%);
      mix-blend-mode: overlay;
      pointer-events: none;
    }
    .pako-apliko:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 0 1px rgba(255,214,51,.55) inset,
                  0 14px 26px rgba(248,210,73,.38);
    }

    /* ─────────────────────────────────────────────
       MOBILE OVERRIDES  @media (max-width: 768px)
    ───────────────────────────────────────────── */
    @media (max-width: 768px) {

      .pako-page-heading {
        display: block;
      }

      .pako-wrap {
        padding: 32px 20px 60px;
      }

      .pako-form {
        gap: 32px;
      }

      .pako-title {
       font-size: 28px;
       text-align: center;
      }

      .pako-row {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .pako-label {
        font-size: 16px;
      }

      .pako-input,
      .pako-select {
        font-size: 16px;
        padding: 18px 20px;
      }

      .pako-package {
        width: 100%;
        border-radius: 16px;
        padding: 20px 20px;
        gap: 12px;
      }

      .pako-package-label {
        font-size: 17px;
      }

      .pako-section-title {
        font-size: 16px;
      }
      .pako-check-list--grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    

    /* ─────────────────────────────────────────────
       LIGHT THEME  (@media prefers-color-scheme: light)
       Color-only overrides — no layout changes.
    ───────────────────────────────────────────── */
    @media (prefers-color-scheme: light) {

      /* Title gradient: white→transparent → dark→transparent */
      .pako-title {
        background-image: linear-gradient(177.47deg, #262e39 11.53%, rgba(38,46,57,0.08) 109.53%);
      }

      /* Section heading labels */
      .pako-section-title {
        color: rgba(38,46,57,.90);
      }

      /* Field labels */
      .pako-label {
        color: rgba(38,46,57,.85);
      }

      /* Inputs: dark placeholder */
      .pako-input::placeholder {
        color: rgba(38,46,57,.35);
      }

      /* Select dropdown options */
      .pako-select option {
        background: #ffffff;
        color: #262e39;
      }

      /* Checkbox/radio borders */
      .pako-check-box {
        border-color: #b7c3d3;
      }
      .pako-check-item input:checked ~ .pako-check-box::after {
        border-color: #171c23;
      }
      .pako-radio-dot {
        border-color: #b7c3d3;
      }

      /* Checkbox/radio text */
      .pako-check-text {
        color: rgba(38,46,57,.85);
      }
      .pako-radio-text {
        color: rgba(38,46,57,.85);
      }
      .pako-radio-text.pako-muted {
        color: #43556e;
      }

      /* TC modal */
      .tc-modal {
        background: #ffffff;
        box-shadow: 0 32px 64px rgba(0,0,0,.14), 0 0 8px rgba(0,0,0,.08);
      }
      .tc-scroll::-webkit-scrollbar-thumb {
        background: rgba(38,46,57,.18);
      }
      .tc-content,
      .tc-content p {
        color: #262e39;
      }

      /* Apliko payment modal */
      .apliko-modal {
        background: #ffffff;
        box-shadow: 0px 32px 64px rgba(0,0,0,.14), 0px 0px 8px rgba(0,0,0,.08);
      }
      .apliko-title {
        color: #262e39;
      }
      .apliko-close {
        color: rgba(38,46,57,.5);
      }
      .apliko-close:hover { color: #262e39; }
      .apliko-summary {
        background: rgba(0,0,0,.04);
      }
      .apliko-country { color: #262e39; }
      .apliko-country-sub { color: #43556e; }
      .apliko-row { color: #262e39; }
      .apliko-divider-line,
      .apliko-main-divider {
        background: #b7c3d3;
      }
      .apliko-form-panel {
        background: #f7f9fb;
      }
      .apliko-input-label {
        color: #43556e;
      }
      .apliko-input {
        color: #262e39;
        border-color: #b7c3d3;
      }
      .apliko-input::placeholder { color: rgba(38,46,57,.3); }
      .apliko-input:focus { border-color: #479ef5; }
      .apliko-btn-cancel { color: #262e39; }
    }

    /* ── Apliko Payment Modal ── */
    .apliko-overlay {
      position: fixed;
      inset: 0;
      z-index: 400;
      background: rgba(0, 0, 0, 0.60);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease;
    }
    .apliko-overlay.ap-open {
      opacity: 1;
      pointer-events: auto;
    }
    .apliko-modal {
      background: #242b35;
      border-radius: 24px;
      padding: 24px;
      width: 100%;
      max-width: 860px;
      max-height: 92vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      display: flex;
      flex-direction: column;
      gap: 24px;
      box-shadow: 0px 32px 64px rgba(0,0,0,0.24), 0px 0px 8px rgba(0,0,0,0.20);
      transform: translateY(20px);
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease;
    }
    .apliko-overlay.ap-open .apliko-modal {
      transform: translateY(0);
    }

    /* Header */
    .apliko-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .apliko-title {
      font-family: 'Roboto', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: -0.43px;
    }
    .apliko-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      border-radius: 8px;
      color: rgba(255,255,255,0.6);
      transition: color 0.15s;
    }
    .apliko-close:hover { color: #ffffff; }
    .apliko-close svg { display: block; }

    /* Summary card */
    .apliko-summary {
      background: rgba(255,255,255,0.04);
      border-radius: 17px;
      padding: 11px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .apliko-summary-top {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .apliko-flag {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    .apliko-flag-placeholder {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
    }
    .apliko-country { font-family: 'SF Pro Display', 'Sora', sans-serif; font-size: 17px; font-weight: 500; color: #ffffff; letter-spacing: -0.43px; }
    .apliko-country-sub { font-family: 'SF Pro Display', 'Sora', sans-serif; font-size: 13px; color: #778ca7; }
    .apliko-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      color: #ffffff;
    }
    .apliko-divider-line {
      height: 1px;
      background: #344051;
      border: none;
      margin: 0;
    }
    .apliko-row.total { font-size: 15px; font-weight: 600; }

    /* Main divider */
    .apliko-main-divider { height: 1px; background: #344051; border: none; margin: 0; }

    /* Body: card + form side by side */
    .apliko-body {
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }

    /* Credit card */
    .apliko-card {
      flex-shrink: 0;
      width: 352px;
      height: 220px;
      border-radius: 24px;
      background: linear-gradient(135deg, #a08a30 0%, #7b6822 50%, #5c4e18 100%);
      position: relative;
      overflow: hidden;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .apliko-card-texture {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 70% 30%, rgba(255,220,80,0.18) 0%, transparent 60%),
                  radial-gradient(ellipse at 20% 80%, rgba(255,180,30,0.10) 0%, transparent 50%);
      pointer-events: none;
    }
    .apliko-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 1;
    }
    .apliko-card-chip {
      width: 48px;
      height: 37px;
      border-radius: 8px;
      background: radial-gradient(circle at 50% 40%, #ffe066 0%, #c8a800 60%, #8c7000 100%);
      box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.3);
    }
    .apliko-card-logo {
      height: 28px;
      object-fit: contain;
    }
    .apliko-card-logo-placeholder {
      font-family: 'Sora', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: #ffd633;
      letter-spacing: 1px;
    }
    .apliko-card-number {
      font-family: 'Inter', sans-serif;
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
      letter-spacing: 3.6px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.4);
      position: relative;
      z-index: 1;
      text-align: center;
    }
    .apliko-card-bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      position: relative;
      z-index: 1;
    }
    .apliko-card-name {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      letter-spacing: 2.4px;
      text-transform: uppercase;
    }
    .apliko-card-expiry {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,0.8);
      letter-spacing: 1.5px;
    }

    /* Form panel */
    .apliko-form-panel {
      flex: 1;
      background: #242b35;
      border-radius: 24px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .apliko-form-row {
      display: flex;
      gap: 8px;
    }
    .apliko-input-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .apliko-input-label {
      font-family: 'Sora', 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 500;
      color: #778ca7;
      letter-spacing: 0.2px;
    }
    .apliko-input {
      width: 100%;
      background: transparent;
      border: 1px solid #b7c3d3;
      border-radius: 100px;
      padding: 16px 24px;
      font-family: 'Sora', 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .apliko-input::placeholder { color: rgba(255,255,255,0.35); }
    .apliko-input:focus { border-color: #ffd633; }

    /* Footer buttons */
    .apliko-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 20px;
    }
    .apliko-btn-cancel {
      background: transparent;
      border: none;
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: #ffffff;
      padding: 20px 36px;
      border-radius: 100px;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .apliko-btn-cancel:hover { opacity: 0.75; }
    .apliko-btn-pay {
      background: #fcd700;
      border: 1px solid #c7ab38;
      font-family: 'Sora', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: #221f1f;
      padding: 20px 36px;
      border-radius: 100px;
      cursor: pointer;
      box-shadow: 0 0 0 1px rgba(248,210,73,0.55) inset, 0 10px 19px rgba(248,210,73,0.28);
      transition: opacity 0.15s;
    }
    .apliko-btn-pay:hover { opacity: 0.9; }

    @media (max-width: 768px) {
      .apliko-modal { padding: 16px; gap: 16px; }
      .apliko-body { flex-direction: column; }
      .apliko-card { width: 100%; height: 200px; }
      .apliko-form-panel { padding: 16px; width:100%}
      .apliko-form-row { flex-direction: column; }
      .apliko-btn-cancel, .apliko-btn-pay { font-size: 16px; padding: 16px 24px; }
      .apliko-footer { flex-direction: column-reverse; width: 100%; }
      .apliko-btn-cancel, .apliko-btn-pay { width: 100%; text-align: center; }
    }

    /* ── Apliko modal light-theme fix ──
       Must come AFTER the base .apliko-modal styles
       (same specificity — last rule wins).        */
    @media (prefers-color-scheme: light) {
      .apliko-modal {
        background: #ffffff;
        box-shadow: 0px 32px 64px rgba(0,0,0,.14), 0px 0px 8px rgba(0,0,0,.08);
      }
      .apliko-title        { color: #262e39; }
      .apliko-close        { color: rgba(38,46,57,.5); }
      .apliko-close:hover  { color: #262e39; }
      .apliko-summary      { background: rgba(0,0,0,.04); }
      .apliko-country      { color: #262e39; }
      .apliko-country-sub  { color: #43556e; }
      .apliko-row          { color: #262e39; }
      .apliko-divider-line,
      .apliko-main-divider { background: #b7c3d3; }
      .apliko-form-panel   { background: #f7f9fb; }
      .apliko-input-label  { color: #43556e; }
      .apliko-input        { color: #262e39; border-color: #b7c3d3; }
      .apliko-input::placeholder { color: rgba(38,46,57,.3); }
      .apliko-input:focus  { border-color: #479ef5; }
      .apliko-btn-cancel   { color: #262e39; }
    }


    /* ═══════════════════════════════════════════════
       CREDIT CARD SVG — flip animation & styling
       ═══════════════════════════════════════════════ */

    /* Preload: suppress transitions until JS removes this class */
    .preload * {
      -webkit-transition: none !important;
      -moz-transition: none !important;
      -ms-transition: none !important;
      -o-transition: none !important;
    }

    /* Card container — perspective for 3D flip */
    .apliko-body .container {
      width: 100%;
      max-width: 400px;
      max-height: 251px;
      height: 54vw;
      perspective: 1000px;
      margin: 0 auto;
    }

    /* The flipping wrapper */
    .creditcard {
      width: 100%;
      max-width: 400px;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      transition: transform 0.6s;
      -webkit-transition: -webkit-transform 0.6s;
      cursor: pointer;
    }

    /* Front & back faces */
    .creditcard .front,
    .creditcard .back {
      position: absolute;
      width: 100%;
      max-width: 400px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-font-smoothing: antialiased;
      color: #47525d;
    }

    .creditcard .back {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }

    /* Flipped state — triggered by JS on CVV focus */
    .creditcard.flipped {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }

    /* Card-type icon (top-right of front face) */
    #ccsingle {
      position: absolute;
      right: 15px;
      top: 20px;
    }

    #ccsingle svg {
      width: 100px;
      max-height: 60px;
    }

    /* SVG card shadows & rounded corners */
    .creditcard svg#cardfront,
    .creditcard svg#cardback {
      width: 100%;
      -webkit-box-shadow: 1px 5px 6px 0px black;
      box-shadow: 1px 5px 6px 0px black;
      border-radius: 22px;
    }

    /* Changeable card-type colors (smooth transition) */
    .creditcard .lightcolor,
    .creditcard .darkcolor {
      -webkit-transition: fill .5s;
      transition: fill .5s;
    }

    .creditcard .lightblue     { fill: #03A9F4; }
    .creditcard .lightbluedark { fill: #0288D1; }
    .creditcard .red           { fill: #ef5350; }
    .creditcard .reddark       { fill: #d32f2f; }
    .creditcard .purple        { fill: #ab47bc; }
    .creditcard .purpledark    { fill: #7b1fa2; }
    .creditcard .cyan          { fill: #26c6da; }
    .creditcard .cyandark      { fill: #0097a7; }
    .creditcard .green         { fill: #66bb6a; }
    .creditcard .greendark     { fill: #388e3c; }
    .creditcard .lime          { fill: #d4e157; }
    .creditcard .limedark      { fill: #afb42b; }
    .creditcard .yellow        { fill: #ffeb3b; }
    .creditcard .yellowdark    { fill: #f9a825; }
    .creditcard .orange        { fill: #ff9800; }
    .creditcard .orangedark    { fill: #ef6c00; }
    .creditcard .grey          { fill: #bdbdbd; }
    .creditcard .greydark      { fill: #616161; }

    /* Front-face SVG text styles */
    #svgname { text-transform: uppercase; }
    #cardfront .st2  { fill: #FFFFFF; }
    #cardfront .st3  { font-family: 'Source Code Pro', monospace; font-weight: 600; }
    #cardfront .st4  { font-size: 54.7817px; }
    #cardfront .st5  { font-family: 'Source Code Pro', monospace; font-weight: 400; }
    #cardfront .st6  { font-size: 33.1112px; }
    #cardfront .st7  { opacity: 0.6; fill: #FFFFFF; }
    #cardfront .st8  { font-size: 24px; }
    #cardfront .st9  { font-size: 36.5498px; }
    #cardfront .st10 { font-family: 'Source Code Pro', monospace; font-weight: 300; }
    #cardfront .st11 { font-size: 16.1716px; }
    #cardfront .st12 { fill: #4C4C4C; }

    /* Back-face SVG text styles */
    #cardback .st0  { fill: none; stroke: #0F0F0F; stroke-miterlimit: 10; }
    #cardback .st2  { fill: #111111; }
    #cardback .st3  { fill: #F2F2F2; }
    #cardback .st4  { fill: #D8D2DB; }
    #cardback .st5  { fill: #C4C4C4; }
    #cardback .st6  { font-family: 'Source Code Pro', monospace; font-weight: 400; }
    #cardback .st7  { font-size: 27px; }
    #cardback .st8  { opacity: 0.6; }
    #cardback .st9  { fill: #FFFFFF; }
    #cardback .st10 { font-size: 24px; }
    #cardback .st11 { fill: #EAEAEA; }
    #cardback .st12 { font-family: 'Rock Salt', cursive; }
    #cardback .st13 { font-size: 37.769px; }