/* About AlameinGo (public/about.js): the approved navy, blue and white design with glass panels.
   Everything is scoped to .ab-view or body[data-route="about"], so no other page changes. Logical properties
   throughout, so Arabic (RTL) and English (LTR) mirror each other; no fixed heights on text; nothing wider than a
   320px screen; reduced motion turns the only transition off. */
.ab-view{
  --ab-navy:#031B2E;--ab-navy-2:#052740;--ab-glass-solid:#29465F;
  --ab-heading:#102B43;--ab-body:#475569;--ab-muted:#526176;
  --ab-white:#FFFFFF;--ab-bg:#F2F5F7;--ab-pale:#EDF5FC;--ab-border:#DCE7F1;
  --ab-btn:#0868D9;--ab-btn-hover:#0756B2;--ab-btn-press:#174887;
  --ab-accent:#0868D9;--ab-badge:#EDF5FC;--ab-badge-text:#205A9E;--ab-glow:#79C8FF;
  background:var(--ab-bg);color:var(--ab-body);overflow-x:clip
}
.ab-view *{box-sizing:border-box}
.ab-wrap{max-width:1264px;margin-inline:auto;padding-inline:32px}
.ab-ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ab-ai{unicode-bidi:isolate;white-space:nowrap}

/* type */
.ab-view h1,.ab-view h2,.ab-view h3,.ab-view .ab-h3{font-family:var(--display);letter-spacing:0;margin:0}
.ab-view h2{font-size:clamp(1.625rem,1.2rem + 1.4vw,2.25rem);line-height:1.3;color:var(--ab-heading);font-weight:700}
.ab-view h3,.ab-view .ab-h3{font-size:clamp(1.19rem,1.1rem + .3vw,1.31rem);line-height:1.45;color:var(--ab-heading);font-weight:700}
.ab-view p{margin:0;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.75}
:root[lang="ar"] .ab-view p,:root[lang="ar"] .ab-view li{line-height:1.85}
.ab-copy>p+p,.ab-copy>h2+p{margin-top:14px}
.ab-copy>h2{margin-bottom:6px}
.ab-center{text-align:center}

