/* ============================================================
   DATA HEALTH SOLUTIONS — main stylesheet
   Dark navy / teal-blue neon, cinematic pharma-tech aesthetic
   ============================================================ */

/* Registers --beam-a as a real interpolatable angle so every conic-gradient
   ring that references var(--beam-a) (the mobile hamburger ring, and the new
   always-on/hover neon rings below) actually rotates smoothly via the shared
   `spin` keyframes, instead of the gradient staying at a fixed angle. */
@property --beam-a{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

:root{
  --navy-deep:#050e24;
  --navy:#0a1a3d;
  --navy-mid:#0e2352;
  --navy-light:#132b63;
  --teal:#00d9c4;
  --blue:#0092e6;
  --ink:#eef3fb;
  --ink-dim:#aab8d6;
  --ink-faint:#7688ad;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --grad-accent:linear-gradient(95deg,var(--teal),var(--blue));
  --grad-accent-soft:linear-gradient(95deg,rgba(0,217,196,.16),rgba(0,146,232,.16));
  --shadow-glow:0 0 0 1px rgba(0,217,196,.18),0 18px 60px -20px rgba(0,146,232,.45);
  --radius:18px;
  --radius-sm:12px;
  --ff-head:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ease:cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--navy-deep);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--ff-head);margin:0;line-height:1.15;letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit;cursor:pointer}
section{position:relative}
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

::selection{background:rgba(0,217,196,.35);color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--navy-deep)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--teal),var(--blue));border-radius:10px}

/* ---------- i18n ----------
   Each page is now a real single-language file (only one language's
   [data-i18n] markup survives per document), so no show/hide toggle rule is
   needed any more -- this just sets the base display type per element. */
[data-i18n]{display:block}
span[data-i18n],strong[data-i18n],em[data-i18n]{display:inline}

/* ---------- ambient kinetic-grid canvas (fixed, sitewide) ---------- */
#kinetic-bg{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.6;
}
.bg-fade{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%,rgba(0,217,196,.14),transparent 60%),
    radial-gradient(ellipse 50% 35% at 100% 30%,rgba(0,146,232,.14),transparent 60%),
    linear-gradient(180deg,var(--navy-deep) 0%,var(--navy) 40%,var(--navy-deep) 100%);
}

/* ---------- section with the hero's banner photo behind it ----------
   Same dimmed/tinted photo treatment as .hero-bg-photo, but as pseudo-
   elements on the section itself (no extra markup needed) since it only
   ever needs to sit behind the section's own normal content, not behind
   extra layered canvases like the hero does. */
.section-banner-photo{position:relative;overflow:hidden;isolation:isolate}
.section-banner-photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../assets/img/hero-banner.jpg") center 35%/cover no-repeat;
  filter:brightness(.32) saturate(1.05);
}
.section-banner-photo::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(52% 62% at 82% 40%,rgba(0,146,232,.16) 0%,rgba(0,146,232,0) 68%),
    radial-gradient(38% 46% at 15% 65%,rgba(0,217,196,.14) 0%,rgba(0,217,196,0) 70%),
    linear-gradient(180deg,rgba(4,10,24,.35) 0%,rgba(4,10,24,.2) 45%,rgba(4,10,24,.8) 100%);
}
.section-banner-photo > *{position:relative;z-index:1}

/* ---------- plain light section background, no color cascade ----------
   Unlike .section-gray, this only swaps the section's own backdrop color --
   it never recolors headings/paragraphs/cards inside it. Use it behind a
   card (like .needs-wrap) that already carries its own opaque dark
   background and must look identical no matter what surrounds it. */
