/* ============================================================
   OTICON INTENT — DESIGN SYSTEM
   Tokens extraídos do bundle real da Oticon (index.html/assets):
   - Marca primária #860C58 / hover #7B1E57 / focus #410032
   - Escala neutra "brand-scale" (roxo-vinho) e "hair" (linhas)
   - Botões em pílula (border-radius:624.9375rem = 9999px), borda 2px
   - Tipografia fluida em clamp() (mesma técnica do site real)
   - Fonte Open Sans (self-hosted na Oticon real via next/font)
   ============================================================ */

/* Tipografia (Open Sans self-hosted + fluid tokens): css/typography.css */

:root{
  /* ---- Paleta de marca (extraída do CSS real da Oticon) ---- */
  --oticon: #860C58;         /* button_btn--primary bg real */
  --oticon-hover: #7B1E57;   /* :hover real */
  --oticon-focus: #410032;   /* :focus real === brand-scale-900 */
  --oticon-disabled: #B399AD;
  --oticon-tint-hover: #D9CCD6;
  --oticon-magenta: #C6168D; /* bg-brand-secondary-magenta / pinga do logo */
  --oticon-mauve-500: #8D6684;
  --oticon-mauve-700: #67335B;
  --oticon-teal: #4E7180;    /* text-theme-accent-3 */
  --hairline: #DDD6D3;       /* bg-hair-100 */

  --dark: #2A0A20;
  --dark-950: #1B0615;
  --dark-card: #3A1129;
  --dark-line: rgba(255,255,255,.12);
  --dark-text-soft: rgba(255,255,255,.68);
  --dark-text-faint: rgba(255,255,255,.46);

  --bg: #FAF7F8;
  --bg-card: #FFFFFF;
  --ink: #1B1218;
  --ink-soft: #5B4E56;
  --ink-faint: #8B7C85;
  --line: var(--hairline);
  --oticon-lt: #FBEAF3;

  --green-ok: #2E8B57;

  --font-sans: "Open Sans", system-ui, Arial, Tahoma, sans-serif;
  --f-display: var(--font-sans);
  --f-body: var(--font-sans);

  --r: 20px;
  --r-sm: 12px;
  --max: 1280px;
  --max-wide: 1520px;

  --ease-reveal: cubic-bezier(.16,1,.3,1);
  --ease-smooth: cubic-bezier(.4,0,.2,1);

  --shadow-sm: 0 2px 10px rgba(42,10,32,.06);
  --shadow-md: 0 12px 32px -8px rgba(42,10,32,.16);
  --shadow-lg: 0 24px 60px -12px rgba(42,10,32,.28);
  --glow-oticon: 0 0 0 rgba(134,12,88,0);
  --glow-oticon-lit: 0 8px 30px -4px rgba(134,12,88,.45), 0 0 40px -6px rgba(198,22,141,.35);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
ul{list-style:none;}

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

/* ---- Scrollbar sutil ---- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--oticon-mauve-500); border-radius:10px; border:2px solid var(--bg);}

.container{max-width:var(--max); margin:0 auto; padding:0 24px;}
.container.wide{max-width:var(--max-wide);}
@media(min-width:768px){ .container{padding:0 44px;} }
@media(min-width:1440px){ .container{padding:0 64px;} }

/* ============================================================
   TIPOGRAFIA — cor / layout (tamanhos fluidos em typography.css)
   ============================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oticon); margin-bottom:14px;
}
.eyebrow::before{content:""; width:20px; height:2px; background:var(--oticon-magenta); border-radius:2px; display:inline-block;}
.eyebrow.on-dark{color:#F2AEDA;}
.eyebrow.on-dark::before{background:#F2AEDA;}
.eyebrow.center{justify-content:center;}

.h1{ color:var(--ink); }
.h2{ color:var(--ink); }
.h3{ color:var(--ink); }
.h1.on-dark,.h2.on-dark,.h3.on-dark{color:#fff;}
.lead{ color:var(--ink-soft); max-width:640px;}
.lead.on-dark{color:var(--dark-text-soft);}
.lead.center{margin-left:auto; margin-right:auto;}
.body-md{ color:var(--ink-soft);}
.body-md.on-dark{color:var(--dark-text-soft);}
.body-sm{ color:var(--ink-soft);}
.body-sm.on-dark{color:var(--dark-text-soft);}
.caption{ color:var(--ink-faint);}
.center{text-align:center;}
strong{font-weight:700; color:var(--ink);}
.on-dark strong{color:#fff;}

/* ============================================================
   BOTÕES — pílula, borda 2px, cores reais do button_btn* Oticon
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-weight:700; font-size:var(--fs-body);
  padding:1rem 1.75rem; min-height:56px;
  border-radius:9999px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color .25s var(--ease-smooth), border-color .25s var(--ease-smooth),
             color .25s var(--ease-smooth), transform .25s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
  will-change:transform;
  isolation:isolate;
  overflow:hidden;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  opacity:0; transition:opacity .3s var(--ease-smooth);
}
.btn:hover::before{opacity:1;}
.btn:active{transform:scale(.97);}

.btn-primary{background:var(--oticon); color:#fff; border-color:var(--oticon); box-shadow:0 6px 20px -6px rgba(134,12,88,.45);}
.btn-primary:hover{background:var(--oticon-hover); border-color:var(--oticon-hover); transform:translateY(-2px); box-shadow:var(--glow-oticon-lit);}
.btn-primary:focus-visible{background:var(--oticon-focus); border-color:var(--oticon-focus);}

.btn-secondary{background:transparent; color:var(--oticon); border-color:var(--oticon);}
.btn-secondary:hover{background:var(--oticon); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-secondary.on-dark{color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06);}
.btn-secondary.on-dark:hover{background:rgba(255,255,255,.16); border-color:#fff;}

.btn-ghost{background:rgba(134,12,88,.06); color:var(--oticon); border-color:transparent;}
.btn-ghost:hover{background:var(--oticon-lt);}

.btn.sm{padding:.7rem 1.35rem; min-height:44px; font-size:var(--fs-small);}
.btn.full{width:100%;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn-row.center{justify-content:center;}
.btn-wa-icon{width:27px; height:27px; flex-shrink:0; display:block;}
.btn.sm .btn-wa-icon{width:24px; height:24px;}

/* ============================================================
   GRID / LAYOUT
   ============================================================ */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:4vw; align-items:center;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.section{padding:min(10vw,120px) 0; position:relative;}
.section.tight{padding:min(6vw,76px) 0;}
.section.dark{background:var(--dark); color:#fff; overflow:hidden;}
.section-divider{height:1px; background:var(--line); max-width:var(--max); margin:0 auto;}

@media(max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .grid-4{grid-template-columns:1fr;}
}

/* ============================================================
   BACKGROUND FX — glow orbs animados + malha de gradiente
   (mesma linguagem de "gradient-animation" usada nos widgets Oticon)
   ============================================================ */
@keyframes bgFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2%,-3%,0) scale(1.08); }
}
@keyframes bgDrift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes pulseGlow{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
.bg-fx{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.bg-fx .orb{
  position:absolute; border-radius:50%; filter:blur(70px);
  animation:bgFloat 14s ease-in-out infinite, pulseGlow 8s ease-in-out infinite;
  opacity:.6;
}
.section.dark .bg-fx{
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(198,22,141,.30), transparent 60%),
    radial-gradient(50% 50% at 85% 80%, rgba(134,12,88,.35), transparent 60%);
}
.section:not(.dark) .bg-fx .orb-a{ width:36vw; height:36vw; top:-10%; left:-8%; background:radial-gradient(circle, rgba(134,12,88,.10), transparent 70%);}
.section:not(.dark) .bg-fx .orb-b{ width:28vw; height:28vw; bottom:-12%; right:-6%; background:radial-gradient(circle, rgba(198,22,141,.08), transparent 70%); animation-delay:-6s;}

/* Malha de gradiente animada (usada no hero e CTA final) */
.mesh-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(45% 60% at 20% 30%, rgba(198,22,141,.55), transparent 60%),
    radial-gradient(40% 50% at 80% 20%, rgba(134,12,88,.55), transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(65,0,50,.9), transparent 70%),
    linear-gradient(160deg, #2A0A20 0%, #1B0615 100%);
  background-size:180% 180%;
  animation:bgDrift 18s ease-in-out infinite;
}

/* ============================================================
   LETTERING TRANSPARENTE — marca d'água tipográfica de fundo
   ============================================================ */
.watermark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(6rem, 22vw, 16rem);
  letter-spacing:-.04em; line-height:1; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(134,12,88,.16);
  text-stroke:1px rgba(134,12,88,.16);
  z-index:0; pointer-events:none; user-select:none;
  mix-blend-mode:multiply;
}
.section.dark .watermark{ -webkit-text-stroke:1px rgba(255,255,255,.09); text-stroke:1px rgba(255,255,255,.09); mix-blend-mode:normal;}
.watermark.left{left:0; transform:translate(-8%,-50%);}

