/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --paper:#FBFBFD;
  --surface:#FFFFFF;
  --surface-2:#F1F2F4;
  --surface-3:#F6F6F8;
  --ink:#1D1D1F;
  --ink-2:#5E5E63;
  --ink-3:#76767C;
  --line:rgba(29,29,31,.12);
  --line-soft:rgba(29,29,31,.075);
  --accent:#0B63F6;
  --accent-ink:#0958DB;
  --night:#0A0A0C;
  --night-ink:#F5F5F7;
  --night-ink-2:#9A9AA0;
  --night-line:rgba(255,255,255,.12);
  --shadow-s:0 1px 2px rgba(0,0,0,.035), 0 10px 28px rgba(0,0,0,.06);
  --shadow-m:0 2px 6px rgba(0,0,0,.045), 0 24px 64px rgba(0,0,0,.105);

  /* grid 8pt */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --section:88px;
  --container:1120px;
  --radius:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (min-width:768px){ :root{ --section:120px; } }

:root{ color-scheme:light; }

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.032em; line-height:1.05; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:22px; }
@media (min-width:768px){ .wrap{ padding-inline:32px; } }

.section{ padding-block:var(--section); }
.section--tight{ padding-block:calc(var(--section) * .62); }

.display{ font-size:clamp(2.45rem,7.4vw,4.1rem); }
.h2{ font-size:clamp(1.95rem,4.6vw,3rem); }
.h3{ font-size:clamp(1.25rem,2.2vw,1.55rem); letter-spacing:-.024em; }
.lede{ font-size:clamp(1.05rem,1.9vw,1.3rem); line-height:1.5; color:var(--ink-2); letter-spacing:-.016em; }
.body-2{ color:var(--ink-2); font-size:.98rem; line-height:1.62; }
.measure{ max-width:38ch; }
.measure-wide{ max-width:60ch; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:50px;
  padding-inline:25px;
  border-radius:999px;
  font-size:.96rem;
  font-weight:500;
  letter-spacing:-.015em;
  transition:
    transform .25s var(--ease),
    background-color .25s var(--ease),
    opacity .25s var(--ease),
    border-color .25s var(--ease),
    box-shadow .25s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn--primary{
  background:var(--accent);
  color:#fff;
  box-shadow:
    0 1px 2px rgba(11,99,246,.22),
    0 8px 20px rgba(11,99,246,.12);
}
.btn--primary:hover{ background:var(--accent-ink); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); background:var(--surface); }
.btn--ghost:hover{ border-color:var(--ink-3); }
.btn--sm{ min-height:38px; padding-inline:18px; font-size:.9rem; }
.btn--night{ background:var(--night-ink); color:var(--night); }
.btn--night:hover{ opacity:.85; }

.link{
  color:var(--accent); font-weight:500; font-size:1rem;
  display:inline-flex; align-items:center; gap:6px;
}
.link:hover{ text-decoration:underline; text-underline-offset:4px; }
.link svg{ transition:transform .25s var(--ease); }
.link:hover svg{ transform:translateX(3px); }

/* ============================================================
   NAVBAR — colada na hero, solta no scroll
   ============================================================ */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:120;
  padding:0;
  transition:padding .5s var(--ease);
}

.nav__bar{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  max-width:100%;
  height:62px;
  margin-inline:auto;
  padding-inline:22px;
  background:transparent;
  border:1px solid transparent;
  border-radius:0;
  transition:
    max-width .5s var(--ease),
    height .5s var(--ease),
    border-radius .5s var(--ease),
    background-color .5s var(--ease),
    border-color .5s var(--ease),
    box-shadow .5s var(--ease),
    padding .5s var(--ease),
    backdrop-filter .5s var(--ease);
}

.nav.is-detached{
  padding:10px 14px;
}

.nav.is-detached .nav__bar{
  max-width:1060px;
  height:56px;
  padding-inline:18px 10px;
  border-color:rgba(0,0,0,.08);
  border-radius:18px;
  background:rgba(239,240,243,.82);
  -webkit-backdrop-filter:saturate(185%) blur(26px);
  backdrop-filter:saturate(185%) blur(26px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.78) inset,
    0 12px 34px rgba(0,0,0,.075);
}

@media (min-width:768px){
  .nav__bar{
    height:66px;
    padding-inline:32px;
  }

  .nav.is-detached{
    padding:12px 20px;
  }
}

.brand{
  display:flex;
  align-items:baseline;
  gap:7px;
  font-size:1.06rem;
  letter-spacing:-.03em;
  white-space:nowrap;
}

.brand b{
  font-weight:700;
}

.brand span{
  color:var(--ink-2);
  font-size:.92rem;
  font-weight:400;
}

.nav__links{
  display:none;
  align-items:center;
  gap:30px;
  margin-left:auto;
}

.nav__links a{
  color:var(--ink-2);
  font-size:.94rem;
  font-weight:450;
  transition:color .2s var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current="page"]{
  color:var(--ink);
}

.nav__cta{
  display:none;
  margin-left:22px;
}

@media (min-width:920px){
  .nav__links{
    display:flex;
  }

  .nav__cta{
    display:inline-flex;
  }
}

/* ============================================================
   BOTÃO HAMBÚRGUER
   ============================================================ */

.burger{
  position:relative;

  margin-left:auto;

  width:42px;
  height:42px;

  flex:0 0 42px;

  border-radius:12px;

  transition:
    background-color .3s var(--ease),
    transform .3s var(--ease);
}


