/* ==========================================================================
   Unifi Reseller Landing Page: Stylesheet

   Colour system is taken from unifi.com.my's own theme stylesheet, so the page
   reads as on-brand to anyone arriving from a "unifi" search:
     #FF6624  primary orange   (the dominant brand colour)
     #EC1C24  red accent       (used in unifi's hot/urgent gradients)
     #F7EEEA  warm cream base
     #363636  charcoal text
     DM Sans  body typeface
   Change the tokens in :root and the whole page re-themes.
   ========================================================================== */

:root{
  /* Brand: unifi */
  --orange:    #FF6624;
  --orange-d:  #E85410;
  --orange-l:  #FF8A4F;
  --ember:     #F6921E;
  --red:       #EC1C24;
  --amber:     #F6C252;

  /* Warm neutrals */
  --white:     #FFFFFF;
  --cream:     #F7EEEA;
  --cream-2:   #FDF9F7;
  --charcoal:  #363636;
  --charcoal-2:#2A2422;
  --body:      #5F5A57;
  --muted:     #8A8D8F;
  --line:      #EADFD9;
  --line-2:    #D9C7BD;

  /* WhatsApp keeps its own brand green; users recognise it as "chat" */
  --wa:        #25D366;
  --wa-d:      #1EBE5A;

  /* Gradients */
  --grad:      linear-gradient(135deg, var(--ember), var(--orange));
  --grad-hot:  linear-gradient(135deg, var(--orange), var(--red));
  --grad-warm: linear-gradient(135deg, var(--amber), #ED6F3A);

  /* Type */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(54,54,54,.06), 0 2px 8px rgba(54,54,54,.05);
  --sh-2: 0 4px 12px rgba(54,54,54,.07), 0 12px 32px rgba(54,54,54,.08);
  --sh-3: 0 8px 24px rgba(54,54,54,.10), 0 24px 60px rgba(84,50,30,.14);
  --sh-o: 0 6px 20px rgba(255,102,36,.34);

  /* Layout */
  --head-h: 68px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 20px); -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ color:var(--charcoal); line-height:1.18; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em; }