/* ============================================================
   NAV — vidro (glassmorphism) fiel ao header sticky real
   ============================================================ */
.site-nav{
  position:sticky; top:0; z-index:900;
  background:rgba(250,247,248,.72);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(221,214,211,.6);
  transition:box-shadow .3s var(--ease-smooth), background-color .3s var(--ease-smooth);
}
.site-nav.scrolled{ box-shadow:0 8px 30px -12px rgba(42,10,32,.18); background:rgba(250,247,248,.92);}
.nav-inner{display:flex; align-items:center; height:78px; gap:28px;}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; white-space:nowrap;}
.logo img{height:26px; width:auto;}
.logo .logo-mark{height:58px; width:auto;}
.oticon-chip{font-size:11px; font-weight:700; background:var(--oticon-lt); color:var(--oticon-mauve-700); padding:4px 10px; border-radius:999px; margin-left:4px; letter-spacing:.02em;}
.nav-links{display:flex; gap:30px; flex:1; padding-left:20px;}
.nav-links a{position:relative; font-size:15px; font-weight:600; color:var(--ink-soft); transition:color .2s;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--oticon); transition:width .3s var(--ease-smooth);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav-ctas{display:flex; gap:12px; align-items:center; margin-left:auto;}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .3s, opacity .3s;}

