/* ============================================================
   TELVA CLEAN · fundação de design
   Marca: gota + sofá · azul de água · limpeza especializada
   ============================================================ */

/* ---------- fontes da marca ---------- */
@font-face{font-family:'Mosvita';src:url('../fonts/Mosvita-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Mosvita';src:url('../fonts/Mosvita-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Mosvita';src:url('../fonts/Mosvita-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Mosvita';src:url('../fonts/Mosvita-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'NHaas';src:url('../fonts/NHaas-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'NHaas';src:url('../fonts/NHaas-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* marca */
  --brand:#1D33CC;
  --brand-2:#0099FF;
  --brand-lift:#38B6FF;
  --ink:#0E1644;
  --ink-80:#2B3358;
  --ink-55:#5F6685;
  --ink-35:#6B7391;

  /* superfícies claras, o "clean" que o cliente pediu */
  --paper:#FBFCFE;
  --paper-2:#F2F5FB;
  --paper-3:#E8EDF7;
  --line:rgba(14,22,68,.10);
  --line-soft:rgba(14,22,68,.06);

  /* gradientes */
  --grad-brand:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  --grad-deep:linear-gradient(160deg,#0E1644 0%,#141F63 55%,#1D33CC 130%);

  /* tipografia fluida */
  --fs-display:clamp(2.75rem,7.2vw,6.5rem);
  --fs-h2:clamp(2rem,4.4vw,3.75rem);
  --fs-h3:clamp(1.25rem,2vw,1.75rem);
  --fs-lead:clamp(1.0625rem,1.55vw,1.375rem);
  --fs-body:clamp(1rem,1.15vw,1.0625rem);
  --fs-small:.875rem;
  --fs-micro:.75rem;

  /* ritmo espacial */
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --maxw:1240px;
  --section-y:clamp(5rem,11vw,10rem);
  --r-sm:14px; --r-md:22px; --r-lg:30px; --r-xl:40px; --r-pill:999px;

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:'NHaas',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink-80);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brand-2);color:#fff}

h1,h2,h3,h4,.disp{
  font-family:'Mosvita',sans-serif;
  color:var(--ink);
  letter-spacing:-.028em;
  line-height:1.04;
  font-weight:700;
  text-wrap:balance;
}
h3,h4{letter-spacing:-.018em;line-height:1.15}
p{text-wrap:pretty}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}

.eyebrow{
  font-family:'Mosvita',sans-serif;font-weight:600;
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{
  content:"";width:1.75rem;height:1px;background:var(--grad-brand);opacity:.8;
}
.lead{font-size:var(--fs-lead);color:var(--ink-55);line-height:1.5;max-width:62ch}

/* ============================================================
   LIQUID GLASS · refração real via feDisplacementMap
   .glass          superfície de vidro sobre fundo claro
   .glass--dark    sobre fundo escuro
   .glass--lens    adiciona a refração (usar com moderação, é caro)
   ============================================================ */
.glass{
  position:relative;
  isolation:isolate;
  border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.46));
  backdrop-filter:blur(18px) saturate(185%) brightness(1.04);
  -webkit-backdrop-filter:blur(18px) saturate(185%) brightness(1.04);
  /* a pilha do vidro vira token: o hover soma o glow da marca sem
     precisar reescrever nenhuma das sombras internas */
  --glass-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    inset 1.5px 2.5px 0 -1.5px rgba(255,255,255,.95),
    inset -1.5px -2px 0 -1.5px rgba(255,255,255,.7),
    inset -2px -7px 1px -6px rgba(255,255,255,.55),
    inset 0 1px 4px -1px rgba(14,22,68,.10),
    inset -1px 2px 0 -1.5px rgba(14,22,68,.14),
    0 1px 2px rgba(14,22,68,.04),
    0 8px 24px -8px rgba(14,22,68,.10),
    0 24px 56px -24px rgba(14,22,68,.14);
  box-shadow:var(--glass-shadow);
}
/* aro especular que percorre a borda */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--rim-from,210deg) at 50% 50%,
    rgba(255,255,255,.05) 0deg, rgba(255,255,255,.85) 90deg,
    rgba(255,255,255,.08) 180deg, rgba(255,255,255,.6) 285deg,
    rgba(255,255,255,.05) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;z-index:2;opacity:.9;
}
.glass > *{position:relative;z-index:3}

.glass--dark{
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 1.5px 2.5px 0 -1.5px rgba(255,255,255,.5),
    inset -1.5px -2px 0 -1.5px rgba(255,255,255,.28),
    inset 0 1px 6px -2px rgba(0,0,0,.35),
    0 18px 48px -20px rgba(0,0,0,.55);
  color:#fff;
}
.glass--dark::after{opacity:.45}
.glass--dark h1,.glass--dark h2,.glass--dark h3,.glass--dark h4{color:#fff}

/* Refração real. ATENÇÃO: filter distorce TUDO dentro do elemento,
   inclusive texto. Use .glass--lens só em camada decorativa vazia
   (span aria-hidden sobreposto), nunca num card que contenha conteúdo. */
.glass--lens{filter:url(#tc-lens)}
.glass--lens:not(:empty){filter:none}
@supports not (backdrop-filter:blur(1px)){
  .glass{background:rgba(255,255,255,.92)}
  .glass--dark{background:rgba(20,31,99,.92)}
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:'Mosvita',sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:-.01em;padding:1.05rem 2.1rem;border-radius:var(--r-pill);
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-out);
}
.btn:hover,.btn:focus-visible{will-change:transform}
.btn:active{transform:scale(.965)}

.btn--primary{
  color:#fff;background:var(--grad-brand);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -2px 6px -2px rgba(0,0,0,.28),
    0 2px 6px rgba(29,51,204,.24),
    0 14px 34px -12px rgba(29,51,204,.55);
}
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  opacity:0;transition:opacity .45s var(--ease-out);
}
.btn--primary:hover{transform:translateY(-2px) scale(1.015);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 10px rgba(29,51,204,.28),0 22px 48px -14px rgba(29,51,204,.6)}
.btn--primary:hover::before{opacity:1}
/* varredura de brilho no hover */
.btn--primary::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease-out);pointer-events:none;
}
.btn--primary:hover::after{left:135%}

