/* ============================================================
   NabaTech — nabatech.info
   Palette sourced from the NabaTech logo + style sheet.
   ============================================================ */

:root{
  /* Brand */
  --leaf:        #8CC64F;   /* logo light green  */
  --leaf-600:    #74B23A;
  --leaf-700:    #5C9430;
  --forest:      #013322;   /* logo deep green   */
  --forest-800:  #0A4530;
  --forest-600:  #174B2A;
  --mint-50:     #F1F9EA;
  --mint-100:    #E1F2D2;

  /* Neutrals */
  --ink:         #0B1A14;
  --body:        #46584F;
  --muted:       #7A8C83;
  --line:        #E4EDE6;
  --surface:     #FFFFFF;
  --surface-2:   #F7FBF4;

  /* System */
  --radius:      18px;
  --radius-lg:   28px;
  --shadow-sm:   0 2px 10px rgba(1,51,34,.06);
  --shadow:      0 12px 34px rgba(1,51,34,.10);
  --shadow-lg:   0 30px 70px rgba(1,51,34,.18);
  --wrap:        1180px;
  --font:        "Alexandria", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt:    "Montserrat", "Alexandria", system-ui, sans-serif;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

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

h1,h2,h3,h4{ color:var(--ink); font-weight:700; line-height:1.15; margin:0 0 .6em; letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem,5.2vw,4rem); font-weight:800; }
h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); }
h3{ font-size:1.16rem; }
p{ margin:0 0 1.1em; }
a{ color:var(--leaf-700); text-decoration:none; }
a:hover{ color:var(--forest); }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }
.grad{
  background:linear-gradient(105deg,var(--leaf) 0%,var(--forest-600) 65%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Parked above the viewport, not beside it — a horizontal offset here makes the
   RTL page scrollable sideways. */
.skip-link{
  position:absolute; inset-inline-start:0; top:-100px; z-index:200;
  background:var(--forest); color:#fff; padding:12px 18px; border-radius:0 0 12px 0;
}
.skip-link:focus{ top:0; }

:focus-visible{ outline:3px solid var(--leaf); outline-offset:3px; border-radius:6px; }

/* ---------------- Buttons ---------------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font); font-size:.93rem; font-weight:600; line-height:1;
  padding:13px 22px; border-radius:999px; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-lg{ padding:16px 30px; font-size:1rem; }

.btn-primary{
  --btn-bg:linear-gradient(120deg,var(--leaf) 0%,var(--leaf-700) 100%);
  --btn-fg:#fff; --btn-bd:transparent;
  box-shadow:0 10px 24px rgba(140,198,79,.34);
}
.btn-primary:hover{ box-shadow:0 16px 34px rgba(140,198,79,.44); }

/* The app download is the site's primary goal — forest green outranks the leaf-green CTAs. */
.btn-download{
  --btn-bg:linear-gradient(120deg,var(--forest-800) 0%,var(--forest) 100%);
  --btn-fg:#fff; --btn-bd:transparent;
  box-shadow:0 10px 26px rgba(1,51,34,.32);
}
.btn-download:hover{ box-shadow:0 18px 38px rgba(1,51,34,.42); }
.store-icon{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

.btn-outline{ --btn-fg:var(--forest); --btn-bd:var(--line); --btn-bg:#fff; box-shadow:var(--shadow-sm); }
.btn-outline:hover{ --btn-bd:var(--leaf); }

.btn-ghost{ --btn-fg:var(--forest); --btn-bg:transparent; --btn-bd:transparent; }
.btn-ghost:hover{ --btn-bg:var(--mint-50); }

.btn-light{ --btn-bg:#fff; --btn-fg:var(--forest); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.btn-outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55); }
.btn-outline-light:hover{ --btn-bg:rgba(255,255,255,.12); --btn-bd:#fff; }

.arrow{ transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(4px); }
.play{ font-size:.7em; }

/* ---------------- Pills ---------------- */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; font-weight:500; padding:8px 16px; border-radius:999px;
}
.pill-accent{ background:var(--mint-50); color:var(--forest-600); border:1px solid var(--mint-100); }
.pill-soft{ background:#fff; color:var(--body); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.pill-soft-light{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); }
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--leaf); box-shadow:0 0 0 4px rgba(140,198,79,.22); }
.pill .tick{ color:var(--leaf-700); font-weight:700; }

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(1,51,34,.05); background:rgba(255,255,255,.9); }
.header-inner{ display:flex; align-items:center; gap:28px; height:76px; }
/* The logo must never absorb flex shrinkage — with the global img{max-width:100%}
   that squashes the bilingual lockup instead of just narrowing the column. */
.brand{ flex:none; display:flex; align-items:center; }
.brand-logo{ height:42px; width:auto; max-width:none; }

.site-nav{ display:flex; gap:28px; margin-inline-end:auto; }
.site-nav a{ font-size:.92rem; font-weight:500; color:var(--body); position:relative; padding:6px 0; white-space:nowrap; }
.site-nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:2px; width:0;
  background:var(--leaf); transition:width .22s ease; border-radius:2px;
}
.site-nav a:hover{ color:var(--forest); }
.site-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:10px; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 11px; border:1px solid var(--line);
  border-radius:12px; background:#fff; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background:var(--forest); border-radius:2px; transition:.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; padding:150px 0 90px; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 12% -10%, var(--mint-50) 0%, transparent 60%),
    linear-gradient(180deg,#FBFEF8 0%,#FFFFFF 70%);
}
.hero-glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; }
.hero-glow-a{ width:460px; height:460px; top:-120px; left:-120px; background:rgba(140,198,79,.32); }
.hero-glow-b{ width:520px; height:520px; top:40px; right:-160px; background:rgba(250,226,120,.32); }

.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center;
}
.hero-copy h1{ margin:18px 0 22px; }
.lede{ font-size:1.09rem; color:var(--body); max-width:56ch; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 28px; }
/* Three CTAs never fit side by side in the hero column, so stack them as a
   deliberate ladder: download, then chat, then booking. */