@media(max-width:1100px){
  .logo .logo-mark{height:48px;}
  .nav-links{gap:18px; padding-left:8px;}
  .nav-links a{font-size:14px;}
  .oticon-chip{display:none;}
}
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-ctas .btn.sm:first-child{display:none;}
  .nav-toggle{display:block;}
  .logo .logo-mark{height:44px;}
}

/* Menu mobile */
.mobile-menu{
  position:fixed; inset:78px 0 0 0; z-index:890;
  background:rgba(250,247,248,.98); backdrop-filter:blur(20px);
  padding:32px 24px; display:flex; flex-direction:column; gap:24px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease-smooth), transform .3s var(--ease-smooth);
}
.mobile-menu.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-menu a{font-size:20px; font-weight:700; color:var(--ink);}
.mobile-menu .btn{width:100%;}

/* ============================================================
   HERO — vídeo fullscreen + overlay em gradiente + lettering
   ============================================================ */
.hero{
  position:relative; min-height:82vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--dark-950);
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media video,.hero-media img{width:100%; height:100%; object-fit:cover;}
.hero-video{width:100%; height:100%; object-fit:cover;}
.hero-only-mobile{display:none;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(27,6,21,.15) 0%, rgba(27,6,21,.35) 55%, rgba(27,6,21,.92) 100%);
}
.hero-copy-mobile{max-width:34rem;}
.hero-scroll-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:22px;
  color:#fff; font-weight:700; font-size:15px; letter-spacing:.02em;
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px;
  transition:border-color .2s, opacity .2s;
}
.hero-scroll-link:hover{border-color:#fff; opacity:.92;}
@media(max-width:640px){
  .hero-only-desktop{display:none !important;}
  .hero-only-mobile{display:block;}
  .hero{align-items:stretch; min-height:100svh; position:relative;}
  .hero-media img.hero-only-mobile{object-fit:cover; object-position:center 72%;}
  .hero-content{
    position:absolute; inset:0; z-index:2;
    padding:0; display:block; pointer-events:none;
  }
  .hero-content .container{height:100%; position:relative; pointer-events:none;}
  .hero-overlay{
    background:linear-gradient(180deg, rgba(27,6,21,.78) 0%, rgba(27,6,21,.42) 28%, rgba(27,6,21,.08) 52%, transparent 72%),
                linear-gradient(0deg, rgba(27,6,21,.72) 0%, rgba(27,6,21,.2) 28%, transparent 48%);
  }
  .hero-copy-mobile{
    max-width:20.5rem; height:100%;
    position:relative; pointer-events:none;
  }
  .hero-copy-mobile-top{
    position:absolute; left:0; right:0;
    top:clamp(78px,12vh,100px);
    transform:translateY(-30px);
    pointer-events:auto;
  }
  .hero-copy-mobile-bottom{
    position:absolute; left:0; right:0;
    bottom:0;
    pointer-events:auto;
  }
  /* Setas de scroll: interior quase transparente + blur leve */
  .hero .img-hero-scroll,
  .product-hero .img-hero-scroll,
  .img-hero .img-hero-scroll{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .img-hero-scroll:hover{
    background:rgba(255,255,255,.08);
  }
  .scenario-num{width:22px; height:22px; font-size:11px; box-shadow:0 4px 12px -3px rgba(198,22,141,.45);}
  .final-cta .watermark{transform:translate(-50%,-50%) scale(.8);}
  .sensor-vid-desk{display:none !important;}
  .sensor-video-frame{
    height:auto !important;
    width:100%;
    max-width:598px;
    aspect-ratio:598 / 336;
    margin-inline:auto;
  }
  video.sensor-vid-mob{
    display:block !important;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .sensor-video-frame:hover video.sensor-vid-mob{transform:none;}
  .media-play.sensor-vid-mob{display:flex !important;}
  .hero-copy-mobile .eyebrow{margin-bottom:10px; font-size:11px;}
  .hero-copy-mobile .h1{font-size:clamp(1.35rem, 5.6vw, 1.7rem); line-height:1.18; letter-spacing:-.02em;}
  .hero-copy-mobile .lead{font-size:13.5px; line-height:1.45; max-width:none; margin:0;}
  .hero-copy-mobile-top .hero-scroll-link{margin-top:14px; font-size:13.5px;}
}
.hero-watermark{
  position:absolute; z-index:1; inset:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-watermark span{
  font-family:var(--f-display); font-weight:700; font-size:clamp(5rem,18vw,13rem);
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14); letter-spacing:-.03em;
  animation:bgFloat 16s ease-in-out infinite;
}
.hero-content{position:relative; z-index:2; width:100%; padding-bottom:56px;}
.hero-eyebrow{color:#F2AEDA;}
.hero .h1{color:#fff;}
.hero .lead{color:rgba(255,255,255,.82);}
.hero-controls{
  position:absolute; z-index:2; right:24px; bottom:28px;
  display:flex; align-items:center; gap:10px;
}
.hero-play{
  width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s, transform .25s;
  font-size:16px;
}
.hero-play:hover{background:rgba(255,255,255,.22); transform:scale(1.06);}

/* Botão play/pause reutilizável para vídeos dentro de media-frame */
.media-play{
  position:absolute; z-index:2; right:16px; bottom:16px;
  width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s var(--ease-smooth), transform .25s var(--ease-smooth), opacity .25s var(--ease-smooth); font-size:14px;
}
.media-play:hover{background:rgba(255,255,255,.24); transform:scale(1.08);}

/* Variante grande e centralizada, com vidro translúcido (ex.: vídeo 4D Sensor) */
.media-play-lg{
  right:auto; bottom:auto; top:50%; left:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; font-size:26px; padding-left:4px;
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.55);
  box-shadow:0 10px 34px -8px rgba(0,0,0,.45);
}
.media-play-lg:hover{background:rgba(255,255,255,.26); transform:translate(-50%,-50%) scale(1.08);}
.media-play.is-playing{opacity:0; visibility:hidden; pointer-events:none;}

.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,.7); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.scroll-cue .dot-track{width:1px; height:34px; background:rgba(255,255,255,.3); position:relative; overflow:hidden;}
.scroll-cue .dot-track::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%; background:#fff;
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{top:-40%;} 60%{top:100%;} 100%{top:100%;} }

/* ============================================================
   IMAGENS DE CONTEÚDO — moldura consistente com a marca
   ============================================================ */
.media-frame{
  position:relative; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-md); background:linear-gradient(160deg,#f1e6ec,#f7f2f4);
}
.media-frame img,.media-frame video{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-smooth);}
.media-frame:hover img,.media-frame:hover video{transform:scale(1.04);}
.media-frame::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.media-frame.on-dark{background:linear-gradient(160deg,#3a1129,#2a0a20);}
.sensor-vid-mob{display:none !important;}

/* ============================================================
   PRODUCT-HERO — "segunda hero" com foto do produto em still-life
   (fundo em gradiente magenta já vem na própria imagem), título no
   topo e nome do produto sobre a imagem (ex.: Oticon Intent)
   ============================================================ */
.product-hero{position:relative; overflow:hidden; height:clamp(460px,54vw,640px); background:var(--dark-950);}
.product-hero-media{position:absolute; inset:0;}
.product-hero-media picture,.product-hero-media img{width:100%; height:100%; display:block;}
.product-hero-media img{object-fit:cover; transition:transform .9s var(--ease-smooth);}
.product-hero:hover .product-hero-media img{transform:scale(1.03);}
.product-hero-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(27,6,21,.86) 0%, rgba(27,6,21,.5) 34%, rgba(27,6,21,.08) 62%, transparent 82%);
}
.product-hero-content{position:relative; z-index:1; height:100%; display:flex; align-items:center;}
.product-hero-text{padding-left:5%; margin-left:450px; width:56%; max-width:620px;}
.product-hero-text .h1{
  font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg);
  text-shadow:0 2px 20px rgba(20,2,15,.45);
}
.product-hero-text .eyebrow{text-shadow:0 2px 10px rgba(20,2,15,.4);}
.product-hero-label{position:absolute; left:0; right:0; bottom:12%; z-index:1;}
.product-hero-name{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; color:#fff;
  font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg);
}
@media(max-width:1200px){
  .product-hero-text{margin-left:clamp(24px,8vw,180px); width:58%;}
}
@media(max-width:900px){
  .product-hero-overlay{background:linear-gradient(180deg, rgba(20,2,15,.2) 0%, rgba(20,2,15,.55) 55%, rgba(20,2,15,.92) 100%);}
  .product-hero-text{width:auto; max-width:none; padding:40px 28px 56px; margin-left:0;}
  .product-hero-content{align-items:flex-end;}
}
@media(max-width:640px){
  .product-hero{
    height:auto; min-height:560px; min-height:72svh;
    padding:0;
  }
  .product-hero-media img{object-position:center 28%;}
  .product-hero-overlay{
    background:linear-gradient(180deg, transparent 0%, transparent 38%, rgba(20,2,15,.35) 62%, rgba(20,2,15,.82) 100%);
  }
  .product-hero-content{
    position:absolute; inset:0; align-items:flex-end;
  }
  .product-hero-text{
    width:auto; max-width:none; margin:0; padding:0 16px 8px;
    position:relative; bottom:0;
  }
  .product-hero-text .eyebrow{font-size:11px; margin-bottom:8px;}
  .product-hero-text .h1{
    font-size:clamp(1.2rem, 5.2vw, 1.55rem); line-height:1.2; max-width:20rem;
  }
  .product-hero-label{position:relative; bottom:auto; margin-top:24px;}
}

