/* =====================================================================
   Tecorva landing — shared stylesheet for / (Arabic, RTL) and /en/ (English, LTR)
   Saudi editorial redesign (2026-09-14). Identity from brand/README:
   · navy #0b2650 and the gold family #d3a25b → #be8d4d → #a8793d, sampled from
     the official artwork — never approximated;
   · gold is a FILL on light grounds; every gold WORD on a light ground is
     #805718 (6.37:1). On navy the light gold carries words (6.7:1);
   · the official marks only: reversed lockup on dark, primary on light;
   · Arabic headings keep letter-spacing 0 — negative tracking breaks joins;
   · real product screenshots only — no invented dashboards.
   Directional rules use logical properties so one sheet serves both scripts;
   the few that cannot are overridden at the end under html[dir="ltr"].
   url() paths are relative to THIS file (assets/).
   ===================================================================== */
:root{
  --navy:#0b2650; --navy-900:#071a38; --navy-800:#0f2f5d; --navy-700:#1a3d70;
  --gold:#be8d4d; --gold-hi:#d3a25b; --gold-lo:#a8793d; --gold-text:#805718;
  --sand:#f5f1e8; --sand-2:#ede6d8; --paper:#fff; --line:#dcd4c4; --line-dark:rgba(255,255,255,.16);
  --ink:#0b2650; --muted:#4d5968; --on-dark:#eef2f8; --on-dark-2:#b9c6d9;
  --grad-gold:linear-gradient(135deg,#d3a25b,#be8d4d 55%,#a8793d);
  --navh:78px; --r:6px; --r-lg:14px;
  --f-body:Alexandria,'Segoe UI',Tahoma,sans-serif;
  --f-head:'Noto Kufi Arabic',Alexandria,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:0;margin:0}
/* balance: no heading ends on a lone short word («برامج.» / «يوم.» on phones) */
h1,h2{font-family:var(--f-head);font-weight:700;text-wrap:balance}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px;border-radius:3px}
.on-dark :focus-visible{outline-color:var(--gold-hi)}
[id]{scroll-margin-top:calc(var(--navh) + 12px)}
.wrap{width:min(1240px,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.skip{position:absolute;top:-999px;inset-inline-start:12px;background:#fff;color:var(--navy);padding:10px 16px;border-radius:var(--r);z-index:100;font-weight:600}
.skip:focus{top:12px}
.label{display:inline-block;font-size:13px;font-weight:700;color:var(--gold-text)}
.on-dark .label{color:var(--gold-hi)}
.lead{color:var(--muted);font-size:16px;line-height:2}
.on-dark .lead{color:var(--on-dark-2)}
.sec{padding-block:clamp(72px,9vw,120px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(30px,3.6vw,54px);line-height:1.45;margin-top:10px}
.sec-head .lead{max-width:420px;margin:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r);font-family:var(--f-body);font-size:15px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:background .2s,transform .2s,border-color .2s,color .2s}
.btn .ar{font-size:18px;line-height:1}
.btn-gold{background:var(--grad-gold);color:var(--navy-900)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-line{border-color:var(--gold-lo);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--sand-2)}
.btn[disabled]{opacity:.65;cursor:progress}
.tlink{color:var(--gold-text);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.on-dark .tlink{color:var(--gold-hi)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--navh);transition:background .25s,box-shadow .25s}
/* Over the hero the bar is transparent, so whatever frame of the clip (or poster) is
   underneath decides the links' contrast. A short navy fade behind the bar keeps them
   readable on every frame; it disappears once the paper bar shows. (The nav is a
   stacking context, so z-index:-1 sits behind its links but above the page.) */
.nav::before{content:"";position:absolute;inset:0 0 -28px;background:linear-gradient(180deg,rgba(7,26,56,.78),rgba(7,26,56,.45) 60%,rgba(7,26,56,0));pointer-events:none;z-index:-1;transition:opacity .25s}
.nav.scr::before{opacity:0}
.nav .wrap{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:#fff;flex-shrink:0}
.brand .mk{width:44px;height:auto}
.brand .mk-pri{display:none}
.navlinks{display:flex;gap:26px;margin-inline-start:auto;font-size:14px;font-weight:600}
.navlinks a{color:rgba(255,255,255,.82);transition:color .2s}
.navlinks a:hover{color:var(--gold-hi)}
.nav .cta{min-height:42px;padding:9px 18px;font-size:14px}
/* language switch: a real link to the other page (hreflang), never a script toggle */
.nav .lang{display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:44px;padding:4px 10px;border:1px solid rgba(255,255,255,.4);border-radius:var(--r);font-size:13px;font-weight:700;color:#fff;transition:border-color .2s,color .2s}
.nav .lang:hover{border-color:var(--gold-hi);color:var(--gold-hi)}
.nav.scr{background:rgba(245,241,232,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav.scr .brand{color:var(--navy)}
.nav.scr .mk-rev{display:none}
.nav.scr .mk-pri{display:block}
.nav.scr .navlinks a{color:var(--muted)}
.nav.scr .navlinks a:hover{color:var(--gold-text)}
.nav.scr .lang{color:var(--navy);border-color:var(--line)}
.nav.scr .lang:hover{color:var(--gold-text);border-color:var(--gold-lo)}
.mbtn{display:none;margin-inline-start:auto;width:44px;height:44px;border-radius:var(--r);border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;align-items:center;justify-content:center}
.mbtn span,.mbtn span::before,.mbtn span::after{display:block;width:20px;height:2px;background:currentColor;position:relative;border-radius:2px}
.mbtn span::before,.mbtn span::after{content:"";position:absolute;inset-inline-start:0}
.mbtn span::before{top:-6px}.mbtn span::after{top:6px}
.nav.scr .mbtn{color:var(--navy);border-color:var(--line)}
.mnav{display:none;position:fixed;top:var(--navh);inset-inline:0;z-index:49;background:var(--sand);border-bottom:1px solid var(--line);padding:8px 20px 20px;box-shadow:0 18px 30px rgba(7,26,56,.12)}
.mnav.open{display:block}
.mnav a{display:block;padding:14px 4px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:16px;width:100%;border:0}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 520px at 18% 30%,rgba(190,141,77,.16),transparent 65%),radial-gradient(700px 480px at 85% 110%,rgba(26,61,112,.9),transparent 70%),linear-gradient(160deg,var(--navy-800),var(--navy-900) 70%);color:#fff;min-height:min(880px,100vh);display:flex;align-items:flex-end;padding:calc(var(--navh) + 70px) 0 72px}
/* Hero media: a real construction clip (building frame at sunset) under a navy veil.
   The poster IS the picture on phones, with reduced motion and on Save-Data — the clip
   is only added by script on wide screens. The veil is darkest behind the text (right,
   RTL), the transparent nav (top) and the facts (bottom); the building shows on the left.
   The English page mirrors the whole layer (end of file) so the building stays opposite
   the text. */
.hero .hero-media{position:absolute;inset:0;background:var(--navy-900) url(hero/site-sunset.jpg) center/cover no-repeat;pointer-events:none}
.hero .hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero .hero-media video.on{opacity:1}
.hero .hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,26,56,.88) 0,rgba(7,26,56,0) 24%),
  linear-gradient(0deg,rgba(7,26,56,.92) 0,rgba(7,26,56,0) 42%),
  linear-gradient(270deg,rgba(7,26,56,.94) 0,rgba(7,26,56,.84) 45%,rgba(7,26,56,.5) 100%)}
/* phones: the poster shows in the open band above the headline (building frame kept in
   view), then the veil closes before the text starts */
@media(max-width:880px){
  .hero .hero-media{background-image:url(hero/site-sunset-800.jpg);background-position:18% 30%}
  .hero .hero-media::after{background:linear-gradient(180deg,rgba(7,26,56,.5) 0,rgba(7,26,56,.55) 12%,rgba(7,26,56,.9) 30%,rgba(7,26,56,.96) 100%)}
}
/* One column: the facts sit on their own row at the far end, as in the concept.
   Sharing the row with the headline squeezed it and broke «واربح» onto a line of its own. */
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.hero .hero-facts{justify-self:end}
.goldline{width:64px;height:2px;background:var(--grad-gold);margin-bottom:22px}
.eyebrow{font-size:14px;font-weight:600;color:var(--gold-hi)}
.hero h1{font-size:clamp(40px,5.6vw,84px);line-height:1.38;margin:16px 0 22px;max-width:860px}
.hero h1 strong{color:var(--gold-hi);font-weight:700}
.hero .lead{color:var(--on-dark-2);max-width:560px;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-alt{margin-top:16px;font-size:14px;color:var(--on-dark-2)}
.hero-facts{display:flex;gap:36px;border-inline-start:1px solid rgba(255,255,255,.28);padding-inline-start:28px;padding-bottom:6px}
.hero-facts b{display:block;font-size:30px;line-height:1.2;color:var(--gold-hi);font-weight:700}
.hero-facts span{font-size:13px;color:var(--on-dark-2)}

/* ---------- trust strip ---------- */
.trust{background:var(--paper);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:22px;font-size:14px;color:var(--muted)}
.seals{display:flex;flex-wrap:wrap;gap:12px 26px;font-weight:700;color:var(--ink)}
.seals span{display:inline-flex;align-items:center;gap:8px}
.seals span::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sand-2);color:var(--gold-text);font-size:13px}

/* ---------- intro ---------- */
.intro .wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(40px,10vw,140px);align-items:start}
.intro h2{font-size:clamp(30px,3.6vw,54px);line-height:1.45;margin-top:10px}
.intro .lead{margin:0}
.pillars{margin-top:40px;border-top:1px solid var(--line)}
.pillar{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.pillar b{font-size:14px;color:var(--gold-text);padding-top:3px}
.pillar h3{font-size:17px;font-weight:700}
.pillar p{margin:4px 0 0;font-size:15px;color:var(--muted);line-height:1.8}

/* ---------- product ---------- */
.product{background:var(--navy-900);color:#fff}
.product .sec-head h2{color:#fff}
.shotframe{padding:10px;border-radius:var(--r-lg);background:linear-gradient(135deg,#d3a25b,#1a3d70 38%,#be8d4d);box-shadow:0 40px 80px rgba(2,8,23,.55)}
.window{background:#fff;border-radius:9px;overflow:hidden}
.window .bar{display:flex;align-items:center;gap:7px;height:34px;padding-inline:14px;background:#eef1f5;border-bottom:1px solid #dde3ea}
.window .bar i{width:10px;height:10px;border-radius:50%;background:#c9d1db}
.window .bar i:first-child{background:var(--gold)}
.window .bar em{margin-inline-start:auto;font-style:normal;font-size:12px;color:#5b6778}
.product .main{margin-top:52px}
.shots2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
.shotcard{background:var(--navy-800);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden}
.shotcard .window{border-radius:0}
.shotcard figcaption,.product .main figcaption{padding:16px 18px;font-size:14px;color:var(--on-dark-2)}
.shotcard figcaption b,.product .main figcaption b{color:#fff;display:block;font-size:16px;margin-bottom:2px}
.product .main figcaption{padding-inline:4px}
figure{margin:0}
.realnote{margin-top:26px;font-size:14px;color:var(--on-dark-2)}
.realnote::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold-hi);margin-inline-end:10px;vertical-align:middle}

/* ---------- activities ---------- */
.acts{background:var(--sand-2)}
.actgrid{margin-top:48px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.actcol{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px}
.actcol h3{font-size:16px;font-weight:700;padding-bottom:12px;margin-bottom:10px;border-bottom:2px solid var(--gold)}
.actcol h3 small{display:block;font-size:13px;font-weight:600;color:var(--gold-text)}
.actcol ul{list-style:none;margin:0;padding:0}
.actcol li{font-size:14px;color:var(--muted);padding:6px 0;line-height:1.6}
.actnote{margin-top:26px;font-size:14px;color:var(--muted)}

/* ---------- flow ---------- */
.flow-grid{margin-top:56px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;position:relative;list-style:none;padding:0}
.flow-grid::before{content:"";position:absolute;top:28px;inset-inline:8%;border-top:1px dashed var(--gold-lo)}
.flow-item{position:relative}
.flow-item .num{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:var(--sand);border:1px solid var(--gold-lo);display:grid;place-items:center;color:var(--gold-text);font-size:15px;font-weight:700}
.flow-item:last-child .num{background:var(--grad-gold);color:var(--navy-900);border-color:var(--gold)}
.flow-item h3{font-size:17px;font-weight:700;margin:18px 0 6px}
.flow-item p{margin:0;font-size:14px;line-height:1.8;color:var(--muted);max-width:190px}

/* ---------- privacy ---------- */
.privacy{background:var(--navy);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.privacy-copy{padding:clamp(72px,9vw,116px) clamp(20px,6vw,90px)}
.privacy-copy h2{font-size:clamp(30px,3.8vw,56px);line-height:1.5;margin:12px 0 16px}
.privacy-list{margin-top:30px;list-style:none;padding:0}
.privacy-list li{border-top:1px solid var(--line-dark);padding:14px 0;font-size:15px;color:var(--on-dark)}
.privacy-list li::before{content:"✓";color:var(--gold-hi);margin-inline-end:12px}
.privacy-visual{position:relative;overflow:hidden;background:radial-gradient(520px 380px at 40% 40%,rgba(211,162,91,.18),transparent 70%),linear-gradient(200deg,var(--navy-700),var(--navy-900));display:flex;align-items:center;justify-content:center;padding:56px 32px;min-height:520px}
.privacy-visual .wm{position:absolute;width:78%;opacity:.05;pointer-events:none;user-select:none}
.privacy-card{position:relative;background:var(--sand);color:var(--ink);padding:28px 28px 24px;width:min(360px,100%);box-shadow:14px 14px 0 var(--gold);border-radius:4px}
.privacy-card b{display:block;font-family:var(--f-head);font-size:40px;line-height:1.3}
.privacy-card p{margin:6px 0 16px;font-size:15px;color:var(--muted);line-height:1.8}
.privacy-card .reach{border-top:1px solid var(--line);padding-top:14px;font-size:14px;color:var(--muted)}
.privacy-card .reach strong{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}

/* ---------- trial ---------- */
.trial .card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:16px 16px 0 var(--sand-2);overflow:hidden}
.trial .formside{padding:clamp(28px,4vw,52px)}
.trial h2{font-size:clamp(28px,3vw,44px);line-height:1.5;margin:10px 0 8px}
.leadform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:26px}
.f label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.f input{width:100%;min-height:50px;border:1px solid var(--line);border-radius:var(--r);background:var(--sand);padding:10px 14px;font-family:var(--f-body);font-size:15px;color:var(--ink)}
.f input:focus{outline:2px solid var(--gold-text);outline-offset:1px;background:#fff}
.leadform .btn{grid-column:1/-1;margin-top:4px}
.leadmsg{margin-top:14px;font-size:15px;line-height:1.9}
.leadmsg.err{color:#8f2a1a}
.leadmsg.ok{color:#1d5b33}
.leadmsg .btn{margin-top:12px;display:flex;width:fit-content}
.leadmsg a:not(.btn){color:var(--gold-text);font-weight:600;text-decoration:underline;margin-inline-start:6px}
.assure{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:14px;color:var(--muted)}
.assure span::before{content:"✓";color:var(--gold-text);margin-inline-end:8px;font-weight:700}
.quick{background:var(--navy);color:#fff;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.quick h3{font-size:18px;font-weight:700;margin-bottom:6px}
.qlink{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line-dark);border-radius:var(--r);transition:background .2s,border-color .2s}
.qlink:hover{background:rgba(255,255,255,.07);border-color:var(--gold-hi)}
.qlink .qi{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:rgba(211,162,91,.16);color:var(--gold-hi);font-weight:700}
.qlink b{display:block;font-size:15px}
.qlink span{font-size:13px;color:var(--on-dark-2)}

/* ---------- pricing ---------- */
.pricing{text-align:center}
.pricing h2{font-size:clamp(30px,3.8vw,54px);line-height:1.45;margin:10px 0 10px}
/* Equal cards: the row stretches every card to the tallest, the feature list
   (flex:1) absorbs the difference, so all three buttons share one baseline.
   Measured before: 652 / 593 / 557px tall, buttons at three different heights. */
.plans{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:start;align-items:stretch}
.plan{padding:32px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);display:flex;flex-direction:column}
/* Lifted by extending UP (negative top margin + the same extra padding), not by
   translateY: a transform moved the whole card — button included — 14px above
   its neighbours. Now tag, name and price line up across all three cards and
   the bottoms (buttons) stay level. */
.plan.featured{background:var(--navy);color:#fff;border-color:var(--navy);margin-top:-14px;padding-top:46px;box-shadow:0 24px 48px rgba(11,38,80,.22)}
.plan .tag{font-size:13px;font-weight:700;color:var(--gold-text)}
.plan.featured .tag{color:var(--gold-hi)}
.plan h3{font-size:22px;font-weight:700;margin:10px 0 4px}
.plan .blurb{font-size:14px;color:var(--muted);margin:0 0 16px;min-height:52px}
.plan.featured .blurb{color:var(--on-dark-2)}
.price{font-size:38px;font-weight:700;line-height:1.2}
.price small{font-size:14px;font-weight:500}
.annual{font-size:13px;color:var(--muted);margin-top:4px}
.plan.featured .annual{color:var(--on-dark-2)}
.plan ul{list-style:none;padding:18px 0;margin:18px 0;border-block:1px solid var(--line);flex:1}
.plan.featured ul{border-color:var(--line-dark)}
.plan li{font-size:14px;padding:7px 0;color:var(--muted);display:flex;gap:10px;line-height:1.6}
.plan.featured li{color:var(--on-dark)}
.plan li::before{content:"✓";color:var(--gold-text);font-weight:700}
.plan.featured li::before{color:var(--gold-hi)}
.plan .btn{width:100%}
.plan.featured .btn-line{border-color:var(--gold-hi);color:#fff}
.plan.featured .btn-line:hover{background:rgba(255,255,255,.08)}
.plannote{margin-top:34px;font-size:14px;color:var(--muted);line-height:2}
.fn{font-size:13px;color:var(--muted)}

/* ---------- faq ---------- */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(32px,8vw,120px)}
.faq h2{font-size:clamp(30px,3.4vw,50px);line-height:1.45;margin:10px 0 12px}
.q{border-bottom:1px solid var(--line)}
.q:first-child{border-top:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px;font-weight:700}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--gold-lo);display:grid;place-items:center;color:var(--gold-text);font-size:18px;transition:transform .2s}
.q[open] summary::after{transform:rotate(45deg)}
.q p{margin:0 0 20px;color:var(--muted);font-size:15px;line-height:2}

/* ---------- contact ---------- */
.contact{padding-top:0}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.ccard{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r-lg);padding:26px 24px}
.ccard h3{font-size:18px;font-weight:700}
.ccard p{margin:8px 0 14px;font-size:15px;color:var(--muted)}

/* ---------- footer ---------- */
footer{background:var(--navy-900);color:#fff}
.closer{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-block:clamp(72px,8vw,100px);border-bottom:1px solid var(--line-dark)}
.closer h2{font-size:clamp(34px,4.8vw,66px);line-height:1.4;margin:12px 0}
.closer p{color:var(--on-dark-2);margin:0}
.closer .acts2{display:flex;gap:12px;flex-wrap:wrap}
.fcols{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:52px}
.fcols .brand{color:#fff}
.fcols p{color:var(--on-dark-2);font-size:14px;max-width:300px;margin:14px 0 0}
.fcols h4{font-size:15px;margin:0 0 12px;color:var(--gold-hi)}
.fcols a:not(.brand){display:block;font-size:14px;color:var(--on-dark-2);padding:5px 0}
.fcols a:not(.brand):hover{color:#fff}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--line-dark);padding-block:22px;font-size:13px;color:var(--on-dark-2)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .navlinks{display:none}.mbtn{display:inline-flex}.nav .cta{display:none}
  /* links hidden: the language switch takes the free space, the menu button follows it */
  .nav .lang{margin-inline-start:auto}
  .nav .lang + .cta + .mbtn,.nav .lang ~ .mbtn{margin-inline-start:0}
  /* three price cards under ~340px each wrap every feature line — stack them */
  .plans{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
  .plan.featured{margin-top:0;padding-top:32px}
  .plan .blurb{min-height:0}   /* the 2-line reserve only aligns prices ACROSS a row */
  .actgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .hero{min-height:auto;padding-bottom:56px}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-facts{border-inline-start:0;padding-inline-start:0;border-top:1px solid rgba(255,255,255,.22);padding-top:22px;gap:24px;flex-wrap:wrap}
  .intro .wrap,.faq .wrap{grid-template-columns:minmax(0,1fr)}
  .privacy{grid-template-columns:minmax(0,1fr)}
  .privacy-visual{min-height:420px}
  .trial .card{grid-template-columns:minmax(0,1fr)}
  .cgrid{grid-template-columns:minmax(0,1fr)}
  .shots2{grid-template-columns:minmax(0,1fr)}
  .flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .flow-grid::before{display:none}
}
@media(max-width:600px){
  body{font-size:15px}
  .actgrid{grid-template-columns:minmax(0,1fr)}
  .leadform{grid-template-columns:minmax(0,1fr)}
  .fcols{grid-template-columns:minmax(0,1fr)}
  .hero-actions .btn{flex:1 1 100%}
  .brand span{font-size:17px}
}

/* ---------- English (LTR) ----------
   Latin needs tighter leading than Arabic (whose tall ascenders and dots set the
   1.4–1.5 heading rhythm above), a Latin display face, and a mirrored hero so the
   building in the clip stays on the side opposite the text. */
html[lang="en"]{--f-head:Alexandria,'Segoe UI',Tahoma,sans-serif}
html[lang="en"] body{line-height:1.7}
html[lang="en"] h1{line-height:1.08;letter-spacing:-.02em}
html[lang="en"] h2{line-height:1.15;letter-spacing:-.015em}
html[lang="en"] .lead{line-height:1.75}
html[lang="en"] .q p{line-height:1.8}
/* Latin runs wider than the Arabic setting: the 860px measure broke «deliver with
   clarity, profit» onto a fourth line at 1440, so English uses the full column */
html[lang="en"] .hero h1{font-size:clamp(38px,4.8vw,72px);margin:18px 0 26px;max-width:none}
html[lang="en"] .privacy-card b{line-height:1.15}
html[dir="ltr"] .hero .hero-media{transform:scaleX(-1)}