/* ==========================================================================
   HGTL — High Grade Tech Line
   Design tokens & base — permanent dark-mode brand system
   ========================================================================== */

:root{
  color-scheme: dark;

  /* Navy — HGTL dark surface system */
  --navy-950:#020b1d;
  --navy-900:#06152d;
  --navy-850:#0b1a31;
  --navy-800:#0b1e3a;
  --navy-700:#102746;
  --navy-600:#163d70;
  --navy-500:#1d355a;

  /* Section rhythm — distinct dark tonal layers so sections never repeat identically */
  --surface-solutions:#081a34;
  --surface-ecosystem:#020c20;
  --surface-why:#0b1e3a;
  --surface-industries:#06142a;
  --surface-brands:#09192f;
  --surface-cta:#071832;
  --surface-contact:#0c2040;
  --surface-footer:#020a18;

  /* Electric blue / cyan — HGTL accent system */
  --silver-200:#e4e8ef;
  --silver-300:#c7cdd9;
  --silver-400:#a8b2c4;
  --silver-500:#7c88a0;

  /* Metallic silver — derived from HGTL logo */
  --silver-200:#e4e8ef;
  --silver-300:#c7cdd9;
  --silver-400:#a8b2c4;
  --silver-500:#7c88a0;

  --white:#ffffff;

  /* Text — HGTL dark-mode is the only mode, so this is simply "the" text system */
  --text-on-dark-primary:#f4f8ff;
  --text-on-dark-secondary:#a9b8ce;
  --text-on-dark-tertiary:#71839e;

  --line-on-dark: rgba(125,170,220,0.14);
  --line-on-dark-strong: rgba(125,170,220,0.26);

  --glass-dark: rgba(2,11,29,0.82);
  --glass-dark-soft: rgba(6,18,42,0.42);

  /* Shared dark glass card surface */
  --card-grad-a: rgba(16,39,70,0.88);
  --card-grad-b: rgba(6,20,43,0.92);
  --card-border: rgba(120,175,230,0.12);
  --card-border-hover: rgba(20,157,255,0.35);

  /* Spacing scale */
  --sp-1:0.25rem;
  --sp-2:0.5rem;
  --sp-3:0.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --sp-7:2.5rem;
  --sp-8:3rem;
  --sp-9:4rem;
  --sp-10:5rem;
  --sp-11:6.5rem;
  --sp-12:8rem;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:100px;

  --container-max:1280px;

  --ease-premium: cubic-bezier(0.16,1,0.3,1);
  --dur-micro:200ms;
  --dur-content:650ms;

  --font-ar:'IBM Plex Sans Arabic','Tajawal',sans-serif;
  --font-en:'Inter','Manrope',sans-serif;

  --header-h:112px;
  --header-h-scrolled:96px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; overflow-x:hidden; width:100%;
  background:var(--navy-950);
  scrollbar-color: var(--navy-600) var(--navy-950);
}
html,body{ margin:0; padding:0; }
body{
  background:var(--navy-950);
  color:var(--text-on-dark-primary);
  font-family:var(--font-ar);
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{ font-family:var(--font-en); }

/* Custom scrollbar — subtle, never dominant */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--navy-950); }
::-webkit-scrollbar-thumb{ background:var(--navy-600); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--blue-500); }

img{ max-width:100%; display:block; }
svg{ display:block; }
.icon{
  width:24px; height:24px; display:inline-block; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
input,select,textarea{ font:inherit; color:inherit; color-scheme:dark; }

::selection{ background:var(--blue-500); color:var(--white); }

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--sp-6);
}
@media (max-width:640px){
  .container{ padding-inline:var(--sp-4); }
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

.skip-link{
  position:absolute; inset-inline-start:-999px; top:var(--sp-2);
  background:var(--blue-500); color:var(--white); padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-sm); z-index:1000;
}
.skip-link:focus{ inset-inline-start:var(--sp-2); }

:focus-visible{ outline:2px solid var(--cyan-400); outline-offset:3px; border-radius:4px; }

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow{
  font-size:0.75rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--cyan-300);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
}
html[lang="ar"] .eyebrow{ letter-spacing:0.02em; }
.eyebrow::before{
  content:"";
  width:20px; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan-400));
}
html[dir="rtl"] .eyebrow::before{ background:linear-gradient(270deg, transparent, var(--cyan-400)); }

.section-head{
  max-width:760px;
  margin-bottom:var(--sp-9);
}
.section-head.centered{ margin-inline:auto; text-align:center; }

.section-title{
  font-size:clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.01em;
  margin-top:var(--sp-3);
  color:var(--text-on-dark-primary);
}

.section-lede{
  margin-top:var(--sp-4);
  font-size:1.05rem;
  color:var(--text-on-dark-secondary);
  max-width:640px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:0.9rem 1.6rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:0.95rem;
  white-space:nowrap;
  transition:transform var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium), background var(--dur-micro) var(--ease-premium), border-color var(--dur-micro) var(--ease-premium);
}
.btn svg{ width:16px; height:16px; transition:transform var(--dur-micro) var(--ease-premium); }
html[dir="rtl"] .btn svg{ transform:scaleX(-1); }

.btn-primary{
  background:var(--blue-500);
  color:var(--white);
  box-shadow:0 1px 0 rgba(255,255,255,0.16) inset, 0 8px 24px -8px rgba(18,157,255,0.55);
}
.btn-primary:hover{ background:var(--blue-400); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,0.2) inset, 0 14px 30px -10px rgba(18,157,255,0.65); }
.btn-primary:hover svg{ transform:translateX(3px); }
html[dir="rtl"] .btn-primary:hover svg{ transform:scaleX(-1) translateX(3px); }

.btn-outline{
  border:1px solid var(--line-on-dark-strong);
  color:var(--text-on-dark-primary);
  background:rgba(255,255,255,0.03);
}
.btn-outline:hover{ border-color:var(--cyan-400); color:var(--cyan-300); transform:translateY(-2px); }