h1{ font-size:clamp(2.1rem, 5.2vw, 3.5rem); font-weight:800; }
h2{ font-size:clamp(1.65rem, 3.6vw, 2.5rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1rem; }
a{ color:var(--orange-d); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
s{ color:var(--muted); }
b{ font-weight:700; }
.nowrap{ white-space:nowrap; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:4px; }

.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
.wrap--narrow{ max-width:800px; }

.grad{
  background:var(--grad-hot);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stars{ color:var(--amber); letter-spacing:1px; }

/* Must beat display rules so a hidden tab panel really hides. */
[hidden]{ display:none !important; }


/* ══════════════ PROMO TICKER ══════════════ */
.promo-bar{
  background:var(--grad-hot);
  color:#FFE9DF; overflow:hidden; position:relative; z-index:60;
  font-size:.82rem; font-weight:500;
}
.promo-bar__track{
  display:flex; gap:2.6rem; white-space:nowrap; width:max-content;
  padding:.55rem 0; animation:ticker 34s linear infinite;
}
.promo-bar__item{ display:inline-flex; align-items:center; gap:.4rem; }
.promo-bar__item b{ color:var(--white); font-weight:700; }
.promo-bar__ico{ width:13px; height:13px; flex-shrink:0; }
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .promo-bar__track{ animation:none; } }


/* ══════════════ HEADER ══════════════ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.header.is-stuck{ border-bottom-color:var(--line); box-shadow:var(--sh-1); }
.header__inner{ display:flex; align-items:center; gap:1.5rem; height:var(--head-h); }

.logo{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.logo:hover{ text-decoration:none; }
.logo__img{ height:38px; width:auto; display:block; }

.nav{ display:flex; gap:1.7rem; margin-left:auto; }
.nav a{ color:var(--charcoal); font-weight:500; font-size:.92rem; text-decoration:none; position:relative; padding:.3rem 0; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--orange); border-radius:2px; transition:width .22s;
}
.nav a:hover::after{ width:100%; }

.header__cta{ flex-shrink:0; }

.burger{ display:none; background:none; border:0; padding:10px; cursor:pointer; margin-left:auto; }
.burger span{ display:block; width:22px; height:2px; background:var(--charcoal); border-radius:2px; transition:.25s; }
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


/* ══════════════ BUTTONS ══════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-weight:700; font-size:.94rem; line-height:1;
  padding:.85rem 1.4rem; border-radius:100px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; text-align:center;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s;
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:.6rem 1.05rem; font-size:.86rem; }
.btn--lg{ padding:1.05rem 1.9rem; font-size:1rem; }
.btn--block{ display:flex; width:100%; }

.btn--primary{ background:var(--grad); color:var(--white); box-shadow:var(--sh-o); }
.btn--primary:hover{ background:var(--grad-hot); box-shadow:0 10px 28px rgba(255,102,36,.44); color:var(--white); }

.btn--wa{ background:var(--wa); color:var(--white); box-shadow:0 6px 20px rgba(37,211,102,.3); }
.btn--wa:hover{ background:var(--wa-d); color:var(--white); box-shadow:0 10px 26px rgba(37,211,102,.4); }

.btn--outline{ background:var(--white); color:var(--charcoal); border-color:var(--line-2); }
.btn--outline:hover{ border-color:var(--orange); color:var(--orange-d); box-shadow:var(--sh-1); }

/* Sits on light backgrounds next to a primary button */
.btn--ghost{ background:var(--white); color:var(--charcoal); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange-d); box-shadow:var(--sh-1); }

.btn--light{ background:var(--white); color:var(--orange-d); }
.btn--light:hover{ color:var(--orange-d); box-shadow:var(--sh-2); }

.btn.is-busy{ opacity:.75; pointer-events:none; }

.ico-wa{ width:18px; height:18px; flex-shrink:0; }
.btn--lg .ico-wa{ width:20px; height:20px; }


/* ══════════════ HERO ══════════════ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(760px 480px at 92% -5%, rgba(255,102,36,.16), transparent 62%),
    radial-gradient(620px 460px at -5% 105%, rgba(246,194,82,.22), transparent 64%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
  padding:clamp(2.6rem, 5.5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
}
.hero__glow{
  position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(rgba(255,102,36,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,102,36,.07) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
}
.hero__grid{
  position:relative; display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr; align-items:start;
}

.promo-note{
  font-size:.85rem; font-weight:700; color:var(--orange-d);
  margin:0 0 1.2rem;
}

.hero h1{ margin-bottom:1rem; }
.h1-kicker{
  display:block; font-size:.9rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange); margin-bottom:.7rem;
}
.hero__sub{ font-size:clamp(1rem,1.7vw,1.14rem); max-width:34rem; margin-bottom:1.6rem; }
.hero__sub b{ color:var(--charcoal); }

.hero__ticks{
  display:grid; grid-template-columns:1fr;
  gap:.6rem 1.2rem; margin-bottom:2rem; max-width:32rem;
}
@media (min-width:480px){
  .hero__ticks{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.hero__ticks li{
  position:relative; padding-left:1.7rem; font-size:.92rem; font-weight:500; color:var(--charcoal);
}
.hero__ticks li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:16px; height:16px; border-radius:50%;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2rem; }

.hero__proof{ display:flex; align-items:center; gap:.85rem; }
.hero__proof p{ margin:0; font-size:.88rem; }
.hero__proof b{ color:var(--charcoal); }
.avatars{ display:flex; }
.avatars img{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--white);
  margin-left:-10px; background:var(--cream); box-shadow:var(--sh-1);
}
.avatars img:first-child{ margin-left:0; }


/* ══════════════ LEAD FORM ══════════════
   Lives inside the coverage modal (see MODAL below); the modal panel
   supplies the card chrome (background, shadow, radius), so .lead itself
   stays unstyled beyond spacing. */
.lead__head{ margin-bottom:1.3rem; }
.lead__head h2{ font-size:1.42rem; margin-bottom:.35rem; }
.lead__head p{ font-size:.88rem; margin:0; }
.lead__head b{ color:var(--orange-d); }

.field{ margin-bottom:.85rem; }
.field label{
  display:block; font-size:.78rem; font-weight:700; color:var(--charcoal);
  margin-bottom:.34rem; letter-spacing:.01em;
}
/* Excludes radio/checkbox: the addon-picker's radios live inside .field too,
   and this rule's padding/border/appearance:none would otherwise flatten
   them into blank boxes instead of showing as round radio buttons. */
.field input:not([type="radio"]):not([type="checkbox"]), .field select{
  width:100%; font-family:inherit; font-size:.95rem; color:var(--charcoal);
  padding:.78rem .9rem; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--cream-2); transition:border-color .18s, background .18s, box-shadow .18s;
  -webkit-appearance:none; appearance:none;
}
.field input::placeholder{ color:var(--muted); }
.field input:focus, .field select:focus{
  outline:none; border-color:var(--orange); background:var(--white);
  box-shadow:0 0 0 4px rgba(255,102,36,.14);
}
.field input.is-error, .field select.is-error{ border-color:var(--red); background:#FFF5F5; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }

.select-wrap{ position:relative; }
.select-wrap::after{
  content:""; position:absolute; right:.9rem; top:50%; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.select-wrap select{ padding-right:2.2rem; cursor:pointer; }

/* Add-on picker: rendered by JS to match whatever plan is selected above,
   so a plan with no TV add-on (100Mbps, 2Gbps) shows a plain note instead
   of an empty or misleading option list. */
.addon-picker{ display:grid; gap:.5rem; }
.addon-picker__note{
  font-size:.86rem; color:var(--muted); background:var(--cream-2);
  border:1.5px dashed var(--line); border-radius:var(--r-sm); padding:.7rem .85rem;
}
.addon-opt{
  display:flex; align-items:center; gap:.7rem; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:.65rem .85rem; transition:border-color .18s, background .18s;
}
.addon-opt:hover{ border-color:var(--orange); }
.addon-opt input{ width:16px; height:16px; accent-color:var(--orange); flex-shrink:0; }
.addon-opt__body{ display:flex; flex:1; justify-content:space-between; align-items:baseline; gap:.6rem; }
.addon-opt__label{ font-size:.9rem; font-weight:700; color:var(--charcoal); }
.addon-opt__note{ font-size:.8rem; color:var(--muted); white-space:nowrap; }
.addon-opt:has(input:checked){ border-color:var(--orange); background:#FFF4EF; }

.lead__total{
  display:flex; align-items:baseline; justify-content:space-between;
  background:var(--cream-2); border-radius:var(--r-sm); padding:.7rem .9rem;
  margin:.9rem 0; font-size:.86rem; color:var(--body);
}
.lead__total b{ font-size:1.1rem; color:var(--orange-d); }

#leadSubmit{ margin-top:.5rem; }

.lead__note{
  display:flex; align-items:flex-start; gap:.45rem; margin:.85rem 0 0;
  font-size:.76rem; color:var(--muted); line-height:1.5;
}
.ico-lock{ width:14px; height:14px; flex-shrink:0; margin-top:.15em; }


/* ══════════════ PROMO CAROUSEL ══════════════
   Sits in the hero where the lead form card used to live. Autoplays via JS,
   pauses on hover/focus, and every slide is fully visible without JS since
   only the currently-active slide is ever what CSS shows by default:
   .is-active is required for a slide to display at all (see below). */
.hero__promo{ position:relative; }

.promo-carousel{
  position:relative; background:var(--white); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); border:1px solid var(--white); overflow:hidden;
}
/* All slides share the same grid cell (stacked, overlapping) so the track's
   height is always the tallest slide's natural height, constant no matter
   which slide is active. The old display:none approach sized the track to
   only the current slide, so the whole card (and the button below it)
   visibly jumped taller/shorter on every autoplay tick. */
.promo-carousel__track{ position:relative; display:grid; }

.promo-slide{
  display:flex; flex-direction:column; justify-content:center;
  grid-area:1/1; padding:clamp(1.6rem,2.8vw,2.2rem) clamp(1.6rem,2.8vw,2.2rem) 3.2rem;
  opacity:0; visibility:hidden; pointer-events:none;
}
.promo-slide.is-active{
  opacity:1; visibility:visible; pointer-events:auto; position:relative; z-index:1;
  animation:slideFade .4s ease both;
}
@keyframes slideFade{ from{ opacity:0; transform:translateX(10px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .promo-slide.is-active{ animation:none; } }

/* Fixed min-height keeps every slide's art block a similar size regardless of
   its actual image, so all four slides land close to the same overall height
   (they share one grid cell) and the fixed-pixel arrow position below clears
   every slide's text. Every slide, including the banner photo, uses the same
   centred layout here — an earlier full-bleed treatment for the banner made
   it sit flush at the very top while the other slides centred, which read as
   misaligned rather than as one consistent carousel. */
.promo-slide__art{ display:flex; justify-content:center; align-items:center; margin-bottom:1.2rem; min-height:190px; }
/* height:auto is required here: without an explicit CSS height, browsers
   fall back to the <img>'s HTML height="…" attribute once width is
   overridden by CSS, ignoring the image's real aspect ratio entirely. That
   was forcing these icon illustrations to render far taller than their
   actual proportions, inflating every slide's height along with them. */
.promo-slide__art img{ width:100%; max-width:300px; height:auto; }
.promo-slide__art--avatars{ gap:.7rem; }
.promo-slide__art--avatars img{ width:84px; height:84px; max-width:84px; border-radius:50%; box-shadow:var(--sh-1); }

/* aspect-ratio + object-fit guarantee the photo keeps its real 620×400
   proportions at any width, so it can never read as stretched or squeezed.
   width:100% makes it scale down safely on narrow mobile cards too. A wider
   cap than the icon slides' 300px, since it's a real photo, not a small
   illustration, and benefits from reading larger. */
.promo-slide__art--banner img{
  display:block; width:100%; max-width:380px; height:auto;
  aspect-ratio:31/20; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh-2);
}

.promo-slide__tag{
  display:inline-block; background:var(--grad); color:var(--white);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:100px; margin-bottom:.7rem;
}
.promo-slide__body h2{ font-size:1.3rem; margin-bottom:.4rem; }
.promo-slide__body p{ font-size:.9rem; margin:.5rem 0 0; }
.promo-slide__list{ display:grid; gap:.4rem; margin:0; }
.promo-slide__list li{ font-size:.88rem; color:var(--body); }
.promo-slide__list b{ color:var(--charcoal); }

/* Fixed pixel offset rather than a percentage of the track: the banner
   slide's full-bleed photo has a completely different internal layout to
   the icon slides (no top padding, image starts at y:0), so a percentage of
   the shared track lands in a different place on each slide. This value
   sits inside every slide's art region without reaching the text below. */
.promo-carousel__arrow{
  position:absolute; top:112px; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); color:var(--charcoal); font-size:1.3rem; line-height:1;
  cursor:pointer; box-shadow:var(--sh-1); transition:background .18s, border-color .18s;
}
.promo-carousel__arrow:hover{ background:var(--cream); border-color:var(--orange); }
.promo-carousel__arrow--prev{ left:12px; }
.promo-carousel__arrow--next{ right:12px; }

.promo-carousel__dots{
  position:absolute; bottom:16px; left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:.45rem;
}
.promo-dot{
  width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--line-2); transition:background .2s, transform .2s, width .2s;
}
.promo-dot.is-active{ background:var(--orange); width:22px; border-radius:5px; }

.promo-actions{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }


/* ══════════════ COVERAGE MODAL ══════════════
   Hidden by default; JS toggles .is-open. Kept out of the layout flow
   entirely when closed (display:none) so it never affects page height or
   scroll, and never intercepts clicks. */
.modal{ display:none; }
.modal.is-open{
  display:block; position:fixed; inset:0; z-index:100;
}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(35,30,28,.55);
  backdrop-filter:blur(2px); animation:fadeIn .2s ease both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal__panel{
  position:relative; z-index:1; margin:5vh auto; max-height:90vh; overflow-y:auto;
  width:min(92vw, 460px); background:var(--white); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:clamp(1.6rem,3vw,2.2rem);
  animation:modalIn .25s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.98);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .modal__backdrop, .modal__panel{ animation:none; } }
