/* =========================================================================
   ITHAR DIGITAL — brand system
   Light theme. Binary world (0 / 1).
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  /* ink */
  --ink-900:#060A14;
  --ink-800:#0E1626;
  --ink-700:#1B2437;
  --ink-500:#4A5670;
  --ink-400:#6B7690;
  --ink-300:#98A2B8;
  --ink-200:#C6CEDD;

  /* surfaces */
  --bg:#FFFFFF;
  --bg-soft:#F5F8FD;
  --bg-tint:#EDF2FE;
  --line:#E5EAF3;
  --line-soft:#EFF3F9;

  /* brand — 1 = electric blue, 0 = teal */
  --one:#1554F0;
  --one-600:#0F45CF;
  --one-100:#E3ECFF;
  --zero:#00BFA5;
  --zero-100:#DBF7F2;
  --pulse:#6D3BF5;
  --pulse-100:#EDE6FF;

  --grad:linear-gradient(135deg,#1554F0 0%,#4A3BF5 55%,#6D3BF5 100%);
  --grad-soft:linear-gradient(135deg,#EDF2FE 0%,#F3EEFF 100%);

  --danger:#DC2B47;
  --ok:#0E9F6E;

  /* type */
  --font-display:"Space Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* space & shape */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(6,10,20,.05), 0 2px 8px rgba(6,10,20,.04);
  --shadow-md:0 2px 6px rgba(6,10,20,.05), 0 14px 34px -12px rgba(6,10,20,.13);
  --shadow-lg:0 4px 12px rgba(6,10,20,.06), 0 32px 64px -24px rgba(21,84,240,.28);
  --wrap:1180px;
  --ease:cubic-bezier(.22,.85,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-700);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink-900);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0 0 .5em;
  font-weight:700;
}
p{margin:0 0 1em}
a{color:var(--one); text-decoration:none}
/* ol included: the process steps are an <ol>, and its default "1. 2. 3."
   markers collide with the binary 00/01/10/11 badges. Both lists carry
   role="list" so removing the marker does not cost list semantics in Safari. */
ul,ol{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}

:focus-visible{outline:2.5px solid var(--one); outline-offset:3px; border-radius:6px}

/* Hidden by sliding it UP, never by left:-9999px: in an RTL document, overflow
   on the left is scrollable, so the old offset gave /catalog?lang=ar a
   10,000px horizontal scrollbar. */
.skip-link{
  position:absolute; inset-inline-start:0; top:0; z-index:200; transform:translateY(-120%);
  background:var(--ink-900); color:#fff; padding:12px 18px; border-end-end-radius:10px;
}
.skip-link:focus{transform:none}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.wrap--narrow{max-width:820px}

.zero{color:var(--zero)}
.one{color:var(--one)}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.nav.is-stuck{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(6,10,20,.4)}
.nav__inner{display:flex; align-items:center; gap:24px; height:72px}

/* flex:none throughout — without it the nav overflows on a narrow phone and the
   logo mark is the first thing the flex algorithm shrinks away to nothing. */
.brand{display:inline-flex; align-items:center; gap:11px; color:var(--ink-900); flex:none}
.brand__mark{display:grid; place-items:center; flex:none; filter:drop-shadow(0 6px 14px rgba(21,84,240,.28))}
.brand__mark svg{width:34px; height:34px}
.brand__text{
  font-family:var(--font-display); font-weight:700; font-size:1.14rem;
  letter-spacing:-.03em; white-space:nowrap;
}
.brand__thin{color:var(--ink-400); font-weight:500; margin-left:.28em}