.btn-ghost{
  color:var(--cyan-300);
  padding-inline:0.2rem;
  font-weight:600;
  border-bottom:1px solid transparent;
}
.btn-ghost:hover{ border-color:var(--cyan-400); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:900;
  height:var(--header-h);
  display:flex;
  align-items:center;
  transition:height var(--dur-content) var(--ease-premium), background var(--dur-content) var(--ease-premium), border-color var(--dur-content) var(--ease-premium), backdrop-filter var(--dur-micro);
  border-bottom:1px solid transparent;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:var(--sp-6); }

.site-header.is-scrolled{
  height:var(--header-h-scrolled);
  background:var(--glass-dark);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-on-dark);
  box-shadow:0 12px 30px -20px rgba(0,0,0,0.6);
}

.brand{ display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }
.brand img{
  height:92px; width:auto;
  transition:height var(--dur-content) var(--ease-premium);
  filter:drop-shadow(0 3px 16px rgba(0,0,0,0.5));
}
.site-header.is-scrolled .brand img{ height:75px; }

@media (max-width:640px){
  :root{
    --header-h:92px;
    --header-h-scrolled:78px;
  }
  .brand img{ height:72px; }
  .site-header.is-scrolled .brand img{ height:60px; }
}

.main-nav{ display:flex; align-items:center; gap:var(--sp-7); }
.main-nav ul{ display:flex; align-items:center; gap:var(--sp-6); }
.main-nav a{
  position:relative;
  font-size:0.92rem;
  font-weight:500;
  color:var(--text-on-dark-secondary);
  padding-block:var(--sp-2);
  transition:color var(--dur-micro) var(--ease-premium);
}
.main-nav a::after{
  content:"";
  position:absolute; inset-inline-start:0; bottom:0;
  width:0; height:1.5px;
  background:var(--cyan-400);
  transition:width var(--dur-content) var(--ease-premium);
}
.main-nav a:hover{ color:var(--cyan-400); }
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:var(--sp-5); }

.lang-switch{
  display:flex;
  align-items:center;
  border:1px solid var(--line-on-dark-strong);
  border-radius:var(--radius-pill);
  padding:3px;
  gap:2px;
  background:rgba(255,255,255,0.03);
}
.lang-switch button{
  padding:0.35rem 0.75rem;
  border-radius:var(--radius-pill);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--text-on-dark-tertiary);
  transition:background var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium);
}
.lang-switch button.is-active{ background:var(--blue-500); color:var(--white); }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:1px solid var(--line-on-dark-strong);
  border-radius:var(--radius-sm);
  flex-shrink:0;
}
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width:1024px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-primary{ display:none; }
}

/* Mobile drawer */
.nav-drawer{
  position:fixed; inset:0; z-index:1000;
  visibility:hidden;
  pointer-events:none;
}
.nav-drawer.is-open{ visibility:visible; pointer-events:auto; }
.nav-drawer-scrim{
  position:absolute; inset:0;
  background:rgba(1,8,24,0.6);
  opacity:0;
  transition:opacity var(--dur-content) var(--ease-premium);
}
.nav-drawer.is-open .nav-drawer-scrim{ opacity:1; }
.nav-drawer-panel{
  position:absolute; top:0; inset-inline-end:0;
  height:100%; width:min(360px, 86vw);
  background:linear-gradient(165deg, var(--navy-900), var(--navy-950));
  border-inline-start:1px solid var(--line-on-dark);
  padding:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-8);
  transform:translateX(100%);
  transition:transform var(--dur-content) var(--ease-premium);
}
html[dir="rtl"] .nav-drawer-panel{ transform:translateX(-100%); }
.nav-drawer.is-open .nav-drawer-panel{ transform:translateX(0); }

.nav-drawer-top{ display:flex; align-items:center; justify-content:space-between; }
.nav-drawer-close{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-on-dark-strong); border-radius:var(--radius-sm); }
.nav-drawer-close svg{ width:16px; height:16px; }
.nav-drawer-panel .main-nav{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
.nav-drawer-panel .main-nav ul{ flex-direction:column; align-items:stretch; gap:var(--sp-1); }
.nav-drawer-panel .main-nav a{ display:block; padding:var(--sp-4) 0; font-size:1.1rem; border-bottom:1px solid var(--line-on-dark); }
.nav-drawer-panel .main-nav a::after{ display:none; }
.nav-drawer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:var(--sp-4); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:var(--header-h);
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(18,157,255,0.16), transparent 60%),
    radial-gradient(45% 40% at 12% 85%, rgba(40,178,255,0.08), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
}

/* Homepage hero: content anchored to the top (not vertically centered) so it
   sits in the clear dark area above/beside the image instead of over it.
   Scoped to #home — the Hardware page's hero keeps its centered 2-column layout. */
@media (min-width:1025px){
  .hero#home{ align-items:flex-start; }
}

/* Sharp photographic backdrop — shown clearly, no blur. Readability comes
   from .hero-overlay's gradient alone. */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url("../images/hero-bg.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:none;
  opacity:1;
}

/* Readability overlay — the image's busy collage sits on the physical LEFT
   of the source photo regardless of language, so the hero copy is always
   anchored to the physical right (see .hero#home .hero-copy) and this
   gradient always protects that same physical right side in both languages. */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,
    rgba(5,10,25,0.15) 0%,
    rgba(5,10,25,0.55) 55%,
    rgba(5,10,25,0.82) 100%);
}

@media (max-width:768px){
  .hero-bg{ background-position:35% center; }
}

.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(65% 65% at 62% 40%, black 0%, transparent 75%);
  opacity:0.5;
}
.hero .container{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items:center;
  gap:var(--sp-8);
  padding-block:var(--sp-10);
  padding-bottom:calc(var(--sp-10) + 90px);
}
html[dir="rtl"] .hero .container{ grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); }