.section-light-bg{position:relative;background:linear-gradient(180deg,#f4f6fa 0%,#eaedf3 100%)}

/* ---------- gray section variant (visual rhythm between navy sections) ---------- */
.section-gray{
  position:relative;
  background:linear-gradient(180deg,#f4f6fa 0%,#eaedf3 100%);
  color:#1a2138;
}
.section-gray .kicker{color:#0092e6}
.section-gray .section-head h1,.section-gray .section-head h2,.section-gray h1,.section-gray h2,.section-gray h3{color:#0c1730}
.section-gray .section-head p,.section-gray p{color:#4b5674}
.section-gray .stat-card,.section-gray .why-card,.section-gray .step-card,.section-gray .split-card{
  background:rgba(12,23,48,.03);border-color:rgba(12,23,48,.1);
}
.section-gray .stat-card .lbl,.section-gray .why-card p,.section-gray .step-card p{color:#5a6685}
.section-gray .stat-card .num,.section-gray .why-card h4,.section-gray .step-card h4{color:#0c1730}
.section-gray .cap-chip{background:rgba(12,23,48,.04);border-color:rgba(12,23,48,.12);color:#1a2138}
.section-gray .sol-other-card{background:rgba(12,23,48,.03);border-color:rgba(12,23,48,.12);color:#1a2138}
.section-gray .sol-other-card:hover{border-color:rgba(0,146,232,.4);background:rgba(0,146,232,.06)}
.section-gray .chain-mini span{background:rgba(12,23,48,.04);border-color:rgba(12,23,48,.14);color:#3a4568}
.section-gray .divider-glow{opacity:.5}

/* ============ HEADER / NAV ============ */
header.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px 0;
  background:rgba(5,14,36,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
  transition:padding .35s var(--ease),background .35s var(--ease);
}
header.site-header.scrolled{padding:8px 0;background:rgba(5,14,36,.92)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:57px;width:auto;transition:height .3s var(--ease)}
header.site-header.scrolled .brand img{height:48px}

.header-actions{display:flex;align-items:center;gap:26px}

/* ---------- desktop nav (horizontal links — no hamburger on desktop) ---------- */
.desktop-nav{display:none}
@media (min-width:900px){
  .desktop-nav{display:flex;align-items:center;gap:30px}
  .desktop-nav a{
    position:relative;display:flex;align-items:center;gap:0;font-size:14px;font-weight:700;
    color:var(--ink-dim);padding:6px 0;transition:color .25s var(--ease);
  }
  .desktop-nav a::after{
    content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;
    background:var(--grad-accent);transition:right .3s var(--ease);
  }
  .desktop-nav a:hover,.desktop-nav a.active{color:#fff}
  .desktop-nav a:hover::after,.desktop-nav a.active::after{right:0}
  .header-actions .hamburger{display:none}

  /* "Soluções" hover dropdown, listing each solution sub-page */
  .nav-item-dropdown{position:relative}
  .nav-caret{width:11px;height:11px;margin-left:4px;flex-shrink:0;transition:transform .25s var(--ease)}
  .nav-item-dropdown:hover .nav-caret,.nav-item-dropdown:focus-within .nav-caret{transform:rotate(180deg)}
  .nav-dropdown-menu{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
    padding-top:16px;min-width:290px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
    z-index:60;
  }
  .nav-item-dropdown:hover .nav-dropdown-menu,
  .nav-item-dropdown:focus-within .nav-dropdown-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
  .nav-dropdown-card{
    background:var(--navy-light);border:1px solid var(--line);border-radius:14px;
    padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.4);
    display:flex;flex-direction:column;gap:2px;
  }
  .nav-dropdown-card a{
    position:static;display:block;padding:11px 16px;border-radius:9px;font-size:13.5px;font-weight:600;
    color:var(--ink-dim);white-space:nowrap;transition:background .2s,color .2s;
  }
  .nav-dropdown-card a::after{content:none}
  .nav-dropdown-card a:hover{background:rgba(0,217,196,.1);color:#fff}
}
@media (max-width:899px){
  .header-actions .btn-primary-desktop{display:none}
}

.lang-switch{
  display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;
  padding:3px;gap:2px;background:rgba(255,255,255,.03);
}
.lang-switch a{
  border:0;background:transparent;color:var(--ink-dim);font-size:12px;font-weight:700;
  letter-spacing:.06em;padding:6px 12px;border-radius:999px;transition:all .25s var(--ease);
  cursor:pointer;
}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.is-current{background:var(--grad-accent);color:#04121f}

/* hamburger — mobile only; desktop uses .desktop-nav horizontal links instead */
.hamburger{
  position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hamburger::before{
  content:"";position:absolute;inset:-2px;border-radius:50%;padding:1px;
  background:conic-gradient(from var(--beam-a,0deg),transparent 0 78%,var(--teal),var(--blue),transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 3.2s linear infinite;opacity:.9;
}
@keyframes spin{to{--beam-a:360deg}}
.hamburger span{position:absolute;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .25s var(--ease),background .3s}
.hamburger span:nth-child(1){transform:translateY(-6px)}
.hamburger span:nth-child(3){transform:translateY(6px)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(0) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(0) rotate(-45deg)}

/* full-screen nav overlay */
.nav-overlay{
  position:fixed;inset:0;z-index:200;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,60,90,.35),transparent 60%),rgba(3,9,22,.98);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s;
}
.nav-overlay.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.nav-overlay-inner{width:100%;max-width:640px;padding:0 24px;text-align:center;max-height:90vh;overflow-y:auto}
.nav-close{
  position:absolute;top:22px;right:clamp(20px,5vw,48px);width:48px;height:48px;border-radius:50%;z-index:5;
  border:1.5px solid rgba(0,217,196,.55);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.nav-close:hover{background:rgba(0,217,196,.14);transform:rotate(90deg)}
.nav-close svg{width:20px;height:20px;color:#fff;stroke:#fff}
.nav-list{display:flex;flex-direction:column;gap:6px}
.nav-list li{
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.nav-overlay.open .nav-list li{opacity:1;transform:translateY(0)}
.nav-list a{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--ff-head);font-size:clamp(22px,4.4vw,32px);font-weight:700;color:var(--ink);
  padding:12px 8px;position:relative;
}
.nav-list a .nav-ico{width:22px;height:22px;flex-shrink:0;opacity:.85}
.nav-list a .nav-ico svg{width:100%;height:100%;stroke:url(#navIconGrad)}
.nav-list a span.label{background:linear-gradient(95deg,#fff,#fff);background-clip:text;-webkit-background-clip:text}
.nav-list a:hover span.label,.nav-list a:focus span.label{
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-foot{margin-top:34px;display:flex;flex-direction:column;gap:14px;align-items:center}
.nav-foot .lang-switch{transform:scale(1.05)}

/* "Soluções" row in the mobile full-screen menu: the link still navigates
   to index.html#solucoes, and a separate toggle button expands the 5
   solution sub-links beneath it (mirrors the desktop hover-dropdown). */
.nav-item-row{display:flex;align-items:center;justify-content:center;gap:2px}
.nav-item-row .nav-list-link{padding-right:0}
.nav-subtoggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .25s var(--ease);
}
.nav-subtoggle:hover,.nav-subtoggle:focus-visible{background:rgba(0,217,196,.12)}
.nav-subtoggle svg{width:14px;height:14px;color:var(--ink-dim);stroke:var(--ink-dim);transition:transform .3s var(--ease)}
.nav-subtoggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-list .nav-sublist{
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease);
  display:flex;flex-direction:column;gap:2px;
}
.nav-item-mobile-drop.open .nav-sublist{margin:4px 0 2px}
.nav-list .nav-sublist a{
  display:block;padding:9px 10px;font-family:var(--ff-body,inherit);
  font-size:clamp(14px,3.6vw,16.5px);font-weight:600;color:var(--ink-dim);
}
.nav-list .nav-sublist a:hover,.nav-list .nav-sublist a:focus{color:#fff}

/* visually-hidden accessible label (kept in the layout for screen readers
   only) -- used for the mobile submenu toggle button above */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============ BUTTONS ============ */
.btn{
  --pad-y:14px;--pad-x:26px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--pad-y) var(--pad-x);border-radius:999px;font-weight:700;font-size:14.5px;
  letter-spacing:.01em;border:1px solid transparent;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);isolation:isolate;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad-accent);color:#04121f;box-shadow:0 10px 30px -10px rgba(0,180,220,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -10px rgba(0,180,220,.7)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:rgba(0,217,196,.5);background:rgba(0,217,196,.06)}

/* neon traveling beam (SVG stroke technique) */
.btn-neon{position:relative;border-radius:999px;color:var(--ink);background:rgba(255,255,255,.03)}
.btn-neon svg.beam{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.btn-neon svg.beam rect{
  fill:none;stroke:url(#beamGrad);stroke-width:1.6;
  stroke-dasharray:46 300;stroke-dashoffset:0;
  animation:beam-travel 2.6s linear infinite;
}
@keyframes beam-travel{to{stroke-dashoffset:-346}}
.btn-neon .label{position:relative;z-index:1;display:flex;align-items:center;gap:8px}

.btn-sm{--pad-y:10px;--pad-x:18px;font-size:13px}
.btn-block{width:100%}
.btn svg{width:16px;height:16px;flex-shrink:0}

/* Buttons default to white-space:nowrap (keeps short CTAs looking tight),
   but some contextual CTA labels are long (e.g. the solution-page CTAs,
   built from per-solution copy) and never fit on one line on a phone --
   nowrap then forced the button (and the whole page) wider than the
   viewport, pushing the header/menu off-screen. Below phone width, let
   long labels wrap onto 2 lines instead of forcing horizontal overflow. */
@media (max-width:600px){
  .btn{white-space:normal;text-align:center;max-width:100%}
}

/* ============ HERO ============ */
.hero{
  min-height:100svh;display:flex;align-items:center;padding:150px 0 90px;position:relative;overflow:hidden;
  background:var(--navy-deep);
}
/* Banner photo layer, dimmed + tinted so the white hero copy on top stays
   readable and the teal/blue brand glow still comes through. Sits behind
   the kinetic dot grid / orbit rings / floating capsule cutout. */
.hero-bg-photo{
  position:absolute;inset:0;z-index:0;
  background:url("../assets/img/hero-banner.jpg") center 30%/cover no-repeat;
  filter:brightness(.46) saturate(1.05);
}
.hero-bg-photo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 62% at 82% 46%,rgba(0,146,232,.22) 0%,rgba(0,146,232,0) 68%),
    radial-gradient(38% 46% at 78% 50%,rgba(0,217,196,.18) 0%,rgba(0,217,196,0) 70%),
    linear-gradient(180deg,rgba(4,10,24,.4) 0%,rgba(4,10,24,.22) 40%,rgba(4,10,24,.86) 100%);
}
#kinetic-hero{position:absolute;inset:0;z-index:1;pointer-events:auto}
@media (max-width:900px){.hero{flex-direction:column;align-items:stretch}}
.hero-inner{position:relative;z-index:2;max-width:900px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  border:1px solid rgba(0,217,196,.35);background:rgba(0,217,196,.06);
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
  margin-bottom:26px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px 2px var(--teal)}
.hero h1{
  font-size:clamp(34px,5.4vw,64px);font-weight:800;color:#fff;margin-bottom:22px;
}
.hero h1 .smoky-line{display:block;overflow-wrap:break-word}
.hero h1 .accent{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(17px,2vw,20px);color:#fff;max-width:640px;margin-bottom:14px;font-weight:500}
.hero .lede{font-size:16px;color:rgba(255,255,255,.85);max-width:640px;margin-bottom:38px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero .sub{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

.hero-orbit{
  position:absolute;top:50%;right:-8%;width:min(640px,52vw);height:min(640px,52vw);
  transform:translateY(-50%);z-index:1;opacity:.9;pointer-events:none;
}
@media (max-width:900px){.hero-orbit{display:none}}
.hero-capsule{
  position:absolute;top:50%;right:5%;width:clamp(240px,32vw,440px);height:auto;
  transform:translateY(-52%);z-index:1;pointer-events:none;
  filter:drop-shadow(0 30px 70px rgba(0,146,232,.35)) drop-shadow(0 0 40px rgba(0,217,196,.25));
  animation:capsuleFloat 7s ease-in-out infinite;
}
@keyframes capsuleFloat{
  0%,100%{transform:translateY(-52%) translateY(0)}
  50%{transform:translateY(-52%) translateY(-16px)}
}
@media (max-width:900px){
  .hero-capsule{
    position:static;display:block;transform:none;animation:none;
    width:min(300px,72%);margin:36px auto 0;filter:drop-shadow(0 18px 40px rgba(0,146,232,.3));
  }
}
@media (prefers-reduced-motion: reduce){.hero-capsule{animation:none}}
.hero-scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-faint);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
}
.hero-scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--teal),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ============ SECTION HEADINGS ============ */
.section{padding:110px 0}
.section.tight{padding:80px 0}
/* No max-width (previously 720px): that cap made most section headings and
   their taglines wrap 2-3 lines early even though the container had another
   400px+ of room to give them (client feedback, several rounds running --
   first raised for "Uma parceria construída para gerar resultados", now
   applied site-wide instead of one section at a time). Headings/taglines now
   use the full ~1144px container column. The heading font-size clamp is
   dialed back slightly (42px max -> 38px max) so the longer titles (e.g.
   "Soluções Integradas para Desenvolvimento Farmacêutico e Negócios") fit
   on one line within that column too; still shrinks/wraps naturally on
   narrow viewports. */
.section-head{max-width:none;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:14px;
}
.section-head h1,.section-head h2{font-size:clamp(26px,3.4vw,38px);color:#fff;font-weight:800;margin-bottom:16px}
.section-head p{color:var(--ink-dim);font-size:17px}
/* A few headings are long enough that even the 38px-max clamp above still
   wraps them within the ~1144px column -- sized down individually rather
   than shrinking every heading site-wide to fit the longest one (client
   feedback: "Soluções Integradas..." and the Brasil & LatAm PT title). */
#solucoes .section-head h2{font-size:clamp(20px,2.2vw,28px)}
#brasil-latam .section-head h1{font-size:clamp(22px,2.6vw,32px)}

.divider-glow{height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(0,217,196,.5),rgba(0,146,232,.5),transparent);margin:0 auto}

/* ============ POSITIONING ============ */
.positioning{
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(0,217,196,.03),transparent);
}
.positioning-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
@media (max-width:860px){.positioning-grid{grid-template-columns:1fr}}
.positioning h2{font-size:clamp(24px,3.2vw,34px);color:#fff;margin-bottom:18px}
.positioning p{color:var(--ink-dim);font-size:17px}
.chain-mini{display:flex;flex-wrap:wrap;gap:10px}
.chain-mini span{
  position:relative;font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;
  border:1px solid transparent;background:rgba(255,255,255,.03);color:var(--ink-dim);
}
/* always-on traveling neon border, same technique as the CTA buttons' beam
   but as a masked rotating conic-gradient ring, so it works on any pill
   width instead of needing a fixed pixel viewBox per chip */
.chain-mini span::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:conic-gradient(from var(--beam-a,0deg),transparent 0 65%,var(--teal),var(--blue),transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  animation:spin 2.8s linear infinite;
}
.section-gray .chain-mini span::before{opacity:.8}

/* ============ CREDIBILITY STATS ============ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:920px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats-grid{grid-template-columns:1fr}}
.stat-card{
  padding:28px 22px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  position:relative;overflow:hidden;
}
.stat-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(155deg,rgba(0,217,196,.35),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.stat-ico{
  width:38px;height:38px;border-radius:11px;background:var(--grad-accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0;
}
.stat-ico svg{width:20px;height:20px;color:var(--teal)}
.section-gray .stat-ico{background:rgba(12,23,48,.06)}
.stat-card .num{font-family:var(--ff-head);font-size:clamp(26px,3vw,34px);font-weight:800;color:#fff;margin-bottom:6px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;line-height:1.15}
.stat-card .num .grad{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card .num .grad.long{font-size:.56em;line-height:1.25;letter-spacing:-.005em}
.stat-card .lbl{font-size:13px;color:var(--ink-dim);font-weight:600;letter-spacing:.01em}
/* No max-width: the previous 820px cap wrapped lines well short of the
   container edge, leaving a big empty column on wide screens (client
   feedback) -- paragraphs now run the full available width. */
.about-copy{margin-top:54px;color:var(--ink-dim);font-size:16.5px}
.about-copy [data-i18n]{display:flex;flex-direction:column;gap:16px}
/* Long-form legal prose (Política de Privacidade): unlike the marketing
   headings/short paragraphs elsewhere on the site (which were widened to
   the full container per client feedback), a constrained reading width is
   the right call here on purpose -- long lines of dense legal text are
   harder to read edge-to-edge on a wide screen. Do not widen this to match
   .section-head/.solution-detail-body. */
.legal-content{margin-top:40px;max-width:760px;color:var(--ink-dim);font-size:15.5px;line-height:1.75}
.legal-content .legal-updated{color:var(--ink-faint);font-size:13px;margin-bottom:32px}
.legal-content [data-i18n]{display:flex;flex-direction:column;gap:16px}
.legal-content h2{color:var(--ink);font-size:19px;margin-top:12px}
.legal-content ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal-content li{display:list-item}
.legal-content a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.legal-content a:hover{color:var(--blue)}
/* Same treatment as .needs-wrap ("Conte-nos o que você precisa"): full
   container width (no max-width), solid navy-mid backing + Ink Current
   fluid canvas, so the leadership card reads as the same kind of
   cinematic dark panel instead of a narrower, left-stuck box. */
.leader-card{
  margin-top:48px;display:flex;gap:26px;align-items:flex-start;position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(28px,5vw,48px);border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(0,146,232,.08),rgba(0,217,196,.04)),var(--navy-mid);
}
.leader-avatar{
  flex-shrink:0;width:76px;height:76px;border-radius:50%;
  background:var(--grad-accent);display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-head);font-weight:800;font-size:22px;color:#04101f;
}
.leader-info h3{font-size:clamp(19px,2.2vw,23px);color:#fff;font-weight:800;margin:10px 0 2px}
.leader-role{display:block;font-size:13.5px;font-weight:700;color:var(--teal);margin-bottom:14px}
.leader-info p{color:var(--ink-dim);font-size:15px;line-height:1.75}
@media (max-width:640px){.leader-card{flex-direction:column;align-items:flex-start}}

/* ============ SOLUTIONS SUMMARY (index) ============ */
/* Flexbox instead of a 3-column grid: with 5 cards, a plain grid leaves the
   last row's 2 cards stuck flush against the left edge under the 3 cards
   above (client feedback). flex-wrap + justify-content:center centers
   whatever a row ends up with, incomplete or not, while flex-basis keeps
   the same effective 3/2/1-per-row responsive behavior as before. */
.sol-cards-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.sol-card{flex:1 1 340px;max-width:400px}
@media (max-width:620px){.sol-card{flex-basis:100%;max-width:none}}
.sol-card{
  display:flex;flex-direction:column;gap:14px;padding:30px 26px;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  position:relative;overflow:hidden;transition:border-color .35s var(--ease),transform .35s var(--ease);
  text-decoration:none;color:inherit;
}
.sol-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;transition:opacity .4s var(--ease);
  background:conic-gradient(from 0deg,transparent 0 70%,var(--teal),var(--blue),transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  animation:spin 4.5s linear infinite;
}
.sol-card:hover{border-color:transparent;transform:translateY(-4px)}
.sol-card:hover::before{opacity:1}
.sol-card-ico{
  width:48px;height:48px;border-radius:13px;background:var(--grad-accent-soft);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sol-card-ico svg{width:24px;height:24px;color:var(--teal)}
.sol-card h3{font-size:19px;color:#fff;font-weight:700}
.sol-card p{font-size:14.5px;color:var(--ink-dim);line-height:1.6;flex:1}
.sol-card-more{
  display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--teal);
  margin-top:4px;transition:gap .3s var(--ease);
}
.sol-card-more svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.sol-card:hover .sol-card-more{gap:12px}
.sol-card:hover .sol-card-more svg{transform:translateX(3px)}

/* ============ SOLUTION DETAIL (sub-pages) ============ */
.solution-detail{padding-bottom:0}
.sol-title-card{
  max-width:none;border-radius:24px;border:1px solid var(--line);
  padding:clamp(32px,6vw,64px) clamp(28px,5vw,56px);
  background:linear-gradient(150deg,rgba(0,146,232,.06),rgba(0,217,196,.03));
  margin-bottom:64px;
}
/* Longer solution names (e.g. "Regulatório & Desenvolvimento de
   Medicamentos") still wrap at the standard title size -- sized down just
   for those instead of shrinking every solution page's h1 (client feedback). */
.sol-title-card.sol-title-compact h1{font-size:clamp(22px,2.6vw,32px)}
/* No max-width (previously 920px, before that 760px): the client flagged
   again that the body copy, capability chips and capability-group cards
   still stopped well short of the nav bar's full width even at 920px --
   this column now matches the same ~1144px container width the header
   and .sol-title-card above it already use, so the whole page reads as
   one consistent width instead of the text column looking narrower than
   the menu (client feedback, same complaint repeated for all 5 solution
   pages). */
.solution-detail-body{max-width:none}
.sol-ico-big{
  width:64px;height:64px;border-radius:16px;background:var(--grad-accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:26px;
}
.sol-ico-big svg{width:32px;height:32px;color:var(--teal)}
.solution-detail-body p.lede{color:var(--ink-dim);font-size:16.5px;line-height:1.75;margin-bottom:36px}
.caps-h{font-size:clamp(19px,2.4vw,24px);color:#fff;font-weight:800;margin-bottom:18px}
div.cap-grid[data-i18n]{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
/* breathing room below the contextual CTA button so it doesn't sit flush
   against the bottom edge of .solution-detail (which is padding-bottom:0) */
.solution-detail-body .btn-neon{margin-bottom:32px}
.cap-chip{
  font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink);display:flex;align-items:center;gap:7px;
}
.cap-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad-accent);flex-shrink:0}
/* Flexbox instead of a 2-column grid: the clinical page has 5 capability
   groups, and a plain 2-column grid stacked them 2/2/1 with the last card
   stuck on the left (client feedback -- same underlying issue and same
   fix as .sol-cards-grid on the Home page). flex-wrap + justify-content:
   center lets a row of 3 sit above a centered row of 2. */
.cap-group-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:34px}
.cap-group{flex:1 1 280px;max-width:320px}
@media (max-width:720px){.cap-group{flex-basis:100%;max-width:none}}
.cap-group{
  padding:22px 24px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
/* Same hover treatment as the "Outras soluções" cards (.sol-other-card)
   below on this same page (client feedback: wanted a consistent hover
   across both card grids). */
.cap-group:hover{border-color:rgba(0,217,196,.4);background:rgba(0,217,196,.06)}
.cap-group h3{font-size:15px;font-weight:800;color:#fff;margin-bottom:9px}
.cap-group p{font-size:13.5px;line-height:1.65;color:var(--ink-dim)}
.sol-other-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:920px){.sol-other-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.sol-other-grid{grid-template-columns:1fr}}
.sol-other-card{
  display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:700;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.sol-other-card:hover{border-color:rgba(0,217,196,.4);background:rgba(0,217,196,.06)}
.sol-other-ico{width:30px;height:30px;border-radius:9px;background:var(--grad-accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sol-other-ico svg{width:16px;height:16px;color:var(--teal)}

/* ============ INK CURRENT (shared WebGL fluid-canvas host) ============
   Any container that gets an .ink-current-bg canvas as a child adds
   .ink-current-host too, so the canvas fills it, sits behind the real
   content, and blends into whatever background the host already has. */
.ink-current-host{position:relative;overflow:hidden;isolation:isolate}
.ink-current-bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:.55;mix-blend-mode:screen;
}
.ink-current-host > *:not(.ink-current-bg):not(.kinetic-title-bg){position:relative;z-index:1}

/* Kinetic Grid (the same cursor-reactive dot grid used behind the hero
   banner) layered behind the Ink Current fluid on the solution sub-page
   title cards, so those titles pick up the banner's own background effect
   too. Sits under the ink canvas (drawn first / painted below it). */
.kinetic-title-bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6;
}

/* ============ NEEDS CHECKLIST ============ */
.needs-wrap{
  border-radius:24px;border:1px solid var(--line);padding:clamp(28px,5vw,56px);
  /* Solid navy-mid backing (same approach as .final-cta) so the card itself
     keeps its current dark look no matter what the surrounding section's
     background is -- .section-light-bg only changes the section, never
     this card. */
  background:linear-gradient(150deg,rgba(0,146,232,.08),rgba(0,217,196,.04)),var(--navy-mid);
}
ul.needs-grid[data-i18n]{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 22px;margin:34px 0 38px}
/* Selector matches the base rule's specificity (element+class+attribute) --
   a plain ".needs-grid" here was silently losing to the base rule at any
   width, so this list never actually stacked to 1 column on mobile (found
   while checking the new .exp-frame panel on a 390px viewport: the grid
   was overflowing the frame instead of stacking). */
@media (max-width:760px){ul.needs-grid[data-i18n]{grid-template-columns:1fr}}
.needs-grid li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ink-dim);padding:8px 0;border-bottom:1px solid var(--line-soft)}
.needs-grid li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--teal)}
/* Frames the "Experiência aplicada" checklist in its own panel with the
   same always-on traveling neon border used on the Brasil & LatAm
   split-cards (client feedback): previously this list sat directly on the
   banner-photo background with nothing framing it. Translucent dark backing
   (rather than split-card's light one) so it reads as a panel over the
   photo instead of washing it out. */
.exp-frame{
  position:relative;overflow:hidden;border-radius:24px;
  padding:8px clamp(24px,4vw,40px) clamp(16px,3vw,28px);
  background:linear-gradient(165deg,rgba(5,14,28,.6),rgba(5,14,28,.4));
}
.exp-frame::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:conic-gradient(from var(--beam-a,0deg),transparent 0 65%,var(--teal),var(--blue),transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  animation:spin 3.4s linear infinite;
}
.exp-frame .needs-grid{margin:26px 0 8px}
.exp-frame .needs-grid li{border-bottom-color:rgba(255,255,255,.08)}
.needs-cta{display:flex;justify-content:center}

/* ============ HOW WE WORK ============ */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative}
@media (max-width:980px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step-card{
  padding:26px 18px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:rgba(255,255,255,.025);text-align:center;position:relative;overflow:hidden;
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
}
/* hover-reveal traveling neon ring, same pattern as the solution cards on
   the Home page (.sol-card) but with genuine rotation via --beam-a */
.step-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;opacity:0;
  transition:opacity .4s var(--ease);
  background:conic-gradient(from var(--beam-a,0deg),transparent 0 65%,var(--teal),var(--blue),transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  animation:spin 3s linear infinite;
}
.step-card:hover{border-color:transparent;transform:translateY(-4px);background:rgba(255,255,255,.045)}
.step-card:hover::before{opacity:1}
.section-gray .step-card:hover{background:rgba(12,23,48,.05)}
.step-idx{
  width:34px;height:34px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-accent);color:#04121f;font-weight:800;font-size:14px;font-family:var(--ff-head);
}
.step-card h4{font-size:14.5px;color:#fff;font-weight:700;margin-bottom:8px;letter-spacing:.02em}
.step-card p{font-size:13px;color:var(--ink-faint);line-height:1.55}

/* ============ VALUE CHAIN ============ */
/* A responsive grid (never a horizontally-scrolling strip) so every stage
   stays visible without scrolling at any viewport width -- see the note
   in render_value_chain() in generate.py. */
.chain-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.chain-node{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:22px 14px;border-radius:16px;border:1px solid rgba(0,217,196,.16);
  background:rgba(0,217,196,.03);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
/* Same hover treatment as the "Outras soluções" cards (.sol-other-card),
   brightened from this card's own resting teal tint (client feedback). */
.chain-node:hover{border-color:rgba(0,217,196,.4);background:rgba(0,217,196,.06)}
.chain-dot{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(0,217,196,.4);
  background:linear-gradient(160deg,rgba(0,217,196,.12),rgba(0,146,232,.06));
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:800;color:var(--teal);font-size:13px;
  flex-shrink:0;box-shadow:0 0 24px -4px rgba(0,217,196,.4);
}
.chain-node span{font-size:12.5px;color:var(--ink-dim);font-weight:600;line-height:1.3}
@media (max-width:900px){
  .chain-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .chain-grid{grid-template-columns:1fr}
}

/* ============ GLOBAL CAPS / LATAM split ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split-card{
  border-radius:24px;border:1px solid transparent;padding:clamp(30px,4vw,44px);
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.01));position:relative;overflow:hidden;
}
/* always-on traveling neon border around both cards, same technique as the
   CTA buttons' beam (masked rotating conic-gradient ring instead of a fixed
   SVG viewBox, since these cards don't have a fixed pixel size) */
.split-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:conic-gradient(from var(--beam-a,0deg),transparent 0 65%,var(--teal),var(--blue),transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  animation:spin 3.4s linear infinite;
}
.split-card .glow{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none}
.split-card.a .glow{background:var(--teal);top:-100px;left:-80px}
.split-card.b .glow{background:var(--blue);bottom:-100px;right:-80px}
.split-card h3{font-size:clamp(19px,2.3vw,24px);color:#fff;margin-bottom:14px;position:relative}
.split-card p{color:var(--ink-dim);font-size:15.5px;position:relative}
.split-card .kicker{margin-bottom:10px}
/* No max-width (previously 820px): this closing paragraph is long enough
   that it will still wrap over several lines regardless, but the 820px cap
   was wrapping it well short of the container edge (client feedback) --
   removed so it uses the same full column as the rest of the page. */
.latam-commercial{margin-top:34px;color:var(--ink-dim);font-size:16px;line-height:1.75}

/* ============ WHY US ============ */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:920px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-card{
  padding:26px 24px;border-radius:var(--radius);border:1px solid var(--line);
  background:rgba(255,255,255,.025);transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.why-card:hover{transform:translateY(-4px);border-color:rgba(0,217,196,.45);background:rgba(0,217,196,.04)}
.why-ico{width:42px;height:42px;border-radius:12px;background:var(--grad-accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.why-ico svg{width:22px;height:22px;color:var(--teal)}
.why-card h4{font-size:16.5px;color:#fff;font-weight:700;margin-bottom:8px}
.why-card p{font-size:14px;color:var(--ink-faint);line-height:1.6}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:860px}
.faq-item{
  border-radius:var(--radius-sm);border:1px solid var(--line);background:rgba(255,255,255,.02);overflow:hidden;position:relative;
}
.faq-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;transition:opacity .4s var(--ease);
  background:conic-gradient(from 0deg,transparent 0 72%,var(--teal),var(--blue),transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:spin 5s linear infinite;
}
.faq-item.open::before{opacity:1}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;background:transparent;border:0;color:#fff;text-align:left;font-size:15.5px;font-weight:700;font-family:var(--ff-head)}
.faq-q svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-faint);transition:transform .4s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(45deg);color:var(--teal)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a-inner{padding:0 22px 22px;color:var(--ink-dim);font-size:14.5px;line-height:1.7}

/* ============ FINAL CTA ============ */
.final-cta{
  border-radius:28px;padding:clamp(40px,7vw,80px) clamp(24px,6vw,60px);text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(0,217,196,.1),rgba(0,146,232,.06)),var(--navy-mid);
  border:1px solid rgba(0,217,196,.25);
}
.final-cta h2{font-size:clamp(26px,4vw,42px);color:#fff;margin-bottom:18px;max-width:760px;margin-left:auto;margin-right:auto}
.final-cta p{color:var(--ink-dim);font-size:16.5px;max-width:600px;margin:0 auto 34px}
.final-cta .hero-ctas{justify-content:center}
/* Lighter tone variant (used on the Value Chain page) -- same Ink Current
   card, just on a pale background instead of navy. screen-blend reads as
   near-invisible on a light background, so the ink canvas switches to
   multiply here to stay visible. */
.final-cta.gray{
  background:linear-gradient(160deg,rgba(0,217,196,.12),rgba(0,146,232,.08)),#eef2f9;
  border-color:rgba(12,23,48,.12);
}
.final-cta.gray h2{color:#0c1730}
.final-cta.gray p{color:#4b5674}
.final-cta.gray .ink-current-bg{mix-blend-mode:multiply;opacity:.4}
.final-cta.gray .btn-ghost{background:rgba(12,23,48,.04);color:#1a2138;border-color:rgba(12,23,48,.14)}
.final-cta.gray .btn-ghost:hover{border-color:rgba(0,146,232,.4);background:rgba(0,146,232,.08)}
.final-cta.gray .btn-neon{color:#0c1730;background:rgba(12,23,48,.03)}

/* ============ CONTACT / FOOTER ============ */
.contact-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr}}
.contact-side{display:flex;flex-direction:column;gap:22px}
.contact-form-wrap{
  padding:clamp(24px,4vw,36px);border-radius:20px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.form-intro{color:var(--ink-dim);font-size:15px;line-height:1.7;margin-bottom:24px}
.contact-form-wrap form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-dim);letter-spacing:.02em}
.field input,.field select,.field textarea{
  font:inherit;font-size:14.5px;color:#fff;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;width:100%;
  transition:border-color .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(0,217,196,.55)}
.field select option{background:#0a1730;color:#fff}
.field textarea{resize:vertical;min-height:96px}
.field-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-dim);line-height:1.55;cursor:pointer}
.field-check input{margin-top:3px;flex-shrink:0}
.field-check a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.field-check a:hover{color:var(--blue)}
.form-note{font-size:13.5px;color:var(--teal);font-weight:600}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-row{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.contact-row svg{width:20px;height:20px;color:var(--teal);flex-shrink:0}
/* the label+value wrapper is a flex child with no min-width set, so an
   unbreakable long value (the e-mail address especially) was forcing this
   whole row -- and the page -- wider than the phone viewport instead of
   wrapping; min-width:0 lets it shrink to the row's actual width again. */
.contact-row > span{min-width:0}
.contact-row .lbl{font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.contact-row .val{font-size:15px;color:#fff;font-weight:600;overflow-wrap:break-word;word-break:break-word}
.contact-map{border-radius:18px;border:1px solid var(--line);overflow:hidden;min-height:260px;position:relative}
.contact-map iframe{width:100%;height:100%;min-height:260px;border:0;filter:grayscale(.3) invert(.92) contrast(.9)}

footer.site-footer{border-top:1px solid var(--line-soft);padding:56px 0 26px;position:relative}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-soft)}
.footer-brand img{height:51px;margin-bottom:14px}
.footer-brand p{color:var(--ink-faint);font-size:13.5px;max-width:280px}
.footer-col h5{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:16px;font-weight:700}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--ink-dim);transition:color .25s}
.footer-col a:hover{color:var(--teal)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:24px;font-size:12.5px;color:var(--ink-faint)}
.footer-bottom a{color:var(--ink-dim);font-weight:600}
.footer-bottom a:hover{color:var(--teal)}
.footer-legal-link{margin-left:6px;text-decoration:underline;text-underline-offset:2px}

/* Footer as a gray section, matching the .section-gray rhythm used elsewhere */
footer.site-footer.section-gray{border-top-color:rgba(12,23,48,.12)}
footer.site-footer.section-gray .footer-top{border-bottom-color:rgba(12,23,48,.12)}
footer.site-footer.section-gray .footer-brand p{color:#5a6685}
footer.site-footer.section-gray .footer-col h5{color:#707893}
footer.site-footer.section-gray .footer-col a{color:#3a4568}
footer.site-footer.section-gray .footer-col a:hover{color:#0092e6}
footer.site-footer.section-gray .footer-bottom{color:#6a7390}
footer.site-footer.section-gray .footer-bottom a{color:#1a2138}
footer.site-footer.section-gray .footer-bottom a:hover{color:#0092e6}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--grad-accent);
  box-shadow:0 12px 32px -8px rgba(0,180,220,.65);
}
.wa-float svg{width:28px;height:28px;color:#04121f}
.wa-float .ring{
  position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 75%,#fff,var(--teal),transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:2px;animation:spin 3s linear infinite;
}
.wa-float .pulse{position:absolute;inset:0;border-radius:50%;background:var(--teal);opacity:.5;animation:wa-pulse 2.4s ease-out infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.45}100%{transform:scale(1.7);opacity:0}}
.wa-tooltip{
  position:absolute;right:72px;bottom:14px;white-space:nowrap;padding:9px 14px;border-radius:10px;
  background:var(--navy-light);border:1px solid var(--line);font-size:13px;font-weight:600;color:#fff;
  opacity:0;transform:translateX(8px);transition:all .3s var(--ease);pointer-events:none;
}
.wa-float:hover .wa-tooltip{opacity:1;transform:translateX(0)}
@media (max-width:600px){.wa-float{right:14px;bottom:14px;width:54px;height:54px}.wa-float svg{width:24px;height:24px}}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.47s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.54s}

/* ============ SMOKY TEXT ============ */
.smoky-word{display:inline-block}
.smoky-char{display:inline-block;opacity:0;will-change:transform,filter,opacity}
.smoky-char.play{animation:smoky-in var(--sd,1.1s) var(--sdel,0s) cubic-bezier(0,0,.58,1) both}
@keyframes smoky-in{
  from{opacity:0;filter:blur(14px);transform:translate3d(-1.1rem,.5rem,0) scale(.8)}
  55%{filter:blur(3px)}
  to{opacity:1;filter:blur(0);transform:none}
}

/* ============ UTIL ============ */
.mono-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.02em;color:var(--ink-faint)}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:999;border-radius:8px}
.skip-link:focus{left:16px;top:16px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Safety net: if JS never runs (disabled, blocked, or a renderer/crawler that
   doesn't simulate scroll/IntersectionObserver), no content or SEO copy may
   ever be invisible. */
.no-js .reveal,.no-js .reveal-stagger,.no-js .reveal-stagger > *{opacity:1 !important;transform:none !important}
noscript{display:contents}