/* ==========================================================================
   Fee Dev Studio — folha de estilo
   Paleta: Carbono #0A0A0C · Grafite #141418 · Volt #C8FF3E
   ========================================================================== */

:root{
  --accent:#C8FF3E;
  --bg:#0A0A0C;
  --bg-alt:#0C0C0F;
  --panel:#141418;
  --text:#F2F2EF;
  --muted:#9A9AA3;
  --soft:#C9C9D1;
  --dim:#6E6E7A;
  --line:rgba(255,255,255,.1);
  --line-soft:rgba(255,255,255,.07);
  --pad:clamp(20px,4vw,48px);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --rail:44px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--accent)}
a:hover{color:#fff}
::selection{background:var(--accent);color:var(--bg)}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}

/* utilitários -------------------------------------------------------------- */
.accent{color:var(--accent)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.bold{font-weight:700}
.stroke-accent{color:transparent;-webkit-text-stroke:2px var(--accent)}
.stroke-white{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45)}
.cursor{animation:blink 1.1s steps(1) infinite}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-40px,20px)}
  40%{transform:translate(30px,-35px)}60%{transform:translate(-25px,-20px)}
  80%{transform:translate(35px,30px)}
}

/* fundo: partículas + granulado ------------------------------------------- */
.bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.grain{
  position:fixed;inset:-60px;z-index:95;pointer-events:none;opacity:.055;
  animation:grain 7s steps(8) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

/* trilho lateral ----------------------------------------------------------- */
.rail{
  position:fixed;right:0;top:0;bottom:0;width:var(--rail);z-index:96;
  border-left:1px solid var(--line-soft);display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:80px 0 24px;
  pointer-events:none;opacity:0;
}
.rail__brand,.rail__idx{writing-mode:vertical-rl;font-family:var(--mono)}
.rail__brand{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.rail__idx{font-size:10px;letter-spacing:.25em;color:var(--accent)}

/* intro cinematográfica ---------------------------------------------------- */
.intro{position:fixed;inset:0;z-index:200}
.intro__half{
  position:absolute;left:0;right:0;height:50.5%;background:var(--bg);
  will-change:transform;transition:transform .9s cubic-bezier(.76,0,.24,1);
}
.intro__half--top{top:0;border-bottom:1px solid rgba(255,255,255,.04)}
.intro__half--bottom{bottom:0}
.intro__half--top.is-out{transform:translateY(-101%)}
.intro__half--bottom.is-out{transform:translateY(101%)}
.intro__term{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:26px;transition:opacity .35s;
}
.intro__term.is-out{opacity:0}
.intro__logo{font-family:var(--mono);font-weight:700;font-size:clamp(28px,5vw,44px)}
.intro__lines{
  font-family:var(--mono);font-size:clamp(11px,1.6vw,13px);line-height:2.1;
  color:var(--muted);min-height:7.5em;width:min(420px,80vw);
}
.intro__lines .is-current{color:var(--text)}
.intro__bar{width:min(420px,80vw);height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.intro__fill{height:100%;width:0;background:var(--accent)}
.intro__skip{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* navegação ---------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:var(--rail);z-index:100;display:flex;
  align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);
  background:rgba(10,10,12,.55);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);opacity:0;
}
.nav__logo{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--text);text-decoration:none}
.nav__links{display:flex;gap:clamp(16px,2.5vw,32px)}
.nav__link{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.nav__link:hover{color:var(--text)}

/* botões ------------------------------------------------------------------- */
.btn{
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--bg);
  background:var(--accent);text-decoration:none;padding:15px 28px;border-radius:999px;
  border:none;cursor:pointer;white-space:nowrap;display:inline-block;
  transition:background .25s,color .25s;
}
.btn:hover{background:#fff;color:var(--bg)}
.btn--sm{font-size:12px;padding:11px 22px}
.btn--lg{font-size:clamp(14px,1.8vw,17px);padding:20px 44px;box-shadow:0 20px 60px rgba(200,255,62,.25)}
.btn--ghost{
  background:none;color:var(--text);font-weight:500;
  border:1px solid rgba(255,255,255,.18);
}
.btn--ghost:hover{background:none;border-color:var(--accent);color:var(--accent)}
.badge{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--accent);color:var(--bg);
  border-radius:999px;padding:5px 12px;vertical-align:middle;
}