/* The homepage hero has no visual/diagram column anymore — it's a single
   block of copy, so the two-column grid above (still used by the Hardware
   page's hero) is turned off here and the copy is anchored to its
   reading-start edge with room to breathe rather than stretching full-width. */
.hero#home .container{ display:block; }

/* Content sits slightly higher and more compact than a full centered hero,
   opening up breathing room below for a future element. Desktop/tablet only —
   the mobile breakpoint below resets this to a normal stacked flow. */
.hero-copy{ margin-top:-104px; }

/* max-width + a physical (non-flipping) left margin keep the homepage hero
   copy anchored to the right — the image's collage sits on the physical left
   of the photo in both languages, so the text side must stay physically
   fixed too rather than flipping with logical start/end. Now that the hero
   aligns to the top (flex-start) instead of center, the old centering offset
   is cleared and replaced with deliberate top spacing of its own. */
@media (min-width:1025px){
  .hero#home .hero-copy{
    max-width:700px;
    margin-left:auto;
    margin-right:0;
    margin-top:var(--sp-9);
  }
}

.hero-copy .eyebrow{ opacity:0; transform:translateY(10px); animation:heroReveal var(--dur-content) var(--ease-premium) forwards; animation-delay:0.15s; }
.hero-title{
  margin-top:0.75rem;
  font-size:clamp(1.95rem, 3.7vw, 3.05rem);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-0.015em;
  color:var(--white);
  text-shadow:0 2px 18px rgba(0,0,0,0.18);
}
.hero-title .line{
  display:block;
  overflow:hidden;
}
.hero-title .line span{
  display:block;
  opacity:0;
  transform:translateY(115%);
  animation:lineReveal var(--dur-content) var(--ease-premium) forwards;
}
.hero-title .line:nth-child(1) span{ animation-delay:0.28s; }
.hero-title .line:nth-child(2) span{ animation-delay:0.42s; }

.hero-lede{
  margin-top:0.95rem;
  font-size:1rem;
  color:var(--text-on-dark-secondary);
  text-shadow:0 2px 18px rgba(0,0,0,0.18);
  max-width:480px;
  opacity:0; transform:translateY(10px);
  animation:heroReveal var(--dur-content) var(--ease-premium) forwards;
  animation-delay:0.62s;
}
.hero-ctas{
  margin-top:1.5rem;
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  opacity:0; transform:translateY(10px);
  animation:heroReveal var(--dur-content) var(--ease-premium) forwards;
  animation-delay:0.78s;
}

@keyframes heroReveal{ to{ opacity:1; transform:none; } }
@keyframes lineReveal{ to{ opacity:1; transform:none; } }

/* Still used by the Hardware page's own hero diagram (hardware.html) —
   the homepage hero no longer references this class. */
.hero-visual{
  position:relative;
  aspect-ratio:1/1;
  width:100%;
  max-width:620px;
  margin-inline:auto;
  opacity:0;
  animation:heroReveal 900ms var(--ease-premium) forwards;
  animation-delay:0.5s;
}
.hero-visual svg{ width:100%; height:100%; overflow:visible; }

.hero-trust{
  position:absolute;
  inset-inline:0;
  bottom:0;
  z-index:2;
  border-top:1px solid var(--line-on-dark);
  padding-block:var(--sp-5);
  background:linear-gradient(0deg, var(--navy-950) 0%, rgba(2,11,29,0.4) 100%);
}
.hero-trust .container{ padding-block:0; display:block; }
.trust-track{
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-on-dark-tertiary);
  font-weight:600;
  flex-wrap:wrap;
}
.trust-track .dot{ width:4px; height:4px; border-radius:50%; background:var(--cyan-400); flex-shrink:0; }

.scroll-cue{
  position:absolute;
  bottom:calc(var(--sp-6) + 64px);
  inset-inline-start:50%;
  transform:translateX(-50%);
  color:var(--text-on-dark-tertiary);
  display:none;
}
html[dir="rtl"] .scroll-cue{ transform:translateX(50%); }

@media (max-width:1024px){
  .hero .container{ grid-template-columns:1fr; gap:var(--sp-8); text-align:center; }
  html[dir="rtl"] .hero .container{ grid-template-columns:1fr; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; margin-top:0; }
  .hero-lede{ max-width:520px; }
  .hero-visual{ max-width:400px; }
  .hero#home .hero-copy{ max-width:100%; margin-inline:0; }
}
@media (max-width:640px){
  .hero{ min-height:auto; padding-bottom:var(--sp-8); }
  .trust-track{ justify-content:center; gap:var(--sp-5); font-size:0.66rem; }
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

.reveal{ opacity:0; transform:translateY(28px); transition:opacity 800ms var(--ease-premium), transform 800ms var(--ease-premium); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity 700ms var(--ease-premium), transform 700ms var(--ease-premium); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:80ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:160ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:240ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:320ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:400ms; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:480ms; }

/* ==========================================================================
   Sections — shared
   ========================================================================== */

section{ position:relative; background:var(--navy-950); }
.section-pad{ padding-block:var(--sp-11); }

.section-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-on-dark-strong), transparent);
}

/* ==========================================================================
   About / Vision · Mission · Values
   ========================================================================== */

/* Full-bleed photo background — same technique as the Hero: a sharp,
   uncropped image layer behind the content, with a readability gradient on
   top. The photo's busy composition (arrow/skyline/people) sits on the
   physical left, so the copy is always anchored to the physical right in
   both languages rather than flipping with reading direction. */
.about{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:100vh;
  display:flex;
  align-items:center;
}
.about-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url("../images/about-visual.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.about-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,
    rgba(4,10,24,0.2) 0%,
    rgba(4,10,24,0.68) 55%,
    rgba(4,10,24,0.92) 100%);
}
.about-copy{
  position:relative;
  z-index:2;
}
@media (min-width:901px){
  .about-copy{
    max-width:640px;
    margin-left:auto;
    margin-right:0;
  }
}
.about .section-title{ text-shadow:0 2px 18px rgba(0,0,0,0.35); }
.about-copy .section-lede{ color:var(--text-on-dark-secondary); text-shadow:0 2px 14px rgba(0,0,0,0.3); }
.about-copy p.body-text{ margin-top:var(--sp-5); color:var(--text-on-dark-secondary); font-size:1rem; max-width:520px; text-shadow:0 2px 14px rgba(0,0,0,0.3); }

