/* =========================================================
   1) DESIGN TOKENS / VARIABLES
   ========================================================= */
:root{
  --bg-page: #F8FAFC;
  --bg-section: transparent;
  --bg-card: #FFFFFF;
  --border: #E3E7EF;

  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-placeholder: #94A3B8;
  --text-on-accent: #FFFFFF;

  --link: #134ECD;
  --link-hover: #0f3ea6;

  --api-primary: #134ECD;
  --api-hover: #0f3ea6;

  --radius-card: 15px;
  --radius-ctrl: 15px;
  --radius-btn: 15px;
  --content-max: 1600px;
  --header-h: 76px;
  --hero-base: #060A14;

  --font-heading: "Poppins","Inter","Helvetica Neue",Arial,sans-serif;
  --font-body: "Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --h1-size: 48px; --h1-line: 56px; --h1-weight: 700;
  --h1-size-mobile: 34px; --h1-line-mobile: 42px;
  --lead-size: 20px; --lead-line: 30px; --lead-weight: 500;
  --body-size: 16px; --body-line: 26px; --body-weight: 400;

  --case-halo: rgba(19,78,205,0.18);
  --case-spot: rgba(19,78,205,0.10);
}

/* =========================================================
   1a) FONT-FACE (self-hosted, swap)
   ========================================================= */
@font-face{
  font-family:"Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face{
  font-family:"Poppins";
  src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face{
  font-family:"Poppins";
  src: url("../fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/* =========================================================
   2) BASE STYLES
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}
a{text-decoration:none;color:inherit}

.page-bg{
  position:fixed;
  inset:0;
  z-index:-4;
  background:
    radial-gradient(140% 140% at 15% 10%, #ffffff 0%, #f4f8ff 38%, #eaf3ff 65%, #f8fbff 100%),
    linear-gradient(120deg, rgba(19,78,205,0.06), rgba(19,78,205,0.0));
  animation: pageDrift 26s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes pageDrift{0%{background-position:0% 0%;}100%{background-position:100% 100%;}}

body::before{
  content:"";
  position:fixed; inset:0; z-index:-3;
  background:
    url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23134ECD' stroke-width='1.2' stroke-opacity='0.06'%3E%3Cpath d='M80 120c120-60 240 60 360 0s240-60 280 40-40 200-160 220-200-40-300-40S40 360 40 240s-20-60 40-120Z'/%3E%3Cpath d='M120 520c60-140 220-120 300-40s200 60 240 0 20-200-100-220-200 40-260 120-160 80-180 200 40 120 100 60Z'/%3E%3C/g%3E%3C/svg%3E") 20% 10%/700px 700px no-repeat,
    url("data:image/svg+xml,%3Csvg width='900' height='900' viewBox='0 0 900 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230ea5e9' stroke-width='1.1' stroke-opacity='0.05'%3E%3Ccircle cx='260' cy='260' r='220'/%3E%3Ccircle cx='620' cy='520' r='260'/%3E%3Cpath d='M120 640c140-60 200-40 320 0s240 20 320-120'/%3E%3C/g%3E%3C/svg%3E") 80% 60%/820px 820px no-repeat,
    linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px) 0 0/120px 120px,
    linear-gradient(0deg,  rgba(15,23,42,0.03) 1px, transparent 1px) 0 0/120px 120px;
  pointer-events:none;
}

/* Sections overlay (mask excludes Hero) */
.sections-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  mask-image: linear-gradient(180deg, transparent 0%, transparent 12vh, black 22vh, black 90vh, transparent 100%);
}
.sections-bg canvas{position:absolute; inset:0; width:100%; height:100%; opacity:0.55;}
@media (prefers-reduced-motion: reduce){.sections-bg canvas{display:none;}}

/* Spacing + focus */
.section{padding:75px 0 20px;}
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav__link:focus-visible{outline:2px solid var(--api-primary);outline-offset:3px;}

/* Buttons (base) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius: var(--radius-btn);
  padding:10px 14px;
  font-size:14px;font-weight:600;line-height:1.1;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  position:relative;overflow:hidden;isolation:isolate;box-shadow:none;border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px);}
.btn__icon{width:24px;height:24px;margin-left:8px;display:inline-flex;align-items:center;justify-content:center;}
.btn__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;}
.btn::after{
  content:"";position:absolute;inset:-140%;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  transform: translateX(-30%);transition: transform .35s ease, opacity .35s ease;opacity:0.85;pointer-events:none;
}
.btn:hover::after{transform: translateX(25%);}
.btn::before{
  content:"";position:absolute;top:0;left:-120%;width:120%;height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-12deg);transition: transform 0.6s ease, left 0.6s ease, opacity 0.6s ease;opacity:0.9;pointer-events:none;
}
.btn:hover::before{left:100%;transform: skewX(-12deg);}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn::after,.btn::before{transition:none;opacity:0}
}

/* Ghost Case Button */
.btn--ghostCase{
  margin-top:16px;
  border:1px solid rgba(19,78,205,0.22);
  color:#134ecd;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f6ff 100%);
  font-weight:400;
  border-radius:15px;
  min-height:40px;
  min-width:170px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn--ghostCase:hover{
  background: linear-gradient(180deg, #e6efff 0%, #d8e7ff 100%);
  color:#0f3ea6;
  border-color:#134ecd;
}
.btn--ghostCase::before,.btn--ghostCase::after{opacity:0.7;}
@media (prefers-reduced-motion: reduce){
  .btn--ghostCase::before,.btn--ghostCase::after{display:none;}
}

/* Reduced motion global fallbacks */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .accentWord,.hero__canvas,.hero__bg,.hero__scanlines{animation:none;filter:none}
  .flowHero--anim .flowHero__panel,
  .flowHero--anim .flowHero__item,
  .flowHero--anim .flowDetail,
  .reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .hero__inner{transform:none !important;}
  .badge--glint::after{animation:none !important;opacity:0.2;}
  .btn::after,.btn::before,.flowTab::after,.flowTab::before{display:none;}
  .cases-hub__glow{display:none;}
}

/* Mobile utility */
@media (max-width: 480px){
  .btn{width:100%;justify-content:center;}
  .hero__cta{width:100%;}
}

/* =========================================================
   3) LAYOUT (HEADER / NAV)
   ========================================================= */
.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  width:100%;
  background: #ffffff;
  border-bottom:1px solid rgba(226,232,240,.6);
  backdrop-filter: blur(14px);
  box-shadow:none;
  transition: all 0.25s ease;
}
.header__edge{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0));
  pointer-events:none;
}
.header__inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:14px;
  min-height: var(--header-h);
  transition: min-height 0.25s ease;
}
.brand{display:flex;align-items:center;height: var(--header-h);transition: transform 0.25s ease;}
.wordmark{
  display:flex;align-items:center;gap:8px;
  font-size:30px;font-weight:850;letter-spacing:-0.015em;
  color: var(--api-primary) !important;line-height:1;transition: transform 0.25s ease;
  font-family: var(--font-heading);
}
.wordmark .brace{font-family: var(--font-mono);font-weight:800;color: var(--api-primary) !important;}
.wordmark .name{color: var(--api-primary) !important;-webkit-text-fill-color: var(--api-primary) !important;}

