/* ==========================================================================
   Orbis Energy Capital — design system
   Palette sampled from the corporate logo:
   navy globe #0A2140 · sky-blue continents #4FA0D9 · lime location pin #AACB37
   ========================================================================== */

:root{
  --navy:#0A2140;
  --navy-700:#12365F;
  --navy-500:#1B4C82;
  --sky:#2E86C8;
  --sky-400:#4FA0D9;
  --sky-200:#A8D2F0;
  --sky-50:#EDF6FD;
  --lime:#AACB37;
  --lime-600:#8FAE22;
  --lime-50:#F5FAE4;
  --teal:#1F6B5C;

  --ink:#0B1C33;
  --body:#4A5C74;
  --muted:#75879E;
  --line:#E2EBF5;
  --surface:#FFFFFF;
  --surface-2:#F5F9FD;

  --radius:20px;
  --radius-sm:14px;
  --radius-lg:28px;
  --shadow-sm:0 1px 2px rgba(10,33,64,.06), 0 2px 8px rgba(10,33,64,.05);
  --shadow:0 4px 12px rgba(10,33,64,.06), 0 18px 40px -12px rgba(10,33,64,.16);
  --shadow-lg:0 8px 24px rgba(10,33,64,.08), 0 32px 70px -20px rgba(10,33,64,.28);
  --ring:0 0 0 4px rgba(79,160,217,.22);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shell:1200px;
  --header-h:106px;

  --grad-brand:linear-gradient(120deg,var(--navy) 0%,var(--navy-500) 45%,var(--sky) 100%);
  --grad-lime:linear-gradient(120deg,var(--lime) 0%,var(--lime-600) 100%);
  --font-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--surface);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0 0 .6em;
  font-weight:800;
}
h1{ font-size:clamp(2.3rem,5.2vw,4rem); }
h2{ font-size:clamp(1.85rem,3.6vw,2.9rem); }
h3{ font-size:clamp(1.15rem,1.7vw,1.4rem); font-weight:750; }
h4{ font-size:1.05rem; font-weight:700; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--sky); text-decoration:none; transition:color .25s var(--ease); }
a:hover{ color:var(--navy); }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
strong,b{ color:var(--ink); font-weight:700; }

:focus-visible{ outline:3px solid var(--sky-400); outline-offset:3px; border-radius:6px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.narrow{ max-width:820px; }
.center{ text-align:center; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; color:#fff; }

/* ---------- section rhythm ---------- */
section{ position:relative; }
.band{ padding:clamp(72px,9vw,124px) 0; }
.band--tight{ padding:clamp(56px,6vw,84px) 0; }
.band--tint{ background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 22%,var(--surface-2) 78%,var(--surface) 100%); }
.band--solid-tint{ background:var(--surface-2); }
.band--dark{ background:var(--navy); color:#BFD3E8; }
.band--dark h2,.band--dark h3,.band--dark h4{ color:#fff; }
.band--dark strong{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:.76rem; font-weight:750;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--sky); margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px; background:var(--grad-lime);
}
.band--dark .eyebrow{ color:var(--lime); }
.lede{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--body); max-width:64ch; }
.band--dark .lede{ color:#B7CCE3; }
.section-head{ max-width:66ch; margin-bottom:clamp(38px,5vw,60px); }
.section-head.center{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--grad-brand);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-size:.97rem; font-weight:700; letter-spacing:-.005em;
  padding:15px 28px; border:0; border-radius:999px; cursor:pointer;
  color:#fff; background:var(--btn-bg);
  box-shadow:0 2px 6px rgba(10,33,64,.14), 0 12px 26px -10px rgba(27,76,130,.6);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), color .25s var(--ease);
  overflow:hidden; text-align:center;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(120deg,var(--sky) 0%,var(--sky-400) 60%,var(--lime) 140%);
  transition:opacity .4s var(--ease);
}
.btn:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 4px 10px rgba(10,33,64,.16), 0 22px 44px -14px rgba(27,76,130,.7); }
.btn:active{ transform:translateY(-1px); }
.btn:hover::after{ opacity:1; }
.btn svg{ width:18px; height:18px; flex:none; transition:transform .35s var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }

.btn--lime{ --btn-bg:var(--grad-lime); color:var(--navy); box-shadow:0 2px 6px rgba(10,33,64,.12), 0 12px 26px -10px rgba(143,174,34,.65); }
.btn--lime:hover{ color:var(--navy); }
.btn--lime::after{ background:linear-gradient(120deg,#BFE04A 0%,var(--lime) 100%); }

.btn--ghost{
  background:transparent; color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn--ghost::after{ background:var(--surface-2); }
.btn--ghost:hover{ color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--sky-200), 0 14px 30px -16px rgba(10,33,64,.4); }
.band--dark .btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); }
.band--dark .btn--ghost::after{ background:rgba(255,255,255,.1); }
.band--dark .btn--ghost:hover{ color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); }

.btn--sm{ padding:11px 20px; font-size:.88rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn-row.center{ justify-content:center; }

.textlink{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--navy);
}
.textlink svg{ width:16px; height:16px; transition:transform .35s var(--ease-out); }
.textlink:hover{ color:var(--sky); }
.textlink:hover svg{ transform:translateX(5px); }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{
  background:var(--navy); color:#9FBBD8;
  font-size:.83rem; letter-spacing:.01em;
}
.topbar .shell{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:40px; }
.topbar a{ color:#CFE0F1; }
.topbar a:hover{ color:#fff; }
.topbar-list{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar-list li{ display:inline-flex; align-items:center; gap:7px; }
.topbar-list svg{ width:14px; height:14px; color:var(--lime); flex:none; }
.topbar-tag{ display:inline-flex; align-items:center; gap:8px; }
.topbar-tag span{ opacity:.85; }

.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 6px 26px -14px rgba(10,33,64,.34);
  background:rgba(255,255,255,.93);
}
.site-header .shell{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:var(--header-h);
}

/* brand — the logo NEVER rotates, it only lifts gently on hover */
.brand{ display:inline-flex; align-items:center; gap:13px; flex:none; }

/* header uses the complete official lockup (globe + wordmark + pin point),
   so the mark is never cut down to a fragment */
.brand-logo{
  height:82px; width:auto; display:block;
  transition:transform .5s var(--ease-out), filter .5s var(--ease);
  will-change:transform;
}
.brand--logo:hover .brand-logo{
  transform:translateY(-2px) scale(1.04);
  filter:drop-shadow(0 12px 22px rgba(27,76,130,.3));
}
/* the emblem is 924x428 — the box matches that ratio so nothing is letterboxed
   into a square or clipped */
.brand-emblem{
  width:86px; height:40px; flex:none;
  display:grid; place-items:center;
  transition:transform .5s var(--ease-out), filter .5s var(--ease);
  will-change:transform;
}
.brand-emblem img{ width:100%; height:100%; object-fit:contain; }
.brand:hover .brand-emblem{ transform:translateY(-2px) scale(1.05); filter:drop-shadow(0 8px 16px rgba(27,76,130,.3)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{
  font-family:var(--font-display); font-size:1.06rem; font-weight:800;
  color:var(--navy); letter-spacing:-.02em; white-space:nowrap;
}
.brand-text span{
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:600; white-space:nowrap;
}

/* nav */
.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative;
  font-family:var(--font-display); font-size:.94rem; font-weight:650;
  color:var(--ink); padding:10px 15px; border-radius:10px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px; border-radius:2px;
  background:var(--grad-lime); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav a:hover{ color:var(--navy); background:var(--sky-50); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--navy); }

.header-cta{ display:flex; align-items:center; gap:10px; flex:none; }

.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); cursor:pointer; position:relative; flex:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.burger:hover{ border-color:var(--sky-200); background:var(--sky-50); }
.burger i{
  position:absolute; left:13px; width:20px; height:2px; border-radius:2px; background:var(--navy);
  transition:transform .38s var(--ease-out), opacity .25s var(--ease);
}
.burger i:nth-child(1){ top:16px; }
.burger i:nth-child(2){ top:22px; }
.burger i:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:88;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);
  padding:calc(var(--header-h) + 34px) 24px 40px;
  display:flex; flex-direction:column; gap:6px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .45s var(--ease-out), visibility .35s;
  overflow-y:auto;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-nav a{
  font-family:var(--font-display); font-weight:750; font-size:1.32rem; color:var(--ink);
  padding:15px 6px; border-bottom:1px solid var(--line);
}
.mobile-nav a:hover,.mobile-nav a[aria-current="page"]{ color:var(--sky); }
.mobile-nav .btn{ margin-top:22px; }

/* ==========================================================================
   Hero + 3D globe
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 620px at 88% -10%, rgba(79,160,217,.20), transparent 62%),
    radial-gradient(700px 520px at 4% 106%, rgba(170,203,55,.16), transparent 60%),
    linear-gradient(180deg,#FBFDFF 0%,#F2F8FE 58%,#FFFFFF 100%);
  padding:clamp(58px,7vw,92px) 0 clamp(70px,8vw,110px);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(27,76,130,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27,76,130,.055) 1px, transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 76%);
}
.hero .shell{ position:relative; z-index:2; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,68px); align-items:center;
}
.hero h1{ margin-bottom:22px; }
.hero h1 .grad{
  background:linear-gradient(105deg,var(--sky) 0%,var(--navy-500) 45%,var(--lime-600) 105%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lede{ font-size:clamp(1.06rem,1.6vw,1.25rem); max-width:56ch; margin-bottom:32px; }

.hero-pill{
  display:inline-flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  padding:8px 8px 8px 16px; border-radius:999px; margin-bottom:26px;
  font-size:.85rem; font-weight:600; color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.hero-pill em{
  font-style:normal; background:var(--lime-50); color:var(--lime-600);
  font-weight:750; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.hero-pill .dot{
  width:8px; height:8px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 0 rgba(170,203,55,.7); animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(170,203,55,.65); }
  70%{ box-shadow:0 0 0 12px rgba(170,203,55,0); }
  100%{ box-shadow:0 0 0 0 rgba(170,203,55,0); }
}

.hero-trust{
  margin-top:38px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 34px; align-items:center;
}
.hero-trust p{ margin:0; font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:650; }
.hero-trust ul{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.hero-trust li{ font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--navy-700); }

/* --- the globe stage --- */
.globe-stage{
  position:relative; aspect-ratio:1/1; width:100%; max-width:520px; margin-inline:auto;
  display:grid; place-items:center;
}
.globe-stage::before{ /* atmosphere */
  content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(79,160,217,.30) 0%, rgba(79,160,217,.10) 55%, transparent 72%);
  filter:blur(14px);
}
/* the sphere body is CSS; the land, graticule, flight path and aircraft are all
   drawn in the overlay canvas so they share one 3D projection */