.hero-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hero-cta .btn{ width:100%; max-width:330px; }

.stats{ display:flex; gap:44px; margin:46px 0 0; padding:0; flex-wrap:wrap; }
.stats div{ display:flex; flex-direction:column; }
.stats dt{
  font-size:1.9rem; font-weight:800; color:var(--forest);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stats dd{ margin:2px 0 0; font-size:.85rem; color:var(--muted); }
.stats-wide{ justify-content:space-around; margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }

/* Hero visual */
.hero-visual{ position:relative; }
.hero-card{
  position:relative; margin:0; border-radius:var(--radius-lg); overflow:visible;
}
.hero-card img{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; height:auto;
}
.float-chip{
  position:absolute; background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px); border:1px solid var(--line);
  border-radius:14px; padding:10px 15px; box-shadow:var(--shadow);
  font-size:.82rem; color:var(--forest); display:flex; align-items:center; gap:.55em;
  animation:float 5s ease-in-out infinite;
}
.float-top{ top:18px; left:-14px; font-weight:600; }
/* The hero image carries its own headline band across the bottom ~25%, so the
   second chip sits just above it rather than hanging off the corner. */
.float-bottom{
  bottom:28%; right:14px; flex-direction:column; align-items:flex-start; gap:2px;
  animation-delay:1.6s;
}
.float-bottom strong{ font-size:.86rem; color:var(--forest); }
.float-bottom span{ font-size:.74rem; color:var(--muted); }
.ping{
  width:9px; height:9px; border-radius:50%; background:var(--leaf);
  box-shadow:0 0 0 0 rgba(140,198,79,.6); animation:ping 1.8s ease-out infinite;
}
@keyframes ping{ 70%{ box-shadow:0 0 0 12px rgba(140,198,79,0);} 100%{ box-shadow:0 0 0 0 rgba(140,198,79,0);} }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

/* ---------------- Sections ---------------- */
.section{ padding:96px 0; }
.section-tint{ background:var(--surface-2); }
.section-head{ max-width:720px; margin:0 auto 56px; text-align:center; }
.section-head p{ font-size:1.04rem; color:var(--muted); margin:0; }

