/* ======================================================
   SOLYAN — Design tokens
   ====================================================== */
:root{
  --carvao:#1C1B1A;
  --ameixa:#4A3B52;
  --ameixa-light:#6E5B7B;
  --terracota:#A6452B;
  --ambar:#D97B34;
  --areia:#F0EDE6;
  --white:#FFFFFF;

  --font-serif:'Source Serif 4', Georgia, serif;

  --container:1240px;
  --gap:24px;
  --radius:18px;
  --radius-sm:10px;

  --ease:cubic-bezier(.16,.84,.44,1);
  --dur:.7s;
}

/* ======================================================
   Reset
   ====================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
/* One continuous dark backdrop for the whole page (not just the hero), with
   three soft, spread-out washes standing in for the logo's own band order as
   you scroll down: âmbar (open, still-dark sky) near the top, terracota
   ("o sol") around the middle, ameixa (dusk before sunrise) near the bottom.
   Percentages are relative to body's own box, so this scales to whatever the
   page's total height ends up being. */
body{
  font-family:var(--font-serif);
  background:
    radial-gradient(ellipse 70% 45% at 50% 6%, rgba(217,123,52,.18), transparent 72%),
    radial-gradient(ellipse 85% 55% at 50% 48%, rgba(166,69,43,.16), transparent 72%),
    radial-gradient(ellipse 85% 55% at 50% 94%, rgba(74,59,82,.26), transparent 72%),
    var(--carvao);
  color:var(--areia);
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:600;line-height:1.15;letter-spacing:-.01em}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:28px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Fixed starfield behind the whole page (see main.js): sits above body's own
   background (an element's background always paints behind its descendants)
   and below every normal-flow section, thanks to the negative z-index. */
#bgCanvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  z-index:-1;
  pointer-events:none;
}

/* Logo expandida, transparente, atrás de tudo (inclusive do starfield acima
   — .hero__horizon deixou de existir; a "ponta" que aparecia no herói agora
   é só o topo desta versão gigante). position:absolute (não fixed) para que
   role junto com a página, revelando partes diferentes da marca conforme
   desce, em vez de ficar presa à tela. */
#bgLogo{
  position:absolute;
  top:-6vh;left:50%;
  width:min(1500px,175vw);
  max-width:none;
  transform:translateX(-50%);
  opacity:.13;
  z-index:-2;
  pointer-events:none;
}

/* ======================================================
   Utilities
   ====================================================== */
.eyebrow{
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terracota);
  font-style:italic;
  margin-bottom:14px;
}
.section__head{max-width:640px;margin-bottom:64px}
.section__head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.section__head--light .eyebrow{color:var(--ambar)}
.section__head--light h2{color:var(--areia)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 30px;
  border-radius:999px;
  font-size:.95rem;
  font-weight:600;
  transition:transform .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--terracota);color:var(--areia)}
.btn--primary:hover{background:var(--ambar)}
.btn--ghost{border:1px solid rgba(240,237,230,.3);color:var(--areia)}
.btn--ghost:hover{border-color:var(--areia);background:rgba(240,237,230,.08)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--terracota);font-style:italic;font-weight:600;
  transition:gap .3s var(--ease), color .3s ease;
}
.link-arrow i{font-style:normal;transition:transform .3s var(--ease)}
.link-arrow:hover{gap:14px;color:var(--ambar)}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* magnetic buttons wrapper handled via JS transform, keep transition smooth on release */
.magnetic{transition:transform .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease}

/* ======================================================
   NAV
   ====================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s ease, box-shadow .4s ease;
}
.nav__inner{display:flex;align-items:center;justify-content:space-between}
.nav.is-scrolled{
  padding:12px 0;
  background:rgba(20,18,17,.7);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 rgba(240,237,230,.08);
}

.nav__brand{display:flex;align-items:center;gap:12px;position:relative;z-index:101}

/* Símbolo real da marca (imagem), recortado do mesmo jeito que no herói —
   a arte tem bastante respiro transparente ao redor, então a imagem é
   ampliada e centralizada dentro de uma janela menor para mostrar só a
   marca. Texto ao lado é HTML de verdade (não faz parte da imagem), em
   areia, para ficar legível sobre o fundo escuro do menu. */