.main{position:relative;z-index:1;padding-right:var(--rail)}

/* hero --------------------------------------------------------------------- */
.hero{position:relative;height:220vh}
.hero__sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;display:flex;
  flex-direction:column;justify-content:flex-end;padding:0 0 10vh;
}
.hero__ast{
  position:absolute;top:14vh;right:6vw;font-size:clamp(90px,16vw,240px);line-height:1;
  color:var(--accent);font-weight:700;will-change:transform;user-select:none;pointer-events:none;opacity:0;
}
.hero__meta{
  position:absolute;top:calc(70px + 4vh);left:var(--pad);font-family:var(--mono);
  font-size:clamp(10px,1.3vw,12px);line-height:2;color:var(--muted);opacity:.9;
}
.hero__status{margin-top:10px;display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.hero__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero__title{margin:0;perspective:800px}
.hero__line{
  font-size:clamp(70px,min(17.5vw,25vh),340px);line-height:.82;font-weight:700;letter-spacing:-.045em;
  text-transform:uppercase;white-space:nowrap;margin-left:-.04em;will-change:transform;
}
.hero__line--right{text-align:right;margin-left:0;margin-right:calc(1vw + 14px)}
.hero__cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:26px var(--pad) 0;opacity:0;
}
.hero__buttons{display:flex;gap:14px;flex-wrap:wrap}
.hero__coords{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);text-align:right;line-height:1.9}
.hero__hint{
  position:absolute;bottom:20px;left:var(--pad);font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}

/* faixa rolante ------------------------------------------------------------ */
.band{
  position:relative;z-index:2;transform:rotate(-2deg) scale(1.06);
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--bg);overflow:hidden;padding:clamp(14px,2.2vh,22px) 0;margin:4vh 0;
}
.marquee{
  display:flex;width:max-content;will-change:transform;font-family:var(--mono);
  font-weight:700;font-size:clamp(26px,4.2vw,52px);letter-spacing:-.02em;
  white-space:nowrap;text-transform:uppercase;
}
.marquee__group{
  display:flex;align-items:center;gap:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);
}

/* serviços — painéis em cortina -------------------------------------------- */
.services{position:relative;height:400vh}
.services__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.services__label{
  position:absolute;top:86px;left:var(--pad);z-index:20;font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.services__dots{position:absolute;left:var(--pad);bottom:26px;display:flex;gap:12px;z-index:20}
.sdot{width:26px;height:3px;background:rgba(255,255,255,.2);transition:background .3s}
.sdot.is-on{background:var(--accent)}

.panel{position:absolute;inset:0;background:var(--bg);will-change:clip-path,transform}
.panel--alt{background:var(--bg-alt)}
.panel__num{
  position:absolute;top:4vh;right:-3vw;font-size:clamp(260px,44vw,560px);font-weight:700;
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);
  pointer-events:none;user-select:none;will-change:transform;
}
.panel__body{position:absolute;left:0;right:0;bottom:12vh;padding:0 var(--pad)}
.panel__label{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:2vh;
}
.panel__title{
  margin:0 0 3vh -.03em;font-size:clamp(54px,11.5vw,210px);line-height:.85;font-weight:700;
  letter-spacing:-.04em;text-transform:uppercase;
}
.panel__foot{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end;
  border-top:1px solid var(--line);padding-top:2.4vh;
}
.panel__desc{max-width:44ch;color:var(--muted);font-size:clamp(14px,1.8vw,18px);line-height:1.6}
.panel__list{font-family:var(--mono);font-size:clamp(11px,1.4vw,13px);line-height:2;color:var(--soft);text-align:right}
.panel__link{color:var(--accent);text-decoration:none;font-weight:700}

