/* ==========================================================================
   Messana Ýollar — landing (implementation of Claude Design prototype)
   Manrope (display) + Onest (body) · Lucide icons · dark/light composition
   ========================================================================== */

/* ----- 1. Reset ----- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#04141f}
h1,h2,h3,h4,p,figure{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
input,textarea,button{font-family:inherit}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(63,116,168,.45);color:#fff}
[hidden]{display:none!important}

/* ----- 2. Tokens ----- */
:root{
  --accent:#3f74a8;
  --accent-strong:#33608b;
  --accent-glow:rgba(63,116,168,.55);
  --accent-soft:rgba(63,116,168,.16);

  --ink:#12293d;
  --ink-soft:#5b7085;
  --ink-mid:#3f5266;

  --line:#e4ecf3;
  --line-soft:#dbe4ee;
  --paper:#fff;

  --radius-card:18px;
  --radius-panel:28px;
  --radius-btn:13px;
  --radius-pill:999px;

  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;

  --maxw:1220px;
  --nav-h:74px;

  --shadow-card:0 18px 42px -28px rgba(16,42,66,.24);
  --shadow-card-hover:0 32px 60px -30px rgba(16,42,66,.34);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----- 3. Base ----- */
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:#eaf1f8;
  background:#04141f;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.page{position:relative;min-height:100vh;overflow-x:clip}

/* ----- 4. Shared layout ----- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(18px,4vw,40px);
}
.section{padding:clamp(58px,8vw,112px) 0}
.section--tight{padding:clamp(20px,3vw,44px) 0}

/* Full-bleed helper (breaks out of a constrained parent to viewport width) */
.fullbleed{
  position:relative;
  left:50%;
  right:50%;
  width:100vw;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* ----- 5. Shared typography bits ----- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  font:600 .72rem/1 var(--font-display);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow__line{width:22px;height:1px;flex:0 0 auto;background:var(--accent)}
.eyebrow--onDark{color:#a9c8e6}

.h2{
  font:800 clamp(1.8rem,3.6vw,2.7rem)/1.08 var(--font-display);
  letter-spacing:-.02em;
  color:var(--ink);
}
.h2--onDark{color:#eef4fa}

.lead{
  font:400 clamp(1rem,1.4vw,1.08rem)/1.6 var(--font-body);
  color:var(--ink-soft);
}
.lead--onDark{color:#a9bccf}

/* ----- 6. Buttons ----- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:16px 26px;
  border-radius:var(--radius-btn);
  border:1px solid transparent;
  font:600 1rem/1 var(--font-display);
  cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s,filter .3s,background .3s,border-color .3s;
}
.btn--primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-strong));
  color:#fff;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 40px -16px var(--accent-glow);
}
.btn--primary:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 26px 52px -16px var(--accent-glow)}
.btn--outline{
  background:#fff;
  border-color:var(--line-soft);
  color:var(--accent);
  box-shadow:0 12px 30px -20px rgba(16,42,66,.35);
}
.btn--outline:hover{background:#f2f7fc;transform:translateY(-2px);border-color:var(--accent)}
.btn--glass{
  background:rgba(6,18,31,.4);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.22);
  color:#eef5fb;
}
.btn--glass:hover{transform:translateY(-3px);background:rgba(10,26,42,.6);border-color:rgba(255,255,255,.4)}
.btn--full{width:100%}

/* ----- 7. Shared card + icon plate ----- */
.card{
  padding:26px 24px;
  border-radius:var(--radius-card);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.card--hover{transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.card--hover:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow-card-hover)}

.iconplate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:14px;
}
.iconplate--soft{background:var(--accent-soft);color:var(--accent)}
.iconplate--grad{
  background:linear-gradient(158deg,var(--accent),var(--accent-strong));
  color:#fff;
  box-shadow:0 14px 28px -12px var(--accent-glow);
}

/* ----- 8. Reveal + counters ----- */
[data-reveal]{opacity:0;transform:translateY(28px)}
.reveal-ready [data-reveal]{will-change:opacity,transform}
[data-reveal].is-visible{opacity:1;transform:none}
.no-motion [data-reveal]{opacity:1!important;transform:none!important}

/* ----- 9. Focus visibility (keyboard) ----- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Lighter ring on dark sections so it reads on navy */
.site-header :focus-visible,
.hero :focus-visible,
.geo :focus-visible,
.contact-info :focus-visible,
.drawer :focus-visible,
.site-footer :focus-visible{outline-color:#cfe0f0}
/* Inputs keep their own accent ring; no double outline */
.cform__input:focus-visible{outline:none}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  background:rgba(6,19,33,.1);
  transition:background .45s ease,box-shadow .45s ease,border-color .45s ease;
}
.site-header.is-scrolled{
  background:rgba(6,19,33,.82);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.78);
  border-bottom-color:rgba(255,255,255,.1);
}
.site-header__inner{
  display:flex;
  align-items:center;
  gap:20px;
  height:var(--nav-h);
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand__mark{height:34px;width:auto}
.brand__name{display:flex;flex-direction:column;line-height:1}
.brand__title{font:700 1rem/1 var(--font-display);color:#fff;letter-spacing:-.01em}
.brand__sub{font:400 .68rem/1 var(--font-body);letter-spacing:.03em;color:#9fb6cd;margin-top:4px}

.nav-cluster{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav{display:flex;align-items:center;gap:2px}
.nav__link{
  padding:9px 14px;
  border-radius:9px;
  font:500 .92rem/1 var(--font-body);
  color:#c7d6e6;
  transition:color .25s,background .25s;
}
.nav__link:hover{color:#fff;background:rgba(255,255,255,.07)}

.lang{position:relative;margin-left:6px}
.lang__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 12px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  color:#c7d6e6;font:500 .86rem/1 var(--font-body);cursor:pointer;transition:background .25s;
}
.lang__btn:hover{background:rgba(255,255,255,.1)}
.lang__caret{opacity:.55;font-size:.7em}
.lang__menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:130px;padding:6px;border-radius:12px;
  background:rgba(9,25,41,.97);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;gap:2px;z-index:60;
}
.lang__opt{
  padding:9px 12px;border-radius:8px;text-align:left;background:none;border:0;
  color:#c7d6e6;font:500 .9rem/1 var(--font-body);cursor:pointer;transition:background .2s,color .2s;
}
.lang__opt:hover{background:rgba(255,255,255,.08);color:#fff}
.lang__opt[aria-current="true"]{color:#fff;background:var(--accent-soft)}

.burger{
  display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  align-items:center;justify-content:center;color:#e6eef7;cursor:pointer;
}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.is-open{display:block;animation:fadeIn .3s ease}
.drawer__scrim{position:absolute;inset:0;background:rgba(3,10,20,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(86vw,340px);
  background:linear-gradient(180deg,rgba(9,25,41,.98),rgba(6,34,51,.98));
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow:-34px 0 80px -34px rgba(0,0,0,.85);
  display:flex;flex-direction:column;padding:22px;overflow-y:auto;
  animation:panelIn .42s var(--ease);
}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.drawer__close{
  width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;color:#e6eef7;cursor:pointer;
}
.drawer__nav{display:flex;flex-direction:column;gap:4px}
.drawer__link{
  padding:14px;border-radius:12px;font:600 1.05rem/1 var(--font-display);color:#dbe7f3;
  border:1px solid transparent;transition:background .2s,border-color .2s;
}
.drawer__link:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.drawer__cta{margin-top:18px}
.drawer__contacts{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:12px}
.drawer__contacts a{display:flex;align-items:center;gap:10px;color:#c2d2e2;font:500 .95rem/1.3 var(--font-body)}
.lang__row{display:flex;gap:6px;margin-top:18px}
.lang__row button{
  flex:1;padding:11px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);color:#c7d6e6;font:600 .9rem/1 var(--font-body);cursor:pointer;
}
.lang__row button[aria-current="true"]{background:var(--accent-soft);color:#fff;border-color:transparent}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:calc(100dvh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero__scrim,.hero__scrim2{position:absolute;inset:0;pointer-events:none}
.hero__scrim{background:linear-gradient(101deg,rgba(3,12,22,.95) 0%,rgba(4,15,27,.86) 27%,rgba(5,20,34,.52) 56%,rgba(6,24,40,.2) 100%)}
.hero__scrim2{background:linear-gradient(180deg,rgba(3,12,22,.55) 0%,transparent 18%,transparent 50%,rgba(3,11,20,.9) 100%)}
.hero__orb{
  position:absolute;top:6%;left:-140px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 68%);
  filter:blur(34px);opacity:.45;pointer-events:none;
  animation:orbA 24s ease-in-out infinite;
}
.hero__inner{
  position:relative;z-index:2;flex:1;display:flex;align-items:center;
  padding-top:clamp(64px,6vh,88px);
}
.hero__content{
  max-width:820px;display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2.4vw,26px);
}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--radius-pill);
  background:rgba(6,18,31,.5);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:600 .72rem/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:#cfe0f0;
}
.hero__title{
  margin:0;font:800 clamp(2.2rem,4.4vw,3.4rem)/1.07 var(--font-display);
  letter-spacing:-.025em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero__title .grad{
  background:linear-gradient(100deg,#cfe4f6,#5b93c8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__subtitle{
  margin:0;max-width:560px;
  font:400 clamp(1.02rem,1.5vw,1.16rem)/1.65 var(--font-body);
  color:#c8d7e6;text-shadow:0 1px 16px rgba(0,0,0,.4);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}

.hero__float{
  position:absolute;top:clamp(150px,17vw,196px);right:clamp(18px,4vw,40px);z-index:2;
  padding:18px 22px;border-radius:18px;background:rgba(6,18,31,.5);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 64px -28px rgba(0,0,0,.7);
  display:flex;align-items:center;gap:16px;max-width:290px;
  animation:floaty 7s ease-in-out infinite;
}
.hero__float-ic{
  width:48px;height:48px;flex:0 0 auto;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--accent),var(--accent-strong));color:#fff;
}
.hero__float-num{font:800 1.5rem/1 var(--font-display);color:#fff}
.hero__float-num small{font:600 .9rem/1 var(--font-display);color:#a9c8e6}
.hero__float-txt{margin-top:5px;font:400 .82rem/1.35 var(--font-body);color:#b7c8da}

.hero__stats{position:relative;z-index:2;padding:clamp(18px,3vh,34px) 0 clamp(24px,4vw,44px)}
.statbar{
  padding:clamp(16px,2vw,24px) clamp(18px,3vw,32px);border-radius:20px;
  background:rgba(6,18,31,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.15);box-shadow:0 30px 70px -34px rgba(0,0,0,.6);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;
}
.statbar__item{display:flex;align-items:center;gap:15px;padding:6px 4px}
.statbar__ic{
  width:46px;height:46px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);border:1px solid rgba(255,255,255,.12);color:#bcd8f2;
}
.statbar__num{font:800 clamp(1.5rem,2.4vw,1.9rem)/1 var(--font-display);color:#fff;letter-spacing:-.02em}
.statbar__label{margin-top:5px;font:400 .82rem/1.25 var(--font-body);color:#a2b6c9}

/* ==========================================================================
   LIGHT BAND (services / geo / advantages / about / contact live here)
   ========================================================================== */
.lightband{
  position:relative;
  background:linear-gradient(180deg,#f4f8fc 0%,#e9f1f8 52%,#eef4fb 100%);
}
.lightband__orb{position:absolute;border-radius:50%;pointer-events:none;opacity:.6}
.lightband__orb--a{top:3%;right:0;width:460px;height:460px;background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
.lightband__orb--b{bottom:16%;left:0;width:420px;height:420px;background:radial-gradient(circle,rgba(90,140,185,.12),transparent 70%)}

/* ==========================================================================
   GEOGRAPHY — full-width dark band (kept world map)
   ========================================================================== */
.geo{
  position:relative;
  padding:clamp(56px,8vw,104px) 0;
  background:linear-gradient(155deg,#082740 0%,#0c4560 100%);
  overflow:hidden;
}
.geo__orb{
  position:absolute;top:-120px;right:-80px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 66%);
  filter:blur(24px);opacity:.4;pointer-events:none;
}
.geo__inner{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,56px);align-items:center;
}
.geo__text{flex:1 1 360px;min-width:0}
.geo__stat{display:flex;align-items:baseline;gap:16px;margin-top:30px}
.geo__stat-num{font:800 clamp(2.6rem,6vw,3.6rem)/1 var(--font-display);color:#fff;letter-spacing:-.03em}
.geo__stat-cap{font:400 .95rem/1.4 var(--font-body);color:#a9bccf}
.geo__hubs{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.geo__hub{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font:500 .82rem/1 var(--font-body);color:#cad9e8;
}
.geo__mapwrap{flex:1 1 440px;min-width:0}
.geo__map{
  width:100%;height:auto;
}
.geo__routes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.geo__route{
  display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  font:600 .84rem/1.1 var(--font-display);color:#eef4fa;
}
.geo__route-tag{
  font:600 .6rem/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#bcd8f2;
  padding:5px 9px;border-radius:7px;background:var(--accent-soft);
}

/* ==========================================================================
   FOOTER (socials removed per request)
   ========================================================================== */
.site-footer{position:relative;background:linear-gradient(180deg,#061826 0%,#020c16 100%)}
.site-footer__inner{padding:clamp(48px,6vw,72px) 0 30px}
.footer-cols{display:flex;flex-wrap:wrap;gap:36px 32px}
.footer-brand{flex:1 1 300px;min-width:0}
.footer-brand__row{display:flex;align-items:center;gap:12px}
.footer-brand__mark{height:36px}
.footer-brand__title{font:700 1.02rem/1 var(--font-display);color:#fff}
.footer-brand__sub{font:400 .68rem/1 var(--font-body);color:#8ea5bd;margin-top:4px}
.footer-brand__desc{margin:18px 0 0;max-width:320px;font:400 .92rem/1.6 var(--font-body);color:#8ea5bd}
.footer-col{flex:1 1 190px;min-width:0}
.footer-col--narrow{flex:1 1 170px}
.footer-col__title{font:700 .82rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:#dfeaf5;margin-bottom:18px}
.footer-col__list{display:flex;flex-direction:column;gap:11px}
.footer-col__list a,.footer-col__list span{font:400 .92rem/1.35 var(--font-body);color:#93a9c0;transition:color .25s}
.footer-col__list a:hover{color:#fff}
.footer-bottom{
  margin-top:clamp(34px,4vw,52px);padding-top:24px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
}
.footer-bottom span{font:400 .84rem/1.4 var(--font-body);color:#7f95ab}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes orbA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,-34px) scale(1.14)}100%{transform:translate(0,0) scale(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes panelIn{from{transform:translateX(28px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes popIn{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:880px){
  .nav-cluster{display:none}
  .burger{display:flex}
  .hero__float{display:none}
}
@media (max-width:560px){
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

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

/* ==========================================================================
   Services + Advantages
   ========================================================================== */
#services,
#advantages{ scroll-margin-top:82px; }

.svc-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:clamp(30px,4vw,50px);
}
.svc-head__copy{ max-width:640px; }
.svc-head__copy .eyebrow{ margin-bottom:16px; }
.svc-head__copy .h2{ margin:0; }
.svc-head__copy .lead{ margin:16px 0 0; }
.svc-head__cta{ white-space:nowrap; }

.svc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,1.6vw,20px);
}
@media (min-width:640px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc-card{ display:flex; flex-direction:column; gap:14px; }
.svc-card__title{ margin:0; font:700 1.1rem/1.25 var(--font-display); color:var(--ink); }
.svc-card__desc{ margin:0; font:400 .91rem/1.55 var(--font-body); color:var(--ink-soft); }

.adv-head{ max-width:680px; margin-bottom:clamp(30px,4vw,50px); }
.adv-head .eyebrow{ margin-bottom:16px; }
.adv-head .h2{ margin:0; }

.adv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.adv-card{ display:flex; gap:18px; }
.adv-card__icon{ width:50px; height:50px; flex:0 0 auto; }
.adv-card__body{ min-width:0; }
.adv-card__title{ margin:0; font:700 1.08rem/1.3 var(--font-display); color:var(--ink); }
.adv-card__desc{ margin:9px 0 0; font:400 .9rem/1.55 var(--font-body); color:var(--ink-soft); }

@media (max-width:640px){
  .svc-head{ align-items:flex-start; }
  .svc-head__cta{ align-self:flex-start; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about-section{ scroll-margin-top:82px; padding:clamp(20px,3vw,44px) 0; }
.about-card{
  position:relative;overflow:hidden;border-radius:var(--radius-panel);
  padding:clamp(32px,5vw,64px);
  background:linear-gradient(150deg,#fff,#eef4fb);
  border:1px solid #dce7f1;box-shadow:0 30px 74px -40px rgba(16,42,66,.24);
}
.about-grid{ display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:center; }
.about-copy{ flex:1 1 420px;min-width:0; }
.about-copy .eyebrow{ margin:0; }
.about-title{ margin:0;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.12; }
.about-text{ margin:20px 0 0;font:400 clamp(1.04rem,1.5vw,1.18rem)/1.7 var(--font-body);color:var(--ink-mid); }
.about-claims{ display:flex;flex-wrap:wrap;gap:12px;margin-top:28px; }
.about-claim{ display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:13px;background:#fff;border:1px solid #dbe6f0;font:600 .92rem/1 var(--font-display);color:#173347; }
.about-claim__check{ flex:0 0 auto;color:#2f9e6a; }
.about-side{ flex:0 1 340px;min-width:0;width:100%; }
.about-deliver{ border-radius:20px;padding:26px;background:linear-gradient(158deg,#0a2a44,#0d4a67);box-shadow:0 30px 64px -34px rgba(6,28,48,.6); }
.about-deliver__label{ margin:0 0 20px;font:600 .7rem/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:#a9c8e6; }
.about-deliver__list{ display:flex;flex-direction:column;gap:16px; }
.about-deliver__row{ display:flex;align-items:center;gap:14px; }
.about-deliver__icon{ width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:#bcd8f2; }
.about-deliver__name{ font:600 1rem/1.3 var(--font-display);color:#eef4fa; }
@media (max-width:760px){ .about-copy,.about-side{ flex:1 1 100%; } }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ scroll-margin-top:82px; }
.contact-head{ text-align:center;max-width:640px;margin:0 auto clamp(30px,4vw,48px); }
.contact-eyebrow{ display:inline-flex;margin:0; }
.contact-title{ margin:0; }
.contact-lead{ margin:16px auto 0;max-width:520px; }

.contact-panel{ display:flex;flex-wrap:wrap;border-radius:26px;overflow:hidden;border:1px solid #e0e9f2;box-shadow:0 44px 96px -46px rgba(16,42,66,.4); }

.contact-info{ flex:1 1 340px;min-width:0;position:relative;overflow:hidden;background:linear-gradient(158deg,#0a2a44 0%,#0e4a68 100%);padding:clamp(28px,4vw,44px);color:#eaf1f8; }
.contact-info__glow{ position:absolute;bottom:-100px;left:-70px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 68%);filter:blur(20px);opacity:.4;pointer-events:none; }
.contact-info__inner{ position:relative;z-index:1; }
.contact-info__title{ margin:0;font:700 1.35rem/1.25 var(--font-display);color:#fff; }
.contact-info__text{ margin:12px 0 0;font:400 .95rem/1.55 var(--font-body);color:#a9bccf; }
.contact-info__list{ display:flex;flex-direction:column;gap:22px;margin-top:30px; }

.contact-row{ display:flex;gap:14px;align-items:flex-start; }
.contact-row__icon{ width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--accent),var(--accent-strong));color:#fff; }
.contact-row__body{ min-width:0; }
.contact-row__label{ font:600 .68rem/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:#8ba6bf;margin-bottom:7px; }
.contact-row__label--msg{ margin-bottom:9px; }
.contact-links{ display:flex;flex-direction:column;gap:4px; }
.contact-link{ font:500 1rem/1.3 var(--font-body);color:#e4eef8; }
.contact-link:hover{ color:#fff; }
.contact-chips{ display:flex;flex-wrap:wrap;gap:8px; }
.contact-chip{ padding:7px 13px;border-radius:var(--radius-pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font:600 .8rem/1 var(--font-body);color:#cfe0f0; }
.contact-value{ font:500 1rem/1.4 var(--font-body);color:#e4eef8; }

.contact-formwrap{ flex:1 1 400px;min-width:0;background:#fff;padding:clamp(28px,4vw,44px); }
.cform{ display:flex;flex-direction:column;gap:16px; }
.cform[hidden]{ display:none; }
.cform__field{ display:flex;flex-direction:column;gap:7px; }
.cform__label{ font:600 .78rem/1 var(--font-display);letter-spacing:.03em;color:#465a6e; }
.cform__input{ width:100%;padding:14px 16px;border-radius:12px;background:#f5f8fb;border:1px solid #dbe4ee;color:var(--ink);font:400 .96rem/1.4 var(--font-body);transition:border-color .25s,background .25s,box-shadow .25s; }
.cform__textarea{ line-height:1.5;resize:vertical; }
.cform__input::placeholder{ color:var(--ink-soft);opacity:1; }
.cform__input:focus{ outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft); }
.cform__submit{ width:100%;margin-top:4px; }
.cform__consent{ font:400 .78rem/1.45 var(--font-body);color:#8296a9;text-align:center; }

.contact-success{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:clamp(20px,4vw,44px) 6px;animation:popIn .5s cubic-bezier(.22,.61,.36,1); }
.contact-success[hidden]{ display:none; }
.contact-success__icon{ width:66px;height:66px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(158deg,#3fae7a,#2f8a63);color:#fff;box-shadow:0 18px 40px -16px rgba(63,174,122,.6); }
.contact-success__title{ margin:0;font:800 1.4rem/1.2 var(--font-display);color:var(--ink); }
.contact-success__text{ margin:0;max-width:340px;font:400 .98rem/1.55 var(--font-body);color:var(--ink-soft); }
.contact-success__again{ margin-top:6px; }
@media (max-width:760px){ .contact-info,.contact-formwrap{ flex:1 1 100%; } }