/* ============================================================
   GRANDO INVEST — Rebrand 2026
   Design system: corporate navy + bright blue, contrast mix
   ============================================================ */

:root {
  /* Brand colors (derived from logo) */
  --navy-900: #060f26;
  --navy-800: #0a1733;
  --navy-700: #0e2350;
  --navy-600: #143169;
  --blue:     #1c8ad0;
  --blue-2:   #2ba0e0;
  --blue-light: #58bbec;
  --gold:     #e6b84b;

  --bg:        #ffffff;
  --bg-soft:   #f4f7fb;
  --bg-soft-2: #eaf1f9;
  --ink:       #0a1733;
  --ink-soft:  #43546f;
  --line:      #dfe7f1;
  --white:     #ffffff;

  --grad-blue: linear-gradient(135deg, #1c8ad0 0%, #2ba0e0 50%, #58bbec 100%);
  --grad-navy: linear-gradient(160deg, #0a1733 0%, #0e2350 60%, #143169 100%);

  --radius:   18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 4px 18px rgba(10,23,51,.08);
  --shadow:    0 18px 50px rgba(10,23,51,.14);
  --shadow-blue: 0 18px 44px rgba(28,138,208,.35);

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  font-size: 17px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--blue); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--navy-600); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { position: relative; }
.section-pad { padding: clamp(64px, 9vw, 130px) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--blue); display: inline-block;
}
.eyebrow.center { justify-content: center; }

h1,h2,h3,h4 { line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.h-display { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2.title { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-soft); max-width: 60ch; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

.grad-text {
  background: var(--grad-blue);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn-primary { background: var(--grad-blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 24px 54px rgba(28,138,208,.5); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background: #fff; color: var(--navy-800); transform: translateY(-3px); }
.btn-dark { background: var(--navy-800); color: #fff; }
.btn-dark:hover { background: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-outline { border: 1.5px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--navy-900);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.hide { opacity: 0; visibility: hidden; }
.loader-globe {
  width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid rgba(88,187,236,.25);
  border-top-color: var(--blue-light);
  border-right-color: var(--blue);
  animation: spin 1s linear infinite;
}
.loader-text { color: #fff; font-weight: 800; letter-spacing: .3em; font-size: 13px; text-transform: uppercase; opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 18px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 30px rgba(10,23,51,.08);
  padding: 11px 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; z-index: 2; }
.brand img { height: 56px; width: auto; transition: height .4s var(--ease); }
.header.scrolled .brand img { height: 46px; }
/* logo color swap: dark logo by default needs light header; on transparent dark hero use white */
.brand .logo-dark { display: none; }
.brand .logo-light { display: block; }
.header.scrolled .brand .logo-dark { display: block; }
.header.scrolled .brand .logo-light { display: none; }

.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu > li > a {
  position: relative; padding: 10px 16px; font-weight: 600; font-size: 15px;
  color: #fff; transition: color .3s; border-radius: 10px;
}
.header.scrolled .nav-menu > li > a { color: var(--ink); }
.nav-menu > li > a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-menu > li > a:hover::after { transform: scaleX(1); }
.nav-menu > li > a:hover { color: var(--blue); }

/* dropdown */
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px);
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px; min-width: 230px; opacity: 0; visibility: hidden;
  transition: opacity .3s, transform .3s var(--ease), visibility .3s;
  border: 1px solid var(--line);
}
.has-drop:hover .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop a {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
  font-weight: 600; font-size: 14.5px; color: var(--ink); transition: background .25s, color .25s, padding .25s;
}
.drop a:hover { background: var(--bg-soft); color: var(--blue); padding-left: 20px; }
.drop a .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-blue); flex: none; }

.nav-right { display: flex; align-items: center; gap: 14px; z-index: 2; }

/* language switcher */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 100px;
  font-weight: 700; font-size: 13px; color: #fff; border: 1.5px solid rgba(255,255,255,.35);
  text-transform: uppercase; transition: .3s;
}
.header.scrolled .lang-btn { color: var(--ink); border-color: var(--line); }
.lang-btn:hover { border-color: var(--blue); color: var(--blue); }
.lang-btn svg { width: 14px; height: 14px; transition: transform .3s; }
.lang.open .lang-btn svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; background: #fff;
  border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line);
  padding: 7px; min-width: 140px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: .3s var(--ease);
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--ink); transition: background .25s;
}
.lang-menu button:hover { background: var(--bg-soft); }
.lang-menu button.active { background: var(--bg-soft-2); color: var(--blue); }
.lang-menu button .flag { font-size: 16px; }

