/* =====================================================================
   THRUBITS — public site
   Design system lifted from the approved preview, so the live site matches
   what was signed off. Dark is default; light is a token override.

   Contrast audited to WCAG 2.1 AA in BOTH themes:
     dark  — ink 18.4:1  muted 6.3:1  muted-2 5.2:1  cyan 12.9:1
     light — ink 17.1:1  muted 5.9:1  muted-2 4.9:1  accent 4.7:1
   Do not brighten --accent-legacy in the light theme: pure #4FB3F5 only
   reaches 1.6:1 on white, which is unreadable.

   public_html/assets/site/thrubits.css
   ===================================================================== */

:root{
  /* 'only': browsers' forced dark modes (Chrome Auto Dark, Samsung) may not
     repaint the page — the visitor's own light/dark choice is final. */
  color-scheme:only dark;
  /* ---------------------------------------------------------------
     THRUBITS BRAND — both colours are taken straight from logo.png.
     The logo contains ONLY these two; everything else here is a tint
     or shade of them, chosen so each passes WCAG AA in its role.

       #7442A0 purple  74% of the logo  → button fill (6.93:1 w/ white)
       #2090E4 blue    26% of the logo  → text on dark (5.90:1)
       #A855F7 lifted purple            → accent text on dark (5.08:1)
       #4FB3F5 lifted blue              → links on dark (8.70:1)

     Pure logo purple fails as text on dark (2.90:1) and pure logo blue
     fails as a button fill (3.40:1) — hence the lifted pair. Do not
     swap them around without re-checking.
     --------------------------------------------------------------- */
  --brand-purple:#7442A0;
  --brand-blue:#2090E4;
  --purple-lift:#A855F7;
  --blue-lift:#4FB3F5;
  --brand-grad:linear-gradient(100deg,#A855F7,#7442A0 38%,#2090E4);
  --brand-grad-soft:linear-gradient(100deg,#A855F7,#4FB3F5);

  --accent:#7442A0;        /* primary fill — the logo purple itself */
  --on-accent:#FFFFFF;     /* 6.93:1 */
  --link:#4FB3F5;          /* 8.70:1 on --bg */
  --accent-ink:#B795DD;    /* the brand purple as TEXT: #7442A0 itself is 2.9:1 on --bg */
  --text-soft:#C6CAD3;     /* body copy a step above --muted */
  --text-faint:#8E93A0;

  --bg:#07070E; --bg-2:#0B0B14; --panel:#12121C; --panel-2:#181828;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --ink:#F4F5F7; --muted:#8B909C; --muted-2:#7C8290;   /* 5.2:1 on --bg, WCAG AA */
  --lime:var(--accent);
  --radius:18px; --maxw:1220px;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,3.8vw,2.95rem);letter-spacing:-.03em}
h3{font-size:1.2rem;letter-spacing:-.015em}
.lead{font-size:clamp(1rem,1.5vw,1.17rem);color:var(--muted);max-width:60ch;line-height:1.62}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:.71rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:7px 15px 7px 12px;background:rgba(255,255,255,.02)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--link);box-shadow:0 0 10px var(--link)}
.sec-head{max-width:70ch;margin-bottom:52px}
.sec-head h2{margin:18px 0 16px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:.92rem;padding:13px 22px;border-radius:100px;border:1px solid transparent;transition:.22s ease;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(79,179,245,.45)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.07)}
.btn-wa{background:#25D366;color:#052E16}
.btn-wa svg{width:17px;height:17px}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(37,211,102,.5)}

/* nav */
header.nav{position:sticky;top:0;z-index:80;background:rgba(7,7,14,.72);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
header.nav.stuck{border-bottom-color:var(--line);background:rgba(7,7,14,.93)}
.nav-in{display:flex;align-items:center;gap:32px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.03em;flex:0 0 auto}
.nav-links{display:flex;gap:30px;margin:0 auto 0 6px}
.nav-links a{
  font-family:var(--display);
  font-size:.9rem;
  font-weight:600;              /* bolder — was 500 */
  color:var(--text-soft);       /* lifted from --muted for presence */
  white-space:nowrap;           /* stops "QR Code" breaking in two */
  letter-spacing:-.005em;
  position:relative;
  padding:8px 0;
  transition:color .18s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink)}
.nav-links a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brand-grad);border-radius:2px;
}
.nav-cta{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:4px}

/* hero */
.hero{padding:clamp(66px,9vw,112px) 0 clamp(56px,7vw,84px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-25% -10% auto -10%;height:820px;pointer-events:none;background:radial-gradient(620px 360px at 18% 20%,rgba(116,66,160,.34),transparent 66%),radial-gradient(580px 380px at 78% 8%,rgba(32,144,228,.26),transparent 66%),radial-gradient(520px 320px at 60% 62%,rgba(79,179,245,.16),transparent 68%);filter:blur(10px)}
.grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.42;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:66px 66px;mask-image:radial-gradient(ellipse 90% 62% at 50% 30%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 90% 62% at 50% 30%,#000 30%,transparent 78%)}
.hero-in{position:relative;z-index:2}
.hero h1{margin:22px 0 24px;max-width:17ch}
.hero h1 .hl{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:62px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hero-stats div{background:var(--bg-2);padding:22px 20px}
.hero-stats b{display:block;font-family:var(--display);font-size:clamp(1.45rem,2.5vw,1.95rem);font-weight:600;letter-spacing:-.03em}
.hero-stats span{font-size:.78rem;color:var(--muted);letter-spacing:.04em}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden;background:var(--bg-2)}
.ticker-track{display:flex;gap:42px;width:max-content;animation:slide 36s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker-item{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:.84rem;font-weight:500;color:var(--muted);letter-spacing:.03em;white-space:nowrap}
.ticker-item i{width:7px;height:7px;border-radius:2px;display:block}

/* ---------- SERVICES : interactive index ---------- */
.services{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line)}
.svc-list{position:relative;border-top:1px solid var(--line)}
.svc-row{
  position:relative;display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:22px;
  padding:26px 8px;border-bottom:1px solid var(--line);cursor:pointer;transition:.3s cubic-bezier(.2,.8,.3,1);
}
.svc-row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 11%,transparent),transparent 55%);opacity:0;transition:.3s}
.svc-row:hover::before,.svc-row.open::before{opacity:1}
.svc-row:hover,.svc-row.open{padding-left:22px}
.svc-num{font-family:var(--display);font-size:.8rem;color:var(--muted-2);letter-spacing:.14em;transition:.3s}
.svc-row:hover .svc-num,.svc-row.open .svc-num{color:var(--c)}
.svc-name{font-family:var(--display);font-size:clamp(1.35rem,3.2vw,2.15rem);font-weight:600;letter-spacing:-.03em;transition:.3s;line-height:1.15}
.svc-row:hover .svc-name{color:var(--c)}
.svc-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:.3s;flex:0 0 auto}
.svc-row:hover .svc-arrow,.svc-row.open .svc-arrow{border-color:var(--c);color:var(--c);transform:rotate(45deg)}
.svc-row.open .svc-arrow{transform:rotate(135deg)}
.svc-body{grid-column:2/4;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.3,1),opacity .3s;opacity:0}
.svc-row.open .svc-body{max-height:340px;opacity:1;padding-top:16px}
.svc-body p{color:var(--muted);font-size:.93rem;max-width:62ch;margin-bottom:14px;line-height:1.62}
.svc-body .chips{display:flex;flex-wrap:wrap;gap:7px}
.svc-body .chips span{font-size:.74rem;color:#C3C7D0;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:5px 11px}
.peek{
  position:fixed;pointer-events:none;z-index:60;width:250px;height:170px;border-radius:16px;
  opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .3s,transform .3s;
  display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
}
.peek.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek .glyph{font-size:3.6rem;color:rgba(0,0,0,.55);font-family:var(--display);font-weight:700}
.peek .tag{position:absolute;bottom:12px;left:14px;font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.62)}

