/* =========================================================
   مكسب — dark editorial identity
   ground  : #04070E void, #0A1120 elevated
   accent  : gold #E6A800 → #F0C040, cold counter-light #2E6BB8
   type    : Tajawal 900 display / IBM Plex Sans Arabic body
   idea    : light in the dark — every section is lit, not filled
   ========================================================= */

:root{
  --void:#020D1F;
  --ink:#04142E;
  --elev:#0A1D38;
  --elev-2:#0F2748;

  --gold:#E6A800;
  --gold-hi:#F0C040;
  --gold-lo:#9C7300;
  --blue:#0070C0;
  --lav:#5AA9E6;

  --txt:#FFFFFF;
  --txt-2:#9CA3AF;
  --txt-3:#6B7A93;

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.05);
  --glass:rgba(255,255,255,.035);

  --pad:clamp(20px,5vw,88px);
  --maxw:1320px;

  --fd:"Alexandria","Segoe UI",system-ui,sans-serif;
  --fb:"Almarai","Alexandria",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; background:var(--void)}

.mk{
  direction:rtl; text-align:right;
  background:var(--void); color:var(--txt);
  font-family:var(--fb); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:clip;
  --nx:50%; --ny:0%;
}
.mk h1,.mk h2,.mk h3,.mk h4{font-family:var(--fd); margin:0; line-height:1.16; letter-spacing:-.025em; text-wrap:balance; color:var(--txt)}
.mk p{margin:0}
.mk ul{margin:0; padding:0; list-style:none}
.mk a{color:inherit; text-decoration:none}
.mk img{display:block; max-width:100%}
.mk :focus-visible{outline:2px solid var(--gold-hi); outline-offset:4px; border-radius:6px}

/* film grain over the entire page */
.mk::after{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27/%3E%3C/filter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.5%27/%3E%3C/svg%3E");
  background-size:160px 160px; opacity:.30; mix-blend-mode:overlay;
}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.sec{position:relative; padding-block:clamp(80px,11vw,160px)}

/* ---------- shared type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.75rem; font-weight:600; letter-spacing:.22em;
  color:var(--gold); margin-bottom:26px; text-transform:none;
}
.eyebrow::before{content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
.h2{font-size:clamp(2.1rem,5.2vw,4rem); font-weight:900}
.lede{color:var(--txt-2); font-size:clamp(1rem,1.4vw,1.125rem); line-height:1.95; max-width:58ch}
.grad{background:linear-gradient(105deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-lo) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- buttons ---------- */
.mk .btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--fd); font-weight:700; font-size:1rem; padding:17px 34px;
  border-radius:100px; border:1px solid transparent; cursor:pointer; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.mk .btn-gold{color:#04142E; background:linear-gradient(120deg,var(--gold-hi),var(--gold) 60%,#D19700);
  box-shadow:0 10px 34px -10px rgba(230,168,0,.75), inset 0 1px 0 rgba(255,255,255,.45)}
.mk .btn-gold:hover{transform:translateY(-3px); box-shadow:0 18px 46px -12px rgba(230,168,0,.9), inset 0 1px 0 rgba(255,255,255,.6)}
.mk .btn-line{color:var(--txt); background:var(--glass); border-color:var(--line);
  backdrop-filter:blur(8px)}
.mk .btn-line:hover{transform:translateY(-3px); border-color:rgba(230,168,0,.55); color:var(--gold-hi)}
.mk .btn-sm{padding:12px 24px; font-size:.9375rem}

/* ================= NAV ================= */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:800;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(2,13,31,.72); backdrop-filter:blur(18px) saturate(1.6); border-bottom-color:var(--line-2)}
.nav-in{display:flex; align-items:center; gap:30px; height:82px}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--fd); font-weight:900; font-size:1.5rem; letter-spacing:-.03em}
.logo-m{
  width:40px; height:40px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  color:#04142E; font-size:1.15rem; font-weight:900;
  box-shadow:0 6px 22px -6px rgba(230,168,0,.7);
}
.nav-links{display:flex; gap:2px; margin-inline-start:auto}
.nav-links a{
  position:relative; font-size:.9375rem; font-weight:500; color:var(--txt-2);
  padding:10px 17px; border-radius:100px; transition:color .3s var(--ease);
}
.nav-links a::before{
  content:""; position:absolute; inset:0; border-radius:100px; background:var(--glass);
  opacity:0; transform:scale(.85); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.nav-links a:hover{color:var(--txt)}
.nav-links a:hover::before{opacity:1; transform:scale(1)}
.nav-links a.on{color:var(--gold-hi)}
.nav-burger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  background:var(--glass); color:var(--txt); cursor:pointer; place-items:center}

/* ================= HERO ================= */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding-block:150px 90px; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-3; overflow:hidden}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.9}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,var(--void) 2%,rgba(2,13,31,.55) 42%,rgba(2,13,31,.35) 100%),
             linear-gradient(to left,var(--void) 0%,transparent 55%);
}
#field{position:absolute; inset:0; z-index:-2; width:100%; height:100%; opacity:.55}
/* cursor spotlight */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(340px 340px at var(--nx) var(--ny), rgba(230,168,0,.13), transparent 70%);
  transition:opacity .6s var(--ease);
}

.hero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,80px); align-items:center; width:100%}

.tag{
  display:inline-flex; align-items:center; gap:11px; padding:8px 8px 8px 18px;
  border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px); font-size:.8125rem; color:var(--txt-2); margin-bottom:34px;
}
.tag b{font-family:var(--fd); font-weight:800; font-size:.75rem; color:#04142E;
  background:linear-gradient(120deg,var(--gold-hi),var(--gold)); padding:4px 13px; border-radius:100px}
.tag i{font-style:normal; width:6px; height:6px; border-radius:50%; background:#3FCF8E;
  box-shadow:0 0 0 0 rgba(63,207,142,.6); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(63,207,142,0)}100%{box-shadow:0 0 0 0 rgba(63,207,142,0)}}

.hero h1{font-size:clamp(2.7rem,6vw,5.2rem); font-weight:900; line-height:1.06; letter-spacing:-.045em; margin-bottom:30px}
.hero h1 .l{display:block; overflow:hidden}
.hero h1 .l span{display:block; transform:translateY(105%); animation:rise 1.05s var(--ease) forwards}
.hero h1 .l:nth-child(2) span{animation-delay:.13s}
@keyframes rise{to{transform:translateY(0)}}

.hero .lede{margin-bottom:42px; font-size:clamp(1.02rem,1.5vw,1.2rem)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px}

.hero-kpis{display:flex; gap:clamp(24px,4vw,56px); flex-wrap:wrap; padding-top:34px; border-top:1px solid var(--line-2)}
.kpi b{display:block; font-family:var(--fd); font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:900;
  letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(150deg,var(--gold-hi),var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.kpi span{font-size:.8125rem; color:var(--txt-3); letter-spacing:.04em}

/* floating glass console */
.console{
  position:relative; border-radius:26px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); background:rgba(6,24,52,.55); backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  animation:float 9s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.console-bg{position:absolute; inset:0; z-index:-1; opacity:.55}
.console-bg img{width:100%; height:100%; object-fit:cover}
.console-hd{display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line-2)}
.dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16)}
.dot.g{background:var(--gold)}
.console-hd span{margin-inline-start:auto; font-size:.75rem; color:var(--txt-3); letter-spacing:.1em}
.console-b{padding:24px}
.console-b h4{font-size:.875rem; font-weight:600; color:var(--txt-2); margin-bottom:4px}
.console-val{display:flex; align-items:baseline; gap:12px; margin-bottom:20px}
.console-val b{font-family:var(--fd); font-size:2.9rem; font-weight:900; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(150deg,#fff,var(--gold-hi));-webkit-background-clip:text;background-clip:text;color:transparent}
.chip{font-size:.75rem; font-weight:700; color:#3FCF8E; background:rgba(63,207,142,.12);
  border:1px solid rgba(63,207,142,.24); padding:5px 11px; border-radius:100px}
.bars{display:flex; align-items:flex-end; gap:9px; height:132px; margin-bottom:22px}
.bars i{flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(to top,rgba(230,168,0,.18),rgba(230,168,0,.62));
  transform-origin:bottom; transform:scaleY(0); animation:grow .9s var(--ease) forwards}
.bars i:last-child{background:linear-gradient(to top,var(--gold-lo),var(--gold-hi));
  box-shadow:0 0 22px -3px rgba(230,168,0,.75)}
@keyframes grow{to{transform:scaleY(1)}}
.console-f{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:14px; overflow:hidden}
.console-f div{background:rgba(4,20,46,.6); padding:14px 8px; text-align:center}
.console-f b{display:block; font-family:var(--fd); font-weight:800; font-size:1.1rem; color:var(--txt)}
.console-f span{font-size:.6875rem; color:var(--txt-3)}

/* scroll cue */
.cue{position:absolute; inset-inline-start:calc(var(--pad) + 2px); bottom:34px; display:flex; align-items:center; gap:14px;
  font-size:.75rem; letter-spacing:.2em; color:var(--txt-3)}
.cue i{display:block; width:1px; height:52px; background:linear-gradient(to bottom,var(--gold),transparent); position:relative}
.cue i::after{content:""; position:absolute; inset-inline:0; top:0; height:14px; background:var(--gold-hi);
  animation:trail 2.2s var(--ease) infinite}
@keyframes trail{0%{top:0;opacity:1}80%{top:38px;opacity:0}100%{top:38px;opacity:0}}

/* ================= MARQUEE ================= */
.ticker{border-block:1px solid var(--line-2); background:linear-gradient(90deg,rgba(230,168,0,.05),transparent,rgba(0,112,192,.05));
  padding-block:22px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-t{display:flex; width:max-content; gap:0; animation:slide 34s linear infinite}
.ticker:hover .ticker-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(50%)}}
.ticker-t span{display:inline-flex; align-items:center; gap:26px; padding-inline:26px;
  font-family:var(--fd); font-weight:700; font-size:clamp(1rem,1.7vw,1.375rem); color:var(--txt-3); white-space:nowrap}
.ticker-t span::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); opacity:.6; flex:none}

