/* =================================================================
   ASIKAXO — Premium On-Demand Home Services
   Brand: teal → green → lime gradient identity
   ================================================================= */

:root{
  /* Brand palette (from the Asikaxo logo) */
  --ink:        #0c2a26;
  --ink-soft:   #3a4a45;
  --muted:      #677873;
  --deep:       #0a4a3f;
  --teal:       #0e7a5f;
  --green:      #2faa4d;
  --green-600:  #1f9a47;
  --lime:       #8dc63f;
  --lime-2:     #b6d94c;

  --mist:       #f2f7f3;
  --mist-2:     #e9f2ec;
  --paper:      #ffffff;
  --line:       #e2ece5;

  --grad:       linear-gradient(115deg,#0c6b53 0%, #2faa4d 52%, #8dc63f 100%);
  --grad-soft:  linear-gradient(135deg,#0a4a3f, #0e7a5f);
  --grad-lime:  linear-gradient(120deg,#2faa4d, #8dc63f);

  --shadow-sm:  0 2px 8px rgba(12,42,38,.06);
  --shadow:     0 18px 40px -18px rgba(10,74,63,.30);
  --shadow-lg:  0 40px 80px -28px rgba(10,74,63,.42);

  --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 34px;
  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html{ overflow-x:hidden; }
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--mist); line-height:1.65; font-size:16px;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.12; margin:0; color:var(--ink); font-weight:700; letter-spacing:-.02em; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }

.container{ width:min(100% - 40px, var(--container)); margin-inline:auto; }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200; background:var(--deep);
  color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--grad); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  padding:.85em 1.5em; border-radius:999px; background:var(--btn-bg); color:var(--btn-fg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .3s;
  white-space:nowrap; position:relative; isolation:isolate;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(15,122,95,.55); }
.btn:active{ transform:translateY(0); }
.btn--primary{ box-shadow:0 12px 24px -12px rgba(15,122,95,.5); }
.btn--lime{ --btn-bg:var(--grad-lime); color:#073b2b; }
.btn--ghost{ --btn-bg:transparent; color:var(--deep); box-shadow:inset 0 0 0 1.6px var(--line); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.6px var(--green); color:var(--green-600); }
.btn--text{ --btn-bg:transparent; color:var(--deep); padding-inline:.6em; }
.btn--text svg{ width:1.5em;height:1.5em; padding:.18em; background:var(--mist-2); border-radius:50%; transition:.3s; }
.btn--text:hover svg{ background:var(--grad); color:#fff; }
.btn--text:hover{ transform:none; box-shadow:none; }
.btn--sm{ padding:.65em 1.15em; font-size:.9rem; }
.btn--lg{ padding:1em 1.8em; font-size:1.05rem; }
.btn--block{ width:100%; }
.btn svg{ transition:transform .3s var(--ease); }
.btn:hover svg:last-child{ transform:translateX(3px); }

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display);
  font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green-600); margin-bottom:1rem;
}
.eyebrow__line{ width:30px; height:2px; background:var(--grad-lime); border-radius:2px; }
.eyebrow--center{ justify-content:center; }
.eyebrow--invert{ color:var(--lime-2); }
.eyebrow--invert .eyebrow__line{ background:var(--lime); }