/* ============================================================
   IMG-HERO — banner de imagem em largura total, com overlay em
   gradiente e texto sobreposto (ex.: BrainHearing™)
   ============================================================ */
.img-hero{position:relative; overflow:hidden; height:clamp(380px,46vw,560px); background:var(--dark-950);}
.img-hero-media{position:absolute; inset:0;}
.img-hero-media picture,.img-hero-media img{width:100%; height:100%; display:block;}
.img-hero-media img{object-fit:cover; object-position:72% 53%; transition:transform .9s var(--ease-smooth);}
.img-hero:hover .img-hero-media img{transform:scale(1.03);}
@media(max-width:640px){
  .img-hero-media img{object-position:center center;}
}
.img-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(27,6,21,.86) 0%, rgba(27,6,21,.5) 34%, rgba(27,6,21,.08) 62%, transparent 82%);
}
.img-hero-content{position:relative; z-index:1; height:100%; display:flex; align-items:center;}
.img-hero-text{padding-left:5%; margin-left:450px; width:56%; max-width:620px;}
.img-hero-scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
  animation:imgHeroCue 2.2s ease-in-out infinite; transition:background .25s var(--ease-smooth), border-color .25s var(--ease-smooth);
}
.img-hero-scroll:hover{background:rgba(255,255,255,.22); border-color:#fff;}
@keyframes imgHeroCue{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,6px);}}
@media(max-width:1200px){
  .img-hero-text{margin-left:clamp(24px,8vw,180px); width:58%;}
}
@media(max-width:900px){
  .img-hero{height:auto; min-height:480px;}
  .img-hero-overlay{background:linear-gradient(180deg, rgba(27,6,21,.2) 0%, rgba(27,6,21,.55) 55%, rgba(27,6,21,.92) 100%);}
  .img-hero-text{width:auto; max-width:none; padding:40px 28px 56px; margin-left:0;}
  .img-hero-content{align-items:flex-end;}
}
@media(max-width:640px){
  .img-hero{min-height:440px;}
  .img-hero-text{padding:32px 24px 52px;}
}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r);
  padding:28px; transition:transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), border-color .35s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent;}
