/* ==========================================================================
   Rojhda GmbH — global travel technology
   Dark, blue/white, low-text "serious international travel-tech" style.
   ========================================================================== */

:root{
  --ink:      #08080A;
  --ink-2:    #0D0D11;
  --ink-3:    #131318;
  --primary:      #2F89F2;
  --primary-lo:   #0E6EDC;
  --primary-glow: rgba(47,137,242,.32);
  --danger:       #F2555A;   /* form errors — never the brand colour */
  --w:        #FFFFFF;
  --w-70:     rgba(255,255,255,.70);
  --w-52:     rgba(255,255,255,.52);
  --w-38:     rgba(255,255,255,.38);
  --line:     rgba(255,255,255,.10);
  --line-2:   rgba(255,255,255,.16);

  --wrap: 1240px;
  --pad:  clamp(20px, 5vw, 56px);
  --sec-y: clamp(84px, 11vw, 168px);

  --ff: "Helvetica Neue", Helvetica, Inter, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:82px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--w);
  font-family:var(--ff);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--primary); color:var(--w); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--primary); color:var(--w); padding:12px 18px; font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }

.tx-accent{ color:var(--primary); }

/* --------------------------------------------------------------- header -- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease),
             border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);
  height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:height .45s var(--ease);
}
.hdr.is-stuck .hdr__in{ height:68px; }

.brand{ display:inline-flex; align-items:center; gap:11px; flex:none; }
.brand__mark{ width:26px; height:26px; color:var(--primary); flex:none; }
.brand__mark svg{ width:100%; height:100%; }
.brand__txt{
  font-size:16px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
}
.brand__sub{ color:var(--primary); margin-left:.45em; font-weight:400; }

/* Glass capsule with one indicator that slides between items, rather than a
   separate underline per link — the movement is what makes the current page
   legible at a glance. */
.nav{
  position:relative; display:flex; align-items:center; gap:2px;
  padding:5px; border-radius:999px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav__pill{
  position:absolute; top:5px; left:0; height:calc(100% - 10px);
  width:0; border-radius:999px; pointer-events:none; opacity:0;
  background:rgba(47,137,242,.20);
  border:1px solid rgba(47,137,242,.42);
  box-shadow:0 0 22px -4px rgba(47,137,242,.55), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .42s var(--ease), width .42s var(--ease), opacity .3s var(--ease);
}
.nav__pill.is-ready{ opacity:1; }
.nav__a{
  position:relative; z-index:1;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--w-52); padding:10px 18px; border-radius:999px; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__a:hover,
.nav__a.is-active{ color:var(--w); }
/* fallback if JS never runs: the current page is still marked */
.no-js-pill .nav__a.is-active{ background:rgba(47,137,242,.18); }

.burger{
  display:none; width:42px; height:42px; padding:0; background:none; cursor:pointer;
  border:1px solid var(--line-2); border-radius:2px; position:relative; flex:none;
}
.burger span{
  position:absolute; left:11px; width:20px; height:1.5px; background:var(--w);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:23px; }
.burger.is-open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ----------------------------------------------------------------- hero -- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  overflow:hidden; padding-top:82px;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* Two slow-drifting colour fields give the flat background depth. Heavily
   blurred and low opacity so they read as light, not as shapes. */
.hero__aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero__aurora span{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.5;
}
.hero__aurora span:nth-child(1){
  width:52vw; height:52vw; max-width:760px; max-height:760px; top:-16%; right:-8%;
  background:radial-gradient(circle, rgba(47,137,242,.55), transparent 68%);
  animation:drift1 22s ease-in-out infinite alternate;
}
.hero__aurora span:nth-child(2){
  width:44vw; height:44vw; max-width:620px; max-height:620px; bottom:-20%; left:-10%;
  background:radial-gradient(circle, rgba(14,110,220,.42), transparent 70%);
  animation:drift2 26s ease-in-out infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(-7%, 6%, 0) scale(1.12); } }
@keyframes drift2{ to{ transform:translate3d(9%, -8%, 0) scale(1.08); } }

/* faint engineering grid, faded out at the edges */
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(115% 85% at 50% 35%, #000 25%, transparent 72%);
  -webkit-mask-image:radial-gradient(115% 85% at 50% 35%, #000 25%, transparent 72%);
}

/* Even black wash over the WHOLE hero. A gradient that dips in the middle left
   the top band of the map noticeably brighter than everything below it, so the
   opacity is held flat and only deepens at the very bottom to meet the next
   section. */
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,8,10,.97) 0,
    rgba(8,8,10,.97) 92px,      /* solid black behind the fixed header */
    rgba(8,8,10,.76) 210px,     /* then hold one even level all the way down */
    rgba(8,8,10,.76) 74%,
    rgba(8,8,10,.95) 100%);
}

