/* Cinematic Story base. Replace the token values with the brand; keep the structure.
   Rules baked in: one accent (--brand), --alert only for "problem" moments, motion only on transform/opacity,
   no letter-spacing on Persian/Arabic, everything readable when the story is off (body.no-story). */

/* ---------- tokens ---------- */
:root{
  /* stage = the cinematic block (dark by default; a light stage works if contrast holds) */
  --st-bg:#0B1220; --st-surface:#121B2E; --st-ink:#EEF2F8; --st-ink-2:#AAB6CA; --st-ink-3:#7D8AA2;
  --st-line:rgba(238,242,248,.14); --st-line-2:rgba(238,242,248,.26);
  --brand:#5B8CFF; --brand-ink:#0B1220; --alert:#F2C14E;
  /* content theme */
  --bg:#F5F7FA; --surface:#FFFFFF; --ink:#111827; --ink-2:#3B4658; --ink-3:#5E6B80;
  --line:#DCE2EA; --line-2:#C5CEDA; --accent:#1E3A8A; --accent-ink:#FFFFFF; --accent-text:#1E4FD8;
  --shadow:0 1px 2px rgba(17,24,39,.06),0 14px 36px rgba(17,24,39,.08);
  --r-pill:999px; --r-card:20px; --r-input:12px;
  --maxw:1180px; --gutter:clamp(1rem,4vw,2.5rem); --sp:clamp(4.5rem,9vw,8rem); --nav-h:64px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-ui:180ms; --t-card:280ms; --t-reveal:560ms;
  --z-scene:1; --z-vignette:4; --z-copy:5; --z-hud:6; --z-nav:50; --z-edit:60;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B1220; --surface:#121B2E; --ink:#EEF2F8; --ink-2:#AAB6CA; --ink-3:#8592AA;
  --line:rgba(238,242,248,.14); --line-2:rgba(238,242,248,.26); --accent:#5B8CFF; --accent-ink:#0B1220; --accent-text:#8DB0FF;
}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
html.js{scroll-behavior:auto}
body{font-family:var(--font);background:var(--bg);color:var(--ink-2);line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
h1,h2,h3{color:var(--ink);margin:0;line-height:1.3;text-wrap:balance}
h1{font-size:clamp(2rem,1.1rem + 3.4vw,3.9rem);font-weight:850}
h2{font-size:clamp(1.55rem,1.1rem + 1.8vw,2.5rem);font-weight:800}
h3{font-size:1.15rem;font-weight:800}
p{margin:0}
a{color:var(--accent-text);text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.ltr{direction:ltr;unicode-bidi:isolate}
.ic{width:1.25em;height:1.25em;flex:none;fill:currentColor}
.need{background:#FFF1D6;color:#6E4300;border:1px dashed #D99A2B;border-radius:6px;padding:0 .4em;font-weight:700;font-size:.92em}
.skip{position:fixed;z-index:200;top:8px;inset-inline-start:8px;padding:.6rem 1rem;border-radius:12px;background:var(--brand);color:var(--brand-ink);font-weight:800;transform:translateY(-160%);transition:transform var(--t-ui) var(--ease-out)}
.skip:focus-visible{transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.65rem 1.6rem;border-radius:var(--r-pill);border:1px solid transparent;
  font:800 1rem/1 var(--font);white-space:nowrap;cursor:pointer;transition:transform var(--t-ui) var(--ease-out),background-color var(--t-ui) ease,border-color var(--t-ui) ease}
.btn:active{transform:scale(.97)}
.btn-brand{background:var(--brand);color:var(--brand-ink)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--st-ink);border-color:var(--st-line-2)}
.btn-solid{background:var(--accent);color:var(--accent-ink)}
.btn-sm{min-height:40px;padding:.5rem 1.2rem;font-size:.92rem}

/* ---------- top bar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);height:var(--nav-h);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background-color var(--t-card) ease,border-color var(--t-card) ease}
.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.topbar.ondark{background:color-mix(in srgb,var(--st-bg) 80%,transparent);border-bottom-color:var(--st-line)}
.wm{font-weight:900;font-size:1.25rem;color:var(--ink)}.topbar.ondark .wm{color:var(--st-ink)}
.nav{display:flex;gap:.1rem}
.nav a{padding:.4rem .8rem;border-radius:var(--r-pill);font-size:.9rem;font-weight:700;color:var(--ink-3);white-space:nowrap}
.topbar.ondark .nav a{color:var(--st-ink-2)}
.nav a.on{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.topbar.ondark .nav a.on{color:var(--st-ink);background:rgba(255,255,255,.12)}
@media(max-width:860px){.nav{display:none}}
.progress{position:absolute;inset:auto 0 -1px 0;height:2px}
.progress i{display:block;height:100%;transform-origin:var(--progress-origin,left);transform:scaleX(0);background:var(--brand)}
[dir="rtl"] .progress i{transform-origin:right}

/* ---------- story / stage ---------- */
.story{position:relative;background:var(--st-bg);color:var(--st-ink);--cx:clamp(1.2rem,5vw,4.5rem)}
.js .story{height:var(--len,500svh)}                 /* ~100svh per scene; svh keeps the pin steady on mobile */
.stage{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:var(--st-bg)}
.js .stage{position:sticky;top:0;height:100svh;min-height:0}
.stage::after{content:"";position:absolute;inset:0 0 auto 0;height:140px;z-index:var(--z-vignette);pointer-events:none;
  background:linear-gradient(var(--st-bg) 8%,color-mix(in srgb,var(--st-bg) 70%,transparent) 55%,transparent)}
.scene{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-scene)}   /* one full-bleed visual layer */
.scene.side{inset:auto;top:calc(var(--nav-h) + 28px);bottom:24px;inset-inline-end:0;width:62%}  /* visual beside captions */
.vignette{position:absolute;inset:0;z-index:var(--z-vignette);pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.45) 100%)}
.cam{transform-origin:0 0}

