/* ─────────────────────────────────────────────────────────────────────────
   Gutrix AI — Aurora Pro
   Palette taken from the shipped app (lib/core/theme/app_colors.dart) so the
   site and the product are visibly the same product, not cousins.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand — identical values to the app */
  --violet:        #5B4BE0;
  --violet-bright: #6D5DF6;
  --magenta:       #C44DEC;
  --coral:         #FF6B5C;
  --peach:         #FFC56B;
  --mint:          #34D399;

  /* Light surfaces */
  --bg:        #F7F5FF;
  --bg-2:      #EEEAFB;
  --surface:   #FFFFFF;
  --surface-2: #F3F0FE;
  --line:      rgba(91, 75, 224, 0.10);
  --text:      #1F1B2E;
  --text-2:    #6E6980;
  --text-3:    #9A94AC;
  --shadow:    0 18px 50px -18px rgba(91, 75, 224, 0.30);
  --shadow-sm: 0 8px 24px -10px rgba(91, 75, 224, 0.22);

  --hero-grad:  linear-gradient(135deg, var(--violet) 0%, var(--magenta) 55%, var(--coral) 100%);
  --brand-grad: linear-gradient(120deg, var(--violet), var(--violet-bright), var(--magenta), var(--coral));

  --r-sm: 14px; --r-md: 20px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;
  --nav-h: 68px;
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"] {
  --bg:        #0E0A1C;
  --bg-2:      #150F2B;
  --surface:   #1A1330;
  --surface-2: #221845;
  --line:      rgba(255, 255, 255, 0.09);
  --text:      #F3F0FF;
  --text-2:    #B9B2D4;
  --text-3:    #8B84A8;
  --shadow:    0 22px 60px -20px rgba(0, 0, 0, 0.75);
  --shadow-sm: 0 10px 28px -12px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .35s var(--ease), color .35s var(--ease);
}

/* Arabic / Urdu switch the whole page to Cairo, which has the glyphs. */
html[lang="ar"] body, html[lang="ur"] body { font-family: 'Cairo', sans-serif; }
html[dir="rtl"] .flip { transform: scaleX(-1); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.24rem; font-weight: 700; }
p  { margin: 0 0 1em; color: var(--text-2); }
a  { color: inherit; text-decoration: none; }
/* `height: auto` is not optional next to `max-width: 100%`. Without it a
   constrained image keeps the pixel height from its width/height attributes
   while the width shrinks, and every picture on the page stretches. */
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.grad-text {
  background: var(--hero-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 90; height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .35s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 18px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; white-space: nowrap; min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-sm); }

.nav-links { display: flex; gap: 4px; margin-inline-start: auto; }
.nav-links a {
  padding: 9px 14px; border-radius: var(--r-pill); font-size: .93rem; font-weight: 600;
  color: var(--text-2); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }

.nav-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: 6px; }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  transition: transform .18s var(--ease), box-shadow .2s, background .2s;
}
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.icon-btn svg { width: 19px; height: 19px; }