/* ---------- QR GENERATOR ---------- */
.qr{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.qr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 340px at 82% 40%,rgba(79,179,245,.12),transparent 68%),radial-gradient(420px 300px at 12% 70%,rgba(116,66,160,.20),transparent 70%)}
.qr-layout{position:relative;display:grid;grid-template-columns:400px 1fr;gap:60px;align-items:center}

.qr-stage{position:relative;display:grid;place-items:center}
.qr-card{
  position:relative;width:100%;max-width:340px;aspect-ratio:.78;border-radius:24px;padding:26px;
  background:linear-gradient(155deg,#16162A,#0C0C16);border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.03);
  display:flex;flex-direction:column;gap:18px;
}
.qr-card::before{content:"";position:absolute;inset:-1px;border-radius:24px;padding:1px;
  background:var(--brand-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.qr-brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:-.02em}
.qr-brand i{width:22px;height:22px;border-radius:7px;background:var(--brand-grad);display:block;flex:0 0 auto}
.qr-box{position:relative;flex:1;border-radius:16px;background:#fff;padding:16px;display:grid;place-items:center;overflow:hidden}
#qrGrid{display:block;width:100%;aspect-ratio:1}
#qrGrid svg{display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(135deg,#000 45%,transparent 55%);mask-image:linear-gradient(135deg,#000 45%,transparent 55%);
  -webkit-mask-size:300% 300%;mask-size:300% 300%;-webkit-mask-position:100% 100%;mask-position:100% 100%;
  animation:qrIn .7s ease forwards}
@keyframes qrIn{to{-webkit-mask-position:0 0;mask-position:0 0}}
.qr-scan{position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(79,179,245,.45),transparent);
  animation:qrScan 3.4s cubic-bezier(.6,0,.4,1) infinite;will-change:transform}
/* transform, not top: moving `top` re-ran layout on every frame. 100% here
   is the line's own height (34% of the box), so 295% reaches the bottom. */
@keyframes qrScan{0%{transform:translateY(-100%)}55%{transform:translateY(295%)}100%{transform:translateY(295%)}}
.qr-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qr-meta b{font-family:var(--display);font-size:.83rem}
.qr-meta span{font-size:.68rem;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase}
.qr-chip{font-family:var(--display);font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-accent);background:var(--accent);padding:4px 10px;border-radius:100px}

.qr-modes{display:flex;gap:8px;margin:22px 0 26px;flex-wrap:wrap}
.qr-modes button{font-family:var(--display);font-size:.82rem;font-weight:600;padding:9px 17px;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;transition:.2s}
.qr-modes button:hover{color:var(--ink);border-color:var(--line-strong)}
.qr-modes button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.qr-steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:28px}
.qr-step{background:var(--panel);padding:18px 20px;display:flex;gap:15px;align-items:flex-start}
.qr-step b{font-family:var(--display);font-size:.72rem;color:var(--accent-ink);letter-spacing:.12em;flex:0 0 auto;padding-top:2px}
.qr-step h4{font-size:.96rem;margin-bottom:3px}
.qr-step p{font-size:.83rem;color:var(--muted);line-height:1.55}
.qr-note{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:var(--muted);
  border-left:2px solid var(--accent);padding-left:14px;margin-top:22px;line-height:1.6;max-width:56ch}