.modal__close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--cream); color:var(--charcoal); display:grid; place-items:center;
  transition:background .18s;
}
.modal__close:hover{ background:var(--line); }
.modal__close svg{ width:16px; height:16px; }
body.modal-open{ overflow:hidden; }


/* ══════════════ TRUST BAR ══════════════ */
.trustbar{ background:var(--white); padding:1.6rem 0; border-bottom:1px solid var(--line); }
.trustbar__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem; text-align:center;
}
.trustbar__item b{
  display:block; font-size:1.35rem; font-weight:800; letter-spacing:-.02em;
  background:var(--grad-hot); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.trustbar__item span{ font-size:.78rem; color:var(--body); font-weight:500; }


/* ══════════════ CAMPAIGN KEY VISUAL ══════════════ */
.kv{ padding:clamp(2.4rem,5vw,4rem) 0; background:var(--white); }
.kv__inner{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--grad); color:var(--white);
  display:grid; grid-template-columns:1fr; align-items:center; gap:1.5rem;
  padding:clamp(1.8rem,3.5vw,2.8rem);
  box-shadow:0 16px 44px rgba(255,102,36,.28);
}
.kv__inner::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 320px at 88% 12%, rgba(255,255,255,.22), transparent 62%),
    radial-gradient(320px 260px at 6% 96%, rgba(236,28,36,.34), transparent 60%);
}
.kv__copy{ position:relative; }
.kv__tag{
  display:inline-block; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.36);
  padding:.3rem .8rem; border-radius:100px; font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:.9rem;
}
.kv__copy h2{ color:var(--white); font-size:clamp(1.5rem,3.2vw,2.2rem); margin-bottom:.5rem; }
.kv__copy p{ color:#FFEDE4; font-size:1rem; margin-bottom:1.4rem; max-width:30rem; }
.kv__list{ display:grid; gap:.5rem; margin-bottom:1.5rem; }
.kv__list li{ position:relative; padding-left:1.6rem; font-size:.93rem; font-weight:500; color:#FFF3EC; }
.kv__list li::before{
  content:""; position:absolute; left:0; top:.34em; width:14px; height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.kv__art{ position:relative; display:grid; place-items:center; }
.kv__art img{ width:100%; max-width:420px; filter:drop-shadow(0 18px 34px rgba(120,40,10,.32)); }


/* ══════════════ SECTIONS ══════════════ */
.section{ padding:clamp(3.2rem,6.5vw,5.5rem) 0; }
.section--tint{ background:var(--cream); }
.section--dark{
  background:
    radial-gradient(700px 420px at 85% 8%, rgba(255,102,36,.26), transparent 62%),
    linear-gradient(160deg, #2A2422, #1F1A18);
}

.sec-head{ text-align:center; max-width:44rem; margin:0 auto clamp(2rem,4vw,3rem); }
.sec-head p{ font-size:1.03rem; margin-bottom:0; }
.sec-head--light h2{ color:var(--white); }
.sec-head--light p{ color:#D9CCC5; }
.eyebrow{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange); margin-bottom:.6rem;
}
.sec-head--light .eyebrow{ color:var(--amber); }


/* ══════════════ PLAN TOGGLE ══════════════ */
.toggle{
  display:flex; width:max-content; gap:.25rem; padding:.3rem; background:var(--cream);
  border-radius:100px; margin:0 auto clamp(1.8rem,3vw,2.4rem); border:1px solid var(--line);
}
.toggle__btn{
  font-family:inherit; font-weight:700; font-size:.9rem; color:var(--body);
  background:none; border:0; padding:.6rem 1.6rem; border-radius:100px; cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s;
}
.toggle__btn.is-active{ background:var(--white); color:var(--orange-d); box-shadow:var(--sh-1); }
.section--tint .toggle{ background:var(--white); }
.section--tint .toggle__btn.is-active{ background:var(--grad); color:var(--white); box-shadow:var(--sh-o); }


/* ══════════════ PLAN CARDS ══════════════ */
/* Horizontally scrolling row of fixed-width cards rather than a shrinking
   grid: at 5 plans a same-row grid was squeezing every card's text. Each
   card keeps a comfortable width and the row scrolls to reach 1Gbps/2Gbps.
   align-items:flex-start is required: without it, flex stretches every card
   to the tallest one, so opening one card's add-on panel visually "grows"
   every other card in the row too. */
.plans{
  display:flex; align-items:flex-start; gap:1.1rem;
  overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-left:1px;
  padding:.25rem .25rem 1rem; margin:0 -.25rem;
  -webkit-overflow-scrolling:touch;
}

.plan{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  flex:0 0 272px; scroll-snap-align:start;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:1.35rem; transition:transform .22s, box-shadow .22s, border-color .22s;
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2); }

.plan--featured{
  border-color:var(--orange); box-shadow:0 8px 30px rgba(255,102,36,.18);
  background:linear-gradient(180deg, #FFF4EF, var(--white) 32%);
}
.plan--featured:hover{ box-shadow:0 14px 40px rgba(255,102,36,.26); border-color:var(--orange); }

/* Flag: a plain-text marketing caption (Best Value, Most Popular). No pill,
   no icon, just typographic emphasis so it doesn't compete with the ribbon
   for the same visual space. */
.plan__flag{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--orange-d); margin-bottom:.35rem;
}

.plan__top{ margin-bottom:.9rem; }
.plan__top h3{ font-size:1.1rem; margin-bottom:.2rem; }
.plan__for{ font-size:.82rem; color:var(--muted); margin:0; line-height:1.45; min-height:2.4em; }

.plan__speed{ display:flex; align-items:baseline; gap:.3rem; margin-bottom:.15rem; }
.plan__speed b{
  font-size:2.6rem; font-weight:800; color:var(--charcoal); letter-spacing:-.04em; line-height:1;
}
.plan__speed span{ font-size:1rem; font-weight:700; color:var(--body); }
.plan__up{ font-size:.78rem; color:var(--muted); margin:0 0 1rem; }

/* min-height keeps this block a consistent height across cards regardless of
   whether a struck-through "was" price is present (the top tier has none). */
.plan__price{
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
  padding-top:1rem; border-top:1px solid var(--line); margin-bottom:.85rem;
  min-height:3.4rem;
}
.plan__price s{ font-size:.9rem; }
.plan__price b{ font-size:1.85rem; font-weight:800; color:var(--orange-d); letter-spacing:-.03em; }
.plan__price span{ font-size:.85rem; color:var(--muted); font-weight:500; }
.plan__price div{ display:flex; align-items:baseline; gap:.15rem; }

/* Add-on box: this is the site's main offer since the free-months promo
   ended, so it's always visible (no collapse/expand) and given its own
   bordered, tinted container to stand out from the rest of the card, the
   same visual role the old top ribbon used to play. Picking an option
   updates the card's own price and the "I'm Interested" message live (see
   wirePlanAddons in main.js). */
.plan__addon{
  margin-bottom:1rem; padding:.8rem; border-radius:var(--r-sm);
  border:1.5px solid var(--orange); background:#FFF4EF;
}
.plan__addon-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.plan__addon-img{ width:76px; height:auto; flex-shrink:0; }
.plan__addon-eyebrow{
  display:block; font-size:.7rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--orange-d); margin-bottom:.15rem;
}
.plan__addon-hint{ font-size:.78rem; color:var(--charcoal); margin:0; line-height:1.4; }

/* Bolder "hero" treatment for a plan whose add-on box IS the headline offer
   (currently just 500 Mbps) rather than a secondary pick-a-size extra: a
   warm gradient instead of a flat tint, a colour-matched glow to lift it
   off the card, a bigger product image, and a corner badge - so it reads
   as the card's main event, not a small highlight buried among feature
   bullets. --grad-hot (not the primary --grad) is deliberate: it's the
   token already reserved sitewide for promotional emphasis. */
.plan__addon--promo{
  border-color:transparent; background:var(--grad-hot);
  box-shadow:0 8px 24px rgba(236,28,36,.32);
  position:relative; overflow:hidden;
  padding-top:1.9rem; /* clears .plan__addon-badge pinned to the top-right */
}
.plan__addon--promo .plan__addon-eyebrow{ color:var(--white); }
.plan__addon--promo .plan__addon-hint{ color:rgba(255,255,255,.95); }
.plan__addon--promo .plan__addon-img{
  width:96px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.3));
}
.plan__addon-badge{
  position:absolute; top:0; right:0; background:var(--charcoal); color:var(--white);
  font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.3rem .65rem; border-bottom-left-radius:var(--r-sm);
}

