/* AIDEA — site institucional · design system das telas "Home - *.dc.html" (Claude Design, 12/07/2026) */

@font-face{
  font-family:'Ouma Devanagari';
  src:url('fonts/Ouma-Devanagari-Bold.otf') format('opentype');
  font-weight:700;
  font-display:swap;
}

:root{
  --font-display:'Ouma Devanagari','Nunito Sans',sans-serif;
  --teal-deep:#16292B;
  --teal:#233F42;
  --mist:#9DBABC;
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;
  background:var(--teal-deep);
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:#fff;text-decoration:none}

/* fundo em gradiente no wrapper da página (não usar background-attachment:fixed) */
.page{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:linear-gradient(160deg,#28494c 0%,#233F42 48%,#16292B 100%);
}

/* linhas-A de fundo, atravessando a página inteira */
.alines{position:absolute;inset:0;pointer-events:none}
.alines svg{width:100%;height:100%}
@keyframes trace{from{stroke-dashoffset:0}to{stroke-dashoffset:-1600}}
.traceline{stroke-dasharray:10 1590;animation:trace 9s linear infinite}
.traceline.d2{animation-duration:13s;animation-delay:-4s}

/* entrada animada por tempo (sem IntersectionObserver) */
@keyframes heroin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hin{opacity:0;animation:heroin .8s cubic-bezier(.2,.8,.2,1) forwards}

/* nav */
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:22px 56px;gap:14px}
.nav .brand{display:flex;align-items:center;gap:10px}
.nav .brand img{height:26px;display:block}
.nav .brand span{font:800 18px/1 'Nunito Sans';color:#fff;letter-spacing:.02em}
.nav nav{display:flex;align-items:center;gap:30px}
.nav nav a:not(.pill){font:600 13px 'Nunito Sans';color:rgba(255,255,255,.75);white-space:nowrap}
.nav nav a:not(.pill):hover{color:#fff}
.nav nav a[aria-current=page]{color:#fff}

/* botões-pílula */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--teal);
  font:800 13px 'Nunito Sans';padding:11px 20px;border-radius:999px;white-space:nowrap;
}
.pill:hover{background:#EEF3F2;color:var(--teal)}
.pill.lg{font-size:15px;padding:16px 28px;gap:9px}
.pill.outline{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);
  font-weight:700;padding:15px 26px;
}
.pill.outline:hover{background:transparent;border-color:#fff;color:#fff}

/* eyebrow + títulos display */
.eyebrow{font:700 12px/1 'Nunito Sans';letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:#fff}

/* cards translúcidos */
.tcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px}

/* footer */
.footer{
  position:relative;border-top:1px solid rgba(255,255,255,.1);
  padding:26px 56px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.footer span, .footer a{font:500 12px 'Nunito Sans';color:rgba(255,255,255,.45)}
.footer a:hover{color:#fff}

/* (13/07) trava de prefers-reduced-motion REMOVIDA a pedido do Igor — as animações
   aparecem para todos, inclusive em sistemas com "reduzir movimento" ativado */

/* ============ mobile ============ */
@media (max-width:720px){
  .nav{padding:16px 20px;gap:10px}
  .nav .brand img{height:20px}
  .nav .brand span{font-size:16px}
  .nav nav{gap:14px}
  .nav nav a{font-size:12px}
  .pill{font-size:12px;padding:9px 14px}
  .footer{padding:20px;flex-direction:column;align-items:flex-start;gap:6px}
}