.globe-sphere{
  position:absolute; z-index:2; width:78%; aspect-ratio:1;
  border-radius:50%;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.45),
    0 30px 70px -24px rgba(10,33,64,.55),
    0 0 0 1px rgba(79,160,217,.28);
  background:radial-gradient(circle at 32% 28%, #1B4C82 0%, #0E2B4E 46%, #071A32 78%, #04101F 100%);
}
.globe-sphere::after{ /* specular sheen */
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 26%, transparent 52%);
}
.globe-layer{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  width:100%; height:100%; display:block;
}

/* floating stat chips around the globe */
.globe-chip{
  position:absolute; z-index:5;
  background:rgba(255,255,255,.94); border:1px solid var(--line);
  border-radius:16px; padding:11px 16px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:11px;
  animation:float 6s var(--ease) infinite;
}
.globe-chip svg{ width:22px; height:22px; color:var(--sky); flex:none; }
.globe-chip b{ display:block; font-family:var(--font-display); font-size:1rem; line-height:1.1; }
.globe-chip small{ font-size:.72rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; font-weight:650; }
.globe-chip--a{ top:6%; left:-3%; }
.globe-chip--b{ bottom:14%; right:-2%; animation-delay:-3s; }
.globe-chip--c{ bottom:0; left:14%; animation-delay:-1.5s; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-11px); }
}