.plan__addon-panel{ display:grid; gap:.5rem; }
.plan__addon-opt{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--white);
  padding:.55rem .7rem; transition:border-color .18s, background .18s;
}
.plan__addon-opt:hover{ border-color:var(--orange); }
.plan__addon-opt input{ width:15px; height:15px; accent-color:var(--orange); flex-shrink:0; }
/* Label and price stack vertically rather than sharing one line: at the
   card's narrow width, forcing them side by side either clipped the price
   or squeezed the label into an awkward multi-line wrap. */
.plan__addon-opt-body{ display:flex; flex-direction:column; flex:1; min-width:0; gap:.1rem; }
.plan__addon-opt-label{ font-size:.85rem; font-weight:700; color:var(--charcoal); }
.plan__addon-opt-note{ font-size:.76rem; color:var(--muted); }
.plan__addon-opt:has(input:checked){ border-color:var(--orange); background:#FFE4D6; }

.plan__feats{ margin-bottom:1.3rem; flex:1; }
.plan__feats li{
  position:relative; padding-left:1.5rem; font-size:.87rem; margin-bottom:.5rem;
}
.plan__feats li::before{
  content:""; position:absolute; left:0; top:.4em; width:13px; height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6624' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Small print for a plan with its own time-limited/conditional pricing
   (e.g. "RM99 for 10 months, then RM149"). Deliberately understated -
   small and muted - but still legible text, not hidden or near-invisible,
   so the disclosure stays genuine rather than just decorative. */
.plan__terms{ font-size:.68rem; color:var(--muted); line-height:1.4; margin:0 0 .6rem; }

.plans__foot{ text-align:center; margin:2rem 0 0; font-size:.95rem; }
.plans__foot a{ font-weight:700; text-decoration:underline; }


/* ══════════════ QUIZ ══════════════ */
.quiz{
  background:var(--white); border-radius:var(--r-xl); box-shadow:var(--sh-2);
  border:1px solid var(--line); padding:clamp(1.5rem,3vw,2.4rem); position:relative; overflow:hidden;
}
.quiz__bar{ position:absolute; top:0; left:0; right:0; height:4px; background:var(--cream); }
.quiz__bar i{ display:block; height:100%; width:33.33%; background:var(--grad-hot); transition:width .35s cubic-bezier(.2,.8,.3,1); }

.quiz__step{ display:none; }
.quiz__step.is-active{ display:block; animation:fadeUp .32s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .quiz__step.is-active{ animation:none; } }

.quiz__q{ font-size:1.2rem; font-weight:700; color:var(--charcoal); margin-bottom:1.1rem; line-height:1.35; }
.quiz__q span{
  display:block; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); margin-bottom:.3rem;
}
.quiz__opts{ display:grid; gap:.6rem; }
.opt{
  font-family:inherit; font-size:.96rem; font-weight:500; color:var(--charcoal); text-align:left;
  background:var(--cream-2); border:1.5px solid var(--line); border-radius:var(--r);
  padding:.95rem 1.1rem; cursor:pointer; position:relative;
  transition:border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.opt::after{
  content:"›"; position:absolute; right:1.1rem; top:50%; transform:translateY(-52%);
  font-size:1.4rem; color:var(--line-2); font-weight:700; transition:color .18s, transform .18s;
}
.opt:hover{
  border-color:var(--orange); background:var(--white);
  transform:translateX(3px); box-shadow:var(--sh-1);
}
.opt:hover::after{ color:var(--orange); transform:translateY(-52%) translateX(3px); }

.quiz__result{ text-align:center; }
.quiz__reco{ font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:.3rem; }
.quiz__result h3{ font-size:2rem; font-weight:800; margin-bottom:.1rem; }
.quiz__price{ font-size:1.25rem; font-weight:800; color:var(--orange-d); margin-bottom:.7rem; }
.quiz__why{ font-size:.94rem; max-width:26rem; margin:0 auto 1.4rem; }
.quiz__restart{
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:0; font-family:inherit; font-size:.86rem; font-weight:500;
  color:var(--muted); cursor:pointer; margin-top:.9rem;
}
.quiz__restart svg{ width:14px; height:14px; }
.quiz__restart:hover{ color:var(--charcoal); text-decoration:underline; }


/* ══════════════ WHY US ══════════════ */
.whys{ display:grid; grid-template-columns:1fr; gap:1rem; }
.why{
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem 1.35rem; transition:transform .22s, box-shadow .22s, border-color .22s;
}
.why:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--orange); }
.why__ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#FFF0E8,#FFE3D2); margin-bottom:.9rem;
}
.why__ico svg{ width:26px; height:26px; color:var(--orange-d); }
.why h3{ margin-bottom:.35rem; }
.why p{ font-size:.9rem; margin:0; }