/* ------------------------------------------------------- badge + accents -- */
.badge{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  padding:8px 16px 8px 12px; border-radius:999px;
  background:rgba(47,137,242,.10);
  border:1px solid rgba(47,137,242,.30);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:#BBD9FF;
}
.badge__dot{
  width:6px; height:6px; border-radius:50%; background:var(--primary); flex:none;
  box-shadow:0 0 0 0 rgba(47,137,242,.7); animation:ping 2.4s ease-out infinite;
}
@keyframes ping{ 70%,100%{ box-shadow:0 0 0 8px rgba(47,137,242,0); } }

/* gradient headline accent — falls back to solid where background-clip is out */
.grad{
  color:var(--primary);
  background:linear-gradient(100deg, #8CC3FF 0%, #2F89F2 48%, #0E6EDC 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* the copy needs its own scrim so the map can stay bright on the right */
.hero__in{
  position:relative; z-index:2;
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(20px,3.5vh,48px);
}
.hero__in::before{
  content:""; position:absolute; inset:-10% -20% -10% -50%; z-index:-1;
  background:linear-gradient(90deg, rgba(8,8,10,.94) 40%, rgba(8,8,10,.72) 62%, transparent 100%);
}

.hero__h{
  margin:.42em 0 0;
  font-size:clamp(2.35rem, 5vw, 4.15rem);
  line-height:1.02; letter-spacing:-.03em; font-weight:700; max-width:16ch;
}
.hero__p{
  margin:clamp(20px,2.6vw,30px) 0 clamp(28px,3.4vw,40px);
  max-width:58ch; color:var(--w-70); font-size:clamp(1rem,1.16vw,1.1rem);
}

.hero__strip{ position:relative; z-index:2; }
.hero__strip-in{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  padding-bottom:clamp(22px,3vw,34px);
}
.stat{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:4px;
  padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.stat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(47,137,242,.85), transparent);
}
.stat:hover{ background:rgba(255,255,255,.07); border-color:rgba(47,137,242,.35); transform:translateY(-3px); }
.stat b{ font-size:clamp(1.2rem,2vw,1.65rem); font-weight:700; letter-spacing:-.025em; }
.stat span{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--w-38); }

/* ------------------------------------------------------- inner-page hero -- */
.phero{
  position:relative; overflow:hidden;
  padding-top:calc(82px + clamp(34px,4.4vw,64px));
  padding-bottom:clamp(50px,6.5vw,86px);
  border-bottom:1px solid var(--line);
}
.phero__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.phero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,8,10,.97) 0,
    rgba(8,8,10,.97) 92px,
    rgba(8,8,10,.76) 210px,
    rgba(8,8,10,.76) 72%,
    rgba(8,8,10,.96) 100%);
}
.phero__in{ position:relative; z-index:2; display:flex; flex-direction:column; }
.phero__in::before{
  content:""; position:absolute; inset:-40% -25% -40% -50%; z-index:-1;
  background:linear-gradient(90deg, rgba(8,8,10,.92) 42%, rgba(8,8,10,.66) 66%, transparent 100%);
}
.phero__h{
  margin:.42em 0 0; font-size:clamp(2.1rem,4.6vw,3.6rem);
  line-height:1.05; letter-spacing:-.03em; font-weight:700; max-width:18ch;
}
.phero__p{
  margin:clamp(16px,2vw,22px) 0 0; max-width:58ch;
  color:var(--w-70); font-size:clamp(1rem,1.14vw,1.08rem);
}

/* --------------------------------------------------------------- shared -- */
.eyebrow{
  display:flex; align-items:center; gap:12px; margin:0;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--primary); font-weight:600;
}
.eyebrow::after{
  content:""; height:1px; width:clamp(28px,5vw,64px);
  background:linear-gradient(90deg, var(--primary), transparent);
}
.eyebrow__n{
  color:var(--w-38); font-weight:400; letter-spacing:.16em;
  padding-right:12px; border-right:1px solid var(--line-2);
}

.h2{
  margin:.5em 0 0; font-size:clamp(1.85rem,4.1vw,3.15rem);
  line-height:1.1; letter-spacing:-.025em; font-weight:700;
}
.lede{
  margin-top:clamp(18px,2.4vw,26px); max-width:62ch;
  color:var(--w-70); font-size:clamp(1rem,1.1vw,1.08rem);
}