/* hero copy + captions: few words, one idea per scene */
.story-copy,.cap{position:absolute;z-index:var(--z-copy)}
.story-copy{inset-inline-start:var(--cx);top:50%;transform:translateY(-50%);width:min(560px,46vw)}
.story-copy h1{color:var(--st-ink);margin-top:1rem}
.story-copy h1 em{font-style:normal;color:var(--brand)}
.verdict{margin-top:1.1rem;font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:var(--st-ink-2);max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--st-line-2);background:rgba(255,255,255,.06);color:var(--st-ink);border-radius:var(--r-pill);padding:.3rem 1rem;font-weight:800;font-size:.88rem}
.caps{position:absolute;inset:0;z-index:var(--z-copy);pointer-events:none}
.cap{inset-inline-start:var(--cx);top:50%;width:min(420px,36vw);opacity:0;transform:translateY(calc(-50% + 14px)) scale(.985);pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--st-surface) 88%,transparent),color-mix(in srgb,var(--st-bg) 72%,transparent));
  border:1px solid var(--st-line);border-radius:var(--r-card);padding:1.3rem 1.5rem;box-shadow:0 24px 60px rgba(0,0,0,.4);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:opacity var(--t-card) var(--ease-out),transform var(--t-card) var(--ease-out)}
.cap:not(.on){transition-duration:200ms}                                  /* the old scene leaves first ... */
.cap.on{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:180ms}   /* ... then the new one arrives */
.cap>*{opacity:0;transform:translateY(12px);transition:opacity 200ms ease,transform 200ms ease}
.cap.on>*{opacity:1;transform:none;transition:opacity 420ms var(--ease-out),transform 560ms var(--ease-out);transition-delay:240ms}
.cap.on>*:nth-child(2){transition-delay:320ms}.cap.on>*:nth-child(3){transition-delay:400ms}
.cap :is(h2,h3,.cap-t){margin:0;font-weight:800;color:var(--st-ink);font-size:clamp(1.2rem,1rem + .8vw,1.65rem);line-height:1.5}
.cap p{margin-top:.5rem;color:var(--st-ink-2)}
.cap.lead{width:min(480px,40vw)}.cap.lead :is(h2,h3){font-size:clamp(1.45rem,1rem + 1.6vw,2.2rem)}
@supports not (backdrop-filter:blur(1px)){.cap{background:var(--st-surface)}}
@media (prefers-reduced-transparency:reduce){.cap{background:var(--st-surface);backdrop-filter:none}}

/* overlays (screenshots, charts) that pop in for one scene */
.ov{position:absolute;z-index:3;left:50%;top:50%;width:min(94%,560px);opacity:0;pointer-events:none;transform:translate(-50%,calc(-50% + 18px)) scale(.985);
  transition:opacity var(--t-card) var(--ease-out),transform var(--t-card) var(--ease-out)}
.ov.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;transition-delay:120ms}
.frame{margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--st-line-2)}
.frame img{display:block;width:100%;height:auto}

/* step dots (engine adds them) */
.steps{position:absolute;z-index:var(--z-hud);bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none;transition:opacity 280ms ease}
.steps i{display:block;width:6px;height:6px;border-radius:99px;background:var(--st-ink-3);opacity:.5;transition:transform 320ms var(--ease-out),opacity 320ms ease}
.steps i.on{background:var(--brand);opacity:1;transform:scale(1.5)}

@media(max-width:860px),(max-aspect-ratio:21/20){
  .story-copy{inset-inline:1.1rem;top:calc(var(--nav-h) + 22px);transform:none;width:auto}
  .cap,.cap.lead{inset-inline:1rem;top:auto;bottom:2.3rem;width:auto;transform:translateY(14px) scale(.985);padding:1rem 1.2rem}
  .cap.on{transform:none}.cap :is(h2,h3,.cap-t){font-size:1.12rem}.cap p{font-size:.95rem}
  .scene.side{top:calc(var(--nav-h) + 54px);bottom:auto;height:46%;width:100%}
  .steps{bottom:auto;top:calc(var(--nav-h) + 22px)}
}