/* ==========================================================================
   Logo marquee
   ========================================================================== */
.marquee{
  padding:34px 0; border-block:1px solid var(--line); background:var(--surface);
  overflow:hidden;
}
.marquee-label{
  text-align:center; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:24px;
}
.marquee-track{
  display:flex; gap:clamp(38px,6vw,86px); width:max-content;
  animation:slide 36s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track a{
  display:grid; place-items:center; height:56px; flex:none;
  filter:grayscale(1); opacity:.55;
  transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease-out);
}
.marquee-track img{ max-height:56px; width:auto; object-fit:contain; }
.marquee-track a:hover{ filter:none; opacity:1; transform:scale(1.07); }

/* ==========================================================================
   Cards
   ========================================================================== */
.grid{ display:grid; gap:clamp(18px,2.4vw,26px); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.card{
  position:relative; isolation:isolate; height:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,2.6vw,34px);
  box-shadow:var(--shadow-sm);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0;
  background:linear-gradient(160deg,var(--sky-50) 0%,rgba(255,255,255,0) 62%);
  transition:opacity .5s var(--ease);
}
.card::after{
  content:""; position:absolute; left:clamp(24px,2.6vw,34px); top:0; width:44px; height:3px;
  border-radius:0 0 4px 4px; background:var(--grad-lime);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);
}
.card:hover{
  transform:translateY(-8px);
  border-color:var(--sky-200);
  box-shadow:var(--shadow-lg);
}
.card:hover::before{ opacity:1; }
.card:hover::after{ transform:scaleX(1); }
.card h3{ margin-bottom:10px; }
.card p{ font-size:.97rem; margin-bottom:0; }

.icon{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  margin-bottom:20px; color:#fff; background:var(--grad-brand);
  box-shadow:0 8px 20px -10px rgba(27,76,130,.8);
  transition:transform .55s var(--ease-out), box-shadow .5s var(--ease);
}
.icon svg{ width:27px; height:27px; }
.card:hover .icon{ transform:translateZ(18px) rotate(-7deg) scale(1.09); box-shadow:0 14px 30px -12px rgba(27,76,130,.85); }
.icon--lime{ background:var(--grad-lime); color:var(--navy); box-shadow:0 8px 20px -10px rgba(143,174,34,.85); }
.icon--teal{ background:linear-gradient(120deg,var(--teal),#2E9C86); }

/* compact numbered solution grid */
.solutions{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.solution{
  background:var(--surface); padding:clamp(24px,2.4vw,32px);
  position:relative; transition:background .4s var(--ease);
}
.solution:hover{ background:var(--sky-50); }
.solution span{
  font-family:var(--font-display); font-size:.8rem; font-weight:800; letter-spacing:.1em;
  color:var(--sky-400); display:block; margin-bottom:14px;
}
.solution h4{ margin-bottom:8px; }
.solution p{ font-size:.93rem; margin:0; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,3vw,34px); }
.stat{ position:relative; padding-left:22px; }
.stat::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px;
  background:var(--grad-lime);
}
.stat b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem,4vw,3.1rem); line-height:1; letter-spacing:-.03em;
  color:var(--ink); margin-bottom:8px;
}
.band--dark .stat b{ color:#fff; }
.stat small{ font-size:.86rem; color:var(--muted); letter-spacing:.03em; }
.band--dark .stat small{ color:#9FBBD8; }

/* split feature */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.split--reverse .split-visual{ order:2; }
.split-visual{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3.2;
  background:var(--grad-brand);
  box-shadow:var(--shadow-lg);
}
.split-visual::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:44px 44px;
}
.split-visual::after{
  content:""; position:absolute; width:150%; aspect-ratio:1; right:-40%; bottom:-60%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(170,203,55,.4) 0%, transparent 62%);
}
.split-art{
  position:absolute; inset:0; display:grid; place-items:center; padding:11%;
}
.split-art svg{ width:100%; height:auto; color:rgba(255,255,255,.94); }