/* Feature cards */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 26px; box-shadow:var(--shadow-sm);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--mint-100); }
.card p{ margin:0; font-size:.93rem; color:var(--muted); }
.card-icon{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-size:1.5rem; margin-bottom:20px; background:var(--mint-50);
}
.icon-water{ background:#E3F1FB; }
.icon-soil{ background:var(--mint-50); }
.icon-design{ background:#FBF3E0; }
.icon-expert{ background:#EEE8FB; }

/* Mid CTA band */
.cta-band{
  padding:76px 0;
  background:linear-gradient(120deg,var(--forest) 0%,var(--forest-600) 55%,var(--leaf-700) 100%);
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; inset:auto -10% -60% -10%; height:220px;
  background:radial-gradient(closest-side,rgba(140,198,79,.4),transparent);
}
.cta-inner{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.82); max-width:52ch; margin-inline:auto; }
.cta-buttons{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; }

/* Steps */
/* Six steps fill three columns as two even rows. */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 22px; text-align:center;
  transition:transform .28s ease, box-shadow .28s ease;
}
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.step-num{
  display:grid; place-items:center; width:46px; height:46px; margin:0 auto 18px;
  border-radius:50%; font-weight:800; font-size:1.05rem; color:#fff;
  background:linear-gradient(120deg,var(--leaf) 0%,var(--leaf-700) 100%);
  box-shadow:0 8px 18px rgba(140,198,79,.32);
}
.step h3{ font-size:1.02rem; }
.step p{ margin:0; font-size:.88rem; color:var(--muted); }

/* Showcase */
.showcase{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.showcase-copy h2{ margin-top:16px; }
.ticks{ margin:0 0 30px; display:grid; gap:12px; }
.ticks li{ position:relative; padding-inline-start:32px; color:var(--body); font-size:.96rem; }
.ticks li::before{
  content:"✓"; position:absolute; inset-inline-start:0; top:-1px;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:700; color:#fff;
  background:linear-gradient(120deg,var(--leaf) 0%,var(--leaf-700) 100%);
}
.showcase .cta-buttons{ justify-content:flex-start; margin-top:0; }

.showcase-visual{ position:relative; }
.showcase-grid-img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; }
.showcase-phone{
  position:absolute; right:-26px; bottom:-56px; width:36%;
  border-radius:24px; box-shadow:var(--shadow-lg);
  animation:float 6s ease-in-out infinite;
}

/* Testimonials */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; box-shadow:var(--shadow-sm);
  transition:transform .28s ease, box-shadow .28s ease;
}
.quote:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.quote blockquote{
  margin:0 0 22px; font-size:.95rem; color:var(--body); position:relative; padding-top:26px;
}
.quote blockquote::before{
  content:"\201C"; position:absolute; top:-10px; inset-inline-start:-4px;
  font-family:Georgia,serif; font-size:3.4rem; color:var(--mint-100); line-height:1;
}
.quote figcaption{ display:flex; align-items:center; gap:14px; }
.quote figcaption span:last-child{ display:flex; flex-direction:column; }
.quote strong{ color:var(--ink); font-size:.92rem; }
.quote em{ font-style:normal; font-size:.8rem; color:var(--muted); }
.avatar{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-size:.82rem; font-weight:700; color:#fff; flex:none;
  background:linear-gradient(120deg,var(--leaf) 0%,var(--forest-600) 100%);
}

