/* NIGHT store — marketing: anuncio, header, hero, precos, recursos, showcase, faq. */

/* ---------------------------------------------------------- barra de anuncio */
.announce{background:var(--bg-deep);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:8px 44px 8px 16px;position:relative}
.announce[hidden]{display:none}
.announce p{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-align:center}
.announce b{color:var(--accent-hi)}
.announce .x{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--dimmer);padding:6px;line-height:0;border-radius:var(--r-sm)}
.announce .x:hover{color:var(--txt)}

/* -------------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(23,22,27,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{height:24px;width:auto}
.brand:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:2px;margin-left:10px;flex:1 1 auto}
.nav a{padding:9px 11px;border-radius:var(--r-sm);color:var(--dim);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.nav a:hover{color:var(--txt);background:var(--field);text-decoration:none}
.hdr-act{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lang button{background:transparent;border:0;padding:7px 10px;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
.lang button[aria-pressed='true']{background:var(--field);color:var(--txt)}
.lang button:hover{color:var(--txt)}
.burger{display:none;background:transparent;border:1px solid var(--line);border-radius:var(--r);
  padding:8px;color:var(--ink)}
.burger:hover{border-color:var(--accent)}
.mnav{display:none;border-top:1px solid var(--line)}
.mnav.on{display:block}
.mnav a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.mnav a:last-child{border-bottom:0}

/* ---------------------------------------------------------------------- hero */
.hero{padding:52px 0 0;position:relative}
.hero::before{content:'';position:absolute;inset:0 0 auto 0;height:420px;pointer-events:none;
  background:radial-gradient(120% 100% at 78% 0%,rgba(120,104,240,.20),transparent 62%)}
.hero-in{position:relative;display:grid;grid-template-columns:1fr;gap:12px;text-align:center;
  align-items:center;justify-items:center}
.hero h1{font-size:clamp(42px,7vw,84px);letter-spacing:.01em;line-height:.94}
.hero h1 em{font-style:normal;color:var(--accent-hi)}
.hero .lead{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-hi);margin-top:16px}
.hero .desc{color:var(--dim);max-width:60ch;margin-top:12px;font-size:16px}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;max-width:640px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.hero-media{margin-top:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-deep)}
.hero-media img{width:100%}
.hero-flag{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ----------------------------------------------------------------- trust bar */
.trust{border-bottom:1px solid var(--line);background:var(--bg-deep);margin-top:38px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.trust-cell{background:var(--bg-deep);padding:20px 18px;display:flex;gap:13px;align-items:flex-start}
.trust-cell svg{flex:0 0 26px;color:var(--accent-hi);margin-top:2px}
.trust-cell b{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt)}
.trust-cell span{display:block;color:var(--dim);font-size:13px;line-height:1.45;margin-top:3px}

/* --------------------------------------------------------------------- precos */
.price-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.cur{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cur button{background:transparent;border:0;padding:9px 15px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.1em;color:var(--dim)}
.cur button[aria-pressed='true']{background:var(--field);color:var(--txt)}
.countdown{display:flex;align-items:center;gap:10px;border:1px solid var(--line-hi);
  background:var(--panel);border-radius:var(--r);padding:9px 13px}
.countdown[hidden]{display:none}
.countdown .label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber)}
.countdown .clock{font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--txt);
  font-variant-numeric:tabular-nums;letter-spacing:.06em}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 18px 18px;display:flex;flex-direction:column;gap:14px}
.plan.pop{border-color:#4A3FB0;box-shadow:var(--shadow)}
.plan .flag{position:absolute;top:-1px;right:-1px;background:var(--accent);color:#fff;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:0 var(--r-lg) 0 var(--r-lg)}
.plan .days{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:.04em;
  text-transform:uppercase}
.plan .was{font-family:var(--font-mono);font-size:12.5px;color:var(--dim);text-decoration:line-through}
.plan .price{font-family:var(--font-mono);font-weight:500;font-size:34px;letter-spacing:-.045em;
  line-height:1.1;font-variant-numeric:tabular-nums;transition:color .18s ease}
.plan .price .cur-sym{font-size:19px;color:var(--dim);margin-right:2px}
.plan .per{font-family:var(--font-mono);font-size:11.5px;color:var(--dim)}
.plan .per b{color:var(--ink);font-weight:500}
.plan ul{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.plan li{display:flex;gap:8px;font-size:13px;color:var(--ink);line-height:1.4}
.plan .btn{margin-top:auto}
.plan .off{font-family:var(--font-mono);font-size:12px;color:var(--dim)}
.plan .machine{font-family:var(--font-mono);font-size:11px;color:var(--dim);text-align:center;
  margin-top:10px}
.plan[data-disabled='1']{opacity:.55}
.plans-note{margin-top:16px;color:var(--dim);font-size:12px;line-height:1.6}
.plans-note b{color:var(--dim);font-weight:500}
.plans-state{border:1px dashed var(--line-hi);border-radius:var(--r-lg);padding:26px 20px;
  margin-top:26px;text-align:center;color:var(--dim)}
.plans-state[hidden]{display:none}
.plans-state .t{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin-bottom:6px}
.skel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.skel[hidden]{display:none}
.skel i{display:block;height:250px;border-radius:var(--r-lg);background:var(--panel);
  border:1px solid var(--line);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:.95}}

/* ------------------------------------------------------------------- recursos */
.cat{margin-top:30px}
.cat-hd{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.cat-hd::before{content:'';width:4px;height:16px;background:var(--accent);flex:0 0 4px}
.cat-hd h3{font-size:22px;letter-spacing:.05em}
.cat-hd .n{font-family:var(--font-mono);font-size:11.5px;color:var(--dim);margin-left:auto}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:1px 26px;margin-top:14px}
.feat li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:14px;color:var(--ink);
  line-height:1.45;border-bottom:1px solid rgba(46,45,54,.55)}
.feat b{color:var(--txt);font-weight:500}

/* ------------------------------------------------------------------ showcase */
.shots{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:26px}
.shot{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column}
.shot img{width:100%;border-bottom:1px solid var(--line);flex:1 1 auto;min-height:0;object-fit:cover;
  object-position:center top}
.shot figcaption{display:flex;align-items:baseline;gap:10px;padding:12px 14px;flex:0 0 auto}
.shot figcaption b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.1em;
  text-transform:uppercase}