.nav__links{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav__links a{
  color:var(--ink-500); font-size:.94rem; font-weight:500;
  padding:9px 14px; border-radius:var(--r-pill);
  transition:color .2s, background .2s;
}
.nav__links a:hover{color:var(--ink-900); background:var(--bg-soft)}

.nav__actions{display:flex; align-items:center; gap:10px; flex:none; margin-left:auto}
/* Mobile-menu CTA; revealed under 560px. Both rules are scoped to
   `.nav__links a.…` on purpose:
   - `.nav__links a` (0,1,1) outspecifies `.btn--solid` (0,1,0), so the label
     would otherwise inherit the muted link colour — :hover included.
   - `.btn` sets display:inline-flex at equal specificity but LATER in this
     file, so a bare `.nav__cta-sm{display:none}` loses on source order and the
     button leaks into the desktop bar. */
.nav__links a.nav__cta-sm{display:none}
.nav__links a.nav__cta-sm,
.nav__links a.nav__cta-sm:hover{color:#fff; background:var(--grad)}

.nav__burger{
  display:none; width:42px; height:42px; border:1px solid var(--line);
  background:#fff; border-radius:12px; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:4.5px; padding:0;
}
.nav__burger span{display:block; width:17px; height:2px; background:var(--ink-800); border-radius:2px; transition:transform .3s var(--ease), opacity .2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:.94rem; letter-spacing:-.01em;
  padding:11px 20px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn--lg{padding:15px 30px; font-size:1rem}
.btn--block{width:100%}

.btn--solid{background:var(--grad); color:#fff; box-shadow:0 8px 22px -10px rgba(21,84,240,.65)}
.btn--solid:hover{transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(21,84,240,.7)}
.btn--solid:active{transform:translateY(0)}

.btn--line{background:#fff; color:var(--ink-900); border-color:var(--line); box-shadow:var(--shadow-sm)}
.btn--line:hover{border-color:var(--ink-200); transform:translateY(-2px); box-shadow:var(--shadow-md)}

.btn--ghost{background:transparent; color:var(--ink-700)}
.btn--ghost:hover{background:var(--bg-soft); color:var(--ink-900)}

.btn__bin{
  font-family:var(--font-mono); font-size:.72rem; opacity:.6;
  border:1px solid rgba(255,255,255,.35); border-radius:5px; padding:1px 5px; letter-spacing:.06em;
}
.btn__spin{display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
.btn.is-loading{pointer-events:none; opacity:.85}
.btn.is-loading .btn__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.link-arrow{font-weight:600; font-family:var(--font-display); display:inline-flex; align-items:center; gap:7px}
.link-arrow span{transition:transform .25s var(--ease)}
.link-arrow:hover span{transform:translateX(5px)}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vw,116px) 0 0;
  background:
    radial-gradient(900px 460px at 78% -8%, var(--pulse-100) 0%, transparent 62%),
    radial-gradient(760px 420px at 12% 4%, var(--one-100) 0%, transparent 60%),
    #fff;
}
.hero__rain{position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none}
.hero__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 32%, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse 75% 60% at 50% 32%, #000 25%, transparent 78%);
  opacity:.7;
}
.hero__glow{
  position:absolute; left:50%; top:-180px; width:760px; height:420px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(21,84,240,.13), transparent 72%);
  filter:blur(12px); pointer-events:none;
}
.hero__inner{position:relative; z-index:2; text-align:center; padding-bottom:clamp(56px,7vw,86px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-500); background:rgba(255,255,255,.75); border:1px solid var(--line);
  padding:8px 16px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px); margin-bottom:28px;
}
.eyebrow__sep{color:var(--ink-200)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--zero); box-shadow:0 0 0 3px var(--zero-100); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.hero__title{
  font-size:clamp(2.9rem,8.4vw,5.6rem);
  letter-spacing:-.045em; line-height:1.02; margin-bottom:.4em;
}
.hero__title .zero,.hero__title .one{
  position:relative; display:inline-block;
}
.hero__title .one{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__sub{
  max-width:720px; margin:0 auto 38px;
  font-size:clamp(1.02rem,1.9vw,1.2rem); color:var(--ink-500); line-height:1.7;
}
.hero__sub strong{color:var(--ink-800); font-weight:600}

.hero__cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:52px}

.hero__trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.hero__trust li{
  font-size:.88rem; color:var(--ink-500);
  background:rgba(255,255,255,.8); border:1px solid var(--line);
  padding:9px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px);
}
.hero__trust b{font-family:var(--font-display); color:var(--ink-900); font-weight:700; margin-right:5px}

/* ticker */
.ticker{
  position:relative; z-index:2; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.6); padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{display:flex; align-items:center; gap:26px; width:max-content; animation:slide 46s linear infinite}
.ticker__track span{font-family:var(--font-display); font-weight:600; font-size:.94rem; color:var(--ink-400); white-space:nowrap}
.ticker__track i{font-family:var(--font-mono); font-size:.76rem; color:var(--one); opacity:.45; font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* =========================================================================
   SECTION SCAFFOLD
   ========================================================================= */
.section{padding:clamp(72px,9vw,120px) 0; position:relative}
.section--soft{background:var(--bg-soft); border-block:1px solid var(--line-soft)}

.sec-head{max-width:700px; margin-bottom:clamp(40px,5vw,60px)}
.sec-num{
  display:inline-block; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.24em;
  color:var(--one); background:var(--one-100); padding:5px 12px; border-radius:6px; margin-bottom:18px;
}
.sec-title{font-size:clamp(1.85rem,4.2vw,2.85rem); margin-bottom:.45em}
.sec-lead{font-size:clamp(1rem,1.6vw,1.1rem); color:var(--ink-500); margin:0}

/* =========================================================================
   SERVICE CARDS
   ========================================================================= */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:20px}

