/* Halo Digit — institutional website UI kit styles.
   Tokens come from colors_and_type.css */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--surface-base);
  color: var(--fg1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.container { width: min(1200px, 92vw); margin: 0 auto; }
.section { padding: clamp(44px, 5.5vw, 76px) 0; position: relative; }

/* glows behind sections */
.glow { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.glow::before, .glow::after { content:""; position:absolute; border-radius:50%; filter: blur(90px); }
.glow.orange::before { width:520px; height:520px; background:rgba(242,92,5,0.16); top:-180px; left:-120px; }
.glow.purple::after { width:480px; height:480px; background:rgba(95,69,192,0.16); bottom:-200px; right:-140px; }
.section > .container { position:relative; z-index:1; }

/* eyebrow */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--accent); margin-bottom:14px;
}
.eyebrow .ec { color: var(--accent); display:inline-flex; }

.h-display { font-weight:500; font-size: var(--display); line-height:1.04; letter-spacing:-0.02em; text-wrap:balance; }
.h1 { font-weight:500; font-size: var(--h1); line-height:1.12; letter-spacing:-0.018em; text-wrap:balance; }
.h2 { font-weight:500; font-size: var(--h2); line-height:1.15; letter-spacing:-0.015em; text-wrap:balance; }
.lead { font-weight:300; font-size: var(--body-lg); line-height:1.6; color: var(--fg2); }
.body { font-weight:300; font-size: var(--body); line-height:1.6; color: var(--fg2); }

/* buttons */
.btn {
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-weight:500; font-size:15px; line-height:1; padding:14px 24px;
  border-radius: var(--r-pill); border:1px solid transparent; transition: all .18s ease; white-space:nowrap;
}
.btn-primary { background: var(--grad-orange); color:#fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { filter:brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { background: var(--accent-press); box-shadow:none; transform:none; }
.btn-secondary { background: transparent; color: var(--fg1); border-color: var(--surface-line-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background:transparent; color: var(--fg1); padding-left:6px; padding-right:6px; }
.btn-ghost:hover { color: var(--accent); }
.btn svg { transition: transform .18s ease; }
.btn:hover svg { transform: translate(2px,-2px); }
.btn-ghost:hover svg { transform: translateX(3px); }

/* glass card */
.glass {
  background: var(--glass-fill); border:1px solid var(--glass-border);
  border-radius: var(--r-lg); backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.icon-tile {
  width:52px; height:52px; border-radius:13px; background: var(--accent-soft);
  display:grid; place-items:center; color: var(--accent); flex:none;
}
/* service card hover: reveal background image + lift */
.svc-card { transition: border-color .2s ease, transform .2s ease; }
.svc-card:hover { border-color: var(--accent-ring); transform: translateY(-3px); }
.svc-card .svc-bg { transition: opacity .35s ease, transform .6s ease; }
.svc-card:hover .svc-bg { opacity: 0.40; transform: scale(1.07); }

/* ---- Service bands (faixas) ---- */
.svc-band {
  position: relative; display: grid; grid-template-columns: 0.95fr 1.05fr;
  min-height: 300px; border: 1px solid var(--surface-line);
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface-raised);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.svc-band:hover { border-color: var(--accent-ring); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.svc-band-photo { position: relative; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.svc-band:hover .svc-band-photo { transform: scale(1.045); }
.svc-band-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,15,0) 32%, var(--surface-raised) 96%);
}
.svc-band-body {
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  padding: 40px clamp(28px, 4vw, 56px); position: relative; z-index: 1;
}
.svc-band.reverse .svc-band-photo { order: 2; }
.svc-band.reverse .svc-band-photo::after {
  background: linear-gradient(270deg, rgba(13,13,15,0) 32%, var(--surface-raised) 96%);
}
.svc-band.reverse .svc-band-body { order: 1; text-align: right; align-items: flex-end; }
.svc-pill {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--surface-line-strong); border-radius: var(--r-pill);
  padding: 8px 16px 8px 13px; color: var(--accent);
  font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.svc-pill span { color: var(--fg2); }
@media (max-width: 820px) {
  .svc-band { grid-template-columns: 1fr; }
  .svc-band-photo { min-height: 190px; }
  .svc-band.reverse .svc-band-photo { order: 0; }
  .svc-band-body, .svc-band.reverse .svc-band-body { order: 0; text-align: left; align-items: flex-start; }
  .svc-band-photo::after, .svc-band.reverse .svc-band-photo::after {
    background: linear-gradient(0deg, rgba(13,13,15,0) 55%, var(--surface-raised) 98%);
  }
}
/* service-card icon — large, gradient-filled, glowing */
.svc-icon {
  width:66px; height:66px; border-radius:19px; flex:none;
  background: var(--grad-orange); color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 12px 26px rgba(242,92,5,0.34), inset 0 1px 0 rgba(255,255,255,0.25);
}

@media (max-width: 760px) {
  .section { padding: 48px 0; }
}

/* ---- Animations ---- */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-in { opacity: 0; animation: heroIn .85s cubic-bezier(.22,.61,.36,1) forwards; }
  .hero-in.d1 { animation-delay: .08s; }
  .hero-in.d2 { animation-delay: .20s; }
  .hero-in.d3 { animation-delay: .34s; }
  .hero-in.d4 { animation-delay: .50s; }
  .hero-in.d5 { animation-delay: .66s; }
}

/* word-by-word hero title reveal */
.wr { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.wr-in { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .wr-in { transform: translateY(112%); animation: wordUp .85s cubic-bezier(.19,1,.22,1) forwards; }
}
@keyframes wordUp { to { transform: translateY(0); } }

/* scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: var(--grad-orange);
  transform: scaleX(0); transform-origin: left center;
  box-shadow: 0 0 12px rgba(242,92,5,0.55);
  pointer-events: none;
}

/* ambient cursor light */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 680px; height: 680px; z-index: 3;
  background: radial-gradient(circle, rgba(242,92,5,0.07) 0%, rgba(95,69,192,0.04) 38%, transparent 65%);
  pointer-events: none; mix-blend-mode: screen;
}

/* spotlight border/wash nos cards sob o cursor */
.glass, .svc-band { position: relative; }
.glass::after, .svc-band::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(242,92,5,0.10), transparent 62%);
  opacity: 0; transition: opacity .35s ease; z-index: 1;
}
.glass:hover::after, .svc-band:hover::after { opacity: 1; }

/* arco da marca flutuando (ambiente) */
@media (prefers-reduced-motion: no-preference) {
  .float-arc { animation: arcFloat 11s ease-in-out infinite alternate; }
}
@keyframes arcFloat {
  from { transform: translateY(-10px) rotate(-2deg); }
  to   { transform: translateY(14px) rotate(3deg); }
}

/* glow "respirando" */
@media (prefers-reduced-motion: no-preference) {
  .glow.orange::before, .glow.purple::after { animation: breathe 9s ease-in-out infinite alternate; }
}
@keyframes breathe {
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 1.0; transform: scale(1.18); }
}

/* nav link underline */
.nav-link { position: relative; }
.marquee:hover { animation-play-state: paused; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* testimonial quote swap */
@keyframes quoteIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .quote-in { animation: quoteIn .5s cubic-bezier(.22,.61,.36,1); }
}