/* photo variant of the same panel */
.split-visual--photo::before,.split-visual--photo::after{ display:none; }
.split-visual--photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out);
}
.split-visual--photo:hover img{ transform:scale(1.05); }
.split-visual--photo .photo-tint{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(155deg,rgba(10,33,64,.42) 0%,rgba(10,33,64,.06) 46%,rgba(170,203,55,.20) 100%);
}

/* full-width photo banner */
.banner{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  min-height:clamp(280px,34vw,420px); display:grid; align-items:end;
  box-shadow:var(--shadow-lg);
}
.banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(10,33,64,.88) 0%,rgba(10,33,64,.62) 46%,rgba(10,33,64,.18) 100%);
}
.banner-body{ position:relative; z-index:2; padding:clamp(28px,4vw,52px); max-width:60ch; }
.banner-body h2{ color:#fff; }
.banner-body p{ color:#C6DAEE; }
.banner-body .eyebrow{ color:var(--lime); }
.split-badge{
  position:absolute; z-index:3; left:clamp(16px,3%,28px); bottom:clamp(16px,3%,28px);
  background:rgba(255,255,255,.95); border-radius:16px; padding:14px 18px;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:13px;
}
.split-badge b{ font-family:var(--font-display); font-size:1.5rem; line-height:1; color:var(--navy); }
.split-badge small{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:650; }

.ticks{ display:grid; gap:14px; margin:26px 0 32px; }
.ticks li{ display:flex; gap:13px; align-items:flex-start; font-size:.99rem; }
.ticks svg{
  width:22px; height:22px; flex:none; margin-top:3px; color:var(--lime-600);
  transition:transform .4s var(--ease-out);
}
.ticks li:hover svg{ transform:scale(1.2) rotate(-8deg); }
.band--dark .ticks svg{ color:var(--lime); }

/* ==========================================================================
   Group of companies
   ========================================================================== */
.companies{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,26px); }
.company{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
}
.company::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--grad-brand); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.company:hover{ transform:translateY(-8px); border-color:var(--sky-200); box-shadow:var(--shadow-lg); }
.company:hover::before{ transform:scaleX(1); }
.company-logo{
  height:76px; display:flex; align-items:center; margin-bottom:20px;
  transition:transform .5s var(--ease-out);
}
.company-logo img{ max-height:76px; width:auto; object-fit:contain; }
.company:hover .company-logo{ transform:scale(1.05); }
.company-tag{
  align-self:flex-start; font-size:.7rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sky); background:var(--sky-50); padding:5px 11px; border-radius:999px; margin-bottom:13px;
}
.company h3{ font-size:1.15rem; margin-bottom:9px; }
.company p{ font-size:.94rem; margin-bottom:20px; }
.company .textlink{ margin-top:auto; font-size:.89rem; }
.company:hover .textlink{ color:var(--sky); }

/* ==========================================================================
   Sectors
   ========================================================================== */