/* ---------- Top bar ---------- */
.topbar{ background:var(--deep); color:#cfeede; font-size:.84rem; }
.topbar__row{ display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:1rem; }
.topbar__tag{ margin:0; display:flex; align-items:center; gap:.5em; }
.topbar__tag em{ color:#8fd6b3; font-style:normal; opacity:.8; }
.topbar .dot{ width:7px;height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(141,198,63,.2); }
.topbar__meta{ display:flex; gap:1.4rem; }
.topbar__meta a{ display:inline-flex; align-items:center; gap:.45em; color:#cfeede; transition:color .25s; }
.topbar__meta a:hover{ color:#fff; }
.topbar__meta svg{ width:15px;height:15px; color:var(--lime); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:90; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent;
  transition:box-shadow .3s, border-color .3s, background .3s;
}
.site-header.is-stuck{ box-shadow:0 10px 30px -18px rgba(10,74,63,.4); border-color:var(--line); }
.site-header__row{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:1.5rem; }
.brand__logo{ height:42px; width:auto; transition:transform .3s var(--ease); }
.brand:hover .brand__logo{ transform:scale(1.04); }
.nav__list{ display:flex; gap:.4rem; }
.nav__link{
  font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--ink-soft);
  padding:.55em .85em; border-radius:999px; position:relative; transition:color .25s, background .25s;
}
.nav__link:hover{ color:var(--green-600); background:var(--mist-2); }
.site-header__actions{ display:flex; align-items:center; gap:.7rem; }
.nav__toggle, .nav__close{ display:none; color:var(--deep); }
.nav__toggle svg, .nav__close svg{ width:26px; height:26px; }
.nav__mobile-cta{ display:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:clamp(3rem,6vw,5.5rem) 0 0; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.blob--1{ width:520px;height:520px; background:radial-gradient(circle,#8dc63f,transparent 70%); top:-160px; right:-120px; opacity:.45; }
.blob--2{ width:480px;height:480px; background:radial-gradient(circle,#0e7a5f,transparent 70%); bottom:-200px; left:-140px; opacity:.35; }
.blob--3{ width:380px;height:380px; background:radial-gradient(circle,#8dc63f,transparent 70%); top:-120px; right:-80px; opacity:.5; }
.grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px; opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.hero__inner{
  position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,4vw,4rem); align-items:center; padding-bottom:3.5rem;
}
.hero__title{ font-size:clamp(2.4rem,5.2vw,4rem); font-weight:800; margin-bottom:1.1rem; }
.hero__lead{ font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--ink-soft); max-width:46ch; margin-bottom:1.8rem; }
.hero__cta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }

/* Store badges */
.store-badges{ display:flex; gap:.7rem; flex-wrap:wrap; }
.store-badge{
  display:inline-flex; align-items:center; gap:.6em; padding:.55em 1.05em;
  background:#0c2a26; color:#fff; border-radius:14px; transition:transform .3s var(--ease), box-shadow .3s;
  box-shadow:var(--shadow-sm);
}
.store-badge:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -16px rgba(12,42,38,.6); }
.store-badge svg{ width:24px; height:24px; flex-shrink:0; }
.store-badge span{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.store-badge small{ font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; opacity:.8; }
.store-badge strong{ font-family:var(--font-display); font-size:.92rem; font-weight:600; }
.store-badge--web{ background:var(--paper); color:var(--deep); box-shadow:inset 0 0 0 1.6px var(--line); }
.store-badge--web svg{ width:20px;height:20px; }
.store-badge--dark{ background:#0c2a26; }
.store-badges--sm .store-badge{ padding:.45em .8em; }

/* Hero cutout stage */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.hero__visual{ position:relative; width:100%; }
.hero-stage{ position:relative; width:min(100%,500px); margin-inline:auto; aspect-ratio:1/1.04; }
/* natural cutout — no boxed background, just a soft halo + faint rings */
.hero-stage__panel{ position:absolute; inset:0; }
.hero-stage__ring{
  position:absolute; left:50%; top:46%; width:84%; aspect-ratio:1; border-radius:50%;
  border:2px dashed rgba(15,122,95,.16); transform:translate(-50%,-50%);
  animation:spin 46s linear infinite;
}
.hero-stage__ring--2{ width:62%; border-color:rgba(141,198,63,.32); animation-duration:34s; animation-direction:reverse; }
.hero-stage__glow{
  position:absolute; left:50%; top:42%; width:82%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(141,198,63,.30), rgba(141,198,63,.06) 45%, transparent 66%); filter:blur(8px);
}
.hero-stage__img{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:100%; width:auto; max-width:none;
  object-fit:contain; filter:drop-shadow(0 24px 30px rgba(10,74,63,.28));
  -webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent 100%); mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);
}

.hfloat{
  position:absolute; z-index:6; background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7); border-radius:16px; padding:.7rem .9rem;
  box-shadow:0 20px 44px -18px rgba(8,42,35,.55); display:flex; align-items:center; gap:.6rem; white-space:nowrap;
}
.hfloat p{ margin:0; display:flex; flex-direction:column; line-height:1.18; }
.hfloat strong{ font-family:var(--font-display); font-size:1rem; color:var(--ink); }
.hfloat span{ font-size:.72rem; color:var(--muted); }
.hfloat__ico{ display:grid; place-items:center; width:38px;height:38px; border-radius:11px; color:#fff; flex-shrink:0; }
.hfloat__ico svg{ width:21px;height:21px; }
.hfloat__ico--mint{ background:var(--grad); }
.hfloat__ico--lime{ background:var(--grad-lime); color:#06301f; }
.hfloat--sameday{ top:7%; left:-7%; animation:floaty 7s ease-in-out infinite; }
.hfloat--verticals{ bottom:9%; right:-6%; animation:floaty 8s ease-in-out infinite .5s; }
/* rating widget */
.hfloat--rate{ top:19%; right:-9%; flex-direction:column; align-items:flex-start; gap:.45rem; padding:.8rem 1rem; animation:floaty 7.6s ease-in-out infinite .3s; }
.hfloat__rate{ display:flex; align-items:center; gap:.6rem; }
.hfloat__stars{ display:flex; gap:1px; color:var(--lime); }
.hfloat__stars svg{ width:14px;height:14px; fill:var(--lime); }
.hfloat__rate strong{ font-size:1.15rem; } .hfloat__rate small{ font-size:.7rem; color:var(--muted); font-weight:600; }
.hfloat__bar{ width:100%; height:6px; border-radius:99px; background:var(--mist-2); overflow:hidden; }
.hfloat__bar i{ display:block; height:100%; border-radius:99px; background:var(--grad); }
/* booked widget */
.hfloat--booked{ bottom:15%; left:-9%; animation:floaty 8.4s ease-in-out infinite .7s; }
.hfloat__avatar{ display:grid; place-items:center; width:40px;height:40px; border-radius:11px; background:var(--grad-soft); color:#fff; flex-shrink:0; }
.hfloat__avatar svg{ width:22px;height:22px; }
.hfloat__tag{ font-family:var(--font-display); font-size:.68rem; font-weight:700; color:var(--green-600); background:rgba(47,170,77,.14); padding:.25em .6em; border-radius:999px; }

/* Marquee */
.marquee{ overflow:hidden; padding:1rem 0; border-block:1px solid var(--line); background:var(--paper); }
.marquee__track{ display:flex; gap:2.6rem; width:max-content; animation:marquee 38s linear infinite; }
.marquee__item{
  display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-display);
  font-weight:600; color:var(--ink-soft); font-size:1rem; white-space:nowrap;
}
.marquee__item svg{ width:20px;height:20px; color:var(--green); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Stats ---------- */
.stats{ background:var(--paper); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:2.4rem 0; }
.stat{ text-align:center; position:relative; }
.stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:18%; height:64%; width:1px; background:var(--line); }
.stat__value{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.7rem); }
.stat__label{ color:var(--muted); font-size:.92rem; }

/* ---------- Section base ---------- */
.section{ padding:clamp(3.6rem,7vw,6rem) 0; }
.section__head{ text-align:center; max-width:640px; margin:0 auto clamp(2.2rem,4vw,3.2rem); }
.section__title{ font-size:clamp(1.8rem,3.6vw,2.7rem); font-weight:800; }
.section__sub{ color:var(--muted); font-size:1.05rem; margin-top:.9rem; }
.section__title--light{ color:#fff; }
.section__sub--light{ color:#bfe6d3; }

/* ---------- Services ---------- */
.services__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.4rem; }
.svc-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.svc-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc-card__media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.svc-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc-card:hover .svc-card__media img{ transform:scale(1.08); }
.svc-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,74,63,.45),transparent 55%); }
.svc-card__icon{
  position:absolute; left:16px; top:-27px; z-index:2; width:54px;height:54px; border-radius:15px;
  background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow);
  border:3px solid #fff;
}
.svc-card__icon svg{ width:26px;height:26px; }
.svc-card__body{ position:relative; padding:2.1rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.svc-card__title{ font-size:1.22rem; margin-bottom:.45rem; }
.svc-card__desc{ color:var(--muted); font-size:.94rem; margin:0 0 1rem; }
.svc-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem; }
.svc-card__tags li{ font-size:.74rem; font-weight:600; color:var(--green-600); background:var(--mist-2); padding:.3em .7em; border-radius:999px; }
.svc-card__link{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-display); font-weight:600; color:var(--deep); font-size:.95rem;
}
.svc-card__link svg{ width:18px;height:18px; transition:transform .3s var(--ease); }
.svc-card:hover .svc-card__link{ color:var(--green-600); }
.svc-card:hover .svc-card__link svg{ transform:translateX(4px); }

/* ---------- Why ---------- */
.why__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.why__media{ position:relative; }
.why__stage{ position:relative; width:min(100%,420px); margin-inline:auto; aspect-ratio:1/1.05; }
/* natural cutout — no boxed background */
.why__stage-panel{ position:absolute; inset:0; }
.why__stage-ring{
  position:absolute; left:50%; top:44%; width:82%; aspect-ratio:1; border-radius:50%;
  border:2px dashed rgba(15,122,95,.18); transform:translate(-50%,-50%); animation:spin 50s linear infinite;
}
.why__stage-glow{
  position:absolute; left:50%; top:40%; width:80%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(141,198,63,.26), rgba(141,198,63,.05) 46%, transparent 66%); filter:blur(8px);
}
.why__stage-img{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:100%; width:auto; max-width:none;
  object-fit:contain; filter:drop-shadow(0 22px 28px rgba(10,74,63,.26));
  -webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent 100%); mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);
}
.why__chip{
  position:absolute; z-index:4; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-radius:14px;
  padding:.55rem .8rem; box-shadow:0 16px 34px -16px rgba(8,42,35,.4); display:flex; align-items:center; gap:.55rem;
}
.why__chip p{ margin:0; display:flex; flex-direction:column; line-height:1.15; }
.why__chip strong{ font-family:var(--font-display); font-size:.92rem; color:var(--ink); }
.why__chip span{ font-size:.7rem; color:var(--muted); }
.why__chip--rating{ top:9%; left:-5%; animation:floaty 7s ease-in-out infinite; }
.why__chip-stars{ display:flex; gap:1px; color:var(--lime); }
.why__chip-stars svg{ width:13px;height:13px; fill:var(--lime); }
.why__chip--check{ bottom:24%; left:-7%; animation:floaty 8s ease-in-out infinite .6s; }
.why__chip--check > span{ display:grid; place-items:center; width:34px;height:34px; border-radius:10px; background:var(--grad); color:#fff; flex-shrink:0; }
.why__chip--check svg{ width:19px;height:19px; }
.why__badge{
  position:absolute; right:-10px; bottom:-22px; background:var(--paper); border-radius:18px; padding:1rem 1.3rem;
  box-shadow:var(--shadow); border:1px solid var(--line); max-width:200px; display:flex; flex-direction:column;
}
.why__badge-num{ font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1; }
.why__badge-text{ color:var(--muted); font-size:.82rem; }
.why__lead{ color:var(--ink-soft); font-size:1.06rem; margin:0 0 2rem; }
.feature-list{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.6rem; }
.feature{ display:flex; gap:.9rem; }
.feature__icon{
  flex-shrink:0; width:48px;height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--mist-2); color:var(--green-600); transition:.35s var(--ease);
}
.feature__icon svg{ width:25px;height:25px; }
.feature:hover .feature__icon{ background:var(--grad); color:#fff; transform:translateY(-3px) rotate(-4deg); }
.feature__title{ font-size:1.05rem; margin-bottom:.25rem; }
.feature__desc{ color:var(--muted); font-size:.9rem; margin:0; }

/* ---------- How it works (dark) ---------- */
.how{ position:relative; background:var(--deep); overflow:hidden; }
.how::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 0%,rgba(141,198,63,.18),transparent 45%),radial-gradient(circle at 0% 100%,rgba(14,122,95,.4),transparent 50%); }
.how .container{ position:relative; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:step; }
.step{
  position:relative; padding:2rem 1.5rem; border-radius:var(--r-lg); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); transition:.4s var(--ease);
}
.step:hover{ background:rgba(255,255,255,.09); transform:translateY(-6px); }
.step__num{
  font-family:var(--font-display); font-weight:800; font-size:2.4rem; line-height:1;
  background:var(--grad-lime); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step__title{ color:#fff; font-size:1.18rem; margin:.8rem 0 .5rem; }
.step__desc{ color:#a9d2c0; font-size:.92rem; margin:0; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:2.6rem; right:-.85rem; width:1.2rem; height:2px;
  background:linear-gradient(90deg,var(--lime),transparent);
}

/* ---------- App section ---------- */
.app{ background:var(--paper); overflow:hidden; }
.app__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.app__lead{ color:var(--ink-soft); font-size:1.08rem; margin:0 0 1.6rem; max-width:44ch; }
.app__points{ display:grid; gap:.8rem; margin:0 0 2rem; }
.app__points li{ display:flex; align-items:center; gap:.7em; font-weight:500; color:var(--ink-soft); }
.app__points svg{ width:22px;height:22px; padding:3px; border-radius:50%; background:var(--grad); color:#fff; flex-shrink:0; }
.app__visual{ position:relative; display:grid; place-items:center; }
.phone__glow{ position:absolute; width:340px;height:340px; border-radius:50%; background:var(--grad); filter:blur(70px); opacity:.32; z-index:0; }
.phone{
  position:relative; z-index:1; width:280px; aspect-ratio:9/19; background:#0c2a26; border-radius:42px;
  padding:12px; box-shadow:var(--shadow-lg); animation:floaty 7s ease-in-out infinite;
}
.phone__notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px;height:20px; background:#0c2a26; border-radius:0 0 14px 14px; z-index:3; }
.phone__screen{ width:100%; height:100%; border-radius:32px; overflow:hidden; background:linear-gradient(180deg,#eef6f0,#fff); }
.appui{ padding:30px 16px 16px; height:100%; display:flex; flex-direction:column; gap:12px; font-size:13px; }
.appui__top{ display:flex; align-items:center; justify-content:space-between; }
.appui__top small{ color:var(--muted); font-size:11px; }
.appui__top strong{ display:block; font-family:var(--font-display); font-size:16px; color:var(--ink); }
.appui__avatar{ width:38px;height:38px; border-radius:50%; background:var(--grad); }
.appui__search{ display:flex; align-items:center; gap:.5em; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; color:var(--muted); font-size:12px; box-shadow:var(--shadow-sm); }
.appui__search svg{ width:16px;height:16px; color:var(--green); }
.appui__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.appui__chip{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--ink-soft); }
.appui__chip span{ display:grid; place-items:center; width:30px;height:30px; border-radius:9px; background:var(--mist-2); color:var(--green-600); }
.appui__chip svg{ width:17px;height:17px; }
.appui__card{ margin-top:auto; display:flex; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:var(--shadow-sm); }
.appui__card-img{ width:54px;height:54px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.appui__card-img img{ width:100%;height:100%; object-fit:cover; }
.appui__card-body{ display:flex; flex-direction:column; justify-content:center; gap:2px; position:relative; }
.appui__card-body strong{ font-family:var(--font-display); font-size:12.5px; }
.appui__card-body small{ color:var(--muted); font-size:10px; }
.appui__pill{ align-self:flex-start; margin-top:3px; font-size:9px; font-weight:700; color:#fff; background:var(--green); padding:2px 8px; border-radius:999px; }

/* ---------- Provider section (premium redesign) ---------- */
.grad-text-lime{ background:var(--grad-lime); -webkit-background-clip:text; background-clip:text; color:transparent; }
.prov{
  position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  background:radial-gradient(120% 130% at 12% 0%, #0e7257 0%, #0a4639 45%, #061f1b 100%);
}
.prov__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.prov__bg .blob--3{ z-index:1; mix-blend-mode:screen; opacity:.5; }
.prov__rings{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:520px; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle, transparent 58%, rgba(141,198,63,.10) 58.5%, transparent 60%),
    radial-gradient(circle, transparent 40%, rgba(255,255,255,.06) 40.5%, transparent 42%);
}
.prov__inner{
  position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,4vw,3.5rem);
  align-items:center; padding:clamp(2.2rem,4.5vw,3.6rem);
}
.prov__title{ color:#fff; font-size:clamp(1.7rem,3.3vw,2.5rem); font-weight:800; margin-bottom:1rem; max-width:18ch; }
.prov__lead{ color:#c7e8da; font-size:1.06rem; margin:0 0 1.6rem; max-width:46ch; }
.prov__perks{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.3rem; margin:0 0 1.8rem; }
.prov__perks li{ display:flex; align-items:center; gap:.65em; color:#eafff5; font-weight:500; font-size:.95rem; }
.prov__perks span{ display:grid; place-items:center; width:36px;height:36px; border-radius:10px; background:rgba(141,198,63,.16); color:var(--lime-2); flex-shrink:0; }
.prov__perks svg{ width:20px;height:20px; }
.prov__stats{ display:flex; gap:1.6rem; flex-wrap:wrap; margin:0 0 1.8rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.prov__stat strong{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#fff; }
.prov__stat span{ font-size:.78rem; color:#9fccb9; }
.prov__actions{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.prov__note{ display:inline-flex; align-items:center; gap:.4em; color:#a9d2c0; font-size:.9rem; }
.prov__note svg{ width:16px;height:16px; padding:2px; border-radius:50%; background:rgba(141,198,63,.2); color:var(--lime-2); }

/* earnings dashboard mockup */
.prov__visual{ position:relative; display:grid; place-items:center; min-height:300px; }
.earn{
  position:relative; z-index:2; width:min(100%,360px); background:rgba(255,255,255,.97); border-radius:22px;
  padding:1.3rem; box-shadow:0 30px 60px -24px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.6);
}
.earn__head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem; }
.earn__total small{ display:block; color:var(--muted); font-size:.74rem; }
.earn__total strong{ font-family:var(--font-display); font-size:1.7rem; color:var(--ink); }
.earn__pill{ display:inline-flex; align-items:center; gap:.25em; font-size:.78rem; font-weight:700; color:var(--green-600); background:rgba(47,170,77,.14); padding:.3em .6em; border-radius:999px; }
.earn__pill svg{ width:14px;height:14px; }
.earn__chart{ display:flex; align-items:flex-end; gap:8px; height:96px; margin-bottom:1rem; }
.earn__chart i{ flex:1; height:var(--h); border-radius:6px 6px 3px 3px; background:var(--grad); transform-origin:bottom; animation:growbar .9s var(--ease) both; }
.earn__chart i:nth-child(1){ animation-delay:.05s } .earn__chart i:nth-child(2){ animation-delay:.12s }
.earn__chart i:nth-child(3){ animation-delay:.19s } .earn__chart i:nth-child(4){ animation-delay:.26s }
.earn__chart i:nth-child(5){ animation-delay:.33s } .earn__chart i:nth-child(6){ animation-delay:.4s }
.earn__chart i:nth-child(7){ animation-delay:.47s; background:var(--grad-lime); }
@keyframes growbar{ from{ transform:scaleY(0); opacity:.3 } to{ transform:scaleY(1); opacity:1 } }
.earn__row{ display:flex; align-items:center; gap:.7rem; padding-top:.9rem; border-top:1px solid var(--line); }
.earn__ico{ display:grid; place-items:center; width:38px;height:38px; border-radius:11px; background:var(--mist-2); color:var(--green-600); flex-shrink:0; }
.earn__ico svg{ width:20px;height:20px; }
.earn__row p{ margin:0; flex:1; display:flex; flex-direction:column; line-height:1.2; }
.earn__row strong{ font-size:.92rem; } .earn__row small{ color:var(--muted); font-size:.76rem; }
.earn__row em{ font-style:normal; font-size:.74rem; color:var(--muted); }
.prov-toast{
  position:absolute; z-index:3; top:-7%; right:-3%; display:flex; align-items:center; gap:.6rem;
  background:#fff; border-radius:14px; padding:.6rem .8rem; box-shadow:0 20px 40px -16px rgba(0,0,0,.45);
  animation:floaty 6.5s ease-in-out infinite;
}
.prov-toast__ico{ display:grid; place-items:center; width:34px;height:34px; border-radius:10px; background:var(--grad); color:#fff; }
.prov-toast__ico svg{ width:19px;height:19px; }
.prov-toast p{ margin:0; display:flex; flex-direction:column; line-height:1.15; }
.prov-toast strong{ font-size:.86rem; } .prov-toast span{ font-size:.72rem; color:var(--muted); }
.prov-chip{
  position:absolute; z-index:3; bottom:-6%; left:6%; display:inline-flex; align-items:center; gap:.45em;
  background:#06301f; color:var(--lime-2); font-weight:600; font-size:.82rem; padding:.5rem .9rem; border-radius:999px;
  box-shadow:0 16px 30px -14px rgba(0,0,0,.5); animation:floaty 7.5s ease-in-out infinite .6s;
}
.prov-chip svg{ width:16px;height:16px; }

/* ---------- Reviews ---------- */
.reviews{ background:var(--paper); }
.reviews__viewport{ position:relative; }
.reviews__track{ display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem .2rem 1.4rem; scrollbar-width:none; }
.reviews__track::-webkit-scrollbar{ display:none; }
.review{
  scroll-snap-align:center; flex:0 0 clamp(280px,32%,380px); background:var(--mist);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem; display:flex; flex-direction:column; gap:1rem;
}
.review__stars{ display:flex; gap:2px; color:var(--lime); }
.review__stars svg{ width:18px;height:18px; fill:var(--lime); }
.review__quote{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.6; flex:1; }
.review__author{ display:flex; align-items:center; gap:.8rem; }
.review__author img{ width:46px;height:46px; border-radius:50%; object-fit:cover; }
.review__author strong{ font-family:var(--font-display); display:block; font-size:.98rem; }
.review__author small{ color:var(--muted); font-size:.82rem; }
.rev-nav{
  position:absolute; top:38%; width:46px;height:46px; border-radius:50%; background:#fff; color:var(--deep);
  display:grid; place-items:center; box-shadow:var(--shadow); border:1px solid var(--line); z-index:3; transition:.3s;
}
.rev-nav:hover{ background:var(--grad); color:#fff; }
.rev-nav svg{ width:22px;height:22px; }
.rev-nav--prev{ left:-12px; } .rev-nav--next{ right:-12px; }

/* ---------- Contact ---------- */
.contact{ background:linear-gradient(180deg,var(--mist),var(--mist-2)); }
.contact__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:1.6rem; }
.contact__panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(1.8rem,3vw,2.6rem); box-shadow:var(--shadow); }
.contact__panel--news{ background:var(--grad-soft); color:#fff; border:0; position:relative; overflow:hidden; }
.contact__panel--news::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px;height:220px; border-radius:50%; background:radial-gradient(circle,rgba(141,198,63,.4),transparent 70%); }
.contact__title{ color:#fff; font-size:1.6rem; position:relative; }
.contact__sub{ color:#cdeede; margin:.6rem 0 1.4rem; position:relative; }
.news-form{ position:relative; }
.news-form__row{ display:flex; gap:.6rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.4rem .4rem .4rem 1.2rem; }
.news-form__row input{ flex:1; background:none; border:0; color:#fff; font-size:.98rem; outline:none; min-width:0; }
.news-form__row input::placeholder{ color:#bfe6d3; }
.contact__cards{ display:grid; gap:1rem; margin-top:2rem; position:relative; }
.contact__cards li{ display:flex; align-items:center; gap:.9rem; }
.contact__cards li > span{ display:grid; place-items:center; width:44px;height:44px; border-radius:12px; background:rgba(255,255,255,.12); color:var(--lime-2); flex-shrink:0; }
.contact__cards svg{ width:22px;height:22px; }
.contact__cards small{ display:block; color:#a9d2c0; font-size:.78rem; }
.contact__cards a, .contact__cards div > span{ color:#fff; font-weight:600; }
.contact__formtitle{ font-size:1.3rem; margin-bottom:1.2rem; }
.field{ margin-bottom:.9rem; }
.field input, .field textarea{
  width:100%; padding:.9em 1.1em; border:1.5px solid var(--line); border-radius:14px; font-family:inherit;
  font-size:.98rem; color:var(--ink); background:var(--mist); transition:border-color .25s, box-shadow .25s; resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(47,170,77,.12); background:#fff; }
.form-msg{ margin:.7rem 0 0; font-size:.88rem; min-height:1em; font-weight:500; }
.form-msg.is-ok{ color:#063; } .contact__panel--news .form-msg.is-ok{ color:var(--lime-2); }
.form-msg.is-err{ color:#c0392b; } .contact__panel--news .form-msg.is-err{ color:#ffd5cf; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---------- Footer ---------- */
.footer{ background:#082a23; color:#bfe6d3; padding-top:clamp(3rem,5vw,4.5rem); }
.footer__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.4fr; gap:2rem; padding-bottom:2.5rem; }
.footer__logo{ height:42px; width:auto; margin-bottom:1rem; }
.footer__tag{ color:var(--lime-2); font-family:var(--font-display); font-weight:600; margin:0 0 .6rem; }
.footer__about{ font-size:.9rem; color:#9ccab5; max-width:34ch; margin:0 0 1.2rem; }
.footer__heading{ color:#fff; font-size:1rem; margin-bottom:1rem; }
.footer__col ul{ display:grid; gap:.6rem; }
.footer__col a, .footer__contact li{ color:#9ccab5; font-size:.92rem; transition:color .25s; display:flex; align-items:center; gap:.5em; }
.footer__col a:hover{ color:var(--lime-2); }
.footer__contact svg{ width:17px;height:17px; color:var(--lime); flex-shrink:0; }
.footer__col a.footer__provider{ margin-top:1.1rem; --btn-bg:linear-gradient(115deg,#0a6e54,#2faa4d); color:#fff; font-weight:700; }
.footer__col a.footer__provider:hover{ color:#fff; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.1); }
.footer__bar-row{ display:flex; align-items:center; justify-content:space-between; padding:1.3rem 0; font-size:.84rem; color:#7fb39c; gap:1rem; flex-wrap:wrap; }
.footer__bar-row strong{ color:var(--lime-2); }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:80; width:48px;height:48px; border-radius:50%;
  background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow);
  transform:translateY(20px) rotate(90deg) scale(.7); opacity:0; pointer-events:none; transition:.4s var(--ease);
}
.to-top.is-visible{ opacity:1; transform:translateY(0) rotate(90deg) scale(1); pointer-events:auto; }
.to-top:hover{ transform:translateY(-3px) rotate(90deg) scale(1.05); }
.to-top svg{ width:24px;height:24px; }

/* ---------- Reveal animations (only when JS is active) ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; max-width:480px; margin-inline:auto; }
  .why__grid, .app__grid, .contact__grid, .prov__inner{ grid-template-columns:1fr; }
  .prov__visual{ order:-1; min-height:280px; }
  .why__media{ max-width:520px; }
  .steps{ grid-template-columns:1fr 1fr; }
  .step:not(:last-child)::after{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .header-contact{ display:none; }
  .nav__toggle{ display:grid; }
  .nav{
    position:fixed; top:0; right:0; bottom:0; height:100vh; height:100dvh;
    width:min(82vw,360px); background:#fff; z-index:120; overflow-y:auto;
    transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:var(--shadow-lg);
    display:flex; flex-direction:column; padding:5rem 1.6rem 2rem; gap:1rem;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; gap:.2rem; }
  .nav__link{ display:block; padding:.8em 1em; font-size:1.05rem; }
  .nav__close{ display:grid; position:absolute; top:1.2rem; right:1.2rem; }
  .nav__mobile-cta{ display:inline-flex; margin-top:auto; }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(8,42,35,.5); backdrop-filter:blur(3px); z-index:110; opacity:0; pointer-events:none; transition:opacity .35s; }
  .nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
}
@media (max-width:640px){
  .topbar__meta{ display:none; }
  .stats__grid{ grid-template-columns:1fr 1fr; gap:1.6rem 1rem; }
  .stat:nth-child(2)::after{ display:none; }
  .feature-list, .prov__perks{ grid-template-columns:1fr; }
  .prov__stats{ gap:1.1rem; }
  .steps{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__cta{ gap:.7rem; }
  .section__sub{ font-size:.98rem; }
  /* keep floating widgets inside the viewport on phones */
  .hero-stage{ width:min(100%,360px); }
  .hfloat{ padding:.55rem .7rem; gap:.5rem; transform:scale(.92); }
  .hfloat strong{ font-size:.9rem; } .hfloat span{ font-size:.66rem; }
  .hfloat__ico,.hfloat__avatar{ width:32px;height:32px; }
  .hfloat--sameday{ left:-2%; } .hfloat--verticals{ right:-1%; }
  .hfloat--rate{ right:-3%; } .hfloat--booked{ left:-3%; }
}
@media (max-width:420px){
  .store-badge span{ display:none; }
  .store-badge{ padding:.7em; }
  .hfloat--rate{ display:none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}