.identity-strip{
  margin-top:var(--sp-8);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}
.identity-card{
  border:1px solid rgba(100,165,225,0.15);
  border-radius:var(--radius-md);
  padding:var(--sp-5);
  background:rgba(12,31,57,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(2,13,36,0.16);
}
.identity-card h3{
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#2bb7ff;
  font-weight:700;
  margin-bottom:var(--sp-2);
}
.identity-card p{ color:#f2f6fc; font-size:0.98rem; font-weight:600; line-height:1.7; }

.values-rail{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.value-chip{
  border:1px solid rgba(120,170,220,0.13);
  border-radius:var(--radius-pill);
  padding:0.5rem 1.1rem;
  font-size:0.85rem;
  font-weight:600;
  color:#c4d0e0;
  background:rgba(255,255,255,0.035);
  display:flex; align-items:center; gap:var(--sp-2);
  transition:border-color var(--dur-micro), color var(--dur-micro), background var(--dur-micro), transform var(--dur-micro);
}
.value-chip:hover{
  border-color:rgba(41,178,255,0.55);
  color:#eaf2ff;
  background:rgba(255,255,255,0.07);
  transform:translateY(-2px);
}
.value-chip .num{ color:#20aeff; font-weight:800; }

@media (max-width:900px){
  .about{ min-height:auto; }
  .about-bg{ background-position:65% center; }
  .about-overlay{
    background:linear-gradient(180deg,
      rgba(4,10,24,0.55) 0%,
      rgba(4,10,24,0.85) 45%,
      rgba(4,10,24,0.95) 100%);
  }
}

/* ==========================================================================
   Solutions — bento grid
   ========================================================================== */

.solutions{ background:var(--surface-solutions); }
.bento{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:min-content;
  align-items:start;
  gap:var(--sp-5);
}
.sol-card{
  position:relative;
  border-radius:var(--radius-lg);
  border:1px solid var(--card-border);
  background:linear-gradient(145deg, var(--card-grad-a), var(--card-grad-b));
  padding:var(--sp-6);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--dur-content) var(--ease-premium), box-shadow var(--dur-content) var(--ease-premium), border-color var(--dur-content) var(--ease-premium);
}
.sol-card:hover{ transform:translateY(-4px); box-shadow:0 16px 45px rgba(0,70,140,0.14); border-color:var(--card-border-hover); }
.sol-card::after{
  content:"";
  position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--blue-500), var(--cyan-400));
  opacity:0; transition:opacity var(--dur-content) var(--ease-premium);
}
.sol-card:hover::after{ opacity:1; }

.sol-card.size-l{ grid-column:span 3; grid-row:span 2; min-height:340px; }
.sol-card.size-m{ grid-column:span 3; min-height:220px; }
.sol-card.size-s{ grid-column:span 2; min-height:190px; }

.sol-icon{
  width:46px; height:46px;
  border-radius:var(--radius-sm);
  background:linear-gradient(150deg, var(--navy-700), var(--navy-900));
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan-300);
  margin-bottom:var(--sp-5);
  flex-shrink:0;
}
.sol-icon svg{ width:22px; height:22px; }

.sol-card h3{ font-size:1.25rem; font-weight:700; margin-bottom:var(--sp-2); color:var(--text-on-dark-primary); }
.sol-card.size-l h3{ font-size:1.55rem; }
.sol-card p.sol-desc{ color:var(--text-on-dark-secondary); font-size:0.95rem; max-width:38ch; }

.sol-list{ margin-top:var(--sp-5); display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) var(--sp-5); }
.sol-card.size-m .sol-list, .sol-card.size-s .sol-list{ grid-template-columns:1fr; margin-top:var(--sp-4); }
.sol-list li{
  font-size:0.85rem;
  color:var(--text-on-dark-secondary);
  display:flex; align-items:flex-start; gap:var(--sp-2);
}
.sol-list li svg{ width:14px; height:14px; margin-top:3px; color:var(--cyan-400); flex-shrink:0; }

.sol-card-tag{
  position:absolute; top:var(--sp-5); inset-inline-end:var(--sp-5);
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--silver-500); font-weight:700;
}

