/* ECONNECT — Aquisição & Performance
   Identidade: bold, enérgica, momentum de performance. Standalone. */

:root {
  --ink:      #14100E;
  --ink-2:    #241D19;
  --paper:    #FFFFFF;
  --paper-2:  #FBF6F3;
  --line:     #EBE3DE;
  --line-2:   #DDD2CB;
  --text:     #14100E;
  --text-2:   #6B6560;
  --text-3:   #9A938D;
  --accent:   #F0522B;
  --accent-2: #D63E19;
  --accent-soft: #FDE9E2;

  --display: "Sora", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  --container: 1200px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 2.75rem);
  --sec-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --r: 12px;
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }

body{
  font-family: var(--body); font-size:1.0625rem; line-height:1.6; color:var(--text);
  background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:#fff; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.03em; color:var(--ink); }

.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sec-y); }
.section--soft{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:#CFC7C1; }
.section--dark h2,.section--dark h3{ color:#fff; }

.kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--body); font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--accent); }

.head{ max-width:24ch; }
.head--wide{ max-width:32ch; }
.head h2{ font-size:clamp(2rem,1.3rem + 3vw,3.6rem); margin-top:1rem; }
.head p{ font-family:var(--body); color:var(--text-2); font-size:1.15rem; margin-top:1.1rem; max-width:52ch; letter-spacing:0; }
.section--dark .head p{ color:#B4ABA5; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--body); font-size:.98rem; font-weight:600; letter-spacing:-.01em;
  padding:1em 1.6em; border-radius:100px; border:2px solid transparent; transition:.2s ease;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn .ar{ transition:transform .25s ease; }
.btn:hover .ar{ transform:translateX(5px); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-2); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }
.section--dark .btn--ghost,.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover{ border-color:#fff; }

/* nav */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; border-bottom:1px solid transparent; transition:background .3s, border-color .3s; }
.nav.scrolled{ background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
/* Over the dark hero (before scroll): light logo + links */
.nav:not(.scrolled) .logo{ color:#fff; }
.nav:not(.scrolled) .nav__links a{ color:rgba(255,255,255,.72); }
.nav:not(.scrolled) .nav__links a:hover{ color:#fff; }
.nav:not(.scrolled) .burger span{ background:#fff; }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo{ font-family:var(--display); font-weight:800; font-size:1.4rem; letter-spacing:-.04em; color:var(--ink); }
.logo b{ color:var(--accent); }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{ font-size:.95rem; font-weight:500; color:var(--text-2); transition:color .2s; }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{ display:inline-flex; }
.burger{ display:none; background:none; border:0; padding:.4rem; }
.burger span{ display:block; width:24px; height:2.5px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.3s; }
.mobile{ position:fixed; inset:74px 0 0 0; z-index:49; background:var(--ink); padding:2rem 0; }
.mobile[hidden]{ display:none; }
.mobile .wrap{ display:flex; flex-direction:column; }
.mobile a{ font-family:var(--display); font-weight:700; font-size:1.9rem; color:#fff; padding:.7rem 0; border-bottom:1px solid var(--ink-2); }
.mobile a:last-child{ color:var(--accent); border-bottom:0; }

/* hero */
.hero{ position:relative; background:var(--ink); color:#fff; padding-top:clamp(8rem,6rem + 9vw,12rem); padding-bottom:clamp(4.5rem,3rem + 7vw,8rem); overflow:hidden; }
.hero__streak{ position:absolute; z-index:0; top:-10%; right:-12%; width:min(680px,70vw); aspect-ratio:1; background:radial-gradient(circle at center, rgba(240,82,43,.32), transparent 60%); filter:blur(10px); pointer-events:none; }
.hero__in{ position:relative; z-index:1; }
.hero__kicker{ display:inline-flex; align-items:center; gap:.6rem; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.6rem; }
.hero__kicker::before{ content:""; width:26px; height:2px; background:var(--accent); }
.hero h1{ font-size:clamp(2.8rem,1.5rem + 5.4vw,6.5rem); letter-spacing:-.045em; color:#fff; max-width:15ch; }
.hero h1 .em{ color:var(--accent); position:relative; white-space:nowrap; }
.hero h1 .em .ar{ font-size:.6em; vertical-align:.12em; margin-left:.1em; }
.hero__sub{ font-family:var(--body); font-size:1.25rem; color:#B4ABA5; max-width:48ch; margin-top:1.8rem; line-height:1.5; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }

/* moving accent strip under hero */
.marquee{ background:var(--accent); color:#fff; overflow:hidden; border-block:0; }
.marquee__track{ display:flex; gap:3rem; white-space:nowrap; padding:.9rem 0; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.01em; animation:slide 26s linear infinite; }
.marquee__track span{ display:inline-flex; align-items:center; gap:3rem; }
.marquee__track span::after{ content:"◆"; font-size:.6em; opacity:.7; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* about */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.about__big{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem); line-height:1.25; letter-spacing:-.02em; }
.about__big .em{ color:var(--accent); }
.about__txt p{ color:var(--text-2); font-size:1.1rem; line-height:1.6; }
.about__txt p+p{ margin-top:1.1rem; }

/* services */
.svc{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:clamp(2.4rem,4vw,3.6rem); }
.svc__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.5rem 1.9rem; display:flex; flex-direction:column; min-height:210px; transition:transform .3s ease, border-color .3s, box-shadow .3s; }
.section--soft .svc__card{ background:#fff; }
.svc__card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 18px 40px rgba(240,82,43,.12); }
.svc__n{ font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--accent); }
.svc__card h3{ font-size:1.16rem; margin:auto 0 .5rem; letter-spacing:-.02em; }
.svc__card p{ font-size:.94rem; color:var(--text-2); line-height:1.5; }

/* capabilities */
.caps{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.pills{ display:flex; flex-wrap:wrap; gap:.7rem; }
.pill{ font-family:var(--body); font-weight:600; font-size:.92rem; padding:.6em 1.1em; border-radius:100px; border:1.5px solid var(--line-2); color:var(--text); transition:.2s; }
.pill:hover{ border-color:var(--accent); color:var(--accent); }
.pill--k{ background:var(--accent); color:#fff; border-color:var(--accent); }
.caps__note{ font-size:.9rem; color:var(--text-3); margin-top:1.4rem; }

/* method — big steps */
.flow{ margin-top:clamp(2.4rem,4vw,3.6rem); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2.2rem); }
.flow__step{ position:relative; padding-top:1.6rem; border-top:3px solid var(--accent); }
.flow__n{ font-family:var(--display); font-weight:800; font-size:2.4rem; color:var(--ink); line-height:1; letter-spacing:-.04em; }
.section--dark .flow__n{ color:#fff; }
.flow__step h3{ font-size:1.14rem; margin:.9rem 0 .6rem; }
.flow__step p{ font-size:.95rem; color:var(--text-2); line-height:1.5; }
.section--dark .flow__step p{ color:#B4ABA5; }

/* growth section */
.growth{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.6rem); margin-top:clamp(2.4rem,4vw,3.6rem); }
.growth__item h3{ font-size:1.3rem; margin-bottom:.6rem; display:flex; align-items:baseline; gap:.6rem; }
.growth__item h3 .dot{ color:var(--accent); font-size:1.4rem; }
.growth__item p{ color:var(--text-2); font-size:1rem; line-height:1.6; }

/* cta */
.cta{ text-align:center; }
.cta__in{ max-width:44ch; margin-inline:auto; }
.cta h2{ font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem); }
.cta p{ font-family:var(--body); color:#B4ABA5; font-size:1.15rem; margin-top:1.1rem; }
.cta__act{ display:flex; justify-content:center; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }

/* footer */
.foot{ background:var(--ink); color:#8E857F; padding-block:clamp(3rem,4vw,4.5rem) 2rem; }
.foot__top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; padding-bottom:2.4rem; border-bottom:1px solid var(--ink-2); }
.foot__logo{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:#fff; letter-spacing:-.04em; }
.foot__logo b{ color:var(--accent); }
.foot__tag{ margin-top:.8rem; max-width:32ch; font-size:.98rem; }
.foot__bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; margin-top:1.6rem; font-size:.82rem; color:#6E655F; }
.foot__bar a{ color:inherit; transition:color .2s; }
.foot__bar a:hover{ color:#D3CBC5; }

/* reveal */
[data-rise]{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
[data-rise].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-rise]{opacity:1;transform:none} }

/* responsive */
@media (max-width: 980px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:block; }
  .about{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:repeat(2,1fr); }
  .caps{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .growth{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .svc{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
  .hero__cta .btn,.cta__act .btn{ flex:1; justify-content:center; }
}