.sector{
  position:relative; overflow:hidden; height:100%;
  border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.sector:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.sector-top{
  position:relative; height:186px; overflow:hidden;
  background:var(--grad-brand);
  display:grid; place-items:center;
}
.sector-top img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.sector:hover .sector-top img{ transform:scale(1.07); }
.sector-top::before{ /* keeps the white icon and the card edge legible over any photo */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(10,33,64,.34) 0%,rgba(10,33,64,.58) 55%,rgba(10,33,64,.86) 100%);
}
.sector-top::after{
  content:""; position:absolute; z-index:1; width:180px; aspect-ratio:1; right:-56px; top:-66px; border-radius:50%;
  background:radial-gradient(circle,rgba(170,203,55,.26),transparent 66%);
  transition:transform .7s var(--ease-out);
}
.sector:hover .sector-top::after{ transform:scale(1.5) translate(-14px,16px); }
.sector-top svg{
  position:relative; z-index:2; width:56px; height:56px; color:#fff;
  filter:drop-shadow(0 4px 10px rgba(4,16,31,.55));
  transition:transform .6s var(--ease-out);
}
.sector:hover .sector-top svg{ transform:scale(1.14) translateY(-4px); }
.sector-body{ padding:26px; }
.sector-body h3{ font-size:1.14rem; margin-bottom:9px; }
.sector-body p{ font-size:.94rem; margin-bottom:16px; }
.sector-body ul{ display:grid; gap:8px; }
.sector-body li{ font-size:.89rem; padding-left:18px; position:relative; color:var(--body); }
.sector-body li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%;
  background:var(--lime);
}