.lang-wrap { position: relative; }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: 48px; min-width: 176px; padding: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); display: none; max-height: 320px; overflow-y: auto;
}
.lang-menu.open { display: block; }
.lang-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: none; border: 0; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: .92rem; color: var(--text); text-align: start;
}
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu button[aria-current="true"] { color: var(--violet); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .96rem; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), opacity .2s;
}
.btn-primary { background: var(--hero-grad); color: #fff; box-shadow: 0 12px 30px -10px rgba(196,77,236,.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(196,77,236,.65); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }

/* ── Drawer ──────────────────────────────────────────────────────────── */
.burger { display: none; }
.scrim {
  position: fixed; inset: 0; z-index: 98; background: rgba(10,6,24,.55);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; z-index: 99; top: 0; bottom: 0; inset-inline-start: 0;
  width: min(86vw, 340px); padding: 22px;
  background: var(--surface); border-inline-end: 1px solid var(--line);
  box-shadow: 30px 0 70px -30px rgba(0,0,0,.4);
  transform: translateX(-102%);
  transition: transform .38s var(--ease);
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
}
html[dir="rtl"] .drawer { transform: translateX(102%); }
.drawer.open { transform: translateX(0) !important; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer .sect-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin: 18px 12px 6px;
}
.drawer a.d-link {
  display: flex; align-items: center; gap: 13px; padding: 13px 14px;
  border-radius: var(--r-sm); font-weight: 600; color: var(--text);
  transition: background .2s, transform .2s var(--ease);
}
.drawer a.d-link:hover { background: var(--surface-2); transform: translateX(3px); }
html[dir="rtl"] .drawer a.d-link:hover { transform: translateX(-3px); }
.drawer a.d-link .em { font-size: 1.22rem; width: 26px; text-align: center; }
.drawer .guti-foot { margin-top: auto; padding-top: 20px; text-align: center; }
.drawer .guti-foot img { width: 116px; margin: 0 auto 10px; }
.drawer .guti-foot small { color: var(--text-3); font-size: .8rem; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: calc(var(--nav-h) + 64px) 0 84px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 78% 8%,  rgba(196,77,236,.20), transparent 62%),
    radial-gradient(52% 44% at 12% 24%, rgba(91,75,224,.22),  transparent 60%),
    radial-gradient(46% 40% at 62% 88%, rgba(255,107,92,.14), transparent 62%);
}
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 52px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  padding: 7px 15px 7px 8px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: .84rem; font-weight: 700; color: var(--text-2);
}
.eyebrow img { width: 25px; height: 25px; }
.hero p.lede { font-size: 1.16rem; max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; }

.trust { display: flex; flex-wrap: wrap; gap: 22px; color: var(--text-3); font-size: .87rem; font-weight: 600; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 16px; height: 16px; color: var(--mint); }

/* ── Phone frame ─────────────────────────────────────────────────────── */
.phone {
  position: relative; width: 100%; max-width: 320px; margin-inline: auto;
  box-sizing: content-box; aspect-ratio: 1206 / 2622;
  border-radius: 42px; padding: 9px;
  background: linear-gradient(160deg, #2b2440, #100c20);
  box-shadow: 0 40px 90px -30px rgba(41,20,80,.55), 0 0 0 1px rgba(255,255,255,.07) inset;
}
.phone::after {
  content: ''; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 20px; border-radius: var(--r-pill); background: #0a0715; z-index: 2;
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; }

.phone-float { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }

.hero-visual { position: relative; }
.hero-guti {
  position: absolute; width: 128px; z-index: 3; filter: drop-shadow(0 16px 26px rgba(0,0,0,.24));
  animation: float 6s ease-in-out infinite;
}
.hero-guti.g1 { inset-block-start: -14px; inset-inline-start: -22px; animation-delay: -2s; }
.hero-guti.g2 { inset-block-end: 22px; inset-inline-end: -26px; width: 108px; animation-delay: -4s; }

/* ── Sections ────────────────────────────────────────────────────────── */
section { padding: 86px 0; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.sec-head .kicker {
  display: inline-block; margin-bottom: 13px; padding: 6px 15px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--violet);
  font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
[data-theme="dark"] .sec-head .kicker { color: var(--magenta); }
.sec-head p { font-size: 1.06rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 22px; }
.card {
  padding: 30px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card .ico {
  width: 62px; height: 62px; margin-bottom: 17px; border-radius: 18px;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--surface-2);
}
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; font-size: .96rem; }

/* alternating feature rows */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 96px; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row.rev .f-copy { order: 2; }
.f-copy .kicker {
  display: inline-block; margin-bottom: 12px; padding: 5px 13px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--violet); font-size: .76rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
[data-theme="dark"] .f-copy .kicker { color: var(--magenta); }
.f-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.f-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-2); font-size: .97rem; }
.f-list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--mint); }
.f-visual { position: relative; }
.f-guti { position: absolute; width: 96px; inset-block-end: -18px; inset-inline-start: -14px; z-index: 3;
          filter: drop-shadow(0 14px 22px rgba(0,0,0,.22)); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; counter-reset: s; }