.card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 28px 26px; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--grad-soft); opacity:0; transition:opacity .35s;
}
.card > *{position:relative; z-index:1}
.card:hover{transform:translateY(-5px); border-color:transparent; box-shadow:var(--shadow-lg)}
.card:hover::after{opacity:.55}

.card__bin{
  position:absolute; top:18px; right:20px; z-index:2;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--ink-200); transition:color .3s;
}
.card:hover .card__bin{color:var(--one)}

.card__icon{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--one-100); color:var(--one); margin-bottom:20px;
  transition:background .35s, color .35s, transform .35s var(--ease);
}
.card__icon svg{width:24px; height:24px}
.card:hover .card__icon{background:var(--grad); color:#fff; transform:scale(1.06) rotate(-3deg)}

.card h3{font-size:1.28rem; margin-bottom:.5em}
.card p{color:var(--ink-500); font-size:.96rem; margin-bottom:18px}

.card--accent{border-color:var(--one-100); background:linear-gradient(180deg,#fff,#FBFCFF)}
.card--accent .card__icon{background:var(--pulse-100); color:var(--pulse)}

.chips{display:flex; flex-wrap:wrap; gap:7px}
.chips li{
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-400);
  background:var(--bg-soft); border:1px solid var(--line);
  padding:4px 10px; border-radius:var(--r-pill);
}
.card:hover .chips li{background:rgba(255,255,255,.75)}

/* =========================================================================
   PROCESS STEPS
   ========================================================================= */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:20px; counter-reset:s}
.step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px 24px; transition:transform .3s var(--ease), box-shadow .3s;
}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.step__bit{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px;
  font-family:var(--font-mono); font-weight:600; font-size:1rem;
  background:var(--ink-900); color:#fff; margin-bottom:18px; letter-spacing:.04em;
}
.step:nth-child(2) .step__bit{background:var(--one)}
.step:nth-child(3) .step__bit{background:var(--pulse)}
.step:nth-child(4) .step__bit{background:var(--zero)}
.step h3{font-size:1.16rem; margin-bottom:.45em}
.step p{color:var(--ink-500); font-size:.94rem; margin-bottom:14px}
.step__meta{
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-300);
  border-top:1px dashed var(--line); padding-top:12px; display:block;
}

/* =========================================================================
   MARKETS
   ========================================================================= */
.markets{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px}
.market{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.market::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease);
}
.market:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-soft)}
.market:hover::before{transform:scaleY(1)}
/* Country codes, not flag emoji. Windows has never shipped regional-indicator
   flag glyphs, so an emoji flag falls back to a bare "SA" / "GB" letter pair
   there while macOS and iOS show a real flag — the same page looking broken on
   half the visitors. A deliberate mono code chip renders identically on every
   platform and suits the binary brand better. */