.card.on-dark{background:var(--dark-card); border-color:var(--dark-line);}
.card.glass{
  background:rgba(255,255,255,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);
}
.card.on-dark.glass{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);}

.chapter{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.chapter .ch-num{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--oticon);
  background:var(--oticon-lt); border-radius:999px; padding:5px 14px; white-space:nowrap;
}
.chapter.on-dark .ch-num{color:#F2AEDA; background:rgba(242,174,218,.14);}
.chapter .ch-line{flex:1; height:1px; background:var(--line);}
.chapter.on-dark .ch-line{background:var(--dark-line);}

/* Door cards (duas portas) */
.door-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px;}
.door-card{
  position:relative; background:var(--bg-card); border:2px solid var(--line); border-radius:22px; padding:32px;
  transition:transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), border-color .35s;
  overflow:hidden;
}
.door-card::before{
  content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(135deg, rgba(134,12,88,.08), transparent 60%);
  transition:opacity .35s;
}
.door-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--oticon);}
.door-card:hover::before{opacity:1;}
.door-icon{
  width:56px; height:56px; background:var(--oticon-lt); border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:18px;
  transition:transform .35s var(--ease-smooth);
}
.door-card:hover .door-icon{transform:rotate(-6deg) scale(1.08);}
.door-title{font-family:var(--f-display); font-size:21px; font-weight:700; margin-bottom:10px; letter-spacing:-.01em;}
.door-arrow{margin-top:16px; font-weight:700; color:var(--oticon); font-size:15px; display:inline-flex; align-items:center; gap:6px; transition:gap .25s;}
.door-card:hover .door-arrow{gap:12px;}