/* As duas linhas passam a ocupar exatamente
   o mesmo sistema de coordenadas. */
.burger span{
  position:absolute;

  top:50%;
  left:50%;

  display:block;

  width:19px;
  height:1.5px;

  margin:0;

  background:var(--ink);

  border-radius:999px;

  transform-origin:center;

  transition:
    transform .38s var(--ease),
    opacity .25s var(--ease);
}


/* Linha superior */
.burger span:first-child{
  transform:
    translate(-50%, -5px);
}


/* Linha inferior */
.burger span:last-child{
  transform:
    translate(-50%, 5px);
}


/* Ao abrir o menu, as duas linhas vão para
   o mesmo centro e formam um X perfeito. */
.nav.is-open .burger span:first-child{
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.nav.is-open .burger span:last-child{
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


/* Feedback sutil no toque */
.burger:active{
  transform:scale(.94);
}


@media (hover:hover){

  .burger:hover{
    background:var(--surface-2);
  }

}


@media (min-width:920px){

  .burger{
    display:none;
  }

}

/* ============================================================
   MENU MOBILE
   ============================================================ */

.sheet{
  position:fixed;

  inset:0;

  z-index:110;

  display:flex;
  flex-direction:column;

  justify-content:flex-start;

  gap:0;

  /*
    Espaço da navbar + respiro.
    Faz o menu começar abaixo da marca.
  */
  padding:
    104px
    28px
    32px;

  background:
    color-mix(
      in srgb,
      var(--paper) 92%,
      transparent
    );

  -webkit-backdrop-filter:
    blur(28px)
    saturate(180%);

  backdrop-filter:
    blur(28px)
    saturate(180%);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .35s var(--ease),
    visibility .35s;
}


/* Menu aberto */
.sheet.is-open{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}


/* Links */
.sheet > a:not(.btn){
  display:flex;

  align-items:center;

  min-height:58px;

  padding:15px 0;

  border-bottom:
    1px solid
    var(--line-soft);

  color:var(--ink);

  font-size:1.18rem;

  font-weight:500;

  line-height:1.2;

  letter-spacing:-.025em;

  opacity:0;

  transform:translateY(10px);

  transition:
    opacity .4s var(--ease),
    transform .4s var(--ease),
    color .2s var(--ease);
}


/* Entrada escalonada */
.sheet.is-open > a{
  opacity:1;

  transform:none;
}


.sheet.is-open > a:nth-child(1){
  transition-delay:.05s;
}


.sheet.is-open > a:nth-child(2){
  transition-delay:.09s;
}


.sheet.is-open > a:nth-child(3){
  transition-delay:.13s;
}


.sheet.is-open > a:nth-child(4){
  transition-delay:.17s;
}


/* CTA */
.sheet .btn{
  align-self:flex-start;

  height:46px;

  margin-top:28px;

  padding-inline:22px;

  font-size:.95rem;

  opacity:0;

  transform:translateY(10px);
}


.sheet.is-open .btn{
  opacity:1;

  transform:none;

  transition-delay:.21s;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:126px; padding-bottom:var(--section); text-align:center; position:relative; isolation:isolate; }
.hero::before{ content:""; position:absolute; inset:0 0 auto; height:min(720px,72vh); z-index:-1; pointer-events:none; background:radial-gradient(55% 48% at 50% 24%, rgba(11,99,246,.10), transparent 72%); }
@media (min-width:768px){ .hero{ padding-top:168px; } }
.hero h1{ margin-inline:auto; max-width:15ch; }
.hero .lede{ margin:22px auto 0; max-width:54ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }

/* sequência de entrada */
.rise{ opacity:0; transform:translateY(16px); }
.is-ready .rise{ animation:rise .85s var(--ease) forwards; }
.is-ready .rise-1{ animation-delay:.05s } .is-ready .rise-2{ animation-delay:.14s }
.is-ready .rise-3{ animation-delay:.23s } .is-ready .rise-4{ animation-delay:.33s }
.is-ready .rise-5{ animation-delay:.45s }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* mockup do navegador */
.stage{ position:relative; margin-top:56px; }
.stage::before{
  content:"";
  position:absolute;

  left:50%;
  top:42%;

  width:min(900px, 95vw);
  height:520px;

  transform:translate(-50%, -50%);

  background:
    radial-gradient(
      circle,
      rgba(11, 99, 246, .12) 0%,
      rgba(11, 99, 246, .05) 35%,
      transparent 70%
    );

  filter:blur(60px);

  pointer-events:none;

  z-index:0;
}


.browser{
  position:relative; z-index:1;
  max-width:920px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:0 2px 8px rgba(0,0,0,.04), 0 34px 90px rgba(0,0,0,.12); overflow:hidden; text-align:left;
}
@media (min-width:768px){ .browser{ border-radius:22px; } }
.browser__bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; border-bottom:1px solid var(--line-soft);
  background:var(--surface-3);
}
.dot{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.browser__url{
  margin-left:10px; flex:1; max-width:260px; height:22px; border-radius:6px;
  background:var(--surface); border:1px solid var(--line-soft);
  display:flex; align-items:center; padding-inline:9px;
  font-size:11px; color:var(--ink-3); letter-spacing:-.005em;
}
.browser__body{ padding:20px; display:grid; gap:14px; }
@media (min-width:768px){ .browser__body{ padding:30px 30px 34px; gap:18px; } }

.sk{ background:var(--surface-2); border-radius:8px; opacity:0; transform:translateY(10px); }
.is-ready .sk{ animation:rise .7s var(--ease) forwards; }
.is-ready .sk-a{ animation-delay:.55s } .is-ready .sk-b{ animation-delay:.66s }
.is-ready .sk-c{ animation-delay:.77s } .is-ready .sk-d{ animation-delay:.88s }
.is-ready .sk-e{ animation-delay:.99s }
.sk--title{ height:26px; width:62%; background:color-mix(in srgb, var(--ink) 82%, var(--surface)); }
.sk--line{ height:11px; width:80%; }
.sk--line.short{ width:46%; }
.sk--btn{ height:34px; width:132px; border-radius:999px; background:var(--accent); }
.sk--hero{ height:clamp(96px,17vw,150px); border-radius:12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2)); }
.sk--row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sk--card{ height:62px; border-radius:10px; border:1px solid var(--line-soft); background:var(--surface-2); }