/* Final CTA */
.final-cta{
  background:
    radial-gradient(800px 400px at 80% 10%, rgba(140,198,79,.28), transparent 60%),
    linear-gradient(140deg,var(--forest) 0%,var(--forest-600) 100%);
  color:#fff; text-align:center;
}
.final-inner h2{ color:#fff; margin-top:20px; }
.final-inner p{ color:rgba(255,255,255,.82); max-width:50ch; margin-inline:auto; }
.assurances{ display:flex; flex-wrap:wrap; gap:26px; justify-content:center; margin-top:34px; }
.assurances li{ font-size:.86rem; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:.5em; }
.assurances li::before{ content:"✓"; color:var(--leaf); font-weight:700; }

/* ---------------- Footer ---------------- */
.site-footer{ background:#04160E; color:rgba(255,255,255,.66); padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px; }
.footer-logo{ height:44px; width:auto; margin-bottom:20px; filter:brightness(0) invert(1) opacity(.95); }
.footer-brand p{ font-size:.9rem; max-width:34ch; }
.contact{ display:grid; gap:8px; font-size:.88rem; margin-top:18px; }
.contact a{ color:rgba(255,255,255,.78); }
.contact a:hover{ color:var(--leaf); }
.footer-col h4{ color:#fff; font-size:.82rem; letter-spacing:.11em; text-transform:uppercase; margin-bottom:18px; }
.footer-col ul{ display:grid; gap:11px; font-size:.9rem; }
.footer-col a{ color:rgba(255,255,255,.66); }
.footer-col a:hover{ color:var(--leaf); }
.footer-note{ font-size:.88rem; margin-bottom:18px; }
.footer-base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem; color:rgba(255,255,255,.5);
}
.footer-links a{ color:rgba(255,255,255,.5); }
.footer-links a:hover{ color:var(--leaf); }

/* ---------------- Chat widget ---------------- */
.chat-fab{
  position:fixed; right:24px; bottom:24px; z-index:95;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px 14px 18px; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--font); font-size:.93rem; font-weight:600; color:#fff;
  background:linear-gradient(120deg,var(--leaf) 0%,var(--leaf-700) 100%);
  box-shadow:0 14px 34px rgba(1,51,34,.3);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.chat-fab:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(1,51,34,.36); }
.chat-fab svg{ width:22px; height:22px; fill:currentColor; }
.chat-fab.hidden{ opacity:0; pointer-events:none; transform:scale(.85); }
.fab-ping{
  position:absolute; top:10px; right:14px; width:10px; height:10px; border-radius:50%;
  background:#FFD84D; box-shadow:0 0 0 0 rgba(255,216,77,.7); animation:ping 2.2s ease-out infinite;
}

.chat-panel{
  position:fixed; right:24px; bottom:24px; z-index:96;
  width:min(400px, calc(100vw - 32px)); height:min(620px, calc(100vh - 48px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow:0 30px 80px rgba(1,51,34,.28);
  transform-origin:bottom right;
  animation:panelIn .26s cubic-bezier(.2,.9,.3,1.2);
}
.chat-panel[hidden]{ display:none; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px) scale(.96);} to{ opacity:1; transform:none;} }

.chat-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:linear-gradient(120deg,var(--forest) 0%,var(--forest-600) 100%); color:#fff;
}
.chat-avatar{
  width:40px; height:40px; border-radius:12px; background:#fff; flex:none;
  display:grid; place-items:center; overflow:hidden; padding:5px;
}
.chat-avatar img{ width:100%; object-fit:contain; }
.chat-id{ display:flex; flex-direction:column; margin-inline-end:auto; }
.chat-id strong{ font-size:.96rem; }
.chat-id em{ font-style:normal; font-size:.76rem; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:.45em; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--leaf); }
.chat-close{
  background:rgba(255,255,255,.14); border:0; color:#fff; cursor:pointer;
  width:32px; height:32px; border-radius:10px; font-size:.85rem;
}
.chat-close:hover{ background:rgba(255,255,255,.26); }