/* NAVIGATION */
.nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  font-size:16px;font-weight:600;color: var(--text-secondary);
  align-self:center;overflow-x:auto;padding:6px 0;
  font-family: var(--font-body);
}
.nav__link{
  color: inherit;
  padding:12px 12px;
  border-radius:12px;
  transition: background .15s ease, color .15s ease;
  line-height:1; position: relative;
}
.nav__link.is-active::after{
  content:"";position:absolute;left:12px; right:12px; bottom:6px;
  height:2px; border-radius:999px;
  background: linear-gradient(90deg, var(--api-primary), #1b5ff0);opacity:0.9;
}
.nav__link:hover{color: var(--text-primary);background: rgba(0,0,0,.04);}

/* Header actions */
.header__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap;}

/* Shrink on scroll */
body.is-scrolled .header{background: rgba(255,255,255,0.82);box-shadow:none;}
body.is-scrolled .header__inner{min-height: 64px;}
body.is-scrolled .brand, body.is-scrolled .wordmark{transform: scale(1);}
body.is-scrolled .btn{padding:10px 14px;}

/* =========================================================
   4) HERO
   ========================================================= */
main{scroll-snap-type: y mandatory; padding-top:0;}
.hero{
  width: 100vw;
  min-height: 100vh;
  background: #0a1024;
  color: rgba(234,240,255,.92);
  display:flex;align-items:center;position:relative;overflow:hidden;margin-top:0;
  padding: calc(var(--header-h) + 32px) 0 48px;
  scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: var(--header-h);
}
.hero__bg{
  position:absolute; inset:0;
  background: linear-gradient(180deg, #0a1024 0%, #070a18 100%);
  animation: heroGradient 18s ease-in-out infinite alternate;
}
@keyframes heroGradient{
  0% { background: radial-gradient(1600px 1000px at 25% 22%, rgba(19,78,205,0.18), transparent 55%), linear-gradient(180deg, #0a1024 0%, #070a18 100%);}
  100%{ background: radial-gradient(1600px 1000px at 65% 30%, rgba(34,211,238,0.16), transparent 55%), linear-gradient(180deg, #0a1228 0%, #050814 100%);}
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; mix-blend-mode: screen; opacity:.82;
  transition: transform 0.6s ease, filter 0.6s ease, opacity 0.6s ease; z-index:1;
}
.hero__scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 3px, transparent 6px);
  opacity:0.12; z-index:2; animation: scanShift 16s linear infinite;
}
@keyframes scanShift{0%{transform:translateY(0);}100%{transform:translateY(10px);}}

.hero__vignette{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%);
  pointer-events:none; transition: opacity 0.6s ease; z-index:2;
}
.hero__inner{
  position:relative; z-index:3;
  width:100%; max-width: 1180px;
  margin:0 auto; padding: 0 28px 90px;
  text-align:center;
  transition: transform 0.5s ease, opacity 0.6s ease, filter 0.6s ease;
  transform: translate3d(var(--hero-tilt-x,0), var(--hero-tilt-y,0), 0) rotateX(var(--hero-rot-x,0)) rotateY(var(--hero-rot-y,0));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height: calc(100vh - var(--header-h));
}
h1.hero__title{
  margin: 0 0 18px;
  font-size: clamp(36px, 5.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: rgba(245,248,255,1);
  font-family: var(--font-heading);
}
.accentWord{
  color: transparent;
  background: linear-gradient(120deg, #7dd3fc 0%, #8b5cf6 25%, #ec4899 50%, #22d3ee 75%, #60a5fa 100%);
  -webkit-background-clip: text; background-clip: text;
  background-size: 250% 100%;
  animation: accentShift 7s ease-in-out infinite alternate, accentGlow 6s ease-in-out infinite;
  filter: drop-shadow(0 14px 40px rgba(96,165,250,.14));
  white-space: nowrap;
}
@keyframes accentShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes accentGlow{0%,100%{filter: drop-shadow(0 10px 30px rgba(96,165,250,.12));}50%{filter: drop-shadow(0 18px 46px rgba(236,72,153,.22));}}

.hero__lead{
  margin:0 auto 20px;
  max-width: 70ch;
  font-size: var(--lead-size);
  line-height: var(--lead-line);
  font-weight: var(--lead-weight);
  color: rgba(234,240,255,.82);
}
.hero__cta{
  display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;margin-top:20px;
}
.hero__cta-secondary{border:1px solid rgba(255,255,255,0.35);background: transparent;color: #fff;}
@media (min-width: 640px){ .hero__cta{flex-direction:row} }
.hero__cta .btn{min-width: 170px;justify-content: center;}
.hero__metrics{
  margin:20px auto 24px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  color:#E2E8F0;font-size:13px;
}
.metric{display:flex;gap:8px;padding:8px 12px;border-radius:15px;border:1px solid rgba(255,255,255,0.16);background: rgba(255,255,255,0.05);}
.metric__label{letter-spacing:0.02em;color:rgba(226,232,255,0.8);}
.metric__value{font-weight:700;color:#fff;}

.hero__clients{margin-top: 10px;}
.hero__clients-title{margin: 0 0 22px;font-size: 26px;font-weight: 700;color: #e9ecf8;}
.hero__logos{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
.hero__logo{
  width:200px;height:50px;border-radius:15px;
  background:#12131f;border:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:center;padding:18px 20px;gap:16px;
  position:relative;overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 44px rgba(0,0,0,0.32);
}
.hero__logo-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
.hero__logo-text{color:#fff;font-size:18px;font-weight:400;letter-spacing:0.01em;}

.hero__logo--google{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 36px rgba(255, 64, 64, 0.30),
    0 0 24px rgba(255, 64, 64, 0.26);
}

.hero__logo--microsoft{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 36px rgba(50, 80, 255, 0.30),
    0 0 24px rgba(50, 80, 255, 0.26);
}

.hero__logo--paypal{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 36px rgba(0, 190, 210, 0.30),
    0 0 24px rgba(0, 190, 210, 0.26);
}

.hero__logo--mercedes{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 36px rgba(255, 210, 82, 0.30),
    0 0 24px rgba(255, 210, 82, 0.26);
}

.hero__logo--porsche{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 36px rgba(255, 128, 0, 0.30),
    0 0 24px rgba(255, 128, 0, 0.26);
}

.scroll-hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:70;
}
.scroll-hint__text{font-size:12px;font-weight:400;color:#cbd5e1;letter-spacing:0.01em;}
.scroll-mouse{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:30px;height:60px;color:#FFFFFF;text-decoration:none;
  transition: opacity .2s ease, transform .2s ease;
}
.scroll-mouse.is-hidden{opacity:0;pointer-events:none;}
.scroll-mouse .mouse{height:28px;width:16px;border-radius:12px;border:2px solid rgba(255,255,255,0.65);position:relative;}
.scroll-mouse .wheel{height:6px;width:2px;display:block;margin:6px auto;background: #9f8cff;position:relative;animation: mouse-wheel 1.2s ease infinite;}
.scroll-mouse:hover{transform:translateY(2px);}
@keyframes mouse-wheel{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(6px);}}

/* Page-load reveal */
.brand img{opacity:0;transform: translateY(-6px) scale(0.98);transition: opacity 420ms ease, transform 420ms ease;}
.hero__title,.hero__lead,.hero__cta{opacity:0;transform: translateY(14px);transition: opacity 520ms ease, transform 520ms ease;}
.hero__lead{transition-delay: 120ms;} .hero__cta{transition-delay: 220ms;}
body.is-loaded .brand img,
body.is-loaded .hero__title,
body.is-loaded .hero__lead,
body.is-loaded .hero__cta{opacity:1;transform: translateY(0);}
@media (prefers-reduced-motion: reduce){
  .brand img,.hero__title,.hero__lead,.hero__cta{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* =========================================================
   5) SECTIONS (generic + services)
   ========================================================= */
.section{
  position: relative;
  overflow: visible;
  background: var(--bg-section);
  color: #E2E8F0;
  display: block;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: var(--header-h);
}
.section__bg{position:absolute; inset:0; background: transparent; pointer-events:none; z-index:0;}
.section__inner{max-width: 1600px; position: relative; z-index:1; width:100%;}
.section__head{margin-bottom: 20px; text-align: center;}
.section h2{font-size: clamp(30px, 3.6vw, 50px); margin: 2px 0 4px; color: #0f172a; letter-spacing: -0.01em; line-height:1.08;}
.section__lead{color: #475569; margin: 0 auto 10px; max-width: 980px;}
.section__trust{margin: 6px auto 10px; color: #5b6476; font-size: 14px; letter-spacing: 0.04em;}
.section__divider{width: 120px; height: 1px; margin: 12px auto 0; background: rgba(15,23,42,0.08); border-radius: 999px;}
.section--services{background: transparent; padding:75px 0 25px;}

/* Services grid */
.cards--services{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  align-items: stretch;
  position: relative;
  scroll-snap-align: start;
}
.cards--services::before{
  content:"";
  position:absolute; inset:0;
  top:10%; height:80%;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.18), transparent 45%);
  pointer-events:none; z-index:0;
}
@media (max-width: 1100px){ .cards--services{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .cards--services{ grid-template-columns: 1fr; } }

/* Card */
.card{
  background: #ffffff;
  border:1px solid #e5e8f0;
  border-radius: var(--radius-card);
  padding: 25px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
  min-height: 240px;
  display:flex; flex-direction:column; gap:12px;
  position: relative; z-index:1;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:-1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  opacity:0; transition: opacity 0.18s ease; pointer-events:none;
}
.card--link{color:inherit;text-decoration:none;}
.card__accent{display:none;}
.card:hover{
  transform: translateY(-4px);
  background-color: #f2f6ff;
  box-shadow: 0 12px 32px rgba(15,23,42,0.10), 0 0 0 1px rgba(19,78,205,0.05);
}

/* Hover colors */
.cards--services > a:nth-child(1):hover{border-color: rgba(15,122,43,0.45); box-shadow: 0 12px 32px rgba(15,122,43,0.22), 0 0 0 1px rgba(15,122,43,0.30);}
.cards--services > a:nth-child(1):hover .card__icon{ background:#d9f3e3; color:#0f7a2b; }
.cards--services > a:nth-child(1):hover h3{ color:#0f7a2b; }

.cards--services > a:nth-child(2):hover{border-color: rgba(107,33,168,0.45); box-shadow: 0 12px 32px rgba(107,33,168,0.22), 0 0 0 1px rgba(107,33,168,0.30);}
.cards--services > a:nth-child(2):hover .card__icon{ background: #efe1ff; color: #6b21a8; }
.cards--services > a:nth-child(2):hover h3{ color: #6b21a8; }

.cards--services > a:nth-child(3):hover{border-color: rgba(11,75,179,0.45); box-shadow: 0 12px 32px rgba(11,75,179,0.22), 0 0 0 1px rgba(11,75,179,0.30);}
.cards--services > a:nth-child(3):hover .card__icon{ background: #dfeaff; color: #0b4bb3; }
.cards--services > a:nth-child(3):hover h3{ color: #0b4bb3; }

.cards--services > a:nth-child(4):hover{border-color: rgba(11,138,161,0.45); box-shadow: 0 12px 32px rgba(11,138,161,0.22), 0 0 0 1px rgba(11,138,161,0.30);}
.cards--services > a:nth-child(4):hover .card__icon{ background: #d8f8ff; color: #0b8aa1; }
.cards--services > a:nth-child(4):hover h3{ color: #0b8aa1; }

.cards--services > a:nth-child(5):hover{border-color: rgba(192,86,33,0.45); box-shadow: 0 12px 32px rgba(192,86,33,0.22), 0 0 0 1px rgba(192,86,33,0.30);}
.cards--services > a:nth-child(5):hover .card__icon{ background: #ffe7d1; color: #c05621; }
.cards--services > a:nth-child(5):hover h3{ color: #c05621; }

.cards--services > a:nth-child(6):hover{border-color: rgba(177,22,87,0.45); box-shadow: 0 12px 32px rgba(177,22,87,0.22), 0 0 0 1px rgba(177,22,87,0.30);}
.cards--services > a:nth-child(6):hover .card__icon{ background: #ffdce9; color: #b11657; }
.cards--services > a:nth-child(6):hover h3{ color: #b11657; }

.card__icon{
  width:46px;height:46px;border-radius: var(--radius-card);
  background: #e9efff; display:grid;place-items:center;
  color: var(--api-primary); box-shadow:none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.card__icon svg{width:24px;height:24px;stroke: currentColor;}
.card:hover .card__icon{transform: translateY(-2px); box-shadow: none;}
.card h3{margin: 0; color: #0f172a; font-size: 21px; line-height:1.1; transition: color 0.18s ease;}
.card p{margin: 0; color: #334155; font-size: 16px; line-height: 26px;}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto;}
.tags span{display:inline-flex; padding:6px 10px; border-radius:15px; background: #f1f4f9; color: #5b6476; font-size: 13px; border:1px solid #e3e7ef;}

/* Generic reveal */
.reveal{opacity:0; transform: translateY(16px); filter: blur(6px);}
.reveal.is-visible{opacity:1; transform: translateY(0); filter: blur(0); transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;}

/* =========================================================
   6) CASE STUDIES
   ========================================================= */
.section--cases{background: transparent; padding:75px 0 25px;}
.section--cases::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 55% 45%, rgba(19,78,205,0.12), transparent 45%);
  opacity:0.55; pointer-events:none;
}
.section--cases::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  mix-blend-mode: overlay; opacity:0.35; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .section--cases::before,.section--cases::after{animation:none;}
}
.cases-board{
  position:relative; border-radius:20px;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px 18px;
}
@media (max-width: 900px){
  .cases-board{grid-template-columns:1fr; padding:38px 18px 28px;}
}
.cases-hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:250px; height:250px; border-radius:50%;
  background: rgba(255,255,255,0.82); border:1px solid rgba(19,78,205,0.18);
  box-shadow: 0 18px 48px rgba(15,23,42,0.12), 0 0 0 14px rgba(255,255,255,0.72), inset 0 1px 0 rgba(255,255,255,0.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  z-index:4; backdrop-filter: blur(10px); overflow:hidden;
}
.cases-hub__glow{
  position:absolute; inset:-25%;
  background: radial-gradient(circle at 50% 35%, rgba(19,78,205,0.16), transparent 60%);
  animation: hubGlow 14s ease-in-out infinite alternate;
}
@keyframes hubGlow{0% {transform: translate3d(-6px,-4px,0);}100%{transform: translate3d(6px,4px,0);}}
@media (prefers-reduced-motion: reduce){.cases-hub__glow{display:none;}}
.cases-hub__logo img{width:96px;height:96px; position:relative; z-index:1;}
.cases-hub__title{font-weight:800; color:#0f172a; font-size:36px; position:relative; z-index:1;}
.cases-hub__subtitle{font-size:14px; color:#475569; line-height:1.35; padding:0 18px; position:relative; z-index:1;}
@media (max-width: 900px){
  .cases-hub{position:relative; left:50%; top:0; transform:translate(-50%,0); margin-bottom:18px; width:240px; height:240px;}
}
.caseTile{
  position:relative;
  padding:50px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:15px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.10), 0 1px 0 rgba(255,255,255,0.7) inset;
  color:#0f172a;
  display:flex; flex-direction:column; gap:8px; z-index:1;
  justify-content: flex-start;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  overflow:hidden;
  align-items: center;
}
.caseTile::after{
  content:""; position:absolute; left:0;right:0;bottom:0; height:3px;
  background: linear-gradient(90deg, rgba(19,78,205,0.25), rgba(19,78,205,0));
  opacity:0.8;
}
.caseTile--divider{border-left:1px solid rgba(255,255,255,0);}
.caseTile__badge{
  position:absolute; top:12px; right:14px;
  font-size:12px; font-weight:700; color:#0f172a;
  padding:6px 10px; border-radius:15px;
  background:rgba(19,78,205,0.06); border:1px solid rgba(19,78,205,0.12);
  overflow:hidden;
}
.caseTile__badge::after{
  content:""; position:absolute; inset:-120% -60%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-80%); animation: badgeSoftGlint 6s ease-in-out infinite; pointer-events:none; opacity:0.75;
}
@keyframes badgeSoftGlint{0%,70% { transform: translateX(-80%); } 80%,100% { transform: translateX(120%); }}
.caseTile__header h3{margin:4px 0 6px; font-size:21px; line-height:1.25; color:#0f172a; text-align: center; letter-spacing: -0.01em;}
.caseTile__sub{margin:18px 12px; font-size:14px; color:#475569; line-height:22px; text-align: center;}
.case__footer{
  margin-top:10px;
  background: linear-gradient(180deg, #f7f9ff 0%, #f2f5fb 100%);
  color:#0F172A;
  border-radius:15px;
  padding:12px 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  align-items:start;
  width: 100%;
  border:1px solid rgba(19,78,205,0.14);
}
.case__footer-item{
  display:flex; flex-direction:column; gap:4px; align-items: center;
  border-right: 1px solid rgba(15,23,42,0.08); padding-right:10px;
}
.case__footer-item--last{border-right:none;}
.case__icon{
  width:24px; height:24px; display:inline-block;
  background-repeat:no-repeat; background-size:contain;
  filter: saturate(1); transition: filter 0.18s ease, opacity 0.18s ease; opacity: 0.9;
}
.case__footer:hover .case__icon{filter: saturate(1.15); opacity: 1;}
.case__icon--uptime{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.5 9.5 18 20 6' stroke='%23134ECD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.case__icon--cars{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 13h18l-1-5.5a2 2 0 0 0-2-1.5H6a2 2 0 0 0-2 1.5L3 13Z' stroke='%23134ECD' stroke-width='2'/%3E%3Cpath d='M7 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm12 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' fill='%23134ECD'/%3E%3C/svg%3E");}
.case__icon--assets{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10' stroke='%23134ECD' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}
.case__icon--live{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23134ECD' stroke-width='2'/%3E%3Cpath d='M8 12l2.5 2.5L16 9' stroke='%23134ECD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.case__icon--tours{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20V4a2 2 0 0 1 2-2h7l5 5v13H5Z' stroke='%23134ECD' stroke-width='2'/%3E%3Cpath d='M14 2v4h4' stroke='%23134ECD' stroke-width='2'/%3E%3C/svg%3E");}
.case__icon--bookings{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v14H4z' stroke='%23134ECD' stroke-width='2'/%3E%3Cpath d='M4 9h16M9 5v14' stroke='%23134ECD' stroke-width='2'/%3E%3C/svg%3E");}
.case__icon--delay{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23134ECD' stroke-width='2'/%3E%3Cpath d='M12 8v5l3 2' stroke='%23134ECD' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}
.case__icon--dq{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='3' stroke='%23134ECD' stroke-width='2'/%3E%3Cpath d='M8 12h8M8 15h5M8 9h6' stroke='%23134ECD' stroke-width='2'/%3E%3C/svg%3E");}
.case__icon--crms{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='12' r='3' stroke='%23134ECD' stroke-width='2'/%3E%3Ccircle cx='16' cy='8' r='3' stroke='%23134ECD' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='3' stroke='%23134ECD' stroke-width='2'/%3E%3Cpath d='M10.5 11l5-2M10.5 13l5 2' stroke='%23134ECD' stroke-width='2'/%3E%3C/svg%3E");}
.case__icon--stock{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12c3-4 7-4 10 0s7 4 10 0' stroke='%23134ECD' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='12' r='3' stroke='%23134ECD' stroke-width='2'/%3E%3C/svg%3E");}
.case__icon--orders{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14M5 12h14M5 18h8' stroke='%23134ECD' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}
.case__icon--refunds{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h12l-3-3m0 16 3-3H4' stroke='%23134ECD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 9v3a6 6 0 0 1-6 6' stroke='%23134ECD' stroke-width='2'/%3E%3C/svg%3E");}
.case__footer-label{font-size:14px; color:#0F172A; letter-spacing:0.01em;}
.case__footer-value{font-size:18px; font-weight:800; color:#0F172A; letter-spacing: 0.01em;}

/* Hub halo */
.cases-board::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(19,78,205,0.18), transparent 55%);
  opacity: 0; transition: opacity 0.32s ease; z-index: 0;
}
.cases-board:hover::before,
.cases-board:focus-within::before,
.cases-board:has(.cases-hub:hover)::before,
.cases-board:has(.cases-hub:focus-visible)::before{opacity: 0.35;}

.caseTile:focus-within,
.btn--ghostCase:focus-visible,
.caseTile__badge:focus-visible{outline: 2px solid rgba(19,78,205,0.45); outline-offset: 3px;}
.cases-hub:focus-visible,
.cases-hub:hover{
  box-shadow: 0 18px 48px rgba(15,23,42,0.12),
              0 0 0 16px rgba(255,255,255,0.75),
              0 0 0 2px rgba(19,78,205,0.25),
              inset 0 1px 0 rgba(255,255,255,0.5);
}

/* =========================================================
   7) ENGINEERING STANDARDS
   ========================================================= */
.section--eng-standards{background: transparent; padding:75px 0 25px;}
.section--eng-standards::after{display: none; content:"";}
.section--eng-standards .section__head{text-align:center;}
.section--eng-standards .section__head h2{font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.015em;}
.section--eng-standards .section__lead{
  max-width: 820px; font-size: 18px; line-height: 28px; color: #52607a;
  margin-left: auto; margin-right: auto;
}
.pill-rows{
  position: relative; z-index: 1; margin-top: 32px;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.pill-row{
  position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.pill-row::before{
  content:""; position:absolute; inset:-12px;
  background: radial-gradient(80% 140% at 50% 50%, rgba(19,78,205,0.10), transparent 70%);
  opacity:0; transition: opacity 0.18s ease; z-index:-1;
}
.pill-row:hover::before{opacity:0.28;}
.pill{
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 15px;
  font-size: 17px; font-weight: 600; color: #0f172a;
  background: linear-gradient(180deg, #f8fbff 0%, #f4f7ff 100%);
  border: 1px solid rgba(25,82,180,0.25);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(19,78,205,0.08),
              inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.pill::before{
  content:""; position:absolute; inset:-1px; border-radius: 15px;
  background: linear-gradient(115deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05));
  opacity:0.65; pointer-events:none; mix-blend-mode: screen;
}
.pill::after{
  content:""; position:absolute; inset:2px; border-radius: 15px;
  background: radial-gradient(90% 40% at 50% 0%, rgba(255,255,255,0.85), transparent 55%);
  opacity:0; transition: opacity 0.18s ease; pointer-events:none;
}
.pill:hover{
  border-color: #134ecd;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(19,78,205,0.12),
              0 0 18px rgba(19,78,205,0.20), inset 0 1px 0 rgba(255,255,255,0.95);
  transform: translateY(-1px);
  background: #ffffff;
}
.pill:hover::after{opacity:0.9;}
.pill__icon{color: #134ecd; width: 24px; height: 24px; display: inline-flex;}
.pill__icon svg{width: 24px; height: 24px;}
.pill__text{white-space: nowrap;}
@media (max-width: 960px){.pill-rows{gap: 12px;}.pill-row{width: 100%; justify-content: center;}}
@media (max-width: 640px){.pill{width: 100%; justify-content: center; text-align: center;}.pill__text{white-space: normal;}}
h2 .accentWord{
  color: transparent;
  background: linear-gradient(120deg, #d60cd7 0%, #7c3aed 22%, #4f46e5 44%, #0ea5e9 66%, #22c55e 88%, #f97316 100%);
  -webkit-background-clip: text; background-clip: text;
  background-size: 220% 100%;
  animation: accentShift 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.12));
  white-space: nowrap; animation: none;
}

/* =========================================================
   8) MODELS / CTA / FOOTER
   ========================================================= */
.section--models{background: transparent; padding:75px 0 25px;}
.models__head{margin-bottom:28px;}
.models__head h2{font-size: clamp(32px,3.6vw,46px); letter-spacing:-0.015em; margin:0 0 8px; color:#0f172a;}
.models__head .section__lead{max-width:900px; margin:0 auto; color:#4b5568; font-size:18px; line-height:28px;}
.models-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:22px; align-items:stretch;}
.model-card{
  position:relative;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:22px;
  padding:32px 34px 30px;
  box-shadow:0 10px 28px rgba(15,23,42,0.06);
  display:flex; flex-direction:column; gap:16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.model-card--primary{border:2px solid #3b82f6; box-shadow:0 16px 38px rgba(59,130,246,0.22); transform: translateY(-8px);}
.model-card__badge{
  position:absolute; top:14px; right:14px;
  padding:8px 12px; border-radius:999px;
  background: #e0e7ff; color:#1d4ed8;
  font-weight:800; font-size:13px; letter-spacing:0.01em;
}
.model-card h3{margin:4px 0 4px; font-size:26px; line-height:1.2; color:#0f172a;}
.model-card__sub{margin:0; color:#5b6476; font-size:16px; line-height:26px;}
.model-price{display:flex; flex-direction:column; gap:4px; margin:4px 0 6px;}
.model-price__label{font-size:0.875rem; color:#64748b;}
.model-price__value{font-weight:700; color:#0f172a; font-size:2.5rem; line-height:1.1; letter-spacing:-0.01em;}
.model-list{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.model-list li{display:flex; align-items:flex-start; gap:10px; color:#0f172a; font-size:16px; line-height:24px;}
.model-list svg{width:22px; height:22px; color:#2E62D3; flex-shrink:0;}
.model-card__cta{margin-top:auto; padding-top:10px;}
.model-card__cta .btn{min-width: 190px;}
.btn--outline{border:1.5px solid #3b82f6; background: transparent; color:#1d4ed8; transition: all .2s ease;}
.btn--outline:hover{background: rgba(59,130,246,0.08); box-shadow:0 8px 20px rgba(59,130,246,0.18);}
.btn--primary{background:#2E62D3; border:1px solid #2E62D3; color:#fff; transition: all .2s ease;}
.btn--primary:hover{background:#2550b0; border-color:#2550b0; box-shadow:0 10px 24px rgba(37,80,176,0.25);}
@media (max-width: 720px){
  .model-card{padding:26px 24px;}
  .model-card--primary{transform: none;}
  .model-price__value{font-size:2.1rem;}
}
.trust-strip{
  margin:24px auto 0;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.trust-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:15px;
  background: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
  border:1px solid rgba(19,78,205,0.16);
  color:#0f172a; font-weight:700;
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
}
.trust-text{font-size:15px; letter-spacing:0.01em;}
.trust-icon{width:24px; height:24px; display:inline-block; background-repeat:no-repeat; background-size:contain;}
.trust-icon--crown{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7l4 3 5-6 5 6 4-3-2 10H5L3 7Z' stroke='%23134ECD' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M5 17h14' stroke='%23134ECD' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}
.trust-icon--star{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.8 6.5 20.2l1-6.2-4.5-4.4 6.2-.9L12 3Z' stroke='%23EC4899' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");}
.trust-icon--stat{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 20h16' stroke='%23134ECD' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='6' y='10' width='3' height='8' rx='1' fill='none' stroke='%23134ECD' stroke-width='2'/%3E%3Crect x='11' y='6' width='3' height='12' rx='1' fill='none' stroke='%23134ECD' stroke-width='2'/%3E%3Crect x='16' y='12' width='3' height='6' rx='1' fill='none' stroke='%23134ECD' stroke-width='2'/%3E%3C/svg%3E");}
.trust-icon--hours{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23134ECD' stroke-width='2'/%3E%3Cpath d='M12 8v4l2.5 1.5' stroke='%23134ECD' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}
.trust-pill:hover{border-color: rgba(19,78,205,0.26); box-shadow:0 14px 30px rgba(15,23,42,0.12); transform: translateY(-1px);}
@media (prefers-reduced-motion: reduce){.trust-pill{transition:none; transform:none;}}

/* CTA */
.section--cta{background:#0b1220; color:#e5eaf4; padding:90px 0;}
.cta-grid{display:grid; grid-template-columns: 1.05fr 1fr; gap:36px; align-items:center;}
@media(max-width: 960px){.cta-grid{grid-template-columns:1fr;}}
.cta-copy h2{color:#f7f9ff; font-size: clamp(32px, 4vw, 52px); line-height:1.05; margin:0 0 18px;}
.cta-lead{margin:0 0 28px; color:#c4cbe0; font-size:18px; line-height:28px; max-width: 34ch;}
.cta-bullets{display:flex; flex-direction:column; gap:16px;}
.cta-bullet{display:flex; gap:12px; align-items:flex-start;}
.cta-bullet__icon{width:48px; height:48px; border-radius: var(--radius-card); background: rgba(255,255,255,0.08); color:#d9e5ff; display:grid; place-items:center; flex-shrink:0;}
.cta-bullet__title{font-weight:700; color:#f1f4fb; margin-bottom:4px;}
.cta-bullet__desc{color:#c4cbe0; line-height:1.5;}
.cta-card{
  background: linear-gradient(145deg, #f9fbff 0%, #f2f4f8 100%);
  border-radius: var(--radius-card);
  padding:28px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.22), 0 2px 0 rgba(255,255,255,0.8) inset;
  border:1px solid rgba(15,23,42,0.06);
}
.cta-form{display:flex; flex-direction:column; gap:14px;}
.form-row{display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:12px;}
.form-field{display:flex; flex-direction:column; gap:6px; color:#0f172a; font-weight:600; font-size:14px;}
.form-field span{color:#0f172a;}
.form-field input,.form-field textarea{
  border:1px solid #e2e8f0;
  background:#ffffff;
  color:#0f172a;
  border-radius: var(--radius-card);
  padding:12px 14px;
  font-size:14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.form-field textarea{resize:vertical; min-height:96px;}
.form-field input::placeholder,.form-field textarea::placeholder{color:#9aa8bc;}
.form-field input:focus,.form-field textarea:focus{border-color: rgba(19,78,205,0.45); box-shadow: 0 0 0 3px rgba(19,78,205,0.12); background:#fff;}
.form-check{display:flex; align-items:center; gap:10px; font-size:14px; color:#0f172a;}
.form-check input{width:18px; height:18px; accent-color: var(--api-primary); border-radius:4px;}
.form-check a{color: var(--api-primary); font-weight:700;}
.cta-form .btn{width:100%; justify-content:center; margin-top:6px; border-radius: 15px; border:1px solid transparent; background: var(--api-primary); color:#fff; padding:12px 16px;}
.cta-form .btn:hover{background: var(--api-hover); transform: translateY(-1px); }
.cta-form .btn .btn__icon{width:24px; height:24px; margin-left:8px;}
.form-hint{margin:4px 0 0; text-align:center; color:#94a3b8; font-size:13px;}
.section--cta .cta-legal{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:#94a3b8;}
.section--cta .cta-legal__links{display:flex; flex-wrap:wrap; gap:14px;}
.section--cta .cta-legal__links a{color:#cbd5e1; font-weight:600;}
.section--cta .cta-legal__copy{white-space:nowrap; color:#cbd5e1;}
@media(max-width:600px){
  .section--cta .cta-legal{flex-direction:column; align-items:flex-start;}
  .section--cta .cta-legal__copy{white-space:normal;}
}

/* Footer */
.site-footer{background:#0b1220; color:#cbd5e1; padding:18px 0 22px;}
.site-footer__inner{
  max-width: var(--content-max); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-footer__copy{white-space:nowrap; color:#e5eaf4; font-weight:600;}
.site-footer__links{display:flex; gap:16px; flex-wrap:wrap;}
.site-footer__links a{color:#cbd5e1; font-weight:600;}
.site-footer__links a:hover{color:#fff;}
@media(max-width:640px){
  .site-footer__inner{flex-direction:column; align-items:flex-start;}
  .site-footer__copy{white-space:normal;}
}

/* =========================================================
   9) FLOW (Tabs + panels)
   ========================================================= */
.section--flow{
  background: transparent;
  position:relative;
  display:flex;
  align-items:center;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  scroll-margin-top: var(--header-h);
  padding-top:56px;
}
.section__bg--flow{position:absolute; inset:0; background: transparent; pointer-events:none; z-index:0;}
.section__bg--flow::before,.section__bg--flow::after{content:none;}

.flowTabs{
  display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; justify-content: center;
}
.flowTab{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid #d9e2ef; background:#fff; color:#0f172a;
  border-radius:15px; padding:10px 14px; font-weight:400; font-size:14px;
  cursor:pointer; transition:all .18s ease;
}
.flowTab:hover{border-color: rgba(19,78,205,0.25); color: #0f3ea6;}
.flowTab.is-active{
  border-color: rgba(19,78,205,0.45);
  background: linear-gradient(180deg, #f6f9ff 0%, #eef3ff 100%);
  color:#0f3ea6;
  box-shadow: 0 8px 18px rgba(15,23,42,0.06), 0 0 0 1px rgba(19,78,205,0.08);
}
.flowTab::before{
  content:""; position:absolute; top:0; left:-120%; width:120%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-12deg); transition: transform 0.6s ease, left 0.6s ease, opacity 0.6s ease; opacity:0.85; pointer-events:none;
}
.flowTab:hover::before{left:100%; transform: skewX(-12deg);}
.flowTab::after{
  content:""; position:absolute; inset:-140%;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  transform: translateX(-30%); transition: transform .35s ease, opacity .35s ease; opacity:0.7; pointer-events:none;
}
.flowTab:hover::after{transform: translateX(25%);}
.flowPanels{position:relative;}
.flowPanel{
  display:none;
  border:1px solid #e5e8f0;
  border-radius:15px;
  background: transparent;
  box-shadow: none;
  padding:0;
  perspective: 1600px;
}
.flowPanel.is-active{display:block;}

.flowHero{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.05fr 1fr; gap:24px; align-items: center;
  padding:50px;
  border:1px solid rgba(223,230,243,0.95);
  border-radius:15px;
  background: linear-gradient(135deg, #f7f9ff 0%, #e9edf7 100%);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08), 0 6px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  overflow:hidden;
}
@media(max-width: 1024px){.flowHero{grid-template-columns:1fr;}}
.flowHero__intro h3{margin:12px 0 10px; font-size: clamp(26px, 3vw, 38px); line-height:1.12; color: var(--text-primary);}
.flowHero__intro .flowHero__lead{color: var(--text-secondary); margin:0 0 12px;}
.flowHero__panel{
  background: linear-gradient(135deg, #121827 0%, #0f172a 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:15px;
  padding:18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.04);
  color:#e9eefc;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.flowHero__items{display:grid; grid-template-columns:1fr; gap:10px;}
@media(min-width: 720px){.flowHero__items{grid-template-columns:1fr 1fr;}}
.flowHero__item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 12px;
  border-radius:15px;
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.flowHero__item:hover{
  transform: translateY(-2px);
  border-color: rgba(34,197,235,0.35);
  box-shadow: 0 10px 26px rgba(8,47,73,0.35), 0 0 0 1px rgba(34,197,235,0.25);
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
}
.flowHero__icon{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; font-size:18px; color:#fff;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.flowHero__icon svg{width:24px; height:24px; stroke: currentColor; fill:none;}
.flowHero__icon--violet{background: linear-gradient(135deg,#8b5cf6,#6366f1);}
.flowHero__icon--cyan{background: linear-gradient(135deg,#22d3ee,#0ea5e9);}
.flowHero__icon--amber{background: linear-gradient(135deg,#f59e0b,#f97316);}
.flowHero__icon--blue{background: linear-gradient(135deg,#3b82f6,#2563eb);}
.flowHero__item:hover .flowHero__icon{transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,0.18);}
.flowHero__itemTitle{font-weight:700; color:#f8fbff; transition: color 0.18s ease;}
.flowHero__item:hover .flowHero__itemTitle{color:#e0f2fe;}
.flowHero__itemDesc{color:#c7d2fe; font-size:14px; margin-top:2px;}
.flowHero__panel--stack{gap:14px;}
.flowDetailsPanel{margin-top:4px; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:10px;}
.flowDetail{background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:15px; padding:10px 12px;}
.flowDetail__title{font-weight:700; color:#f4f7ff; margin:0 0 6px; font-size:14px;}
.flowDetail__list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; color:#dbe4ff; font-size:14px; line-height:1.45;}
.flowDetail__list li{position:relative; padding-left:14px;}
.flowDetail__list li::before{content:"•"; position:absolute; left:0; top:0; color:rgba(255,255,255,0.55);}

.flowHero--anim .flowHero__panel,
.flowHero--anim .flowHero__item,
.flowHero--anim .flowDetail{opacity:0; transform: translateY(18px) scale(0.985); filter: blur(4px);}
.flowHero--anim.is-visible .flowHero__panel{
  opacity:1; transform: translateY(0) scale(1); filter: blur(0);
  transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease;
}
.flowHero--anim .flowHero__item,
.flowHero--anim .flowDetail{
  transition: opacity 0.75s cubic-bezier(0.22,0.61,0.36,1), transform 0.75s cubic-bezier(0.22,0.61,0.36,1), filter 0.75s ease;
}
@media (max-width: 720px){.flowTabs{flex-direction:column;} .flowTab{width:100%;}}

/* =========================================================
   10) FLOWMAP
   ========================================================= */
:root{--hub: #1a2b4b; --line-base: oklch(0.78 0.12 255 / 0.55);}
.section--flowmap{background: transparent; padding:75px 0 25px;}
.flowmap__head{ text-align: center; margin: 0 auto 18px; }
.flowmap__head h2{margin: 0 0 6px; font-size: clamp(30px,3.6vw,50px); letter-spacing: -0.01em; color: #0f172a;}
.flowmap__head .section__lead{color: #475569; margin: 0 auto 10px; max-width: 980px;}
.flowmap{
  position: relative; z-index: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 320px 1fr; column-gap: 180px; row-gap: 56px; align-items: center;
}
.flowmap__col{display: grid; grid-template-rows: repeat(4, 1fr); gap: 20px; align-items: center; z-index: 2;}
.flowmap__col--left{ justify-items: end; } .flowmap__col--right{ justify-items: start; }
.flowcard{
  background: #fff; border: 1px solid #e2e8f0; border-radius: 15px;
  padding: 20px 18px; min-height: 134px; width: min(360px, 100%);
  display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center;
  font-weight: 800; color: #0f172a; box-shadow: 0 12px 26px rgba(15,23,42,0.08);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.flowcard h4{margin: 0; font-size: 18px; font-weight: 700; color: #0f172a;}
.flowcard p{margin: 0; font-size: 14px; color: #64748b; font-weight: 600;}
.flowcard__tags{display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;}
.flowcard__tags span{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 12px; min-height: 30px; border-radius: 15px;
  background: #f5f7fb; color: #475569; font-size: 12px; font-weight: 600; line-height: 1.2;
  border: 1px solid #e2e8f0;
}
.flowcard:hover{border-color: oklch(0.70 0.20 285); box-shadow: 0 16px 36px rgba(75,85,118,0.28), 0 0 18px rgba(139,92,246,0.35); transform: translateY(-3px);}
.flowcard.is-pulse{border-color: oklch(0.78 0.20 280); box-shadow: 0 16px 36px rgba(75,85,118,0.28), 0 0 18px rgba(139,92,246,0.35); transform: translateY(-4px) scale(1.01);}
.flowmap__hub-wrap{ display: flex; align-items: center; justify-content: center; }
.flowmap__hub{
  position: relative; width: 250px; height: 250px; border-radius: 26px;
  background: linear-gradient(180deg, #1f355a 0%, var(--hub) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 42px rgba(0,0,0,0.34), 0 0 0 12px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.20);
  overflow: hidden; animation: hub-glow 3.4s ease-in-out infinite; z-index: 3;
}
@keyframes hub-glow{
  0%,100%{box-shadow:0 18px 42px rgba(0,0,0,0.34),0 0 0 12px rgba(255,255,255,0.05),0 0 32px rgba(139,92,246,0.40),inset 0 1px 0 rgba(255,255,255,0.20);}
  50%{box-shadow:0 24px 54px rgba(0,0,0,0.38),0 0 0 13px rgba(255,255,255,0.06),0 0 48px rgba(59,130,246,0.66),inset 0 1px 0 rgba(255,255,255,0.24);}
}
.flowmap__hub-inner{position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #f8fbff; text-align: center; padding: 18px;}
.flowmap__hub-title{ font-weight: 800; font-size: 22px; }
.flowmap__hub-sub  { font-size: 14px; color: #d0dcf5; }
.flowmap-lines{position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; width: 100%; height: 100%;}
.flowline-base{fill: none; stroke: var(--line-base); stroke-width: 1.1; stroke-linecap: round; filter: none;}
.flowline-comet{fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 88 260; animation: comet-move 6.5s linear infinite; filter: url(#neon-glow); opacity: 1;}
@keyframes comet-move{0%{ stroke-dashoffset: 0; opacity:0;}10%{opacity:1;}80%{opacity:1;}100%{ stroke-dashoffset: -480; opacity:0;}}
@media (max-width: 1100px){
  .flowmap{grid-template-columns:1fr; column-gap: 0; row-gap: 28px; justify-items:center;}
  .flowmap__col{grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-rows: auto; justify-items:center;}
  .flowmap__hub{ width:230px; height:230px; }
}

/* =========================================================
   11) FAQ
   ========================================================= */
.section--faq{background: transparent; color: var(--text-primary); padding: 75px 0 75px;}
.section--faq .section__lead{color: var(--text-secondary);}
.faq-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px 28px; margin-top:20px;}
.faq-col{display:flex; flex-direction:column; gap:12px;}
.faq-item{
  border:1px solid #e5e8f0;
  border-radius:15px;
  background:#ffffff;
  padding:14px 16px;
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.faq-item summary{
  cursor:pointer; list-style:none; position:relative;
  padding-right:28px; font-weight:700; color: var(--text-primary); line-height:1.5;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; position:absolute; right:4px; top:2px;
  font-weight:700; color: var(--text-secondary); transition:transform .2s ease, color .2s ease;
}
.faq-item[open] summary::after{content:"−"; color: var(--link);}
.faq-body{margin-top:10px; color: var(--text-secondary); line-height:1.6; font-weight:500;}
.faq-item:hover{border-color: rgba(19,78,205,0.25); box-shadow:0 12px 28px rgba(15,23,42,0.10); transform: translateY(-1px);}
@media (prefers-reduced-motion: reduce){.faq-item,.faq-item summary::after{transition:none;}}