/* ================= SERVICE LIST ================= */
.svc-list{border-top:1px solid var(--line-2)}
.svc-row{
  position:relative; display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding-block:clamp(26px,3.4vw,44px); border-bottom:1px solid var(--line-2);
  cursor:pointer; transition:padding-inline-start .5s var(--ease);
}
.svc-row::before{
  content:""; position:absolute; inset-inline:calc(var(--pad) * -1); inset-block:0; z-index:-1;
  background:linear-gradient(90deg,rgba(230,168,0,.09),transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.svc-row:hover::before{opacity:1}
.svc-row:hover{padding-inline-start:18px}
.svc-n{font-family:var(--fd); font-size:.8125rem; font-weight:700; color:var(--gold); letter-spacing:.16em;
  width:44px; flex:none; font-variant-numeric:tabular-nums; padding-top:6px; align-self:flex-start}
.svc-main{flex:1; min-width:0}
.svc-main h3{
  font-size:clamp(1.35rem,3.2vw,2.35rem); font-weight:800; margin-bottom:8px;
  transition:color .45s var(--ease), transform .5s var(--ease);
}
.svc-row:hover .svc-main h3{color:var(--gold-hi)}
.svc-main p{font-size:.9375rem; color:var(--txt-2); line-height:1.85; max-width:64ch}
.svc-out{display:inline-flex; align-items:center; gap:9px; margin-top:12px; font-size:.8125rem;
  font-weight:600; color:var(--txt-3); border:1px solid var(--line-2); padding:6px 14px; border-radius:100px}
.svc-out b{color:var(--gold); font-weight:700}
.svc-go{
  width:52px; height:52px; flex:none; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--txt-2);
  transition:transform .5s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.svc-row:hover .svc-go{background:linear-gradient(120deg,var(--gold-hi),var(--gold)); color:#04142E;
  border-color:transparent; transform:rotate(-45deg) scale(1.06)}

/* cursor-following preview */
.peek{
  position:fixed; z-index:700; width:290px; height:190px; border-radius:16px; overflow:hidden;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.86) rotate(-4deg);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
  border:1px solid rgba(230,168,0,.4); box-shadow:0 30px 70px -20px rgba(0,0,0,.95);
}
.peek.on{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
.peek img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity .3s}
.peek img.on{opacity:1}

/* ================= FIGURES ================= */
.figures{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2);
  border-block:1px solid var(--line-2)}
.fig{background:var(--void); padding:clamp(30px,4vw,52px) 22px; text-align:center; position:relative; overflow:hidden}
.fig::before{content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity .6s}
.fig:hover::before{opacity:.8}
.fig b{display:block; font-family:var(--fd); font-size:clamp(2.4rem,5.4vw,4.2rem); font-weight:900;
  letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,#fff 10%,var(--gold) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px}
.fig span{font-size:.875rem; color:var(--txt-3); letter-spacing:.05em}

/* ================= APPROACH ================= */
.appr{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,6vw,90px); align-items:start}
.steps{position:relative; display:flex; flex-direction:column; gap:0; margin-top:6px}
.steps::before{content:""; position:absolute; inset-inline-start:19px; inset-block:22px 40px; width:1px; background:var(--line)}
.steps::after{content:""; position:absolute; inset-inline-start:19px; top:22px; width:1px;
  height:var(--fill,0%); background:linear-gradient(to bottom,var(--gold-hi),var(--gold-lo)); transition:height .5s linear}
.step{position:relative; display:flex; gap:22px; padding-block:22px}
.step-n{
  width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--elev); border:1px solid var(--line); color:var(--txt-3);
  font-family:var(--fd); font-weight:800; font-size:.9375rem; z-index:1;
  transition:.5s var(--ease);
}
.step.lit .step-n{background:linear-gradient(120deg,var(--gold-hi),var(--gold)); color:#04142E; border-color:transparent;
  box-shadow:0 0 26px -6px rgba(230,168,0,.8)}
.step h4{font-size:1.1875rem; font-weight:800; margin-bottom:7px}
.step p{font-size:.9375rem; color:var(--txt-2); line-height:1.85}

/* ================= TRIO ================= */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tc{
  position:relative; padding:clamp(26px,3vw,38px); border-radius:22px; overflow:hidden;
  border:1px solid var(--line-2); background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:transform .5s var(--ease), border-color .5s var(--ease);
  display:flex; flex-direction:column;
}
.tc::before{
  content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px;
  background:linear-gradient(150deg,rgba(230,168,0,.6),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s var(--ease);
}
.tc:hover{transform:translateY(-6px)}
.tc:hover::before{opacity:1}
.tc-i{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:22px;
  background:rgba(230,168,0,.1); border:1px solid rgba(230,168,0,.22); color:var(--gold-hi)}
.tc h3{font-size:1.375rem; font-weight:800; margin-bottom:12px}
.tc > p{font-size:.9375rem; color:var(--txt-2); line-height:1.85; margin-bottom:22px}
.tc ul{display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:20px; border-top:1px solid var(--line-2)}
.tc li{display:flex; gap:11px; align-items:flex-start; font-size:.9375rem; color:var(--txt); line-height:1.6}
.tc li svg{flex:none; color:var(--gold); margin-top:5px}

/* ================= QUOTE ================= */
.quote{position:relative; border-radius:28px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); padding:clamp(38px,6vw,80px)}
.quote-bg{position:absolute; inset:0; z-index:-1}
.quote-bg img{width:100%; height:100%; object-fit:cover; opacity:.7}
.quote-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(2,13,31,.92),rgba(2,13,31,.62))}
.quote q{quotes:none; display:block; font-family:var(--fd); font-weight:700;
  font-size:clamp(1.3rem,2.9vw,2.1rem); line-height:1.62; letter-spacing:-.02em; max-width:30ch; margin-bottom:34px}
.quote-w{display:flex; align-items:center; gap:15px}
.av{width:52px; height:52px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold-lo)); color:#04142E;
  font-family:var(--fd); font-weight:900; font-size:1.25rem}
.quote-w b{display:block; font-size:1rem; font-weight:700}
.quote-w span{font-size:.875rem; color:var(--txt-3)}

/* ================= LOGOS ================= */
.logos{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos-t{display:flex; width:max-content; animation:slide 42s linear infinite}
.logo-c{width:200px; height:96px; flex:none; display:grid; place-items:center; margin-inline:9px;
  border:1px solid var(--line-2); border-radius:16px; background:var(--glass);
  font-family:var(--fd); font-weight:700; font-size:.9375rem; color:var(--txt-3);
  transition:color .4s, border-color .4s}
.logo-c:hover{color:var(--gold-hi); border-color:rgba(230,168,0,.3)}

/* ================= FAQ ================= */
.faq{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start}
details.q{border-bottom:1px solid var(--line-2)}
details.q summary{
  list-style:none; cursor:pointer; padding-block:24px; display:flex; align-items:center; gap:18px;
  font-family:var(--fd); font-weight:700; font-size:clamp(1rem,1.6vw,1.1875rem); line-height:1.5;
  transition:color .35s var(--ease);
}
details.q summary::-webkit-details-marker{display:none}
details.q summary:hover,details.q[open] summary{color:var(--gold-hi)}
.q-s{width:30px; height:30px; flex:none; margin-inline-start:auto; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center; color:var(--txt-2); transition:.4s var(--ease)}
details.q[open] .q-s{transform:rotate(135deg); background:var(--gold); color:#04142E; border-color:transparent}
.q-b{padding-bottom:26px; color:var(--txt-2); font-size:.9375rem; line-height:1.95; max-width:70ch}
.q-b ul{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.q-b li{display:flex; gap:11px; align-items:flex-start}
.q-b li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; margin-top:11px}

/* ================= CTA ================= */
.cta{position:relative; overflow:hidden; isolation:isolate}
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(900px 480px at 78% 0%,rgba(230,168,0,.16),transparent 66%),
             radial-gradient(760px 460px at 12% 100%,rgba(0,112,192,.15),transparent 68%);
}
.cta-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px); align-items:center}
.cta h2{font-size:clamp(2rem,4.6vw,3.6rem); font-weight:900; letter-spacing:-.04em; margin-bottom:24px}
.reach{display:flex; flex-direction:column; gap:16px; margin-top:40px; padding-top:34px; border-top:1px solid var(--line-2)}
.reach a{display:inline-flex; align-items:center; gap:15px; width:fit-content; font-size:1.0625rem; font-weight:600;
  transition:color .35s var(--ease)}
.reach a:hover{color:var(--gold-hi)}
.reach a > i{width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--line); color:var(--gold); font-style:normal;
  transition:.4s var(--ease)}
.reach a:hover > i{background:rgba(230,168,0,.14); border-color:rgba(230,168,0,.4)}

.form{border-radius:26px; padding:clamp(26px,3.4vw,42px); border:1px solid var(--line);
  background:rgba(6,24,52,.6); backdrop-filter:blur(20px); box-shadow:0 40px 90px -34px rgba(0,0,0,.9)}
