/*
 * 9.1-G — the home page comes alive.
 *
 * WHAT THE OWNER ASKED FOR (2026-09-21). "সব সামলাবে AI" said with more
 * spark; a phone that is clearer, floats in 3D and plays a real-looking
 * exchange — a message arrives, the AI's reply types itself and is sent;
 * a background that is no longer one flat colour, with light that moves
 * "like the next generation of technology and intelligence"; wide screens
 * whose empty sides fill with more of the product; and the gaps in the
 * other languages closed.
 *
 * HOW. The same route 9.1-F chose and the owner accepted: CSS and inline
 * SVG, one small script (home-live.js), no library, nothing downloaded from
 * anywhere else. Everything that moves animates `transform` or `opacity`
 * only, which the browser hands to the graphics card instead of redrawing
 * the page.
 *
 * THREE LEVELS OF MOTION. body[data-motion] is written by the server from
 * the owner's "Website" dial; home-live.js copies the level it will actually
 * use into body[data-fx] — which is "off" for anyone whose device asked for
 * less motion, whatever the dial says (RULES 26):
 *   full  aurora, the net of light, the grid floor, shimmer, floating chips,
 *         the tilting phone, sections rising into view
 *   calm  the phone floats and its chat plays; the heavy layers stay still
 *   off   a still page — every word and every picture is still there
 *
 * RULES KEPT. 22 — fluid everywhere; 23 — the page's own palette, extended
 * with two accents (cyan, teal) for the bands; 24 — logical properties so
 * Arabic and Urdu mirror; 26 — focus rings, reduced motion, labelled phone.
 */

/* ============================================================ tokens */

:root {
  --wrapMax: 1080px;
  --hx-cyan: #22d3ee;
  --hx-violet: #a78bfa;
  --hx-pink: #f472b6;
  --hx-teal: #2dd4bf;
  --hx-ease: cubic-bezier(.22, 1, .36, 1);
}

/* =================================================== wide screens fill */

/*
 * The owner's point: zoom out on a big screen and the page used to sit in a
 * 1040px column with half the screen empty (measured: 46% at 1920px, 59% at
 * 2560px). The column now grows with the screen, and the grids below fill
 * the new room with more columns — so, zooming out, the next services rise
 * up into view instead of leaving bare sides.
 */
@media (min-width: 1280px) { :root { --wrapMax: 1180px; } }
@media (min-width: 1440px) { :root { --wrapMax: 1280px; } }
@media (min-width: 1760px) { :root { --wrapMax: 1600px; } }
@media (min-width: 2200px) { :root { --wrapMax: 2040px; } }

/* two flagship service rows sit side by side once there is room for both */
@media (min-width: 1760px) {
  .band > .wrap:has(> .svc + .svc) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
  .band > .wrap:has(> .svc + .svc) > :not(.svc) { grid-column: 1 / -1; }
  .band > .wrap:has(> .svc + .svc) > .svc { grid-template-columns: 1fr; gap: 18px; align-content: start; }
  .band > .wrap:has(> .svc + .svc) > .svc .svcArt { order: 0; }
}

/* ============================================================ the sky */

.hero.hx { position: relative; overflow: hidden; isolation: isolate; }
.hero.hx > .wrap { position: relative; z-index: 2; }

.hxSky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* the net of light: drawn by home-live.js, only at "full" */
.hxNet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
body[data-fx="full"] .hxNet.on { opacity: 1; }

/*
 * Aurora: four soft pools of colour. Radial gradients rather than a blur
 * filter — a blurred full-screen layer is the single most expensive thing a
 * page can ask for; a gradient costs nothing.
 */
.hxBlob {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  opacity: .55;
  will-change: transform;
}
/*
 * 9.1-G, owner's second look: "still nearly one colour". The pools are now
 * clearly different hues, strong enough to name at a glance — electric blue
 * top-left, magenta top-right, teal below, and one small warm gold near the
 * middle so the page is not all cool tones.
 */
.hxBlob.b1 { inset-inline-start: -18vmax; top: -24vmax; background: radial-gradient(closest-side, rgba(56, 189, 248, .62), transparent); }
.hxBlob.b2 { inset-inline-end: -20vmax; top: -18vmax; background: radial-gradient(closest-side, rgba(232, 121, 249, .55), transparent); }
.hxBlob.b3 { inset-inline-start: 22%; bottom: -34vmax; background: radial-gradient(closest-side, rgba(45, 212, 191, .45), transparent); }
.hxBlob.b4 { inset-inline-end: 30%; top: 26%; width: 30vmax; height: 30vmax; background: radial-gradient(closest-side, rgba(251, 191, 36, .22), transparent); }

body[data-fx="full"] .hxBlob.b1 { animation: hxDrift1 22s var(--hx-ease) infinite alternate; }
body[data-fx="full"] .hxBlob.b2 { animation: hxDrift2 26s var(--hx-ease) infinite alternate; }
body[data-fx="full"] .hxBlob.b3 { animation: hxDrift3 30s var(--hx-ease) infinite alternate; }
body[data-fx="full"] .hxBlob.b4 { animation: hxDrift2 19s var(--hx-ease) infinite alternate-reverse; }

@keyframes hxDrift1 { to { transform: translate(8vmax, 6vmax) scale(1.12); } }
@keyframes hxDrift2 { to { transform: translate(-7vmax, 5vmax) scale(.9); } }
@keyframes hxDrift3 { to { transform: translate(-5vmax, -6vmax) scale(1.15); } }