/* ══════════════ STEPS ══════════════ */
/* .steps is an <ol> for semantics/accessibility; the global list reset only
   targets <ul>, so browser-default "1. 2. 3." markers need clearing here or
   they'd double up with the custom .step__num badges. */
.steps{ display:grid; grid-template-columns:1fr; gap:1.1rem; list-style:none; margin:0; padding:0; }
.step{
  position:relative; background:var(--white); border-radius:var(--r-lg);
  padding:1.7rem 1.4rem 1.4rem; box-shadow:var(--sh-1); border:1px solid var(--line);
}
.step__num{
  position:absolute; top:-16px; left:1.4rem;
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad); color:var(--white);
  font-weight:800; font-size:1.1rem; box-shadow:var(--sh-o);
}
.step h3{ margin:.5rem 0 .4rem; }
.step p{ font-size:.9rem; margin:0; }
.steps__cta{ text-align:center; margin-top:2.2rem; }


/* ══════════════ REVIEWS ══════════════ */
.revs{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
.rev{
  margin:0; background:var(--white); border:1.5px solid var(--line);
  border-radius:var(--r-lg); padding:1.5rem 1.35rem;
  display:flex; flex-direction:column; transition:box-shadow .22s, transform .22s;
}
.rev:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); }
.rev .stars{ font-size:.95rem; margin-bottom:.7rem; }
.rev blockquote{ margin:0 0 1.1rem; font-size:.94rem; line-height:1.65; flex:1; }
.rev blockquote::before{ content:"“"; }
.rev blockquote::after{ content:"”"; }
.rev figcaption{
  display:flex; align-items:center; gap:.7rem;
  padding-top:.9rem; border-top:1px solid var(--line);
}
.rev figcaption img{ width:40px; height:40px; border-radius:50%; flex-shrink:0; background:var(--cream); }
.rev figcaption div{ display:flex; flex-direction:column; }
.rev figcaption b{ color:var(--charcoal); font-size:.92rem; }
.rev figcaption span{ font-size:.8rem; color:var(--muted); }