/* Trust strip */
.trust-strip{background:var(--dark-950); padding:52px 0; position:relative; overflow:hidden;}
.trust-inner{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; position:relative; z-index:1;}
.trust-num{font-family:var(--f-display); font-size:var(--fs-heading-lg); font-weight:700; color:#fff; letter-spacing:-.02em; line-height:1;}
.trust-lbl{font-size:var(--fs-small); color:rgba(255,255,255,.62); margin-top:8px; line-height:1.4;}

/* Stat blocks */
.stat-block{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:26px; text-align:center; transition:transform .3s var(--ease-smooth), box-shadow .3s;}
.stat-block:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm);}
.stat-block.on-dark{background:rgba(255,255,255,.05); border-color:var(--dark-line); backdrop-filter:blur(10px);}
.stat-num{font-family:var(--f-display); font-size:var(--fs-heading-lg); font-weight:700; color:var(--oticon); letter-spacing:-.02em; line-height:1;}
.stat-num.on-dark{color:#F2AEDA;}
.stat-lbl{font-size:var(--fs-small); color:var(--ink-soft); margin-top:8px; line-height:1.4;}
.stat-lbl.on-dark{color:rgba(255,255,255,.64);}

/* Scenario steps (sensores) */
.scenario-step{display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--dark-line); transition:transform .3s var(--ease-smooth), background .3s;}
.scenario-step:hover{transform:translateY(-4px); background:rgba(255,255,255,.08);}
.scenario-num{
  width:40px; height:40px; background:linear-gradient(135deg,var(--oticon),var(--oticon-magenta)); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:16px;
  box-shadow:0 6px 18px -4px rgba(198,22,141,.5);
}

/* Feature cards (app) */
.feature-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:transform .3s var(--ease-smooth), box-shadow .3s;}
.feature-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.feature-icon{
  width:52px; height:52px; background:var(--oticon-lt); border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:16px;
  transition:transform .3s var(--ease-smooth); overflow:hidden;
}
.feature-icon img{width:100%; height:100%; object-fit:cover; border-radius:inherit;}
.feature-card:hover .feature-icon{transform:scale(1.1) rotate(4deg);}

/* Variante "phone mockup" — mostra a captura de tela do app por completo,
   com as mesmas proporções/posicionamento de um print real de iPhone
   (imagem no topo, título e texto logo abaixo). */