/* ---------- content sections ---------- */
.sec{padding-block:var(--sp)}
.sec-head{max-width:36ch}
.prose{max-width:68ch;line-height:1.95;font-size:1.05rem}
.prose ul{margin:1.1rem 0 0;padding-inline-start:1.2rem;display:grid;gap:.5rem}
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
.foot{padding-block:2.4rem;border-top:1px solid var(--line)}

/* ---------- demo form ---------- */
.form{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.form>.errsum,.form>.form-ok,.form .btn,.form .form-msg{grid-column:1/-1}
@media(max-width:520px){.form{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem}.field label{font-weight:800;font-size:.92rem;color:var(--ink)}
.field input{font:600 1rem var(--font);min-height:48px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:var(--r-input);padding:.6rem .9rem;width:100%}
.field input[aria-invalid="true"]{border-color:#E5484D}
.field .err{display:none;color:#C2373C;font-size:.85rem;font-weight:700}.field input[aria-invalid="true"]~.err{display:block}
.errsum{display:none;border:1px solid #E5484D;border-radius:var(--r-input);padding:.8rem 1rem}.errsum.on{display:block}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.fields{display:contents}.form-ok{display:none;text-align:center;padding:1.5rem}.form.sent .fields{display:none}.form.sent .form-ok{display:block}
.form-msg{min-height:1.4em;font-size:.9rem}

/* ---------- in-page editor ---------- */
.editbar{position:fixed;bottom:16px;inset-inline-end:16px;z-index:var(--z-edit);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.4rem;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
.editbar button{font:800 .9rem var(--font);border-radius:var(--r-pill);padding:.5rem 1rem;min-height:40px;cursor:pointer;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.editbar button.pri{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.editbar button[hidden]{display:none}.editbar .st{font-size:.82rem;color:var(--ink-3);max-width:30ch}.editbar .st:empty{display:none}
html:not(.can-edit) .editbar{display:none!important}
body.editing #doc :is(h1,h2,h3,p,li,.cap-t,blockquote,summary,label,.badge,.btn):hover{outline:1.5px dashed var(--brand);outline-offset:3px}

/* ---------- static mode: reduced motion, edit mode, no JS — every scene still readable ---------- */
body.no-story .story,html:not(.js) .story{height:auto}
body.no-story .stage,html:not(.js) .stage{position:relative;height:auto;overflow:visible;padding:calc(var(--nav-h) + 32px) var(--cx) 3rem;display:grid;gap:1.4rem}
body.no-story .stage::after,html:not(.js) .stage::after,body.no-story .vignette,html:not(.js) .vignette,body.no-story .steps{display:none}
body.no-story .scene,html:not(.js) .scene{position:relative;inset:auto;width:100%;height:min(62svh,520px);order:2}
body.no-story .story-copy,html:not(.js) .story-copy{position:relative;inset:auto;transform:none!important;opacity:1!important;width:auto;max-width:720px;order:1}
body.no-story .caps,html:not(.js) .caps{position:relative;order:3;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));pointer-events:auto}
body.no-story .cap,html:not(.js) .cap{position:relative;inset:auto;width:auto;opacity:1;transform:none}
body.no-story .cap>*,html:not(.js) .cap>*{opacity:1;transform:none}
body.no-story .ov,html:not(.js) .ov{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}
@media print{.topbar,.editbar{display:none!important}.story{height:auto!important}.stage{position:relative!important;height:auto!important}}

/* DaranX layer for the cinematic engine, shared by every story page: brand tokens, top bar,
   the building world, content sections, footer and the fixed contact bar.
   Per-page scene states are generated inline by site.py from each page's STATES table. */
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn-VF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --font:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --st-bg:#081627; --st-surface:#0E2749; --st-ink:#EEF3F9; --st-ink-2:#B4C8DD; --st-ink-3:#7F97B0;
  --st-line:rgba(238,243,249,.13); --st-line-2:rgba(238,243,249,.26);
  --brand:#7FB0DF; --brand-ink:#081627; --alert:#F2705E;
  --bg:#F3F6FA; --surface:#FFFFFF; --ink:#12233A; --ink-2:#43566E; --ink-3:#5E6E86;
  --line:#DCE4EE; --line-2:#C2D0E0; --accent:#153A62; --accent-ink:#FFFFFF; --accent-text:#326CA4;
  --navy-deep:#0E2749; --steel-soft:#6FA3D2; --on-navy-soft:#AEC4DB; --on-navy-faint:#92A8C0; --r-md:16px;
  --maxw:1160px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#081320; --surface:#0F2338; --ink:#E9F0F8; --ink-2:#A6BACF; --ink-3:#8DA2B9;
  --line:#1E3450; --line-2:#2A4666; --accent:#7FB0DF; --accent-ink:#081627; --accent-text:#8FBDE8;
}}
body{font-size:1rem}

/* top bar: DaranX mark */
.wm{display:inline-flex;align-items:center;gap:.55rem}
.wm .logomark{width:24px;height:30px;flex:none;background:url("../daranx-logo.svg") no-repeat left center;background-size:auto 100%}
.wm b{font-weight:900}.wm b span{color:var(--accent-text)}.topbar.ondark .wm b span{color:var(--brand)}
.topbar .btn-brand{background:var(--accent);color:var(--accent-ink)}
.topbar.ondark .btn-brand{background:var(--brand);color:var(--brand-ink)}
.crumbs{font-size:.86rem;color:var(--st-ink-3);margin-bottom:.2rem}.crumbs a{color:var(--st-ink-2);text-decoration:underline;text-decoration-color:rgba(180,200,221,.45);text-underline-offset:3px}

/* the fixed contact bar sits over the stage: keep step dots and phone captions above it */
.steps{bottom:96px}
@media(max-width:860px),(max-aspect-ratio:21/20){
  .cap,.cap.lead{bottom:calc(7.6rem + env(safe-area-inset-bottom,0px))}
  .story-copy h1{font-size:1.75rem}
  .verdict{font-size:.98rem}
}

/* ---------------- the world ---------------- */
.world{font-family:var(--font)}
.world .sky{fill:var(--st-bg)}
.earth{fill:#050f1c}
.ground{stroke:rgba(238,243,249,.3);stroke-width:2}
.room{fill:rgba(255,255,255,.022);transition:fill .7s var(--ease-out)}
.room-b{fill:rgba(255,255,255,.035)}
.shell{fill:none;stroke:rgba(238,243,249,.32);stroke-width:2.5}
.slab{stroke:rgba(238,243,249,.24);stroke-width:2}
.shaft{fill:rgba(255,255,255,.025);stroke:rgba(238,243,249,.12)}
.lbl{fill:var(--st-ink-2);font-size:22px;font-weight:700;paint-order:stroke;stroke:var(--st-bg);stroke-width:7px;stroke-linejoin:round}
.lbl.flr{font-size:23px;fill:var(--st-ink-2)}
.lbl.sm{font-size:17px;stroke-width:0;fill:var(--st-ink)}
.lbl.alert{fill:var(--alert);font-size:19px}
.ic{fill:var(--st-ink-3)}
.desk .top,.desk .leg,.desk .stand{fill:#2B4868}
.mon{fill:#16304D;stroke:#3A6189;stroke-width:1.5;transition:fill .5s ease,stroke .5s ease}
.ap rect{fill:#2B4868}
.sw rect{fill:#1C3858;stroke:#4E7DAE;stroke-width:1.5}.sw .port{fill:var(--brand);stroke:none;opacity:.8}
.rack>rect{fill:#0B1D33;stroke:#3A6189;stroke-width:2}.unit{fill:#1C3858}.unit.core{fill:#24507D}
.cloud .ic{fill:#5C7EA3}
.cab{fill:none;stroke:#4E6E92;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s ease,opacity .6s ease}
.cab.riser,.cab.uplink{stroke-width:5}
.pk-path{fill:none;stroke:none}
.pk{fill:#fff;stroke:var(--brand);stroke-width:7;stroke-opacity:.4;opacity:0;transition:opacity .3s ease}
@keyframes flow{to{stroke-dashoffset:-36}}
.flow.on,.riser.on,.uplink.on{stroke:var(--brand);stroke-dasharray:4 14;animation:flow 1.1s linear infinite}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.click-ring,.node-ring{fill:none;stroke:var(--brand);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.svc,.svc2,.warn,.hunt,.unk,.ask,.hot,.hot-t,.lane-t,.wifi,.tagc,.shield-box,.shield,.mon-p,.brk,.ok-b,.q{opacity:0;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.svc .ic,.svc2 .ic{fill:var(--brand)}

/* act 2: the unplanned network */
.world .tg{stroke:#58779B;stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:var(--draw,0);opacity:.85}
.world .tg.one{stroke-width:5}
.node rect{fill:#3A2A22;stroke:#E2A35A;stroke-width:2}
.q{fill:#E2A35A}
.warn .ic{fill:var(--alert)}
.hunt .ic{fill:var(--st-ink)}
.unk circle{fill:rgba(242,112,94,.14);stroke:var(--alert);stroke-width:2}.lbl.q-t{fill:var(--alert);font-size:20px;stroke-width:0}

/* act 3: the blueprint */
/* blueprint acts (the method): grid paper behind the world */
.story.bp .stage{background-color:#0A1F38;background-image:linear-gradient(rgba(127,176,223,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,176,223,.07) 1px,transparent 1px);background-size:40px 40px}
.story.bp .sky{fill:transparent}
.story.bp .earth{fill:rgba(5,15,28,.55)}
.ask rect{fill:rgba(127,176,223,.12);stroke:var(--brand);stroke-width:1.5}.ask .ic{fill:var(--brand)}.lbl.ask-t{font-size:17px;fill:var(--st-ink);stroke-width:0}
.hot{fill:rgba(127,176,223,.08);stroke:var(--brand);stroke-width:2;stroke-dasharray:8 8}
.hot-t rect{fill:var(--brand)}.hot-t .lbl{fill:var(--brand-ink)}
.lane{stroke-width:3.5}
.lane-f3{stroke:#9CC7EE}.lane-f2{stroke:#7FB0DF;stroke-dasharray:14 6}.lane-f1{stroke:#5F95C9;stroke-dasharray:3 6}.lane-wifi{stroke:#C9DEF2;stroke-dasharray:10 5 2 5}.lane-new{stroke:#9CC7EE}
.lane-t rect{fill:rgba(8,22,39,.85);stroke:var(--brand);stroke-width:1.5}
.cab.alt{stroke:#B8D4EF;stroke-width:3.5;stroke-dasharray:2 7;opacity:0}
.cab.alt#riser2{stroke-width:5}
.wifi{fill:rgba(127,176,223,.10);stroke:rgba(127,176,223,.45);stroke-width:1.5}
.tagc rect{fill:#E9F2FB}.lbl.tag-t{font-size:12px;fill:#0E2749;stroke-width:0;font-weight:800}
.shield-box{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-dasharray:3 9}
.shield .ic{fill:var(--brand)}
.mon-p polyline{fill:none;stroke:var(--brand);stroke-width:3;stroke-linejoin:round}.mon-p .ic{fill:var(--brand)}

/* act 4: the test */
.brk line{stroke:var(--alert);stroke-width:7;stroke-linecap:round}
.ok-b rect{fill:rgba(8,22,39,.9);stroke:var(--brand);stroke-width:1.5}.ok-b .ic{fill:var(--brand)}
.newf{opacity:0;transform:translateY(-70px);transition:opacity .6s var(--ease-out),transform .9s var(--ease-out)}
.newf .shell.nf{stroke-dasharray:10 8}
.newf .room{fill:rgba(127,176,223,.06)}

/* phones: the caption already names what the fine labels say */
@media(max-aspect-ratio:21/20){
  .lbl.flr{font-size:30px}
  .lbl.sm,.lbl.ask-t{font-size:22px}
  .tagc,.lbl.alert{display:none}
}

/* ---------------- content sections ---------------- */
.sec{background:var(--bg)}
/* every section top is a scroll stop: keep its heading clear of the top bar */
.sec{padding-block:calc(var(--nav-h) + 2.5rem) 1.5rem}
#what{padding-top:calc(var(--nav-h) + var(--sp))}
#contact{padding-bottom:var(--sp)}
.kicker{display:inline-block;font-size:.85rem;font-weight:800;color:var(--accent-text);margin-bottom:.6rem}
.sec h2{margin-bottom:1.1rem}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.6rem;counter-reset:st}
.steps4 li{list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:1.2rem 1.25rem;counter-increment:st}
.steps4 li::before{content:counter(st,persian);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;margin-bottom:.7rem}
.steps4 h3{margin-bottom:.35rem}
.steps4 p{font-size:.95rem}
@media(max-width:860px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps4{grid-template-columns:1fr}}
.faq{display:grid;gap:.7rem;max-width:820px;margin-top:1.2rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem 1.2rem}
.faq summary{cursor:pointer;font-weight:800;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;color:var(--accent-text)}
.faq details[open] summary::after{content:"−"}
.faq .ans{margin-top:.6rem}
.links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.links a{border:1px solid var(--line-2);border-radius:999px;padding:.5rem 1.1rem;font-weight:700;color:var(--ink);background:var(--surface)}
.cta-box{background:var(--navy-deep);color:var(--on-navy-soft);border-radius:26px;padding:clamp(1.6rem,4vw,3rem);display:grid;gap:1rem;justify-items:start}
.cta-box h2{color:#fff;margin:0}
.cta-box .btn-brand{background:#fff;color:#0E2749}
.cta-box .btn-ghost{color:#fff}
.hero-actions .btn-ghost,.cta-box .btn-ghost{background:rgba(255,255,255,.06)}
@media (hover:hover) and (pointer:fine){.links a:hover{border-color:var(--accent-text)}.btn-brand:hover{filter:brightness(1.06)}}
.cap .hero-actions{margin-top:1rem}

/* ---------------- site footer + fixed contact bar (same as every DaranX page) ---------------- */
footer.site{background:var(--navy-deep);color:var(--on-navy-soft);padding-block:3rem calc(5.6rem + env(safe-area-inset-bottom,0px));line-height:1.8}
footer.site .wrap{max-width:var(--maxw)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.25fr 1.2fr;gap:2rem}
address.fc-line{font-style:normal}
.foot-brand .brand{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.3rem;color:#fff;margin-bottom:.9rem}
.foot-brand .logomark{width:28px;height:34px;flex:none;background:url("../daranx-logo.svg") no-repeat left center;background-size:auto 100%}
.foot-brand small{font-weight:600;font-size:.7rem;color:var(--on-navy-faint);text-transform:uppercase;margin-inline-start:.1rem}
.foot-brand p{max-width:34ch;font-size:.95rem;color:var(--on-navy-faint)}
.foot-col h2{color:#fff;font-size:.9rem;margin-bottom:1rem;font-weight:700}
.foot-col a{display:block;color:var(--on-navy-soft);font-size:.94rem;padding:.26rem 0}
.foot-col .fc-line{color:var(--on-navy-soft);font-size:.9rem;padding:.26rem 0;line-height:1.7}
.foot-parent{margin-top:2.2rem;padding:1.15rem 1.3rem;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.04);display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem}
.fp-label{font-size:.78rem;font-weight:800;color:var(--steel-soft);border:1px solid rgba(127,176,223,.45);border-radius:999px;padding:.15rem .75rem;white-space:nowrap}
.fp-main{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 260px}
.fp-main a{color:#fff;font-weight:800;font-size:1.05rem}
.fp-main small{color:var(--on-navy-soft);font-size:.86rem}
.fp-en{color:var(--on-navy-faint);font-size:.84rem;direction:ltr;unicode-bidi:isolate}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.4rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.86rem;color:var(--on-navy-faint)}
@media(max-width:1020px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
@media (hover:hover) and (pointer:fine){.foot-col a:hover,.fp-main a:hover{color:var(--steel-soft)}}
.fbar{position:fixed;z-index:60;inset-inline:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;padding-inline:12px;pointer-events:none}
.fbar-in{pointer-events:auto;display:flex;align-items:center;gap:.6rem 1.15rem;width:min(100%,900px);justify-content:center;flex-wrap:wrap;padding:.6rem;padding-inline:1.4rem .6rem;border-radius:999px;color:#fff;background:rgba(10,24,40,.84);border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 40px rgba(4,12,24,.35);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);line-height:1.5}
.fbar-call{display:flex;align-items:center;gap:.5rem 1.1rem;flex-wrap:wrap;justify-content:center}
.fbar-label{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap}
.fbar-phones{display:inline-flex;gap:1.1rem}
.fbar-phones a{color:#fff;font-weight:800;font-size:1.06rem;white-space:nowrap}
.fbar-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.15rem;border-radius:999px;background:#fff;color:#0c2038;font-weight:800;font-size:.92rem;white-space:nowrap}
.fbar-btn svg{width:18px;height:18px;flex:none}
.fbar-btn:active{transform:scale(.97)}
.fbar-sep{width:1px;align-self:stretch;margin-block:.35rem;background:rgba(255,255,255,.24)}
.fbar-hold{font-size:.92rem;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;padding-inline-end:.4rem}
.fbar-hold a{display:inline-block;padding:.45rem .25rem;margin:-.45rem -.25rem;color:#fff;font-weight:800;text-decoration:underline;text-decoration-color:rgba(127,176,223,.8);text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){.fbar-phones a:hover,.fbar-hold a:hover{color:#9cc4ea}.fbar-btn:hover{background:#eaf2fb}}
@media (max-width:760px){
  .fbar{bottom:0;padding-inline:0}
  .fbar-in{width:100%;border-radius:20px 20px 0 0;border-bottom:0;gap:.35rem .8rem;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom,0px))}
  .fbar-label,.fbar-mob,.fbar-sep{display:none}
  .fbar-call{flex-wrap:nowrap;width:100%;justify-content:space-between}
  .fbar-phones a{font-size:1rem}
  .fbar-btn{padding:.5rem 1rem;font-size:.88rem}
  .fbar-hold{width:100%;text-align:center;font-size:.85rem;padding:0}
  footer.site{padding-bottom:calc(7.5rem + env(safe-area-inset-bottom,0px))}
}
html{scroll-padding-bottom:6.5rem}
@media print{.fbar{display:none}}
/* the light top bar is translucent: over the dark stage (static mode) its links need the stronger ink */
.nav a{color:var(--ink-2)}

/* ---------------- top bar: current section + phone menu ---------------- */
.tb-end{display:flex;align-items:center;gap:.5rem}
.nav a.cur{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.topbar.ondark .nav a.cur{color:var(--st-ink);background:rgba(255,255,255,.12)}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;place-items:center}
.menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.topbar.ondark .menu-btn{color:var(--st-ink);border-color:var(--st-line-2)}
@media(max-width:860px){
  .menu-btn{display:grid}
  .topbar .btn-sm{padding-inline:.9rem}
  .topbar.open .nav{display:flex;flex-direction:column;position:absolute;top:var(--nav-h);inset-inline:0;padding:.6rem var(--gutter) 1rem;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(8,22,39,.18)}
  .topbar.open.ondark .nav{background:var(--st-bg);border-color:var(--st-line)}
  .topbar.open .nav a{padding:.8rem .6rem;font-size:1rem}
}
@media(max-width:350px){.wm b{display:none}}

/* ---------------- shared world parts ---------------- */
.chip rect{fill:rgba(8,22,39,.88);stroke:var(--brand);stroke-width:1.5}
.chip .ic{fill:var(--brand)}
.lbl.chip-t{font-size:17px;fill:var(--st-ink);stroke-width:0}
.chip.alert rect{stroke:var(--alert);fill:rgba(40,12,10,.85)}.chip.alert .ic{fill:var(--alert)}.chip.alert .lbl{fill:#FFD9D3}
.pin .pin-r{fill:rgba(8,22,39,.7);stroke:var(--brand);stroke-width:2.5}.pin .ic{fill:var(--brand)}
.pin.alert .pin-r{stroke:var(--alert);fill:rgba(40,12,10,.7)}.pin.alert .ic{fill:var(--alert)}
.pin.alert .chip rect{stroke:var(--alert)}
.panel{fill:rgba(8,22,39,.88);stroke:var(--brand);stroke-width:1.5}
.bar{fill:var(--brand);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.04);transition:transform .7s var(--ease-out);transition-delay:calc(var(--k,0) * 90ms)}
.dim{opacity:.28}
.lit .ic,.lit.ic{fill:var(--brand)}
.alert-ic{fill:var(--alert)}
.box{fill:#16304D;stroke:#3A6189;stroke-width:1.5}
.box.on{fill:#24507D;stroke:var(--brand)}
.wire{fill:none;stroke:#4E6E92;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s ease,opacity .6s ease}
.zone{fill:rgba(127,176,223,.08);stroke:var(--brand);stroke-width:2;stroke-dasharray:8 8}
.cone{fill:rgba(127,176,223,.16);stroke:rgba(127,176,223,.55);stroke-width:1.5}
.blind{fill:rgba(242,112,94,.16);stroke:var(--alert);stroke-width:2;stroke-dasharray:6 6}
.ray{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.fx{opacity:0;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}

/* ---------------- sub-services and outcomes ---------------- */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1rem;margin-top:1.4rem}
.part{display:flex;flex-direction:column;gap:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:1.25rem 1.3rem;color:var(--ink-2);transition:border-color .2s ease,transform .2s var(--ease-out)}
.part h3{color:var(--ink)}
.part .go{margin-top:auto;padding-top:.6rem;font-weight:800;color:var(--accent-text);font-size:.92rem}
.part:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.part:hover{border-color:var(--accent-text)}}
.why{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.8rem}
.why li{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem 1.15rem;font-weight:700;color:var(--ink)}
.why li::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent-text);margin-inline-end:.6rem;vertical-align:middle}

/* ---------------- infrastructure parts ---------------- */
.srack .rk,.host .rk,.ups .rk,.disks .rk,.bkp .rk,.gen .rk{fill:#0B1D33;stroke:#3A6189;stroke-width:2}
.srack .unit{fill:#24507D;transition:fill .5s ease,opacity .5s ease}
.srack .unit.idle{fill:#16304D}
.led{fill:var(--brand);opacity:.9}
.led.idle{fill:#3A6189;opacity:.6}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
.story[data-sc] .led:not(.idle){animation:blink 1.2s ease-in-out infinite;animation-delay:calc(var(--k,0) * -.3s)}
.host .rk{fill:#0F2744;stroke:var(--brand)}
.vm .ic{fill:var(--brand)}
.vm{transition:opacity .45s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--k,0) * 70ms)}
.g-all{fill:rgba(127,176,223,.08);stroke:var(--brand);stroke-width:2;stroke-dasharray:6 6}
.g-used{fill:var(--brand);transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(var(--t,1))}
.arw{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.brk line{stroke:var(--alert);stroke-width:7;stroke-linecap:round}
.ripple circle{fill:none;stroke:var(--alert);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes rip{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.2);opacity:0}}
.bat{fill:none;stroke:var(--st-ink-2);stroke-width:2}
.bat-in{fill:var(--brand);transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(var(--t,1))}
.disk{fill:#24507D;stroke:#3A6189;stroke-width:1;transition:fill .4s ease}
.disk.bad{transition-delay:0s}
.hot-srv{fill:var(--alert)}

/* ---------------- security parts ---------------- */
.who .ic{fill:#AEC4DB}
.who.bad .ic{fill:var(--alert)}
.who.ok .ic{fill:#7FD1A8}
.door .dr{fill:#2B4868;stroke:#6E89A6;stroke-width:1.5;transition:fill .4s ease,transform .5s var(--ease-out);transform-box:fill-box;transform-origin:50% 0}
.door.open .dr{fill:var(--alert)}
.door .rd{fill:#0B1D33;stroke:#6E89A6;stroke-width:1.5}.door .rd-led{fill:#6E89A6}
.door.locked .rd-led{fill:var(--brand)}
.fw .rk{fill:#0F2744;stroke:var(--brand);stroke-width:2}.fw .ic{fill:var(--brand)}
.logp .panel{fill:rgba(8,22,39,.92)}
.lrow rect{fill:rgba(127,176,223,.10);stroke:rgba(127,176,223,.35)}
.lrow.alert rect{fill:rgba(242,112,94,.14);stroke:var(--alert)}
.lbl.lrow-t{font-size:14px;fill:var(--st-ink-2);stroke-width:0}
.lrow{opacity:0;transition:opacity .4s var(--ease-out);transition-delay:calc(var(--k,0) * 160ms)}
.story[data-sc] .logp.on .lrow,body.no-story .lrow,html:not(.js) .lrow{opacity:1}
.zone-l{fill:none;stroke:var(--brand);stroke-width:2;stroke-dasharray:8 8}
.acc{fill:none;stroke:#7FB0DF;stroke-width:2.5;opacity:.7}
.acc.bad{stroke:var(--alert)}

/* ---------------- intelligence parts ---------------- */
.silo-b{fill:none;stroke:#6E89A6;stroke-width:2;stroke-dasharray:6 6}
.sheet{fill:#E9F2FB;stroke:#9DB6CF;stroke-width:1;opacity:0;transform:translateY(-16px);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);transition-delay:calc(var(--k,0) * 80ms)}
.dash .kpi{fill:rgba(127,176,223,.12);stroke:rgba(127,176,223,.4)}.dash .kpi-v{fill:var(--brand)}
.step .rk,.model .rk,.dbx .rk{fill:#0F2744;stroke:var(--brand);stroke-width:2}
.step .ic,.model .ic,.dbx .ic{fill:var(--brand)}
.step.bad .rk{stroke:var(--alert)}.step.bad .ic{fill:var(--alert)}
.step.who .rk{stroke:#7FD1A8}.step.who .ic{fill:#7FD1A8}
@keyframes spin{to{transform:rotate(360deg)}}
.loop .ic{fill:#E2A35A}
.loop .spin{transform-origin:0 0}
.story[data-sc] .loop .spin{animation:spin 2.6s linear infinite}
.proc{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.proc.bad{stroke:#E2A35A;stroke-width:3}
.pk.bad{stroke:var(--alert);fill:#FFD9D3}
.chip.hype rect{stroke-dasharray:5 5;fill:rgba(8,22,39,.6)}

/* ---------------- sales landing pages ---------------- */
.lp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
.lp-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:1.4rem 1.4rem 1.2rem}
.lp-card h3{margin:.6rem 0 .5rem}
.lp-card ul{margin:0;padding-inline-start:1.1rem;display:grid;gap:.35rem}
.lp-ic{width:40px;height:40px;fill:var(--accent-text)}
.lp-gear{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.lp-gear li{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:.5rem 1.1rem;font-weight:700;color:var(--ink)}
.lp-note{margin-top:1.2rem;font-weight:700}
.lp-note a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.lp-cards{grid-template-columns:1fr}}

/* ---------------- homepage: venture, contact form, map ---------------- */
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.venture-box{background:var(--navy-deep);color:var(--on-navy-soft);border-radius:26px;padding:clamp(1.6rem,4vw,2.8rem)}
.venture-box h2{color:#fff;margin:.2rem 0 .8rem}
.venture-box .kicker{color:var(--steel-soft)}
.venture-box ul{margin:1rem 0 0;padding-inline-start:1.2rem;display:grid;gap:.3rem;color:#fff}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.contact-info p{margin-top:.4rem}
.ci-list{margin:1.4rem 0 0;display:grid;gap:.9rem}
.ci-list div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.9rem 1.1rem}
.ci-list dt{font-size:.85rem;font-weight:800;color:var(--accent-text)}
.ci-list dd{margin:.2rem 0 0;color:var(--ink);font-weight:700}
.ci-list a{color:var(--ink)}
.contact-form{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(1.2rem,3vw,2rem)}
.contact-form h3{font-size:1.25rem}
.contact-form>p{margin-top:.4rem}
.cform{display:grid;gap:.9rem;margin-top:1.2rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.cf-field{display:grid;gap:.35rem}
.cf-field label{font-weight:700;color:var(--ink);font-size:.95rem}
.cf-field .req{color:#C0392B}.cf-field .opt{font-weight:500;color:var(--ink-3);font-size:.85rem}
.cf-field input,.cf-field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:.7rem .9rem;min-height:48px;width:100%;box-sizing:border-box}
.cf-field textarea{resize:vertical;min-height:120px}
.cf-field input:focus-visible,.cf-field textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:1px;border-color:var(--accent-text)}
.cform{position:relative}
.cf-hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.cf-status{border-radius:12px;padding:.7rem 1rem;font-weight:700}
.cf-status.ok{background:#E3F6EC;color:#14532D}.cf-status.err{background:#FDECEA;color:#8A1F11}
.cf-note{font-size:.85rem;color:var(--ink-3)}
.map-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:end}
.map-head p{margin-top:.3rem}
.map{height:min(60svh,440px);border-radius:22px;border:1px solid var(--line);margin-top:1.2rem;z-index:0}
.map-hint{font-size:.85rem;color:var(--ink-3);margin-top:.6rem}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:560px){.cf-row{grid-template-columns:1fr}}