/*
 * A floor of light lines under the phone, running toward the horizon. The
 * lines are drawn once on an inner layer that slides one tile and repeats
 * (`translate`, on the graphics card) — not by moving the background, which
 * repaints the whole floor every frame.
 */
.hxFloor {
  position: absolute;
  inset-inline: -20%;
  bottom: -2px;
  height: 46%;
  overflow: hidden;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 78%);
          mask-image: linear-gradient(to top, #000 8%, transparent 78%);
  opacity: .5;
}
.hxFloor::before {
  content: "";
  position: absolute;
  inset: -64px 0 0;
  background-image:
    linear-gradient(rgba(167, 139, 250, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .20) 1px, transparent 1px);
  background-size: 64px 64px;
}
body[data-fx="full"] .hxFloor::before { animation: hxRun 3.2s linear infinite; will-change: translate; }
@keyframes hxRun { to { translate: 0 64px; } }

/* ======================================================= the hero copy */

.hero h1 { font-size: clamp(29px, 1.35vw + 20px, 52px); text-wrap: balance; }
.hero .heroGrid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
@media (min-width: 1440px) { .hero .heroGrid { gap: 56px; } .hero p { max-width: 620px; } }
@media (max-width: 860px) { .hero .heroGrid { grid-template-columns: 1fr; } }

/*
 * 9.1-F left `.hero p` (16px, 26px below) winning over `.door p` (13px, no
 * gap) because the inline sheet loads later with the same specificity — the
 * doors' text grew and each card got a strip of empty space under it. That
 * strip is the "gap" the owner saw. Fixed where the door is styled
 * (home3d.css); nothing here needs to fight it.
 */

/* ---------------------------------------------- "AI takes care of it all" */

.aiLine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: -2px 0 16px;
  font-size: clamp(16px, .45vw + 13px, 21px);
  line-height: 1.5;
  min-height: 1.5em;
}

.aiSpark {
  display: inline-block;
  color: #fde68a;
  text-shadow: 0 0 14px rgba(253, 230, 138, .8);
}
/* the spark twinkles (scale + opacity only — the graphics card's work, not the page's) */
body[data-fx="full"] .aiSpark,
body[data-fx="calm"] .aiSpark { animation: hxTwinkle 2.6s ease-in-out infinite; }
@keyframes hxTwinkle { 50% { transform: scale(1.35) rotate(18deg); opacity: .55; } }

/* the words keep their colours still; the life is in the turning phrase beside them */
.aiKick {
  font-weight: 800;
  background: linear-gradient(100deg, #67e8f9, #a78bfa 45%, #f0abfc);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.aiSep { color: rgba(199, 210, 254, .55); }

.aiRot {
  position: relative;
  color: #e0e7ff;
  font-weight: 600;
  display: inline-grid;
  min-width: 0;
  max-width: 100%;
}
.aiRot > .aiWord, .aiRot > .aiMeasure { grid-area: 1 / 1; min-width: 0; }
/* All phrases share one intrinsic cell: rotating copy cannot move the CTAs.
   Hidden measures wrap in every language/zoom without a clipping height. */
.aiRot > .aiMeasure { visibility: hidden; pointer-events: none; }
.aiRot .aiWord { display: inline-block; transition: opacity .45s ease, transform .45s var(--hx-ease), filter .45s ease; }
.aiRot .aiWord.out { opacity: 0; transform: translateY(-.55em); filter: blur(3px); }
.aiRot .aiWord.in { opacity: 0; transform: translateY(.55em); filter: blur(3px); }

.srOnly {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================ the stage */

.heroStage {
  /*
   * The phone's width; the chips measure their room from it. It is also held
   * to the window's HEIGHT: in the owner's own Chrome (744px tall) a phone
   * sized by width alone ran below the fold, and the part that matters —
   * the reply being typed and sent, at the bottom — happened out of sight.
   * 190px leaves room for the top bar and the hero's padding; 2.07 is the
   * phone's height-to-width ratio.
   */
  --pw: clamp(236px, 13vw + 100px, 318px);
  --pw: clamp(236px, min(13vw + 100px, (100svh - 190px) / 2.07), 318px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(470px, 38vw, 640px);
  perspective: 1400px;
  container-type: inline-size;
}

@media (max-width: 860px) { .heroStage { min-height: 0; padding: 28px 0 6px; } }

/* --------------------------------------------------------- the phone */

.p3 {
  position: relative;
  width: var(--pw);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -14deg)) rotateZ(1.5deg);
  transition: transform .9s var(--hx-ease);
}
body[data-fx="full"] .p3,
body[data-fx="calm"] .p3 { animation: hxFloat 7s ease-in-out infinite; }
@keyframes hxFloat {
  0%, 100% { translate: 0 -8px; }
  50% { translate: 0 10px; }
}

.p3Body {
  position: relative;
  aspect-ratio: 9 / 18.6;
  border-radius: calc(var(--pw) * .16);
  padding: calc(var(--pw) * .035);
  background:
    linear-gradient(145deg, #3b4163 0%, #1b1f35 22%, #0c0f1d 55%, #2a2f4d 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .18),
    inset 0 2px 1px rgba(255, 255, 255, .35),
    inset 0 -2px 2px rgba(0, 0, 0, .6),
    0 1px 0 rgba(255, 255, 255, .08),
    0 50px 90px -30px rgba(10, 8, 40, .95),
    0 30px 60px -20px rgba(124, 58, 237, .45);
}

/*
 * The thin glowing edge that circles the frame.
 *
 * It sits BEHIND the body and shows only where it is 1.5px wider, and it
 * turns by `rotate` — which the graphics card does on its own. The first
 * version spun an angle inside a conic gradient instead; measured in
 * Chrome, that kind of animation re-styles and repaints on the main thread
 * every frame, and together with three others like it the page kept 11% of
 * the main thread busy while simply sitting there.
 */
.p3Rim {
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--pw) * .16 + 1.5px);
  overflow: hidden;
  pointer-events: none;
}
.p3Rim::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(transparent 0 62%, var(--hx-cyan) 72%, var(--hx-violet) 82%, transparent 92%);
  opacity: .95;
}
body[data-fx="full"] .p3Rim::before,
body[data-fx="calm"] .p3Rim::before { animation: hxTurn 6s linear infinite; will-change: rotate; }
@keyframes hxTurn { to { rotate: 360deg; } }