.feature-icon.feature-icon-phone{
  width:100%; max-width:182px; height:auto; aspect-ratio:640/1298;
  background:linear-gradient(160deg,#f7edf3,#fff); border-radius:22px;
  box-shadow:var(--shadow-sm); margin-bottom:20px;
}
.feature-icon.feature-icon-phone img{object-fit:contain; padding:0; border-radius:inherit;}
.feature-card:hover .feature-icon.feature-icon-phone{transform:scale(1.035) rotate(1.2deg); box-shadow:var(--shadow-md);}
.feature-title{font-family:var(--f-display); font-size:17.5px; font-weight:700; margin-bottom:8px;}

/* Phone mockup (substitui prints de app) */
.phone-mock{
  border-radius:16px; background:linear-gradient(160deg,#2A0A20,#410032);
  padding:14px; margin-top:16px; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.phone-mock .row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.phone-mock .pill{height:8px; border-radius:6px; background:rgba(255,255,255,.14);}
.phone-mock .pill.short{width:40%;}
.phone-mock .pill.full{width:100%;}
.phone-mock .bar{height:6px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:6px;}
.phone-mock .bar span{display:block; height:100%; background:linear-gradient(90deg,var(--oticon-magenta),#F2AEDA); border-radius:4px;}
.phone-mock .chip-lr{width:26px; height:26px; border-radius:50%; background:rgba(242,174,218,.18); color:#F2AEDA; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;}

/* Carrossel automático (ex.: SmartCharger) */
.carousel{position:relative; width:100%; aspect-ratio:1/1; background:linear-gradient(160deg,#fbeaf3,#fff);}
.tech-charger-grid > .tech-charger-copy{order:1;}
.tech-charger-grid > .tech-charger-carousel{order:2;}
@media(max-width:900px){
  .tech-charger-grid > .tech-charger-carousel{order:1; width:100%; min-height:280px;}
  .tech-charger-grid > .tech-charger-copy{order:2;}
}
.carousel-track{position:relative; width:100%; height:100%; min-height:inherit;}
.carousel-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s var(--ease-smooth);}
.carousel-slide.is-active{opacity:1; visibility:visible;}
.carousel-slide img{width:100%; height:100%; object-fit:contain; padding:32px;}
.carousel-dots{position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:8px; z-index:2;}
.carousel-dot{width:8px; height:8px; border-radius:50%; background:rgba(134,12,88,.2); border:none; padding:0; cursor:pointer; transition:background .3s var(--ease-smooth), transform .3s var(--ease-smooth);}
.carousel-dot.is-active{background:var(--oticon); transform:scale(1.35);}
.carousel-dot:hover{background:var(--oticon-magenta);}

/* ============================================================
   TABELA DE MODELOS
   ============================================================ */
.table-wrap{overflow-x:auto; border-radius:var(--r); box-shadow:var(--shadow-sm);}
.model-table{width:100%; border-collapse:separate; border-spacing:0; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-width:560px;}
.model-table th,.model-table td{padding:18px 20px; text-align:left; border-bottom:1px solid var(--line); font-size:15px;}
.model-table th{font-family:var(--f-display); font-weight:700; background:var(--oticon-lt); color:var(--oticon-mauve-700);}
.model-table td:first-child{color:var(--ink-soft); font-weight:600;}
.model-table tr:last-child td{border-bottom:none;}
.model-table tbody tr{transition:background .2s;}
.model-table tbody tr:hover{background:rgba(134,12,88,.035);}
.check-yes{color:var(--green-ok); font-weight:700; font-size:17px;}
.check-no{color:var(--ink-faint);}

/* Cross-sell card */
.cross-card{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:26px;}
.cross-thumb{width:120px; height:96px; border-radius:16px; flex:none; overflow:hidden; box-shadow:var(--shadow-sm);}
.cross-thumb img{width:100%; height:100%; object-fit:cover;}

/* ============================================================
   AUTORIDADE
   ============================================================ */
.authority-badge{
  display:inline-flex; align-items:center; gap:14px; background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:16px 22px; box-shadow:var(--shadow-sm);
}
.authority-icon{width:42px; height:42px; background:var(--oticon-lt); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex:none;}

/* ============================================================
   TESTEMUNHOS
   ============================================================ */
.testi-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:transform .3s var(--ease-smooth), box-shadow .3s;}
.testi-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.testi-avatar{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:16px; color:#fff; margin-bottom:16px;
  background:linear-gradient(135deg,var(--oticon),var(--oticon-magenta));
}
.testi-quote{font-size:16px; line-height:1.6; color:var(--ink); font-style:italic;}
.testi-quote::before{content:"“"; color:var(--oticon); font-weight:700;}
.testi-quote::after{content:"”"; color:var(--oticon); font-weight:700;}
.testi-author{font-size:13.5px; color:var(--ink-faint); margin-top:14px; font-weight:600;}
@media(max-width:640px){
  .testi-card{padding:16px 14px; border-radius:14px;}
  .testi-card:hover{transform:translateY(-3px);}
  .testi-avatar{width:36px; height:36px; font-size:12px; margin-bottom:10px;}
  .testi-quote{font-size:13.5px; line-height:1.45;}
  .testi-author{font-size:12px; margin-top:10px;}
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.final-cta{position:relative; text-align:center; overflow:hidden;}
.avail-note{
  font-size:15px; color:rgba(255,255,255,.55); margin-top:22px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.avail-note::before{
  content:""; width:16px; height:16px; border-radius:50%;
  background:#4ade80; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(74,222,128,.55);
  animation:availPulse 1.8s ease-out infinite;
}
@keyframes availPulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(74,222,128,.55); }
  70%{ transform:scale(1.08); box-shadow:0 0 0 12px rgba(74,222,128,0); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--dark-950); color:rgba(255,255,255,.85); padding:64px 0 32px; position:relative; overflow:hidden;}
.footer-logo{display:flex; align-items:center; gap:8px; font-family:var(--f-display); font-size:19px; font-weight:700; margin-bottom:14px; color:#fff;}
.footer-logo img{height:102px; width:auto;}
.footer-col-title{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#F2AEDA; margin-bottom:16px;}
.footer-nav li{margin-bottom:12px;}
.footer-nav a{font-size:15px; color:rgba(255,255,255,.65); transition:color .2s, padding-left .2s;}
.footer-nav a:hover{color:#fff; padding-left:4px;}
.footer-contact-item{font-size:15px; color:rgba(255,255,255,.65); margin-bottom:12px; display:flex; align-items:center; gap:10px; text-decoration:none; transition:color .2s;}
a.footer-contact-item:hover{color:#fff;}
.footer-contact-icon{width:18px; height:18px; flex-shrink:0;}
.footer-locations{margin-top:40px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); position:relative; z-index:1;}
.footer-locations-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px 28px;}
.footer-location-item{display:flex; align-items:flex-start; gap:10px;}
.footer-location-item .footer-contact-icon{margin-top:3px;}
.footer-location-item strong{display:block; font-size:14px; font-weight:700; color:#fff; margin-bottom:3px;}
.footer-location-item span{display:block; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.6);}
@media(max-width:900px){.footer-locations-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.footer-locations-grid{grid-template-columns:1fr;}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; position:relative; z-index:1;}
.footer-bottom p{font-size:13px; color:rgba(255,255,255,.42);}

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.float-wa{
  position:fixed; bottom:26px; right:26px; z-index:999;
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.float-wa-bubble{
  background:#fff; color:var(--ink); font-weight:600; font-size:13.5px; line-height:1.35;
  padding:12px 16px; border-radius:16px; max-width:220px;
  box-shadow:0 12px 30px -8px rgba(42,10,32,.24);
  position:relative;
  transition:transform .3s var(--ease-smooth), box-shadow .3s, opacity .3s;
}
.float-wa-bubble::after{
  content:""; position:absolute; right:-5px; top:50%;
  width:12px; height:12px; background:#fff; border-radius:2px;
  transform:translateY(-50%) rotate(45deg);
  box-shadow:2px -2px 4px -3px rgba(42,10,32,.12);
}
.float-wa:hover .float-wa-bubble{transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(42,10,32,.3);}
.float-wa-btn{
  position:relative; width:60px; height:60px; border-radius:50%; flex-shrink:0;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -6px rgba(37,211,102,.55);
  transition:transform .3s var(--ease-smooth), box-shadow .3s;
}
.float-wa:hover .float-wa-btn{transform:scale(1.06); box-shadow:0 14px 32px -6px rgba(37,211,102,.65);}
.float-wa-btn::before{
  content:""; position:absolute; inset:-12px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(255,205,190,.85) 0%, rgba(255,205,190,0) 72%);
  animation:waGlow 2.4s ease-in-out infinite;
}
.float-wa-icon{width:26px; height:26px; flex-shrink:0;}
@keyframes waGlow{ 0%,100%{transform:scale(1); opacity:.8;} 50%{transform:scale(1.2); opacity:1;} }
.float-wa-bubble-mob{display:none;}
@media(max-width:640px){
  .float-wa-bubble-desk{display:none;}
  .float-wa-bubble-mob{display:block; max-width:150px; font-size:12.5px; padding:10px 12px;}
  .float-wa{bottom:20px; right:20px;}
  .float-wa-btn{width:54px; height:54px;}
}

/* ============================================================
   REVEAL ON SCROLL (mesma curva usada pelo site real: cubic-bezier(.16,1,.3,1))
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.94);}
.reveal-scale.is-visible{opacity:1; transform:scale(1); transition:opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal);}

.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* Micro-interação genérica em ícones/imagens ao passar o mouse */
.hoverable{transition:transform .35s var(--ease-smooth);}
.hoverable:hover{transform:translateY(-4px);}

@media(max-width:900px){
  .door-grid{grid-template-columns:1fr;}
  .trust-inner{grid-template-columns:1fr; gap:32px;}
  .hero{min-height:92vh;}
  .cross-card{flex-direction:column; align-items:stretch;}
  .cross-thumb{width:100%; height:180px;}
  .nav-inner{gap:14px;}
}
@media(max-width:640px){
  .btn{width:100%;}
  .btn-row .btn{width:auto;}
  .btn-row{flex-direction:column; align-items:stretch;}
  .btn-row .btn{width:100%;}
  .nav-ctas{display:none;}
  .feature-icon.feature-icon-phone{
    width:148px; max-width:148px; height:auto; aspect-ratio:640/1298;
    margin-left:auto; margin-right:auto;
  }
  .grid-4 .feature-card{padding:18px 16px; text-align:center;}
  .grid-4 .feature-title{font-size:15px; margin-bottom:4px;}
  .grid-4 .body-sm{font-size:12.5px; line-height:1.4;}
  .carousel-slide img{padding:20px;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .tech-charger-carousel{margin-bottom:12px; min-height:min(100vw - 48px, 400px);}
}