.nav__mark{
  position:relative;
  width:42px;height:36px;
  overflow:hidden;
  flex-shrink:0;
  transition:width .4s var(--ease), height .4s var(--ease);
}
.nav__mark-img{
  position:absolute;
  top:50%;left:50%;
  width:330%;
  max-width:none;
  transform:translate(-50%,-50%);
}
.nav.is-scrolled .nav__mark{width:34px;height:29px}

.nav__wordmark-stack{display:flex;flex-direction:column;line-height:1.2}
.nav__wordmark{
  font-weight:600;font-size:1.05rem;color:var(--areia);
  transition:font-size .4s var(--ease);
}
.nav__tagline{
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  font-style:italic;color:var(--terracota);
}
.nav.is-scrolled .nav__wordmark{font-size:.94rem}

.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a:not(.nav__cta){
  position:relative;font-size:.92rem;color:var(--areia);
  padding-bottom:4px;
}
.nav__links a:not(.nav__cta)::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .35s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.is-active::after{width:100%}
.nav__cta{
  padding:11px 22px;border-radius:999px;background:var(--terracota);color:var(--areia) !important;
  font-size:.88rem;font-weight:600;
}
.nav__cta:hover{background:var(--ambar)}

.nav__toggle{display:none;flex-direction:column;gap:5px;width:26px;position:relative;z-index:101}
.nav__toggle span{height:2px;width:100%;background:var(--areia);transition:transform .3s ease, opacity .3s ease}

/* ======================================================
   HERO
   ====================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  color:var(--areia);
  overflow:hidden;
  isolation:isolate;
}
.hero__content{position:relative;z-index:2;padding-top:96px}
.hero__title{
  font-size:clamp(2.2rem,5.2vw,4rem);
  max-width:21ch;
  margin-bottom:22px;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero__title .word{
  display:inline-block;
  transform:translateY(115%);
  animation:riseWord .9s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * .05s + .15s);
}
.hero__title .word--accent{color:var(--ambar);font-style:italic}
@keyframes riseWord{to{transform:translateY(0)}}

.hero__subtitle{
  max-width:46ch;
  font-size:1.1rem;
  color:rgba(240,237,230,.78);
  margin-bottom:28px;
}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap}

.hero__scroll{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:36px auto 26px;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,237,230,.6);
}
.hero__scroll i{
  width:1px;height:34px;
  background:linear-gradient(to bottom, var(--ambar), transparent);
  position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:'';position:absolute;left:0;top:-34px;width:100%;height:34px;
  background:linear-gradient(to bottom, transparent, var(--areia));
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{top:-34px}
  100%{top:34px}
}

/* ======================================================
   ABOUT
   ====================================================== */
.about{padding:140px 0}
.about__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
.about__label h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.about__body p{max-width:58ch;color:rgba(240,237,230,.75);font-size:1.05rem;margin-bottom:20px}

.about__pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.pillar{padding-top:20px;border-top:1px solid rgba(240,237,230,.16)}
.pillar__mark{
  display:inline-block;font-style:italic;color:var(--ambar);
  font-size:.85rem;margin-bottom:10px;
}
.pillar h3{font-size:1.05rem;margin-bottom:8px}
.pillar p{font-size:.92rem;color:rgba(240,237,230,.68)}

/* ======================================================
   SERVICES
   ====================================================== */
.services{padding:60px 0 140px}
.service-pillars{display:flex;flex-direction:column}

.service-pillar{padding:56px 0;border-top:1px solid rgba(240,237,230,.12)}
.service-pillar:first-child{border-top:none;padding-top:0}

.service-pillar__top{
  display:grid;grid-template-columns:auto 1fr;gap:24px;
  margin-bottom:36px;max-width:760px;
}
.service-pillar__num{
  font-family:var(--font-serif);
  font-size:2.4rem;font-style:italic;
  color:rgba(240,237,230,.18);
  line-height:1;
}
.service-pillar__title{font-size:1.6rem;margin:4px 0 10px}
.service-pillar__desc{color:rgba(240,237,230,.72);font-size:1rem;max-width:56ch}

.service-group__label{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(240,237,230,.45);margin-bottom:16px;
}