.form h3{font-size:1.5rem; font-weight:800; margin-bottom:6px}
.form > p{font-size:.875rem; color:var(--txt-3); margin-bottom:28px}
.fr{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fl{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.fl label{font-size:.8125rem; font-weight:600; color:var(--txt-2)}
.fl label i{font-style:normal; color:var(--gold)}
.fl input,.fl select,.fl textarea{
  font-family:var(--fb); font-size:.9375rem; color:var(--txt); direction:rtl;
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; width:100%; transition:border-color .3s, box-shadow .3s, background .3s;
}
.fl textarea{resize:vertical; min-height:104px}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none; border-color:rgba(230,168,0,.55);
  background:rgba(255,255,255,.055); box-shadow:0 0 0 4px rgba(230,168,0,.1)}
.fl input::placeholder,.fl textarea::placeholder{color:var(--txt-3)}
.fl select option{background:#0B1220; color:var(--txt)}
.form .btn{width:100%; margin-top:8px}
.fnote{font-size:.75rem; color:var(--txt-3); text-align:center; margin-top:16px}

/* ================= FOOTER ================= */
.ftr{position:relative; border-top:1px solid var(--line-2); padding-top:clamp(56px,7vw,90px); overflow:hidden}
.ftr-g{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:56px}
.ftr p{font-size:.9375rem; color:var(--txt-2); line-height:1.9; max-width:36ch; margin-top:18px}
.ftr h4{font-size:.875rem; font-weight:700; letter-spacing:.06em; margin-bottom:20px; color:var(--txt)}
.fl-links{display:flex; flex-direction:column; gap:12px}
.fl-links a{font-size:.9375rem; color:var(--txt-2); width:fit-content; transition:color .3s, transform .3s var(--ease)}
.fl-links a:hover{color:var(--gold-hi); transform:translateX(-5px)}
.soc{display:flex; gap:10px; margin-top:24px}
.soc a{width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--glass); color:var(--txt-2); transition:.35s var(--ease)}
.soc a:hover{color:#04142E; background:linear-gradient(120deg,var(--gold-hi),var(--gold)); border-color:transparent; transform:translateY(-3px)}
.watermark{
  font-family:var(--fd); font-weight:900; font-size:clamp(3.4rem,13vw,10.5rem); line-height:1;
  letter-spacing:-.06em; text-align:center; color:transparent;
  background:linear-gradient(to bottom,rgba(230,168,0,.22) 8%,rgba(230,168,0,.05) 92%);
  -webkit-background-clip:text; background-clip:text; user-select:none; pointer-events:none;
  margin-bottom:.06em; padding-top:14px;
}
.ftr-b{border-top:1px solid var(--line-2); padding-block:24px; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:.8125rem; color:var(--txt-3)}

/* ================= REVEAL ================= */
.rv{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .hero-in,.appr,.faq,.cta-grid{grid-template-columns:1fr}
  .hero{min-height:auto; padding-block:130px 70px}
  .trio{grid-template-columns:1fr}
  .figures{grid-template-columns:repeat(2,1fr)}
  .ftr-g{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-burger{display:grid; margin-inline-start:auto}
  .cue{display:none}
  .console{animation:none}
}
@media (max-width:640px){
  .mk{font-size:15px}
  .nav-in{height:70px}
  .nav .btn{display:none}
  .nav-burger{margin-inline-start:auto}
  .fr,.ftr-g{grid-template-columns:1fr}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%}
  .svc-go{width:42px; height:42px}
  .svc-n{width:30px}
  .peek{display:none}
  .quote q{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .mk *,.mk *::before,.mk *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .hero h1 .l span{transform:none}
  .bars i{transform:scaleY(1)}
  .rv{opacity:1; transform:none}
}

/* ---- floating WhatsApp ---- */
.wa{position:fixed; z-index:850; left:26px; bottom:26px;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#31D46A,#1FA855); color:#fff;
  box-shadow:0 14px 38px -10px rgba(37,190,100,.65);
  transition:transform .35s var(--ease)}
.wa:hover{transform:translateY(-4px) scale(1.05)}
.wa::after{content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid rgba(49,212,106,.5); animation:pulse 2.4s infinite}

/* the nav crosses a dark field AND a lime slab — it carries its own ground */
.nav-links{background:rgba(9,7,16,.9); backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.1); border-radius:100px; padding:4px;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.8)}
.nav-links a{color:rgba(243,241,248,.72)}
.nav-links a:hover{color:#fff}
.nav-links a.on{color:var(--gold-hi)}
.nav .btn-sm.btn-gold{background:#020C1C; color:var(--gold-hi);
  border:1px solid rgba(230,168,0,.5); box-shadow:0 10px 30px -14px rgba(0,0,0,.8)}
.nav .btn-sm.btn-gold:hover{background:#03172B; border-color:var(--gold-hi)}
.nav .logo img{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.nav-burger{background:rgba(9,7,16,.9); border-color:rgba(255,255,255,.12); color:#fff}
.logo img{height:36px; width:auto; display:block}
.ftr .logo img{height:44px}
.logo{gap:0}

/* on-accent ink */
.mk{--on:#04142E}

/* reveal is an enhancement: content is visible unless JS says otherwise */
.mk .rv{opacity:1; transform:none}
.mk.rvon .rv{opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease)}
.mk.rvon .rv.in{opacity:1; transform:none}

/* ---- mobile menu ---- */
.mmenu{position:fixed; inset:0; z-index:900; background:rgba(2,13,31,.97);
  backdrop-filter:blur(20px); display:flex; flex-direction:column; justify-content:center;
  padding:80px clamp(24px,8vw,60px) 40px; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease)}
.mmenu.open{opacity:1; pointer-events:auto}
.mmenu a.mlink{display:block; font-family:var(--fd); font-weight:900;
  font-size:clamp(1.9rem,8vw,2.8rem); letter-spacing:-.03em; color:var(--txt);
  padding-block:14px; border-bottom:1px solid var(--line-2);
  transform:translateY(18px); opacity:0; transition:.45s var(--ease)}
.mmenu.open a.mlink{transform:none; opacity:1}
.mmenu.open a.mlink:nth-child(2){transition-delay:.05s}
.mmenu.open a.mlink:nth-child(3){transition-delay:.1s}
.mmenu.open a.mlink:nth-child(4){transition-delay:.15s}
.mmenu.open a.mlink:nth-child(5){transition-delay:.2s}
.mmenu a.mlink:active, .mmenu a.mlink:hover{color:var(--gold-hi)}
.mmenu .mcta{margin-top:34px; display:flex; flex-direction:column; gap:12px}
.mmenu-x{position:absolute; top:22px; inset-inline-start:22px; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--line); background:var(--glass);
  color:var(--txt); display:grid; place-items:center; cursor:pointer}

/* ---------- services dropdown ---------- */
.nd{position:relative; display:flex; align-items:center}
.nd > .nd-t{display:inline-flex; align-items:center; gap:6px}
.nd-c{transition:transform .32s var(--ease); opacity:.7}
.nd:hover .nd-c,.nd.open .nd-c{transform:rotate(180deg); opacity:1}
.nd-p{position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:16px; width:min(392px,92vw); z-index:60;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease), visibility .26s, translate .26s var(--ease);
  translate:0 8px}
.nd:hover .nd-p,.nd:focus-within .nd-p,.nd.open .nd-p{
  opacity:1; visibility:visible; pointer-events:auto; translate:0 0}
.nd-pin{position:relative; background:rgba(4,20,46,.97); backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--line); border-radius:20px; padding:8px;
  box-shadow:0 34px 80px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06)}
.nd-pin::before{content:""; position:absolute; top:-7px; left:50%; width:14px; height:14px; z-index:-1;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(4,20,46,.97); border-left:1px solid var(--line); border-top:1px solid var(--line)}
.nd-i{display:flex; align-items:flex-start; gap:12px; padding:11px 13px; border-radius:13px;
  transition:background .26s var(--ease)}
.nd-i:hover{background:rgba(255,255,255,.05)}
.nd-i > i{font-style:normal; flex:none; margin-top:2px; font-family:var(--fd);
  font-size:.625rem; font-weight:800; letter-spacing:.06em; color:var(--gold);
  border:1px solid rgba(230,168,0,.3); border-radius:5px; padding:2px 5px;
  font-variant-numeric:tabular-nums}
.nd-i > span{min-width:0}
.nd-i b{display:block; font-family:var(--fd); font-size:.875rem; font-weight:700;
  color:var(--txt); line-height:1.4; transition:color .26s var(--ease)}
.nd-i:hover b{color:var(--gold-hi)}
.nd-i em{display:block; font-style:normal; font-size:.75rem; color:var(--txt-3);
  line-height:1.55; margin-top:2px}
.nd-all{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:6px; padding:13px; border-top:1px solid var(--line-2);
  font-family:var(--fd); font-weight:800; font-size:.8125rem; color:var(--gold-hi)}
.nd-all:hover{color:var(--gold-hi)}
.nd-all svg{transition:transform .3s var(--ease)}
.nd-all:hover svg{transform:translateX(-5px)}
/* mobile menu sub-list */
.msub{display:flex; flex-direction:column; gap:9px; margin:2px 0 20px;
  padding-inline-start:16px; border-inline-start:1px solid var(--line)}
.msub a{font-family:var(--fb); font-size:.9375rem; font-weight:600; color:var(--txt-2)}
.msub a:hover{color:var(--gold-hi)}


/* =========================================================
   v6 — editorial panels, not stacked boxes.
   astudio : solid accent slab + diagonal-cut media, repeated
             quiet CTA, numbered index instead of cards
   seet    : giant type moments, one-column narrative scale
   ========================================================= */


/* ================= HERO — astudio slab ================= */
.hero3{position:relative; min-height:100svh; isolation:isolate; overflow:hidden; display:flex; align-items:stretch}
.hero3-media{position:absolute; inset:0; z-index:-2; overflow:hidden;
  background:#020D1F center/cover no-repeat}
.hero3-media img,.hero3-media video{width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity 1.1s var(--ease)}
.hero3-media video.on{opacity:1}
.hero3-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(2,13,31,.74), rgba(2,13,31,.16) 44%, rgba(2,13,31,.4) 100%)}
.hero3-media::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to left, rgba(2,13,31,.72) 0%, rgba(2,13,31,.3) 32%, rgba(2,13,31,0) 60%)}
#field{position:absolute; inset:0; z-index:-1; width:100%; height:100%; opacity:.16}
@media (prefers-reduced-motion:reduce){.hero3-media video{display:none}}

.slab{
  margin-inline-start:auto; width:min(46%, 660px); min-height:100svh;
  background:linear-gradient(160deg,var(--gold-hi) 0%,var(--gold) 78%);
  color:var(--on); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(120px,14vh,160px) clamp(28px,4vw,72px) clamp(48px,7vh,80px);
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%);
  position:relative;
}
.slab::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:64px 64px}
.slab > *{position:relative; margin-inline-start:clamp(24px,9%,84px)}
.slab .kick{font-size:.8125rem; font-weight:700; letter-spacing:.2em; margin-bottom:26px;
  display:flex; align-items:center; gap:12px; color:var(--on)}
.slab .kick::before{content:""; width:38px; height:2px; background:var(--on)}
.slab h1{color:var(--on); font-size:clamp(2.5rem,4.6vw,4.3rem); font-weight:900;
  line-height:1.08; letter-spacing:-.04em; margin-bottom:24px}
.slab h1 .l{display:block; overflow:hidden; padding-block:.04em}
.slab h1 .l span{display:block; transform:translateY(108%); animation:rise 1s var(--ease) forwards}
.slab h1 .l:nth-child(2) span{animation-delay:.14s}
.slab p{font-family:var(--fb); font-size:1.0313rem; line-height:1.95; color:rgba(4,20,46,.82);
  max-width:44ch; margin-bottom:36px}
.slab-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px}
.mk .btn-ink{
  display:inline-flex; align-items:center; gap:11px; font-family:var(--fd); font-weight:800;
  font-size:1rem; padding:16px 32px; border-radius:100px; background:var(--on); color:var(--gold-hi);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); cursor:pointer; border:none;
}
.mk .btn-ink:hover{transform:translateY(-3px); box-shadow:0 16px 40px -12px rgba(4,20,46,.55)}
.mk .btn-inkline{
  display:inline-flex; align-items:center; gap:11px; font-family:var(--fd); font-weight:800;
  font-size:1rem; padding:16px 32px; border-radius:100px; border:1.5px solid rgba(4,20,46,.4);
  color:var(--on); transition:.35s var(--ease);
}
.mk .btn-inkline:hover{background:rgba(4,20,46,.08); transform:translateY(-3px)}
.slab-kpis{display:flex; gap:clamp(20px,3.4vw,44px); flex-wrap:wrap; padding-top:30px;
  border-top:1.5px solid rgba(4,20,46,.22)}
.slab-kpis b{display:block; font-family:var(--fd); font-size:clamp(1.7rem,2.6vw,2.4rem); font-weight:900;
  letter-spacing:-.04em; line-height:1; color:var(--on); font-variant-numeric:tabular-nums}
.slab-kpis span{font-size:.78rem; color:rgba(4,20,46,.68); font-weight:700}