/* Hardware & Technology Infrastructure — whole-card link into the dedicated page */
.sol-card--hardware{
  flex-direction:row;
  align-items:center;
  gap:var(--sp-6);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.sol-card--hardware:hover{ transform:translateY(-3px); }
.hw-card-content{ flex:1 1 56%; min-width:0; display:flex; flex-direction:column; }
.hw-card-visual{
  flex:0 0 40%;
  display:flex; align-items:center; justify-content:center;
  transition:transform 300ms var(--ease-premium);
}
.hw-card-visual svg{ width:100%; max-width:180px; height:auto; }
.sol-card--hardware:hover .hw-card-visual{ transform:scale(1.03); }

.hw-chip-row{ margin-top:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.hw-chip{
  font-size:0.76rem;
  font-weight:600;
  color:var(--text-on-dark-secondary);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line-on-dark);
  border-radius:var(--radius-pill);
  padding:0.3rem 0.8rem;
}

.hw-cta{
  margin-top:var(--sp-6);
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-weight:700; font-size:0.92rem;
  color:var(--cyan-400);
}
.hw-cta svg{ width:16px; height:16px; transition:transform 260ms var(--ease-premium); }
html[dir="rtl"] .hw-cta svg{ transform:scaleX(-1); }
.sol-card:hover .hw-cta svg{ transform:translateX(5px); }
html[dir="rtl"] .sol-card:hover .hw-cta svg{ transform:scaleX(-1) translateX(5px); }

@media (max-width:900px){
  .bento{ grid-template-columns:1fr 1fr; }
  .sol-card.size-l{ grid-column:span 2; min-height:auto; }
  .sol-card.size-m{ grid-column:span 2; min-height:auto; }
  .sol-card.size-s{ grid-column:span 1; min-height:auto; }
}
@media (max-width:640px){
  .bento{ grid-template-columns:1fr; }
  .sol-card.size-l, .sol-card.size-m, .sol-card.size-s{ grid-column:span 1; min-height:auto; }
  .sol-card--hardware{ flex-direction:column; align-items:stretch; gap:var(--sp-5); }
  .hw-card-visual{ flex:0 0 auto; max-width:160px; margin-inline:auto; }
}

/* ==========================================================================
   Solution detail pages — breadcrumb, showcase split, features, outcomes
   ========================================================================== */

.breadcrumb{
  position:relative; z-index:2;
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  font-size:0.82rem;
  color:var(--text-on-dark-tertiary);
  margin-bottom:var(--sp-6);
}
.breadcrumb a{ color:var(--text-on-dark-secondary); transition:color var(--dur-micro); }
.breadcrumb a:hover{ color:var(--cyan-400); }
.breadcrumb .sep{ opacity:0.5; }
.breadcrumb [aria-current]{ color:var(--text-on-dark-primary); font-weight:600; }

.solution-showcase{ background:var(--surface-solutions); }
.solution-details{ background:var(--surface-industries); }
.solution-outcomes{ background:var(--surface-brands); }
.solution-related{ background:var(--surface-contact); }

/* Section 4 — dedicated large visual, same full-bleed technique as About
   and Why HGTL: a per-page background-image set via --solution-visual-image
   (currently unset on every page — a real photo drops straight in later),
   layered over a decorative fallback glow so the section still reads as
   intentional before that photo exists, with a readability gradient and a
   short caption anchored to the physical right in both languages. */
.solution-visual{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:56vh;
  display:flex;
  align-items:center;
}
.solution-visual-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background-color:var(--navy-900);
  background-image:
    radial-gradient(55% 60% at 28% 32%, rgba(18,157,255,0.16), transparent 70%),
    var(--solution-visual-image, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.solution-visual-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(70% 70% at 30% 35%, black 0%, transparent 75%);
  opacity:0.5;
}
.solution-visual-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,
    rgba(11,30,58,0.12) 0%,
    rgba(11,30,58,0.68) 55%,
    rgba(11,30,58,0.92) 100%);
}
.solution-visual-caption{
  position:relative;
  z-index:2;
  max-width:460px;
}
@media (min-width:901px){
  .solution-visual-caption{ margin-left:auto; margin-right:0; }
}
.solution-visual-caption p{
  margin-top:var(--sp-3);
  font-size:1.15rem;
  font-weight:600;
  color:var(--text-on-dark-primary);
  text-shadow:0 2px 14px rgba(0,0,0,0.3);
}
@media (max-width:900px){
  .solution-visual{ min-height:38vh; }
  .solution-visual-bg{ background-position:65% center; }
  .solution-visual-overlay{
    background:linear-gradient(180deg,
      rgba(11,30,58,0.45) 0%,
      rgba(11,30,58,0.82) 45%,
      rgba(11,30,58,0.95) 100%);
  }
}

/* ==========================================================================
   Inline solution panels — homepage "حلولنا": each SOLUTIONS[] entry gets a
   full-bleed section living directly in this page (no separate route), its
   photo filling the whole section exactly like the "Why HGTL" section
   (.why / .why-bg / .why-overlay above) — same technique, reused 1:1.
   The overview cards above smooth-scroll into these via #solution-{key}
   (native html{scroll-behavior:smooth}, no JS needed).
   ========================================================================== */

.solution-panel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:100vh;
  display:flex;
  align-items:center;
  border-top:1px solid var(--line-on-dark);
  scroll-margin-top:calc(var(--header-h-scrolled) + var(--sp-4));
}
.solution-panel--1{ background:var(--surface-industries); }
.solution-panel--2{ background:var(--surface-brands); }
.solution-panel--3{ background:var(--surface-cta); }
.solution-panel--4{ background:var(--surface-contact); }

.solution-panel-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.solution-panel-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,
    rgba(11,30,58,0.18) 0%,
    rgba(11,30,58,0.72) 55%,
    rgba(11,30,58,0.94) 100%);
}

.solution-panel-copy{ position:relative; z-index:2; }
@media (min-width:901px){
  .solution-panel-copy{ max-width:640px; margin-left:auto; margin-right:0; }
}

.solution-panel-tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:50%;
  border:1px solid var(--line-on-dark-strong);
  font-weight:700; font-size:0.9rem; color:var(--cyan-300);
  margin-bottom:var(--sp-5);
}

.solution-panel-copy .section-title{ margin-top:var(--sp-3); text-shadow:0 2px 18px rgba(0,0,0,0.35); }
.solution-panel-copy .section-lede{ margin-top:var(--sp-4); max-width:560px; text-shadow:0 2px 14px rgba(0,0,0,0.3); }

.solution-panel-subhead{
  margin-top:var(--sp-8);
  font-size:0.98rem; font-weight:700;
  color:var(--text-on-dark-primary);
  text-shadow:0 2px 14px rgba(0,0,0,0.3);
}

.solution-panel-list{ margin-top:var(--sp-4); }
.solution-panel-list li{ text-shadow:0 2px 12px rgba(0,0,0,0.3); }