/* buttons: real links and one real button, solid blue, 52px tall, clear hover / pressed / focus */
.ab-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 26px;border-radius:10px;border:1.5px solid transparent;font:inherit;font-family:var(--display);font-size:1.0625rem;font-weight:700;line-height:1.3;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.ab-btn .ab-ic{width:20px;height:20px}
.ab-view a.ab-btn.is-primary,.ab-btn.is-primary{background:var(--ab-btn);color:#fff;border-color:var(--ab-btn)}
.ab-btn.is-primary:hover{background:var(--ab-btn-hover);border-color:var(--ab-btn-hover);color:#fff}
.ab-btn.is-primary:active{background:var(--ab-btn-press);border-color:var(--ab-btn-press)}
.ab-view a.ab-btn.is-outline-light,.ab-btn.is-outline-light{background:rgba(6,24,39,.35);color:#fff;border-color:rgba(255,255,255,.85)}
.ab-btn.is-outline-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.ab-btn.is-outline-light:active{background:rgba(255,255,255,.24)}
.ab-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--ab-btn)}
.ab-inline{color:var(--ab-btn);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ab-inline:hover{color:var(--ab-btn-hover)}
.ab-inline:focus-visible{outline:3px solid var(--ab-btn);outline-offset:2px;border-radius:3px}

/* glass panels (opaque navy where backdrop blur is unavailable) */
.ab-glass{position:relative;margin:0;padding:24px;border-radius:18px;color:#fff;background:rgba(30,58,83,.48);border:1px solid rgba(255,255,255,.38);box-shadow:0 18px 48px rgba(0,12,28,.25);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.ab-glass{background:rgba(11,38,59,.94)}}
.ab-panel-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ab-panel-title{font-family:var(--display);font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem)!important;font-weight:700;line-height:1.35!important;color:#fff}
.ab-orb{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none;color:#fff;background:radial-gradient(circle at 35% 30%,#7FD4FF 0,#2E7BD6 55%,#174887 100%);box-shadow:0 0 22px rgba(99,200,255,.45),inset 0 0 0 1px rgba(255,255,255,.45)}
.ab-orb .ab-ic{width:24px;height:24px;fill:#fff;stroke:none}
.ab-bubble{padding:14px 18px;border-radius:16px 16px 16px 16px;border-start-start-radius:4px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:1rem!important}
.ab-panel-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ab-panel-list li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;background:rgba(6,24,39,.32);border:1px solid rgba(255,255,255,.16);font-weight:600;font-size:1rem;color:#fff}
.ab-panel-list .ab-ic{width:24px;height:24px;color:#BFE6FF}

/* 1. hero: the New Alamein photo under a navy overlay; copy at the start side, the glass panel at the end side */
.ab-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--ab-navy)}
.ab-hero-img,.ab-close-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ab-hero-img{object-position:60% 70%}
.ab-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to left,rgba(6,24,39,.88) 0%,rgba(6,24,39,.66) 45%,rgba(11,38,59,.38) 100%),linear-gradient(to bottom,rgba(6,24,39,.35),rgba(6,24,39,.55))}
[dir="ltr"] .ab-hero-shade{background:linear-gradient(to right,rgba(6,24,39,.88) 0%,rgba(6,24,39,.66) 45%,rgba(11,38,59,.38) 100%),linear-gradient(to bottom,rgba(6,24,39,.35),rgba(6,24,39,.55))}
.ab-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:clamp(56px,7vw,96px)}
.ab-hero h1{font-size:clamp(2.125rem,1.4rem + 3vw,3.75rem);line-height:1.2;font-weight:700;color:#fff}
.ab-hero-sub{margin-top:12px!important;font-family:var(--display);font-size:clamp(1.3rem,1rem + 1.2vw,2rem)!important;line-height:1.45!important;font-weight:600;color:#fff}
.ab-hero-lede{margin-top:18px!important;max-width:36em;color:#E6EEF6}
.ab-hero-support{margin-top:14px!important;color:#BFE6FF;font-weight:600}
.ab-hero-panel{max-width:480px;justify-self:end;width:100%}

/* shared section rhythm */
.ab-sec{position:relative;padding-block:clamp(40px,6vw,80px)}
.ab-why,.ab-who,.ab-sea,.ab-trust{background:var(--ab-white)}
.ab-who{background:var(--ab-bg)}
.ab-pale{background:var(--ab-pale)}
.ab-benefits{padding-top:0}
.ab-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.ab-art-wrap{display:flex;justify-content:center}
.ab-art{width:100%;max-width:480px;height:auto}
.ab-art-line{fill:none;stroke:var(--ab-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-art-sun{fill:var(--ab-pale)}
.ab-yacht{max-width:400px}

/* cards */
.ab-card{background:var(--ab-white);border:1px solid var(--ab-border);border-radius:14px;padding:26px;box-shadow:0 6px 20px rgba(16,40,72,.05)}
.ab-card p{color:var(--ab-body)}
.ab-card-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--ab-badge);color:var(--ab-accent);flex:none}
.ab-card-ic .ab-ic{width:28px;height:28px}
.ab-who .ab-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ab-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ab-stat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.ab-stat-num{font-family:var(--display);font-size:clamp(2.2rem,1.8rem + 1.2vw,2.75rem)!important;font-weight:700;line-height:1.1!important;color:var(--ab-heading);margin-top:4px!important}
.ab-stat p:last-child{color:var(--ab-muted)}
.ab-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.ab-feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.ab-note{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px!important;padding:14px 20px;border-radius:12px;background:var(--ab-badge);color:var(--ab-badge-text);font-weight:600;text-align:center}
.ab-note .ab-ic{color:var(--ab-accent)}
.ab-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.ab-benefit-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ab-benefit-head .ab-h3{color:var(--ab-accent);font-size:clamp(1.2rem,1.05rem + .5vw,1.4rem)}
.ab-benefit p+p{margin-top:14px}
.ab-emph{font-weight:600;color:var(--ab-heading)!important}
.ab-checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ab-checks li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.75;color:var(--ab-body)}
.ab-checks .ab-ic{width:24px;height:24px;margin-top:3px;color:#fff;fill:var(--ab-btn);stroke:#fff}

/* 6. Alamein AI: navy band with a restrained cyan glow */
.ab-navy{background:linear-gradient(135deg,var(--ab-navy) 0%,var(--ab-navy-2) 100%);color:#fff;overflow:hidden;isolation:isolate}
.ab-navy-glow{position:absolute;inset-block-start:-30%;inset-inline-end:-10%;width:60%;height:140%;z-index:-1;background:radial-gradient(closest-side,rgba(99,200,255,.16),rgba(99,200,255,0))}
.ab-navy h2{color:#fff}
.ab-navy p{color:#DCE7F1}
.ab-navy .ab-ai-sub{font-family:var(--display);font-size:clamp(1.15rem,1rem + .5vw,1.4rem)!important;font-weight:600;color:#fff}
.ab-ai-panel{max-width:480px;width:100%;justify-self:end}
.ab-bubble-user{background:rgba(255,255,255,.14)}

/* 7. vision */
.ab-vision{background:var(--ab-pale);border-block:1px solid var(--ab-border)}
.ab-vision-in{max-width:960px;text-align:center}
.ab-vision-in h2{color:var(--ab-heading)}
.ab-vision-in p{margin-top:16px}
.ab-sparkle{display:inline-grid;place-items:center;color:var(--ab-accent);margin-bottom:6px}
.ab-sparkle .ab-ic{width:30px;height:30px;fill:var(--ab-accent);stroke:none}
.ab-vision-in h2::after{content:'';display:block;width:64px;height:3px;border-radius:3px;margin:14px auto 0;background:var(--ab-accent)}

/* 8. sea */
.ab-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:6px}
.ab-badge{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:999px;background:var(--ab-badge);color:var(--ab-badge-text);font-weight:700;font-size:.95rem}

/* 9. trust */
.ab-trust{border-top:1px solid var(--ab-border)}
.ab-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px}
.ab-trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 22px}
.ab-trust-item+.ab-trust-item{border-inline-start:1px solid var(--ab-border)}
.ab-trust-item .ab-card-ic{background:none;width:44px;height:44px}
.ab-trust-item p{color:var(--ab-body)}

/* 10. closing: the towers photo again, darker, with the call-to-action glass panel */
.ab-close{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--ab-navy)}
.ab-close-img{object-position:50% 30%}
.ab-close-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to left,rgba(6,24,39,.9) 0%,rgba(6,24,39,.72) 50%,rgba(11,38,59,.45) 100%)}
[dir="ltr"] .ab-close-shade{background:linear-gradient(to right,rgba(6,24,39,.9) 0%,rgba(6,24,39,.72) 50%,rgba(11,38,59,.45) 100%)}
.ab-close-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-block:clamp(44px,6vw,80px)}
.ab-close h2{color:#fff}
.ab-close p{color:#E6EEF6}
.ab-cta-panel{max-width:440px;width:100%;justify-self:end}
.ab-cta-panel h3{color:#fff;margin-bottom:16px}
.ab-cta-stack{display:grid;gap:12px}
.ab-cta-stack .ab-btn{width:100%}

/* the site footer on this page only: deep navy, as in the design (the logo keeps its light version, unchanged) */
html body[data-route="about"]:not([data-route="home"]) .site-footer{background:#031B2E;border-top:0;color:#DCE7F1}
html body[data-route="about"]:not([data-route="home"]) .site-footer a{color:#fff;display:inline-flex;align-items:center;min-height:44px}
html body[data-route="about"]:not([data-route="home"]) .site-footer a:hover{color:#BFE6FF}
html body[data-route="about"]:not([data-route="home"]) .site-footer a:focus-visible{outline:3px solid #79C8FF;outline-offset:2px}
html body[data-route="about"]:not([data-route="home"]) .site-footer .logo img.logo-mark:not(.logo-mark-light){display:none}
html body[data-route="about"]:not([data-route="home"]) .site-footer .logo img.logo-mark.logo-mark-light{display:block}
html body[data-route="about"]:not([data-route="home"]) .site-footer .footer-brand-of,html body[data-route="about"]:not([data-route="home"]) .site-footer span{color:#DCE7F1}

/* tablets */
@media (max-width:980px){
  .ab-hero-in,.ab-close-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .ab-hero-panel,.ab-ai-panel,.ab-cta-panel{justify-self:stretch;max-width:560px}
  .ab-split,.ab-who .ab-split{grid-template-columns:minmax(0,1fr);gap:28px}
  .ab-art{max-width:420px}
  .ab-grid4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .ab-trust-item:nth-child(3){border-inline-start:0}
}
@media (max-width:860px){
  .ab-grid3,.ab-grid2{grid-template-columns:minmax(0,1fr);gap:16px}
}
/* phones */
@media (max-width:640px){
  .ab-wrap{padding-inline:20px}
  .ab-sec{padding-block:40px}
  .ab-benefits{padding-top:0}
  .ab-ctas{flex-direction:column}
  .ab-ctas .ab-btn{width:100%}
  .ab-stats{grid-template-columns:minmax(0,1fr);gap:16px}
  .ab-card{padding:24px}
  .ab-glass{padding:20px}
  .ab-grid4{grid-template-columns:minmax(0,1fr)}
  .ab-trust-item{padding:20px 4px}
  .ab-trust-item+.ab-trust-item{border-inline-start:0;border-top:1px solid var(--ab-border)}
  .ab-art{max-width:320px}
  .ab-note{text-align:start;justify-content:flex-start;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.ab-btn{transition:none}}
html body[data-route="about"]:not([data-route="home"]) .site-footer :is(.footer-bottom,.footer-row){border-color:rgba(255,255,255,.14)}