.def-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 40px;margin-bottom:8px}
.def-item{display:flex;flex-direction:column;gap:4px}
.def-item strong{font-size:1rem;color:var(--areia)}
.def-item span{font-size:.9rem;color:rgba(240,237,230,.65)}

.service-pillar__groups{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 40px;margin-bottom:8px}
.service-group{padding-top:2px}
.service-group__title{font-size:1rem;font-weight:600;margin-bottom:6px;color:var(--areia)}
.service-group__desc{font-size:.88rem;color:rgba(240,237,230,.6);margin-bottom:12px}
.service-group__flow{
  font-size:.88rem;color:var(--ambar);margin-bottom:12px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.service-group__flow i{font-style:normal;color:rgba(240,237,230,.38)}

.tag-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tag{
  font-size:.78rem;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(240,237,230,.16);
  color:rgba(240,237,230,.72);
  background:rgba(240,237,230,.03);
}

.service-pillar__objective{
  margin-top:28px;font-style:italic;
  color:rgba(217,123,52,.85);font-size:.95rem;
}

/* "A estrutura completa" — a vertical chain summarizing the four pillars */
.pillar-map{margin-top:100px}
.pillar-map__chain{
  display:flex;flex-direction:column;
  max-width:520px;margin-inline:auto;margin-top:32px;
}
.pillar-map__item{
  position:relative;
  padding:24px 28px;border-radius:var(--radius);
  background:rgba(240,237,230,.04);
  border:1px solid rgba(240,237,230,.12);
  text-align:center;
}
.pillar-map__item + .pillar-map__item{margin-top:34px}
.pillar-map__item::before{
  content:'';position:absolute;left:50%;top:-34px;
  width:1px;height:34px;
  background:linear-gradient(to bottom, transparent, rgba(217,123,52,.5));
  transform:translateX(-50%);
}
.pillar-map__tag{
  display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:8px;
}
.pillar-map__item h4{font-size:1.05rem;margin-bottom:6px}
.pillar-map__item p{font-size:.86rem;color:rgba(240,237,230,.6)}

.services__signature{
  text-align:center;margin-top:110px;padding-top:56px;
  border-top:1px solid rgba(240,237,230,.12);
}
.services__signature-line{
  font-size:clamp(1.4rem,3vw,2rem);font-style:italic;
  color:var(--areia);margin-bottom:10px;
}
.services__signature-tag{
  font-size:.9rem;letter-spacing:.06em;
  color:rgba(240,237,230,.5);text-transform:uppercase;
}

/* ======================================================
   PROCESS (dark section)
   ====================================================== */
.process{color:var(--areia);padding:130px 0}
.process__timeline{position:relative}
.process__arc{
  width:100%;height:70px;display:block;margin-bottom:-30px;
}
.process__arc path{
  fill:none;stroke:var(--ambar);stroke-width:2;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.2s var(--ease);
}
.process__arc path.is-drawn{stroke-dashoffset:0}

.process__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.step{padding-top:22px;border-top:1px solid rgba(240,237,230,.2)}
.step__mark{display:block;font-style:italic;color:var(--ambar);font-size:.85rem;margin-bottom:14px}
.step h3{font-size:1.02rem;margin-bottom:10px}
.step p{font-size:.88rem;color:rgba(240,237,230,.72)}

/* ======================================================
   PROJECTS
   ====================================================== */
.projects{padding:140px 0}
.project-card{
  display:grid;grid-template-columns:.9fr 1.1fr;
  border-radius:var(--radius);overflow:hidden;
  background:rgba(20,18,17,.5);color:var(--areia);
  border:1px solid rgba(240,237,230,.12);
}
.project-card.reveal{
  transition:opacity .8s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.project-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(28,27,26,.4)}
.project-card__visual{position:relative;min-height:320px;overflow:hidden}
.project-card__visual--alinha{
  display:flex;align-items:center;justify-content:center;
  background:#173F37;
}
.alinha-mark{width:52%;max-width:210px;height:auto;transition:transform .6s var(--ease)}
.project-card:hover .alinha-mark{transform:scale(1.05)}

.project-card__body{padding:48px 44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.tag{
  display:inline-block;width:fit-content;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ambar);border:1px solid rgba(217,123,52,.4);
  padding:6px 12px;border-radius:999px;
}
.project-card__body h3{font-size:1.7rem}
.project-card__body p{color:rgba(240,237,230,.75);max-width:52ch;font-size:1rem}
.projects__note{margin-top:28px;font-style:italic;color:rgba(240,237,230,.45);font-size:.9rem}

/* ======================================================
   TESTIMONIALS
   ====================================================== */
.testimonials{padding:60px 0 140px}
.testimonials__track{
  display:flex;gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width:none;
}
.testimonials__track::-webkit-scrollbar{display:none}
.testimonial{
  scroll-snap-align:start;
  flex:0 0 min(440px,86vw);
  background:rgba(240,237,230,.045);
  border:1px solid rgba(240,237,230,.12);
  backdrop-filter:blur(6px);
  border-radius:var(--radius);
  padding:34px 30px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:220px;
}
.testimonial p{font-style:italic;font-size:1.05rem;color:rgba(240,237,230,.88);margin-bottom:26px}
.testimonial footer{display:flex;align-items:center;gap:14px}
.testimonial__avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--ameixa-light);color:var(--areia);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
}
.testimonial footer strong{display:block;font-size:.92rem}
.testimonial footer span{font-size:.8rem;color:rgba(240,237,230,.5)}