.chip{
  position:absolute; z-index:2; right:2%; bottom:-14px;
  display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:14px; padding:11px 15px; box-shadow:var(--shadow-s);
  font-size:.88rem; font-weight:500;
  opacity:0; transform:translateY(10px) scale(.96);
}
.is-ready .chip{ animation:chip .7s var(--ease) 1.25s forwards; }
@keyframes chip{ to{ opacity:1; transform:none; } }
.chip i{ width:8px; height:8px; border-radius:50%; background:#30C463; display:block; }
@media (min-width:768px){ .chip{ right:-10px; bottom:-20px; } }

/* ============================================================
   FAIXA DE NICHOS
   ============================================================ */
.strip{ border-block:1px solid var(--line); padding-block:22px; overflow:hidden; background:rgba(255,255,255,.42); }
.strip__label{ text-align:center; color:var(--ink-3); font-size:.88rem; margin-bottom:16px; }
.marquee{ display:flex; gap:44px; width:max-content; animation:slide 38s linear infinite; }
.marquee span{ color:var(--ink-2); font-size:1.02rem; font-weight:500; letter-spacing:-.02em; white-space:nowrap; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   CABEÇALHO DE SEÇÃO
   ============================================================ */
.head{ max-width:44ch; }
.head p{ margin-top:16px; }
.head--center{ margin-inline:auto; text-align:center; }

/* revelação discreta */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   PRODUTOS
   ============================================================ */
.products{ display:grid; gap:16px; margin-top:52px; }
@media (min-width:900px){ .products{ grid-template-columns:repeat(3,1fr); gap:20px; } }
.product{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:20px; padding:26px 24px 24px;
  display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,.025), 0 10px 30px rgba(0,0,0,.035);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.product--lead{ box-shadow:var(--shadow-m); border-color:transparent; }
@media (hover:hover){ .product:hover{ transform:translateY(-4px); border-color:rgba(0,0,0,.1); box-shadow:0 18px 48px rgba(0,0,0,.07); } }
.product__art{ height:104px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line-soft); margin-bottom:22px; overflow:hidden; position:relative; }
.product h3{ margin-bottom:10px; }
.product__desc{ color:var(--ink-2); font-size:.98rem; line-height:1.55; }
.product__list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:9px; }
.product__list li{ font-size:.94rem; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start; line-height:1.45; }
.product__list svg{ flex:0 0 auto; margin-top:4px; color:var(--accent); }
.product__foot{ margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.product__meta{ font-size:.86rem; color:var(--ink-3); }

/* mini artes dos produtos (CSS puro) */
.art-lp{ padding:14px; display:grid; gap:7px; align-content:start; }
.art-lp i{ display:block; height:7px; border-radius:4px; background:color-mix(in srgb, var(--ink) 16%, transparent); }
.art-lp i:nth-child(1){ width:52%; height:12px; background:color-mix(in srgb, var(--ink) 45%, transparent); }
.art-lp i:nth-child(2){ width:78%; }
.art-lp i:nth-child(3){ width:34%; height:16px; border-radius:999px; background:var(--accent); margin-top:4px; }
.art-inst{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:14px; }
.art-inst i{ border-radius:7px; background:color-mix(in srgb, var(--ink) 9%, transparent); border:1px solid var(--line-soft); }
.art-inst i:first-child{ background:color-mix(in srgb, var(--accent) 22%, transparent); }
.art-cust{ position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:20px 20px; }
.art-cust::after{
  content:""; position:absolute; left:22%; top:26%; width:56%; height:48%;
  border-radius:10px; border:1.5px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ============================================================
   BLOCOS DE APROFUNDAMENTO
   ============================================================ */
.feature{ display:grid; gap:34px; align-items:center; }
.feature + .feature{ margin-top:var(--section); }
@media (min-width:900px){
  .feature{ grid-template-columns:1fr 1.06fr; gap:72px; }
  .feature--flip .feature__text{ order:2; }
}
.feature__text h3{ font-size:clamp(1.6rem,3.2vw,2.15rem); }
.feature__text p{ margin-top:16px; color:var(--ink-2); font-size:1.03rem; }
.feature__text .link{ margin-top:22px; }
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:28px; box-shadow:var(--shadow-s);
  min-height:280px; display:flex; align-items:center; justify-content:center;
}

/* visual 1 — telefone */
.phone{
  width:210px; border-radius:30px; border:1px solid var(--line);
  background:var(--paper); padding:10px 9px; box-shadow:var(--shadow-m);
}
.phone__screen{ border-radius:22px; background:var(--surface); overflow:hidden; border:1px solid var(--line-soft); }
.phone__hero{ height:118px; background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 24%, var(--surface-2)), var(--surface-2));
  padding:16px 14px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; }