.solution-panel-subgroup{ margin-top:var(--sp-6); }
.solution-panel-subgroup-title{
  font-size:0.82rem; font-weight:700; letter-spacing:0.02em;
  color:var(--text-on-dark-secondary);
  text-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.solution-panel-subgroup .hw-chip-row{ margin-top:var(--sp-3); }
.solution-panel-subgroup .hw-chip{ background:rgba(6,18,42,0.55); border-color:var(--line-on-dark-strong); }

.solution-panel-ctas{ margin-top:var(--sp-7); }

@media (max-width:900px){
  .solution-panel{ min-height:auto; }
  .solution-panel-bg{ background-position:65% center; }
  .solution-panel-overlay{
    background:linear-gradient(180deg,
      rgba(11,30,58,0.55) 0%,
      rgba(11,30,58,0.85) 45%,
      rgba(11,30,58,0.96) 100%);
  }
}

.related-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-5);
  margin-top:var(--sp-9);
}
.related-card{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg, var(--card-grad-a), var(--card-grad-b));
  transition:transform var(--dur-content) var(--ease-premium), border-color var(--dur-content) var(--ease-premium);
}
.related-card:hover{ transform:translateY(-3px); border-color:var(--card-border-hover); }
.related-card .sol-icon{ margin-bottom:0; }
.related-card-body h3{ font-size:1.02rem; font-weight:700; color:var(--text-on-dark-primary); margin-bottom:2px; }
.related-card-body span{ font-size:0.82rem; color:var(--cyan-400); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.related-card-body span svg{ width:14px; height:14px; transition:transform 260ms var(--ease-premium); }
html[dir="rtl"] .related-card-body span svg{ transform:scaleX(-1); }
.related-card:hover .related-card-body span svg{ transform:translateX(4px); }
html[dir="rtl"] .related-card:hover .related-card-body span svg{ transform:scaleX(-1) translateX(4px); }

@media (max-width:900px){
  .related-grid{ grid-template-columns:1fr; }
}

.outcome-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-5);
  margin-top:var(--sp-9);
}
.outcome-card{
  border:1px solid rgba(100,165,225,0.15);
  border-radius:var(--radius-md);
  padding:var(--sp-5);
  background:rgba(12,31,57,0.72);
}
.outcome-icon{
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  background:linear-gradient(150deg, var(--navy-700), var(--navy-900));
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan-300);
  margin-bottom:var(--sp-4);
}
.outcome-icon svg{ width:18px; height:18px; }
.outcome-card p{ color:var(--text-on-dark-primary); font-size:0.95rem; line-height:1.7; }

@media (max-width:800px){
  .outcome-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Ecosystem
   ========================================================================== */

.ecosystem{ background:radial-gradient(60% 60% at 50% 30%, var(--navy-900), var(--surface-ecosystem) 70%); }
.ecosystem-visual{ position:relative; max-width:760px; margin-inline:auto; margin-top:var(--sp-9); }
.ecosystem-visual svg{ width:100%; height:auto; }
.eco-node-label{
  font-size:0.72rem; font-weight:700; fill:var(--text-on-dark-secondary);
}
.eco-path{
  stroke-dasharray:6 8;
  animation:dashFlow 3.6s linear infinite;
}
@keyframes dashFlow{ to{ stroke-dashoffset:-140; } }

/* ==========================================================================
   Why HGTL
   ========================================================================== */

/* Full-bleed photo background — same technique as About: a sharp,
   uncropped-as-possible image layer behind the content, with a readability
   gradient on top. The icon cluster sits toward the physical left, so the
   copy is anchored to the physical right in both languages rather than
   flipping with reading direction (matching the About section). */
.why{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:var(--surface-why);
}
.why-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url("../images/why-visual.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.why-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,
    rgba(11,30,58,0.18) 0%,
    rgba(11,30,58,0.72) 55%,
    rgba(11,30,58,0.94) 100%);
}
.why-copy{
  position:relative;
  z-index:2;
}
@media (min-width:901px){
  .why-copy{
    max-width:640px;
    margin-left:auto;
    margin-right:0;
  }
}
.why .section-title{ text-shadow:0 2px 18px rgba(0,0,0,0.35); }
.why-list{ display:flex; flex-direction:column; margin-top:var(--sp-8); }
.why-item{
  display:grid; grid-template-columns:56px 1fr; gap:var(--sp-5);
  padding-block:var(--sp-5);
  border-top:1px solid var(--line-on-dark);
  cursor:pointer;
  transition:padding-inline-start var(--dur-content) var(--ease-premium);
}
.why-item:last-child{ border-bottom:1px solid var(--line-on-dark); }
.why-num{ font-size:1.5rem; font-weight:700; color:var(--silver-500); transition:color var(--dur-micro); }
.why-item h3{ font-size:1.1rem; font-weight:700; margin-bottom:var(--sp-1); color:var(--text-on-dark-primary); text-shadow:0 2px 14px rgba(0,0,0,0.3); }
.why-item p{ color:var(--text-on-dark-secondary); font-size:0.92rem; max-width:46ch; text-shadow:0 2px 14px rgba(0,0,0,0.3); }
.why-item.is-active{ padding-inline-start:var(--sp-3); }
.why-item.is-active .why-num{ color:var(--cyan-400); }
.why-item:hover .why-num{ color:var(--cyan-400); }

@media (max-width:900px){
  .why{ min-height:auto; }
  .why-bg{ background-position:65% center; }
  .why-overlay{
    background:linear-gradient(180deg,
      rgba(11,30,58,0.55) 0%,
      rgba(11,30,58,0.85) 45%,
      rgba(11,30,58,0.96) 100%);
  }
}

/* ==========================================================================
   How we work — timeline
   ========================================================================== */