.hero3 .tagline{
  position:absolute; z-index:2; inset-inline-start:clamp(24px,4vw,64px); top:clamp(110px,16vh,150px);
  max-width:300px; color:var(--txt); font-family:var(--fd); font-weight:700;
  font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.7;
}
.hero3 .tagline i{font-style:normal; color:var(--gold-hi)}
.lume{position:absolute; z-index:2; right:clamp(20px,4.5vw,72px); bottom:clamp(40px,8vh,84px);
  width:min(430px,31vw); border-radius:22px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); background:rgba(6,24,52,.62); backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .4s var(--ease); transform-style:preserve-3d; will-change:transform}
.lume-hd{display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--line-2)}
.lume-hd .live{display:inline-flex; align-items:center; gap:7px; font-size:.6875rem; font-weight:800;
  color:#3FCF8E; background:rgba(63,207,142,.1); border:1px solid rgba(63,207,142,.25);
  padding:4px 11px; border-radius:100px; letter-spacing:.08em}
.lume-hd .live i{width:6px; height:6px; border-radius:50%; background:#3FCF8E; animation:pulse 2s infinite}
.lume-hd span.t{margin-inline-start:auto; font-size:.75rem; color:var(--txt-3); letter-spacing:.06em}
.lume-b{padding:18px 20px 20px}
.lume-b .row{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px}
.lume-b h4{font-size:.875rem; font-weight:700; color:var(--txt-2)}
.lume-b .per{font-size:.6875rem; color:var(--txt-3)}
.lume-chart{position:relative; margin-top:10px}
.lume-chart svg{display:block; width:100%; height:132px; overflow:visible}
.lume-chart .gl{stroke:var(--line-2); stroke-width:1}
.lume-chart .ar{fill:url(#lumeG)}
.lume-chart .ln{fill:none; stroke:var(--gold-hi); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(230,168,0,.5))}
.lume-chart .pt{fill:var(--gold-hi)}
.lume-chart .ping{fill:none; stroke:var(--gold-hi); stroke-width:1.5; opacity:0; animation:lping 2.4s ease-out infinite}
@keyframes lping{0%{opacity:.8; r:5}70%{opacity:0; r:16}100%{opacity:0; r:16}}
.lume-f{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:14px; overflow:hidden; margin-top:18px}
.lume-f div{background:rgba(2,13,31,.55); padding:13px 8px 17px; text-align:center; position:relative}
.lume-f b{display:block; font-family:var(--fd); font-weight:900; font-size:1.25rem; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--txt)}
.lume-f span{font-size:.6875rem; color:var(--txt-3)}
.lume-f em{position:absolute; inset-inline:14px; bottom:8px; height:2.5px; border-radius:2px;
  background:var(--line-2); overflow:hidden; font-style:normal}
.lume-f em::after{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:0;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold)); border-radius:2px;
  transition:width 1.4s var(--ease) .6s}
.lume.on .lume-f em::after{width:var(--p,80%)}
@media (max-width:1080px){ .lume{display:none} }

/* ================= GIANT MARQUEE (seet scale) ================= */
.giant{border-block:1px solid var(--line-2); padding-block:clamp(26px,4vw,44px); overflow:hidden;
  background:linear-gradient(90deg, rgba(230,168,0,.05), transparent 40%, rgba(0,112,192,.06))}
.giant-t{display:flex; width:max-content; animation:slide 26s linear infinite; align-items:baseline}
.giant:hover .giant-t{animation-play-state:paused}
.giant-t b{
  font-family:var(--fd); font-weight:900; font-size:clamp(3.4rem,9vw,7.5rem); line-height:1;
  letter-spacing:-.04em; white-space:nowrap; padding-inline:clamp(18px,3vw,40px);
  color:transparent; -webkit-text-stroke:2px rgba(243,241,248,.4);
}
.giant-t b.fill{color:var(--gold-hi); -webkit-text-stroke:0}
.giant-t i{font-style:normal; align-self:center; width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none}

/* ================= TRUST (partners + clients) ================= */
.trust{position:relative; isolation:isolate; overflow:hidden; border-block:1px solid var(--line-2);
  padding-block:clamp(56px,7vw,96px)}
.trust::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(760px 380px at 50% 0%, rgba(230,168,0,.08), transparent 68%),
             radial-gradient(700px 420px at 12% 100%, rgba(0,112,192,.1), transparent 70%)}
.trust-hd{text-align:center; display:flex; flex-direction:column; align-items:center; margin-bottom:44px}
.trust-hd .lede{text-align:center; margin-top:14px; max-width:44ch}
.logos{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-t{display:flex; width:max-content; animation:slide 55s linear infinite; align-items:stretch}
.logos:hover .logos-t{animation-play-state:paused}
.logo-c{
  position:relative; width:236px; height:116px; flex:none; display:grid; place-items:center;
  margin-inline:10px; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.logo-c::after{content:""; position:absolute; inset-inline:18%; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  opacity:0; transition:opacity .45s var(--ease)}
.logo-c:hover{transform:translateY(-5px); border-color:rgba(230,168,0,.35);
  background:linear-gradient(170deg, rgba(255,255,255,.09), rgba(255,255,255,.03))}
.logo-c:hover::after{opacity:1}
.logo-c img{max-height:52px; max-width:168px; width:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.8;
  transition:filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease)}
.logo-c:hover img{filter:none; opacity:1; transform:scale(1.06)}
.trust-div{display:flex; align-items:center; gap:16px; margin:44px auto 26px; max-width:var(--maxw);
  padding-inline:24px; font-family:var(--fd); font-weight:700; font-size:.8125rem;
  letter-spacing:.14em; color:var(--txt-3)}
.trust-div::before,.trust-div::after{content:""; flex:1; height:1px; background:var(--line-2)}
.logo-c.pf{width:180px; height:80px; border-radius:16px}
.logo-c.pf img{max-height:30px; max-width:118px; opacity:.55}
.logo-c.pf:hover img{opacity:1}
.logo-c.gb img{filter:grayscale(1) brightness(1.7); opacity:.55}
.logos-t.rev{animation-direction:reverse}
.logo-c.cl{width:210px; height:96px}
.logo-c.cl img{max-height:52px; max-width:150px}
.logo-c.gb:hover img{filter:none; opacity:1}

/* ================= PLATFORM BAND ================= */
.plat{position:relative; overflow:hidden; isolation:isolate; border-block:1px solid var(--line-2);
  background:linear-gradient(120deg, rgba(0,112,192,.1), transparent 45%, rgba(230,168,0,.07))}
.plat-in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px); align-items:center;
  padding-block:clamp(56px,7vw,96px)}
.plat .chipnew{display:inline-flex; align-items:center; gap:8px; font-size:.6875rem; font-weight:800;
  color:var(--gold-hi); border:1px solid rgba(230,168,0,.35); background:rgba(230,168,0,.08);
  padding:5px 13px; border-radius:100px; letter-spacing:.1em; margin-bottom:22px}
.plat h2{font-size:clamp(2rem,4.6vw,3.6rem); font-weight:900; letter-spacing:-.035em; margin-bottom:18px}
.plat p{color:var(--txt-2); font-size:1.0313rem; line-height:1.95; max-width:50ch; margin-bottom:32px}
.plat-cta{display:flex; gap:12px; flex-wrap:wrap}
.phone{
  position:relative; width:min(300px,72vw); margin-inline:auto; aspect-ratio:9/18.6;
  border-radius:42px; border:1.5px solid var(--line); padding:12px;
  background:linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1);
  transform:rotate(-4deg);
}
.phone::before{content:""; position:absolute; top:12px; inset-inline:50%; transform:translateX(50%);
  width:34%; height:22px; background:#020D1F; border-radius:0 0 14px 14px; z-index:3}
.phone-scr{position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden;
  background:#04142E; display:flex; flex-direction:column}
.phone-hd{padding:38px 18px 12px; display:flex; align-items:center; gap:8px}
.phone-hd img{height:20px}
.phone-hd i{margin-inline-start:auto; width:26px; height:26px; border-radius:9px; background:rgba(230,168,0,.14);
  border:1px solid rgba(230,168,0,.3); font-style:normal; display:grid; place-items:center; color:var(--gold-hi); font-size:.7rem}
.phone-card{margin:8px 14px; padding:14px; border-radius:16px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.04)}
.phone-card b{display:block; font-family:var(--fd); font-weight:900; font-size:1.05rem; color:var(--txt)}
.phone-card span{font-size:.6875rem; color:var(--txt-3)}
.phone-bars{display:flex; align-items:flex-end; gap:5px; height:54px; margin-top:10px}
.phone-bars i{flex:1; border-radius:3px; background:linear-gradient(to top, rgba(230,168,0,.25), var(--gold-hi))}
.phone-row{display:flex; gap:8px; margin:0 14px 8px}
.phone-row div{flex:1; padding:10px 8px; text-align:center; border-radius:12px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.03)}
.phone-row b{display:block; font-family:var(--fd); font-weight:900; font-size:.9rem; color:var(--gold-hi)}
.phone-row span{font-size:.6rem; color:var(--txt-3)}
@media (max-width:1080px){ .plat-in{grid-template-columns:1fr} .phone{transform:rotate(0)} }

/* ================= SECTION LABEL (hairline, not centred header) ================= */
.rail{display:flex; align-items:center; gap:18px; padding-block:18px; border-block:1px solid var(--line-2);
  font-family:var(--fd); font-weight:700; font-size:.875rem; letter-spacing:.18em; color:var(--gold)}
.rail::after{content:""; flex:1; height:1px; background:var(--line-2)}
.rail em{font-style:normal; color:var(--txt-3); letter-spacing:0}

/* ================= SERVICE INDEX (typographic rows) ================= */
.idx{--pad-x:max(24px, calc((100vw - var(--maxw)) / 2 + 24px))}
.idx-row:first-child{border-top:1px solid var(--line-2)}
.idx-row{
  position:relative; display:grid;
  grid-template-columns:64px minmax(0,.92fr) minmax(0,1.08fr) 54px;
  gap:clamp(14px,2.6vw,40px);
  align-items:start; padding:clamp(24px,3.4vw,40px) var(--pad-x);
  border-bottom:1px solid var(--line-2); cursor:pointer; isolation:isolate;
}
.idx-row::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:scaleY(0); transform-origin:top;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold));
  transition:transform .45s var(--ease);
}
.idx-row:hover::before{transform:scaleY(1); transform-origin:bottom}
.idx-n{font-family:var(--fd); font-weight:900; font-size:clamp(1rem,1.5vw,1.25rem); padding-top:.55em;
  color:transparent; -webkit-text-stroke:1.3px var(--gold); transition:.4s var(--ease);
  font-variant-numeric:tabular-nums}
.idx-row:hover .idx-n{-webkit-text-stroke:1.3px var(--on); color:var(--on)}
.idx-t{font-size:clamp(1.35rem,2.9vw,2.3rem); font-weight:900; letter-spacing:-.03em;
  line-height:1.24; transition:color .4s var(--ease)}