.phone__hero i{ display:block; height:8px; border-radius:4px; background:color-mix(in srgb, var(--ink) 30%, transparent); }
.phone__hero i:first-child{ width:70%; height:13px; background:color-mix(in srgb, var(--ink) 60%, transparent); }
.phone__hero i:last-child{ width:44%; }
.phone__body{ padding:14px; display:grid; gap:9px; }
.phone__body i{ display:block; height:7px; border-radius:4px; background:color-mix(in srgb, var(--ink) 11%, transparent); }
.phone__body i:nth-child(2){ width:72% }
.phone__cta{ height:30px; border-radius:999px; background:var(--accent); margin-top:6px; }

/* visual 2 — páginas empilhadas */
.stack{ position:relative; width:min(300px,100%); height:220px; }
.stack i{
  position:absolute; inset:0; border-radius:14px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--shadow-s);
}
.stack i:nth-child(1){ transform:translate(-26px,-22px) scale(.9); opacity:.5; }
.stack i:nth-child(2){ transform:translate(-13px,-11px) scale(.95); opacity:.78; }
.stack i:nth-child(3){ background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); }

/* visual 3 — blueprint */
.blueprint{ width:100%; max-width:320px; display:grid; gap:10px; }
.blueprint i{ border:1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius:10px;
  background:color-mix(in srgb, var(--accent) 5%, transparent); }
.blueprint i:nth-child(1){ height:70px; }
.blueprint .bp-row{ display:grid; grid-template-columns:1.4fr 1fr; gap:10px; }
.blueprint .bp-row i{ height:96px; }

/* ============================================================
   COMO FUNCIONA (seção escura)
   ============================================================ */
.night{ background:var(--night); color:var(--night-ink); border-radius:0; }
@media (min-width:768px){
  .night-outer{ padding-inline:32px; }
  .night{ border-radius:34px; }
}
.night .lede, .night .body-2{ color:var(--night-ink-2); }
.steps{ display:grid; gap:0; margin-top:52px; border-top:1px solid var(--night-line); }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ padding:26px 0; border-bottom:1px solid var(--night-line); }
@media (min-width:860px){
  .step{ padding:30px 26px 34px; border-bottom:0; border-left:1px solid var(--night-line); }
  .step:first-child{ border-left:0; padding-left:0; }
}
.step__n{ font-size:.82rem; color:var(--night-ink-2); font-variant-numeric:tabular-nums; }
.step h4{ margin:12px 0 10px; font-size:1.18rem; letter-spacing:-.025em; }
.step p{ font-size:.94rem; color:var(--night-ink-2); line-height:1.55; }

/* ============================================================
   MODELOS / PROJETOS REAIS
   Mobile-first
   ============================================================ */

.templates--real{
  display:grid;

  grid-template-columns:1fr;

  gap:20px;

  margin-top:52px;
}


/* ============================================================
   CARD
   ============================================================ */

.tpl-real{
  width:100%;

  overflow:hidden;

  background:var(--surface);

  border:1px solid var(--line-soft);

  border-radius:20px;

  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    0 8px 24px rgba(0,0,0,.04);

  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease);
}


/* ============================================================
   PREVIEW REAL DO PROJETO
   ============================================================ */

.tpl-real__media{
  position:relative;

  display:block;

  width:100%;

  /*
    Agora o preview fica em PAISAGEM.
    Essa proporção permite enxergar muito melhor
    a composição real do projeto.
  */
  aspect-ratio:16 / 10;

  overflow:hidden;

  background:var(--surface-2);
}


/* Imagem real do site */
.tpl-real__media img{
  display:block;

  width:100%;
  height:100%;

  /*
    Mantém o print preenchendo toda a área.
  */
  object-fit:cover;

  /*
    Como queremos mostrar principalmente a hero,
    o enquadramento começa sempre pelo topo.
  */
  object-position:top center;

  transition:
    transform .6s var(--ease);
}


/* Gradiente extremamente leve apenas para
   dar acabamento na base da imagem */
.tpl-real__media::after{
  content:"";

  position:absolute;

  inset:auto 0 0 0;

  height:18%;

  pointer-events:none;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.06),
      transparent
    );
}


/* ============================================================
   RODAPÉ DO CARD
   ============================================================ */

.tpl-real__foot{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  padding:17px 18px 18px;

  border-top:1px solid var(--line-soft);
}


/* Informações principais */
.tpl-real__info{
  min-width:0;
}


.tpl-real__info h3{
  margin:0;

  color:var(--ink);

  font-size:1rem;

  font-weight:600;

  line-height:1.2;

  letter-spacing:-.025em;
}


.tpl-real__info p{
  margin:5px 0 0;

  color:var(--ink-2);

  font-size:.88rem;

  line-height:1.4;
}


/* Tipo de projeto */
.tpl-real__tag{
  flex:0 0 auto;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:34px;

  padding:0 13px;

  border:1px solid var(--line);

  border-radius:999px;

  color:var(--ink-2);

  background:transparent;

  font-size:.78rem;

  font-weight:500;

  letter-spacing:-.012em;
}


/* ============================================================
   HOVER
   Apenas dispositivos que realmente possuem hover
   ============================================================ */