.how{ background:linear-gradient(180deg, var(--surface-why) 0%, var(--surface-industries) 100%); }
.timeline{ position:relative; margin-top:var(--sp-10); }
.timeline-line{
  position:absolute; top:28px; inset-inline:6%;
  height:2px;
  background:var(--line-on-dark-strong);
}
.timeline-line-fill{
  position:absolute; inset-inline-start:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg, var(--blue-500), var(--cyan-400));
  transition:width 500ms var(--ease-premium);
}
html[dir="rtl"] .timeline-line-fill{ inset-inline-start:auto; inset-inline-end:0; }
.timeline-steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-5);
  position:relative;
}
.tl-step{ text-align:center; padding-top:var(--sp-8); }
.tl-node{
  position:absolute; top:20px; inset-inline-start:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--navy-800); border:2px solid var(--line-on-dark-strong);
  transition:background var(--dur-content) var(--ease-premium), border-color var(--dur-content) var(--ease-premium), box-shadow var(--dur-content) var(--ease-premium);
}
html[dir="rtl"] .tl-node{ transform:translateX(50%); }
.tl-step.is-active .tl-node{ background:var(--cyan-400); border-color:var(--cyan-400); box-shadow:0 0 0 6px rgba(40,178,255,0.18); }
.tl-icon{
  width:44px; height:44px; margin-inline:auto;
  border-radius:50%;
  border:1px solid var(--line-on-dark-strong);
  background:rgba(255,255,255,0.03);
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan-300);
  margin-bottom:var(--sp-4);
  transition:border-color var(--dur-content) var(--ease-premium), background var(--dur-content) var(--ease-premium);
}
.tl-icon svg{ width:20px; height:20px; }
.tl-step.is-active .tl-icon{ border-color:var(--cyan-400); background:rgba(40,178,255,0.1); }
.tl-index{ font-size:0.72rem; letter-spacing:0.12em; color:var(--text-on-dark-tertiary); font-weight:700; }
.tl-step h3{ margin-top:var(--sp-2); font-size:1.02rem; font-weight:700; color:var(--text-on-dark-primary); }
.tl-step p{ margin-top:var(--sp-2); font-size:0.85rem; color:var(--text-on-dark-secondary); }

@media (max-width:900px){
  .timeline-line{ display:none; }
  .timeline-steps{ grid-template-columns:1fr; gap:0; }
  .tl-step{
    text-align:start; padding-top:0; padding-bottom:var(--sp-7);
    padding-inline-start:var(--sp-7);
    position:relative;
    border-inline-start:2px solid var(--line-on-dark-strong);
  }
  .tl-step:last-child{ padding-bottom:0; }
  .tl-node{ inset-inline-start:-9px; top:0; transform:none; }
  html[dir="rtl"] .tl-node{ transform:none; }
}

/* ==========================================================================
   Industries
   ========================================================================== */

.industries{ background:var(--surface-industries); }
.industry-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-4); }
.industry-card{
  position:relative;
  border-radius:var(--radius-md);
  border:1px solid var(--card-border);
  background:linear-gradient(145deg, var(--card-grad-a), var(--card-grad-b));
  padding:var(--sp-6) var(--sp-5);
  min-height:170px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  transition:border-color var(--dur-content) var(--ease-premium), transform var(--dur-content) var(--ease-premium);
}
.industry-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, var(--blue-600), var(--navy-700));
  opacity:0;
  transition:opacity var(--dur-content) var(--ease-premium);
  z-index:0;
}
.industry-card:hover{ transform:translateY(-3px); border-color:var(--card-border-hover); }
.industry-card:hover::before{ opacity:1; }
.industry-card > *{ position:relative; z-index:1; }
.industry-icon{ width:38px; height:38px; color:var(--cyan-400); transition:color var(--dur-content) var(--ease-premium); }
.industry-icon svg{ width:100%; height:100%; }
.industry-card:hover .industry-icon{ color:var(--white); }
.industry-card h3{ font-size:1.02rem; font-weight:700; color:var(--text-on-dark-primary); transition:color var(--dur-content) var(--ease-premium); }
.industry-card:hover h3{ color:var(--white); }
.industry-index{ font-size:0.72rem; color:var(--text-on-dark-tertiary); font-weight:700; transition:color var(--dur-content) var(--ease-premium); }
.industry-card:hover .industry-index{ color:rgba(244,248,255,0.75); }

@media (max-width:900px){ .industry-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .industry-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-3); } }

/* ==========================================================================
   Brands
   ========================================================================== */

.brands{
  background:
    radial-gradient(circle at 50% 20%, rgba(18,157,255,0.05), transparent 36%),
    var(--surface-brands);
}
.brands .eyebrow{ color:var(--cyan-400); font-weight:700; }
.brands .eyebrow::before{
  width:26px;
  background:linear-gradient(90deg, transparent, var(--cyan-400), transparent);
}
.brands .section-title{ color:#f3f7ff; font-weight:800; }

.brand-grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:var(--sp-5);
  align-items:center;
}
.brand-tile{
  border:1px solid rgba(150,190,230,0.14);
  border-radius:var(--radius-md);
  height:96px;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  background:#0a1b34;
  box-shadow:0 8px 28px rgba(0,10,30,0.3);
  transition:border-color 260ms var(--ease-premium), box-shadow 260ms var(--ease-premium), transform 260ms var(--ease-premium);
}
.brand-tile:hover{
  border-color:rgba(20,157,255,0.4);
  box-shadow:0 12px 35px rgba(0,80,160,0.2);
  transform:translateY(-3px);
}
.brand-tile img{
  max-width:72%;
  max-height:46px;
  width:auto;
  object-fit:contain;
  opacity:0.86;
  transition:opacity 260ms var(--ease-premium), transform 260ms var(--ease-premium);
}
.brand-tile:hover img{
  opacity:1;
  transform:scale(1.03);
}

@media (max-width:900px){ .brand-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .brand-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3); } .brand-tile{ height:78px; } }

/* ==========================================================================
   Commitments
   ========================================================================== */

.commitments{ background:linear-gradient(180deg, var(--navy-950), var(--navy-900)); }
.commit-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-5) var(--sp-9);
  margin-top:var(--sp-9);
}
.commit-item{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding-block:var(--sp-5);
  border-bottom:1px solid var(--line-on-dark);
}
.commit-check{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line-on-dark-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan-400); flex-shrink:0;
}
.commit-check svg{ width:14px; height:14px; }
.commit-item p{ font-size:1rem; color:var(--text-on-dark-primary); font-weight:500; }