.market__code{
  display:inline-grid; place-items:center; min-width:52px; height:38px; padding:0 12px;
  font-family:var(--font-mono); font-weight:600; font-size:1rem; letter-spacing:.1em;
  color:var(--one); background:var(--one-100); border-radius:11px;
  margin-bottom:18px; transition:background .35s, color .35s;
}
.market:hover .market__code{background:var(--grad); color:#fff}
.market h3{font-size:1.2rem; margin-bottom:.45em}
.market p{color:var(--ink-500); font-size:.94rem; margin-bottom:16px}
.market__lang{
  font-family:var(--font-mono); font-size:.73rem; letter-spacing:.12em;
  color:var(--one); background:var(--one-100); padding:4px 10px; border-radius:6px;
}
.market--cta{background:var(--grad-soft); border-color:transparent; display:flex; flex-direction:column; justify-content:center}

/* =========================================================================
   WHY / WHAT YOU GET
   ========================================================================= */
.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:20px; margin-bottom:clamp(48px,6vw,72px)}
.why__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.why__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.why__bin{
  font-family:var(--font-mono); font-size:2.4rem; font-weight:600; line-height:1;
  display:block; margin-bottom:16px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.why__item:nth-child(even) .why__bin{background:linear-gradient(135deg,var(--zero),#00A9DE); -webkit-background-clip:text; background-clip:text}
.why__item h3{font-size:1.14rem; margin-bottom:.45em}
.why__item p{color:var(--ink-500); font-size:.94rem; margin:0}

.cta-band{
  background:var(--ink-900); color:#fff; border-radius:var(--r-xl);
  padding:clamp(32px,5vw,52px); display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.cta-band::before{
  content:"01001001 01110100 01101000 01100001 01110010 00100000 01000100 01101001 01100111 01101001 01110100 01100001 01101100";
  position:absolute; inset:0; padding:18px; font-family:var(--font-mono); font-size:.8rem;
  color:rgba(255,255,255,.05); word-break:break-all; line-height:1.9; pointer-events:none;
}
.cta-band > *{position:relative; z-index:1}
.cta-band h3{color:#fff; font-size:clamp(1.3rem,2.6vw,1.75rem); margin-bottom:.35em}
.cta-band p{color:rgba(255,255,255,.66); margin:0; max-width:52ch}
.cta-band .btn--solid{background:#fff; color:var(--ink-900); box-shadow:none}
.cta-band .btn--solid:hover{box-shadow:0 14px 30px -12px rgba(255,255,255,.45)}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{display:grid; gap:12px}
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.faq__item[open]{border-color:var(--one-100); box-shadow:var(--shadow-md)}
.faq__item summary{
  cursor:pointer; list-style:none; padding:20px 56px 20px 24px; position:relative;
  font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:var(--ink-900);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:""; position:absolute; right:24px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--ink-300); border-bottom:2px solid var(--ink-300);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease), border-color .3s;
}
.faq__item[open] summary::after{transform:translateY(-20%) rotate(-135deg); border-color:var(--one)}
.faq__item summary:hover{background:var(--bg-soft)}
.faq__body{padding:0 24px 22px}
.faq__body p{color:var(--ink-500); font-size:.96rem; margin:0}

/* =========================================================================
   CONTACT
   ========================================================================= */
.section--contact{
  background:
    radial-gradient(760px 420px at 88% 12%, var(--pulse-100) 0%, transparent 62%),
    radial-gradient(700px 400px at 4% 88%, var(--one-100) 0%, transparent 60%),
    var(--bg-soft);
  border-top:1px solid var(--line-soft);
}
.contact{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:start}
.contact__aside{position:sticky; top:104px}
.contact__points{display:grid; gap:12px; margin:26px 0 32px}
.contact__points li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:.96rem; color:var(--ink-600,var(--ink-500));
}
.contact__points li span{
  font-family:var(--font-mono); font-size:.72rem; color:var(--one);
  background:#fff; border:1px solid var(--one-100); border-radius:6px;
  padding:3px 7px; flex:none; margin-top:2px;
}
.contact__direct{border-top:1px solid var(--line); padding-top:22px}
.contact__direct-label{font-size:.88rem; color:var(--ink-400); margin-bottom:6px}

/* form */
.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(26px,3.6vw,40px); box-shadow:var(--shadow-md);
}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{margin-bottom:18px; display:flex; flex-direction:column}
.field label{
  font-family:var(--font-display); font-weight:600; font-size:.87rem;
  color:var(--ink-800); margin-bottom:7px;
}
.req{color:var(--one)}
.opt{font-weight:400; color:var(--ink-300); font-size:.8rem; font-family:var(--font-body)}

.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg-soft); font-size:.96rem; color:var(--ink-900);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field textarea{resize:vertical; min-height:120px; line-height:1.6}
.field select{
  appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2398A2B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-300)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff; border-color:var(--one); box-shadow:0 0 0 4px var(--one-100);
}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:var(--danger); background:#FFF6F7;
}
.err{display:none; color:var(--danger); font-size:.8rem; margin-top:6px; font-weight:500}
.field.is-invalid .err,.err.is-shown{display:block}

/* Honeypot: clipped in place rather than pushed off-screen (see .skip-link). */
.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; opacity:0; pointer-events:none}

