/* =====================================================================
   DushiFinder — style.css  (mockup-faithful rebuild)
   SECTIONS
     0. Tokens
     1. Base / helpers / buttons
     2. Nav
     3. Hero  ← key: dark-left gradient so Handelskade shows right
     4. How It Works
     5. Popular Services cards
     6. Why DushiFinder
     7. For Businesses
     8. Final CTA
     9. Footer + legend
    10. Day / Sunset / Night themes  (body class from script.js)
    11. Dushi Assistant chatbot
    12. Legal pages
    13. Responsive
   ===================================================================== */

/* ---------- 0. TOKENS ---------- */
:root {
  --navy:     #0d2440;
  --navy-d:   #0a1726;
  --wa:       #25D366;
  --wa-dark:  #1da84f;
  --yellow:   #FFD23F;
  --ink:      #13263d;
  --ink-soft: #5a6b7d;
  --line:     #e7ecf1;
  --bg:       #ffffff;
  --bg-alt:   #f4f8fb;
  --rad:      18px;
  --rad-lg:   26px;
  --maxw:     1160px;
  --sh:       0 8px 28px rgba(13,36,64,.09);
  --sh-lg:    0 18px 48px rgba(13,36,64,.16);

  /* hero background images — edit paths here only */
  --hero-day:    url("assets/Handelskade_dag.png");
  --hero-sunset: url("assets/Zonsondergang.png");
  --hero-night:  url("assets/Handelskade_avond.png");
}

/* ---------- 1. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html  { scroll-behavior: smooth }
body  { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--bg);
        line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden }
h1, h2, h3, .brand { font-family: 'Poppins', sans-serif; letter-spacing: -.01em }
a   { color: inherit; text-decoration: none }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px }
.section { padding: 72px 0 }
.section--alt { background: var(--bg-alt) }
.section__title { font-size: clamp(1.65rem,4vw,2.2rem); font-weight: 800; color: var(--navy);
                  text-align: center; line-height: 1.15; margin-bottom: 8px }
.section__sub   { text-align: center; color: var(--ink-soft); font-size: .96rem; margin-bottom: 4px }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer; line-height: 1;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn--wa   { background: var(--wa); color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.38) }
.btn--wa:hover  { background: var(--wa-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,.48) }
.btn--hero { padding: 17px 32px; font-size: 1.1rem }
.btn--lg   { padding: 17px 32px; font-size: 1.08rem }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px }
.ico-wa { width: 1.35em; height: 1.35em; flex: 0 0 auto }

/* ---------- 2. NAV ---------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20 }
.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 24px 0;
}

.brand { display: inline-flex; align-items: center; gap: .45em;
         font-weight: 800; font-size: 1.3rem; color: #fff }
.brand--light { color: #fff }
.brand__pin { width: 1.15em; height: 1.15em; color: var(--wa); flex: 0 0 auto }

.nav__links {
  display: flex; align-items: center; gap: 24px;
  font-weight: 500; font-size: .96rem;
}
.nav__links > a { color: rgba(255,255,255,.92); transition: color .15s }
.nav__links > a:hover { color: #fff }

.lang   { display: flex; align-items: center; gap: 5px }
.sep    { color: rgba(255,255,255,.4); font-size: .85rem }
.lang__btn {
  background: none; border: 0; cursor: pointer; font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: .85rem; color: rgba(255,255,255,.65); padding: 2px 3px;
  transition: color .15s;
}
.lang__btn:hover, .lang__btn.is-active { color: #fff }
.lang__btn.is-active { text-decoration: underline; text-underline-offset: 4px }

.hamburger {
  display: none; flex-direction: column; gap: 5px; background: none;
  border: 0; cursor: pointer; padding: 8px; flex: 0 0 auto;
}
.hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px }

/* ---------- 3. HERO ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  min-height: 560px; display: flex; flex-direction: column;
}

/* Background photo — JS swaps this via theme classes */
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-day);   /* day = default; no flash before JS */
  background-size: cover; background-position: center 40%;
}