.step { position: relative; padding: 30px 26px; border-radius: var(--r-lg); background: var(--surface);
        border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: -17px; inset-inline-start: 26px;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hero-grad); color: #fff; font-weight: 800; font-size: .96rem;
  box-shadow: 0 8px 20px -6px rgba(196,77,236,.55);
}
.step img { width: 76px; margin: 6px 0 14px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; }
.gallery .phone { max-width: 100%; }
.shot-label { margin-top: 14px; text-align: center; font-weight: 700; font-size: .95rem; }
.shot-label small { display: block; color: var(--text-3); font-weight: 500; font-size: .84rem; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 24px; align-items: start; }
.plan { padding: 32px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
        box-shadow: var(--shadow-sm); position: relative; }
.plan.feat { border-color: transparent; box-shadow: 0 0 0 2px var(--violet), var(--shadow); }
.plan .tag {
  position: absolute; top: -13px; inset-inline-start: 32px; padding: 5px 14px; border-radius: var(--r-pill);
  background: var(--hero-grad); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .05em;
}
.price { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 4px; }
.price b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; }
.price span { color: var(--text-3); font-weight: 600; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--text-2); }
.plan li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--mint); }

/* faq */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }
details.q {
  padding: 20px 24px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
details.q summary {
  cursor: pointer; font-weight: 700; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: 14px;
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: '+'; font-size: 1.5rem; color: var(--violet); font-weight: 400; line-height: 1; }
details.q[open] summary::after { content: '−'; }
details.q p { margin: 12px 0 0; font-size: .96rem; }

/* download band */
.download { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 62px 40px; text-align: center;
            background: var(--hero-grad); color: #fff; box-shadow: 0 30px 70px -26px rgba(196,77,236,.6); }
.download::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(50% 60% at 12% 0%, rgba(255,255,255,.24), transparent 60%);
}
.download > * { position: relative; }
.download h2 { color: #fff; }
.download p { color: rgba(255,255,255,.9); max-width: 56ch; margin-inline: auto; }
.download .btn-ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3);
                       backdrop-filter: blur(6px); }
.dl-guti { width: 132px; margin: 0 auto 20px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.3)); }
.store-row { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 26px; }

/* guti strip */
.guti-strip { display: flex; gap: 26px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.guti-track { display: flex; gap: 26px; animation: marquee 44s linear infinite; }
.guti-track img { width: 96px; flex: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.16)); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .guti-track { animation: none; } .phone-float, .hero-guti { animation: none; }
  html { scroll-behavior: auto; }
}