@media (hover:hover){

  .tpl-real:hover{
    transform:translateY(-4px);

    border-color:
      rgba(0,0,0,.09);

    box-shadow:
      0 2px 4px rgba(0,0,0,.04),
      0 18px 42px rgba(0,0,0,.08);
  }


  .tpl-real:hover .tpl-real__media img{
    transform:scale(1.018);
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width:720px){

  .templates--real{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:20px;
  }

}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:1000px){

  .templates--real{
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:20px;
  }


  /*
    No desktop deixamos os previews um pouco mais panorâmicos.
    Isso aproxima ainda mais da proporção de uma tela real.
  */
  .tpl-real__media{
    aspect-ratio:16 / 9;
  }

}


/* ============================================================
   MOBILE PEQUENO
   ============================================================ */

@media (max-width:420px){

  .tpl-real__foot{
    padding:15px 16px 16px;

    gap:10px;
  }


  .tpl-real__info h3{
    font-size:.96rem;
  }


  .tpl-real__info p{
    font-size:.82rem;
  }


  .tpl-real__tag{
    min-height:32px;

    padding-inline:11px;

    font-size:.73rem;
  }

}

/* ============================================================
   MODELOS — CABEÇALHO CENTRALIZADO NO DESKTOP
   Mobile permanece como está
   ============================================================ */

/* No mobile, não forçamos a quebra */
.modelos-title-break{
  display:none;
}


@media (min-width:1000px){

  #modelos .head{
    width:100%;
    max-width:820px;

    margin-inline:auto;
    margin-bottom:54px;

    text-align:center;
  }


  #modelos .head .h2{
    width:100%;
    max-width:none;

    margin-inline:auto;
  }


  /* No desktop, força exatamente duas linhas */
  #modelos .head .modelos-title-break{
    display:block;
  }


  #modelos .head .lede{
    max-width:62ch;

    margin-top:18px;
    margin-inline:auto;
  }

}

/* ============================================================
   SEÇÃO — O QUE VEM JUNTO EM QUALQUER PROJETO
   Mobile-first
   ============================================================ */

.wx-included{
  position:relative;
}


/*
  Esta seção usa um container um pouco mais largo que o restante
  do site para reproduzir a composição aprovada no preview.
*/
.wx-included > .wrap{
  max-width:1320px;
}


/* ============================================================
   ESTRUTURA
   ============================================================ */

.wx-included__layout{
  display:grid;
  grid-template-columns:1fr;

  gap:34px;
}


.wx-included__intro{
  min-width:0;
}


.wx-included__title{
  margin:0;

  color:var(--ink);

  font-size:clamp(2.3rem, 10vw, 3.5rem);

  font-weight:600;

  line-height:1;

  letter-spacing:-.042em;
}


.wx-included__title span{
  display:block;
}


.wx-included__lede{
  max-width:48ch;

  margin:18px 0 0;

  color:var(--ink-2);

  font-size:clamp(1rem, 2vw, 1.18rem);

  line-height:1.48;

  letter-spacing:-.016em;
}


/* ============================================================
   PAINEL "BASE WEBX"
   ============================================================ */

.wx-base{
  margin-top:26px;

  padding:18px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8f9fc 100%
    );

  border:1px solid rgba(0,0,0,.085);

  border-radius:24px;

  box-shadow:
    0 1px 2px rgba(0,0,0,.025),
    0 16px 42px rgba(0,0,0,.055);
}


.wx-base__top{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;
}


.wx-base__badge,
.wx-base__meta{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:32px;

  padding-inline:12px;

  border-radius:999px;

  font-size:.78rem;

  line-height:1;

  letter-spacing:-.012em;
}


.wx-base__badge{
  color:var(--accent);

  font-weight:600;

  background:rgba(11,99,246,.075);

  border:1px solid rgba(11,99,246,.12);
}


.wx-base__meta{
  color:var(--ink-2);

  background:#f5f6f8;

  border:1px solid rgba(0,0,0,.035);
}


/* ============================================================
   CENA VISUAL
   ============================================================ */

.wx-base__scene{
  position:relative;

  min-height:280px;

  margin-top:4px;
}


/* anotação */
.wx-base__note{
  position:absolute;

  left:0;

  bottom:34px;

  z-index:4;

  width:84px;

  color:#45526b;

  transform:rotate(-5deg);
}


.wx-base__note svg{
  width:46px;

  margin:0 auto 3px;

  color:#68758d;
}


.wx-base__note span{
  display:block;

  font-family:
    "Segoe Print",
    "Bradley Hand",
    cursive;

  font-size:.69rem;

  line-height:1.34;

  text-align:center;

  letter-spacing:-.02em;
}


/* ============================================================
   DEVICES
   ============================================================ */

.wx-device{
  position:absolute;

  overflow:hidden;

  background:#fff;

  border:1px solid rgba(0,0,0,.075);

  box-shadow:
    0 1px 2px rgba(0,0,0,.025),
    0 12px 30px rgba(40,70,120,.08);
}


/* tela traseira */
.wx-device--back{
  top:30px;

  left:37%;

  z-index:1;

  width:54%;

  height:146px;

  border-radius:14px;

  opacity:.58;

  transform:rotate(5deg);
}


.wx-device__bar{
  display:flex;

  align-items:center;

  gap:4px;

  height:20px;

  padding-inline:9px;

  background:#f5f7fa;

  border-bottom:1px solid rgba(0,0,0,.045);
}


.wx-device__bar span{
  width:4px;

  height:4px;

  border-radius:50%;

  background:#738092;
}