/* ecosystem */
.eco{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.eco-layout{display:grid;grid-template-columns:1fr 420px;gap:54px;align-items:center}
.hub{position:relative;width:100%;aspect-ratio:1;max-width:600px;margin:0 auto}
.hub svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub .ring{position:absolute;border:1px dashed rgba(255,255,255,.09);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.hub .ring.r1{width:76%;height:76%;animation:spin 64s linear infinite}
.hub .ring.r2{width:50%;height:50%;border-style:solid;border-color:rgba(255,255,255,.06)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1;border-radius:26%;background:linear-gradient(150deg,#14171F,#0B0D12);border:1px solid var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 0 0 10px rgba(79,179,245,.06),0 26px 60px -20px rgba(0,0,0,.9);z-index:3;text-align:center}
.core b{font-family:var(--display);font-size:clamp(.86rem,1.6vw,1.1rem);letter-spacing:-.02em}
.core span{font-size:.58rem;color:var(--muted-2);letter-spacing:.15em;text-transform:uppercase}
.node{position:absolute;transform:translate(-50%,-50%);width:19%;aspect-ratio:1;border-radius:28%;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.28s cubic-bezier(.2,.8,.3,1);z-index:4}
.node .ini{color:var(--accent-ink);font-family:var(--display);font-weight:700;font-size:clamp(.72rem,1.5vw,.98rem);letter-spacing:-.02em}
.node .lbl{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);font-size:.67rem;color:var(--muted);white-space:nowrap;letter-spacing:.04em;font-weight:500}
.node:hover,.node.on{transform:translate(-50%,-50%) scale(1.14);border-color:currentColor;background:var(--panel-2)}
.node:hover .lbl,.node.on .lbl{color:var(--ink)}
.node::before{content:"";position:absolute;inset:-3px;border-radius:30%;opacity:0;transition:.28s;box-shadow:0 0 0 1px currentColor,0 0 32px -4px currentColor}
.node:hover::before,.node.on::before{opacity:.55}
.pulse{stroke-dasharray:2 9;stroke-linecap:round;animation:flow 2.6s linear infinite}
/* Phones: the moving dashes recalculate style every frame for a detail
   too small to notice there. The lines stay, still. */
@media (max-width:760px),(hover:none){.pulse{animation:none}}
@keyframes flow{to{stroke-dashoffset:-55}}
.eco-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:30px;min-height:410px;position:relative;overflow:hidden}
.eco-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent,#fff);transition:.3s}
.eco-panel .kicker{font-family:var(--display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink,#fff);font-weight:600}
.eco-panel h3{margin:11px 0 4px;font-size:1.5rem}
.eco-panel .dom{font-size:.78rem;color:var(--muted-2);font-family:var(--display)}
.eco-panel p.desc{margin:16px 0 20px;color:var(--muted);font-size:.92rem;line-height:1.65}
.eco-panel ul{list-style:none;display:grid;gap:9px;margin-bottom:22px}
.eco-panel li{display:flex;gap:10px;font-size:.865rem;color:var(--text-soft);line-height:1.45}
.eco-panel li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:var(--accent,#fff);margin-top:7px}
.eco-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.eco-foot .price{font-family:var(--display);font-weight:600;font-size:.94rem}
.eco-foot .price small{display:block;color:var(--muted-2);font-weight:400;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.eco-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--accent-ink,#fff)}
.eco-link:hover{gap:11px}

/* platform cards */
.plats{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line)}
.plat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.pcard{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:26px;display:flex;flex-direction:column;gap:13px;transition:.26s;overflow:hidden}
.pcard::after{content:"";position:absolute;inset:auto auto 0 0;width:100%;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.45}
.pcard:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--panel-2)}
.pcard-top{display:flex;align-items:flex-start;gap:13px}
.pcard .chip{width:42px;height:42px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.84rem;color:var(--on-accent);background:var(--accent)}
.pcard h3{font-size:1.1rem;margin-bottom:2px}
.pcard .dom{font-size:.73rem;color:var(--muted-2);font-family:var(--display)}
.pcard .sector{margin-left:auto;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);border:1px solid currentColor;border-radius:100px;padding:3px 9px;font-weight:600;opacity:.8}
.pcard p{font-size:.875rem;color:var(--muted);line-height:1.62}
.pcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.pcard .tags span{font-size:.71rem;color:var(--text-soft);background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.pcard .go{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:.84rem;color:var(--accent-ink);padding-top:14px;border-top:1px solid var(--line);margin-top:4px}
.pcard .go:hover{gap:11px}

/* work */
.work{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filters button{font-family:var(--display);font-size:.81rem;font-weight:600;padding:8px 16px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;transition:.2s}
.filters button:hover{color:var(--ink);border-color:var(--line-strong)}
.filters button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.wcard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);transition:.3s;display:flex;flex-direction:column}
.wcard.hide{display:none}
.wcard:hover{transform:translateY(-5px);border-color:var(--line-strong)}
/* --- browser-framed site portrait --- */
.wshot{aspect-ratio:16/11;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 26%,#0A0A14),#08080F);padding:11px 11px 0}
.chrome{height:100%;border-radius:9px 9px 0 0;overflow:hidden;background:#0D0D16;
  border:1px solid rgba(255,255,255,.11);box-shadow:0 -2px 30px -8px rgba(0,0,0,.8);display:flex;flex-direction:column}
.chrome-bar{height:25px;flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:0 9px;
  background:#15151F;border-bottom:1px solid rgba(255,255,255,.08)}
.chrome-bar .tl{display:flex;gap:4px;flex:0 0 auto}
.chrome-bar .tl i{width:7px;height:7px;border-radius:50%;display:block}
.chrome-bar .url{flex:1;height:14px;border-radius:7px;background:rgba(255,255,255,.07);
  font-size:.52rem;color:var(--text-faint);display:flex;align-items:center;padding:0 8px;
  font-family:var(--display);letter-spacing:.01em;overflow:hidden;white-space:nowrap}
.chrome-body{flex:1;position:relative;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:7px;
  transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.wcard:hover .chrome-body{transform:translateY(-9px)}
.mini-nav{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.mini-nav .lg{width:15px;height:8px;border-radius:2px;background:var(--accent);flex:0 0 auto}
.mini-nav em{height:4px;border-radius:2px;background:rgba(255,255,255,.14);display:block;flex:0 0 auto}
.mini-h{height:10px;border-radius:3px;background:var(--accent);width:64%}
.mini-h2{height:10px;border-radius:3px;background:rgba(255,255,255,.24);width:46%}
.mini-p{height:4px;border-radius:3px;background:rgba(255,255,255,.10);width:82%}
.mini-btn{height:12px;width:48px;border-radius:6px;background:var(--accent);opacity:.85;margin-top:3px}
.mini-grid{display:grid;gap:6px;margin-top:auto}
.mini-grid>i{display:block;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.05)}
.mini-grid>i.k{background:color-mix(in srgb,var(--accent) 32%,transparent);border-color:transparent}
.wshot .flag{position:absolute;top:19px;right:19px;z-index:3;font-family:var(--display);font-size:.59rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);padding:4px 9px;border-radius:100px;box-shadow:0 4px 14px -4px rgba(0,0,0,.6)}
.wbody{padding:20px 22px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.wbody h4{font-size:1.02rem}
.wbody .meta{font-size:.74rem;color:var(--muted-2);font-family:var(--display);letter-spacing:.03em}
.wbody p{font-size:.83rem;color:var(--muted);line-height:1.55}
.wbody .go{margin-top:auto;padding-top:12px;font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--accent-ink);display:inline-flex;gap:6px}
.wcard:hover .go{gap:10px}
.slot{border:1px dashed var(--line-strong);background:rgba(255,255,255,.015);display:grid;place-items:center;text-align:center;padding:36px 24px;border-radius:var(--radius);color:var(--muted-2)}
.slot b{display:block;font-family:var(--display);color:var(--muted);margin-bottom:6px;font-size:.94rem}
.slot span{font-size:.8rem;line-height:1.55;max-width:46ch;display:block}

/* sectors */
.sectors{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sec-cell{background:var(--bg);padding:28px 24px;transition:.25s}
.sec-cell:hover{background:var(--panel)}
.sec-cell .n{font-family:var(--display);font-size:.71rem;color:var(--muted-2);letter-spacing:.14em}
.sec-cell h4{font-size:1.03rem;margin:12px 0 8px}
.sec-cell p{font-size:.82rem;color:var(--muted);line-height:1.55}

/* ---------- PRICING ---------- */
.pricing{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line)}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;align-items:stretch}
.pcol{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:32px 28px;display:flex;flex-direction:column;gap:18px;transition:.28s}
.pcol:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.pcol.best{border-color:rgba(79,179,245,.45);background:linear-gradient(180deg,rgba(79,179,245,.06),var(--panel) 34%)}
.pcol.best::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand-grad);border-radius:var(--radius) var(--radius) 0 0}
.pbadge{position:absolute;top:-11px;inset-inline-end:24px;font-family:var(--display);font-size:.63rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);padding:5px 12px;border-radius:100px}
.pcol h3{font-size:1.16rem}
.pcol .sub{font-size:.79rem;color:var(--muted-2);margin-top:-12px}
.pcol .amt{display:flex;align-items:flex-start;gap:4px;font-family:var(--display);font-weight:600;letter-spacing:-.03em}
.pcol .amt .cur{font-size:1.1rem;margin-top:8px;color:var(--muted)}
.pcol .amt .val{font-size:clamp(2.3rem,4.4vw,2.9rem);line-height:1}
.pcol .amt .val.free{color:var(--accent-ink)}
.pcol .amt .onreq{font-family:var(--display);font-size:1.28rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pcol{--c:var(--accent)}
.pcol:hover{border-color:var(--c)}
.pcol li svg{color:var(--c)}
.pcol h3{color:var(--ink)}
.pcol .amt .per{font-size:.76rem;color:var(--muted-2);margin-top:12px;letter-spacing:.02em}
.amt .from{font-size:.74rem;font-weight:500;color:var(--muted);margin-top:12px;margin-inline-end:4px;letter-spacing:.02em}
.pcol .amt{flex-wrap:wrap}
.pcol ul{list-style:none;display:grid;gap:11px;flex:1}
.pcol li{display:flex;gap:11px;font-size:.87rem;color:var(--muted);line-height:1.45}
.pcol li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--accent-ink)}
.pcol .cta{width:100%;justify-content:center}
/* The grid clips its children (rounded outer corners), so the badge sits inside the card. */
.price-grid .pbadge{top:18px;inset-inline-end:20px}
.pcol h3 a{color:inherit}
.pcol h3 a:hover{color:var(--accent-ink)}
.pkg-more{align-self:center;font-size:.82rem;color:var(--muted);margin-top:-6px}
.pkg-more:hover{color:var(--accent-ink)}