.sec{ position:relative; padding-block:var(--sec-y); }
.sec--alt{ background:var(--ink-2); border-block:1px solid var(--line); }
.sec__hd{ margin-bottom:clamp(44px,6vw,80px); }

/* --------------------------------------------------------------- button -- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border:1px solid transparent; border-radius:2px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  cursor:pointer; font-family:inherit;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), box-shadow .35s var(--ease),
             transform .3s var(--ease);
}
.btn--sm{ padding:11px 20px; font-size:11.5px; }
.btn--primary{ background:var(--primary); color:var(--w); box-shadow:0 8px 26px -12px var(--primary-glow); }
.btn--primary:hover{ background:var(--primary-lo); transform:translateY(-2px); box-shadow:0 14px 34px -12px var(--primary-glow); }
.btn--white{ background:var(--w); color:var(--ink); }
.btn--white:hover{ background:rgba(255,255,255,.88); transform:translateY(-2px); }
.btn__arw{ transition:transform .3s var(--ease); }
.btn:hover .btn__arw{ transform:translateX(4px); }

.btn--ghost{ background:transparent; color:var(--w); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* inline "more" link */
.lnk{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--primary); padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.lnk:hover{ border-bottom-color:var(--primary); gap:14px; }
.lnk--block{ margin-top:clamp(24px,3vw,34px); }

.sec--tight{ padding-block:clamp(64px,8vw,110px); }

/* ------------------------------------------------------- feature blocks -- */
.feats{ border-bottom:1px solid var(--line); }
.feat{
  display:grid; grid-template-columns:76px minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(20px,3.4vw,56px); align-items:start;
  padding-block:clamp(34px,4.4vw,60px); border-top:1px solid var(--line);
  transition:background .4s var(--ease);
}
.feat:hover{ background:rgba(255,255,255,.02); }
.feat__n{
  font-size:11px; letter-spacing:.2em; color:var(--w-38); padding-top:8px;
  transition:color .3s var(--ease);
}
.feat:hover .feat__n{ color:var(--primary); }
.feat__hd{ display:flex; flex-direction:column; gap:16px; }
.feat__ico{ display:block; width:28px; height:28px; color:var(--primary); }
.feat__ico svg{ width:100%; height:100%; }
.feat__t{ margin:0; font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:700; letter-spacing:-.02em; }
.feat__d{ color:var(--w-52); font-size:.98rem; line-height:1.7; }

.ticks{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ticks li{ position:relative; padding-left:24px; font-size:.93rem; color:var(--w-70); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:10px; height:5px; border-left:1.5px solid var(--primary); border-bottom:1.5px solid var(--primary);
  transform:rotate(-45deg);
}

/* ---------------------------------------------------------------- steps -- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.steps--3{ grid-template-columns:repeat(3,1fr); }
.step{
  position:relative; background:var(--ink-2); padding:clamp(26px,3vw,38px);
  transition:background .4s var(--ease);
}
.sec:not(.sec--alt) .step{ background:var(--ink); }
.step:hover{ background:var(--ink-3); }
.step__n{
  display:block; font-size:11px; letter-spacing:.2em; color:var(--primary); margin-bottom:22px;
}
.step__t{ margin:0 0 10px; font-size:1.08rem; font-weight:700; letter-spacing:-.01em; }
.step__p{ margin:0; color:var(--w-52); font-size:.93rem; line-height:1.65; }

/* ---------------------------------------------------------------- media -- */
.media{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:2px;
  aspect-ratio:var(--ratio, 16 / 9); background:var(--ink-3);
}
/* Pull photography into the dark palette. Per-slot override via --img-filter,
   because an already-dark dusk shot needs lifting where a bright office shot
   needs pulling down. */
.media__img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:var(--img-filter, saturate(.88) contrast(1.06) brightness(.86));
}
.media__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(8,8,10,.55) 100%);
}
/* shown until the photograph is supplied */
.media__fb{ position:absolute; inset:0; display:grid; place-items:center; background:var(--ink-2); }
.media__grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
}
.media__mark{ position:relative; width:clamp(38px,5vw,58px); color:var(--primary); opacity:.5; }
.media__mark svg{ width:100%; height:100%; }