/* seções genéricas --------------------------------------------------------- */
.section{position:relative;padding:clamp(80px,12vh,140px) 0}
.section__head{
  padding:0 var(--pad);display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,5vh,52px);
}
.section__title{
  font-size:clamp(44px,8vw,120px);font-weight:700;letter-spacing:-.04em;line-height:.9;
  text-transform:uppercase;
}
.section__note{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:right;line-height:2}

/* clientes — cases em destaque --------------------------------------------- */
.cards{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.card{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.card:last-child{border-right:none}
.card__thumb{
  aspect-ratio:16/10;background:#101014;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden;
}
.card__thumb img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.card:hover .card__thumb img{transform:scale(1.04)}
.card__meta{padding:18px clamp(16px,2vw,26px) 22px;display:grid;gap:8px}
.card__row{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px}
.card__name{font-size:clamp(20px,2.3vw,29px);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.card__link{font-family:var(--mono);font-size:12px;color:var(--accent);text-decoration:none}

/* clientes — arquivo ------------------------------------------------------- */
.archive__label{
  padding:clamp(24px,4vh,40px) var(--pad) 10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.archive{border-top:1px solid var(--line)}
.arch{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,3vw,40px);
  padding:clamp(14px,2.2vh,22px) var(--pad);border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background .3s;
}
.arch:hover{background:rgba(200,255,62,.05)}
.arch--cta{background:rgba(200,255,62,.04)}
.arch--cta:hover{background:rgba(200,255,62,.09)}
.arch__num{font-family:var(--mono);font-size:12px;color:var(--dim)}
.arch__name{
  font-size:clamp(22px,3.6vw,44px);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,242,239,.75);transition:color .3s;
}
.arch:hover .arch__name{color:var(--accent);-webkit-text-stroke:1px transparent}
.arch__name--solid{color:var(--accent);-webkit-text-stroke:1px transparent}
.arch__tag{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}

/* processo ----------------------------------------------------------------- */
.steps{border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:minmax(70px,auto) 1fr 1.4fr;align-items:center;
  gap:clamp(14px,3vw,40px);padding:clamp(20px,3.4vh,34px) var(--pad);
  border-bottom:1px solid var(--line);
}
.step__num{
  font-family:var(--mono);font-size:clamp(28px,4vw,54px);font-weight:700;
  color:transparent;-webkit-text-stroke:1px var(--accent);
}
.step__num--full{color:var(--accent);-webkit-text-stroke:1px transparent}
.step__title{font-size:clamp(20px,2.8vw,32px);font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.step__desc{color:var(--muted);font-size:clamp(13px,1.6vw,16px);line-height:1.6}

/* acordeão (planos + faq) -------------------------------------------------- */
.acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}
[data-acc].is-open .acc{grid-template-rows:1fr}
.acc__inner{overflow:hidden}

/* planos ------------------------------------------------------------------- */
.plans{border-top:1px solid var(--line)}
.plan{border-bottom:1px solid var(--line)}
.plan--highlight{background:rgba(200,255,62,.04)}
.plan__head{
  width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(14px,3vw,40px);padding:clamp(20px,3.4vh,34px) var(--pad);
  background:none;border:none;text-align:left;cursor:pointer;transition:background .3s;
}
.plan__head:hover{background:rgba(255,255,255,.03)}
.plan--highlight .plan__head:hover{background:rgba(200,255,62,.05)}
.plan__key{font-family:var(--mono);font-size:12px;color:var(--dim)}
.plan__name{font-size:clamp(24px,4.5vw,56px);font-weight:700;letter-spacing:-.03em;text-transform:uppercase}
.plan__price{font-family:var(--mono);font-size:clamp(13px,1.8vw,17px);color:var(--muted)}
.plan__price strong{color:var(--text)}
.plan__sign{font-family:var(--mono);color:var(--accent);font-size:24px}
.plan__body{padding:0 var(--pad) clamp(24px,3.4vh,36px);display:grid;gap:14px;justify-items:start}
.plan__list{font-family:var(--mono);font-size:clamp(12px,1.5vw,14px);line-height:2.1;color:var(--soft)}
.tiers{display:grid;gap:10px;font-family:var(--mono);font-size:clamp(12px,1.5vw,14px);color:var(--soft);max-width:720px;width:100%}
.tier{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-soft);padding-bottom:10px}
.tier--last{border-bottom:none;padding-bottom:0}
.tier strong{color:var(--text)}
.plans__note{margin-top:22px;padding:0 var(--pad);font-family:var(--mono);font-size:12px;color:var(--dim)}

/* sobre -------------------------------------------------------------------- */
.about{position:relative;padding:clamp(80px,12vh,140px) var(--pad)}
.about__inner{max-width:1200px}
.about__label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:2vh}
.about__text{font-size:clamp(24px,3.6vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1.25;max-width:24ch;text-wrap:pretty}
.about__cols{
  display:flex;gap:clamp(24px,6vw,90px);flex-wrap:wrap;margin-top:clamp(28px,5vh,48px);
  font-family:var(--mono);font-size:clamp(11px,1.4vw,13px);line-height:2.2;color:var(--muted);
}

/* faq ---------------------------------------------------------------------- */
.faq{position:relative;padding:clamp(70px,10vh,120px) var(--pad)}
.faq__inner{max-width:900px}
.faq__head{margin-bottom:clamp(28px,5vh,48px)}
.faq__label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.faq__title{font-size:clamp(40px,6.5vw,90px);font-weight:700;letter-spacing:-.04em;line-height:.9;text-transform:uppercase}
.faq__list{border-top:1px solid rgba(255,255,255,.08)}
.faq__item{border-bottom:1px solid rgba(255,255,255,.08)}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:none;font-size:clamp(16px,2.2vw,20px);font-weight:500;
  text-align:left;padding:22px 0;cursor:pointer;
}
.faq__num{font-family:var(--mono);font-size:11px;color:var(--dim);margin-right:14px}
.faq__sign{font-family:var(--mono);color:var(--accent);font-size:20px;flex-shrink:0}
.faq__a{padding:0 0 22px;color:var(--muted);font-size:15px;line-height:1.7;max-width:640px;text-wrap:pretty}