/* side keys */
.p3Key {
  position: absolute;
  inset-inline-start: -3px;
  width: 4px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #4b5178, #22263f);
}
.p3Key.k1 { top: 17%; height: 5%; }
.p3Key.k2 { top: 25%; height: 9%; }
.p3Key.k3 { top: 25%; height: 13%; inset-inline-start: auto; inset-inline-end: -3px; border-radius: 0 3px 3px 0; }

.p3Screen {
  position: relative;
  height: 100%;
  border-radius: calc(var(--pw) * .128);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f6f7ff 0%, #eef0ff 100%);
  color: #0f172a;
  font-size: calc(var(--pw) * .044);
  line-height: 1.45;
}

/*
 * The 3 a.m. scene: only the wallpaper behind the chat darkens. A first
 * draft laid a veil over the whole screen and the messages looked switched
 * off — the point of the scene is that they are very much on.
 */
.p3Screen.night .p3Chat { background-color: #d9dcf5; }
.p3Chat { transition: background-color 1.2s ease; }

.p3Bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--pw) * .038) calc(var(--pw) * .07) calc(var(--pw) * .012);
  font-size: .82em;
  font-weight: 700;
  direction: ltr;
}
.p3Island {
  width: 30%;
  height: calc(var(--pw) * .075);
  border-radius: 999px;
  background: #05060d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.p3Sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.p3Sig i { width: 3px; background: #0f172a; border-radius: 1px; }
.p3Sig i:nth-child(1) { height: 4px; }
.p3Sig i:nth-child(2) { height: 6px; }
.p3Sig i:nth-child(3) { height: 8px; }
.p3Sig b { width: 17px; height: 8px; margin-inline-start: 4px; border: 1.5px solid #0f172a; border-radius: 3px; position: relative; }
.p3Sig b::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: #0f172a; border-radius: 1px; }

.p3Head {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .55em .9em .65em;
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 2;
}
.p3Ava {
  width: 2.35em;
  height: 2.35em;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #db2777);
  box-shadow: 0 4px 12px -4px rgba(79, 70, 229, .7);
}
.p3Name { font-weight: 800; font-size: 1.02em; line-height: 1.25; }
.p3St { font-size: .76em; color: #4f46e5; position: relative; height: 1.4em; }
.p3St > span { position: absolute; inset-inline-start: 0; top: 0; white-space: nowrap; transition: opacity .3s ease; }
.p3St .p3Typ { opacity: 0; color: #7c3aed; font-weight: 700; }
.p3Screen.typing .p3St .p3On { opacity: 0; }
.p3Screen.typing .p3St .p3Typ { opacity: 1; }
.p3Dot {
  position: relative;
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-inline-end: .35em;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: .05em;
}
/* "online" pulses outward: a copy of the dot that grows and fades */
.p3Dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  opacity: 0;
}
body[data-fx="full"] .p3Dot::after,
body[data-fx="calm"] .p3Dot::after { animation: hxPing 2.2s ease-out infinite; }
@keyframes hxPing { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* the notification that drops in when a customer writes */
.p3Toast {
  position: absolute;
  inset-inline: 6%;
  top: calc(var(--pw) * .13);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .55em .8em;
  border-radius: 1em;
  background: rgba(15, 23, 42, .88);
  color: #fff;
  font-size: .82em;
  font-weight: 600;
  box-shadow: 0 12px 26px -12px rgba(15, 23, 42, .8);
  transform: translateY(-160%);
  opacity: 0;
  transition: transform .55s var(--hx-ease), opacity .4s ease;
}
.p3Toast.on { transform: none; opacity: 1; }

/* ------------------------------------------------------ the conversation */

.p3Chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5em;
  padding: .8em .75em .6em;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(99, 102, 241, .07), transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(236, 72, 153, .06), transparent 40%);
}

.p3Chat.fade { opacity: 0; transition: opacity .6s ease, background-color 1.2s ease; }

.p3Chat .bub {
  max-width: 84%;
  padding: .55em .8em;
  border-radius: 1.05em;
  font-size: 1em;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 6px -3px rgba(15, 23, 42, .25);
  position: relative;
  unicode-bidi: plaintext;
}
.p3Chat .bub.in {
  align-self: flex-start;
  background: #fff;
  border-end-start-radius: .35em;
}
.p3Chat .bub.out {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-end-end-radius: .35em;
  padding-inline-end: 2.4em;
}
.p3Chat .bub.agent {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #0891b2);
  border-end-end-radius: .35em;
}
/* a tiny "AI" mark on the assistant's own replies */
.p3Chat .bub.out::before {
  content: "AI";
  position: absolute;
  inset-inline-end: .55em;
  top: .5em;
  font-size: .62em;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .05em .4em;
  border-radius: .5em;
  background: rgba(255, 255, 255, .22);
}
.p3Chat .tick {
  position: absolute;
  inset-inline-end: .5em;
  bottom: .3em;
  font-size: .7em;
  color: rgba(255, 255, 255, .6);
  letter-spacing: -.25em;
  transition: color .4s ease;
}
.p3Chat .tick.read { color: #67e8f9; }

.p3Chat .p3Time,
.p3Chat .p3Sys {
  align-self: center;
  font-size: .74em;
  font-weight: 700;
  color: #64748b;
  background: rgba(255, 255, 255, .75);
  padding: .2em .8em;
  border-radius: 999px;
}
.p3Chat .p3Sys { color: #0f766e; background: #ccfbf1; }
/*
 * A time written the way its own locale writes it: "10:24 AM" in Urdu is
 * Latin and must read left to right; "٣:١٢ ص" in Arabic reads right to
 * left. `plaintext` lets each chip take the direction of its own first
 * letter instead of the page's — measured: the Urdu page showed "AM 10:24".
 */
.p3Chat .p3Time, #p3Clock { unicode-bidi: plaintext; }

.p3Chat bdi { font-weight: 800; }

/* how new things arrive */
.p3Chat > .pop { animation: hxPop .5s var(--hx-ease) both; }
.p3Chat > .fly { animation: hxFly .6s var(--hx-ease) both; }
@keyframes hxPop { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@keyframes hxFly { from { opacity: 0; transform: translateY(26px) scale(.96); } }

/* "…" while somebody types */
.p3Chat .dots { align-self: flex-end; background: #fff; padding: .6em .8em; border-radius: 1em; display: inline-flex; gap: .25em; }
.p3Chat .dots i { width: .45em; height: .45em; border-radius: 50%; background: #94a3b8; animation: hxDots 1.1s infinite ease-in-out; }
.p3Chat .dots i:nth-child(2) { animation-delay: .15s; }
.p3Chat .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hxDots { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-.3em); opacity: 1; } }

/* the composer, where the reply is seen being written */
.p3Compose {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .55em .7em calc(var(--pw) * .07);
  background: rgba(255, 255, 255, .85);
  border-top: 1px solid rgba(15, 23, 42, .06);
}
.p3Field {
  flex: 1;
  min-width: 0;
  min-height: 2.3em;
  padding: .45em .85em;
  border-radius: 1.2em;
  background: #eef0fb;
  color: #0f172a;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.p3Field .p3Ph { color: #94a3b8; }
.p3Field.busy .p3Ph { display: none; }
.p3Typed { overflow: hidden; text-overflow: clip; direction: inherit; }
.p3Caret {
  display: none;
  width: 2px;
  height: 1.1em;
  margin-inline-start: 1px;
  background: #7c3aed;
  animation: hxBlink 1s steps(1) infinite;
}
.p3Field.busy .p3Caret { display: inline-block; }
@keyframes hxBlink { 50% { opacity: 0; } }

.p3Send {
  flex: none;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .8);
  transition: transform .25s var(--hx-ease), box-shadow .25s ease;
}
.p3Send svg { width: 1.05em; height: 1.05em; }
[dir="rtl"] .p3Send svg { transform: scaleX(-1); }
.p3Send.press { transform: scale(.82); box-shadow: 0 0 0 .5em rgba(124, 58, 237, .18); }

/* light moving across the glass */
.p3Glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .16) 42%, transparent 52%);
  background-size: 250% 100%;
  background-position: var(--gx, 60%) 0;
  mix-blend-mode: screen;
}

.p3Shadow {
  position: absolute;
  inset-inline: 8%;
  bottom: -46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 6, 40, .75), transparent);
  transform: translateZ(-80px);
}

