@font-face{font-family:"Somar";src:url("../fonts/somar-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Somar";src:url("../fonts/somar-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Somar";src:url("../fonts/somar-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* ==========================================================================
   Astra Telecom — Direction A "Star Trail"
   Colours: astra-brand.css (2023 identity vector source)
   Typeface: Somar — drop the files into /assets/fonts/ and it activates.
   ========================================================================== */
:root{
  --t-soft:#7FD9F7;
  --indigo:#2A2A86; --indigo-900:#1D1D5D; --indigo-950:#1F1F5C;
  --turq:#40C8F4; --turq-300:#78D8F7; --turq-800:#0A80A6;
  --trail-start:#0077C1;
  --ground:#17174A; --panel:#1D1D5D; --line:#31317F;
  --white:#FFFFFF; --mut:#A2A2B3; --mut-2:#7B7B93;
  --trail:linear-gradient(28deg, #0077C1 0.0%, #007BC3 6.2%, #0080C6 12.5%, #0084C9 18.8%, #0088CC 25.0%, #008CCF 31.2%, #0691D2 37.5%, #0B96D5 43.8%, #0B9BD8 50.0%, #0BA0DB 56.2%, #0AA4DE 62.5%, #13A9E2 68.8%, #1CAFE5 75.0%, #26B5E9 81.2%, #30BBED 87.5%, #3AC2F1 93.8%, #40C8F4 100.0%);
  --font:"Somar", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ground);color:var(--mut);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--turq);outline-offset:3px;border-radius:3px}
img,svg{max-width:100%}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(9,9,22,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:104px}
.brand{display:flex;align-items:center}
.brand svg{width:92px;height:auto;display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14.5px;color:var(--mut);transition:color .18s}
.nav a:hover{color:var(--white)}
.lang{font-size:13.5px;color:var(--turq-300);border:1px solid var(--line);padding:6px 13px;border-radius:20px;transition:border-color .18s}
.lang:hover{border-color:var(--turq)}
.btn{display:inline-block;background:var(--turq);color:var(--ground);padding:11px 22px;border-radius:7px;font-weight:700;font-size:14.5px;transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(64,200,244,.6)}
.btn-ghost{display:inline-block;color:var(--turq-300);padding:11px 18px;font-size:14.5px;font-weight:600}
.burger{display:none;background:none;border:0;color:var(--white);font-size:24px;cursor:pointer;padding:6px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:96px 0 78px}
.hero .arc{position:absolute;left:-18%;top:-70%;width:136%;height:190%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 188deg at 50% 50%, transparent 0deg, rgba(64,200,244,.09) 42deg, rgba(0,119,193,.13) 84deg, transparent 132deg)}
.hero .wrap{position:relative;z-index:2}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--turq);margin:0 0 20px}
h1{font-size:clamp(38px,6.4vw,72px);line-height:1.02;letter-spacing:-.035em;color:var(--white);font-weight:700;margin:0 0 20px;max-width:15ch;text-wrap:balance}
h1 em{font-style:normal;background:var(--trail);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(16.5px,2vw,20px);max-width:52ch;margin:0 0 32px;color:var(--mut)}
.cta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- live metrics ---------- */
.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.metrics .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 26px}
.met{padding:26px 22px;border-right:1px solid var(--line)}
.met:last-child{border-right:none}
.met b{display:block;font-family:var(--mono);font-size:30px;color:var(--t-soft,#7FD9F7);letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.1}
.met>span{display:block;font-size:11px;color:var(--mut-2);letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.met b span{display:inline;letter-spacing:normal;text-transform:none;color:var(--turq)}
.spark{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:12px}
.spark u{flex:1;background:#5B7BC9;border-radius:1px;text-decoration:none;opacity:.6}
.spark u:last-child{background:var(--turq);opacity:1}

/* ---------- sections ---------- */
section{padding:88px 0}
.sec-head{margin-bottom:44px;max-width:60ch}
.sec-head .rule{height:3px;width:52px;border-radius:3px;background:var(--trail);margin-bottom:22px}
h2{font-size:clamp(28px,4.2vw,44px);line-height:1.08;letter-spacing:-.03em;color:var(--white);font-weight:700;margin:0 0 14px;text-wrap:balance}
.sec-head p{margin:0;font-size:17px;max-width:56ch}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{background:var(--indigo-950);border:1px solid var(--line);border-radius:12px;padding:26px 24px;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--turq-800);transform:translateY(-2px)}
.svc i{display:block;width:34px;height:3px;border-radius:3px;background:var(--trail);margin-bottom:18px}
.svc h3{font-size:19px;color:var(--white);margin:0 0 8px;font-weight:650;letter-spacing:-.015em}
.svc p{margin:0;font-size:14.5px;color:var(--mut-2);line-height:1.6}

/* coverage */
.cov{background:var(--indigo-950);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cov-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.cov-list{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.cov-item{display:flex;gap:14px;align-items:flex-start}
.cov-item i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--turq);margin-top:8px;box-shadow:0 0 0 4px rgba(64,200,244,.14)}
.cov-item b{display:block;color:var(--white);font-size:15.5px;font-weight:650}
.cov-item span{font-size:14px;color:var(--mut-2)}
.map{aspect-ratio:1/.82;border-radius:14px;background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden}
.map canvas{width:100%;height:100%;display:block}
.node{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--turq);box-shadow:0 0 0 5px rgba(64,200,244,.16)}
.node.warm{background:var(--trail-start);box-shadow:0 0 0 5px rgba(0,119,193,.2)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.price{background:var(--indigo-950);border:1px solid var(--line);border-radius:12px;padding:26px 22px;display:flex;flex-direction:column}
.price.feat{border-color:var(--turq);position:relative}
.price.feat::before{content:"Most chosen";position:absolute;top:-11px;left:22px;background:var(--turq);color:var(--ground);font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:3px 11px;border-radius:20px;text-transform:uppercase}
.price h3{font-size:16px;color:var(--white);margin:0 0 12px;font-weight:650}
.price .amt{font-family:var(--mono);font-size:38px;color:var(--white);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.price .amt sup{font-size:19px;color:var(--turq);vertical-align:super}
.price .per{font-size:13px;color:var(--mut-2);margin:6px 0 20px}
.price ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.price li{font-size:14px;color:var(--mut);padding-left:20px;position:relative}
.price li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;border-radius:2px;background:var(--turq)}
.price .buy{display:block;text-align:center;border:1px solid var(--line);color:var(--white);padding:11px;border-radius:7px;font-size:14px;font-weight:600;transition:border-color .18s,background .18s}
.price .buy:hover{border-color:var(--turq);background:rgba(64,200,244,.07)}
.price.feat .buy{background:var(--turq);color:var(--ground);border-color:var(--turq);font-weight:700}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
.stat{border-left:2px solid var(--turq);padding-left:16px}
.stat b{display:block;font-family:var(--mono);font-size:26px;color:var(--white);letter-spacing:-.02em}
.stat span{font-size:13.5px;color:var(--mut-2)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
.info{display:flex;flex-direction:column;gap:22px}
.info-item{display:flex;gap:15px;align-items:flex-start}
.info-item .ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:rgba(64,200,244,.1);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--turq);font-size:17px}
.info-item b{display:block;color:var(--white);font-size:14px;margin-bottom:2px;font-weight:650}
.info-item a,.info-item>div>span{color:var(--mut);font-size:15px}
.info-item a:hover{color:var(--turq-300)}
form{display:grid;gap:14px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:12.5px;color:var(--mut-2);margin-bottom:6px;letter-spacing:.03em}
input,textarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--white);font-family:var(--font);font-size:15px;transition:border-color .18s}
input:focus,textarea:focus{outline:none;border-color:var(--turq)}
textarea{resize:vertical;min-height:128px}
button[type=submit]{background:var(--turq);color:var(--ground);border:0;padding:13px 26px;border-radius:7px;font-family:var(--font);font-weight:700;font-size:15px;cursor:pointer;justify-self:start;transition:transform .18s}
button[type=submit]:hover{transform:translateY(-1px)}
.msg{font-size:14px;padding:11px 14px;border-radius:8px;display:none}
.msg.on{display:block}
.msg.ok{background:rgba(64,200,244,.1);border:1px solid var(--turq-800);color:var(--turq-300)}
.msg.err{background:rgba(240,120,140,.1);border:1px solid #6E2A38;color:#F0788C}

/* footer */
footer{border-top:1px solid var(--line);background:var(--panel);padding:60px 0 30px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer h4{font-size:13px;color:var(--white);margin:0 0 16px;letter-spacing:.05em;font-weight:650}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
footer a{font-size:14.5px;color:var(--mut-2);transition:color .18s}
footer a:hover{color:var(--turq-300)}
.f-brand svg{width:112px;height:auto;margin-bottom:18px}
.f-brand p{font-size:14px;color:var(--mut-2);margin:0 0 6px;max-width:34ch}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--mut);transition:all .18s}
.social a:hover{border-color:var(--turq);color:var(--turq)}
.f-bot{border-top:1px solid var(--line);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--mut-2)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .cov-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:760px){
  .hdr .wrap{height:88px}
  .brand svg{width:78px}
  .nav{position:fixed;inset:104px 0 auto 0;background:var(--ground);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:10px 26px 20px;display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav .btn,.nav .lang{margin-top:12px;text-align:center}
  .burger{display:block}
  .metrics .wrap{grid-template-columns:repeat(2,1fr)}
  .met{border-right:none;border-bottom:1px solid var(--line)}
  .met:nth-child(odd){border-right:1px solid var(--line)}
  section{padding:62px 0}
  .hero{padding:64px 0 54px}
  .svc-grid,.price-grid,.f2,.stat-row{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   HYBRID: dark header + hero, light body, dark footer.
   On a light ground turquoise may NOT carry text (1.95:1) — so below,
   ink is indigo, links are #0077C1, and turquoise appears only as
   filled panels, icon plates, rules and chart bars.
   ========================================================================== */
:root{
  --paper:#EEEFF4; --card:#FFFFFF; --line-l:#D9DAE3;
  --ink:#1D1D5D; --body:#505062; --soft:#7B7B93;
}
#services,#coverage,#pricing,#about,#contact{background:var(--paper);color:var(--body)}
#coverage,#about{background:var(--card);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
#services h2,#coverage h2,#pricing h2,#about h2,#contact h2{color:var(--ink)}
#services .sec-head p,#coverage .sec-head p,#pricing .sec-head p,#about .sec-head p,#contact .sec-head p{color:var(--body)}
#about p{color:var(--body)}
#about p[style]{color:var(--ink)!important;font-weight:650}

/* service cards */
#services .svc{background:var(--card);border:1px solid var(--line-l)}
#services .svc:hover{border-color:var(--turq);transform:translateY(-2px);box-shadow:0 10px 28px -14px rgba(29,29,93,.28)}
#services .svc h3{color:var(--ink)}
#services .svc p{color:var(--body)}

/* coverage */
#coverage .map{background:var(--paper);border:1px solid var(--line-l)}
#coverage .cov-item b{color:var(--ink)}
#coverage .cov-item span{color:var(--soft)}

/* pricing */
#pricing .price{background:var(--card);border:1px solid var(--line-l)}
#pricing .price.feat{border-color:var(--turq);box-shadow:0 14px 34px -18px rgba(64,200,244,.5)}
#pricing .price h3{color:var(--ink)}
#pricing .price .amt{color:var(--ink)}
#pricing .price .amt sup{color:var(--trail-start)}
#pricing .price .per{color:var(--soft)}
#pricing .price li{color:var(--body)}
#pricing .price .buy{border:1px solid var(--line-l);color:var(--ink)}
#pricing .price .buy:hover{border-color:var(--turq);background:rgba(64,200,244,.10)}
#pricing .price.feat .buy{background:var(--indigo);color:#fff;border-color:var(--indigo)}

/* about stats */
#about .stat b{color:var(--ink)}
#about .stat span{color:var(--soft)}

/* contact */
#contact .info-item .ic{background:#E7F8FE;border:1px solid #C5EEFC;color:var(--trail-start)}
#contact .info-item b{color:var(--ink)}
#contact .info-item a,#contact .info-item>div>span{color:var(--body)}
#contact .info-item a:hover{color:var(--trail-start)}
#contact label{color:var(--soft)}
#contact input,#contact textarea{background:var(--card);border:1px solid var(--line-l);color:var(--ink)}
#contact input:focus,#contact textarea:focus{border-color:var(--turq)}
#contact button[type=submit]{background:var(--indigo);color:#fff}
#contact .msg.ok{background:#E7F8FE;border:1px solid #9FE3F9;color:#075E7A}
#contact .msg.err{background:#FCEBEB;border:1px solid #F7C1C1;color:#A32D2D}

/* the seam between the dark hero and the light body */
.metrics{background:var(--indigo-950);border-bottom:0}
.seam{height:64px;background:linear-gradient(180deg,var(--panel) 0%,#454B86 42%,#9AA0C4 74%,var(--paper) 100%)}


/* ==========================================================================
   v2 — structure borrowed from du (rounded inset hero card, tidy light body),
   restraint borrowed from Starlink (few colours, big calm type, real space).
   Gradient is Astra's own star trail extended across all three brand colours.
   ========================================================================== */
body{background:#F1F2F6;color:#505062}

/* header: light, colour logo (brand rule: colour logo on light grounds) */
.hdr{background:rgba(241,242,246,.9);border-bottom:1px solid #E0E1E9}
.hdr .nav a{color:#505062}
.hdr .nav a:hover{color:#1D1D5D}
.hdr .lang{color:#0077C1;border-color:#D3D5E0}
.hdr .lang:hover{border-color:#0077C1}
.hdr .btn{background:#2A2A86;color:#fff}
.hdr .burger{color:#1D1D5D}
@media(max-width:760px){.nav{background:#F1F2F6;border-bottom:1px solid #E0E1E9}
  .nav a{border-bottom:1px solid #E0E1E9}}

/* ---------- the hero card ---------- */
.hero{padding:16px 16px 0;background:transparent;overflow:visible}
.hero .arc{display:none}
.hero-card{
  position:relative;border-radius:30px;overflow:hidden;
  background:linear-gradient(118deg,#1D1D5D 0%,#2A2A86 24%,#0077C1 64%,#40C8F4 100%);
  padding:64px 0 60px;
}
.hero-card::after{  /* dot texture, the tidy-tech cue du uses */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 40%, #000 0%, transparent 68%);
  mask-image:radial-gradient(120% 90% at 78% 40%, #000 0%, transparent 68%);
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  max-width:var(--max);margin:0 auto;padding:0 44px}
.hero h1{color:#fff;max-width:11ch;margin-bottom:18px;text-wrap:balance;line-height:1.03}
.hero h1 em{font-style:normal;color:#BFEFFF;background:none;-webkit-text-fill-color:currentColor}
.hero p.sub{color:rgba(255,255,255,.86);max-width:44ch;margin-bottom:26px}
.eyebrow{color:rgba(255,255,255,.72)}

/* coverage check, the pattern both Hyperoptic and Google Fiber lead with */
.check{display:flex;gap:8px;background:#fff;padding:8px;border-radius:14px;max-width:440px;box-shadow:0 14px 34px -14px rgba(11,17,45,.45)}
.check input{flex:1;border:0;background:transparent;color:#1D1D5D;font-size:15px;padding:11px 14px;font-family:var(--font)}
.check input::placeholder{color:#9C9CB0}
.check input:focus{outline:none}
.check button{border:0;background:#2A2A86;color:#fff;font-family:var(--font);font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:10px;cursor:pointer;white-space:nowrap}
.check button:hover{background:#1D1D5D}
.hero .note{color:rgba(255,255,255,.62);font-size:13px;margin:12px 0 0}

/* photo slot — real image drops straight in here */
.shot-slot{position:relative;aspect-ratio:1/.94;border-radius:22px;overflow:hidden;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.20);
  display:flex;align-items:center;justify-content:center;text-align:center}
.shot-slot img{width:100%;height:100%;object-fit:cover;display:block}
.shot-slot .ph{color:rgba(255,255,255,.75);font-size:13px;padding:22px;line-height:1.6}
.shot-slot .ph b{display:block;color:#fff;font-size:15px;margin-bottom:6px}

/* pill chips under the hero, du-style */
.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding:26px 26px 0}
.chip{background:#fff;border:1px solid #E0E1E9;color:#1D1D5D;font-size:13.5px;padding:8px 16px;border-radius:22px;font-weight:600}
.chip span{color:#0077C1}

/* metrics: now a light strip, not a dark band */
.metrics{background:transparent;border:0}
.metrics .wrap{max-width:var(--max);gap:14px;padding:30px 26px 4px;grid-template-columns:repeat(4,1fr)}
.met{background:#fff;border:1px solid #E0E1E9;border-right:1px solid #E0E1E9;border-radius:16px;padding:20px}
.met:last-child{border-right:1px solid #E0E1E9}
.met b{color:#1D1D5D;font-size:27px}
.met b span{color:#0077C1}
.met>span{color:#8A8A9E}
.spark u{background:#C9D3EE;opacity:1}
.spark u:last-child{background:#40C8F4}
.seam{display:none}

/* body sections sit on the same soft ground */
#services,#pricing,#contact{background:transparent}
#coverage,#about{background:#fff;border-color:#E6E7EE}
#services .svc,#pricing .price{border-radius:16px;border-color:#E0E1E9}
#contact input,#contact textarea{border-radius:12px}
footer{background:#0F0F33;border-top:0}

@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:30px;padding:0 30px}
  .shot-slot{aspect-ratio:16/10}
}
@media(max-width:760px){
  .hero{padding:10px 10px 0}
  .hero-card{border-radius:22px;padding:44px 0 40px}
  .hero-inner{padding:0 22px}
  .metrics .wrap{grid-template-columns:1fr 1fr}
  .check{flex-direction:column}
  .check button{width:100%}
}




/* ==========================================================================
   v4 = v2 structure, with:
     · the full Somar family (400 / 600 / 700) across the WHOLE page
     · a larger type scale throughout — the previous pass was undersized
     · a tinted ground (#E1E2F6) instead of neutral white, so the light
       area and the indigo hero card read as one family rather than two
   ========================================================================== */
:root{
  --font:"Somar", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --ground-tint:#E1E2F6;
  --card-white:#FFFFFF;
  --tint-line:#CFD1EC;
}
body{background:var(--ground-tint);font-size:19px;line-height:1.68;font-weight:400}

/* --- type scale, one step up across the board --- */
h1{font-size:clamp(44px,6.8vw,78px);line-height:1.02;letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(32px,4.6vw,50px);line-height:1.1;letter-spacing:-.025em;font-weight:700}
.sec-head p{font-size:19.5px}
.hero p.sub{font-size:clamp(18px,2.1vw,22px)}
.svc h3{font-size:22px;font-weight:600}
.svc p{font-size:16.5px;line-height:1.62}
.price h3{font-size:18px;font-weight:600}
.price .amt{font-size:46px}
.price .per{font-size:14.5px}
.price li{font-size:16px}
.met b{font-size:34px}
.met>span{font-size:12.5px}
.cov-item b{font-size:17.5px}
.cov-item span{font-size:16px}
.stat b{font-size:30px}
.stat span{font-size:15px}
.info-item b{font-size:15.5px}
.info-item a,.info-item>div>span{font-size:17px}
.nav a{font-size:16px}
.chip{font-size:15px;padding:9px 18px}
.btn,.check button,.price .buy,button[type=submit]{font-size:16px}
.eyebrow{font-size:12.5px}
label{font-size:13.5px}
input,textarea{font-size:16.5px}
footer a{font-size:16px}
footer h4{font-size:15px;font-weight:600}
.f-brand p{font-size:15.5px}
.hero .note{font-size:14.5px}

/* --- tinted ground: the light half now belongs to the indigo family --- */
.hdr{background:rgba(225,226,246,.92);border-bottom:1px solid var(--tint-line)}
#services,#pricing,#contact{background:transparent}
#coverage,#about{background:var(--card-white);border-top:1px solid var(--tint-line);border-bottom:1px solid var(--tint-line)}
.chip,.met,#services .svc,#pricing .price{background:var(--card-white);border-color:var(--tint-line)}
#coverage .map{background:var(--ground-tint);border-color:var(--tint-line)}
#contact input,#contact textarea{background:var(--card-white);border-color:var(--tint-line)}
#services .svc:hover{border-color:#7FC7E8;box-shadow:0 16px 34px -20px rgba(29,29,93,.34)}
@media(max-width:760px){.nav{background:var(--ground-tint);border-bottom:1px solid var(--tint-line)}
  .nav a{border-bottom:1px solid var(--tint-line)}}


/* eyebrow: was inheriting the monospace stack, which renders Arabic badly and
   looked undersized. Put it on Somar, size it up, keep tracking modest. */
.eyebrow{
  font-family:"Somar",var(--font)!important;
  font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.80);
}


/* ==========================================================================
   v5 — client review pass:
     · every small text size raised again (labels, captions, footer, chips)
     · About: the two columns now stretch to equal height and align
     · Contact: branches listed properly, whole block enlarged
   ========================================================================== */

/* --- small text was still reading as small --- */
.met>span{font-size:15px;letter-spacing:.06em}
.met b{font-size:38px}
.svc p{font-size:17.5px}
.cov-item span{font-size:17px}
.cov-item b{font-size:18.5px}
.stat span{font-size:16.5px}
.stat b{font-size:34px}
.price li{font-size:17px}
.price .per{font-size:15.5px}
.chip{font-size:16px;padding:10px 20px}
.hero .note{font-size:16px}
label{font-size:15px}
input,textarea{font-size:17px}
footer a{font-size:16.5px}
footer h4{font-size:16px}
.f-brand p{font-size:16.5px}
.f-bot{font-size:15px}
.sec-head p{font-size:20px}

/* --- About: equal-height columns, text no longer floats against the stats --- */
.about-grid{align-items:stretch;gap:56px}
.about-grid>div{display:flex;flex-direction:column}
.about-grid>div:last-child{justify-content:space-between;gap:18px}
.about-grid p{font-size:18.5px;line-height:1.72;margin:0 0 16px}
.about-grid p:last-child{margin-bottom:0}
.lead-out{
  font-size:19.5px!important;font-weight:600;color:var(--ink,#1D1D5D)!important;
  border-top:1px solid var(--tint-line);padding-top:18px;margin-top:6px!important;
}
.stat-row{margin-top:auto;padding-top:26px;gap:26px}
.stat{padding-left:18px;padding-right:0}

/* --- Contact: bigger, and the branch list reads as a list --- */
#contact .info{gap:28px}
#contact .info-item{gap:18px;align-items:flex-start}
#contact .info-item .ic{width:50px;height:50px;border-radius:14px;font-size:20px}
#contact .info-item b{font-size:17.5px;margin-bottom:8px}
#contact .info-item a,#contact .info-item>div>span{font-size:18px;line-height:1.6}
#contact .branch{
  display:block;font-size:17px;line-height:1.55;padding:5px 0;
  border-bottom:1px dashed var(--tint-line);
}
#contact .branch:last-child{border-bottom:0}
#contact .contact-grid{gap:56px}


/* ---------- branch cards with their own maps ---------- */
.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.bcard{background:var(--card-white,#fff);border:1px solid var(--tint-line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.bmap{aspect-ratio:16/10;background:var(--ground-tint);position:relative}
.bmap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92)}
.bbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.bbody h4{font-size:19px;color:var(--ink,#1D1D5D);margin:0;font-weight:700}
.bbody .addr{font-size:16.5px;color:#505062;line-height:1.55;flex:1}
.bbody .coord{font-family:var(--mono);font-size:13px;color:#7B7B93;direction:ltr;text-align:start}
.bbody .go{
  margin-top:10px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:15.5px;font-weight:600;color:#0077C1;
}
.bbody .go:hover{text-decoration:underline}

/* ---------- coverage map with overlaid points ---------- */
@media(max-width:900px){.branches{grid-template-columns:1fr}}


/* --- header fixes -------------------------------------------------------
   `.hdr .nav a` (0,2,1) was beating `.hdr .btn` (0,2,0), so the CTA inherited
   body grey on indigo — 1.50:1. Raise specificity and enlarge the nav.
   ----------------------------------------------------------------------- */
.hdr .nav a.btn,
.hdr .nav a.btn:hover,
.hdr .nav a.btn:visited{color:#FFFFFF!important;background:#2A2A86;font-weight:700}
.hdr .nav a.btn:hover{background:#1D1D5D}

.hdr .nav a{font-size:17.5px}
.hdr .nav{gap:32px}
.hdr .lang{font-size:16.5px;padding:7px 15px;font-weight:600}
@media(max-width:1100px){.hdr .nav{gap:22px}.hdr .nav a{font-size:16.5px}}
@media(max-width:760px){.hdr .nav a{font-size:18px}}


/* --- branch cards: map was 258px tall (53% of the card). Make it a small
       square thumbnail beside the text so the block sits with the design. --- */
.branches{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.bcard{flex-direction:row;align-items:stretch;border-radius:16px}
.bmap{
  flex:0 0 118px;width:118px;aspect-ratio:auto;height:auto;
  border-inline-end:1px solid var(--tint-line);
}
.bmap iframe{height:100%;min-height:118px;pointer-events:none}
.bbody{padding:14px 16px;gap:3px;justify-content:center}
.bbody h4{font-size:17.5px}
.bbody .addr{font-size:14.5px;line-height:1.45;flex:0 1 auto}
.bbody .coord{font-size:11.5px;opacity:.85}
.bbody .go{margin-top:7px;font-size:14.5px}
@media(max-width:1100px){
  .branches{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .branches{grid-template-columns:1fr;gap:12px}
  .bmap{flex:0 0 104px;width:104px}
  .bmap iframe{min-height:104px}
  .bbody .addr{font-size:15px}
}


/* --- branch cards, final: map is the主 element, text is minimal, and the
       whole block sits inside the page container (it had escaped .wrap) --- */
.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.bcard{
  display:flex;flex-direction:column;background:var(--card-white,#fff);
  border:1px solid var(--tint-line);border-radius:18px;overflow:hidden;
}
.bmap{flex:0 0 auto;width:auto;aspect-ratio:4/3;border-inline-end:0;border-bottom:1px solid var(--tint-line)}
.bmap iframe{width:100%;height:100%;border:0;display:block;min-height:0;pointer-events:none;filter:saturate(.95)}
.bbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;justify-content:flex-start}
.bbody h4{font-size:19px;font-weight:700;color:var(--ink,#1D1D5D);margin:0}
.bbody .addr{font-size:15.5px;line-height:1.5;color:#505062;margin:0;flex:0}
.bbody .go{margin-top:8px;font-size:15.5px;font-weight:600;color:#0077C1;align-self:flex-start}
@media(max-width:900px){.branches{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.branches{grid-template-columns:1fr}.bmap{aspect-ratio:16/9}}

/* --- footer: headings and links were undersized and too dim --- */
footer h4{font-size:20px!important;font-weight:700;color:#fff;margin-bottom:20px;letter-spacing:0}
footer a{font-size:17px!important;color:#C9CBE4!important}
footer a:hover{color:#78D8F7!important}
footer ul{gap:13px}
.f-brand p{font-size:17px!important;color:#C9CBE4!important}
.f-bot{font-size:15.5px;color:#A2A2B3}


/* --- coverage: the actual served areas, supplied by the client --- */
@media(max-width:620px){}


/* ==========================================================================
   Nav + footer typography — decisive increase, not another small step.
   Both were repeatedly flagged as too small and too faint.
   ========================================================================== */

/* --- top navigation --- */
.hdr .nav a{
  font-size:20px!important;
  font-weight:700!important;
  color:#3A3B52!important;
  letter-spacing:0;
}
.hdr .nav a:hover{color:#1D1D5D!important}
.hdr .nav{gap:36px}
.hdr .lang{
  font-size:18.5px!important;font-weight:700!important;
  color:#0077C1!important;border:1.5px solid #B9BCDE;padding:9px 20px;
}
.hdr .lang:hover{border-color:#0077C1;background:rgba(0,119,193,.06)}
.hdr .nav a.btn{font-size:18px!important;font-weight:700!important;padding:13px 26px}
.hdr .wrap{height:112px}
.hdr .brand svg{width:100px}

/* --- footer --- */
footer h4{
  font-size:22px!important;font-weight:700!important;color:#FFFFFF!important;
  margin-bottom:22px!important;
}
footer a{
  font-size:19px!important;font-weight:600!important;color:#DFE2F7!important;
}
footer a:hover{color:#78D8F7!important}
footer ul{gap:16px!important}
.f-brand p{font-size:18px!important;color:#DFE2F7!important;line-height:1.7}
.f-bot{font-size:16.5px!important;color:#B9BCDE!important}
.social a{width:44px;height:44px;font-size:16px;font-weight:700;color:#DFE2F7}

@media(max-width:1150px){
  .hdr .nav{gap:24px}
  .hdr .nav a{font-size:18px!important}
}
@media(max-width:760px){
  .hdr .wrap{height:92px}
  .hdr .nav a{font-size:20px!important;padding:16px 0}
  footer h4{font-size:21px!important}
  footer a{font-size:18.5px!important}
}


/* footer brand paragraph — flagged as too small */
.f-brand p{font-size:20px!important;line-height:1.75;color:#E4E7FA!important}
.social a{width:46px;height:46px;border-radius:12px;border-color:#3A3B7A}
.social svg{width:20px;height:20px;fill:#DFE2F7}
.social a:hover svg{fill:#78D8F7}


/* ---------- satellite coverage map ---------- */
.satmap{
  position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--tint-line);
  aspect-ratio:1/1.02;background:#0F1A2B;
}
.satmap iframe{
  width:100%;height:100%;border:0;display:block;
  filter:saturate(.55) brightness(1.06) contrast(.92);opacity:.72;pointer-events:none;
}
.satmap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(230,233,247,.30),rgba(230,233,247,.10) 40%,rgba(230,233,247,.34));}
.sp{position:absolute;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.sp i{display:block;width:15px;height:15px;border-radius:50%;background:#0077C1;border:3px solid #fff;
  box-shadow:0 2px 10px rgba(8,14,45,.55);margin:0 auto}
.sp b{display:block;margin-top:7px;background:rgba(29,29,93,.94);color:#fff;font-size:14.5px;font-weight:700;
  padding:5px 13px;border-radius:20px;white-space:nowrap;box-shadow:0 3px 12px rgba(8,14,45,.4)}
.sp.me i{background:#12C08A}
.sp.me b{background:rgba(9,110,80,.95)}

/* ---------- coverage check flow ---------- */
.cov-panel{margin-top:22px}
.cov-msg{border-radius:16px;padding:16px 18px;font-size:17px;line-height:1.6;display:none;border:1px solid transparent}
.cov-msg.on{display:block}
.cov-msg.busy{background:#EFF1FA;border-color:var(--tint-line);color:#505062}
.cov-msg.good{background:#E7F8FE;border-color:#9FE3F9;color:#075E7A;font-weight:600}
.cov-msg.bad{background:#FFF3E6;border-color:#F7D2A8;color:#8A4B08}
.cov-msg.err{background:#FCEBEB;border-color:#F7C1C1;color:#A32D2D}
.cov-form{display:none;margin-top:16px;background:var(--card-white,#fff);border:1px solid var(--tint-line);
  border-radius:20px;padding:22px}
.cov-form.on{display:block}
.cov-form h4{font-size:20px;font-weight:700;color:var(--ink,#1D1D5D);margin:0 0 14px}
.cov-form .fields{display:grid;gap:13px}
.cov-form input,.cov-form textarea{
  width:100%;background:var(--ground-tint);border:1px solid var(--tint-line);border-radius:13px;
  padding:14px 16px;font-family:var(--font);font-size:17px;color:var(--ink,#1D1D5D)}
.cov-form textarea{min-height:92px;resize:vertical}
.cov-form input:focus,.cov-form textarea:focus{outline:none;border-color:#40C8F4}
.cov-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cov-form button{margin-top:6px;background:#2A2A86;color:#fff;border:0;border-radius:13px;padding:15px 30px;
  font-family:var(--font);font-size:17px;font-weight:700;cursor:pointer}
.cov-form button:hover{background:#1D1D5D}
.cov-form button[disabled]{opacity:.55;cursor:not-allowed}
.cov-priv{font-size:14.5px;color:#7B7B93;margin:12px 0 0}


#covCheck{font-family:var(--font);border:0;cursor:pointer;font-size:17px;font-weight:700}

/* label placement — the four southern towns sit within ~5 km, so their
   labels must fan out instead of stacking on top of each other */
.sp b{position:absolute;left:50%;top:100%;transform:translate(-50%,7px)}
.sp[data-pos="n"] b{top:auto;bottom:100%;transform:translate(-50%,-7px)}
.sp[data-pos="e"] b{left:100%;top:50%;transform:translate(10px,-50%)}
.sp[data-pos="w"] b{left:auto;right:100%;top:50%;transform:translate(-10px,-50%)}
.sp{width:15px;height:15px}
.sp i{margin:0}
.sp b{font-size:14px;padding:4px 12px}


/* --- About body copy: bring it up to the same scale as everything else --- */
.about-grid p{font-size:20.5px!important;line-height:1.75}
.lead-out{font-size:21px!important}
#about .sec-head p{font-size:20.5px}

/* --- Stat blocks -------------------------------------------------------
   The number carried direction:ltr, so it aligned LEFT while its Arabic
   label aligned RIGHT — the two sat at opposite ends of the block.
   Isolate the digits for correct rendering but align both to the same edge,
   and put the label on the same Somar face as the rest of the page.
   --------------------------------------------------------------------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat b{
  display:block;font-size:38px;line-height:1.1;font-weight:700;
  direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;
}
.stat span{
  display:block;font-size:18.5px;font-weight:600;line-height:1.4;
  font-family:"Somar",var(--font);color:#6E6E86;
}
.met b{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.met>span{font-size:16px;font-weight:600;font-family:"Somar",var(--font)}
.stat b,.stat span,.met b,.met>span{text-align:left}


/* satellite: show it as-is, no fading */
.satmap iframe{filter:none!important;opacity:1!important}
.satmap::after{display:none!important}
.sp b{box-shadow:0 2px 10px rgba(0,0,0,.55)}
.sp i{box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.5)}
/* guard: never allow a sideways scroll, whatever a child does */
html,body{overflow-x:hidden;max-width:100%}

/* ---------- legal pages ---------- */
.legal-main{background:#F1F2F6;padding:16px 16px 80px}
.legal-hero{position:relative;overflow:hidden;max-width:calc(var(--max) + 52px);margin:0 auto;
  border-radius:30px;background:linear-gradient(118deg,#1D1D5D 0%,#2A2A86 24%,#0077C1 64%,#40C8F4 100%);
  padding:64px 0 60px}
.legal-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 40%,#000 0%,transparent 68%);
  mask-image:radial-gradient(120% 90% at 78% 40%,#000 0%,transparent 68%)}
.legal-hero .wrap{position:relative;z-index:1;padding:0 44px}
.legal-hero h1{font-size:clamp(42px,6vw,72px);max-width:none;margin:0 0 14px;color:#fff}
.legal-hero p{margin:0;color:rgba(255,255,255,.86);font-size:20px}
.legal-content{max-width:var(--max);margin:30px auto 0;background:#fff;border:1px solid #E0E1E9;
  border-radius:20px;padding:clamp(28px,5vw,64px);color:#505062;font-size:19px;line-height:1.78}
.legal-content>p:first-child{margin-top:0}
.legal-content p{margin:0 0 20px}
.legal-content h3,.legal-content h4{color:#1D1D5D;letter-spacing:-.015em;line-height:1.25}
.legal-content h3{font-size:clamp(25px,3vw,32px);margin:52px 0 16px;padding-top:2px}
.legal-content h4{font-size:22px;margin:34px 0 12px}
.legal-content ul,.legal-content ol{margin:0 0 24px;padding-left:28px}
.legal-content li{margin:8px 0;padding-left:5px}
.legal-content strong{color:#2E2E48;font-weight:700}
.legal-content a{color:#0077C1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-content a:hover{color:#1D1D5D}
.legal-content .alert{background:#E7F8FE;border:1px solid #9FE3F9;border-radius:16px;padding:20px 22px;margin:0 0 30px;color:#075E7A}
.legal-content .alert p{margin:0}

/* ---------- 404 pages ---------- */
.notfound-content{text-align:center;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.notfound-code{font-family:var(--mono);font-size:clamp(54px,9vw,100px);font-weight:700;line-height:1;color:#2A2A86;margin:0 0 22px}
.notfound-content p{max-width:620px;margin:0 auto 28px;font-size:20px}
.notfound-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.notfound-actions .btn{font-size:17px;padding:13px 25px;background:#2A2A86;color:#fff;text-decoration:none;border:1px solid #2A2A86}
.notfound-actions .btn:hover{background:#1D1D5D;color:#fff}
.notfound-actions .btn-secondary{background:#fff;color:#2A2A86;border-color:#B9BCDE}
.notfound-actions .btn-secondary:hover{background:#F1F2F6;color:#1D1D5D;border-color:#2A2A86}

@media(max-width:760px){
  .legal-main{padding:10px 10px 54px}.legal-hero{border-radius:22px;padding:44px 0 40px}
  .legal-hero .wrap{padding:0 22px}.legal-hero p{font-size:18px}
  .legal-content{margin-top:18px;border-radius:16px;padding:25px 21px;font-size:17.5px}
  .legal-content h3{margin-top:40px}.legal-content ul,.legal-content ol{padding-left:22px}
  .notfound-content{min-height:300px}.notfound-content p{font-size:18px}
}