.idx-b p{font-size:.9375rem; color:var(--txt-2); line-height:1.9; transition:color .4s var(--ease)}
/* square tags: deliberately NOT the pill used everywhere else */
.idx-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.idx-tags li{font-size:.78rem; font-weight:700; color:var(--txt-3);
  border:1px solid var(--line); border-radius:5px; padding:5px 11px;
  transition:color .4s var(--ease), border-color .4s var(--ease)}
.idx-row:hover .idx-t{color:var(--on)}
.idx-row:hover .idx-b p{color:rgba(4,20,46,.78)}
.idx-row:hover .idx-tags li{color:var(--on); border-color:rgba(4,20,46,.35)}
.idx-go{width:54px; height:54px; border-radius:50%; border:1.5px solid var(--line); display:grid;
  place-items:center; color:var(--txt-2); transition:.45s var(--ease); flex:none; margin-top:2px}
.idx-row:hover .idx-go{background:var(--on); color:var(--gold-hi); border-color:transparent; transform:rotate(-45deg)}

/* ================= ABOUT — lime slab + media ================= */
.about6{display:grid; grid-template-columns:1.1fr .9fr; min-height:78vh}
.about6-slab{
  position:relative;
  background:
    radial-gradient(90% 120% at 20% 0%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(160deg,var(--gold-hi),var(--gold) 70%, #D19700);
  color:var(--on);
  padding:clamp(48px,7vw,110px) clamp(28px,5vw,90px);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:inset -30px 0 60px -30px rgba(4,20,46,.35);
}
.about6-slab::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.3;
  background-image:linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:58px 58px}
.about6-slab > *{position:relative; z-index:1}
.about6-slab .kick{font-size:.8125rem; font-weight:700; letter-spacing:.2em; margin-bottom:24px;
  display:flex; align-items:center; gap:12px}
.about6-slab .kick::before{content:""; width:38px; height:2px; background:var(--on)}
.about6-slab h2{color:var(--on); font-size:clamp(1.9rem,3.8vw,3.3rem); font-weight:900;
  letter-spacing:-.035em; line-height:1.18; margin-bottom:22px}
.about6-slab > p{font-size:1.0313rem; line-height:2; color:rgba(4,20,46,.8); max-width:52ch; margin-bottom:34px}
.vals6{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1.5px solid rgba(4,20,46,.25)}
.vals6 div{padding:18px 0; border-bottom:1.5px solid rgba(4,20,46,.18); display:flex; align-items:baseline; gap:12px}
.vals6 i{font-style:normal; font-family:var(--fd); font-weight:900; font-size:.8125rem; opacity:.55}
.vals6 b{font-family:var(--fd); font-weight:800; font-size:clamp(.95rem,1.4vw,1.15rem); letter-spacing:-.01em}
.about6-media{position:relative; overflow:hidden; isolation:isolate; min-height:600px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 18% 100%);
  background:
    radial-gradient(82% 68% at 52% 50%, #0B569B 0%, #083F6E 38%, #052C4E 72%, #031C33 100%)}
/* faint grid, masked to the centre */
.about6-media::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(72% 72% at 52% 50%, #000, transparent 88%);
  mask-image:radial-gradient(72% 72% at 52% 50%, #000, transparent 88%)}
/* vignette + lime floor glow */
.about6-media::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(55% 34% at 34% 96%, rgba(230,168,0,.16), transparent 72%),
             radial-gradient(115% 98% at 52% 50%, transparent 44%, rgba(2,13,31,.7) 100%)}

/* ---- orbital system ---- */
.am-sys{position:absolute; z-index:2; top:50%; left:52%; width:min(94%, 600px); aspect-ratio:1;
  transform:translate(-50%,-50%) translateY(var(--py,0)); will-change:transform}
.am-orbit{position:absolute; inset:0; animation:spin 78s linear infinite}
.am-orbit.r2{animation-duration:104s; animation-direction:reverse}
.am-orbit.r3{animation-duration:132s}
.am-ring{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid rgba(243,241,248,.09)}
.am-ring.a{width:46%; height:46%; border-color:rgba(240,192,64,.28)}
.am-ring.b{width:68%; height:68%; border-color:rgba(243,241,248,.11)}
.am-ring.c{width:92%; height:92%; border-color:rgba(243,241,248,.06)}
/* the lit arc that says "in motion" */
.am-arc{position:absolute; top:50%; left:50%; width:46%; height:46%; transform:translate(-50%,-50%);
  border-radius:50%; border:2px solid transparent;
  border-top-color:var(--gold-hi); border-right-color:rgba(240,192,64,.35);
  filter:drop-shadow(0 0 14px rgba(230,168,0,.5)); animation:spin 14s linear infinite}

.am-chip{position:absolute; top:var(--y); left:var(--x); transform:translate(-50%,-50%)}
.am-chip-in{
  display:grid; place-items:center; width:var(--w,104px); height:var(--h,58px);
  border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background:rgba(20,15,34,.72); backdrop-filter:blur(10px);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  animation:spinrev 78s linear infinite;
}
.am-orbit.r2 .am-chip-in{animation-duration:104s; animation-direction:reverse}
.am-orbit.r3 .am-chip-in{animation-duration:132s}
.am-chip-in img{max-width:72%; max-height:58%; width:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:var(--o,.72)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}

/* ---- centre mark ---- */
.am-core{position:absolute; z-index:3; top:50%; left:52%; transform:translate(-50%,-50%) translateY(var(--py,0));
  width:clamp(104px,13vw,138px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; padding:22px;
  background:radial-gradient(circle at 40% 32%, rgba(230,168,0,.22), rgba(20,15,34,.9) 68%);
  border:1px solid rgba(230,168,0,.32);
  box-shadow:0 0 70px -10px rgba(230,168,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  will-change:transform}
.am-core::before{content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(230,168,0,.22); animation:halo 3.4s ease-out infinite}
@keyframes halo{0%{transform:scale(.94); opacity:.7}70%{transform:scale(1.16); opacity:0}100%{opacity:0}}
.am-core img{width:100%; height:auto; object-fit:contain}

/* ---- floating stat cards ---- */
.am-card{position:absolute; z-index:5; inset-inline-start:7%; top:16%;
  padding:16px 22px; border-radius:18px; border:1px solid rgba(255,255,255,.15);
  background:rgba(6,24,52,.72); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09);
  transform:translateY(var(--py,0)); will-change:transform}
.am-card b{display:block; font-family:var(--fd); font-weight:900; font-size:1.7rem;
  letter-spacing:-.03em; color:var(--gold-hi); font-variant-numeric:tabular-nums; line-height:1.1}
.am-card span{font-size:.76rem; color:var(--txt-2); font-weight:700}
.am-card i{position:absolute; top:13px; inset-inline-end:13px; width:7px; height:7px; border-radius:50%;
  background:#3FCF8E; font-style:normal; animation:pulse 2.2s infinite}
.am-card2{position:absolute; z-index:5; inset-inline-start:10%; bottom:12%;
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:100px;
  border:1px solid rgba(230,168,0,.32); background:rgba(4,20,46,.55); backdrop-filter:blur(12px);
  font-family:var(--fd); font-weight:800; font-size:.84rem; color:var(--gold-hi);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.85); transform:translateY(var(--py,0)); will-change:transform}
.am-card2 svg{flex:none}

@media (max-width:1080px){
  .about6-media{min-height:480px}
  .am-sys{width:min(128%,560px)}
  .am-chip-in{--w:82px; --h:48px}
}
@media (max-width:640px){
  .about6-media{min-height:500px}
  .am-sys{width:min(150%,470px); left:50%}
  .am-core{left:50%; width:96px}
  .am-card{inset-inline-start:4%; top:7%; padding:11px 15px}
  .am-card b{font-size:1.25rem}
  .am-card2{inset-inline-start:6%; bottom:8%; font-size:.72rem; padding:9px 15px}
  .am-chip-in{--w:70px; --h:42px}
  .am-chip-in img{max-width:76%; max-height:60%}
}

/* ================= NUMBERS — full-bleed hairlines ================= */
.figs6{border-block:1px solid var(--line-2)}
.figs6-in{display:grid; grid-template-columns:repeat(4,1fr)}
.figs6 .cell{padding:clamp(34px,5vw,64px) 20px; text-align:center; position:relative}
.figs6 .cell + .cell::before{content:""; position:absolute; inset-block:22%; inset-inline-start:0; width:1px; background:var(--line-2)}
.figs6 b{display:block; font-family:var(--fd); font-size:clamp(2.6rem,6.2vw,5rem); font-weight:900;
  letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; margin-bottom:12px;
  color:transparent; -webkit-text-stroke:1.6px var(--gold-hi)}
.figs6 .cell:hover b{color:var(--gold-hi); -webkit-text-stroke:0; transition:.4s}
.figs6 span{font-size:.875rem; color:var(--txt-3); letter-spacing:.06em; font-weight:700}

/* ================= VOICES — horizontal drift ================= */
.drift{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.drift-t{display:flex; width:max-content; gap:22px; animation:slide 60s linear infinite; padding-block:8px}
.drift:hover .drift-t{animation-play-state:paused}
/* quote cards: flat ink slab + hairline rule — deliberately unlike the glass cards */
.vc{
  position:relative; width:min(400px,84vw); min-height:288px; flex:none;
  padding:34px 30px 26px; border-radius:4px;
  background:var(--elev); border:0;
  border-top:2px solid rgba(230,168,0,.35);
  display:flex; flex-direction:column;
  transition:border-top-color .45s var(--ease), background .45s var(--ease);
}
.vc::before{content:"”"; position:absolute; top:8px; inset-inline-start:26px;
  font-family:var(--fd); font-weight:900; font-size:4.6rem; line-height:1;
  color:rgba(230,168,0,.16); transition:color .45s var(--ease)}
.vc:hover{border-top-color:var(--gold-hi); background:var(--elev-2)}
.vc:hover::before{color:rgba(230,168,0,.42)}
.vc p{position:relative; font-size:.9575rem; line-height:2; color:var(--txt); margin-bottom:22px; flex:1}
.vc cite{display:flex; align-items:center; gap:11px; font-style:normal; font-size:.8125rem;
  color:var(--txt-3); padding-top:18px; border-top:1px solid var(--line-2)}
.vc cite b{width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:transparent; border:1.5px solid rgba(230,168,0,.45); color:var(--gold-hi);
  font-family:var(--fd); font-weight:900; font-size:.78rem}

/* ================= COFFEE ================= */
.coffee6{position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:.9fr 1.1fr; align-items:stretch; border-block:1px solid var(--line-2)}
.coffee6-media{position:relative; min-height:360px; overflow:hidden; isolation:isolate;
  clip-path:polygon(0 0, 100% 0, 82% 100%, 0 100%);
  background:radial-gradient(78% 82% at 68% 26%, #0A4E8C 0%, #073A66 42%, #052A4A 74%, #031A30 100%)}
.coffee6-media::before{content:""; position:absolute; inset:0; z-index:1; opacity:.4; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(66% 66% at 62% 40%, #000, transparent 86%);
  mask-image:radial-gradient(66% 66% at 62% 40%, #000, transparent 86%)}
.coffee6-media::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(20deg, rgba(2,13,31,.62), transparent 62%)}
.cm-svg{position:absolute; inset:0; z-index:2; width:100%; height:100%}
.cm-svg .tr{fill:none; stroke:var(--gold-hi); stroke-width:2.6; stroke-linecap:round;
  filter:drop-shadow(0 0 16px rgba(230,168,0,.55));
  stroke-dasharray:640; stroke-dashoffset:640; transition:stroke-dashoffset 1.9s var(--ease)}
.coffee6.lit .cm-svg .tr{stroke-dashoffset:0}
.cm-svg .gh{fill:none; stroke:rgba(243,241,248,.1); stroke-width:1.4}
.cm-svg .hd{fill:var(--gold-hi); opacity:0; transition:opacity .5s var(--ease) 1.5s}
.coffee6.lit .cm-svg .hd{opacity:1}
.cm-svg .nd{fill:rgba(240,192,64,.65)}
.coffee6-b{padding:clamp(40px,5vw,72px) clamp(28px,5vw,80px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
.coffee6-b h2{font-size:clamp(2rem,4.2vw,3.4rem); font-weight:900; letter-spacing:-.035em;
  line-height:1.2; margin-bottom:18px; max-width:15ch; text-wrap:balance}
.coffee6-b blockquote{margin:0 0 14px; font-family:var(--fb); font-weight:400;
  font-size:clamp(1rem,1.5vw,1.125rem); color:var(--txt-2); line-height:1.95; max-width:46ch}
.coffee6-b .who{font-size:.875rem; color:var(--gold); font-weight:700; margin-bottom:36px}

/* ================= FORM 6 ================= */
.contact6{display:grid; grid-template-columns:.85fr 1.15fr; border-top:1px solid var(--line-2)}
.contact6-slab{
  background:linear-gradient(160deg,var(--gold-hi),var(--gold)); color:var(--on);
  padding:clamp(48px,6vw,90px) clamp(28px,4vw,72px);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  display:flex; flex-direction:column; justify-content:center;
}
.contact6-slab h2{color:var(--on); font-size:clamp(1.9rem,3.6vw,3.1rem); font-weight:900;
  letter-spacing:-.035em; line-height:1.16; margin-bottom:18px}
.contact6-slab > p{font-size:1rem; line-height:1.95; color:rgba(4,20,46,.8); max-width:42ch; margin-bottom:34px}
.reach6{display:flex; flex-direction:column; gap:14px; padding-top:28px; border-top:1.5px solid rgba(4,20,46,.25)}
.reach6 a{display:inline-flex; align-items:center; gap:13px; font-size:1.0313rem; font-weight:800;
  color:var(--on); font-family:var(--fd); width:fit-content; transition:transform .3s var(--ease)}
.reach6 a:hover{transform:translateX(-6px)}
.reach6 a i{width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:rgba(4,20,46,.1); border:1.5px solid rgba(4,20,46,.25); font-style:normal}
.contact6-form{padding:clamp(40px,5vw,80px) clamp(28px,4vw,72px); background:var(--ink)}
.contact6-form h3{font-size:1.5rem; font-weight:900; margin-bottom:6px}
.contact6-form > p{font-size:.875rem; color:var(--txt-3); margin-bottom:30px}

.contact6-form select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A9A1BC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 16px center; padding-left:44px}
.vals6 div{transition:padding .35s var(--ease)}
.vals6 div:hover{padding-inline-start:10px}
.vals6 div:hover b{opacity:.85}

/* budget segmented control */
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label{cursor:pointer; font-size:.8125rem; font-weight:700; color:var(--txt-2);
  border:1px solid var(--line); border-radius:100px; padding:9px 16px;
  transition:.3s var(--ease); background:rgba(255,255,255,.02)}
.seg label:hover{border-color:rgba(230,168,0,.4); color:var(--txt)}
.seg input:checked + label{background:linear-gradient(120deg,var(--gold-hi),var(--gold));
  color:var(--on); border-color:transparent}
.seg input:focus-visible + label{outline:2px solid var(--gold-hi); outline-offset:3px}

/* quiet repeated CTA (astudio) */
.quiet{display:flex; justify-content:center; padding-block:clamp(36px,5vw,60px)}


/* ===== BRAND BALANCE — navy leads, gold accents (mksab-ksa.com identity) ===== */
.slab,.contact6-slab{
  background:linear-gradient(158deg,#0A63AE 0%,#053C68 62%,#04294A 100%);
  color:#fff}
.slab::before{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)}
.slab .kick,.slab h1,.slab-kpis b,.contact6-slab h2,.reach6 a{color:#fff}
.slab .kick::before{background:var(--gold-hi)}
.slab p{color:rgba(255,255,255,.8)}
.slab-kpis{border-top-color:rgba(255,255,255,.26)}
.slab-kpis span{color:rgba(255,255,255,.66)}
.slab-kpis b{color:var(--gold-hi)}
.contact6-slab > p{color:rgba(255,255,255,.8)}
.reach6{border-top-color:rgba(255,255,255,.26)}
.reach6 a i{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:var(--gold-hi)}
.reach6 a:hover i{background:var(--gold); border-color:var(--gold); color:#04142E}
.mk .slab-cta .btn-ink{background:linear-gradient(120deg,var(--gold-hi),var(--gold)); color:#04142E}
.mk .slab-cta .btn-ink:hover{box-shadow:0 16px 40px -12px rgba(230,168,0,.55)}
.mk .slab-cta .btn-inkline{border-color:rgba(255,255,255,.42); color:#fff}
.mk .slab-cta .btn-inkline:hover{background:rgba(255,255,255,.1)}


.platshot{width:min(330px,80vw); margin-inline:auto; border-radius:26px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 46px 100px -44px rgba(0,0,0,.95),
  inset 0 1px 0 rgba(255,255,255,.08); transition:transform .6s var(--ease)}
.platshot:hover{transform:translateY(-6px)}
.platshot img{display:block; width:100%}
/* ---- platform block (folded in from the standalone page) ---- */
.pblock{margin-top:clamp(46px,6vw,80px)}
.browser{margin-top:0; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:var(--elev); box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.browser-hd{display:flex; align-items:center; gap:7px; padding:12px 18px; border-bottom:1px solid var(--line-2)}
.browser-hd i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.14)}
.browser-hd i:first-child{background:var(--gold)}
.browser-hd span{margin-inline-start:auto; font-size:.75rem; color:var(--txt-3);
  border:1px solid var(--line-2); border-radius:8px; padding:3px 14px; direction:ltr}
.browser img{display:block; width:100%}
.store{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.store a{display:inline-flex; align-items:center; gap:11px; padding:11px 20px; border-radius:14px;
  border:1px solid var(--line); background:var(--glass); transition:.35s var(--ease)}
.store a:hover{border-color:rgba(230,168,0,.45); transform:translateY(-2px)}
.store b{display:block; font-family:var(--fd); font-weight:800; font-size:.9375rem; line-height:1.2}
.store span{font-size:.6875rem; color:var(--txt-3)}
.store svg{flex:none; color:var(--gold-hi)}
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px}
.feat{padding:clamp(24px,3vw,34px); border-radius:22px; border:1px solid var(--line-2);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  transition:transform .5s var(--ease), border-color .5s var(--ease)}
.feat:hover{transform:translateY(-6px); border-color:rgba(230,168,0,.35)}
.feat i{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-style:normal;
  background:rgba(230,168,0,.1); border:1px solid rgba(230,168,0,.25); color:var(--gold-hi); margin-bottom:20px}
.feat h3{font-size:1.1875rem; font-weight:900; margin-bottom:10px}
.feat p{font-size:.9375rem; color:var(--txt-2); line-height:1.9}
.hsteps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:22px; overflow:hidden; margin-top:36px}
.hstep{background:var(--ink); padding:clamp(26px,3.4vw,40px)}
.hstep b{display:block; font-family:var(--fd); font-weight:900; font-size:2rem; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.4px var(--gold-hi); margin-bottom:14px; font-variant-numeric:tabular-nums}
.hstep h4{font-size:1.125rem; font-weight:800; margin-bottom:8px}
.hstep p{font-size:.9rem; color:var(--txt-2); line-height:1.85}
@media (max-width:1080px){ .feats,.hsteps{grid-template-columns:1fr} }

/* ================= REAL DEVICE FRAMES ================= */
.dev{position:relative; width:100%; max-width:var(--dw,300px); margin-inline:auto;
  border-radius:calc(var(--dw,300px) * .13); padding:calc(var(--dw,300px) * .026);
  background:linear-gradient(160deg,#2A3648 0%,#0D1626 38%,#060C16 72%,#1B2436 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.09) inset,
             0 -2px 0 rgba(0,0,0,.6) inset,
             0 60px 110px -46px rgba(0,0,0,.95),
             0 10px 34px -14px rgba(0,0,0,.7);
  transition:transform .7s var(--ease)}
.dev::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(122deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 16%,
             rgba(255,255,255,0) 34%, rgba(255,255,255,0) 76%, rgba(255,255,255,.07) 100%)}
.dev-scr{position:relative; overflow:hidden; border-radius:calc(var(--dw,300px) * .108);
  background:#0F3352; isolation:isolate}
.dev-scr img{display:block; width:100%; height:auto}
/* the ambient light the screen throws on the page */
.dev-glow{position:absolute; inset:12% -14% -10% -14%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 46% at 50% 60%, rgba(0,112,192,.42), transparent 72%);
  filter:blur(46px)}
.dev:hover{transform:translateY(-8px)}

/* the screens gallery */
.screens{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(34px,4vw,56px); align-items:start}
.screen{position:relative}
.screen .dev{--dw:250px}
.screen:nth-child(odd) .dev{transform:translateY(18px)}
.screen:nth-child(odd) .dev:hover{transform:translateY(10px)}
.screen figcaption{margin-top:clamp(20px,2.4vw,30px); text-align:center}
.screen b{display:block; font-family:var(--fd); font-size:.9375rem; font-weight:700;
  color:var(--txt); margin-bottom:7px}
.screen span{display:block; font-size:.8125rem; line-height:1.75; color:var(--txt-3);
  max-width:26ch; margin-inline:auto}
.screen i{font-style:normal; display:inline-block; font-family:var(--fd); font-size:.625rem;
  font-weight:800; letter-spacing:.14em; color:var(--gold); margin-bottom:9px}
@media (max-width:980px){ .screens{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .screens{grid-template-columns:1fr} .screen:nth-child(odd) .dev{transform:none} }

/* store buttons, real links */
.stores{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.stores a{display:inline-flex; align-items:center; gap:12px; padding:12px 22px; border-radius:14px;
  border:1px solid var(--line); transition:.35s var(--ease)}
.stores a:hover{border-color:rgba(230,168,0,.5); transform:translateY(-2px);
  background:rgba(255,255,255,.03)}
.stores b{display:block; font-family:var(--fd); font-weight:800; font-size:.9375rem; line-height:1.2}
.stores em{display:block; font-style:normal; font-size:.6875rem; color:var(--txt-3); margin-top:2px}
.stores svg{flex:none; color:var(--gold-hi)}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .slab{width:min(72%,560px)}
  .about6,.coffee6,.contact6{grid-template-columns:1fr}
  .about6-media{min-height:320px; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}
  .coffee6-media{clip-path:none}
  .idx-row{grid-template-columns:64px 1fr auto}
  .figs6-in{grid-template-columns:1fr 1fr}
  .figs6 .cell:nth-child(3)::before{display:none}
}
@media (max-width:640px){
  .hero3{min-height:auto; flex-direction:column}
  .hero3 .tagline{display:none}
  .hero3-media{position:relative; inset:auto; height:44svh; min-height:280px; z-index:0}
  .hero3-media::before{background:linear-gradient(to top, rgba(2,13,31,.55), rgba(2,13,31,0) 55%)}
  #field{display:none}
  .slab{width:100%; min-height:auto; clip-path:none; padding-top:46px;
    margin-top:-26px; border-radius:24px 24px 0 0; z-index:1}
  .slab > *{margin-inline-start:0}
  .idx-row{grid-template-columns:1fr; gap:8px; padding-block:24px}
  .idx-b{grid-column:auto}
  .idx-go{display:none}
  .idx-n{font-size:.95rem; padding-top:0}
  .vals6{grid-template-columns:1fr}
  .logo img{height:30px}
  .wa{width:52px; height:52px; inset-inline-start:18px; bottom:18px}
  .slab-cta{flex-direction:column; align-items:stretch}
  .slab-cta .btn-ink,.slab-cta .btn-inkline{justify-content:center}
}

/* =========================================================
   REFINEMENT PASS — calmer, more air, less ornament.
   Keeps the structure; removes the noise around it.
   ========================================================= */

/* ---- measure & ground ---- */
.mk{--maxw:1180px; --pad:clamp(22px,6vw,72px)}
.mk::after{opacity:.12}                 /* film grain: present, not felt */

/* ---- type: lighter weight, softer tracking, more air ---- */
.mk h1{font-weight:800; letter-spacing:-.03em}
.mk h2{font-weight:700; letter-spacing:-.018em; line-height:1.28}
.mk h3{font-weight:700; letter-spacing:-.015em}
.mk p{letter-spacing:0}
.mk .rail{border-block:0; border-top:1px solid var(--line-2);
  padding-block:20px; letter-spacing:.14em; font-weight:700}

/* ---- rhythm ---- */
.sec{padding-block:clamp(92px,12vw,180px)}
.quiet{padding-block:clamp(52px,7vw,90px)}

/* ---- buttons: flat. no gradient, no glow ---- */
.mk .btn{font-weight:700; padding:16px 32px; border-radius:100px}
.mk .btn-gold{background:var(--gold); color:#04142E; box-shadow:none;
  border-color:transparent}
.mk .btn-gold:hover{background:var(--gold-hi); transform:translateY(-2px); box-shadow:none}
.mk .btn-line{background:transparent; backdrop-filter:none; border-color:var(--line)}
.mk .btn-line:hover{transform:translateY(-2px); border-color:rgba(230,168,0,.5)}
.mk .btn-sm{padding:11px 22px}
.mk .btn-ink{border-radius:100px; box-shadow:none}
.mk .btn-ink:hover{box-shadow:none; transform:translateY(-2px)}

/* ---- hero slab: calmer ---- */
.slab::before{opacity:.16}
.slab h1{letter-spacing:-.035em; line-height:1.12}
.slab p{line-height:2; margin-bottom:40px}
.slab-cta{margin-bottom:52px}
.slab-kpis{padding-top:36px}

/* ---- nav: thinner, quieter ---- */
.nav-links{background:rgba(2,13,31,.72); border-color:rgba(255,255,255,.07);
  box-shadow:none}
.nav .btn-sm.btn-gold{background:transparent; color:var(--gold-hi);
  border:1px solid rgba(230,168,0,.4); box-shadow:none}
.nav .btn-sm.btn-gold:hover{background:var(--gold); color:#04142E; border-color:var(--gold)}
.nav-burger{background:rgba(2,13,31,.72); box-shadow:none}

/* =============== HOMEPAGE =============== */

/* services index: more air, fewer lines */
.idx-row{padding-block:clamp(30px,4vw,48px)}
.idx-t{font-weight:700; letter-spacing:-.02em}
.idx-b p{line-height:1.95}
.idx-tags li{border:0; background:rgba(255,255,255,.04); color:var(--txt-3);
  border-radius:5px; padding:6px 12px; font-weight:600}
.idx-go{opacity:.55}
.idx-row:hover .idx-go{opacity:1}

/* client / platform logos: no boxes */
.logo-c{border:0 !important; background:transparent !important; box-shadow:none !important}
.logo-c::after{display:none}
.logo-c:hover{transform:none}

/* stat figures: plain numbers, no cells */
.figs6-in{border:0}
.figs6 .cell{border:0; background:transparent}
.figs6 .cell::before{display:none}

/* testimonials: flat, hairline only */
.vc{background:transparent; border-top:1px solid var(--line-2);
  border-radius:0; padding:30px 26px 24px}
.vc:hover{background:rgba(255,255,255,.02); border-top-color:rgba(230,168,0,.5)}
.vc::before{color:rgba(230,168,0,.14)}

/* dashboard card: quieter shadow */
.lume{box-shadow:0 30px 70px -34px rgba(0,0,0,.8); border-color:var(--line-2)}

/* =============== SERVICES PAGE =============== */
.svhero{padding-bottom:clamp(40px,5vw,64px)}
.svhero h1{font-size:clamp(2.3rem,4.8vw,4rem); letter-spacing:-.035em; line-height:1.1}
.svhero .sub{font-size:1.0938rem; line-height:2.1}

/* index chips: text, not boxes */
.svtoc{padding-top:30px}
.svtoc-l{gap:0 clamp(20px,3vw,44px)}
.svtoc-l a{border:0; border-radius:0; padding:10px 0;
  transition:color .3s var(--ease), transform .3s var(--ease)}
.svtoc-l a:hover{background:transparent; transform:none}
.svtoc-l a:hover b{color:var(--gold-hi)}
.svtoc-l i{opacity:.75}

/* one service: much more air */
.svp-in{padding-block:clamp(60px,8vw,124px)}
.svp-side h2{font-size:clamp(1.7rem,3vw,2.6rem); font-weight:700; letter-spacing:-.025em}
.svp-n{letter-spacing:.14em; font-weight:700; margin-bottom:18px}
.svp-lead{line-height:2.05; margin-bottom:30px}
.svp-long{line-height:2.15}
.svp-deep{gap:32px}
.svp-q p{line-height:2.1}
.svp-col h4{border-bottom:0; padding-bottom:0; margin-bottom:18px; letter-spacing:.14em}
.svp-del li::before{width:5px; height:5px; border-radius:50%; transform:none;
  margin-top:.72em; opacity:.85}
.svp-steps li::before{border:0; padding:0; color:var(--gold); opacity:.8}
.svp-steps li{padding-inline-start:28px}
.svp-tools span{border:0; background:rgba(255,255,255,.045); padding:7px 13px}
.svp-faq summary{padding:18px 0}
.svp-faq summary::before{border:0; color:var(--gold); font-size:1.15rem}

/* the gold band: flat, not a gradient */
.svband{background:var(--gold)}
.svband::before{opacity:.2}
.svband h3{font-weight:700; letter-spacing:-.02em}

/* =============== PLATFORM PAGE =============== */
.feat{background:transparent; border:0; border-top:1px solid var(--line-2);
  border-radius:0}
.feat:hover{background:rgba(255,255,255,.02)}
.demo6{background:var(--gold)}

@media (max-width:640px){
  .sec{padding-block:clamp(64px,14vw,96px)}
  .svp-in{padding-block:56px}
}

/* ---------- round 2 ---------- */
.mk{--maxw:1240px}

/* client & platform logos: one calm register, colour on hover */
/* every mark rendered pure white at one weight — a calm client wall */
.logo-c img{max-height:46px; max-width:158px; width:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.6;
  transition:opacity .4s var(--ease), transform .4s var(--ease)}
.logo-c:hover img{filter:brightness(0) invert(1); opacity:1; transform:none}
.logo-c.pf img{max-height:28px; max-width:112px; opacity:.5}
.logo-c.pf:hover img{filter:brightness(0) invert(1); opacity:1}
.logo-c.gb img{filter:brightness(0) invert(1); opacity:.5}
.logo-c.gb:hover img{opacity:1}

/* the giant brand marquee: a whisper, not a shout */
.giant{opacity:.5}

/* services hero: centred, one measure, lots of air */
.svhero{padding-top:clamp(140px,16vh,196px)}
.svhero-g{grid-template-columns:1fr; justify-items:center; text-align:center; gap:22px}
.svhero-g > div{display:flex; flex-direction:column; align-items:center}
.svhero .rail{justify-content:center; border:0; padding-block:0; margin-bottom:6px}
.svhero .rail::after{display:none}
.svhero h1{max-width:16ch}
.svhero .sub{max-width:58ch; text-align:center}
.svtoc{text-align:center; border-top:1px solid var(--line-2)}
.svtoc-l{justify-content:center}

/* ---------- round 3 : the hero slab, made finer ---------- */
.slab{
  background:
    radial-gradient(120% 80% at 88% 4%, rgba(255,255,255,.16), transparent 58%),
    radial-gradient(90% 60% at 8% 100%, rgba(2,13,31,.55), transparent 62%),
    linear-gradient(158deg,#0B67B4 0%,#0A4E8C 44%,#052F55 100%);
}
/* a hairline of gold riding the diagonal edge */
.slab::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to bottom, rgba(240,192,64,.9), rgba(240,192,64,.28) 55%, rgba(240,192,64,0));
  clip-path:polygon(9% 0, 9.34% 0, .34% 100%, 0 100%)}
.slab::before{opacity:.1; background-size:52px 52px}

/* kicker: a fine gold rule, quieter type */
.slab .kick{font-size:.75rem; letter-spacing:.24em; font-weight:700;
  color:rgba(255,255,255,.72); margin-bottom:30px}
.slab .kick::before{width:30px; height:1px;
  background:linear-gradient(90deg,var(--gold-hi),rgba(240,192,64,.15))}

.slab h1{font-weight:800}
.slab p{color:rgba(255,255,255,.78); font-size:1rem; max-width:40ch}

/* CTA: a little smaller, less shouty */
.slab-cta .btn{padding:15px 30px; font-size:.9688rem}
.mk .slab-cta .btn-ink{background:var(--gold); color:#04142E}
.mk .slab-cta .btn-ink:hover{background:var(--gold-hi)}
.mk .slab-cta .btn-inkline{border-color:rgba(255,255,255,.32); color:#fff}

/* KPIs: hairline-separated, gold figures, quiet labels */
.slab-kpis{border-top:1px solid rgba(255,255,255,.16); gap:0; padding-top:30px}
.slab-kpis > div{flex:1; min-width:0; padding-inline:clamp(10px,1.6vw,22px);
  border-inline-start:1px solid rgba(255,255,255,.12)}
.slab-kpis > div:first-child{padding-inline-start:0; border-inline-start:0}
.slab-kpis > div:last-child{padding-inline-end:0}
.slab-kpis b{color:var(--gold-hi); font-weight:800; font-size:clamp(1.55rem,2.3vw,2.15rem)}
.slab-kpis span{color:rgba(255,255,255,.6); font-weight:600; font-size:.75rem; margin-top:7px}

@media (max-width:640px){
  .slab::after{display:none}
  .slab-kpis > div{border-inline-start:0; padding-inline:0}
}

/* ---------- round 4 : the services dropdown, tightened ---------- */
.nd-p{width:min(322px,90vw); padding-top:14px}
.nd-pin{border-radius:16px; padding:6px}
.nd-i{gap:10px; padding:9px 11px; border-radius:10px}
.nd-i > i{font-size:.5625rem; padding:2px 4px; border-radius:4px; margin-top:3px}
.nd-i b{font-size:.8125rem; line-height:1.35}
.nd-i em{font-size:.6875rem; line-height:1.45; margin-top:1px; color:var(--txt-3)}
.nd-all{margin-top:4px; padding:11px 11px 9px; font-size:.75rem}
.nd-all svg{width:12px; height:12px}

/* ---------- round 5 : the hero panel becomes glass ---------- */
.hero3{align-items:center}
.slab{
  align-self:center;
  min-height:auto;
  width:min(44%, 596px);
  margin-inline-start:auto;
  margin-inline-end:clamp(18px,3.6vw,60px);
  margin-block:clamp(104px,13vh,150px) clamp(44px,7vh,82px);
  clip-path:none;
  border-radius:28px;
  overflow:hidden;
  padding:clamp(38px,4.2vw,56px) clamp(30px,3.2vw,46px);
  background:
    linear-gradient(158deg, rgba(28,94,162,.40) 0%, rgba(7,38,74,.52) 50%, rgba(2,13,31,.64) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);
  backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 -1px 0 rgba(0,0,0,.34) inset,
    0 44px 110px -44px rgba(0,0,0,.92);
}
/* the light that rides across the glass, replacing the old diagonal edge */
.slab::after{
  clip-path:none; inset:0; border-radius:inherit; z-index:1;
  background:linear-gradient(148deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 22%,
    rgba(255,255,255,0) 46%, rgba(255,255,255,0) 100%);
}
.slab::before{opacity:.07; border-radius:inherit}
.slab > *{position:relative; z-index:2; margin-inline-start:0}

.slab .kick{color:rgba(255,255,255,.78)}
.slab p{color:rgba(255,255,255,.82); max-width:44ch}
.slab-kpis{border-top-color:rgba(255,255,255,.18)}
.slab-kpis > div{border-inline-start-color:rgba(255,255,255,.14)}

@media (max-width:1080px){ .slab{width:min(62%,560px)} }
@media (max-width:640px){
  .hero3{align-items:stretch}
  .slab{width:auto; margin:-42px clamp(14px,4vw,22px) clamp(30px,6vh,52px);
    border-radius:24px; padding:34px 24px 32px}
  .slab-kpis > div{border-inline-start:0; padding-inline:0}
}

/* ---------- round 6 : platform headline, brought down to size ---------- */
.phero h1{font-size:clamp(1.9rem,3.5vw,3.05rem); font-weight:700;
  letter-spacing:-.022em; line-height:1.28; margin-bottom:20px}
.phero .lede{font-size:1rem; line-height:2.05; max-width:52ch}
.phero .chipnew{margin-bottom:20px}
.phero-cta{margin-bottom:26px}

/* ---------- round 7 : global scale (site-wide zoom), esp. home hero ---------- */
html{font-size:15.3px}
.slab h1{font-size:clamp(2.3rem,4vw,3.7rem)}
.slab p{font-size:1rem; line-height:1.92}
.hero3 .tagline{font-size:clamp(.95rem,1.32vw,1.14rem)}
.giant-t b{font-size:clamp(3rem,7.6vw,6.2rem)}
.slab-kpis b{font-size:clamp(1.55rem,2.3vw,2.15rem)}
.btn-ink,.btn-inkline{font-size:.96rem; padding:15px 30px}


/* =========================================================
   المدوّنة والصفحات الداخلية
   ========================================================= */
.bl-main{padding-top:clamp(96px,12vh,150px)}
.wrap-read{max-width:820px}
.bl-head{padding:clamp(28px,5vw,60px) 0 clamp(22px,3vw,34px)}
.bl-head .eyebrow{display:inline-block;font-family:var(--fd);font-size:.76rem;letter-spacing:.18em;
  color:var(--gold);margin-bottom:14px}
.bl-head h1{font-family:var(--fd);font-weight:800;line-height:1.25;text-wrap:balance;
  font-size:clamp(1.9rem,4.4vw,3.2rem);margin:0}
.bl-lede{color:var(--txt-2);margin:16px 0 0;max-width:64ch;line-height:1.95}

.bl-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  padding-bottom:clamp(40px,6vw,80px)}
.bl-card{background:var(--elev);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.bl-card:hover{border-color:rgba(230,168,0,.42);transform:translateY(-3px)}
.bl-cover{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--elev-2)}
.bl-cover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.bl-card:hover .bl-cover img{transform:scale(1.04)}
.bl-ph{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(0,112,192,.4),var(--ink) 70%)}
.bl-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.bl-meta{display:flex;gap:14px;font-size:.76rem;color:var(--txt-3);font-family:var(--fd)}
.bl-body h2{font-family:var(--fd);font-weight:700;font-size:1.12rem;line-height:1.5;margin:0}
.bl-body h2 a{color:var(--txt);text-decoration:none}
.bl-body h2 a:hover{color:var(--gold-hi)}
.bl-body p{margin:0;color:var(--txt-2);font-size:.9rem;line-height:1.9;flex:1}
.bl-more{font-family:var(--fd);font-size:.84rem;color:var(--gold);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;margin-top:4px}
.bl-more span{transition:transform .25s var(--ease)}
.bl-more:hover span{transform:translateX(-5px)}

.bl-hero{margin:0 0 clamp(26px,4vw,46px)}
.bl-hero img{width:100%;height:auto;border-radius:22px;display:block;border:1px solid var(--line)}

.bl-content{font-size:1.03rem;line-height:2.1;color:#DCE7F5}
.bl-content > * + *{margin-top:1.15em}
.bl-content h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.75rem);
  color:var(--txt);margin-top:2em;line-height:1.45}
.bl-content h3{font-family:var(--fd);font-weight:600;font-size:1.18rem;color:var(--txt);margin-top:1.7em}
.bl-content a{color:var(--gold-hi);text-underline-offset:4px}
.bl-content ul,.bl-content ol{padding-inline-start:1.35em}
.bl-content li + li{margin-top:.55em}
.bl-content img{max-width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.bl-content blockquote{border-inline-start:3px solid var(--gold);padding-inline-start:22px;
  color:var(--txt-2);font-style:normal}
.bl-content pre{background:var(--void);border:1px solid var(--line);border-radius:14px;padding:18px;
  overflow-x:auto;direction:ltr;text-align:left;font-size:.86rem}
.bl-content code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em}
.bl-content table{width:100%;border-collapse:collapse;font-size:.92rem}
.bl-content th,.bl-content td{border:1px solid var(--line);padding:10px 13px;text-align:right}
.bl-content figure{margin:1.6em 0}
.bl-content figcaption{font-size:.8rem;color:var(--txt-3);margin-top:9px;text-align:center}

.bl-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:44px}
.bl-tags a{font-size:.78rem;font-family:var(--fd);color:var(--lav);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:6px 15px;background:var(--glass)}
.bl-tags a:hover{border-color:var(--gold);color:var(--gold-hi)}

.bl-nav{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:44px}
.bl-nav-i{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:16px;
  background:var(--elev);text-decoration:none}
.bl-nav-i:hover{border-color:rgba(230,168,0,.42)}
.bl-nav-i small{display:block;font-size:.72rem;color:var(--txt-3);margin-bottom:6px;font-family:var(--fd)}
.bl-nav-i b{font-family:var(--fd);font-weight:600;font-size:.98rem;color:var(--txt);line-height:1.55}

.bl-cta{margin:50px 0 20px;padding:clamp(28px,4vw,44px);border-radius:22px;
  background:linear-gradient(120deg,rgba(230,168,0,.14),var(--elev) 70%);
  border:1px solid rgba(230,168,0,.32)}
.bl-cta h3{font-family:var(--fd);font-weight:700;font-size:1.45rem;margin:0 0 8px}
.bl-cta p{margin:0 0 22px;color:var(--txt-2)}

.bl-pag{padding-bottom:clamp(50px,7vw,90px)}
.bl-pag .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bl-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;
  height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line);color:var(--txt-2);
  text-decoration:none;font-family:var(--fd);font-size:.88rem}
.bl-pag .page-numbers:hover{border-color:var(--gold);color:var(--gold-hi)}
.bl-pag .page-numbers.current{background:var(--gold);border-color:var(--gold);color:#04142E;font-weight:700}

.bl-empty{padding:clamp(40px,7vw,90px) 0;text-align:center}
.bl-empty h2{font-family:var(--fd);font-size:1.5rem;margin-bottom:10px}
.bl-empty p{color:var(--txt-2)}

.bl-search{display:flex;gap:9px;max-width:420px;margin:0 auto}
.bl-search input{flex:1;background:var(--void);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;color:var(--txt);font-family:var(--fb);font-size:.9rem}
.bl-search input:focus{outline:2px solid var(--gold);outline-offset:2px}
.bl-search button{background:var(--gold);color:#04142E;border:0;border-radius:12px;
  padding:12px 24px;font-family:var(--fd);font-weight:600;cursor:pointer;font-size:.88rem}
.bl-search button:hover{background:var(--gold-hi)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr}
}