/* THE KEY: dark on the left (text lives here), fades to near-transparent right */
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    to right,
    rgba(5,14,38,.95)  0%,
    rgba(5,14,38,.92)  28%,
    rgba(5,14,38,.68)  50%,
    rgba(5,14,38,.22)  70%,
    rgba(5,14,38,.04)  100%
  );
}

.hero__inner { padding: 100px 0 80px; flex: 1; display: flex; align-items: center }

.hero__text { max-width: 52% }

.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  font-weight: 800; line-height: 1.04; color: #fff;
}
.hero__lead {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--yellow);
  margin-top: 14px; line-height: 1.25;
}
.hero__sub {
  font-size: 1.02rem; color: rgba(255,255,255,.9);
  margin-top: 16px; max-width: 540px; font-weight: 400;
}

/* Pills */
.pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 10px }

/* PNG button assets: icon is baked into the image on the left,
   HTML label sits in the empty right space. ~4:1 pill aspect.
   background-size 115% + centered hides the PNG's transparent margin. */
.pill--img {
  position: relative;
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 165px; height: 46px;
  padding: 0 12px 0 62px;          /* left padding clears the baked-in icon */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;      /* PNGs are pre-cropped to the pill */
  color: #fff; font-weight: 700; font-size: .9rem;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.3));
  transition: transform .15s, filter .15s;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.pill--img span { line-height: 1; white-space: nowrap }
.pill--img:hover { transform: translateY(-2px); filter: drop-shadow(0 9px 18px rgba(0,0,0,.36)) brightness(1.04) }

.btn-drivers    { background-image: url("assets/btn-drivers.png") }
.btn-carrental  { background-image: url("assets/btn-carrental.png") }
.btn-tours      { background-image: url("assets/btn-tours.png") }
.btn-beauty     { background-image: url("assets/btn-beauty.png") }
.btn-localhelp  { background-image: url("assets/btn-localhelp.png") }



.hero .btn--wa  { margin-top: 24px }
.hero__trust    { margin-top: 14px; font-size: .86rem; color: rgba(255,255,255,.82); font-weight: 500 }

/* ---------- 4. HOW IT WORKS ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
  margin-top: 52px;
}
.step { text-align: center; padding: 0 12px }

.step__ico {
  position: relative;
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; box-shadow: var(--sh);
}
.step__ico svg { width: 38px; height: 38px }
.step__ico--wa    { background: var(--wa);  color: #fff }
.step__ico--slate { background: #46617a;   color: #fff }

.step__num {
  position: absolute; bottom: -4px; right: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wa); color: #fff;
  font-family: 'Poppins'; font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(37,211,102,.4);
}
.step__ico--slate + .step__num,
.step__ico--slate ~ .step__num { background: #46617a }

/* restyle: the num is inside the ico wrapper */
.step__ico { position: relative }

.step__connector {
  align-self: flex-start;
  margin-top: 38px;
  width: 60px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #b8c8d8 0 8px, transparent 8px 16px
  );
  flex-shrink: 0;
}

.step h3 { font-size: 1.04rem; color: var(--navy); margin-bottom: 8px; line-height: 1.3 }
.step p  { color: var(--ink-soft); font-size: .95rem; max-width: 260px; margin: 0 auto }

/* ---------- 5. POPULAR SERVICES ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 40px;
}

.card {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--rad);
  overflow: hidden; box-shadow: var(--sh);
  display: flex; flex-direction: column;
  transition: transform .16s, box-shadow .16s;
  cursor: pointer;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg) }

.card__art {
  height: 150px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card__art img { width: 100%; height: 100%; object-fit: cover; display: block }

/* Each tile gets the badge's own pastel so edges blend seamlessly —
   no neutral/checkerboard gap behind the illustration. */