/* Package comparison: scrolls sideways inside its box on phones, never the page. */
.pkg-compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);-webkit-overflow-scrolling:touch}
.pkg-compare{width:100%;min-width:640px;border-collapse:collapse;font-size:.87rem}
.pkg-compare th,.pkg-compare td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;color:var(--muted)}
.pkg-compare tbody th{text-align:start;font-weight:500;color:var(--ink);width:30%;position:sticky;inset-inline-start:0;background:var(--panel);z-index:1}
.pkg-compare thead th{padding-top:22px;padding-bottom:18px;font-family:var(--display);color:var(--ink);font-size:1rem}
.pkg-compare thead th a{color:inherit;display:block}
.pkg-compare thead th a:hover{color:var(--accent-ink)}
.pkg-compare .pc-price{display:block;margin-top:4px;font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.pkg-compare thead th.pop{box-shadow:inset 0 3px 0 var(--accent)}
.pkg-compare .on{background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.pkg-compare .pc-yes{width:18px;height:18px;color:var(--accent-ink);display:inline-block}
.pkg-compare .pc-no{color:var(--muted-2);opacity:.6}
.pkg-compare tr:last-child th,.pkg-compare tr:last-child td{border-bottom:none}
.pkg-compare .pc-cta .btn{padding:9px 20px;font-size:.82rem}

.pkg-list{list-style:none;padding:0!important;display:grid;gap:12px}
.pkg-list li{display:flex;gap:11px;margin:0}
.pkg-list svg{width:17px;height:17px;flex:0 0 auto;margin-top:5px;color:var(--accent-ink)}
.pkg-steps li{padding-inline-start:4px}
.pkg-body .price-inline{margin-top:0}
@media(max-width:640px){
  .pkg-compare{min-width:0;font-size:.74rem}
  .pkg-compare th,.pkg-compare td{padding:10px 6px}
  .pkg-compare tbody th{width:31%;padding-inline-start:12px}
  .pkg-compare thead th{font-size:.78rem}
  .pkg-compare .pc-price{font-size:1rem}
  .pkg-compare .pc-cta .btn{padding:7px 10px;font-size:.72rem}
}
.price-note{margin-top:26px;font-size:.83rem;color:var(--muted);display:flex;gap:11px;align-items:flex-start;
  border-inline-start:2px solid var(--accent);padding-inline-start:14px;line-height:1.6;max-width:66ch}

/* ---------- CLIENTS ---------- */
.clients{padding:clamp(56px,7vw,78px) 0;border-top:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.cli-head{text-align:center;margin-bottom:34px}
.cli-head p{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.cli-track{display:flex;gap:14px;width:max-content;animation:slide 46s linear infinite}
.clients:hover .cli-track{animation-play-state:paused}
.cli{display:flex;align-items:center;gap:11px;padding:14px 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);white-space:nowrap;transition:.24s}
.cli:hover{border-color:var(--c);background:var(--panel-2);transform:translateY(-2px)}
.cli i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--display);font-weight:700;font-size:.7rem;font-style:normal;color:#07070E;background:var(--c)}
.cli b{font-family:var(--display);font-size:.92rem;font-weight:600}
.cli span{font-size:.72rem;color:var(--muted-2)}

/* ---------- LEGITIMACY / TRUST ---------- */
.trust{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.trust-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:44px}
.tfact{background:var(--panel);padding:22px 20px;display:flex;gap:13px;align-items:flex-start;transition:.24s}
.tfact:hover{background:var(--panel-2)}
.tfact .tic{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  background:rgba(79,179,245,.09);border:1px solid rgba(79,179,245,.25);color:var(--accent-ink)}
.tfact .tic svg{width:15px;height:15px}
.tfact b{display:block;font-family:var(--display);font-size:.9rem;letter-spacing:-.01em;margin-bottom:2px}
.tfact span{font-size:.76rem;color:var(--muted);line-height:1.45;display:block}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-bottom:40px}
.quote{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:24px;
  display:flex;flex-direction:column;gap:14px;transition:.24s;position:relative}
.quote:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.quote .mk{font-family:var(--display);font-size:2.4rem;line-height:.6;color:var(--accent-ink);opacity:.5}
.quote p{font-size:.875rem;color:var(--text-soft);line-height:1.62;flex:1}
.quote .who{display:flex;align-items:center;gap:11px;padding-top:13px;border-top:1px solid var(--line)}
.quote .av{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:.78rem;color:#07070E;background:var(--brand-grad)}
.quote .who b{display:block;font-family:var(--display);font-size:.86rem}
.quote .who span{font-size:.73rem;color:var(--muted-2)}

.verify{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:30px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.verify h3{margin-bottom:8px}
.verify p{font-size:.88rem;color:var(--muted);line-height:1.62;max-width:62ch}
.verify .acts{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:820px){.verify{grid-template-columns:1fr}}

/* areas served */
.areas{padding:clamp(60px,7vw,84px) 0;border-top:1px solid var(--line)}
.areas-in{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:center}
.area-tags{display:flex;flex-wrap:wrap;gap:8px}
.area-tags a{font-family:var(--display);font-size:.83rem;font-weight:500;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:8px 16px;background:rgba(255,255,255,.02);transition:.2s}
.area-tags a:hover{color:var(--ink);border-color:var(--accent);background:rgba(79,179,245,.07)}
.area-tags a.hd{color:var(--accent-ink);border-color:rgba(79,179,245,.4)}
@media(max-width:820px){.areas-in{grid-template-columns:1fr;gap:26px}}

/* contact */
.contact{padding:clamp(80px,9vw,118px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.cbox{display:grid;gap:12px;margin-top:30px}
.crow{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:.22s}
.crow:hover{border-color:var(--line-strong);background:var(--panel-2);transform:translateX(3px)}
.crow .ic{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.crow .ic svg{width:17px;height:17px}
.crow b{display:block;font-family:var(--display);font-size:.91rem;font-weight:600}
.crow span{font-size:.77rem;color:var(--muted)}
.crow .arr{margin-left:auto;color:var(--muted-2)}
.form{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:30px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px;font-weight:600;font-family:var(--display)}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ink);font-family:var(--body);font-size:.91rem;transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:rgba(79,179,245,.55);box-shadow:0 0 0 3px rgba(79,179,245,.10)}
.field textarea{resize:vertical;min-height:104px}

/* footer */
footer{border-top:1px solid var(--line);padding:60px 0 32px}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr 0.8fr;gap:36px;margin-bottom:44px}
.f-top h5{font-family:var(--display);font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.f-top ul{list-style:none;display:grid;gap:9px}
.f-top a{font-size:.86rem;color:var(--muted);transition:color .18s}
.f-top a:hover{color:var(--ink)}
.f-brand p{font-size:.86rem;color:var(--muted);max-width:36ch;margin:16px 0 20px;line-height:1.6}
.socials{display:flex;gap:9px}
.socials a{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:.22s;background:rgba(255,255,255,.02)}
.socials a svg{width:17px;height:17px}
.socials a:hover{color:var(--ink);border-color:var(--line-strong);transform:translateY(-2px);background:rgba(255,255,255,.06)}
.socials a.wa:hover{color:#25D366;border-color:rgba(37,211,102,.45)}
.socials a.be:hover{color:#1769FF;border-color:rgba(23,105,255,.45)}
.socials a.ig:hover{color:#E1306C;border-color:rgba(225,48,108,.45)}
.socials a.fb:hover{color:#1877F2;border-color:rgba(24,119,242,.45)}
.f-bot{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.79rem;color:var(--muted-2)}

.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#fff;
  box-shadow:0 14px 40px -10px rgba(37,211,102,.65);transition:.26s cubic-bezier(.2,.8,.3,1);
}
.wa-float svg{width:29px;height:29px}
.wa-float:hover{transform:translateY(-3px) scale(1.07);box-shadow:0 18px 46px -10px rgba(37,211,102,.8)}
.wa-float::before{                       /* soft pulse ring */
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:waPulse 2.6s ease-out infinite;pointer-events:none;
}
@keyframes waPulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
.wa-float::after{                        /* hover tooltip */
  content:"WhatsApp";position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--panel-2);color:var(--ink);border:1px solid var(--line-strong);
  font-family:var(--display);font-weight:600;font-size:.78rem;padding:7px 13px;border-radius:100px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.24s;
}
.wa-float:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:560px){.wa-float::after{display:none}}

/* ---- back to top, with scroll-progress ring ---- */
.to-top{
  position:fixed;right:22px;bottom:90px;z-index:90;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(18,18,28,.86);backdrop-filter:blur(12px);
  border:1px solid var(--line-strong);color:var(--muted);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.3,1),visibility .3s,color .2s,border-color .2s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--accent-ink);border-color:rgba(79,179,245,.5);transform:translateY(-3px)}
.to-top .arw{position:relative;z-index:2;width:17px;height:17px;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.to-top:hover .arw{transform:translateY(-2px)}
.to-top .ring{position:absolute;inset:-1px;width:54px;height:54px;transform:rotate(-90deg);pointer-events:none}
.to-top .ring circle{fill:none;stroke-width:2;stroke-linecap:round}
.to-top .ring .trk{stroke:rgba(255,255,255,.07)}
.to-top .ring .bar{stroke:url(#ttGrad);transition:stroke-dashoffset .12s linear}

/* ---------- language toggle + RTL ---------- */
.lang-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;padding:9px 14px;border-radius:100px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;transition:.2s;flex:0 0 auto}
.lang-btn:hover{color:var(--ink);border-color:var(--accent);background:rgba(79,179,245,.07)}
.lang-btn svg{width:14px;height:14px}

html[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .pl-word,html[dir="rtl"] .eyebrow,html[dir="rtl"] .btn,
html[dir="rtl"] .logo,html[dir="rtl"] .amt{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .pl-word,html[dir="rtl"] .cli-head p,
html[dir="rtl"] .f-top h5,html[dir="rtl"] .field label,html[dir="rtl"] .pbadge,
html[dir="rtl"] .sec-cell .n,html[dir="rtl"] .pcard .sector,html[dir="rtl"] .eco-panel .kicker{letter-spacing:.02em}
html[dir="rtl"] .nav-links{margin:0 6px 0 auto}
html[dir="rtl"] .burger{margin-left:0;margin-right:auto}
html[dir="rtl"] .crow .arr,html[dir="rtl"] .pcard .sector{margin-left:0;margin-right:auto}
html[dir="rtl"] .crow .arr{transform:scaleX(-1)}
html[dir="rtl"] .crow:hover{transform:translateX(-3px)}
html[dir="rtl"] .svc-row:hover,html[dir="rtl"] .svc-row.open{padding-left:8px;padding-right:22px}
html[dir="rtl"] .svc-row::before{background:linear-gradient(-90deg,color-mix(in srgb,var(--c) 11%,transparent),transparent 55%)}
html[dir="rtl"] .quote .mk,html[dir="rtl"] .price-note,html[dir="rtl"] .qr-note{transform:scaleX(-1);display:inline-block}
html[dir="rtl"] .price-note span,html[dir="rtl"] .qr-note span{transform:scaleX(-1);display:inline-block}
html[dir="rtl"] .wa-float{right:auto;left:22px}
html[dir="rtl"] .wa-float::after{right:auto;left:calc(100% + 12px);transform:translateY(-50%) translateX(-6px)}
html[dir="rtl"] .wa-float:hover::after{transform:translateY(-50%) translateX(0)}
html[dir="rtl"] .to-top{right:auto;left:22px}
html[dir="rtl"] .ticker-track,html[dir="rtl"] .cli-track{animation-direction:reverse}
html[dir="rtl"] .text-right{text-align:left}
@media(max-width:560px){
  html[dir="rtl"] .wa-float{left:14px;right:auto}
  html[dir="rtl"] .to-top{left:14px;right:auto}
}

.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:1040px){
  .qr-layout{grid-template-columns:1fr;gap:44px}
  .qr-stage{order:-1}
  .eco-layout{grid-template-columns:1fr;gap:40px}.eco-panel{min-height:0}
  .contact-layout{grid-template-columns:1fr;gap:40px}
  .f-top{grid-template-columns:1fr 1fr;gap:32px}
  .peek{display:none}
}
@media(max-width:820px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:70px;left:0;right:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:20px 24px;gap:16px;margin:0}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hub{max-width:450px}.node .lbl{font-size:.59rem}
  .svc-row{grid-template-columns:52px 1fr auto;gap:14px}
}
@media(max-width:560px){
  /* The nav row did not fit a phone: logo + theme + language + "Start a
     project" + menu pushed the page ~70px wider than the screen, so every
     page loaded shifted sideways. The WhatsApp float already does what
     "Start a project" does, so it gives way here. */
  .nav-in{gap:12px}
  .nav-cta{gap:8px}
  .nav-cta .btn-primary{display:none}
  .wrap{padding:0 18px}
  .hub{max-width:330px}.node .lbl{display:none}
  .wa-float{right:14px;bottom:14px;width:50px;height:50px}
  .wa-float svg{width:26px;height:26px}
  .to-top{right:14px;bottom:74px;width:46px;height:46px}
  .to-top .ring{width:48px;height:48px}
  .f-top{grid-template-columns:1fr}
  .svc-row{padding:20px 4px}
}

/* ---------------------------------------------------------------------
   LIGHT THEME — same two brand colours, shifted for a white background.
     #6B3B94 deeper purple  → button fill (7.84:1 w/ white)
     #1B6FB8 deeper blue    → links (5.23:1 on white)
   ------------------------------------------------------------------ */
html[data-theme="light"]{
  --bg:#F6F7F9; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#F2F4F7;
  --line:rgba(11,13,20,.10); --line-strong:rgba(11,13,20,.18);
  --ink:#111421; --muted:#5A6070; --muted-2:#666D7B;
  --accent:#6B3B94; --on-accent:#FFFFFF; --link:#1B6FB8;
  --accent-ink:#6B3B94; --text-soft:#3D4352; --text-faint:#575D6B;
  --purple-lift:#7442A0; --blue-lift:#1B6FB8;
  color-scheme:only light;
}
html[data-theme="light"] header.nav{background:rgba(255,255,255,.86)}
html[data-theme="light"] header.nav.stuck{background:rgba(255,255,255,.95)}
html[data-theme="light"] .grid-bg{opacity:.7}
html[data-theme="light"] .hero::before{
  background:radial-gradient(620px 360px at 18% 20%,rgba(116,66,160,.14),transparent 66%),
             radial-gradient(580px 380px at 78% 8%,rgba(32,144,228,.12),transparent 66%),
             radial-gradient(520px 320px at 60% 62%,rgba(79,179,245,.10),transparent 68%);
}
html[data-theme="light"] .core,
html[data-theme="light"] .qr-card{background:linear-gradient(150deg,#FFFFFF,#F4F6F9)}
html[data-theme="light"] .to-top{background:rgba(255,255,255,.9)}
html[data-theme="light"] .chrome{background:#F4F6F9}
html[data-theme="light"] .chrome-bar{background:#E8EBF0}
html[data-theme="light"] .mini-nav em,
html[data-theme="light"] .mini-p,
html[data-theme="light"] .mini-grid>i{background:rgba(11,13,20,.09)}
html[data-theme="light"] .mini-h2{background:rgba(11,13,20,.22)}

html[data-theme="light"] #preloader::after{opacity:.25}

/* smooth switch */
body,header.nav,.card,.pcard,.eco-panel,.pcol,.quote,.svc-row,.form,.crow,
.wcard,.cli,.tfact,.sec-cell,.hero-stats div,.form-control,.field input,
.field textarea,.field select{transition:background-color .28s,color .28s,border-color .28s}

/* theme toggle button */
.theme-btn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--line-strong);background:rgba(128,128,128,.06);color:var(--muted);
  cursor:pointer;transition:.2s;
}
.theme-btn:hover{color:var(--ink);border-color:var(--accent);background:rgba(79,179,245,.08)}
.theme-btn svg{width:17px;height:17px}
html[data-theme="dark"] .ic-sun{display:block}
html[data-theme="dark"] .ic-moon{display:none}
html[data-theme="light"] .ic-sun{display:none}
html[data-theme="light"] .ic-moon{display:block}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* =====================================================================
   SERVER-RENDERED ADDITIONS
   Classes that only exist now the site is Blade rather than a SPA.
   ===================================================================== */

/* inner page banner ------------------------------------------------- */
.page-banner{position:relative;padding:clamp(54px,7vw,86px) 0 clamp(26px,3vw,38px);border-bottom:1px solid var(--line);overflow:hidden}
.page-banner::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:460px;pointer-events:none;
  background:radial-gradient(520px 300px at 20% 30%,rgba(116,66,160,.26),transparent 66%),
             radial-gradient(420px 260px at 78% 10%,rgba(79,179,245,.12),transparent 68%);filter:blur(8px)}
.page-banner > *{position:relative;z-index:2}
.page-banner h1{font-size:clamp(2rem,4.4vw,3rem);margin:18px 0 14px}
.crumb{display:flex;gap:9px;align-items:center;font-size:.8rem;color:var(--muted-2);margin-top:18px}
.crumb a{color:var(--muted-2)}
.crumb a:hover{color:var(--accent-ink)}

/* long-form content -------------------------------------------------- */
.cms-area{padding:clamp(44px,6vw,74px) 0 clamp(60px,8vw,96px)}
.cms-grid{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.cms-body{max-width:74ch;color:var(--muted);font-size:.97rem;line-height:1.78}
.cms-body h2{font-size:1.5rem;margin:34px 0 14px;color:var(--ink)}
.cms-body h3{font-size:1.12rem;margin:26px 0 10px;color:var(--ink)}
.cms-body p{margin-bottom:15px}
.cms-body ul,.cms-body ol{margin:0 0 16px;padding-inline-start:20px}
.cms-body li{margin-bottom:8px}
.cms-body strong,.cms-body b{color:var(--ink);font-weight:600}
.cms-body a{color:var(--accent-ink)}
.cms-body a:hover{text-decoration:underline}
.cms-body a.btn-primary{color:var(--on-accent);text-decoration:none}
.cms-body img{border-radius:var(--radius);border:1px solid var(--line);margin:20px 0;width:100%;height:auto}
.cms-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.9rem}
.cms-body th,.cms-body td{border:1px solid var(--line);padding:10px 13px;text-align:start}
.cms-body th{background:var(--panel);color:var(--ink);font-family:var(--display);font-size:.8rem}
.cms-legal h2{font-size:1.25rem;padding-top:18px;border-top:1px solid var(--line)}
.cms-legal h2:first-child{border-top:none;padding-top:0}

.cms-side{position:sticky;top:92px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:24px}
.cms-side h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.cms-side ul{list-style:none;display:grid;gap:2px}
.cms-side ul a{display:block;padding:9px 11px;border-radius:9px;font-size:.88rem;color:var(--muted);transition:.18s}
.cms-side ul a:hover{background:var(--panel-2);color:var(--ink)}
.meta-list{list-style:none;display:grid;gap:12px}
.meta-list li{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;padding-bottom:10px;border-bottom:1px solid var(--line)}
.meta-list li:last-child{border-bottom:none}
.meta-list span{color:var(--muted-2)}
.meta-list b{color:var(--ink);font-weight:500;text-align:end}

/* price block on a service page -------------------------------------- */
.price-inline{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:22px 26px;margin:28px 0}
.price-inline b{font-family:var(--display);font-size:1.6rem;letter-spacing:-.03em;color:var(--ink);display:block}
.price-inline .amt{display:flex;align-items:baseline;gap:5px;font-family:var(--display);font-weight:600;letter-spacing:-.03em}
.price-inline .amt .val{font-size:1.9rem;color:var(--ink)}
.price-inline .amt .cur{font-size:1rem;color:var(--muted)}
.price-inline .amt .onreq{font-size:1.4rem;color:var(--ink)}
.price-inline .amt .per,.price-inline .amt .from{font-size:.78rem;color:var(--muted-2);letter-spacing:.05em;text-transform:uppercase;font-weight:500}
.price-inline .hint{margin:6px 0 0}

/* FAQ — native <details>, no JS needed --------------------------------- */
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:12px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:19px 24px;font-family:var(--display);font-weight:600;font-size:1rem;
  color:var(--ink);list-style:none;display:flex;align-items:center;gap:14px;transition:.18s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-inline-start:auto;color:var(--accent-ink);font-size:1.3rem;font-weight:400;transition:transform .22s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:var(--panel-2)}
.faq-a{padding:0 24px 22px;color:var(--muted);font-size:.93rem;line-height:1.72}
.faq-a p{margin-bottom:12px}

/* platform feature bullets -------------------------------------------- */
.p-bullets{list-style:none;display:grid;gap:8px;margin:4px 0 6px}
.p-bullets li{display:flex;gap:10px;font-size:.85rem;color:var(--text-soft);line-height:1.5}
.p-bullets li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:2px;background:var(--accent);margin-top:8px}

/* real portfolio screenshots ------------------------------------------ */
.wshot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}

/* form feedback -------------------------------------------------------- */
.form-msg{margin-top:14px;font-size:.86rem;text-align:center;min-height:1.2em}
.form-msg.ok{color:var(--ok,#34D399)}
.form-msg.bad{color:#FF8098}
.field small{display:block;margin-top:6px;font-size:.76rem;color:var(--muted-2)}
.field input[type=file]{padding:10px 12px}
.hint{font-size:.79rem;color:var(--muted-2);margin-top:-8px;margin-bottom:8px}

/* logo bitmap ---------------------------------------------------------- */
.mark-img{width:auto;height:44px;max-width:104px;object-fit:contain;flex:0 0 auto;
  filter:brightness(1.3) saturate(1.12) drop-shadow(0 0 14px rgba(116,66,160,.5))}
html[data-theme="light"] .mark-img{filter:none}

.nav-links a.on{color:var(--ink)}

@media(max-width:900px){
  .cms-grid{grid-template-columns:1fr;gap:32px}
  .cms-side{position:static}
}

/* ---------------------------------------------------------------------
   GOOGLE REVIEWS
   ------------------------------------------------------------------ */
.reviews .rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:38px}
.reviews .rev-head h2{margin-top:16px}
.rev-score{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:14px 20px;transition:.22s}
.rev-score:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.rev-score .g-logo{width:26px;height:26px;flex:0 0 auto}
.rev-score .g-logo svg{width:100%;height:100%}
.rev-score b{font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em;color:var(--ink);margin-inline-end:8px}
.rev-score .stars{color:#FFC53D;letter-spacing:.06em;font-size:.9rem}
.rev-score small{display:block;font-size:.75rem;color:var(--muted-2);margin-top:2px}

.review-card{gap:12px}
.rev-top{display:flex;align-items:center;gap:11px}
.rev-av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;object-fit:cover;border:1px solid var(--line)}
.rev-top b{display:block;font-family:var(--display);font-size:.9rem;color:var(--ink)}
.rev-when{font-size:.74rem;color:var(--muted-2)}
.rev-stars{margin-inline-start:auto;color:#FFC53D;font-size:.85rem;letter-spacing:.05em;flex:0 0 auto}
.review-card p{font-size:.9rem;color:var(--text-soft);line-height:1.68;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
html[data-theme="light"] .review-card p{color:var(--muted)}

.rev-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
@media(max-width:640px){.reviews .rev-head{flex-direction:column;align-items:flex-start}}

/* empty state — no reviews yet, so ask for the first one */
.rev-empty{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:clamp(34px,5vw,54px);text-align:center;max-width:620px;margin:0 auto}
.rev-empty .g-logo{width:38px;height:38px;display:inline-block;margin-bottom:16px}
.rev-empty .g-logo svg{width:100%;height:100%}
.rev-empty h3{font-size:1.35rem;margin-bottom:10px}
.rev-empty p{color:var(--muted);font-size:.93rem;line-height:1.65;max-width:46ch;margin:0 auto 22px}

/* =====================================================================
   ADDED — one-page navigation
   The nav scrolls to sections instead of loading a page per item, so the
   homepage now carries a band for every nav entry.
   ===================================================================== */

/* Services open on hover on a mouse; .open is kept for touch, where there
   is no hover at all. Guarding with (hover:hover) stops a tapped row on a
   phone from staying stuck open. */
@media (hover: hover) and (pointer: fine) {
  .svc-row:hover .svc-body { max-height: 340px; opacity: 1; padding-top: 16px; }
  .svc-row:hover .svc-arrow { transform: rotate(135deg); }
}

/* Anchors land under a sticky header otherwise. */
section[id] { scroll-margin-top: 90px; }

/* Inline logo mark, used only while img/logo.png is missing. */
.logo .mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-grad);
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.02em; flex: 0 0 34px;
}

/* ------------------------------------------------------------ QR band -- */
.qr-band { padding: 96px 0; border-top: 1px solid var(--line); }
.qr-band-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.qr-band-copy h2 { margin: 16px 0 12px; }
.qr-band-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.qr-band-art { display: grid; place-items: center; }
.qr-glyph {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
  width: 232px; padding: 22px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line);
}
.qr-glyph i {
  aspect-ratio: 1; border-radius: 4px; background: var(--line-strong);
  animation: qr-pulse 3.4s ease-in-out infinite; animation-delay: var(--d);
}
.qr-glyph i:nth-child(3n) { background: var(--purple-lift); opacity: .85; }
.qr-glyph i:nth-child(5n) { background: var(--blue-lift); opacity: .8; }
@keyframes qr-pulse { 0%, 100% { opacity: .28 } 50% { opacity: 1 } }

/* ------------------------------------------------------- Pricing band -- */
.price-band { padding: 96px 0; border-top: 1px solid var(--line); }
.price-grid { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.price-row {
  display: flex; align-items: baseline; gap: 14px;
  background: var(--panel); padding: 18px 22px; transition: .2s;
}
.price-row:hover { background: var(--panel-2); }
.price-name { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.price-row:hover .price-name { color: var(--link); }
.price-dots { flex: 1; border-bottom: 1px dashed var(--line-strong); transform: translateY(-4px); }
.price-tag { font-family: var(--display); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.price-note { color: var(--muted-2); font-size: .87rem; margin-top: 18px; }

/* ------------------------------------------------------- Contact band -- */
.contact-band { padding: 96px 0; border-top: 1px solid var(--line); }
.contact-band-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.contact-band-links { display: grid; gap: 12px; }
.contact-band-links .cbox {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 20px; transition: .2s;
}
.contact-band-links .cbox:hover { border-color: var(--purple-lift); transform: translateY(-2px); }
.contact-band-links .cbox span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.contact-band-links .cbox b { font-family: var(--display); font-size: 1rem; font-weight: 600; }

@media (max-width: 900px) {
  .qr-band-in, .contact-band-in { grid-template-columns: 1fr; gap: 34px; }
  .qr-band, .price-band, .contact-band { padding: 68px 0; }
  .price-row { flex-wrap: wrap; gap: 6px; }
  .price-dots { display: none; }
}

/* =====================================================================
   PRELOADER — first load of a session only.
   The mark is a separate 7KB image: embedded as base64 it made up 43%
   of this render-blocking stylesheet on every first visit.
   ===================================================================== */
#preloader{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .35s cubic-bezier(.6,0,.3,1),visibility .35s,transform .35s cubic-bezier(.6,0,.3,1);
}
#preloader::before{                       /* brand aura */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px 320px at 50% 44%,rgba(116,66,160,.28),transparent 68%),
             radial-gradient(360px 260px at 50% 44%,rgba(79,179,245,.13),transparent 70%);
  animation:plAura 2.6s ease-in-out infinite;
}
@keyframes plAura{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
#preloader::after{                        /* faint grid, echoes the hero */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 46%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 46%,#000,transparent 72%);
}
#preloader.done{opacity:0;visibility:hidden;transform:scale(1.05)}
/* CSS-only failsafe: if the script never runs, the splash still lifts. */
#preloader{animation:plOut .35s ease 2.5s forwards}
@keyframes plOut{to{opacity:0;visibility:hidden}}
html.tb-seen #preloader{display:none}
html:not(.tb-seen).tb-loading{overflow:hidden}

/* --- stage: bits converge, then the mark resolves --- */
.pl-stage{position:relative;width:220px;height:132px;display:grid;place-items:center;z-index:2}
.pl-bits{position:absolute;inset:0;pointer-events:none}
.pl-bits i{
  position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:2px;
  background:var(--c);opacity:0;
  animation:bitIn .78s cubic-bezier(.25,.7,.3,1) var(--d) forwards;
}
@keyframes bitIn{
  0%  {transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(.35) rotate(0deg);opacity:0}
  28% {opacity:1}
  100%{transform:translate(-50%,-50%) translate(0,0) scale(.18) rotate(135deg);opacity:0}
}
.pl-mark{
  position:relative;width:96px;height:73px;
  background:url("../../img/preloader-mark.png") center/contain no-repeat;
  opacity:0;transform:scale(.8);
  animation:markIn .72s cubic-bezier(.2,.85,.3,1) .38s forwards,
            markGlow 2.4s ease-in-out 1.1s infinite;
  filter:brightness(1.3) saturate(1.12) drop-shadow(0 10px 34px rgba(116,66,160,.6));
}
@keyframes markIn{to{opacity:1;transform:scale(1)}}
@keyframes markGlow{
  0%,100%{filter:brightness(1.3) saturate(1.12) drop-shadow(0 10px 34px rgba(116,66,160,.55))}
  50%    {filter:brightness(1.45) saturate(1.2) drop-shadow(0 12px 46px rgba(32,144,228,.8))}
}
.pl-ring{                                  /* orbiting accent dot */
  position:absolute;top:50%;left:50%;margin:-66px 0 0 -66px;
  width:132px;height:132px;border-radius:50%;transform-origin:50% 50%;
  border:1px dashed rgba(255,255,255,.10);
  opacity:0;animation:ringIn .6s ease .55s forwards, plSpin 7s linear .55s infinite;
}
.pl-ring::after{
  content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);
}
@keyframes ringIn{to{opacity:1}}
@keyframes plSpin{to{transform:rotate(360deg)}}

/* --- wordmark: letters stagger up --- */
.pl-word{
  display:flex;gap:.02em;z-index:2;
  font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ink);padding-left:.32em;
}
.pl-word span{
  display:inline-block;opacity:0;transform:translateY(14px);
  animation:letterUp .42s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:calc(.72s + var(--i) * .045s);
}
@keyframes letterUp{to{opacity:1;transform:none}}

/* --- progress --- */
.pl-bar{width:176px;height:2px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden;z-index:2}
.pl-bar i{
  display:block;height:100%;width:100%;border-radius:2px;background:var(--brand-grad);
  transform:translateX(-100%);
  animation:plFill 1.05s cubic-bezier(.5,.05,.2,1) .22s forwards;
}
@keyframes plFill{to{transform:translateX(0)}}
.pl-sub{
  z-index:2;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);
  margin-top:-10px;opacity:0;animation:letterUp .5s ease 1.05s forwards;
}
@media(prefers-reduced-motion:reduce){#preloader{display:none}}


/* =====================================================================
   LOGO — artwork only, no wordmark beside it
   The PNG is 100x67 and already reads "Thrubits". Height drives the size
   so the aspect ratio holds if the file is ever replaced.
   ===================================================================== */
.logo { gap: 0; }
.logo .mark-img { height: 44px; width: auto; }

/* The header shrinks once the page scrolls; the logo follows it down. */
.nav.stuck .mark-img { height: 38px; transition: height .22s ease; }

@media (max-width: 900px) {
  .logo .mark-img,
  .nav.stuck .mark-img { height: 36px; }
}

/* The fallback mark still needs its wordmark, since a letter alone is not
   a brand. Only the real artwork stands on its own. */
.logo .mark + span { margin-inline-start: 10px; }

/* ---------------------------------------------------------------------
   PRICING GRID — three across, so six services make two even rows.
   auto-fit was giving four then a ragged two, which read as a mistake
   rather than a layout.
   --------------------------------------------------------------------- */
@media (min-width: 1040px) {
  .price-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) and (max-width: 1039px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}

/* "Price on request" was breaking across two lines and colliding with the
   unit beside it. Give it the full row and let the unit sit underneath. */
.pcol .amt { flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
.pcol .amt .onreq { font-size: 1.45rem; line-height: 1.2; white-space: nowrap; }
.pcol .amt .per { flex: 0 0 100%; margin-top: 2px; }

/* With wider cards the feature lists can breathe. */
.pcol ul { margin-top: 4px; }

/* =====================================================================
   MOBILE — site-wide guards
   Individual sections already have breakpoints. These are the rules that
   stop any single long word, wide image or overflowing element from
   introducing a horizontal scrollbar, which is the failure people
   actually notice on a phone.
   ===================================================================== */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
pre, code, table { max-width: 100%; }
pre { overflow-x: auto; }

/* Long URLs and email addresses are the usual culprits. */
a[href^="mailto:"], a[href^="http"], code { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .wrap { padding-inline: 20px; }

  /* Anything laid out in two or more columns collapses to one. */
  .qr-layout, .eco-layout, .contact-layout, .areas-in, .work-head { grid-template-columns: 1fr; }
  .work-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }

  h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }

  .sec-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .plat-grid, .work-grid { grid-template-columns: 1fr; }

  /* Full-width buttons read as buttons on a phone; half-width ones read
     as an accident. */
  .hero .btn, .qr-band-cta .btn { width: 100%; justify-content: center; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .ticker-track { gap: 26px; }
  .ticker-item { font-size: .78rem; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .qr-glyph { width: 190px; }
}


/* ------------------------------------------------- account link in the nav */
/* On desktop the header already carries the account button, so this entry is
   redundant. Below 820px that button is hidden and the drawer is the only
   navigation there is — without this, a signed-in customer on a phone has no
   route back to their dashboard. */
.nav-links .nav-auth{display:none}

@media (max-width:820px){
  .nav-links .nav-auth{
    display:block;
    margin-top:6px;
    padding-top:14px;
    border-top:1px solid rgba(128,128,128,.22);
    font-weight:600;
  }
}

/* =====================================================================
   ACCESSIBILITY — keyboard focus and skip link.
   ===================================================================== */
:focus-visible{outline:2px solid var(--link,#4fb3f5);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:10000;padding:10px 16px;border-radius:10px;
  background:var(--bg);color:var(--text,#fff);border:1px solid currentColor;text-decoration:none}
.skip:focus{top:12px}

/* =====================================================================
   FOOTER NEWSLETTER
   ===================================================================== */
.f-news{display:grid;grid-template-columns:1fr minmax(0,420px);gap:24px 40px;align-items:center;
  padding:26px 0;margin-bottom:28px;border-top:1px solid var(--line,rgba(255,255,255,.08));border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.f-news h5{font-family:var(--display);font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.f-news p{font-size:.86rem;color:var(--muted);margin:0}
.f-news-form{display:flex;flex-wrap:wrap;gap:10px}
.f-news-form input[type=email]{flex:1 1 200px;min-width:0;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line,rgba(255,255,255,.12));background:transparent;color:inherit;font:inherit}
.f-news-form .form-msg{flex-basis:100%;margin:0}
.f-news-form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:720px){.f-news{grid-template-columns:1fr}}

/* =====================================================================
   PROJECT SCROLLER — a full-page screenshot scrolling inside the browser
   frame. object-position moves the picture from its top to its bottom,
   so it works for a page of any length; thrubits.js sets --dur from the
   picture's height so long pages do not race past.
   ===================================================================== */
.chrome.has-shot .chrome-body{padding:0;transform:none!important}
.chrome .scroll-shot{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border:0;
  border-radius:0;box-shadow:none;object-fit:cover;object-position:50% 0;
  transition:object-position var(--dur,8s) linear}
.wcard:hover .scroll-shot,.wcard:focus-within .scroll-shot{object-position:50% 100%}
@keyframes shotScroll{0%,6%{object-position:50% 0}94%,100%{object-position:50% 100%}}
/* Phones have no hover: let the cards scroll by themselves, slowly. */
@media (hover:none){
  .wcard .scroll-shot{animation:shotScroll calc(var(--dur,8s) * 1.6) ease-in-out infinite alternate}
}
/* The project page: a large frame that keeps scrolling, paused on hover. */
.project-shot{margin:0 0 26px;padding:12px 12px 0;border-radius:var(--radius);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 26%,#0A0A14),#08080F)}
.project-shot .chrome{height:auto;aspect-ratio:16/10;border-radius:10px 10px 0 0}
.project-shot .chrome-bar{height:30px}
.project-shot .chrome-bar .url{height:17px;font-size:.66rem}
.chrome.auto .scroll-shot{animation:shotScroll calc(var(--dur,8s) * 1.6) ease-in-out infinite alternate}
.chrome.auto:hover .scroll-shot{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .scroll-shot{transition:none!important;animation:none!important;object-position:50% 0!important}
}

/* =====================================================================
   GET A QUOTE
   ===================================================================== */
.quote-steps{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.quote-steps li{display:flex;gap:12px;align-items:center;color:var(--muted)}
.quote-steps b{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:.85rem;color:#fff;background:var(--brand-purple)}
.form .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.form .grid-2{grid-template-columns:1fr}}
.form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;padding:0}
.nav-links .nav-quote{display:none}
@media (max-width:820px){.nav-links .nav-quote{display:block;font-weight:600;color:var(--link,#4fb3f5)}}

/* =====================================================================
   LIVE MENUS — real Restbits menus on /qr-menu-lebanon
   ===================================================================== */
.live-menus{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;margin:18px 0 8px}
.live-menu{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;text-align:center;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);text-decoration:none;color:var(--ink);transition:.2s}
.live-menu:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.lm-qr{width:104px;height:104px;padding:6px;border-radius:10px;background:#fff;display:block}
.lm-qr svg{width:100%;height:100%;display:block}
.live-menu b{font-size:.92rem;line-height:1.3}
.lm-go{font-size:.78rem;color:var(--link,#4fb3f5);font-family:var(--display)}
@media (hover:none){.lm-qr{display:none}}

/* A phone holding a restaurant's real menu, scrolling on its own. */
.phone{position:relative;display:block;width:118px;aspect-ratio:9/19;border-radius:20px;overflow:hidden;
  border:5px solid #1b1b24;background:#fff;box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}
.phone::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:34px;height:6px;
  border-radius:4px;background:#1b1b24;z-index:2}
.phone .scroll-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  animation:shotScroll calc(var(--dur,8s) * 2.6) ease-in-out infinite alternate}
.live-menu:hover .phone .scroll-shot{animation-play-state:paused}

/* "Read before you decide" on service and package pages */
.related-reading{margin-top:36px}
.related-reading h2{font-size:1.3rem;margin-bottom:14px}
.rr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.rr-card{display:flex;flex-direction:column;gap:7px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:inherit;text-decoration:none;transition:.2s}
.rr-card:hover{border-color:var(--line-strong);background:var(--panel-2);transform:translateY(-2px)}
.rr-card b{font-size:1rem;line-height:1.35}
.rr-card span{font-size:.86rem;color:var(--muted);line-height:1.55}
.rr-card .rr-kind{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}

/* Off-screen sections pause their animations (thrubits.js toggles .is-off).
   Endless scrolling screenshots, diagram pulses and spinning rings kept
   phones repainting the whole time, even far below the fold. */
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}

/* =====================================================================
   PER-ITEM COLOURS (a platform, a project) — set inline as --accent.
   They are all bright, so text ON them is dark, and as text they are
   lightened on the dark theme and darkened on the light one so they stay
   readable on either background.
   ===================================================================== */
[style*="--accent:"]{--on-accent:#0B0D14;--accent-ink:color-mix(in srgb,var(--accent) 78%,#fff)}
html[data-theme="light"] [style*="--accent:"]{--accent-ink:color-mix(in srgb,var(--accent) 58%,#000)}
.qr-meta .qr-chip{color:var(--on-accent)}
.quote span.av,.quote .who span.av{color:#fff}   /* beat .quote .who span (muted) */