/* DGAIQ landing, 2026-11 refresh: simpler, larger type, Arabic-first headings, no heavy black frames. */

/* ---------- type ---------- */
#landing{font-size:18px}
#landing .fhero h1{font-size:clamp(46px,6.4vw,84px);line-height:1;letter-spacing:-.045em;margin:0 0 22px}
#landing .fhero h1 .grad{display:block}
#landing .fh2{font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.04em}
#landing .flead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:52ch}
#landing .feye{font-size:13px;letter-spacing:.14em}
:root[lang="ar"] #landing{font-size:18.5px}
:root[lang="ar"] #landing .fhero h1{font-size:clamp(42px,5.6vw,76px);line-height:1.25;font-weight:700;letter-spacing:0}
:root[lang="ar"] #landing .fh2{font-size:clamp(30px,4vw,52px);line-height:1.35;font-weight:700;letter-spacing:0}
:root[lang="ar"] #landing .flead{line-height:1.9;font-size:clamp(17px,1.5vw,20px)}
:root[lang="ar"] #landing .feye{letter-spacing:0;text-transform:none;font-size:14.5px;font-weight:600}
:root[lang="ar"] #landing h3{line-height:1.5}
:root[lang="ar"] #landing p{line-height:1.85}

/* ---------- hero: Duval triangle ---------- */
#landing .fhero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;padding-top:70px;padding-bottom:30px}
.dh{margin:0}
.dh-card{background:var(--f-glass);border:1px solid var(--f-glass-b);backdrop-filter:blur(16px);border-radius:28px;padding:26px 26px 18px;box-shadow:0 24px 60px rgba(60,40,120,.12)}
.dh-tri svg{max-width:420px!important}
.dh-pt{transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.dh-dot{fill:#111114;stroke:#fff;stroke-width:3}
.dh-ring{fill:none;stroke:#111114;stroke-width:2;opacity:.55;transform-origin:0 0;animation:dhpulse 1.6s ease-out infinite}
@keyframes dhpulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.dh-cap{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-top:16px;background:#fff;border:1px solid var(--f-line);border-radius:18px;padding:14px 16px;color:#111114}
.dh-cap.in{animation:dhin .45s ease-out}
@keyframes dhin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dh-zone{font:700 15px var(--f-mono);background:#f2f2f6;border-radius:12px;padding:10px 12px;direction:ltr}
.dh-cap b{display:block;font-size:18px}
.dh-cap p{margin:2px 0 0;color:#55555f;font-size:15px;line-height:1.5}
.dh-steps{display:flex;justify-content:center;gap:8px;margin-top:14px;direction:ltr}
.dh-steps button{border:1px solid var(--f-line);background:transparent;border-radius:999px;padding:5px 12px;font:600 12.5px var(--f-mono);color:var(--f-muted);cursor:pointer}
.dh-steps button.on{background:#111114;color:#fff;border-color:#111114}
:root[data-theme="dark"] .dh-cap{background:rgba(255,255,255,.06);color:var(--f-ink)}
:root[data-theme="dark"] .dh-cap p{color:var(--f-muted)}
:root[data-theme="dark"] .dh-zone{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .dh-steps button.on{background:#fff;color:#111114;border-color:#fff}
@media (prefers-reduced-motion:reduce){.dh-pt{transition:none}.dh-ring{animation:none}.dh-cap.in{animation:none}}

/* verdict pills (shared by hero and meaning cards) */
.mv{display:inline-block;border-radius:999px;padding:5px 12px;font:700 13px var(--f-sans);white-space:nowrap}
.mv.v0{background:#e3f5eb;color:#167244}.mv.v1{background:#fdf3d6;color:#8a6400}.mv.v2{background:#fde9d6;color:#a5520b}.mv.v3{background:#fde3e1;color:#b3261e}

/* ---------- standards marquee ---------- */
.fmarq{margin:34px 0 0;overflow:hidden;border-block:1px solid var(--f-line);padding:16px 0;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fmarq-in{display:flex;gap:26px;width:max-content;align-items:center;animation:marq 38s linear infinite}
.fmarq span{font:700 clamp(18px,2vw,24px) var(--f-sans);letter-spacing:-.02em;color:var(--f-ink);white-space:nowrap;opacity:.82}
.fmarq i{font-style:normal;font-size:12px;background:var(--f-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fmarq:hover .fmarq-in{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.fmarq-in{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ---------- numbers to meaning ---------- */
#landing .ffeat{padding-top:110px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.mcard{background:var(--f-glass);border:1px solid var(--f-glass-b);backdrop-filter:blur(16px);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;box-shadow:0 10px 30px rgba(20,20,40,.05)}
.mread{display:flex;align-items:baseline;gap:8px;direction:ltr}
.mgas{font:600 15px var(--f-mono);background:#111114;color:#fff;border-radius:9px;padding:4px 9px;align-self:center}
:root[data-theme="dark"] .mgas{background:#fff;color:#111114}
.mread b{font:800 44px/1 var(--f-sans);letter-spacing:-.03em}
.mread small{color:var(--f-muted);font-size:15px}
.mmean{margin:0;font-size:18px;line-height:1.6;color:var(--f-ink);flex:1}
@media (max-width:860px){.mgrid{grid-template-columns:1fr}}

/* ---------- before/after: light frame instead of the black device frame ---------- */
#landing .cmp{background:var(--f-glass);border:1px solid var(--f-line);padding:8px;box-shadow:0 24px 60px rgba(60,40,120,.1)}
#landing .cmp-after,#landing .cmp-before{inset:8px}
#landing .cmp-handle{top:8px;bottom:8px;left:calc(8px + (100% - 16px) * var(--pn));background:#111114}
#landing .cmp-handle span{background:#111114;color:#fff}

/* ---------- how it works: the one dark section ---------- */
.fhow-dark{margin:120px 12px 0;background:#111114;color:#fff;border-radius:36px;padding:96px 0 84px;position:relative;overflow:hidden}
.fhow-dark::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 70%);top:-220px;inset-inline-end:-120px;pointer-events:none}
.fhow-dark .fh2{color:#fff;max-width:20ch;margin-inline:auto}
.fhow-dark .feye{color:rgba(255,255,255,.6)}
.dsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.dstep{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:24px;padding:28px}
.dn{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--f-grad);font:800 18px var(--f-sans)}
.dstep h3{color:#fff;font:700 22px var(--f-sans);margin:18px 0 8px;letter-spacing:-.02em}
:root[lang="ar"] .dstep h3{letter-spacing:0}
.dstep p{margin:0;color:rgba(255,255,255,.72);font-size:16.5px}
.dnote{text-align:center;color:rgba(255,255,255,.6);font-size:15px;margin:34px 0 0}
@media (max-width:860px){.dsteps{grid-template-columns:1fr}.fhow-dark{padding:70px 0 60px;border-radius:28px}}
:root[data-theme="dark"] .fhow-dark{background:#1b1b24;border:1px solid rgba(255,255,255,.08)}

#landing .fanat{padding-top:120px}
@media (max-width:900px){#landing .fhero{grid-template-columns:1fr;padding-top:40px}.dh-card{padding:18px}}