/* ---------------------------------------------- chips circling the phone */

/*
 * The chips live in the two strips beside the phone and never over it —
 * the first draft let them float across the screen and one sat on the
 * shop's name. Each chip is at most as wide as its strip; where a strip is
 * too narrow for a readable chip, the chips step out altogether (the
 * container queries below), which is the owner's "vanish when there is no
 * room".
 */
.orb {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc((100% - var(--pw)) / 2 - 10px);
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #eef2ff;
  background: rgba(15, 23, 42, .45);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.orb i { font-style: normal; flex: none; }
.orb.o1 { top: 12%; inset-inline-start: 0; }
.orb.o3 { top: 44%; inset-inline-start: 4px; }
.orb.o6 { top: 74%; inset-inline-start: 0; }
.orb.o2 { top: 22%; inset-inline-end: 0; }
.orb.o5 { top: 53%; inset-inline-end: 4px; }
.orb.o4 { top: 82%; inset-inline-end: 0; }

body[data-fx="full"] .orb { animation: hxBob 6s ease-in-out infinite; }
body[data-fx="full"] .orb.o2 { animation-delay: -1s; }
body[data-fx="full"] .orb.o3 { animation-delay: -2s; }
body[data-fx="full"] .orb.o4 { animation-delay: -3s; }
body[data-fx="full"] .orb.o5 { animation-delay: -4s; }
body[data-fx="full"] .orb.o6 { animation-delay: -5s; }
@keyframes hxBob { 50% { transform: translateY(-9px); } }

/*
 * How many chips the stage can hold, decided by the stage's own width —
 * not the window's — so it stays right in every column layout:
 *   ≥ 600px of stage  all six
 *   520–599px         four (the middle pair steps out)
 *   narrower          none — a chip squeezed under ~110px is three lines of
 *                     crumbs, and the ribbon under the hero names them all
 * Measured in Chrome: a 1366px window gives a 462px stage (none), 1440px
 * gives 535px (four), 1920px gives 655px (six).
 */
@container (max-width: 599px) { .orb.o3, .orb.o5 { display: none; } }
@container (max-width: 519px) { .orb { display: none; } }

/* ============================================================ shimmer */

/*
 * A single band of light that crosses a surface every few seconds — on the
 * main button, on the "free" marks and on the brighter door. The pseudo
 * element lives inside the thing it lights, so nothing outside can shift.
 */
.hero .btn.pri,
.tagFree,
.door.lead { position: relative; overflow: hidden; isolation: isolate; }

.hero .btn.pri::after,
.tagFree::after,
.door.lead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.door.lead::after { z-index: 0; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .12) 50%, transparent 62%); }