/* ------------------------------------------- aircraft + network overlay -- */
.band__media{ position:relative; }
.band__net{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* the glow keeps the overlay legible over a busy photograph */
.band__net{ filter:drop-shadow(0 0 6px rgba(47,137,242,.75)); }
.band__lines path{
  fill:none; stroke:#6FB2FF; stroke-width:2; opacity:.95;
  stroke-dasharray:6 10;
  animation:flow 2.6s linear infinite;
}
.band__nodes circle{ fill:#8CC3FF; }
.band__nodes circle:nth-child(2){ animation:pulse 2.8s ease-in-out infinite .5s; }
.band__nodes circle:nth-child(1){ animation:pulse 2.8s ease-in-out infinite; }
.band__nodes circle:nth-child(3){ animation:pulse 2.8s ease-in-out infinite 1s; }
@keyframes flow  { to { stroke-dashoffset:-64; } }
@keyframes pulse { 50% { opacity:.35; r:7; } }

/* the convergence point: all the routes land on the company */
.band__chip{
  position:absolute; left:50%; top:57%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border:1px solid rgba(47,137,242,.55); border-radius:3px;
  background:rgba(8,8,10,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:clamp(10px,1.1vw,12.5px); font-weight:700; letter-spacing:.2em; white-space:nowrap;
  box-shadow:0 10px 40px -12px rgba(47,137,242,.6);
}
.band__chip-mark{ width:16px; height:16px; color:var(--primary); flex:none; }
.band__chip-mark svg{ width:100%; height:100%; }

.band__txt{ margin-top:clamp(34px,4.4vw,58px); max-width:64ch; }

/* ---------------------------------------------------------------- grids -- */
.grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  position:relative; background:var(--ink); padding:clamp(28px,3vw,40px);
  transition:background .4s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:0;
  background:var(--primary); transition:width .45s var(--ease);
}
.card:hover{ background:var(--ink-3); }
.card:hover::before{ width:100%; }
.card__ico{ display:block; width:30px; height:30px; color:var(--primary); margin-bottom:26px; }
.card__ico svg{ width:100%; height:100%; }
.card__h{ margin:0 0 12px; font-size:1.14rem; font-weight:700; letter-spacing:-.01em; }
.card__p{ margin:0; color:var(--w-52); font-size:.95rem; line-height:1.68; }

/* stat tiles */
.grid--tight .tile{
  background:var(--ink-2); padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; gap:6px; transition:background .4s var(--ease);
}
.grid--tight .tile:hover{ background:var(--ink-3); }
.tile__b{
  font-size:clamp(2rem,3.6vw,2.9rem); font-weight:700; letter-spacing:-.03em;
  line-height:1; color:var(--w);
}
.tile__b--sm{ font-size:clamp(1.25rem,1.9vw,1.6rem); letter-spacing:-.02em; }
.tile__s{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--primary); }

/* ------------------------------------------------------- who we work with */
.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.row{
  display:flex; align-items:center; gap:clamp(18px,3vw,40px);
  padding:clamp(20px,2.6vw,30px) 4px;
  border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease), background .4s var(--ease);
}
.row:hover{ padding-left:16px; background:rgba(255,255,255,.02); }
.row__n{
  font-size:11px; letter-spacing:.2em; color:var(--w-38); flex:none;
  transition:color .3s var(--ease);
}
.row:hover .row__n{ color:var(--primary); }
.row__t{
  font-size:clamp(1.15rem,2.5vw,1.85rem); font-weight:600; letter-spacing:-.02em;
}

/* ---------------------------------------------------------------- about -- */
.about{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px);
  align-items:start;
}
.about__r{ color:var(--w-70); font-size:clamp(1rem,1.15vw,1.1rem); padding-top:clamp(0px,3vw,42px); }
.rule{ display:block; width:64px; height:2px; background:var(--primary); margin-top:clamp(26px,3vw,38px); }

/* ---------------------------------------------------------------- split -- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,76px);
  align-items:center;
}
.split__txt .lede{ margin-top:clamp(16px,2vw,22px); }

/* ------------------------------------------------------------ final cta -- */
.cta{
  position:relative; padding-block:clamp(90px,12vw,170px); text-align:center;
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(47,137,242,.20), transparent 62%),
    var(--ink-2);
  border-block:1px solid var(--line);
  overflow:hidden;
}
.cta::before{
  content:""; position:absolute; left:50%; top:0; width:1px; height:60px;
  background:linear-gradient(180deg,var(--primary),transparent);
}
.cta__h{
  margin:0; font-size:clamp(2rem,4.8vw,3.7rem); line-height:1.08;
  letter-spacing:-.028em; font-weight:700;
}
.cta__p{
  margin:clamp(18px,2.4vw,26px) auto clamp(30px,4vw,42px); max-width:52ch;
  color:var(--w-70); font-size:clamp(1rem,1.15vw,1.1rem);
}