.check{display:flex; align-items:flex-start; gap:11px; margin:6px 0 22px; cursor:pointer; font-size:.9rem; color:var(--ink-500)}
.check input{
  appearance:none; width:19px; height:19px; flex:none; margin-top:2px;
  border:1.5px solid var(--ink-200); border-radius:6px; background:#fff; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.check input:checked{background:var(--one) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; border-color:var(--one)}

.form__status{margin:16px 0 0; font-size:.92rem; font-weight:500; text-align:center; min-height:1.2em}
.form__status.is-ok{color:var(--ok)}
.form__status.is-err{color:var(--danger)}

.form.is-sent{text-align:center}

/* success panel injected by JS */
.sent{
  text-align:center; padding:24px 8px;
}
.sent__mark{
  width:66px; height:66px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; background:var(--zero-100); color:var(--zero);
  animation:pop .45s var(--ease) both;
}
.sent__mark svg{width:30px; height:30px}
@keyframes pop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}
.sent h3{font-size:1.4rem; margin-bottom:.5em}
.sent p{color:var(--ink-500); max-width:44ch; margin:0 auto 20px}
.sent code{font-family:var(--font-mono); font-size:.8rem; color:var(--one); background:var(--one-100); padding:3px 8px; border-radius:6px}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{background:var(--ink-900); color:rgba(255,255,255,.6); padding:clamp(52px,7vw,80px) 0 0}
.footer__inner{
  display:grid; grid-template-columns:2.1fr 1fr 1fr 1fr; gap:40px 28px;
  padding-bottom:48px;
}
.footer .brand{color:#fff; margin-bottom:18px}
.footer .brand__thin{color:rgba(255,255,255,.45)}
.footer__brand p{font-size:.94rem; max-width:38ch; margin-bottom:16px}
.footer__bin{font-family:var(--font-mono); font-size:.72rem; color:rgba(255,255,255,.16); letter-spacing:.06em; margin:0}

.footer__col{display:flex; flex-direction:column; gap:10px}
.footer__col h4{color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:6px; font-weight:600}
.footer__col a{color:rgba(255,255,255,.58); font-size:.92rem; transition:color .2s}
.footer__col a:hover{color:#fff}

.footer__base{
  border-top:1px solid rgba(255,255,255,.09); padding-block:22px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.footer__base p{margin:0; font-size:.86rem}
.footer__tag{font-family:var(--font-display); font-weight:600}
.footer__tag .one{color:#5B86FF}

/* =========================================================================
   REVEAL
   ========================================================================= */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:980px){
  .contact{grid-template-columns:1fr}
  .contact__aside{position:static}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}

@media (max-width:820px){
  .nav__hide-sm{display:none}
  .nav__burger{display:flex}
  .nav__inner{gap:12px}
  .nav__links{
    position:fixed; inset:72px 0 auto; margin:0;
    flex-direction:column; align-items:stretch; gap:2px;
    /* opaque, not translucent: at .97 + backdrop-filter the hero still bled
       through enough to make the menu hard to read */
    background:#fff;
    border-bottom:1px solid var(--line); padding:14px 20px 22px;
    box-shadow:0 22px 40px -24px rgba(6,10,20,.4);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav__links.is-open{transform:none; opacity:1; visibility:visible}
  .nav__links a{padding:13px 14px; font-size:1rem}

  /* the header CTA loses its binary chip so the bar stops overflowing */
  .nav__actions .btn__bin{display:none}
  .nav__actions .btn--solid{padding:10px 16px; font-size:.9rem}
}

/* Under ~560px the header CTA and the burger cannot both fit beside the logo,
   so the CTA moves into the menu instead of pushing the burger off-screen. */
@media (max-width:560px){
  .nav__actions .btn--solid{display:none}
  .nav__links a.nav__cta-sm{display:flex; margin-top:12px; justify-content:center}
}

@media (max-width:640px){
  html{scroll-padding-top:80px}
  .hero__trust li{font-size:.82rem; padding:7px 14px}
  .hero__cta .btn{width:100%}
  .form__row{grid-template-columns:1fr; gap:0}
  .cta-band{flex-direction:column; align-items:flex-start}
  .cta-band .btn{width:100%}
  .footer__inner{grid-template-columns:1fr; gap:32px}
  .footer__base{justify-content:center; text-align:center}
}

/* 360px-wide Androids are common in KSA and RU. The hero headline was sized
   with a 2.9rem floor, which overflows there — drop the floor below 400px. */
@media (max-width:400px){
  .wrap{padding-inline:18px}
  .hero__title{font-size:clamp(2.25rem,11vw,2.9rem)}
  .eyebrow{font-size:.68rem; padding:7px 12px; gap:7px}
  .sec-title{font-size:clamp(1.6rem,7vw,1.85rem)}
  .form{padding:22px 18px}
}

/* =========================================================================
   MOTION PREFERENCES
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .hero__rain{display:none}
}

/* ---------- print ---------- */
@media print{
  .nav,.ticker,.hero__rain,.hero__grid,.hero__glow,.footer,.form{display:none}
  body{color:#000}
}