/*
 * Only the top of the page sweeps. There are seventeen "free" marks further
 * down; one sweep on each was seventeen more animations ticking whether or
 * not anyone had scrolled that far (measured: about a fifth of the page's
 * whole animation cost). Down the page the marks keep their colour; the
 * light is where the reader first looks.
 */
body[data-fx="full"] .hero .btn.pri::after,
body[data-fx="full"] .hero .tagFree::after { animation: hxSweep 5.5s ease-in-out infinite; }
body[data-fx="full"] .door.lead::after { animation: hxSweep 7s ease-in-out infinite 1.2s; }

/*
 * Out of sight, out of work: home-live.js marks the hero and each band
 * `idle` while it is off screen, and everything moving inside it holds
 * still until it comes back. A paused animation costs nothing.
 */
.hx.idle, .hx.idle *, .hx.idle *::before, .hx.idle *::after,
.ribbon.idle .rbTrack,
.band.idle::before, .band.idle *, .band.idle *::before, .band.idle *::after { animation-play-state: paused !important; }
@keyframes hxSweep { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/*
 * In Arabic and Urdu the light crosses from the reading start, which is the
 * right — and waiting on the right keeps it inside the box's scroll area, so
 * a right-to-left button never reports hidden overflow.
 */
[dir="rtl"] .hero .btn.pri::after,
[dir="rtl"] .tagFree::after,
[dir="rtl"] .door.lead::after { transform: translateX(120%); }
[dir="rtl"] body[data-fx="full"] .hero .btn.pri::after,
[dir="rtl"] body[data-fx="full"] .hero .tagFree::after,
[dir="rtl"] body[data-fx="full"] .door.lead::after { animation-name: hxSweepRtl; }
@keyframes hxSweepRtl { 0%, 62% { transform: translateX(120%); } 100% { transform: translateX(-120%); } }

/*
 * The brighter door carries a rim of light. It holds still: its glass is
 * see-through, so the turning-behind trick the phone uses would show
 * through the card, and turning the gradient itself costs a repaint every
 * frame. The light that crosses the card (above) gives it its movement.
 */
.door.lead::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 200deg, transparent 0 40%, var(--hx-cyan) 58%, var(--hx-violet) 74%, var(--hx-pink) 86%, transparent 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.door.lead > * { position: relative; z-index: 1; }

/* ============================================ the moving strip of services */

.ribbon {
  position: relative;
  z-index: 3;
  margin-top: -26px;
  padding: 14px 0;
  overflow: hidden;
  background: linear-gradient(90deg, #1e1b4b, #312e81 30%, #4c1d95 60%, #0e7490);
  box-shadow: 0 18px 40px -24px rgba(49, 46, 129, .9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rbTrack {
  display: flex;
  gap: 12px;
  width: max-content;
  padding-inline: 12px;
}
.rbItem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  color: #eef2ff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
}
.rbItem i { font-style: normal; }

body[data-fx="full"] .rbTrack.run,
body[data-fx="calm"] .rbTrack.run { animation: hxMarquee var(--rbDur, 60s) linear infinite; }
body[data-fx="calm"] .rbTrack.run { animation-duration: calc(var(--rbDur, 60s) * 1.6); }
[dir="rtl"] .rbTrack.run { animation-name: hxMarqueeRtl; }
.ribbon:hover .rbTrack,
.ribbon:focus-within .rbTrack { animation-play-state: paused; }
@keyframes hxMarquee { to { transform: translateX(-50%); } }
@keyframes hxMarqueeRtl { to { transform: translateX(50%); } }

/* a still page: the strip becomes a tidy wrapped row, nothing hidden */
body[data-fx="off"] .ribbon { -webkit-mask-image: none; mask-image: none; }
body[data-fx="off"] .rbTrack { flex-wrap: wrap; justify-content: center; width: auto; }
body[data-fx="off"] .rbTrack [aria-hidden="true"] { display: none; }

/* ================================================= sections rise into view */

body[data-fx="full"] .rv,
body[data-fx="calm"] .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--hx-ease), transform .8s var(--hx-ease);
  transition-delay: var(--rvd, 0s);
}
body[data-fx="full"] .rv.in,
body[data-fx="calm"] .rv.in { opacity: 1; transform: none; }

/* =========================================== each band its own colour */

/*
 * The owner: "the background feels like one colour". Each band keeps the
 * page's indigo base but carries its own light — cyan for the free half,
 * rose and amber on the light business band, teal for safety.
 */
.band.deep[data-vizo-section="personal"] {
  background: linear-gradient(165deg, #060b1f, #13215a 52%, #0b3b5c);
}
.band.deep[data-vizo-section="personal"]::before {
  background:
    radial-gradient(34% 40% at 14% 20%, rgba(34, 211, 238, .30), transparent 70%),
    radial-gradient(30% 34% at 86% 16%, rgba(129, 140, 248, .34), transparent 70%),
    radial-gradient(40% 40% at 60% 100%, rgba(192, 132, 252, .22), transparent 70%);
}

.band.soft[data-vizo-section="business"] {
  background:
    radial-gradient(40% 60% at 0% 0%, rgba(244, 114, 182, .14), transparent 70%),
    radial-gradient(40% 60% at 100% 20%, rgba(129, 140, 248, .18), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, rgba(251, 191, 36, .10), transparent 70%),
    linear-gradient(180deg, #fff, var(--sur2));
}
.band.soft[data-vizo-section="business"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(79, 70, 229, .14) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  pointer-events: none;
}

.band.deep[data-vizo-section="safety"] {
  background: linear-gradient(165deg, #031419, #073b40 50%, #0f172a);
}
.band.deep[data-vizo-section="safety"]::before {
  background:
    radial-gradient(36% 40% at 16% 24%, rgba(45, 212, 191, .28), transparent 70%),
    radial-gradient(30% 36% at 84% 70%, rgba(34, 211, 238, .22), transparent 70%);
}

body[data-fx="full"] .band.deep::before { animation: hxBand 24s var(--hx-ease) infinite alternate; }
@keyframes hxBand { to { transform: translate(3%, -2%) scale(1.06); } }

/* the band titles carry a soft light across their letters (still, so it costs nothing) */
.band.deep h2 {
  background: linear-gradient(100deg, #fff 20%, #c7d2fe 50%, #fff 80%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ============================================ phones: the top line fits */

/*
 * Measured on the live page at 390px: the top line (logo, languages, Log in,
 * Start free) ran to 447px — "Start free", the page's main button, was cut
 * off in all six languages tried, and "Log in" broke over two lines. The
 * languages now take their own row under the buttons.
 */
@media (max-width: 560px) {
  .hero .nav { flex-wrap: wrap; row-gap: 8px; }
  .hero .nav #langSwitch { order: 9; flex-basis: 100%; display: flex; justify-content: flex-end; min-height: 32px; }
  .hero .nav .btn.sm { padding: 8px 13px; white-space: nowrap; }
}

/* ===================================== each script at its own line height */

/*
 * One line-height does not suit seven scripts. Bengali and Devanagari hang
 * vowel signs above and below the line; Arabic and Urdu need room for their
 * dots and for Nastaliq's slope. And balancing headings stops a single word
 * being left alone on a line — the ragged gaps the owner noticed.
 */
h1, h2, h3, .dName { text-wrap: balance; }
p, li, .lead { text-wrap: pretty; }

:lang(bn) .hero h1, :lang(hi) .hero h1 { line-height: 1.38; }
:lang(bn) .band h2, :lang(hi) .band h2 { line-height: 1.45; }
:lang(bn) .hero p, :lang(hi) .hero p { line-height: 1.75; }
:lang(ar) .hero h1, :lang(ur) .hero h1 { line-height: 1.6; }
:lang(ur) .hero p, :lang(ur) .door p, :lang(ur) .svc p, :lang(ur) .tile p { line-height: 1.95; }
:lang(ar) .hero p, :lang(ar) .door p { line-height: 1.85; }

/* ===================================================== a still page */

body[data-fx="off"] .p3,
body[data-fx="off"] .orb,
body[data-fx="off"] .hxBlob,
body[data-fx="off"] .hxFloor::before,
body[data-fx="off"] .p3Rim::before,
body[data-fx="off"] .aiSpark,
body[data-fx="off"] .p3Dot::after,
body[data-fx="off"] .band.deep::before { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .p3, .orb, .hxBlob, .hxFloor::before, .rbTrack, .rv, .aiSpark, .p3Dot::after, .p3Caret,
  .p3Rim::before, .door.lead::after, .tagFree::after, .btn.pri::after,
  .band.deep::before { animation: none !important; transition: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* keyboard users see what the mouse sees */
.ribbon a:focus-visible, .rbItem:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }

/* =====================================================================
 * 9.1-G — the owner's second look (2026-09-21): clearer colour, more
 * glisten, a tidier page.
 * ===================================================================== */

/*
 * The hero's own ground: four distinct colour regions over a deep base,
 * instead of one indigo-to-purple slope. Overrides the landing page's plain
 * `.hero` gradient only where this layer is present (`.hero.hx`).
 */
.hero.hx {
  background:
    radial-gradient(55% 65% at 0% 0%, rgba(14, 165, 233, .42), transparent 62%),
    radial-gradient(50% 60% at 100% 4%, rgba(217, 70, 239, .38), transparent 62%),
    radial-gradient(55% 60% at 80% 108%, rgba(20, 184, 166, .36), transparent 62%),
    radial-gradient(45% 50% at 24% 98%, rgba(124, 58, 237, .42), transparent 62%),
    linear-gradient(160deg, #040715 0%, #0a1030 42%, #170a36 100%);
}

/* a wide band of light that crosses the whole hero now and then — transform only */
.hxSky::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 38%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .06) 42%, rgba(186, 230, 253, .12) 50%, rgba(255, 255, 255, .06) 58%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none;
}
body[data-fx="full"] .hxSky::after { animation: hxGlide 11s ease-in-out infinite 2s; }
@keyframes hxGlide { 0%, 55% { transform: translateX(-120%) skewX(-12deg); } 100% { transform: translateX(330%) skewX(-12deg); } }

/* ---------------------------------------------------- the section labels */

/*
 * "01 · Free for everyone" above each section's title, and a short line of
 * colour under it: the page now reads as one ordered story rather than a
 * stack of look-alike blocks.
 */
.eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 auto 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4f46e5;
}
.eyebrow b {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0;
  background: linear-gradient(135deg, #06b6d4, #7c3aed 60%, #db2777);
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, .7);
}
.band.deep .eyebrow { color: #a5f3fc; }
:lang(bn) .eyebrow, :lang(hi) .eyebrow, :lang(ar) .eyebrow, :lang(ur) .eyebrow { letter-spacing: 0; text-transform: none; font-size: 13.5px; }

.band h2::after,
.sec h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6);
}

/* a thin line of light where one section meets the next */
.band::after {
  content: "";
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .55), rgba(167, 139, 250, .65), rgba(244, 114, 182, .55), transparent);
  pointer-events: none;
}

/* ---------------------------------------- each section its own colour */

.band.deep[data-vizo-section="personal"] {
  background: linear-gradient(165deg, #031633 0%, #06306a 40%, #07507a 72%, #0b6e8a 100%);
}
.band.deep[data-vizo-section="personal"]::before {
  background:
    radial-gradient(34% 40% at 12% 18%, rgba(34, 211, 238, .40), transparent 70%),
    radial-gradient(30% 34% at 88% 14%, rgba(129, 140, 248, .42), transparent 70%),
    radial-gradient(40% 40% at 62% 100%, rgba(236, 72, 153, .26), transparent 70%);
}

.band.soft[data-vizo-section="business"] {
  background:
    radial-gradient(42% 60% at 0% 0%, rgba(244, 114, 182, .24), transparent 70%),
    radial-gradient(42% 60% at 100% 18%, rgba(129, 140, 248, .26), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, rgba(251, 191, 36, .20), transparent 70%),
    linear-gradient(180deg, #fff7fb, #f3f1ff);
}

.band.deep[data-vizo-section="safety"] {
  background: linear-gradient(165deg, #01201a 0%, #03473b 45%, #06505a 75%, #0b2a3f 100%);
}
.band.deep[data-vizo-section="safety"]::before {
  background:
    radial-gradient(36% 40% at 14% 22%, rgba(52, 211, 153, .36), transparent 70%),
    radial-gradient(30% 36% at 86% 72%, rgba(34, 211, 238, .30), transparent 70%);
}

/* "how it works": a cool sky tint (the inline background is the old plain one) */
.sec[data-vizo-section="how-it-works"] {
  position: relative;
  background:
    radial-gradient(40% 70% at 8% 0%, rgba(56, 189, 248, .18), transparent 70%),
    radial-gradient(40% 70% at 92% 100%, rgba(167, 139, 250, .20), transparent 70%),
    linear-gradient(180deg, #f2f9ff, #f5f2ff) !important;
}
.sec[data-vizo-section="how-it-works"] .step {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(99, 102, 241, .14);
  border-radius: 18px;
  padding: 20px 20px 20px 66px;
  box-shadow: 0 14px 32px -24px rgba(79, 70, 229, .45);
}
[dir="rtl"] .sec[data-vizo-section="how-it-works"] .step { padding: 20px 66px 20px 20px; }
.sec[data-vizo-section="how-it-works"] .step::before { inset-inline-start: 20px; top: 20px; background: linear-gradient(135deg, #06b6d4, #7c3aed); }

/* pricing: a warm tint across the whole width (the section itself is only as wide as its column) */
.sec[data-vizo-section="pricing"] { position: relative; isolation: isolate; }
.sec[data-vizo-section="pricing"]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 15% 20%, rgba(251, 191, 36, .14), transparent 70%),
    radial-gradient(40% 60% at 85% 80%, rgba(244, 114, 182, .14), transparent 70%),
    linear-gradient(180deg, #fffdf7, #fff7fb);
}
.plans .plan { background: rgba(255, 255, 255, .86); }
.plans .plan.hot {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #22d3ee, #7c3aed 55%, #f472b6) border-box;
}

/* ---------------------------------------- icons in six colours, not one */

.tiles .tile:nth-child(6n+1) .ic { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.tiles .tile:nth-child(6n+2) .ic { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.tiles .tile:nth-child(6n+3) .ic { background: linear-gradient(135deg, #f59e0b, #f97316); }
.tiles .tile:nth-child(6n+4) .ic { background: linear-gradient(135deg, #10b981, #0d9488); }
.tiles .tile:nth-child(6n+5) .ic { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.tiles .tile:nth-child(6n+6) .ic { background: linear-gradient(135deg, #6366f1, #0ea5e9); }

@media (prefers-reduced-motion: reduce) { .hxSky::after { animation: none !important; } }
body[data-fx="off"] .hxSky::after { animation: none !important; }

/* ------------------------------------------- tidy rows: no lonely last card */

/*
 * A grid that simply fits as many columns as it can left the personal band
 * with 4 + 2 cards — two cards alone on the last line with empty space
 * beside them. Each band now picks a column count its number of cards
 * divides into evenly: six cards as 3 + 3 (or one row of six on a very wide
 * screen), eight as 4 + 4, four as one row. Phones keep one or two columns.
 */
@media (min-width: 640px) {
  .tiles:has(> .tile:nth-child(6):last-child),
  .tiles:has(> .tile:nth-child(8):last-child),
  .tiles:has(> .tile:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .tiles:has(> .tile:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles:has(> .tile:nth-child(8):last-child),
  .tiles:has(> .tile:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 2200px) {
  .tiles:has(> .tile:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------- the small phones down the page */

/*
 * The drawn phone beside "Message anyone" was grey bars on a dark slab — the
 * one flat picture left on the page. It now shows a light screen with chat
 * bubbles in the page's colours, like the phone at the top.
 */
.iso .phone {
  background: linear-gradient(180deg, #f6f7ff, #e9ecff);
  border: 5px solid #1b1f35;
  box-shadow:
    0 40px 70px -30px rgba(0, 0, 0, .85),
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    0 0 0 1px rgba(167, 139, 250, .45);
}
.iso .notch { background: #1b1f35; }
.iso .ln { height: 14px; background: #fff; box-shadow: 0 2px 5px -2px rgba(15, 23, 42, .25); }
.iso .ln.me { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.iso .ln:nth-child(4) { background: linear-gradient(135deg, #0d9488, #0891b2); }

/* =====================================================================
 * 9.1-G — the device audit (owner: "every device, perfectly"). Each rule
 * below answers something measured on 25 screen sizes, 320px to 3840px,
 * portrait and landscape.
 * ===================================================================== */

/* very wide and zoomed-out screens: 1600px was 23% empty, 3840px 48% */
@media (min-width: 1600px) { :root { --wrapMax: 1440px; } }
@media (min-width: 1760px) { :root { --wrapMax: 1600px; } }
@media (min-width: 2200px) { :root { --wrapMax: 2040px; } }
@media (min-width: 3000px) {
  :root { --wrapMax: 2820px; }
  .tiles:has(> .tile:nth-child(8):last-child) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* nothing on the page smaller than 12px (the "free" and plan marks were 11.5px) */
.tagFree, .tagPlan { font-size: 12.5px; }
.eyebrow b { font-size: 12px; }

/*
 * The phone's own words stay readable on the smallest phone. The screen's
 * text scales with the phone, which on a 320px handset made the status line
 * 8.5px, "AI is typing…" 7.9px and the time chips 7.7px. Each now has a
 * floor.
 */
.p3Screen { font-size: max(11.5px, calc(var(--pw) * .046)); }
.p3St { font-size: max(10px, .8em); }
.p3Chat .p3Time, .p3Chat .p3Sys { font-size: max(10px, .74em); }
.p3Bar, .p3Toast { font-size: max(10px, .82em); }
.p3Chat .bub.out::before { font-size: max(8.5px, .62em); }

/* things a thumb has to hit are at least 32px tall (language buttons were 27px, footer links 17px) */
.hero .nav .vz-lang-btn,
.hero .nav .vz-lang-more { min-height: 32px; display: inline-flex; align-items: center; }
.foot a { display: inline-block; padding: 8px 6px; }

/*
 * Laptops with a short screen (1280×720, 1366×768): the phone sat centred
 * against the tall column of words beside it and its bottom — where the
 * reply is typed — fell below the fold. On a two-column hero the phone now
 * starts at the top of its column, level with the words, and is sized from
 * that starting point.
 */
@media (min-width: 861px) {
  .hero .heroGrid { align-items: start; }
  .heroStage {
    --pw: clamp(236px, min(13vw + 100px, (100svh - 192px) / 2.07), 318px);
    min-height: 0;
    padding-top: 6px;
  }
}

/*
 * The smallest phones (≤380px, e.g. 320px): the top line broke into three
 * ragged pieces with "Start free" alone on the left. It now reads as a
 * deliberate stack — logo and Log in, then the main button across the full
 * width, then the languages.
 */
@media (max-width: 380px) {
  .hero .nav .btn.pri.sm { order: 8; flex: 1 1 100%; text-align: center; padding: 11px 14px; font-size: 14px; }
}

/* the step numbers in the reader's own digits (they were 1 2 3 on every page) */
:lang(bn) .step::before { content: counter(s, bengali); }
:lang(hi) .step::before { content: counter(s, devanagari); }
:lang(ar) .step::before { content: counter(s, arabic-indic); }
:lang(ur) .step::before { content: counter(s, persian); }

/*
 * Short windows — measured in the owner's own Chrome, live: a 1920×1080
 * laptop at 150% leaves a 1280×607 window, and the phone's composer (where
 * the reply is typed and sent) sat at 658px, below the fold. The first audit
 * had measured whole screens (1366×768), not the window a browser actually
 * leaves once its own bars and Windows' scaling are taken off — which is
 * exactly where most laptops live. On a short two-column hero the space
 * above shrinks and the phone may go smaller than its usual floor.
 */
@media (min-width: 861px) and (max-height: 760px) {
  .hero { padding-top: 22px; }
  .hero .heroGrid { margin-top: 8px !important; }
  /* measured: the phone starts ~160px down and floats up to 10px lower */
  .heroStage { --pw: clamp(188px, min(13vw + 100px, (100svh - 182px) / 2.07), 318px); }
  .hero h1 { font-size: clamp(27px, 1.1vw + 18px, 44px); margin-bottom: 10px; }
}