/* footer */
footer { padding: 60px 0 40px; border-top: 1px solid var(--line); background: var(--bg-2); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
.foot-grid h4 { margin: 0 0 14px; font-size: .8rem; font-weight: 800; letter-spacing: .09em;
                text-transform: uppercase; color: var(--text-3); }
.foot-grid a { display: block; padding: 5px 0; color: var(--text-2); font-size: .93rem; }
.foot-grid a:hover { color: var(--violet); }
.foot-bot { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
            padding-top: 26px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .87rem; }

/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .burger { display: grid; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .hero p.lede { margin-inline: auto; }
  .hero-cta, .trust { justify-content: center; }
  .hero-guti.g1 { inset-inline-start: 2%; } .hero-guti.g2 { inset-inline-end: 2%; }
  .feature-row { grid-template-columns: 1fr; gap: 34px; margin-bottom: 68px; }
  .feature-row.rev .f-copy { order: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
/* At 375px the nav ran out of room: the wordmark wrapped onto a second line
   and the Download pill was cut off at the edge. The icon IS the logo now, so
   the wordmark is the thing that can go. */
@media (max-width: 700px) {
  /* A fixed element sizes against the initial containing block, which still
     counts a classic scrollbar gutter. Narrow desktop windows therefore hand
     the nav ~25px it cannot actually paint into. Buy that back here so the
     row never clips, on a phone or a squeezed browser. */
  .nav .wrap { gap: 8px; width: min(100% - 24px, var(--maxw)); }
  .brand { font-size: .98rem; }
  .brand img { width: 34px; height: 34px; }
  .nav-tools { gap: 6px; margin-inline-start: auto; }
  .icon-btn { width: 38px; height: 38px; }
  /* Download lives in three other places on a phone — the drawer, the hero
     CTA and the whole download band. Keeping a fourth copy in the nav was the
     one thing pushing the row past the edge. */
  .nav-tools .btn-primary { display: none; }
  /* Kickers were rendering at 12.2px — under the 13px floor for small caps. */
  .kicker { font-size: .82rem; }
  .plan .tag { font-size: .8rem; }
  /* 26px-tall summaries and 35px footer links are below the 44px touch floor. */
  .faq .q summary { padding-block: 16px; }
  footer .foot-grid a { padding-block: 7px; }
  .trust { gap: 10px 16px; font-size: .9rem; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .download { padding: 46px 22px; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-guti { display: none; }
}

/* ── 3D art tiles ──────────────────────────────────────────────────────
   These are the app's own rendered illustrations, not icons. They ship on a
   transparent ground, so the SAME file reads correctly on both themes — what
   changes is the plate behind it: a soft violet wash in light, a lifted glow in
   dark so the art does not float on a flat black hole. */
.card .ico {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 70% at 30% 22%, rgba(196,77,236,.16), transparent 70%),
    var(--surface-2);
}
.card .ico img {
  width: 100%; height: 100%; object-fit: contain; padding: 5px;
  filter: drop-shadow(0 6px 12px rgba(91,75,224,.22));
}
[data-theme="dark"] .card .ico {
  background:
    radial-gradient(70% 70% at 30% 22%, rgba(196,77,236,.30), transparent 72%),
    rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="dark"] .card .ico img { filter: drop-shadow(0 6px 16px rgba(0,0,0,.55)); }

/* drawer rows use the same art, small */
.drawer a.d-link img.em {
  width: 26px; height: 26px; object-fit: contain; flex: none;
  filter: drop-shadow(0 3px 6px rgba(91,75,224,.22));
}
[data-theme="dark"] .drawer a.d-link img.em { filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }


/* ── Authored marks ─────────────────────────────────────────────────────
   The stroke icons that used to sit here (ticks, sun, moon, globe, burger)
   were the one part of the page that did not look like Gutrix. These are
   drawn from the same gradient ramp as everything else and ship transparent,
   so one file serves both themes. */
.tick { width: 20px; height: 20px; flex: none; }
.f-list .tick, .plan li .tick { margin-top: 3px; }
.icon-btn .mark { width: 20px; height: 20px; }
.burger .mark { width: 22px; height: 22px; }

/* ── Illustration plates ────────────────────────────────────────────────
   The halo lives here rather than baked into every asset: one file, both
   themes, and the wash recolours with the palette. */
.il { position: relative; display: grid; place-items: center; }
.il::before {
  content: ''; position: absolute; inset: -14%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(91,75,224,.26), transparent 70%);
  filter: blur(6px); z-index: 0;
}
[data-theme="dark"] .il::before {
  background: radial-gradient(50% 50% at 50% 50%, rgba(196,77,236,.30), transparent 70%);
}
.il img { position: relative; z-index: 1; width: 100%; height: auto; }
.il-sm { max-width: 300px; } .il-md { max-width: 380px; } .il-lg { max-width: 460px; }

/* ── Symptom strip ──────────────────────────────────────────────────────
   Deliberately unlabelled: the site ships in 20 languages and these read as
   pictures in all of them. */
.sym-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sym-track { display: flex; gap: 30px; width: max-content; animation: symroll 46s linear infinite; }
.sym-track img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(91,75,224,.20)); }
@keyframes symroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sym-track { animation: none; } }

/* ── Split rows that carry an illustration instead of a phone ───────────── */
.il-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.il-row.rev .il { order: -1; }
@media (max-width: 980px) {
  .il-row { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .il-row.rev .il { order: 0; }
  .il-row .f-list { display: inline-block; text-align: start; }
}

/* ── Language chips ─────────────────────────────────────────────────────
   Twenty is a claim worth showing rather than asserting: each chip switches
   the page into that language on the spot. */
.lang-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lang-flags .flag-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-pill); font: inherit; font-size: .85rem;
  font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.lang-flags .flag-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--magenta) 45%, transparent); transform: translateY(-2px); }
.lang-flags .flag-chip:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
@media (max-width: 980px) { .lang-flags { justify-content: center; } }

/* The disclaimer belongs where people land, not only inside the app. */
.foot-note {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: .84rem; line-height: 1.6; color: var(--text-3); max-width: 78ch;
}