/* cta final ---------------------------------------------------------------- */
.final{position:relative;padding:clamp(100px,16vh,180px) var(--pad) clamp(80px,12vh,140px);overflow:hidden}
.final__bg{
  position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
  font-size:clamp(160px,30vw,420px);font-weight:700;line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.05);white-space:nowrap;pointer-events:none;
  user-select:none;text-transform:uppercase;
}
.final__inner{position:relative}
.final__label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:2vh}
.final__title{font-size:clamp(56px,12vw,220px);font-weight:700;letter-spacing:-.045em;line-height:.85;text-transform:uppercase}
.final__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(28px,5vh,48px)}
.final__note{font-family:var(--mono);font-size:12px;color:var(--dim)}

/* rodapé ------------------------------------------------------------------- */
.foot{
  position:relative;border-top:1px solid var(--line-soft);padding:34px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.foot__logo{font-family:var(--mono);font-weight:700;font-size:15px}
.foot__links{display:flex;gap:22px;flex-wrap:wrap}
.foot__links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.foot__links a:hover{color:var(--accent)}
.foot__copy{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* responsivo --------------------------------------------------------------- */
@media (max-width:860px){
  .nav__links{display:none}
}
@media (max-height:760px){
  .hero__meta{display:none}
}
@media (max-width:699px){
  :root{--rail:0px}
  .rail{display:none}
  .main{padding-right:0}
  .nav{right:0}
  .card{border-right:none;border-bottom:1px solid var(--line)}
  .card:last-child{border-bottom:none}
  .step{grid-template-columns:auto 1fr;row-gap:8px}
  .step__desc{grid-column:1/-1}
  .plan__head{grid-template-columns:auto 1fr auto;row-gap:6px}
  .plan__price{grid-column:2/-1;text-align:left}
  .arch{grid-template-columns:auto 1fr;row-gap:4px}
  .arch__tag{grid-column:1/-1;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .grain,.cursor{animation:none}
  html{scroll-behavior:auto}
}