.testimonials__dots{display:flex;gap:8px;justify-content:center;margin-top:28px}
.testimonials__dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(240,237,230,.25);
  transition:background .3s ease, transform .3s ease;
}
.testimonials__dots button.is-active{background:var(--terracota);transform:scale(1.3)}

/* ======================================================
   CONTACT
   ====================================================== */
.contact{position:relative;padding:140px 0;color:var(--areia);overflow:hidden}
.contact__grid{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}
.contact__label h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:20px}
.contact__label .eyebrow{color:var(--ambar)}
.contact__text{color:rgba(240,237,230,.72);max-width:40ch}
.contact__text a{color:var(--ambar);border-bottom:1px solid rgba(217,123,52,.4)}

.contact__form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.85rem;color:rgba(240,237,230,.7)}
.field label span{opacity:.55;font-size:.78rem}
.field input,.field textarea{
  background:rgba(240,237,230,.06);
  border:1px solid rgba(240,237,230,.18);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  color:var(--areia);
  transition:border-color .3s ease, background .3s ease;
  resize:vertical;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--ambar);background:rgba(240,237,230,.1);
}
.contact__form .btn{margin-top:6px;align-self:flex-start}
.form__status{font-size:.85rem;min-height:1.2em;color:var(--ambar)}
.form__status.is-error{color:#e0836b}

/* ======================================================
   FOOTER
   ====================================================== */
.footer{color:var(--areia);padding-top:80px}
.footer__inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(240,237,230,.12)}
.footer__logo{height:100px;width:auto;margin-bottom:14px}
.footer__brand p{color:rgba(240,237,230,.55);font-size:.9rem}
.footer__links{display:flex;gap:64px}
.footer__links h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(240,237,230,.5);margin-bottom:16px}
.footer__links a{display:block;font-size:.92rem;color:rgba(240,237,230,.78);margin-bottom:10px;transition:color .3s ease}
.footer__links a:hover{color:var(--ambar)}
.footer__bottom{padding:26px 0;font-size:.8rem;color:rgba(240,237,230,.4)}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width:980px){
  .about__grid{grid-template-columns:1fr;gap:32px}
  .service-pillar__groups{grid-template-columns:1fr}
  .def-list{grid-template-columns:1fr}
  .process__steps{grid-template-columns:repeat(2,1fr)}
  .process__arc{display:none}
  .project-card{grid-template-columns:1fr}
  .project-card__visual{min-height:200px}
  .contact__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
}

@media (max-width:720px){
  .nav__links{
    position:fixed;inset:0 0 auto auto;top:0;right:0;
    height:100svh;width:min(320px,80vw);
    background:#151312;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:28px;padding:40px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a:not(.nav__cta){font-size:1.15rem}
  .nav__toggle{display:flex}
  .nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.is-open span:nth-child(2){opacity:0}
  .nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .service-pillar__top{grid-template-columns:1fr;gap:8px}
  .process__steps{grid-template-columns:1fr;gap:32px}
  .about__pillars{grid-template-columns:1fr;gap:24px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{text-align:center}
}