.shot figcaption span{font-size:12.5px;color:var(--dim)}
.shot.s1{grid-column:1 / 5;grid-row:1 / 3}
.shot.s2{grid-column:5 / 7;grid-row:1 / 2}
.shot.s3{grid-column:5 / 7;grid-row:2 / 3}
@media (min-width:981px){
  .shot.s1{transform:translateX(-6px)}       /* deslocamentos leves: composicao assimetrica */
  .shot.s2{transform:translateX(6px)}
  .shot.s3{transform:translate(6px,6px)}
}

/* --------------------------------------------------------------- como funciona */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px}
.step .n{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.16em;
  color:var(--accent-hi)}
.step h3{font-size:20px;letter-spacing:.04em;margin-top:10px}
.step p{color:var(--dim);font-size:13.5px;margin-top:8px;line-height:1.5}
.step code{font-family:var(--font-mono);font-size:12.5px;color:var(--ink);background:var(--field);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 5px}

/* ------------------------------------------------------------------ por que */
.why3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.why3 .card-bd{height:100%}
.why3 h3{font-size:19px;letter-spacing:.05em}
.why3 p{color:var(--dim);font-size:13.5px;margin-top:8px;line-height:1.55}
.prose{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.prose .card-bd p{color:var(--ink);font-size:14px;line-height:1.65}
.prose .card-bd p + p{margin-top:10px}
.prose .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-hi);display:block;margin-bottom:8px}

/* ---------------------------------------------------------------------- faq */
.faq{margin-top:26px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;gap:14px;background:none;border:0;
  padding:17px 2px;text-align:left;color:var(--txt)}
.faq-q:hover{color:#fff}
.faq-q .q{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.03em;
  text-transform:uppercase;flex:1 1 auto}
.faq-q .ic{flex:0 0 20px;position:relative;height:20px;color:var(--accent-hi)}
.faq-q .ic::before,.faq-q .ic::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;transform:translate(-50%,-50%);transition:transform .18s ease}
.faq-q .ic::before{width:14px;height:1.6px}
.faq-q .ic::after{width:1.6px;height:14px}
.faq-q[aria-expanded='true'] .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{overflow:hidden;height:0;transition:height .2s ease}
.faq-a > div{padding:0 2px 18px;color:var(--dim);font-size:14px;line-height:1.65;max-width:88ch}
.faq-a b{color:var(--ink);font-weight:500}
.faq-item.open .faq-a{height:auto}

/* -------------------------------------------------------------------- cta */
.cta{margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-deep)}
.cta-in{padding:54px 0;text-align:center;display:grid;justify-items:center;gap:14px}
.cta h2{font-size:clamp(30px,5vw,50px)}
.cta p{color:var(--dim);max-width:56ch}
.cta .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}

/* ------------------------------------------------------------------- footer */
.ftr{padding:40px 0 34px}
.ftr-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.ftr img{height:22px;width:auto}
.ftr .tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-top:10px}
.ftr .disc{color:var(--dim);font-size:12px;line-height:1.7;max-width:52ch;margin-top:12px}
.ftr nav{display:flex;flex-direction:column;gap:8px}
.ftr nav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim)}
.ftr .copy{border-top:1px solid var(--line);margin-top:30px;padding-top:16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* ------------------------------------------------------------------ breakpoints */
@media (max-width:980px){
  .trust-grid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
  .skel{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .why3{grid-template-columns:1fr}
  .prose{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .shot.s1,.shot.s2,.shot.s3{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:820px){
  .nav{display:none}
  .burger{display:inline-flex}
  .hdr-act .lang{order:2}
  .hdr .buy-desktop{display:none}
  .hero{padding-top:38px}
  .trust-grid{grid-template-columns:1fr;gap:1px}
  .feat{grid-template-columns:1fr}
}
@media (max-width:560px){
  .plans{grid-template-columns:1fr}
  .skel{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hdr-in{height:58px}
  .announce p{font-size:10.5px;letter-spacing:.1em}
  .plan .price{font-size:30px}
}