/* burger */
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; position: relative; z-index: 2; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2.4px; background: #fff; border-radius: 3px; transition: .35s var(--ease); }
.header.scrolled .burger span { background: var(--ink); }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
body.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); background: #fff; }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); background: #fff; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: var(--grad-navy); color: #fff; overflow: hidden; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 78% 30%, rgba(43,160,224,.28), transparent 45%),
    radial-gradient(circle at 12% 80%, rgba(28,138,208,.22), transparent 42%);
}
/* animated grid */
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(88,187,236,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(88,187,236,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 70% 50%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 70% 50%, #000 10%, transparent 70%);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 90px; }
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero .lead { color: rgba(255,255,255,.78); margin-bottom: 34px; max-width: 52ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-tags { display: flex; gap: 26px; margin-top: 46px; flex-wrap: wrap; }
.hero-tag .num { font-size: 2.1rem; font-weight: 800; }
.hero-tag .lbl { font-size: 13px; color: rgba(255,255,255,.6); letter-spacing: .04em; }

/* globe visual */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.world-map { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.world-map::before { content:""; position:absolute; inset:-6% -2%; border-radius:50%; pointer-events:none;
  background: radial-gradient(60% 60% at 52% 38%, rgba(43,160,224,.28), transparent 70%); filter: blur(8px); }
.wm-svg { width: 100%; height: auto; display: block; overflow: visible; position: relative; z-index: 1; }
.world-dots circle { r: 2.2px; fill: rgba(96,182,236,.42); }
.wm-arc { stroke: url(#wmarc); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 5 8; opacity: .85; animation: wm-flow 1.5s linear infinite; }
@keyframes wm-flow { to { stroke-dashoffset: -39; } }
.wm-travel { fill: #eaf7ff; filter: drop-shadow(0 0 5px #7fd0f5); }
.wm-ring { fill: none; stroke: rgba(120,205,250,.6); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: wm-ping 2.8s ease-out infinite; }
.wm-ring.main { stroke: rgba(245,205,110,.75); }
@keyframes wm-ping { 0% { transform: scale(.5); opacity: .9; } 70%,100% { transform: scale(2.1); opacity: 0; } }
.wm-node { fill: var(--blue-light); }
.wm-node.main { fill: var(--gold); r: 5px; filter: drop-shadow(0 0 6px rgba(245,205,110,.8)); }
@media (prefers-reduced-motion: reduce) { .wm-arc, .wm-travel, .wm-ring { animation: none; } }
.float-card {
  position: absolute; z-index: 6; background: rgba(13,30,66,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(120,190,235,.28); border-radius: 16px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.4);
  animation: float 5s ease-in-out infinite; white-space: nowrap;
}
.float-card .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--grad-blue); display: grid; place-items: center; flex: none; }
.float-card .ic svg { width: 20px; height: 20px; color: #fff; }
.float-card .t { font-weight: 800; font-size: 15px; line-height: 1.1; }
.float-card .s { font-size: 12px; color: rgba(255,255,255,.65); }
.float-card.fc1 { top: 6%; left: -6%; }
.float-card.fc2 { bottom: 12%; right: -8%; animation-delay: 1.6s; }
.float-card.fc3 { bottom: -2%; left: 8%; animation-delay: .8s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.5); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-cue .mouse { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.4); border-radius: 14px; position: relative; }
.scroll-cue .mouse::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 7px; border-radius: 3px; background: #fff; animation: wheel 1.6s ease infinite; }
@keyframes wheel { 0% { opacity: 0; top: 6px; } 40% { opacity: 1; } 80% { opacity: 0; top: 16px; } }

/* wave divider */
.wave-divider { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 1; }
.wave-divider svg { width: 100%; height: 90px; display: block; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal].in { transform: none; }
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
[data-delay="3"] { transition-delay: .3s; }
[data-delay="4"] { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  * { animation: none !important; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px); align-items: center; }
.about-media { position: relative; isolation: isolate; }
.about-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; height: 520px; object-fit: cover; }
.about-media .badge {
  position: absolute; bottom: -28px; left: -28px; background: var(--grad-navy); color: #fff;
  border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow); text-align: center;
}
.about-media .badge .big { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.about-media .badge .sm { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 6px; }
.about-media .deco { position: absolute; top: -24px; right: -24px; width: 110px; height: 110px; border-radius: 24px; background: var(--grad-blue); opacity: .15; z-index: -1; }
/* ===== About: supply-chain animation ===== */
.about-visual { position: relative; width: 100%; height: clamp(380px, 48vw, 540px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); isolation: isolate;
  background: linear-gradient(160deg, #0a1733 0%, #0e2350 60%, #143169 100%); }
.about-visual::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(120,190,235,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,190,235,.06) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 82%); mask-image: radial-gradient(circle at 50% 45%, #000, transparent 82%); }
.about-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 70% 22%, rgba(43,160,224,.25), transparent 55%); }
.chain-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.cn-track { fill: none; stroke: rgba(120,190,235,.16); stroke-width: 2.5; }
.cn-flow { fill: none; stroke: url(#cng); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 9 14; animation: cn-flow 1.3s linear infinite; }
@keyframes cn-flow { to { stroke-dashoffset: -46; } }
.cn-disc { fill: #0c1f43; stroke: rgba(120,205,250,.5); stroke-width: 1.5; }
.cn-ring { fill: none; stroke: rgba(120,205,250,.55); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cn-ping 3s ease-out infinite; }
@keyframes cn-ping { 0% { transform: scale(.62); opacity: .9; } 70%,100% { transform: scale(1.5); opacity: 0; } }
.cn-ico { fill: none; stroke: #cfeaff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cn-num { fill: var(--blue-light); font-family: var(--font); font-weight: 800; font-size: 13px; }
.cn-label { fill: #e7f2ff; font-family: var(--font); font-weight: 700; font-size: 16px; }
.cn-cargo { filter: drop-shadow(0 0 7px #7fd0f5); }
@media (prefers-reduced-motion: reduce) { .cn-flow, .cn-ring, .cn-cargo { animation: none; } }
.value-list { margin-top: 30px; display: grid; gap: 16px; }
.value-item { display: flex; gap: 16px; align-items: flex-start; }
.value-item .vic { width: 46px; height: 46px; border-radius: 13px; background: var(--bg-soft-2); color: var(--blue); display: grid; place-items: center; flex: none; transition: .35s var(--ease); }
.value-item:hover .vic { background: var(--grad-blue); color: #fff; transform: rotate(-6deg) scale(1.05); }
.value-item .vic svg { width: 22px; height: 22px; }
.value-item h4 { font-size: 1.08rem; margin-bottom: 3px; }
.value-item p { font-size: 14.5px; color: var(--ink-soft); }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--grad-navy); color: #fff; overflow: hidden; }
.stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(43,160,224,.25), transparent 50%); }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; position: relative; }
.stat { text-align: center; }
.stat .ic { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; transition: .4s var(--ease); }
.stat:hover .ic { background: var(--grad-blue); transform: translateY(-6px); }
.stat .ic svg { width: 28px; height: 28px; color: var(--blue-light); }
.stat:hover .ic svg { color: #fff; }
.stat .num { font-size: clamp(2.2rem,4vw,3rem); font-weight: 800; line-height: 1; }
.stat .num .suf { color: var(--blue-light); }
.stat .lbl { font-size: 13.5px; color: rgba(255,255,255,.65); margin-top: 8px; letter-spacing: .03em; }

/* ============================================================
   PRODUCTS
   ============================================================ */
.products { background: var(--bg-soft); }
.prod-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 50px; flex-wrap: wrap; }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.prod-card {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 380px;
  display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  isolation: isolate; background: var(--navy-800);
}
.prod-card:nth-child(4), .prod-card:nth-child(5) { grid-column: span 1; }
.prod-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.prod-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,15,38,.92) 8%, rgba(6,15,38,.45) 50%, rgba(6,15,38,.15) 100%); transition: background .5s; }
.prod-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.prod-card:hover img { transform: scale(1.08); }
.prod-card:hover::after { background: linear-gradient(to top, rgba(8,30,70,.95) 10%, rgba(28,138,208,.5) 60%, rgba(28,138,208,.12) 100%); }
.prod-body { padding: 28px; width: 100%; }
.prod-body .num { font-size: 13px; color: var(--blue-light); font-weight: 700; letter-spacing: .1em; }
.prod-body h3 { font-size: 1.5rem; margin: 8px 0 10px; }
.prod-body p { font-size: 14.5px; color: rgba(255,255,255,.8); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .5s; }
.prod-card:hover .prod-body p { max-height: 120px; opacity: 1; margin-bottom: 16px; }
.prod-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #fff; }
.prod-link svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.prod-card:hover .prod-link svg { transform: translateX(5px); }

/* ============================================================
   COVERAGE / MAP
   ============================================================ */
.coverage { background: var(--navy-900); color: #fff; overflow: hidden; }
.coverage::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 120%, rgba(28,138,208,.28), transparent 55%); }
.cov-inner { position: relative; text-align: center; }
.cov-map { position: relative; margin-top: 40px; }
.cov-map svg { width: 100%; height: auto; max-height: 520px; }
.cov-map .dot { fill: var(--blue-light); animation: pulse-dot 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cov-map .dot:nth-child(2n) { animation-delay: .6s; fill: var(--blue); }
.cov-map .dot:nth-child(3n) { animation-delay: 1.2s; fill: var(--gold); }
@keyframes pulse-dot { 0%,100% { opacity: .55; transform: scale(.8);} 50% { opacity: 1; transform: scale(1.5);} }
.cov-map .ships use { filter: drop-shadow(0 0 4px rgba(120,205,250,.85)); }
@media (prefers-reduced-motion: reduce) { .cov-map .ships { display: none; } }
.cov-legend { display: flex; justify-content: center; gap: 36px; margin-top: 36px; flex-wrap: wrap; }
.cov-legend .it { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.7); }
.cov-legend .it b { color: #fff; font-size: 1.6rem; font-weight: 800; }

/* ============================================================
   BENEFITS
   ============================================================ */
.ben-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.ben-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px;
  position: relative; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.ben-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-blue); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.ben-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.ben-card:hover::before { transform: scaleY(1); }
.ben-card .bnum { font-size: 3rem; font-weight: 800; color: var(--bg-soft-2); line-height: 1; position: absolute; top: 18px; right: 24px; transition: color .4s; }
.ben-card:hover .bnum { color: var(--blue-light); }
.ben-card .bic { width: 54px; height: 54px; border-radius: 15px; background: var(--grad-navy); color: #fff; display: grid; place-items: center; margin-bottom: 20px; transition: transform .4s var(--ease); }
.ben-card:hover .bic { transform: rotate(-8deg) scale(1.06); }
.ben-card .bic svg { width: 26px; height: 26px; }
.ben-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.ben-card p { color: var(--ink-soft); font-size: 15px; }

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta { background: var(--grad-blue); color: #fff; overflow: hidden; }
.cta::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%); }
.cta-inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.cta h2 { color: #fff; font-size: clamp(2rem,4vw,3.1rem); margin-bottom: 16px; }
.cta p { color: rgba(255,255,255,.9); margin-bottom: 28px; }
.cta-points { display: grid; gap: 14px; }
.cta-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.cta-points svg { width: 22px; height: 22px; flex: none; }

/* form */
.form-card { background: #fff; border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow); color: var(--ink); }
.form-card h3 { margin-bottom: 6px; }
.form-card .sub { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--bg-soft); transition: .3s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(28,138,208,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.form-msg { display: none; padding: 14px 18px; border-radius: 12px; font-weight: 600; font-size: 14px; margin-top: 14px; }
.form-msg.ok { display: block; background: #e6f7ec; color: #1a7f43; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding: 80px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
.footer img.flogo { height: 56px; margin-bottom: 20px; }
.footer .fabout { font-size: 14.5px; max-width: 38ch; }
.footer h5 { color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
.footer .flink { display: block; padding: 7px 0; font-size: 14.5px; transition: color .3s, padding-left .3s; }
.footer .flink:hover { color: var(--blue-light); padding-left: 6px; }
.fcontact li { display: flex; gap: 12px; margin-bottom: 14px; font-size: 14.5px; }
.fcontact svg { width: 19px; height: 19px; color: var(--blue); flex: none; margin-top: 2px; }
.fsocial { display: flex; gap: 12px; margin-top: 22px; }
.fsocial a { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.06); display: grid; place-items: center; transition: .35s var(--ease); }
.fsocial a:hover { background: var(--grad-blue); transform: translateY(-4px); }
.fsocial svg { width: 19px; height: 19px; color: #fff; }
.foot-bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; font-size: 13.5px; flex-wrap: wrap; }

/* ============================================================
   INNER PAGE HEADER
   ============================================================ */
.page-hero { background: var(--grad-navy); color: #fff; padding: 170px 0 90px; position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 0%, rgba(43,160,224,.28), transparent 45%); }
.page-hero .hero-grid { opacity:.3; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem,5vw,3.6rem); margin-bottom: 16px; }
.page-hero .lead { color: rgba(255,255,255,.78); }
.breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 22px; position: relative; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: .5; }

/* product detail */
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pd-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; height: 460px; object-fit: cover; }
.pd-feature { display: grid; gap: 22px; margin-top: 10px; }
.pd-feature .pf { display: flex; gap: 16px; }
.pd-feature .pf .pfic { width: 48px; height: 48px; border-radius: 13px; background: var(--bg-soft-2); color: var(--blue); display: grid; place-items: center; flex: none; }
.pd-feature .pf .pfic svg { width: 22px; height: 22px; }
.pd-feature .pf h4 { font-size: 1.1rem; margin-bottom: 4px; }
.pd-feature .pf p { font-size: 14.5px; color: var(--ink-soft); }

.assort { background: var(--bg-soft); }
.assort-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.assort-card { background: #fff; border-radius: var(--radius); padding: 28px; text-align: center; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s; }
.assort-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.assort-card img { height: 90px; width: auto; margin: 0 auto 16px; object-fit: contain; transition: transform .4s var(--ease); }
.assort-card:hover img { transform: scale(1.1) rotate(-4deg); }
.assort-card h4 { font-size: 1.05rem; }

/* contacts */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: start; }
.contact-info { display: grid; gap: 18px; }
.ci-card { display: flex; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: .4s var(--ease); }
.ci-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-4px); }
.ci-card .ciic { width: 52px; height: 52px; border-radius: 14px; background: var(--grad-blue); color: #fff; display: grid; place-items: center; flex: none; }
.ci-card .ciic svg { width: 24px; height: 24px; }
.ci-card h4 { font-size: 1.05rem; margin-bottom: 5px; }
.ci-card p, .ci-card a { color: var(--ink-soft); font-size: 14.5px; }
.ci-card a:hover { color: var(--blue); }

/* ===== Facilities / objects (immersive) ===== */
.objects { background: var(--bg-soft); }
.obj-tabswrap { display: flex; justify-content: center; margin-bottom: 38px; }
.obj-tabs { display: inline-flex; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 100px; box-shadow: var(--shadow-sm); }
.obj-tab { padding: 12px 38px; border-radius: 100px; font-weight: 800; font-size: 16px; letter-spacing: .06em; color: var(--ink-soft); transition: color .3s, background .3s, box-shadow .3s; }
.obj-tab.active { background: var(--grad-navy); color: #fff; box-shadow: var(--shadow-blue); }
.obj-panel { display: none; }
.obj-panel.active { display: block; animation: obj-fade .5s var(--ease); }
@keyframes obj-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.obj-show { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); min-height: clamp(440px, 56vw, 600px); isolation: isolate; background: var(--navy-800); }
.obj-slides { position: absolute; inset: 0; z-index: 0; }
.obj-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.obj-slide.active { opacity: 1; }
.obj-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obj-slide.active img { animation: obj-kb 7s ease-out both; }
@keyframes obj-kb { from { transform: scale(1.04); } to { transform: scale(1.16); } }
.obj-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(95deg, rgba(6,15,38,.92) 0%, rgba(6,15,38,.72) 30%, rgba(6,15,38,.2) 58%, rgba(6,15,38,0) 80%),
              linear-gradient(to top, rgba(6,15,38,.7) 0%, transparent 46%); }
.obj-top { position: absolute; top: 20px; left: 24px; right: 24px; z-index: 5; display: flex; justify-content: space-between; align-items: center; }
.obj-counter { color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.obj-counter b { font-size: 22px; font-weight: 800; }
.obj-counter i { opacity: .65; font-style: normal; margin-left: 5px; }
.obj-dots { display: flex; gap: 7px; }
.obj-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: width .35s var(--ease), background .35s; }
.obj-dots span.active { width: 26px; border-radius: 5px; background: #fff; }
.obj-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; pointer-events: auto; }
.obj-arrows { display: flex; gap: 10px; }
.obj-arrows button { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.34); color: #fff; display: grid; place-items: center; transition: background .3s, border-color .3s, transform .3s; }
.obj-arrows button:hover { background: var(--blue); border-color: var(--blue); transform: scale(1.08); }
.obj-arrows svg { width: 22px; height: 22px; }
.obj-overlay { position: absolute; left: 0; bottom: 0; z-index: 4; max-width: min(540px, 74%); padding: 34px 38px; color: #fff; pointer-events: none; }
.obj-overlay a { pointer-events: auto; }
.obj-overlay .obj-loc { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 13px; cursor: pointer; transition: color .25s; }
.obj-overlay .obj-loc:hover { color: #fff; }
.obj-overlay .obj-loc .ext { width: 13px; height: 13px; opacity: .8; }
.obj-legal { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: rgba(255,255,255,.6); }
.obj-legal svg { width: 14px; height: 14px; flex: none; }
.obj-overlay .obj-loc svg { width: 15px; height: 15px; }
.obj-overlay h3 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: #fff; line-height: 1.04; }
.obj-overlay h3 .obj-sub { display: block; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.72); letter-spacing: .02em; margin-top: 8px; }
.obj-overlay > p { color: rgba(255,255,255,.86); font-size: 15px; margin: 14px 0 18px; max-width: 46ch; }
.obj-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.obj-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 100px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); font-size: 13px; font-weight: 600; }
.obj-pill svg { width: 16px; height: 16px; }
.obj-pill.lab { background: rgba(230,184,75,.95); color: #3a2a06; border-color: transparent; box-shadow: 0 8px 22px rgba(230,184,75,.4); }
.obj-film { position: absolute; right: 24px; bottom: 26px; z-index: 5; display: flex; gap: 8px; }
.obj-thumb { width: 66px; height: 46px; border-radius: 9px; overflow: hidden; border: 2px solid transparent; opacity: .55; transition: opacity .3s, border-color .3s, transform .3s; cursor: pointer; padding: 0; }
.obj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obj-thumb.active { opacity: 1; border-color: #fff; }
.obj-thumb:hover { opacity: 1; transform: translateY(-3px); }
@media (max-width: 860px) {
  .obj-show { min-height: 540px; }
  .obj-overlay { max-width: none; right: 0; padding: 26px 24px; }
  .obj-film { display: none; }
  .obj-veil { background: linear-gradient(to top, rgba(6,15,38,.94) 4%, rgba(6,15,38,.45) 46%, rgba(6,15,38,0) 78%); }
  .obj-tab { padding: 11px 28px; font-size: 15px; }
}
@media (max-width: 520px) {
  .obj-show { min-height: 470px; }
  .obj-overlay > p { display: none; }
  .obj-arrows button { width: 40px; height: 40px; }
}
@media (hover: none) { .obj-slide.active img { animation: none; } }


/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---------- Ultra-wide / large monitors (≥1600px) ---------- */
@media (min-width: 1600px) {
  :root { --maxw: 1360px; }
  body { font-size: 18px; }
  .hero-visual { min-height: 560px; }
}
@media (min-width: 1920px) {
  :root { --maxw: 1500px; }
}

/* ---------- Small desktop / large laptop (≤1280px) ---------- */
@media (max-width: 1280px) {
  :root { --maxw: 1120px; }
}

/* ---------- Laptop / tablet landscape (≤1024px) ---------- */
@media (max-width: 1024px) {
  .container { padding: 0 22px; }
  .hero-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 120px; text-align: center; }
  .hero-copy .eyebrow, .hero-actions, .hero-tags { justify-content: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-visual { min-height: 380px; order: -1; }
  .globe-wrap { width: min(360px, 70%); }
  .stats-grid { grid-template-columns: repeat(3,1fr); gap: 40px 20px; }
  .stats-grid .stat:nth-child(4), .stats-grid .stat:nth-child(5) { grid-column: span 1; }
  .prod-grid { grid-template-columns: repeat(2,1fr); }
  .cta-inner, .about-grid, .pd-grid, .contact-grid { grid-template-columns: 1fr; }
  .pd-grid { gap: 40px; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .assort-grid { grid-template-columns: repeat(2,1fr); }
  .about-media img { height: 420px; }
  .prod-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Nav collapses to burger early (≤1024px) ---------- */
@media (max-width: 1024px) {
  .nav-menu, .nav-right .btn { display: none; }
  .burger { display: block; }
  .nav-menu {
    position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center;
    background: var(--grad-navy); gap: 2px; padding: 92px 20px 40px; display: none;
    width: 100%; max-width: 100vw; overflow-y: auto;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .header, body.menu-open .header.scrolled {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: transparent; box-shadow: none; transition: none !important;
  }
  body.menu-open .brand .logo-dark { display: none; }
  body.menu-open .brand .logo-light { display: block; }
  body.menu-open .lang-btn { color: #fff; border-color: rgba(255,255,255,.35); }
  body.menu-open .nav-menu { display: flex; }
  .nav-menu > li { width: 100%; text-align: center; }
  .nav-menu > li > a { color: #fff; font-size: 20px; font-weight: 700; padding: 15px 10px; display: block; }
  .nav-menu > li > a::after { display: none; }
  .header.scrolled .nav-menu > li > a { color: #fff; }
  .has-drop .drop { display: none; }
  .header.scrolled .lang-btn { color: #fff; border-color: rgba(255,255,255,.35); }
}

/* ---------- Tablet portrait (≤860px) ---------- */
@media (max-width: 860px) {
  .section-pad { padding: clamp(56px, 8vw, 90px) 0; }
  .pd-media img { height: 360px; }
}

/* ---------- Mobile menu + single column (≤760px) ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-menu, .nav-right .btn { display: none; }
  .burger { display: block; }
  .nav-menu {
    position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center;
    background: var(--grad-navy); gap: 2px; padding: 92px 20px 40px; display: none;
    width: 100%; max-width: 100vw; overflow-y: auto;
  }
  body.menu-open { overflow: hidden; }
  /* backdrop-filter on a scrolled header turns it into a containing block for
     position:fixed children — kill it while the menu is open so the overlay
     covers the full viewport instead of just the header height */
  body.menu-open .header, body.menu-open .header.scrolled {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: transparent; box-shadow: none; transition: none !important;
  }
  body.menu-open .brand .logo-dark { display: none; }
  body.menu-open .brand .logo-light { display: block; }
  body.menu-open .lang-btn { color: #fff; border-color: rgba(255,255,255,.35); }
  body.menu-open .nav-menu { display: flex; }
  .nav-menu > li { width: 100%; text-align: center; }
  .nav-menu > li > a { color: #fff; font-size: 20px; font-weight: 700; padding: 15px 10px; display: block; }
  .nav-menu > li > a::after { display: none; }
  .header.scrolled .nav-menu > li > a { color: #fff; }
  /* hide products submenu on mobile — link goes to the section */
  .has-drop .drop { display: none; }
  .header.scrolled .lang-btn { color: #fff; border-color: rgba(255,255,255,.35); }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 34px 18px; }
  .prod-grid, .foot-grid, .assort-grid { grid-template-columns: 1fr; }
  .foot-grid > div:first-child { grid-column: auto; }
  .prod-card { min-height: 300px; }
  .prod-card .prod-body p { max-height: 120px; opacity: 1; margin-bottom: 14px; }
  .about-media .badge { left: 50%; transform: translateX(-50%); bottom: -24px; }
  .about-media img { height: 360px; }
  .hero-tags { gap: 22px; justify-content: center; }
  .float-card { display: none; }
  .float-card.fc2 { display: flex; right: 0; bottom: 4%; }
  .cov-legend { gap: 22px; }
  .foot-bottom { flex-direction: column; }
  .form-card { padding: 28px 22px; }
}

/* ---------- Large phones (≤520px) ---------- */
@media (max-width: 520px) {
  .container { padding: 0 18px; }
  .h-display { font-size: clamp(2rem, 9vw, 2.7rem); }
  h2.title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .hero { min-height: auto; padding-bottom: 70px; }
  .hero-inner { padding-top: 110px; }
  .globe-wrap { width: min(280px, 78%); }
  .float-card.fc2 { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 30px 14px; }
  .hero-tags { gap: 16px 26px; }
  .hero-tag .num { font-size: 1.7rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .ci-card { padding: 18px; gap: 14px; }
  .ci-card .ciic { width: 46px; height: 46px; }
  .ben-card { padding: 26px 22px; }
  .ben-card .bnum { font-size: 2.4rem; top: 14px; right: 18px; }
  .pd-media img, .about-media img { height: 280px; }
  .btn { padding: 14px 24px; font-size: 14px; }
  .scroll-cue { display: none; }
}

/* ---------- Small phones (≤380px) ---------- */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .container { padding: 0 14px; }
  .brand img { height: 44px; }
  .stats-grid { grid-template-columns: 1fr; }
  .hero-tags { flex-direction: column; gap: 16px; align-items: center; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .lang-btn { padding: 7px 10px; }
}

/* ---------- Landscape phones (short height) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 110px 0 60px; }
  .hero-inner { grid-template-columns: 1.1fr .9fr; text-align: left; padding-top: 0; }
  .hero-copy .eyebrow, .hero-actions, .hero-tags { justify-content: flex-start; }
  .hero-visual { order: 0; min-height: 240px; }
  .scroll-cue { display: none; }
  .nav-menu { justify-content: flex-start; padding-top: 70px; }
}

/* ---------- Touch devices: show product descriptions without hover ---------- */
@media (hover: none) {
  .prod-card .prod-body p { max-height: 120px; opacity: 1; }
}

/* ============================================================
   SERVICES (animated full-cycle band)
   ============================================================ */
.services { position: relative; overflow: hidden; background: var(--grad-navy); color: #fff; }
.services .title { color: #fff; }
.services .lead { color: rgba(255,255,255,.72); }
.services .eyebrow { color: var(--blue-light); }
.services .eyebrow::before { background: var(--blue-light); }
.services .container { position: relative; z-index: 2; }
.svc-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 1; }
.svc-orb.a { width: 440px; height: 440px; background: radial-gradient(circle, #1c8ad0, transparent 70%); opacity: .5; top: -130px; left: -110px; animation: svcFloat 15s ease-in-out infinite; }
.svc-orb.b { width: 380px; height: 380px; background: radial-gradient(circle, #e6b84b, transparent 70%); opacity: .22; bottom: -150px; right: -90px; animation: svcFloat 19s ease-in-out infinite reverse; }
@keyframes svcFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }

/* ---- flow strip ---- */
.svc-flow { max-width: 860px; margin: 6px auto 18px; }
.svc-flow svg { width: 100%; height: auto; display: block; overflow: visible; }
.svc-baseline { stroke: rgba(255,255,255,.14); stroke-width: 2; }
.svc-flowline { stroke: var(--blue-light); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 14; animation: svcDash 1s linear infinite; }
@keyframes svcDash { to { stroke-dashoffset: -16; } }
.svc-node circle { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.26); stroke-width: 2; transition: stroke .4s; }
.svc-node .ic { color: #cfe6f6; }
.svc-flabel { fill: rgba(255,255,255,.78); font: 600 14px var(--font); text-anchor: middle; }
.svc-mover { animation: svcMove 5.5s cubic-bezier(.55,.1,.45,.9) infinite; }
@keyframes svcMove { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(820px); opacity: 0; } }
.svc-flowcap { text-align: center; color: rgba(255,255,255,.6); font-size: 14px; letter-spacing: .02em; margin-bottom: 48px; }

/* ---- cards ---- */
.svc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.svc-card { position: relative; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 38px 34px; overflow: hidden; backdrop-filter: blur(6px); transition: transform .5s var(--ease), border-color .5s, background .5s; }
.svc-card::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--grad-blue); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.svc-card:hover { transform: translateY(-8px); background: rgba(255,255,255,.07); border-color: rgba(88,187,236,.42); }
.svc-card:hover::after { transform: scaleX(1); }
.svc-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.svc-ic { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 18px; background: var(--grad-blue); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(28,138,208,.35); transition: transform .5s var(--ease); }
.svc-card:hover .svc-ic { transform: rotate(-6deg) scale(1.07); }
.svc-ic svg { width: 30px; height: 30px; }
.svc-head h3 { font-size: 1.4rem; line-height: 1.2; margin: 0; }
.svc-sub { display: block; font-size: 12.5px; font-weight: 700; color: var(--blue-light); text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; }
.svc-card > p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
.svc-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.svc-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: rgba(255,255,255,.86); }
.svc-list svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--blue-light); margin-top: 1px; }
.svc-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 24px; padding: 0; }
.svc-tags li { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 7px 14px; }
.svc-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue-light); }
.svc-link svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.svc-link:hover svg { transform: translateX(5px); }
@media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; } .svc-card { padding: 30px 24px; } .svc-flabel { font-size: 12px; } .svc-flowcap { font-size: 13px; } }

/* ============================================================
   GRINAI (light-green animated partner panel)
   ============================================================ */
.grinai { position: relative; --gl: #ffffff; background: #ffffff; }
.grin-panel { position: relative; overflow: hidden; border-radius: 30px; color: #fff; padding: 56px 58px; background: linear-gradient(150deg, #1c8a4e 0%, #2ea862 52%, #5cc78c 100%); box-shadow: 0 28px 66px rgba(31,138,78,.30); }
.grin-glow { position: absolute; top: -150px; right: -130px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); pointer-events: none; z-index: 1; animation: grinGlow 13s ease-in-out infinite; }
@keyframes grinGlow { 0%,100% { transform: translate(0,0); opacity: .85; } 50% { transform: translate(-34px,26px); opacity: 1; } }
.grin-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px); background-size: 24px 24px; pointer-events: none; z-index: 1; }
.grin-sheen { position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); transform: skewX(-18deg); pointer-events: none; z-index: 4; animation: grinSheen 7.5s ease-in-out infinite; }
@keyframes grinSheen { 0% { left: -60%; } 58%,100% { left: 135%; } }
/* swaying plant field */
.grin-field { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; z-index: 2; opacity: .2; pointer-events: none; }
.grin-field svg { width: 100%; height: 100%; display: block; }
.grin-stalk { transform-box: fill-box; transform-origin: 50% 100%; animation: grinPlantSway var(--dur,4s) ease-in-out infinite; animation-delay: var(--del,0s); }
@keyframes grinPlantSway { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.grin-panel-top, .grin-panel .eyebrow, .grin-h, .grin-lead, .grin-metrics, .grin-srv-row, .grin-adv, .grin-ctas, .grin-prodline { position: relative; z-index: 3; }
.grin-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; }
.grin-logo { display: inline-flex; align-items: center; gap: 13px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.grin-logo i { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.2); border-radius: 13px; color: #fff; }
.grin-logo i::after { content: ""; position: absolute; inset: 0; border-radius: 13px; border: 1.5px solid rgba(255,255,255,.55); animation: grinPulse 3s ease-out infinite; }
@keyframes grinPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.55); opacity: 0; } }
.grin-logo i svg { position: relative; width: 25px; height: 25px; }
.grin-logo b span { color: #e3fbec; }
.grin-trust { display: flex; flex-wrap: wrap; gap: 8px; }
.grin-trust span { font-size: 12px; font-weight: 700; letter-spacing: .03em; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.36); border-radius: 999px; padding: 6px 14px; cursor: help; }
.grin-panel .eyebrow { color: #fff; }
.grin-panel .eyebrow::before { background: #fff; }
.grin-h { font-size: clamp(1.8rem, 3.4vw, 2.55rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 0; max-width: 20ch; }
.grin-h::after { content: ""; display: block; width: 66px; height: 4px; border-radius: 4px; background: #fff; margin-top: 20px; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .25s; }
.grin-h.in::after { transform: scaleX(1); }
.grin-lead { color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.7; max-width: 66ch; margin: 22px 0 0; }
.grin-metrics { display: flex; gap: 56px; flex-wrap: wrap; padding: 30px 0; margin: 30px 0 34px; border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); }
.grin-metric b { display: block; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1; color: #fff; }
.grin-metric small { display: block; margin-top: 9px; font-size: 13.5px; color: rgba(255,255,255,.85); font-weight: 600; }
.grin-srv-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-bottom: 34px; }
.grin-srv { display: flex; gap: 16px; align-items: flex-start; }
.grin-srv .gic { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; display: grid; place-items: center; transition: background .4s var(--ease), transform .4s var(--ease); }
.grin-srv:hover .gic { background: rgba(255,255,255,.28); transform: translateY(-4px); }
.grin-srv .gic svg { width: 25px; height: 25px; }
.grin-srv h4 { font-size: 1.02rem; margin: 0 0 5px; color: #fff; }
.grin-srv p { font-size: 13.5px; color: rgba(255,255,255,.85); margin: 0; line-height: 1.55; }
.grin-adv { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.grin-adv span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 9px 16px; transition: border-color .3s, background .3s, transform .3s; }
.grin-adv span:hover { border-color: #fff; background: rgba(255,255,255,.24); transform: translateY(-2px); }
.grin-adv svg { width: 16px; height: 16px; color: #fff; flex: 0 0 auto; }
.grin-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
.grin-panel .btn-w { background: #fff; color: #1c7a45; }
.grin-panel .btn-w:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.grin-panel .btn-go { background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.grin-panel .btn-go:hover { background: rgba(255,255,255,.28); transform: translateY(-3px); }
.grin-panel .btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.grin-panel .btn-w:hover svg { transform: translate(3px,-3px); }
.grin-prodline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 28px; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.24); }
.grin-prodline > b { font-size: 13px; color: rgba(255,255,255,.8); font-weight: 700; letter-spacing: .02em; margin-right: 2px; }
.grin-prodline a.chip { font-size: 12.5px; font-weight: 700; color: #176b3c; background: #fff; border-radius: 999px; padding: 7px 14px; transition: transform .3s, background .3s; }
.grin-prodline a.chip:hover { transform: translateY(-2px); background: #eafff3; }
.grin-prodline a.allcat { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: #fff; }
.grin-prodline a.allcat svg { width: 16px; height: 16px; transition: transform .3s; }
.grin-prodline a.allcat:hover svg { transform: translateX(4px); }
@media (max-width: 860px) { .grin-panel { padding: 42px 28px; border-radius: 24px; } .grin-srv-row { grid-template-columns: 1fr; gap: 22px; } .grin-metrics { gap: 32px; } .grin-panel-top { flex-direction: column; align-items: flex-start; } .grin-ctas .btn { flex: 1 1 auto; justify-content: center; } .grin-prodline a.allcat { margin-left: 0; } }

/* --- grinai hero 2-col + brand emblem --- */
.grin-hero { position: relative; z-index: 3; display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: center; }
.grin-hero-l { min-width: 0; }
.grin-hero-r { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.grin-emblem { position: relative; width: clamp(210px, 21vw, 290px); aspect-ratio: 1; margin: 0 0 0 auto; }
.grin-emblem .ring { position: absolute; border-radius: 50%; }
.grin-emblem .ring.r1 { inset: 0; border: 1.5px dashed rgba(255,255,255,.42); animation: grinSpin 26s linear infinite; }
.grin-emblem .ring.r2 { inset: 11%; border: 1.5px solid rgba(255,255,255,.2); animation: grinSpin 20s linear infinite reverse; }
.grin-emblem .ring.r3 { inset: 22%; border: 1.5px dashed rgba(255,255,255,.32); animation: grinSpin 34s linear infinite; }
@keyframes grinSpin { to { transform: rotate(360deg); } }
.grin-emblem .ring .dot { position: absolute; top: -6px; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.85); }
.grin-emblem .ring.r3 .dot { background: #d8fbe6; }
.grin-emblem .core { position: absolute; inset: 33%; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.34); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.14); backdrop-filter: blur(2px); animation: grinCore 4.5s ease-in-out infinite; }
@keyframes grinCore { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.grin-emblem .core svg { width: 48%; height: 48%; color: #fff; }
.grin-certs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.grin-certs span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 12px; }
@media (max-width: 860px) { .grin-hero { grid-template-columns: 1fr; gap: 28px; } .grin-emblem { margin: 0 auto; width: 220px; } }

/* ============================================================
   LABORATORY (editorial rows + scalable strip + lightbox)
   ============================================================ */
.lab { background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); }
.lab-feature { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.lab-feature + .lab-feature { margin-top: 66px; }
.lab-feature.rev .lab-media { order: 2; }
.lab-media { position: relative; }
.lab-hero { position: relative; }
.shot-main { display: block; width: 100%; padding: 0; border: none; cursor: pointer; position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--bg-soft-2); }
.shot-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s var(--ease); }
.shot-main:hover img { transform: scale(1.07); }
.shot-mini { position: absolute; right: -16px; bottom: -26px; width: 42%; aspect-ratio: 4 / 3; border: 5px solid #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; padding: 0; background: var(--bg-soft-2); z-index: 2; }
.lab-feature.rev .shot-mini { right: auto; left: -16px; }
.shot-mini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.shot-mini:hover img { transform: scale(1.08); }
.lab-badge { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; gap: 8px; align-items: center; background: rgba(6,15,38,.6); backdrop-filter: blur(6px); color: #fff; font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-radius: 999px; pointer-events: none; }
.lab-badge svg { width: 16px; height: 16px; }
.lab-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 44px; }
.lab-strip .lab-thumb { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; cursor: pointer; border: none; padding: 0; background: var(--bg-soft-2); }
.lab-strip .lab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.lab-strip .lab-thumb:hover img { transform: scale(1.08); }
.lab-more .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6,15,38,.58); color: #fff; font-size: 1.05rem; font-weight: 800; }
.lab-tag { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.lab-body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 14px; letter-spacing: -.01em; }
.lab-body > p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; margin: 0 0 22px; max-width: 54ch; }
.lab-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.lab-pills span { display: inline-flex; gap: 9px; align-items: center; font-size: 13px; font-weight: 600; color: var(--navy-800); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; transition: border-color .3s, transform .3s; }
.lab-pills span:hover { border-color: var(--blue); transform: translateY(-2px); }
.lab-pills svg { width: 18px; height: 18px; color: var(--blue); flex: 0 0 auto; }
/* lightbox */
.lab-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(6,15,38,.9); backdrop-filter: blur(4px); padding: 32px; }
.lab-lightbox.open { display: flex; }
.lab-lightbox img { max-width: 88vw; max-height: 82vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.lab-lb-btn { position: absolute; border: none; background: rgba(255,255,255,.14); color: #fff; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .3s, transform .3s; }
.lab-lb-btn:hover { background: rgba(255,255,255,.26); }
.lab-lb-btn svg { width: 24px; height: 24px; }
.lab-lb-close { top: 24px; right: 26px; }
.lab-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lab-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lab-lb-prev:hover { transform: translateY(-50%) scale(1.08); }
.lab-lb-next:hover { transform: translateY(-50%) scale(1.08); }
.lab-lb-count { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
@media (max-width: 920px) { .lab-feature { grid-template-columns: 1fr; gap: 42px; } .lab-feature.rev .lab-media { order: 0; } }
@media (max-width: 760px) { .lab-lb-prev { left: 10px; } .lab-lb-next { right: 10px; } }


/* ============================================================
   ANALYSES CATALOG (lab)
   ============================================================ */
.an-panel { margin-top: 66px; padding-top: 54px; border-top: 1px solid var(--line); }
.an-wrap { display: grid; grid-template-columns: 270px 1fr; gap: 30px; margin-top: 34px; align-items: start; }
.an-cultures { display: flex; flex-direction: column; gap: 5px; max-height: 470px; overflow-y: auto; padding-right: 6px; }
.an-cultures::-webkit-scrollbar { width: 7px; }
.an-cultures::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.an-cult { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; border: none; background: transparent; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s; }
.an-cult:hover { background: var(--bg-soft); color: var(--navy-800); }
.an-cult.active { background: var(--grad-navy); color: #fff; box-shadow: 0 10px 24px rgba(10,23,51,.18); }
.an-cult .n { font-size: 12px; font-weight: 700; opacity: .65; background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px 8px; }
.an-cult:not(.active) .n { background: var(--bg-soft-2); color: var(--blue); opacity: 1; }
.an-stacks { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: var(--shadow); min-height: 320px; }
.an-stack { display: none; }
.an-stack.active { display: block; animation: anFade .35s var(--ease); }
@keyframes anFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.an-stack-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.an-stack-head h4 { font-size: 1.3rem; margin: 0; }
.an-stack-head .badge { font-size: 12.5px; font-weight: 700; color: var(--blue); background: var(--bg-soft-2); border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.an-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; }
.an-item .p { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--navy-800); }
.an-item .p::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; }
.an-item .ms { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.an-item .m { font-size: 11px; font-weight: 700; color: var(--blue); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; white-space: nowrap; font-style: normal; }
@media (max-width: 760px) { .an-wrap { grid-template-columns: 1fr; gap: 18px; } .an-cultures { flex-direction: row; flex-wrap: wrap; max-height: none; } .an-cult { background: var(--bg-soft); } .an-stacks { padding: 24px; } }

.form-msg.err { color:#c0392b; font-weight:600; margin-top:10px; }