.card:nth-child(1) .card__art { background: #d6eaf8 }  /* airport  – soft blue  */
.card:nth-child(2) .card__art { background: #d5f0d8 }  /* car      – soft mint  */
.card:nth-child(3) .card__art { background: #feecc0 }  /* tours    – soft sand  */
.card:nth-child(4) .card__art { background: #fce4ec }  /* beauty   – soft pink  */
.card:nth-child(5) .card__art { background: #fde8d0 }  /* home     – soft peach */
.card:nth-child(6) .card__art { background: #fdecc0 }  /* food     – soft cream */

.card__body { padding: 16px 18px 20px }
.card__body h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 6px; line-height: 1.25 }
.card__body p  { color: var(--ink-soft); font-size: .91rem }

.card__pilot {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(255,255,255,.92); color: #9a6a1e;
  font-weight: 600; font-size: .72rem;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* ---------- 6. WHY DUSHIFINDER ---------- */
.why {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 32px; margin-top: 48px;
}
.why__item { text-align: center }
.why__ico {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; box-shadow: var(--sh);
}
.why__ico svg { width: 30px; height: 30px }
.why__ico--teal  { background: #00bcd4 }
.why__ico--green { background: var(--wa) }
.why__ico--amber { background: #ffb300 }
.why__ico--coral { background: #ff5722 }
.why__item h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 6px; line-height: 1.25 }
.why__item p  { color: var(--ink-soft); font-size: .92rem; max-width: 230px; margin: 0 auto }

/* ---------- 7. FOR BUSINESSES ---------- */
.biz {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #e4f5e7 0%, #cde8d4 100%);
  border: 1px solid #c0ddc8; border-radius: var(--rad-lg);
  padding: 44px 220px 44px 180px;
  box-shadow: var(--sh);
  display: flex; align-items: center;
}
/* Banner variant: the uploaded business-banner.png is one continuous
   tropical scene (owners left, palms right). It fills the whole card. */
.biz--banner {
  background: #e9f4ea url("assets/business-banner.png") center / cover no-repeat;
  border: 0;
  padding: 46px 24px;
  min-height: 250px;
  justify-content: center;
  border-radius: var(--rad-lg);
  overflow: hidden;
}
.biz--banner .biz__text {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(3px);
  border-radius: 18px;
  padding: 26px 32px;
  max-width: 540px;
  box-shadow: 0 8px 28px rgba(13,36,64,.12);
}
.biz__text { position: relative; z-index: 2; flex: 1; text-align: center }
.biz h2 { font-size: clamp(1.35rem,3vw,1.85rem); color: var(--navy); line-height: 1.2 }
.biz p  { color: #37614a; margin: 12px 0 22px; font-weight: 500; max-width: 520px; margin-left: auto; margin-right: auto }
.biz__micro { margin-top: 14px; font-size: .86rem; color: #4f7a63; font-weight: 500 }

/* ---------- 8. FINAL CTA ---------- */
.final {
  position: relative; overflow: hidden; color: #fff;
  text-align: center; isolation: isolate; padding: 42px 0 38px;
}
.final__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("assets/Footer.png");
  background-size: cover; background-position: center 40%;
}
.final__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,20,52,.52), rgba(10,38,78,.58));
}
.final__inner { position: relative; max-width: 640px; margin: 0 auto }
.final h2 { font-size: clamp(1.5rem,3.8vw,2.05rem); font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.3) }
.final p  { margin-top: 8px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.3) }
.final .btn--wa { margin-top: 18px }
.final__micro { margin-top: 12px; font-size: .85rem; color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(0,0,0,.3) }

/* ---------- 9. FOOTER + LEGEND ---------- */
.foot { background: var(--navy-d); color: #9fb0c2; padding: 34px 0 22px }
.foot .wrap { max-width: 1080px }
.foot__top {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px 36px; align-items: center; text-align: center;
}
.foot__brand { text-align: center }
.foot__brand .brand { font-size: 1.15rem; color: #fff; justify-content: center }
.foot__brand .brand__pin { color: var(--wa) }
.foot__tag { margin-top: 6px; font-size: .88rem; color: #74879b }
.foot__links {
  display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; justify-content: center;
}
.foot__links a { color: #9fb0c2; transition: color .15s }
.foot__links a:hover { color: #fff }
.foot__lang { font-size: .88rem; color: #74879b; letter-spacing: .04em }

.legend {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 24px; max-width: 820px; margin: 20px auto 0;
  padding-top: 16px; border-top: 1px solid #1c2c3e;
  font-size: .82rem; color: #5f7285;
}
.legend__item { opacity: .45; transition: opacity .3s }
.legend__item b { color: #9fb0c2; font-weight: 600 }
.legend__note { color: #4a5f72; font-size: .78rem; width: 100%; text-align: center; margin-top: 2px }

.foot__copy {
  text-align: center; font-size: .83rem; color: #5f7285;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #1c2c3e;
}

/* ---------- 10. DAY / SUNSET / NIGHT THEMES ---------- */

/* JS adds theme-day / theme-sunset / theme-night to <body>
   CSS defaults to day (no flash before JS runs)             */

.theme-sunset .hero__bg { background-image: var(--hero-sunset) }
.theme-night .hero__bg  { background-image: var(--hero-night) }

/* Sunset: warm orange/purple overlay */
.theme-sunset .hero__overlay {
  background: linear-gradient(
    to right,
    rgba(26,16,66,.92)  0%,
    rgba(26,16,66,.88)  28%,
    rgba(160,60,20,.52) 55%,
    rgba(120,40,60,.18) 75%,
    rgba(80,20,40,.04)  100%
  );
}
/* Night: deep navy overlay */
.theme-night .hero__overlay {
  background: linear-gradient(
    to right,
    rgba(4,10,30,.96)  0%,
    rgba(4,10,30,.92)  30%,
    rgba(6,16,44,.64)  54%,
    rgba(8,20,50,.20)  72%,
    rgba(8,20,50,.04)  100%
  );
}
/* Final CTA uses static Footer.png — no theme-specific overlay needed */

/* Active legend item glows */
.theme-day    .legend__item[data-theme-key="day"],
.theme-sunset .legend__item[data-theme-key="sunset"],
.theme-night  .legend__item[data-theme-key="night"] { opacity: 1 }

/* ---------- 11. DUSHI ASSISTANT (chatbot) ---------- */
.da-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--wa); color: #fff;
  font-family: 'Poppins'; font-weight: 700; font-size: .95rem;
  border: 0; cursor: pointer; padding: 13px 18px; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(37,211,102,.42);
  transition: transform .15s, box-shadow .15s;
}
.da-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,211,102,.5) }
.da-fab svg { width: 1.35em; height: 1.35em }
.da-fab.is-hidden { display: none }

.da-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  width: min(360px, calc(100vw - 32px));
  max-height: min(580px, calc(100vh - 40px));
  background: #fff; border-radius: 20px; overflow: hidden;
  display: none; flex-direction: column;
  box-shadow: 0 24px 60px rgba(13,36,64,.3); border: 1px solid var(--line);
}
.da-panel.is-open { display: flex }

.da-head {
  background: var(--navy); color: #fff; padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
}
.da-head__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--wa); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.da-head__avatar svg { width: 22px; height: 22px }
.da-head__title { font-family: 'Poppins'; font-weight: 700; font-size: 1rem; line-height: 1.1 }
.da-head__sub   { font-size: .74rem; color: rgba(255,255,255,.7); margin-top: 2px }
.da-head__close {
  margin-left: auto; background: none; border: 0;
  color: rgba(255,255,255,.8); cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 4px 6px; border-radius: 8px;
}
.da-head__close:hover { background: rgba(255,255,255,.12); color: #fff }

.da-body {
  flex: 1; overflow-y: auto; padding: 18px;
  background: var(--bg-alt); display: flex; flex-direction: column; gap: 12px;
}
.da-msg {
  max-width: 84%; padding: 11px 14px; border-radius: 14px;
  font-size: .92rem; line-height: 1.45;
  animation: da-pop .18s ease;
}
.da-msg--bot  { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px }
.da-msg--user { align-self: flex-end; background: var(--wa); color: #fff; border-bottom-right-radius: 4px }
@keyframes da-pop { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.da-replies {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--line); background: #fff;
}
.da-chip {
  background: #eef5f1; color: var(--navy); border: 1px solid #d7e8df;
  font-weight: 600; font-size: .84rem; padding: 8px 13px; border-radius: 999px;
  cursor: pointer; transition: background .15s, transform .1s;
}
.da-chip:hover  { background: #ddeee6 }
.da-chip:active { transform: scale(.97) }
.da-chip--wa {
  background: var(--wa); color: #fff; border-color: var(--wa);
  display: inline-flex; align-items: center; gap: .4em;
}
.da-chip--wa:hover { background: var(--wa-dark) }
.da-chip--wa svg { width: 1.05em; height: 1.05em }
.da-foot { font-size: .72rem; color: var(--ink-soft); text-align: center; padding: 8px 14px 12px; background: #fff }

/* ---------- 12. LEGAL PAGES ---------- */
.legal-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #0d2440 0%, #0a2a4a 60%, #0e3358 100%);
}
.legal-hero .nav__links > a { color: rgba(255,255,255,.88) }
.legal-hero__title {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px 24px 52px;
}
.legal-hero__title h1 { font-size: clamp(1.9rem,4.6vw,2.6rem); font-weight: 800; line-height: 1.1 }
.legal-hero__title p  { margin-top: 10px; color: rgba(255,255,255,.82); max-width: 600px }

.legal { max-width: 780px; margin: 0 auto; padding: 56px 24px 80px }
.legal__updated {
  display: inline-block; background: var(--bg-alt); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .84rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 26px;
}
.legal__lead { font-size: 1.06rem; color: #33465c; margin-bottom: 18px; line-height: 1.6 }
.legal h2   { font-size: 1.2rem; color: var(--navy); margin: 32px 0 10px; font-family: 'Poppins', sans-serif }
.legal p    { color: #41546b; margin: 0 0 14px; font-size: 1rem; line-height: 1.65 }
.legal ul   { margin: 0 0 16px; padding-left: 20px; color: #41546b }
.legal li   { margin: 6px 0; line-height: 1.6 }
.legal a    { color: var(--wa-dark); font-weight: 600 }
.legal a:hover { text-decoration: underline }
.legal__back {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: 30px; font-weight: 700; color: var(--wa-dark);
}

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2,1fr) }
  .why   { grid-template-columns: repeat(2,1fr); gap: 28px 20px }
}

@media (max-width: 760px) {
  .section { padding: 52px 0 }

  /* Nav mobile */
  .nav__links {
    position: absolute; top: 68px; left: 0; right: 0; z-index: 30;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--navy-d); padding: 8px 22px 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3); display: none;
  }
  .nav__links.is-open { display: flex }
  .nav__links > a {
    color: rgba(255,255,255,.9); width: 100%;
    padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .lang { padding: 14px 0 }
  .sep  { color: rgba(255,255,255,.35) }
  .lang__btn { color: rgba(255,255,255,.65) }
  .hamburger { display: flex }

  /* Hero mobile */
  .hero { min-height: auto }
  .hero__text { max-width: 100% }
  /* On mobile the overlay should be more uniform (full coverage) */
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(5,14,38,.88) 0%,
      rgba(5,14,38,.75) 100%
    );
  }
  .hero__inner { padding: 84px 0 64px }
  .hero h1 { font-size: clamp(2rem,8vw,2.8rem) }
  .hero__lead { font-size: clamp(1.1rem,4.5vw,1.4rem) }

  .pills { gap: 10px; justify-content: flex-start }
  .pill--img {
    width: 150px; height: 42px;
    padding: 0 10px 0 50px; font-size: .86rem;
  }

  /* Steps: stack vertically */
  .steps { grid-template-columns: 1fr; gap: 32px }
  .step__connector { display: none }
  .step p { max-width: 100% }

  .cards { grid-template-columns: 1fr }
  .why   { grid-template-columns: 1fr 1fr; gap: 24px 16px }

  .biz--banner { padding: 36px 18px; min-height: 0 }
  .biz--banner .biz__text { background: rgba(255,255,255,.82); padding: 22px 20px }

  .foot__top { flex-direction: column; gap: 22px }
  .legend { justify-content: center }
  .legend__note { width: 100%; margin: 4px 0 0; text-align: center }
}

@media (max-width: 480px) {
  .why { grid-template-columns: 1fr 1fr }
  .da-fab span { display: none }
  .da-fab { padding: 14px; border-radius: 50% }
  .da-panel { right: 12px; bottom: 12px; left: 12px; width: auto }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important }
  html { scroll-behavior: auto !important }
}