/* ==========================================================================
   Process timeline
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.6vw,30px); counter-reset:s; }
.step{ position:relative; padding-top:52px; }
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; top:0; left:0;
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:.92rem;
  background:var(--surface); color:var(--navy); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); z-index:2;
  transition:background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease-out), border-color .4s var(--ease);
}
.step::after{
  content:""; position:absolute; top:21px; left:56px; right:-14px; height:1px;
  background:repeating-linear-gradient(to right,var(--line) 0 6px,transparent 6px 12px);
}
.step:last-child::after{ display:none; }
.step:hover::before{ background:var(--grad-brand); color:#fff; transform:translateY(-4px) scale(1.06); border-color:transparent; }
.step h4{ margin-bottom:8px; }
.step p{ font-size:.93rem; margin:0; }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.faq{ display:grid; gap:12px; }
.faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq details[open]{ border-color:var(--sky-200); box-shadow:var(--shadow); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 56px 20px 24px; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--sky); }
.faq summary::after{
  content:""; position:absolute; right:24px; top:26px; width:11px; height:11px;
  border-right:2px solid var(--sky); border-bottom:2px solid var(--sky);
  transform:rotate(45deg); transition:transform .4s var(--ease-out);
}
.faq details[open] summary::after{ transform:rotate(225deg); }
.faq .faq-body{ padding:0 24px 22px; font-size:.96rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:start; }

.contact-cards{ display:grid; gap:16px; }
.contact-card{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:20px 22px; box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .35s var(--ease);
}
.contact-card:hover{ transform:translateX(5px); border-color:var(--sky-200); box-shadow:var(--shadow); }
.contact-card .ci{
  width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:var(--sky-50); color:var(--sky);
  transition:background .4s var(--ease), color .4s var(--ease), transform .45s var(--ease-out);
}
.contact-card:hover .ci{ background:var(--grad-brand); color:#fff; transform:rotate(-6deg) scale(1.06); }
.contact-card .ci svg{ width:21px; height:21px; }
.contact-card h4{ margin-bottom:4px; font-size:.98rem; }
.contact-card p,.contact-card a{ font-size:.94rem; margin:0; }
.contact-card a{ color:var(--body); display:block; }
.contact-card a:hover{ color:var(--sky); }

.form-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,42px); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.form-wrap::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad-brand);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--font-display); font-size:.85rem; font-weight:700;
  color:var(--ink); margin-bottom:8px;
}
.field label span{ color:var(--lime-600); }
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:.97rem; color:var(--ink);
  padding:14px 16px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface-2);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--sky-200); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:var(--surface); border-color:var(--sky-400); box-shadow:var(--ring);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); }
.form-note{ font-size:.83rem; color:var(--muted); margin:16px 0 0; }
.form-msg{
  display:none; margin-bottom:20px; padding:15px 18px; border-radius:12px; font-size:.93rem;
  border:1px solid transparent;
}
.form-msg.is-shown{ display:block; }
.form-msg.is-ok{ background:var(--lime-50); border-color:#D6E79A; color:#4C5F12; }
.form-msg.is-bad{ background:#FDEEEE; border-color:#F3C9C9; color:#8A2727; }
.form-wrap .btn{ width:100%; }
.form-wrap .btn[aria-busy="true"]{ opacity:.72; pointer-events:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.map-embed{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); line-height:0;
}
.map-embed iframe{ width:100%; height:340px; border:0; filter:saturate(.92); }

/* office cards */
.office{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px); box-shadow:var(--shadow-sm); height:100%;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
}
.office:hover{ transform:translateY(-7px); border-color:var(--sky-200); box-shadow:var(--shadow-lg); }
.office .flagline{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.office .flagline span{ font-size:1.55rem; line-height:1; }
.office .flagline h3{ margin:0; font-size:1.12rem; }
.office dl{ margin:0; display:grid; gap:12px; }
.office dt{ font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.office dd{ margin:3px 0 0; font-size:.95rem; }
.office dd a{ color:var(--body); }
.office dd a:hover{ color:var(--sky); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg,var(--navy) 0%,#123A64 52%,#1B5B93 100%);
  border-radius:var(--radius-lg);
  padding:clamp(38px,5vw,66px);
  box-shadow:var(--shadow-lg);
}
.cta::before{
  content:""; position:absolute; width:520px; aspect-ratio:1; right:-140px; top:-190px; border-radius:50%;
  background:radial-gradient(circle,rgba(170,203,55,.34),transparent 62%);
}
.cta::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(105deg,#000,transparent 72%);
  -webkit-mask-image:linear-gradient(105deg,#000,transparent 72%);
}
.cta > *{ position:relative; z-index:2; }
.cta h2{ color:#fff; }
.cta p{ color:#C6DAEE; max-width:56ch; }
.cta-inner{ display:grid; grid-template-columns:1.3fr .7fr; gap:34px; align-items:center; }
.cta-inner .btn-row{ justify-content:flex-end; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero{
  position:relative; overflow:hidden;
  padding:clamp(52px,6.5vw,86px) 0 clamp(46px,5.5vw,72px);
  background:
    radial-gradient(760px 480px at 84% -20%, rgba(79,160,217,.22), transparent 60%),
    radial-gradient(560px 420px at 2% 110%, rgba(170,203,55,.14), transparent 58%),
    linear-gradient(180deg,#FAFCFF,#F1F7FD);
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.45;
  background-image:linear-gradient(to right,rgba(27,76,130,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(27,76,130,.05) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 30% 40%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000,transparent 74%);
}
.page-hero .shell{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(2.05rem,4.2vw,3.3rem); margin-bottom:18px; }
.crumbs{ display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--muted); margin-bottom:20px; flex-wrap:wrap; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--sky); }
.crumbs svg{ width:13px; height:13px; opacity:.6; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--navy); color:#9FBBD8; padding:clamp(52px,6vw,80px) 0 0; }
.site-footer h4{
  color:#fff; font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:20px;
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,54px);
  padding-bottom:clamp(38px,4vw,56px);
}
.footer-brand .brand-text b{ color:#fff; }
.footer-brand .brand-text span{ color:#7E9BBB; }
.footer-brand .brand:hover .brand-emblem{ filter:drop-shadow(0 8px 18px rgba(79,160,217,.5)); }
.footer-brand p{ margin:22px 0 0; font-size:.94rem; max-width:38ch; color:#9FBBD8; }
.site-footer ul{ display:grid; gap:12px; }
.site-footer a{ color:#B7CCE3; font-size:.94rem; }
.site-footer a:hover{ color:#fff; }
.site-footer li a{ display:inline-block; transition:transform .35s var(--ease-out), color .3s var(--ease); }
.site-footer li a:hover{ transform:translateX(5px); }
.footer-contact li{ display:flex; gap:11px; align-items:flex-start; font-size:.94rem; }
.footer-contact svg{ width:17px; height:17px; flex:none; margin-top:4px; color:var(--lime); }
.footer-contact li a:hover{ transform:none; }
.socials{ display:flex; gap:10px; margin-top:24px; }
.socials a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:#CFE0F1;
  transition:background .35s var(--ease), transform .4s var(--ease-out), color .3s var(--ease);
}
.socials a:hover{ background:var(--grad-lime); color:var(--navy); transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:22px 0 28px;
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center;
  font-size:.85rem; color:#7E9BBB;
}
.footer-bottom p{ margin:0; }
.footer-bottom nav{ display:flex; gap:22px; flex-wrap:wrap; }

/* ==========================================================================
   Floating actions
   ========================================================================== */
.floaters{
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px);
  z-index:80; display:grid; gap:12px; justify-items:end;
}
.float-btn{
  position:relative; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 22px -6px rgba(10,33,64,.5);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.float-btn svg{ width:27px; height:27px; position:relative; z-index:2; }
.float-btn:hover{ transform:translateY(-4px) scale(1.07); color:#fff; box-shadow:0 14px 30px -8px rgba(10,33,64,.55); }
.float-btn--wa{ background:#25D366; }
.float-btn--wa::before{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
  animation:ripple 2.6s var(--ease) infinite;
}
@keyframes ripple{
  0%{ transform:scale(1); opacity:.75; }
  100%{ transform:scale(1.75); opacity:0; }
}
.float-btn--mail{ background:var(--grad-brand); }
.float-btn .tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--navy); color:#fff; font-size:.8rem; font-weight:600; white-space:nowrap;
  padding:8px 13px; border-radius:9px; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease-out);
}
.float-btn:hover .tip{ opacity:1; transform:translateY(-50%) translateX(0); }

.to-top{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--navy);
  box-shadow:var(--shadow-sm); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .4s var(--ease-out), visibility .35s, background .3s var(--ease);
}
.to-top.is-shown{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--sky-50); color:var(--sky); }
.to-top svg{ width:19px; height:19px; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .step::after{ display:none; }
  .companies{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solutions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:960px){
  .nav,.header-cta .btn{ display:none; }
  :root{ --header-h:92px; }
  .brand-logo{ height:70px; }
  .burger{ display:block; }
  .hero-grid{ grid-template-columns:1fr; }
  .globe-stage{ order:-1; max-width:400px; }
  .globe-chip--a{ left:0; }
  .globe-chip--b{ right:0; }
  .split,.contact-grid,.cta-inner{ grid-template-columns:1fr; }
  .split--reverse .split-visual{ order:0; }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cta-inner .btn-row{ justify-content:flex-start; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .topbar .shell{ justify-content:center; }
  .topbar-tag{ display:none; }
  .topbar-list{ gap:16px; justify-content:center; }
  .grid-2,.grid-3,.grid-4,.companies,.solutions,.stats,.steps,.field-row{ grid-template-columns:1fr; }
  :root{ --header-h:78px; }
  .brand-logo{ height:58px; }
  .brand-emblem{ width:70px; height:33px; }
  .brand-text b{ font-size:.96rem; }
  .brand-text span{ font-size:.62rem; letter-spacing:.1em; }
  .globe-chip--c{ display:none; }
  .globe-chip{ padding:9px 13px; }
  .globe-chip b{ font-size:.9rem; }
  .hero-trust{ gap:14px; }
  .footer-grid{ grid-template-columns:1fr; }
  .float-btn{ width:52px; height:52px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

@media print{
  .site-header,.topbar,.floaters,.marquee,.site-footer{ display:none; }
}