.wx-device__bar i{
  width:50%;

  height:5px;

  margin-left:10px;

  border-radius:999px;

  background:#dfe5ee;
}


.wx-device__body{
  padding:14px;
}


.wx-device__mini-title{
  width:48%;

  height:10px;

  border-radius:4px;

  background:#b9c5d6;
}


.wx-device__mini-line{
  width:76%;

  height:5px;

  margin-top:8px;

  border-radius:3px;

  background:#e4e9f0;
}


.wx-device__mini-line--short{
  width:53%;
}


/* desktop principal */
.wx-device--desktop{
  top:59px;

  left:18%;

  z-index:2;

  width:66%;

  height:202px;

  border-radius:15px;

  transform:rotate(-1deg);
}


.wx-device__content{
  display:grid;

  grid-template-columns:1fr .9fr;

  gap:12px;

  padding:18px 17px 13px;
}


.wx-device__copy{
  padding-top:7px;
}


.wx-device__title{
  width:72%;

  height:10px;

  border-radius:4px;

  background:#9facbf;
}


.wx-device__line{
  width:78%;

  height:5px;

  margin-top:8px;

  border-radius:999px;

  background:#e0e5ec;
}


.wx-device__line--short{
  width:54%;
}


.wx-device__button{
  width:54px;

  height:17px;

  margin-top:13px;

  border-radius:5px;

  background:var(--accent);
}


.wx-device__visual{
  position:relative;

  min-height:76px;

  overflow:hidden;

  border-radius:7px;

  background:
    linear-gradient(
      150deg,
      #e5edf9 0%,
      #c9d8ee 100%
    );
}


.wx-device__visual span{
  position:absolute;

  bottom:-5px;

  width:80px;

  height:48px;

  transform:rotate(35deg);

  border-radius:10px 10px 0 0;

  background:#9fb6d6;
}


.wx-device__visual span:nth-child(1){
  left:0;
}


.wx-device__visual span:nth-child(2){
  left:33%;

  bottom:-14px;

  background:#b8c9df;
}


.wx-device__visual span:nth-child(3){
  right:-18px;

  background:#8fa9cd;
}


.wx-device__cards{
  grid-column:1 / -1;

  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:8px;

  margin-top:4px;
}


.wx-device__cards span{
  height:34px;

  border-radius:6px;

  background:#f0f3f7;

  border:1px solid rgba(0,0,0,.035);
}


/* mobile */
.wx-device--phone{
  right:4%;

  bottom:9px;

  z-index:3;

  width:29%;

  height:165px;

  border-radius:16px;

  transform:rotate(3deg);
}


.wx-device__phone-top{
  display:flex;

  gap:3px;

  height:18px;

  padding:8px;

  background:#f6f7f9;
}


.wx-device__phone-top span{
  width:3px;

  height:3px;

  border-radius:50%;

  background:#6b7280;
}


.wx-device__phone-body{
  padding:13px 10px;
}


.wx-device__phone-title{
  width:60%;

  height:8px;

  border-radius:4px;

  background:#a3afc0;
}


.wx-device__phone-line{
  width:76%;

  height:4px;

  margin-top:7px;

  border-radius:999px;

  background:#e2e7ee;
}


.wx-device__phone-button{
  width:37px;

  height:13px;

  margin-top:10px;

  border-radius:4px;

  background:var(--accent);
}


.wx-device__phone-visual{
  height:54px;

  margin-top:13px;

  border-radius:7px;

  background:
    linear-gradient(
      145deg,
      #e4ecf8,
      #bdcde4
    );
}


/* ============================================================
   TAGS
   ============================================================ */

.wx-base__tags{
  display:grid;

  grid-template-columns:repeat(2, minmax(0, 1fr));

  gap:9px;

  margin-top:12px;
}


.wx-base__tags span{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  min-height:36px;

  padding-inline:10px;

  color:var(--ink-2);

  background:rgba(255,255,255,.82);

  border:1px solid rgba(0,0,0,.075);

  border-radius:999px;

  font-size:.76rem;

  font-weight:500;

  white-space:nowrap;
}


.wx-base__tags svg{
  width:16px;

  height:16px;

  fill:none;

  stroke:var(--accent);

  stroke-width:1.7;

  stroke-linecap:round;

  stroke-linejoin:round;
}


/* ============================================================
   CARDS
   ============================================================ */

.wx-included__cards{
  display:grid;

  grid-template-columns:1fr;

  gap:14px;
}


.wx-inc-card{
  min-width:0;

  padding:20px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfe 100%
    );

  border:1px solid rgba(0,0,0,.075);

  border-radius:20px;

  box-shadow:
    0 1px 2px rgba(0,0,0,.018),
    0 10px 28px rgba(0,0,0,.028);

  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease),
    border-color .3s var(--ease);
}


.wx-inc-card__icon{
  display:grid;

  place-items:center;

  width:54px;

  height:54px;

  margin-bottom:17px;

  border-radius:15px;

  background:
    linear-gradient(
      180deg,
      rgba(11,99,246,.11),
      rgba(11,99,246,.055)
    );

  border:1px solid rgba(11,99,246,.07);
}


.wx-inc-card__icon svg{
  width:26px;

  height:26px;

  fill:none;

  stroke:var(--accent);

  stroke-width:1.8;

  stroke-linecap:round;

  stroke-linejoin:round;
}