/* ══════════════ FAQ ══════════════ */
.faq{ display:grid; gap:.7rem; }
.faq__item{
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.faq__item[open]{ border-color:var(--orange); box-shadow:var(--sh-1); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:1.05rem 3rem 1.05rem 1.25rem;
  font-weight:700; color:var(--charcoal); font-size:.98rem; position:relative; line-height:1.45;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:1.25rem; top:1.35rem;
  width:11px; height:11px; border-right:2.5px solid var(--muted); border-bottom:2.5px solid var(--muted);
  transform:rotate(45deg); transition:transform .22s, border-color .22s;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); border-color:var(--orange); top:1.6rem; }
.faq__item summary:hover{ color:var(--orange-d); }
.faq__a{ padding:0 1.25rem 1.15rem; }
.faq__a p{ margin:0; font-size:.92rem; }


/* ══════════════ FINAL CTA ══════════════ */
.finalcta{
  position:relative; overflow:hidden;
  background:
    radial-gradient(600px 400px at 12% 18%, rgba(246,194,82,.4), transparent 60%),
    var(--grad-hot);
  padding:clamp(3rem,6vw,4.5rem) 0; text-align:center;
}
.finalcta__inner{ max-width:46rem; position:relative; }
.finalcta h2{ color:var(--white); }
.finalcta p{ color:#FFEDE4; font-size:1.05rem; }
.finalcta p b{ color:var(--white); }
.finalcta__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin:1.8rem 0 1rem; }
.finalcta__hours{ font-size:.85rem; color:#FFDCCB; margin:0; }


/* ══════════════ FOOTER ══════════════ */
.footer{ background:#231E1C; color:#A79A94; padding:clamp(2.6rem,5vw,3.6rem) 0 1.5rem; font-size:.9rem; }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:2rem; }
.logo--footer{ margin-bottom:1rem; }
.logo--footer .logo__img{ height:34px; }
.footer__about{ font-size:.86rem; line-height:1.7; max-width:32rem; margin:0; }
.footer__about b{ color:#D6C9C3; }
.footer__col h3{ color:var(--white); font-size:.82rem; text-transform:uppercase; letter-spacing:.11em; margin-bottom:.9rem; }
.footer__col li{ margin-bottom:.55rem; }
.footer__col a, .footer__col span{ color:#A79A94; font-size:.88rem; }
.footer__col a:hover{ color:var(--orange-l); text-decoration:none; }

.footer__bottom{ margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.09); }
.footer__bottom p{ margin:0 0 .7rem; font-size:.82rem; }
.footer__legal{ font-size:.75rem; color:#7E736E; line-height:1.65; margin:0; }


/* ══════════════ STICKY MOBILE BAR ══════════════ */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem;
  padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(54,54,54,.08);
}
.stickybar__btn{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-weight:700; font-size:.88rem; padding:.85rem .5rem; border-radius:100px;
  text-decoration:none; transition:transform .15s;
}
.stickybar__btn:active{ transform:scale(.97); }
.stickybar__btn:hover{ text-decoration:none; }
.stickybar__btn--alt{ background:var(--grad); color:var(--white); box-shadow:var(--sh-o); }
.stickybar__btn--wa{ background:var(--wa); color:var(--white); box-shadow:0 4px 14px rgba(37,211,102,.32); }
.stickybar__btn .ico-wa, .stickybar__btn svg{ width:17px; height:17px; }


/* ══════════════ FAB ══════════════ */
.fab{
  display:none; position:fixed; right:24px; bottom:24px; z-index:70;
  width:58px; height:58px; border-radius:50%; background:var(--wa); color:var(--white);
  place-items:center; box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .2s, box-shadow .2s;
}
.fab:hover{ transform:scale(1.08); box-shadow:0 12px 32px rgba(37,211,102,.55); }
.fab svg{ width:30px; height:30px; }


/* ══════════════ TOAST ══════════════ */
.toast{
  position:fixed; left:50%; bottom:96px; z-index:90;
  transform:translate(-50%, 24px); opacity:0; pointer-events:none;
  width:min(92vw, 400px);
  background:var(--charcoal-2); color:#EFE4DE; border-radius:var(--r);
  padding:.95rem 1.2rem; box-shadow:var(--sh-3);
  font-size:.86rem; line-height:1.55;
  transition:opacity .3s, transform .3s;
}
.toast b{ display:block; color:var(--white); margin-bottom:.15rem; font-size:.95rem; }
.toast.is-on{ opacity:1; transform:translate(-50%,0); }


/* ══════════════ REVEAL ON SCROLL ══════════════
   Additive only. Cards are visible without this class, so a JS failure can
   never leave a section blank. */
@keyframes revealIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.is-in{ animation:revealIn .55s cubic-bezier(.2,.8,.3,1) both; }
@media (prefers-reduced-motion:reduce){ .is-in{ animation:none; } }


/* ══════════════ MOBILE NAV ══════════════ */
@media (max-width:900px){
  .nav{
    position:fixed; top:calc(var(--head-h) + 28px); left:0; right:0;
    flex-direction:column; gap:0; background:var(--white);
    border-bottom:1px solid var(--line); box-shadow:var(--sh-2);
    padding:.5rem 20px 1rem; margin:0;
    transform:translateY(-140%); transition:transform .3s cubic-bezier(.2,.8,.3,1);
    max-height:calc(100vh - var(--head-h)); overflow-y:auto;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav a{ padding:.85rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav a::after{ display:none; }
  .header__cta{ display:none; }
  .burger{ display:block; }
}


/* ══════════════ RESPONSIVE UP ══════════════ */
@media (min-width:560px){
  .whys{ grid-template-columns:repeat(2,1fr); }
  .revs{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .trustbar__grid{ grid-template-columns:repeat(5,1fr); }
  .plan{ flex-basis:300px; }
}

@media (min-width:760px){
  .quiz__opts{ grid-template-columns:repeat(2,1fr); }
  .kv__inner{ grid-template-columns:1.15fr .85fr; gap:2.5rem; }
  .promo-actions{ flex-direction:row; }
  .promo-actions .btn{ flex:1; }
}

@media (min-width:900px){
  .stickybar{ display:none; }
  .fab{ display:grid; }
  .toast{ bottom:100px; right:24px; left:auto; transform:translate(0,24px); }
  .toast.is-on{ transform:translate(0,0); }
}

@media (min-width:1000px){
  .hero__grid{ grid-template-columns:1.08fr .92fr; align-items:center; }
  .hero__promo{ position:sticky; top:calc(var(--head-h) + 20px); }
  .footer__grid{ grid-template-columns:2.2fr 1fr 1fr 1.2fr; gap:2.5rem; }
}

@media (min-width:1120px){
  .whys{ grid-template-columns:repeat(3,1fr); }
  .revs{ grid-template-columns:repeat(4,1fr); }
}

/* Breathing room so the sticky bar never covers the footer */
@media (max-width:899px){
  body{ padding-bottom:76px; }
}

@media print{
  .header,.promo-bar,.stickybar,.fab,.toast,.hero__promo,.modal{ display:none !important; }
}