@media (max-width:800px){ .commit-grid{ grid-template-columns:1fr; gap:0; } }

/* ==========================================================================
   Final CTA
   ========================================================================== */

.final-cta{
  background:
    radial-gradient(50% 70% at 50% 100%, rgba(18,157,255,0.22), transparent 70%),
    var(--surface-cta);
  text-align:center;
  overflow:hidden;
}
.final-cta .container{ position:relative; z-index:1; max-width:820px; }
.final-cta .section-title{ font-size:clamp(1.9rem, 4vw, 3rem); }
.final-cta-actions{ margin-top:var(--sp-7); display:flex; justify-content:center; gap:var(--sp-4); flex-wrap:wrap; }
.final-cta-mark{
  position:absolute; top:50%; inset-inline-start:50%; transform:translate(-50%,-50%);
  width:900px; height:900px; opacity:0.5;
  pointer-events:none;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact{ background:var(--surface-contact); }
.contact-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--sp-10); }
.contact-info{ display:flex; flex-direction:column; gap:var(--sp-5); }
.contact-row{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4);
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  background:linear-gradient(145deg, var(--card-grad-a), var(--card-grad-b));
  transition:border-color var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.contact-row.is-link:hover{ border-color:var(--card-border-hover); transform:translateY(-2px); }
.contact-row-icon{
  width:42px; height:42px; border-radius:var(--radius-sm);
  background:linear-gradient(150deg, var(--navy-700), var(--navy-900));
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan-300); flex-shrink:0;
}
.contact-row-icon svg{ width:19px; height:19px; }
.contact-row-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-on-dark-tertiary); font-weight:700; }
.contact-row-value{ font-size:0.98rem; font-weight:600; margin-top:2px; color:var(--text-on-dark-primary); }

.contact-meta{
  display:flex; gap:var(--sp-4); margin-top:var(--sp-2); font-size:0.82rem; color:var(--text-on-dark-tertiary);
  flex-wrap:wrap;
}

.contact-form{
  background:linear-gradient(145deg, var(--card-grad-a), var(--card-grad-b));
  border:1px solid var(--card-border); border-radius:var(--radius-lg);
  padding:var(--sp-7);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.form-field{ display:flex; flex-direction:column; gap:var(--sp-2); }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:0.85rem; font-weight:600; color:var(--text-on-dark-primary); }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid rgba(135,175,220,0.14);
  border-radius:var(--radius-sm);
  padding:0.75rem 0.9rem;
  background:rgba(255,255,255,0.035);
  color:#f3f6fa;
  font-size:0.95rem;
  transition:border-color var(--dur-micro) var(--ease-premium), box-shadow var(--dur-micro) var(--ease-premium);
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:#70829a; }
.form-field select option{ background:#0b1a31; color:#f3f6fa; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:rgba(30,170,255,0.75); box-shadow:0 0 0 3px rgba(18,157,255,0.14); outline:none;
}
.form-field input:-webkit-autofill, .form-field textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px rgba(16,39,70,0.9) inset;
  -webkit-text-fill-color:#f3f6fa;
  caret-color:#f3f6fa;
}
.form-field textarea{ resize:vertical; min-height:110px; }
.form-foot{ margin-top:var(--sp-6); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.form-note{ font-size:0.8rem; color:var(--text-on-dark-tertiary); max-width:38ch; }
.form-status{ font-size:0.85rem; font-weight:600; min-height:1.2em; }
.form-status.is-success{ color:#2fd992; }
.form-status.is-error{ color:#ff7a7a; }

@media (max-width:900px){
  .contact-layout{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{ background:var(--surface-footer); border-top:1px solid var(--line-on-dark); padding-block:var(--sp-9) var(--sp-6); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:var(--sp-8); }
.footer-brand img{ height:30px; }
.footer-brand p{ margin-top:var(--sp-4); color:var(--text-on-dark-secondary); font-size:0.9rem; max-width:34ch; }
.footer-col h4{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--silver-400); font-weight:700; margin-bottom:var(--sp-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-col a{ color:var(--text-on-dark-secondary); font-size:0.92rem; transition:color var(--dur-micro); }
.footer-col a:hover{ color:var(--cyan-300); }
.footer-col p{ color:var(--text-on-dark-secondary); font-size:0.92rem; }

.footer-bottom{
  margin-top:var(--sp-9);
  padding-top:var(--sp-6);
  border-top:1px solid var(--line-on-dark);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3);
  font-size:0.8rem;
  color:var(--text-on-dark-tertiary);
}
.footer-legal{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }

@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:var(--sp-7); }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Whatsapp float
   ========================================================================== */

.float-actions{
  position:fixed; bottom:var(--sp-5); inset-inline-end:var(--sp-5); z-index:800;
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.float-btn{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-500); color:var(--white);
  box-shadow:0 10px 24px -8px rgba(18,157,255,0.6);
  transition:transform var(--dur-micro) var(--ease-premium);
}
.float-btn:hover{ transform:translateY(-2px) scale(1.04); }
.float-btn svg{ width:24px; height:24px; }
.float-btn.whatsapp{ background:#1fae5a; box-shadow:0 10px 24px -8px rgba(31,174,90,0.55); }

@media (max-width:640px){
  .float-actions{ bottom:var(--sp-4); inset-inline-end:var(--sp-4); }
  .float-btn{ width:46px; height:46px; }
  .float-btn svg{ width:20px; height:20px; }
}

/* ==========================================================================
   Utility responsive type scale for section padding on small screens
   ========================================================================== */

@media (max-width:900px){
  .section-pad{ padding-block:var(--sp-9); }
  .why-layout, .contact-layout{ gap:var(--sp-7); }
}
@media (max-width:640px){
  .section-pad{ padding-block:var(--sp-8); }
}