.wx-inc-card h3{
  margin:0;

  color:var(--ink);

  font-size:1.05rem;

  font-weight:600;

  line-height:1.18;

  letter-spacing:-.026em;
}


.wx-inc-card p{
  margin:9px 0 0;

  color:var(--ink-2);

  font-size:.93rem;

  line-height:1.52;

  letter-spacing:-.012em;
}


@media (hover:hover){

  .wx-inc-card:hover{
    transform:translateY(-3px);

    border-color:rgba(11,99,246,.12);

    box-shadow:
      0 2px 4px rgba(0,0,0,.025),
      0 16px 34px rgba(0,0,0,.045);
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width:680px){

  .wx-base{
    padding:20px 22px 22px;
  }


  .wx-base__scene{
    min-height:300px;
  }


  .wx-base__tags{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }


  .wx-included__cards{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:16px;
  }

}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:1000px){

  .wx-included__layout{
    grid-template-columns:
      minmax(0, .95fr)
      minmax(0, 1.05fr);

    align-items:stretch;

    gap:36px;
  }


  .wx-included__title{
    font-size:clamp(3rem, 3.5vw, 3.65rem);

    line-height:.98;
  }


  .wx-included__lede{
    max-width:47ch;

    font-size:1.08rem;

    line-height:1.46;

    margin-top:18px;
  }


  .wx-base{
    margin-top:24px;

    padding:18px 20px 20px;
  }


  .wx-base__scene{
    min-height:292px;
  }


  .wx-included__cards{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      repeat(3, minmax(0, 1fr));

    gap:16px;
  }


  .wx-inc-card{
    height:100%;

    padding:20px;
  }

}


/* ============================================================
   DESKTOP GRANDE
   ============================================================ */

@media (min-width:1200px){

  .wx-included__layout{
    gap:40px;
  }


  .wx-base__scene{
    min-height:300px;
  }

}


/* ============================================================
   NOTEBOOKS / VIEWPORTS MAIS BAIXOS
   Mantém a seção inteira muito mais compacta na tela.
   ============================================================ */

@media (min-width:1000px) and (max-height:850px){

  .wx-included.section--tight{
    padding-top:68px;

    padding-bottom:40px;
  }


  .wx-included__layout{
    gap:34px;
  }


  .wx-included__title{
    font-size:clamp(2.7rem, 3.15vw, 3.2rem);

    line-height:.98;
  }


  .wx-included__lede{
    max-width:49ch;

    margin-top:14px;

    font-size:1rem;

    line-height:1.42;
  }


  .wx-base{
    margin-top:18px;

    padding:15px 18px 17px;

    border-radius:21px;
  }


  .wx-base__badge,
  .wx-base__meta{
    min-height:29px;

    font-size:.73rem;
  }


  .wx-base__scene{
    min-height:218px;
  }


  .wx-device--back{
    top:20px;

    height:116px;
  }


  .wx-device--desktop{
    top:43px;

    height:160px;
  }


  .wx-device__content{
    padding:13px 14px 10px;
  }


  .wx-device__visual{
    min-height:56px;
  }


  .wx-device__cards span{
    height:25px;
  }


  .wx-device--phone{
    height:132px;

    bottom:5px;
  }


  .wx-device__phone-visual{
    height:38px;
  }


  .wx-base__note{
    bottom:18px;

    transform:scale(.88) rotate(-5deg);

    transform-origin:left bottom;
  }


  .wx-base__tags{
    gap:7px;

    margin-top:9px;
  }


  .wx-base__tags span{
    min-height:31px;

    font-size:.7rem;
  }


  .wx-base__tags svg{
    width:14px;

    height:14px;
  }


  .wx-included__cards{
    gap:14px;
  }


  .wx-inc-card{
    padding:16px 18px;

    border-radius:18px;
  }


  .wx-inc-card__icon{
    width:44px;

    height:44px;

    margin-bottom:12px;

    border-radius:13px;
  }


  .wx-inc-card__icon svg{
    width:22px;

    height:22px;
  }


  .wx-inc-card h3{
    font-size:.98rem;
  }


  .wx-inc-card p{
    margin-top:7px;

    font-size:.84rem;

    line-height:1.42;
  }

}


/* ============================================================
   MOBILE PEQUENO
   ============================================================ */

@media (max-width:420px){

  .wx-included__layout{
    gap:28px;
  }


  .wx-included__title{
    font-size:2.25rem;
  }


  .wx-base{
    padding:15px;

    border-radius:20px;
  }


  .wx-base__scene{
    min-height:255px;
  }


  .wx-device--desktop{
    left:13%;

    width:72%;

    height:186px;
  }


  .wx-device--back{
    left:33%;

    width:58%;
  }


  .wx-device--phone{
    right:1%;

    width:31%;

    height:150px;
  }


  .wx-base__note{
    bottom:24px;

    width:66px;
  }


  .wx-base__note span{
    font-size:.62rem;
  }


  .wx-base__tags{
    gap:7px;
  }


  .wx-base__tags span{
    min-height:33px;

    font-size:.7rem;
  }


  .wx-inc-card{
    padding:18px;

    border-radius:18px;
  }


  .wx-inc-card__icon{
    width:50px;

    height:50px;

    margin-bottom:16px;

    border-radius:14px;
  }


  .wx-inc-card h3{
    font-size:1rem;
  }


  .wx-inc-card p{
    font-size:.9rem;
  }

}


/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion:reduce){

  .wx-inc-card{
    transition:none;
  }


  .wx-inc-card:hover{
    transform:none;
  }

}