.btn--glass{
  color:var(--ink);
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.4));
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 1.2px 2px 0 -1.2px rgba(255,255,255,.95),
    inset -1.2px -2px 0 -1.2px rgba(255,255,255,.65),
    inset 0 1px 4px -1px rgba(14,22,68,.12),
    0 6px 18px -8px rgba(14,22,68,.16);
}
.btn--glass:hover{transform:translateY(-2px) scale(1.015);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 12px 30px -10px rgba(14,22,68,.22)}

.btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(29,51,204,.4);transform:translateY(-2px)}

/* ---------- utilidades ---------- */
.grad-text{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(70px);opacity:.5;
}

/* ---------- reveals (a camada JS só troca a classe) ---------- */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0);will-change:transform,opacity}
[data-reveal].is-in{will-change:auto;opacity:1;transform:none;
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal-stagger] > *{opacity:0;transform:translate3d(0,22px,0)}
[data-reveal-stagger].is-in > *{will-change:auto;opacity:1;transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal-stagger].is-in > *:nth-child(1){--tc-in-delay:.05s;transition-delay:var(--tc-in-delay)}
[data-reveal-stagger].is-in > *:nth-child(2){--tc-in-delay:.13s;transition-delay:var(--tc-in-delay)}
[data-reveal-stagger].is-in > *:nth-child(3){--tc-in-delay:.21s;transition-delay:var(--tc-in-delay)}
[data-reveal-stagger].is-in > *:nth-child(4){--tc-in-delay:.29s;transition-delay:var(--tc-in-delay)}
[data-reveal-stagger].is-in > *:nth-child(5){--tc-in-delay:.37s;transition-delay:var(--tc-in-delay)}
[data-reveal-stagger].is-in > *:nth-child(6){--tc-in-delay:.45s;transition-delay:var(--tc-in-delay)}
[data-reveal-stagger].is-in > *:nth-child(7){--tc-in-delay:.53s;transition-delay:var(--tc-in-delay)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important}
}