/* -------------------------------------------------------------- contact -- */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,88px); align-items:start; }

.points{
  list-style:none; margin:clamp(30px,4vw,44px) 0 0; padding:0;
  border-top:1px solid var(--line);
}
.points li{
  position:relative; padding:15px 0 15px 22px; border-bottom:1px solid var(--line);
  font-size:.95rem; color:var(--w-70);
}
.points li::before{
  content:""; position:absolute; left:0; top:calc(50% - 2px);
  width:5px; height:5px; background:var(--primary); border-radius:50%;
}

.form{ display:flex; flex-direction:column; gap:20px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.fld{ display:flex; flex-direction:column; gap:9px; }
.fld__l{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--w-38); }
.fld__i{
  width:100%; padding:14px 16px; font-family:inherit; font-size:.97rem; color:var(--w);
  background:var(--ink-2); border:1px solid var(--line); border-radius:2px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.fld__i::placeholder{ color:var(--w-38); }
.fld__i:hover{ border-color:var(--line-2); }
.fld__i:focus{ outline:none; border-color:var(--primary); background:var(--ink-3); }
.fld__i--ta{ resize:vertical; min-height:130px; line-height:1.6; }
.fld.is-bad .fld__i{ border-color:var(--danger); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__btn{ align-self:flex-start; margin-top:4px; }
.form__btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.form__msg{ margin:0; font-size:.92rem; min-height:1.3em; color:var(--w-70); }
.form__msg.is-ok{ color:#4ADE80; }
.form__msg.is-err{ color:var(--danger); }

/* --------------------------------------------------------------- footer -- */
.ft{ background:var(--ink); border-top:1px solid var(--line); }
.ft__in{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-block:clamp(46px,6vw,72px);
}
.ft__brand p{ margin-top:16px; color:var(--w-38); font-size:.9rem; line-height:1.7; }
.ft__nav{ display:flex; flex-direction:column; gap:12px; }
.ft__nav a{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--w-52);
  transition:color .3s var(--ease);
}
.ft__nav a:hover{ color:var(--primary); }
.ft__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:22px; border-top:1px solid var(--line);
  font-size:11.5px; letter-spacing:.08em; color:var(--w-38);
}
.ft__dom{ letter-spacing:.18em; text-transform:uppercase; }

/* --------------------------------------------------------------- reveal -- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.40s; }
.reveal[data-d="6"]{ transition-delay:.48s; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width:1080px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps--3{ grid-template-columns:repeat(3,1fr); }
  .feat{ grid-template-columns:56px minmax(0,1fr); }
  .feat__d{ grid-column:2; }
}

@media (max-width:860px){
  html{ scroll-padding-top:70px; }

  .burger{ display:block; }
  .nav{
    position:fixed; inset:0 0 auto 0; top:0; padding:100px var(--pad) 44px;
    border-radius:0; background:rgba(8,8,10,.97); border-width:0 0 1px 0; gap:0;
    flex-direction:column; align-items:flex-start; gap:4px;
    background:rgba(8,8,10,.97);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%); transition:transform .5s var(--ease);
    max-height:100svh; overflow-y:auto;
  }
  .nav.is-open{ transform:none; }
  .nav__pill{ display:none; }
  .nav__a{
    font-size:1.05rem; letter-spacing:.1em; padding:16px 4px; width:100%;
    border-radius:0; border-bottom:1px solid var(--line);
  }
  .nav__a.is-active{ color:var(--primary); }

  .hero{ min-height:auto; padding-top:132px; }
  .hero__in{ padding-bottom:clamp(56px,10vh,96px); }
  .hero__strip-in{ grid-template-columns:repeat(2,1fr); gap:22px 16px; }
  .hero__strip-in > div:nth-child(odd){ border-left:0; padding-left:0; }

  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .about,.split{ grid-template-columns:1fr; }
  .about__r{ padding-top:0; }
}

@media (max-width:560px){
  .grid--4,.grid--3{ grid-template-columns:1fr; }
  .steps,.steps--3{ grid-template-columns:1fr; }
  .feat{ grid-template-columns:1fr; gap:18px; }
  .feat__n{ padding-top:0; }
  .feat__d{ grid-column:1; }
  .form__row{ grid-template-columns:1fr; }
  .ft__in{ flex-direction:column; gap:32px; }
  .ft__nav{ flex-direction:row; flex-wrap:wrap; gap:18px; }
}

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