/* ============================================================
   FAQ — WebX Studio
   Mobile-first
   ============================================================ */

.faq-section{
  position:relative;
}


/* ============================================================
   CABEÇALHO
   ============================================================ */

.faq-section__head{
  display:flex;
  justify-content:center;

  text-align:center;

  margin-bottom:42px;
}


.faq-section__title{
  margin:0;

  max-width:16ch;

  color:var(--ink);

  font-size:clamp(2.25rem, 7vw, 3.35rem);

  font-weight:600;

  line-height:1.02;

  letter-spacing:-.04em;
}


/* ============================================================
   FAQ
   ============================================================ */

.faq{
  width:100%;

  max-width:none;

  margin:0;

  border-top:1px solid var(--line);
}


.qa{
  width:100%;

  border-bottom:1px solid var(--line-soft);
}


/* ============================================================
   PERGUNTA
   ============================================================ */

.qa__q{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding:24px 0;

  text-align:left;

  color:var(--ink);

  font-size:1rem;

  font-weight:500;

  line-height:1.35;

  letter-spacing:-.018em;
}


.qa__q > span:first-child{
  min-width:0;
}


/* ============================================================
   ÍCONE +
   ============================================================ */

.qa__ico{
  position:relative;

  flex:0 0 24px;

  width:24px;
  height:24px;
}


.qa__ico::before,
.qa__ico::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  background:var(--ink-3);

  border-radius:999px;

  transform:translate(-50%, -50%);

  transition:
    transform .35s var(--ease),
    opacity .35s var(--ease),
    background-color .25s var(--ease);
}


.qa__ico::before{
  width:14px;
  height:1.5px;
}


.qa__ico::after{
  width:1.5px;
  height:14px;
}


.qa.is-open .qa__ico::after{
  opacity:0;

  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


/* ============================================================
   RESPOSTA
   ============================================================ */

.qa__a{
  display:grid;

  grid-template-rows:0fr;

  transition:
    grid-template-rows .4s var(--ease);
}


.qa.is-open .qa__a{
  grid-template-rows:1fr;
}


.qa__a > div{
  overflow:hidden;
}


.qa__a p{
  max-width:70ch;

  padding:0 0 24px;

  margin:0;

  color:var(--ink-2);

  font-size:.98rem;

  line-height:1.6;

  letter-spacing:-.012em;
}


/* ============================================================
   HOVER
   ============================================================ */

@media (hover:hover){

  .qa__q:hover{
    color:var(--accent);
  }


  .qa__q:hover .qa__ico::before,
  .qa__q:hover .qa__ico::after{
    background:var(--accent);
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width:768px){

  .faq-section__head{
    margin-bottom:48px;
  }


  .qa__q{
    padding:26px 0;

    font-size:1.04rem;
  }


  .qa__a p{
    padding-bottom:26px;
  }

}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:1000px){

  .faq-section__title{
    max-width:none;

    font-size:clamp(2.8rem, 4vw, 3.45rem);
  }


  .faq-section__head{
    margin-bottom:52px;
  }


  .qa__q{
    padding:27px 0;

    font-size:1.06rem;
  }


  .qa__ico{
    flex-basis:26px;

    width:26px;
    height:26px;
  }

}


/* ============================================================
   MOBILE PEQUENO
   ============================================================ */

@media (max-width:420px){

  .faq-section__head{
    margin-bottom:34px;
  }


  .faq-section__title{
    max-width:13ch;

    font-size:2.12rem;
  }


  .qa__q{
    gap:16px;

    padding:21px 0;

    font-size:.96rem;
  }


  .qa__a p{
    padding-bottom:22px;

    font-size:.92rem;
  }

}


/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion:reduce){

  .qa__a,
  .qa__ico::before,
  .qa__ico::after{
    transition:none;
  }

}


/* ============================================================
   CTA FINAL + RODAPÉ
   ============================================================ */
.final{ text-align:center; }
.final .lede{ margin:20px auto 0; max-width:48ch; }
.final__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }

.foot{ border-top:1px solid var(--line); padding-block:52px 40px; }
.foot__grid{ display:grid; gap:36px; }
@media (min-width:768px){ .foot__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; } }
.foot h5{ margin:0 0 14px; font-size:.9rem; font-weight:600; letter-spacing:-.01em; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a, .foot li{ font-size:.94rem; color:var(--ink-2); }
.foot a:hover{ color:var(--ink); }
.foot__bottom{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:.86rem; color:var(--ink-3); }


/* ============================================================
   REFINAMENTOS RESPONSIVOS
   ============================================================ */
@media (max-width:767px){
  .hero{ padding-top:124px; }
  .hero .lede{ max-width:31ch; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ flex:1 1 100%; }
  .stage{ margin-top:44px; }
  .browser__body{ padding:16px; }
  .chip{ right:8px; bottom:-16px; }
  .products{ margin-top:40px; }
  .product{ padding:22px 20px; }
  .panel{ min-height:250px; padding:22px; }
  .templates{ margin-top:40px; }
  .tpl__view{ min-height:286px; }
}

/* ============================================================
   TEMA VISUAL
   O site permanece sempre em tema claro. O esquema de cores do
   sistema operacional não altera a identidade visual da WebX.
   ============================================================ */

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important;
    transition-duration:.001ms !important; }
  .rise,.sk,.chip,.reveal{ opacity:1 !important; transform:none !important; }
  .marquee{ animation:none; }
}