.chat-log{
  flex:1; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:12px;
  background:var(--surface-2); scroll-behavior:smooth;
}
.msg{ max-width:84%; padding:11px 15px; border-radius:16px; font-size:.9rem; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; }
.msg-bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--body); }
.msg-user{
  align-self:flex-end; border-bottom-right-radius:5px; color:#fff;
  background:linear-gradient(120deg,var(--leaf) 0%,var(--leaf-700) 100%);
}
.msg-error{ align-self:flex-start; background:#FFF1F1; border:1px solid #F7D4D4; color:#98342F; border-bottom-left-radius:5px; }
.msg a{ color:inherit; text-decoration:underline; }
.msg-bot a{ color:var(--leaf-700); }
.msg-time{ display:block; font-size:.66rem; opacity:.6; margin-top:5px; }

.typing{ align-self:flex-start; display:flex; gap:5px; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:16px; border-bottom-left-radius:5px; }
.typing span{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.3s infinite; }
.typing span:nth-child(2){ animation-delay:.18s; }
.typing span:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.chat-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px 0; background:#fff; }
.chat-quick:empty{ display:none; }
.quick-btn{
  font-family:var(--font); font-size:.8rem; padding:8px 14px; border-radius:999px; cursor:pointer;
  background:var(--mint-50); border:1px solid var(--mint-100); color:var(--forest-600);
  transition:background .18s ease, transform .18s ease;
}
.quick-btn:hover{ background:var(--mint-100); transform:translateY(-1px); }

.chat-form{
  display:flex; align-items:flex-end; gap:10px; padding:14px 18px;
  background:#fff; border-top:1px solid var(--line);
}
.chat-form textarea{
  flex:1; resize:none; max-height:120px; font-family:var(--font); font-size:.9rem;
  line-height:1.5; padding:11px 14px; border:1px solid var(--line); border-radius:14px;
  color:var(--ink); background:var(--surface-2);
}
.chat-form textarea:focus{ outline:none; border-color:var(--leaf); background:#fff; }
.chat-send{
  flex:none; width:44px; height:44px; border:0; border-radius:14px; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(120deg,var(--leaf) 0%,var(--leaf-700) 100%);
  transition:transform .18s ease, opacity .18s ease;
}
.chat-send svg{ width:19px; height:19px; fill:currentColor; }
.chat-send:hover{ transform:translateY(-2px); }
.chat-send:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.chat-foot{
  margin:0; padding:0 18px 14px; background:#fff;
  font-size:.7rem; color:var(--muted); text-align:center;
}

/* ---------------- Language switch ---------------- */
.lang-switch{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:40px; padding:0 14px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  font-family:var(--font); font-size:.82rem; font-weight:600; color:var(--forest);
  transition:border-color .18s ease, background .18s ease;
}
.lang-switch:hover{ border-color:var(--leaf); background:var(--mint-50); color:var(--forest); }

/* ---------------- RTL ---------------- */
[dir="rtl"] .skip-link{ border-radius:0 0 0 12px; }

[dir="rtl"] .float-top{ left:auto; right:-14px; }
[dir="rtl"] .float-bottom{ right:auto; left:14px; align-items:flex-end; }

[dir="rtl"] .showcase-phone{ right:auto; left:-26px; }

[dir="rtl"] .chat-fab{ right:auto; left:24px; }
[dir="rtl"] .chat-panel{ right:auto; left:24px; transform-origin:bottom left; }
[dir="rtl"] .fab-ping{ right:auto; left:14px; }

[dir="rtl"] .msg-bot,[dir="rtl"] .msg-error,[dir="rtl"] .typing{
  border-bottom-left-radius:16px; border-bottom-right-radius:5px;
}
[dir="rtl"] .msg-user{ border-bottom-right-radius:16px; border-bottom-left-radius:5px; }

[dir="rtl"] .btn:hover .arrow{ transform:translateX(-4px); }
[dir="rtl"] .arrow{ display:inline-block; transform:scaleX(-1); }
[dir="rtl"] .btn:hover .arrow{ transform:scaleX(-1) translateX(-4px); }
[dir="rtl"] .play{ transform:scaleX(-1); display:inline-block; }

[dir="rtl"] .quote blockquote::before{ content:"\201D"; }

[dir="rtl"] .chat-send svg,[dir="rtl"] .chat-fab svg{ transform:scaleX(-1); }

@media (max-width:620px){
  [dir="rtl"] .chat-fab{ left:18px; }
  [dir="rtl"] .chat-panel{ left:0; }
  [dir="rtl"] .float-top{ right:8px; }
  [dir="rtl"] .float-bottom{ left:10px; }
}

/* ---------------- Reveal on scroll ---------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }

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

/* ---------------- Responsive ---------------- */
/* The phone mockup hangs 26px outside the layout column, but the page gutter is
   only 22px. Once the viewport stops being wide enough to absorb that overhang
   (1180 column + 26px each side), sit it flush so the page can't scroll sideways. */
@media (max-width:1231px){
  .showcase-phone{ right:0; }
  [dir="rtl"] .showcase-phone{ right:auto; left:0; }
}

/* The layout column caps at 1180px, so the header has a fixed budget no matter how
   wide the screen is; the secondary CTA goes once the nav and primary CTA fill it. */
@media (max-width:1040px){
  .header-actions .btn-ghost{ display:none; }
  .site-nav{ gap:22px; }
}

/* Below this the logo, language switch, download CTA and menu button stop fitting
   on one line and the menu button gets pushed off-screen. The hero carries the
   same download CTA directly below the header. */
@media (max-width:760px){
  .header-actions .btn-download{ display:none; }
}

@media (max-width:1040px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:900px){
  .site-nav{
    position:absolute; inset:76px 0 auto 0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:8px 22px 18px;
    box-shadow:var(--shadow); display:none;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:13px 0; border-bottom:1px solid var(--line); }
  .site-nav a::after{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-ghost{ display:none; }

  .hero{ padding:126px 0 72px; }
  .hero-grid{ grid-template-columns:1fr; gap:56px; }
  .hero-copy{ text-align:center; }
  .lede{ margin-inline:auto; }
  .hero-tags,.stats{ justify-content:center; }
  .hero-cta{ align-items:center; }
  .hero-cta .btn{ margin-inline:auto; }
  .stats{ gap:32px; }

  .showcase{ grid-template-columns:1fr; gap:64px; }
  .showcase-copy{ text-align:center; }
  /* Centre the list as one block. Putting margin-inline:auto on the items instead
     cancels grid stretch, so a short bullet centres itself and breaks the tick column. */
  .ticks{ max-width:420px; margin-inline:auto; }
  .ticks li{ text-align:start; }
  .showcase .cta-buttons{ justify-content:center; }
  .showcase-phone{ width:30%; right:0; bottom:-40px; }
  /* The desktop -26px overhang exceeds the 22px gutter here and would push the
     RTL page sideways; sit it flush instead. */
  [dir="rtl"] .showcase-phone{ left:0; }

  .quotes{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  .section{ padding:70px 0; }
  .cards,.steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .stats-wide{ gap:28px; justify-content:space-between; }
  .stats dt{ font-size:1.55rem; }
  .btn-lg{ padding:14px 22px; font-size:.94rem; }
  .cta-buttons .btn{ flex:1 1 100%; max-width:330px; }
  .float-top{ left:8px; }
  .float-bottom{ right:10px; }

  .fab-label{ display:none; }
  .chat-fab{ padding:16px; right:18px; bottom:18px; }
  .chat-panel{ right:0; bottom:0; width:100vw; height:100dvh; border-radius:0; border:0; }
}

/* ============================================================
   Legal pages (privacy.html, terms.html)
   Standalone class names — no overlap with the landing page.
   ============================================================ */
.legal-hero{
  background:linear-gradient(140deg,var(--forest) 0%,var(--forest-600) 100%);
  color:#fff; padding:112px 0 64px; text-align:center;
}
.legal-hero h1{ color:#fff; margin:0 0 14px; }
.legal-hero p{ color:rgba(255,255,255,.76); margin:0 auto; max-width:60ch; font-size:1rem; }
.legal-updated{
  display:inline-block; margin-top:22px; padding:7px 16px; border-radius:999px;
  background:rgba(140,198,79,.16); color:var(--leaf);
  font-size:.82rem; font-weight:500; letter-spacing:.01em;
}

.legal-body{ padding:72px 0 96px; }
.legal-wrap{ max-width:820px; }

.legal-toc{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 30px; margin-bottom:56px;
}
.legal-toc h2{ font-size:.82rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:0 0 14px; font-weight:600; }
.legal-toc ol{ margin:0; padding-inline-start:20px; display:grid; gap:7px;
  font-size:.93rem; color:var(--body); }
.legal-toc a{ color:var(--forest-600); text-decoration:none; }
.legal-toc a:hover{ color:var(--leaf-700); text-decoration:underline; }

.legal-body h2{ font-size:1.42rem; margin:52px 0 16px; color:var(--ink); scroll-margin-top:96px; }
.legal-body h2:first-of-type{ margin-top:0; }
.legal-body h3{ font-size:1.04rem; margin:30px 0 10px; color:var(--forest-600); }
.legal-body p{ color:var(--body); line-height:1.75; margin:0 0 16px; }
.legal-body ul{ margin:0 0 18px; padding-inline-start:22px; color:var(--body); line-height:1.75; }
.legal-body li{ margin-bottom:8px; }
.legal-body a{ color:var(--leaf-700); }
.legal-body strong{ color:var(--ink); font-weight:600; }

.legal-note{
  border-inline-start:3px solid var(--leaf); background:var(--mint-50);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px; margin:28px 0;
}
.legal-note p:last-child{ margin-bottom:0; }

.legal-table-scroll{ overflow-x:auto; margin:0 0 22px; }
.legal-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px; }
.legal-table th,.legal-table td{
  text-align:start; padding:13px 16px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--body); line-height:1.6;
}
.legal-table th{
  background:var(--surface-2); color:var(--ink); font-weight:600;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.05em;
}
.legal-table tr:last-child td{ border-bottom:0; }

.legal-contact{
  margin-top:56px; padding:30px 32px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm);
}
.legal-contact h2{ margin-top:0; }
.legal-contact ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }

@media (max-width:620px){
  .legal-hero{ padding:92px 0 48px; }
  .legal-body{ padding:52px 0 72px; }
  .legal-toc{ padding:22px 22px; }
  .legal-contact{ padding:24px 22px; }
}