:root{--bg:#ffffff;--alt:#f6f7f9;--card:#ffffff;--line:#e7e9ee;--line2:#d6d9df;--ink:#121317;--body:#4a4e57;--mut:#828892;--accent:#000000;--accent-dk:#23262e;--accent-soft:#aab0b9;--navy:#101216;--ok:#1b8a55}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:'Inter',system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.65}
body[dir=rtl]{font-family:'IBM Plex Sans Arabic','Inter',Arial,sans-serif}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;line-height:1.16;margin:0;color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
.eyebrow::before{content:"";display:inline-block;width:20px;height:2px;background:var(--accent);border-radius:2px;margin-inline-end:9px;vertical-align:middle}
.herobig .eyebrow::before,.pagehead .eyebrow::before{background:var(--accent-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:12px 20px;font-weight:600;font-size:14.5px;cursor:pointer;border:1px solid transparent;transition:.18s;white-space:nowrap;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk);transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#0f1a2c;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--navy);background:var(--alt)}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo-img{height:54px;display:block}
.nlinks{display:flex;gap:26px;font-size:14px;color:var(--body);font-weight:500}
.nlinks a{position:relative;padding:4px 0}
.nlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.nlinks a:hover{color:var(--ink)}
.nlinks a:hover::after,.nlinks a.active::after{transform:scaleX(1)}
.nlinks a.active{color:var(--accent)}
.nav-r{display:flex;align-items:center;gap:12px}
.lang{background:none;border:1px solid var(--line2);color:var(--body);border-radius:7px;padding:7px 11px;font-size:13px;cursor:pointer;font-family:inherit}
.lang:hover{border-color:var(--navy);color:var(--ink)}
/* mobile hamburger + slide-down menu */
.nburger{display:none;background:none;border:0;cursor:pointer;padding:9px 6px;flex-direction:column;gap:4px}
.nburger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
nav.open .nburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.open .nburger span:nth-child(2){opacity:0}
nav.open .nburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none;background:#fff;border-top:1px solid var(--line);padding:6px 22px 18px}
.mnav a{display:block;padding:12px 2px;font-size:15px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav a.active{color:var(--accent)}
.mnav .btn{display:flex;margin-top:14px;width:100%;justify-content:center;border-bottom:0;color:#fff}
nav.open .mnav{display:block}
@media(min-width:861px){.mnav{display:none!important}}
/* entrance animation */
[data-anim]{opacity:0;transform:translateY(22px)}
body.loaded [data-anim]{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
body.loaded [data-anim="1"]{transition-delay:.08s}
body.loaded [data-anim="2"]{transition-delay:.2s}
body.loaded [data-anim="3"]{transition-delay:.32s}
body.loaded [data-anim="4"]{transition-delay:.44s}
body.loaded [data-anim="5"]{transition-delay:.56s}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-anim],.reveal{opacity:1!important;transform:none!important}}
/* dark hero (Home) */
.herobig{position:relative;color:#fff;text-align:center;padding:130px 0 118px;overflow:hidden}
/* PERF: the Ken-Burns zoom (heroKB) animated scale on a full-viewport element that also carries a
   filter chain — the GPU re-composited the whole screen every frame for ~30s after load, the main
   "landing page is laggy" cause. The 7%-over-30s zoom was imperceptible; a static scale looks the
   same and costs one raster. */
.herobig::before{content:"";position:absolute;inset:0;background:#0b1626 url(/ops-room.jpg) center/cover;z-index:0;transform:scale(1.04)}
.herobig::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(9,15,26,.74),rgba(9,15,26,.9));z-index:1}
.herobig .wrap{position:relative;z-index:2}
.herobig .eyebrow{color:var(--accent-soft)}
.herobig h1{color:#fff;font-size:50px;letter-spacing:-.5px;max-width:900px;margin:0 auto}
.herobig p{color:#cfd8e6;font-size:18px;max-width:700px;margin:22px auto 0}
.accent-line{width:120px;height:3px;background:var(--accent);margin:26px auto}
.herobig .hero-ctas{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.herobig .status{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.pagehead{background:var(--navy);color:#fff;padding:64px 0 60px;position:relative}
.pagehead .eyebrow{color:var(--accent-soft)}
.pagehead h1{color:#fff;font-size:40px}
.pagehead p{color:#c3cedd;font-size:16.5px;max-width:680px;margin-top:14px}
/* shared content */
.status{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.pill{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px 12px;font-size:12.5px;color:#dfe6f0}
.pill b{color:#fff;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:#36d399;box-shadow:0 0 7px rgba(54,211,153,.6)}
.shotframe{background:#0b1626;border:1px solid var(--line2);border-radius:16px;padding:10px;box-shadow:0 22px 50px -24px rgba(22,35,58,.4)}
.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--alt)}
.metrics-in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.metric{padding:26px 14px;border-inline-start:1px solid var(--line)}
.metric:first-child{border-inline-start:0}
.metric .n{font-family:'Space Grotesk';font-size:22px;font-weight:700;color:var(--ink)}
.metric .l{font-size:12.5px;color:var(--mut);margin-top:4px}
section.blk{padding:72px 0}
section.alt{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blk h2{font-size:32px;letter-spacing:-.3px;max-width:720px}
.blk .lead{color:var(--body);font-size:16.5px;max-width:660px;margin-top:14px}
.center{text-align:center}.center h2,.center .lead{margin-left:auto;margin-right:auto}
.whatgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:10px}
.whatlist{list-style:none;padding:0;margin:22px 0 0}
.whatlist li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--body)}
.whatlist li:first-child{border-top:0}
.whatlist b{color:var(--ink);font-weight:600}
.chk{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(27,138,85,.12);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:34px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px 20px;box-shadow:0 1px 3px rgba(22,35,58,.04);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(22,35,58,.3)}
.card .shot{background:#0b1626;border-radius:10px;overflow:hidden;border:1px solid var(--line2);position:relative}
.card .shot img{width:100%;display:block;transition:transform .5s}
.card:hover .shot img,.card:focus-within .shot img{transform:scale(1.04)}
/* hover brief overlay — images stay full colour, no grayscale */
.card .shot .sbrief{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px 16px 15px;background:linear-gradient(transparent 36%,rgba(7,13,24,.5) 60%,rgba(4,9,17,.94));opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover .shot .sbrief,.card:focus-within .shot .sbrief{opacity:1}
.card .shot .sbrief span{color:#eaf0f8;font-size:12.5px;line-height:1.55;font-weight:500;transform:translateY(9px);transition:transform .4s}
.card:hover .shot .sbrief span,.card:focus-within .shot .sbrief span{transform:translateY(0)}
.card h3{font-size:18.5px;margin:15px 0 6px}
.card p{color:var(--body);font-size:13px;margin:0;line-height:1.6}
.linkmore{display:inline-block;margin-top:13px;color:var(--accent);font-weight:600;font-size:13.5px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:30px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:17px 18px;box-shadow:0 1px 3px rgba(22,35,58,.04)}
.tile .th{display:flex;justify-content:space-between;align-items:center}
.tile h3{font-size:15.5px}
.tag{font-size:9.5px;font-weight:700;color:#fff;border-radius:20px;padding:2px 9px;letter-spacing:.04em}
.tag.live{background:var(--ok)}.tag.soon{background:#b58a00}
.tile p{color:var(--body);font-size:12.6px;margin:9px 0 0;line-height:1.55}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:30px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 18px}
.step::before{counter-increment:s;content:counter(s);font-family:'Space Grotesk';font-weight:700;color:var(--accent);font-size:13px;border:1px solid var(--accent);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.step h3{font-size:16px;margin-bottom:6px}.step p{color:var(--body);font-size:13px;margin:0}
.servicecard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(22,35,58,.05);transition:transform .25s,box-shadow .25s}
.servicecard:hover{transform:translateY(-5px);box-shadow:0 22px 44px -22px rgba(22,35,58,.32)}
.servicecard .shotwrap{background:#0b1626;overflow:hidden}
.servicecard .shotwrap img{width:100%;height:230px;object-fit:cover;display:block;transition:transform .5s}
.servicecard:hover .shotwrap img{transform:scale(1.05)}
.servicecard .body{padding:22px 22px 26px}
.servicecard h3{font-size:20px;margin-bottom:10px}
.servicecard p{color:var(--body);font-size:14px;margin:0;line-height:1.6}
.contact{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:38px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;box-shadow:0 1px 3px rgba(22,35,58,.04)}
.contact h2{font-size:28px}
.form label{display:block;font-size:12.5px;color:var(--mut);margin:13px 0 5px}
.form input,.form textarea{width:100%;background:#fbfcfe;border:1px solid var(--line2);border-radius:8px;padding:11px 13px;color:var(--ink);font-family:inherit;font-size:14px}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--navy)}
.form textarea{min-height:84px;resize:vertical}
.form .btn{margin-top:18px;width:100%;justify-content:center}
.formmsg{font-size:13px;margin-top:12px;display:none}
footer{background:var(--navy);color:#aeb9c9;padding:46px 0 30px;font-size:13px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-about p{margin:14px 0 0;line-height:1.6;color:#93a1b5;font-size:12.5px;max-width:340px}
.foot-col h4{color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;font-family:'Space Grotesk'}
.foot-col a{display:block;padding:5px 0;color:#aeb9c9}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding-top:18px;color:#7f8da1;font-size:12px}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot-in a:hover{color:#fff}
.disc{font-size:11.5px;color:#7f8da1;max-width:680px;line-height:1.5;margin:0}
.form-consent{font-size:12px;line-height:1.55;color:var(--muted,#6b7688);margin:12px 0 0}
.form-consent a{color:var(--accent-soft,#2b5cc4);font-weight:600}
.form-consent a:hover{text-decoration:underline}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr;gap:26px}}
.whofor{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:34px}
.wf{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 16px;text-align:center;box-shadow:0 1px 3px rgba(22,35,58,.04);transition:transform .2s,box-shadow .2s}
.wf:hover{transform:translateY(-4px);box-shadow:0 18px 38px -22px rgba(14,23,38,.42);border-color:var(--ink)}
.wf .ic{width:54px;height:54px;border-radius:15px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin:0 auto 15px;color:#fff;transition:transform .2s,background .2s}
.wf:hover .ic{background:#0a1422;transform:scale(1.07) rotate(-3deg)}
.wf .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wf .lbl{font-family:'Space Grotesk';font-weight:600;color:var(--ink);font-size:14.5px}
.ptabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:28px;border-bottom:1px solid var(--line)}
.ptab{padding:11px 18px;font-size:14px;font-weight:600;color:var(--mut);cursor:pointer;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font-family:inherit}
.ptab.on{color:var(--ink);border-bottom-color:var(--accent)}
.ptab:hover{color:var(--ink)}
.ppane{display:none;margin-top:28px}
.ppane.on{display:block}
.pgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:38px;align-items:center}
.pgrid h3{font-size:21px;margin-bottom:14px}
.srcchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.srcchip{font-size:12.5px;color:var(--ink);background:var(--alt);border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-weight:500}
.bframe{background:#0b1626;border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 22px 50px -24px rgba(22,35,58,.4);margin-top:30px}
.bf-bar{height:30px;background:#142539;display:flex;align-items:center;gap:6px;padding:0 13px}
.bf-dot{width:8px;height:8px;border-radius:50%}
.bf-url{margin-inline-start:10px;font-size:11px;color:#8aa0bf}
.bframe img{width:100%;display:block}
.phone-shot{justify-self:center;width:248px;background:#16233a;border-radius:38px;padding:10px;box-shadow:0 28px 64px -26px rgba(22,35,58,.5)}
.phone-shot img{width:100%;display:block;border-radius:28px}
.bespoke{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;border:1px solid var(--line);border-radius:20px;padding:40px 44px;background:linear-gradient(135deg,rgba(16,18,22,.03),rgba(16,18,22,.005))}
.bespoke-txt h2{margin:10px 0 14px}
.bespoke-txt p{color:var(--muted);max-width:560px;margin:0 0 22px;line-height:1.7}
.bespoke-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bespoke-list li{position:relative;padding-inline-start:30px;font-weight:600;color:var(--ink);line-height:1.5}
.bespoke-list li::before{content:"";position:absolute;inset-inline-start:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}
@media(max-width:820px){.bespoke{grid-template-columns:1fr;gap:26px;padding:30px 24px}}
.field{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:34px}
.fcard{border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--line);outline:none}
.fcard img{width:100%;height:230px;object-fit:cover;display:block;filter:grayscale(.95) contrast(1.03) brightness(.8);transition:transform .5s,filter .5s}
.fcard:hover img,.fcard:focus img,.fcard:focus-within img{transform:scale(1.05);filter:grayscale(0) contrast(1.03) brightness(.92)}
.fcard .cap{position:absolute;inset-inline:0;bottom:0;padding:28px 16px 13px;background:linear-gradient(transparent,rgba(8,14,24,.9));color:#fff;font-family:'Space Grotesk';font-weight:600;font-size:15px;transition:opacity .3s}
/* hover/focus brief overlay */
.fcard .fov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 18px;background:linear-gradient(transparent 22%,rgba(8,14,24,.62) 52%,rgba(5,10,18,.94));opacity:0;transition:opacity .35s}
.fcard:hover .fov,.fcard:focus .fov,.fcard:focus-within .fov{opacity:1}
.fcard:hover .cap,.fcard:focus .cap,.fcard:focus-within .cap{opacity:0}
.fov-t{font-family:'Space Grotesk';font-weight:600;font-size:16px;color:#fff;padding-bottom:9px;margin-bottom:9px;position:relative}
.fov-t::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:34px;height:3px;background:var(--accent-soft,#e0483d);border-radius:2px}
.fov-b{font-size:12.5px;line-height:1.6;color:#d3dbe6;transform:translateY(9px);transition:transform .4s}
.fcard:hover .fov-b,.fcard:focus .fov-b,.fcard:focus-within .fov-b{transform:translateY(0)}
body[dir=rtl] .fov-t::after{inset-inline-start:0}
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:60px 0}
.cta-band h2{color:#fff;font-size:30px}
.cta-band p{color:#c3cedd;margin:14px auto 26px;max-width:560px}
.cta-band .btn-primary{background:#fff;color:#0b1220}
.cta-band .btn-primary:hover{background:#e7ecf6;color:#0b1220}
@media(max-width:860px){
  .nlinks{display:none}
  .nburger{display:flex}
  .nav-r>.btn{display:none}   /* CTA lives inside the mobile menu; keeps the bar from overflowing */
  .nav-r{gap:8px}
  .herobig h1{font-size:33px}.pagehead h1{font-size:30px}
  .hero-grid,.whatgrid,.pgrid,.chmeta{grid-template-columns:1fr;gap:28px}
  .metrics-in{grid-template-columns:1fr 1fr}.metric:nth-child(odd){border-inline-start:0}
  .contact{grid-template-columns:1fr;padding:26px}.blk h2{font-size:26px}.whofor{grid-template-columns:1fr 1fr}
}

/* ===================== PREMIUM FLOATING-DEVICES HERO (index) ===================== */
.phero{position:relative;overflow:hidden;background:#070b12;color:#fff;padding:96px 0 46px;isolation:isolate}
.phero-bg{position:absolute;inset:0;z-index:0;background:#06070a;overflow:hidden}
.phero-bg::before{content:"";position:absolute;inset:0;background:#0b0e13 url(/ops-room.jpg) center/cover;filter:grayscale(1) brightness(.42) contrast(1.04);transform:scale(1.04)}   /* PERF: static — see .herobig::before note; animating scale under this filter chain re-composited the full viewport every frame */
.phero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,10,.5),rgba(6,7,10,.72) 55%,rgba(6,7,10,.94))}
.phero-grid,.phero-iraq,.phero-nodes{display:none!important}
.phero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(96,146,226,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(96,146,226,.085) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(120% 78% at 50% 32%,#000 26%,transparent 76%);mask-image:radial-gradient(120% 78% at 50% 32%,#000 26%,transparent 76%)}
.phero-iraq{position:absolute;top:7%;left:50%;transform:translateX(-50%);width:min(1040px,122%);height:auto;fill:none;stroke:rgba(122,172,255,.11);stroke-width:.35;filter:drop-shadow(0 0 14px rgba(60,120,240,.14))}
.phero-nodes{position:absolute;top:9%;left:0;width:100%;height:auto;opacity:.55;pointer-events:none}
.phero-nodes line{stroke:rgba(122,172,255,.16);stroke-width:.14}
.phero-nodes circle{fill:#5b8df5}
.phero-nodes .n1{animation:pnode 3.2s ease-in-out infinite}
.phero-nodes .n2{animation:pnode 3.9s ease-in-out infinite .6s}
.phero-nodes .n3{animation:pnode 4.5s ease-in-out infinite 1.1s}
@keyframes pnode{0%,100%{opacity:.3}50%{opacity:1}}
.phero-glow{position:absolute;left:50%;top:56%;width:880px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.10),rgba(255,255,255,.03) 55%,transparent 72%);filter:blur(26px);z-index:0}
.phero-copy{position:relative;z-index:3;text-align:center}
.phero-logo{height:74px;width:auto;display:block;margin:0 auto 30px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
.phero-copy .eyebrow{color:#c2ccd7;margin-bottom:16px}
.phero-copy .eyebrow::before{display:none}
.phero-copy h1{color:#fff;font-size:clamp(30px,4.6vw,48px);letter-spacing:-.6px;max-width:none;white-space:nowrap;margin:0 auto;line-height:1.1}
.phero-copy p{color:#b4b9c1;font-size:16.5px;max-width:680px;margin:20px auto 0;line-height:1.62}
@media(max-width:720px){.phero-copy h1{white-space:normal;font-size:clamp(26px,7vw,34px)}}
.phero-copy .hero-ctas{display:flex;gap:13px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.phero-copy .status{justify-content:center;margin-top:22px}
/* black-accent scheme: on the dark hero the primary CTA is white (a black button would vanish) */
.phero-copy .btn-primary{background:#fff;color:#0b1220}
.phero-copy .btn-primary:hover{background:#e7ecf6;color:#0b1220}
/* stage */
.phero-stage{position:relative;z-index:2;height:600px;max-width:1180px;margin:24px auto 0;transform:translateY(var(--sy,0))}
.pf{position:absolute;will-change:transform}
.pf-fl{will-change:transform}
.pf-in{opacity:0;transform:translateY(28px) scale(.985);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
body.loaded .pf-in{opacity:1;transform:none}
body.loaded .pf-laptop .pf-in{transition-delay:.12s}
body.loaded .pf-report .pf-in{transition-delay:.30s}
body.loaded .pf-journey .pf-in{transition-delay:.42s}
body.loaded .pf-phone .pf-in{transition-delay:.54s}
body.loaded .pf-live .pf-in{transition-delay:.72s}
.pf-laptop .pf-fl{animation:pfl1 8s ease-in-out infinite}
.pf-phone .pf-fl{animation:pfl2 7s ease-in-out infinite}
.pf-report .pf-fl{animation:pfl3 9s ease-in-out infinite}
.pf-journey .pf-fl{animation:pfl2 8.6s ease-in-out infinite .4s}
.pf-live .pf-fl{animation:pfl3 6.6s ease-in-out infinite .2s}
@keyframes pfl1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pfl2{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pfl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* laptop */
.pf-laptop{left:50%;top:64px;width:648px;margin-left:-324px}
.lt-screen{background:#151a23;border:1px solid rgba(255,255,255,.10);border-radius:15px 15px 4px 4px;padding:11px 11px 0;box-shadow:0 44px 96px -34px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4)}
.lt-screen img{width:100%;display:block;border-radius:7px}
.lt-base{height:15px;background:linear-gradient(#c6cfda,#8d97a6 42%,#59636f);border-radius:0 0 12px 12px;margin:0 -15px;position:relative;box-shadow:0 22px 44px -14px rgba(0,0,0,.7)}
.lt-base::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:rgba(255,255,255,.45)}
.lt-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:116px;height:6px;background:#333b47;border-radius:0 0 7px 7px}
/* phone */
.pf-phone{left:2%;top:252px;width:188px}
.phone{position:relative;background:#0c0f16;border:1px solid rgba(255,255,255,.13);border-radius:32px;padding:9px;box-shadow:0 36px 72px -26px rgba(0,0,0,.85)}
.ph-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:54px;height:15px;background:#0c0f16;border-radius:0 0 12px 12px;z-index:2}
.ph-scr{border-radius:24px;overflow:hidden}
.ph-scr img{width:100%;display:block}
/* glass cards */
.gcard{border-radius:14px;overflow:hidden;background:rgba(17,19,24,.58);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 32px 74px -28px rgba(0,0,0,.82)}
.gc-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.gc-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.gc-t{margin-inline-start:8px;font-size:11px;color:#aebdd4;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard img{width:100%;display:block}
.pf-report{right:0;top:0;width:346px}
.pf-journey{right:2%;top:338px;width:322px}
/* live chip */
.pf-live{left:19%;top:150px}
.livechip{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:12px;background:rgba(17,19,24,.72);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 22px 54px -22px rgba(0,0,0,.82)}
/* PERF: the pulse ring is a ::after animating transform+opacity (compositor-only) — the old
   box-shadow keyframes repainted every frame, forever. */
.lc-pulse{position:relative;width:11px;height:11px;border-radius:50%;background:#36d399;flex:none}
.lc-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(54,211,153,.5);animation:lcpulse 2s ease-out infinite;pointer-events:none}
@keyframes lcpulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}
.lc-h{font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff}
.lc-s{font-size:11px;color:#9fb0c8;margin-top:1px}
@media(prefers-reduced-motion:reduce){.pf-fl{animation:none!important}.phero-nodes circle{animation:none}.lc-pulse{animation:none}.phero-stage{transform:none!important}}
@media(max-width:860px){
  .phero{padding:78px 0 34px}
  .phero-stage{height:auto;transform:none!important;margin:26px auto 0;display:flex;flex-direction:column;align-items:center}
  .pf{position:relative;inset:auto!important;margin:0!important;width:auto!important;transform:none!important}
  .pf-fl{animation:none!important}.pf-in{opacity:1;transform:none}
  .pf-report,.pf-journey,.pf-live{display:none}
  .pf-laptop{width:100%!important;max-width:540px}
  .pf-phone{width:150px!important;align-self:flex-end;margin-top:-52px!important;margin-inline-end:12px!important}
  .phero-iraq{opacity:.6}
}