/* =========================================================
   TX FOR FUN — Design tokens
   Paleta: fundo escuro (charcoal-navy) + acentos vivos
   inspirados nas estruturas (laranja, ciano, lima, magenta)
   Tipografia: Baloo 2 (display, arredondada/lúdica)
               + Manrope (corpo, limpa/confiável)
   ========================================================= */
:root{
  --bg:            #12141b;
  --bg-soft:       #191c26;
  --surface:       #1f2330;
  --surface-line:  #2c3142;
  --text:          #f4f2ea;
  --text-muted:    #a7acbd;

  --orange:  #ff8a3d;
  --cyan:    #33d6cf;
  --lime:    #b7e42a;
  --magenta: #ff4fa3;
  --violet:  #8b6bff;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: 'Baloo 2', 'Manrope', system-ui, sans-serif;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: .2px;
}
h1{ font-weight: 700; }
h2{ font-weight: 600; }
p{ margin: 0 0 1em; color: var(--text-muted); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================== NAV =========================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(18,20,27,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--surface-line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1.25rem;
  color: var(--text);
}
.brand .dot{
  width:12px; height:12px; border-radius:50%;
  background: linear-gradient(135deg, var(--orange), var(--magenta));
  box-shadow: 0 0 0 4px rgba(255,138,61,.15);
}
.nav-links{ display:flex; gap:8px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a{
  padding: 9px 16px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; color: var(--text-muted);
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover{ color: var(--text); background: var(--surface); }
.nav-links a.active{ color: var(--bg); background: var(--lime); }
.nav-toggle{ display:none; }

@media (max-width: 760px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background: var(--bg-soft); border-bottom:1px solid var(--surface-line);
    padding: 10px 20px 18px; gap:4px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 14px; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; justify-content:center;
    width:40px; height:36px; background:none; border:0; cursor:pointer;
  }
  .nav-toggle span{ height:2px; background:var(--text); border-radius:2px; }
}

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: 999px;
  font-weight: 700; font-size: .98rem; font-family:'Manrope',sans-serif;
  border: none; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--orange), var(--magenta));
  color: #171018;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,79,163,.25); }
.btn-outline{
  background: transparent; color: var(--text);
  border: 2px solid var(--surface-line);
}
.btn-outline:hover{ border-color: var(--lime); color: var(--lime); }
.btn-block{ width:100%; }

/* =========================== HERO =========================== */
.hero{
  position:relative; overflow:hidden;
  padding: 96px 0 72px;
}
.hero::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%; height: 620px;
  background:
    radial-gradient(420px 320px at 15% 20%, rgba(255,138,61,.18), transparent 70%),
    radial-gradient(480px 360px at 85% 10%, rgba(51,214,207,.16), transparent 70%),
    radial-gradient(380px 300px at 60% 60%, rgba(183,228,42,.10), transparent 70%);
  pointer-events:none;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--lime); margin-bottom: 18px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--lime); display:inline-block; }
.hero h1{ font-size: clamp(2.2rem, 4.4vw, 3.4rem); color: var(--text); }
.hero h1 .hl{
  background: linear-gradient(135deg, var(--orange), var(--magenta) 60%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size: 1.08rem; max-width: 46ch; }
.hero-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap:wrap; }

.hero-frame{
  position:relative; border-radius: var(--radius-lg);
  overflow:hidden; border: 3px solid var(--surface-line);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; }
.hero-frame .tag{
  position:absolute; left:16px; bottom:16px;
  background: rgba(18,20,27,.82); border:1px solid var(--surface-line);
  padding:8px 14px; border-radius:999px; font-size:.82rem; font-weight:700;
}
.hero-frame .tag .sw{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lime); margin-right:6px; }

@media (max-width: 880px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero{ padding: 56px 0 48px; }
}

/* =========================== SECTIONS =========================== */
.section{ padding: 80px 0; }
.section-tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-alt{ background: var(--bg-soft); border-top:1px solid var(--surface-line); border-bottom:1px solid var(--surface-line); }

/* module frame — signature element echoing the tube-frame play structures */
.frame-card{
  position:relative;
  background: var(--surface);
  border: 2px solid var(--surface-line);
  border-radius: var(--radius-md);
  padding: 28px;
}
.frame-card::before{
  content:"";
  position:absolute; top:-2px; left:22px; width:34px; height:6px; border-radius:6px;
  background: var(--accent, var(--orange));
}
.frame-card .post{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: var(--accent, var(--orange));
}
.frame-card .post.tl{ top:-6px; left:-6px; }
.frame-card .post.br{ bottom:-6px; right:-6px; }

/* services grid */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.service-card h3{ font-size: 1.15rem; margin-bottom: 10px; }
.service-icon{
  width:48px; height:48px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--accent, var(--orange)) 18%, transparent);
  color: var(--accent, var(--orange));
  margin-bottom: 18px;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.2rem;
}

/* portfolio gallery */
.gallery{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.gallery-item{
  position:relative; border-radius: var(--radius-md); overflow:hidden;
  border: 2px solid var(--surface-line);
  aspect-ratio: 4/3;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.gallery-item:hover img{ transform: scale(1.05); }
.gallery-item .cap{
  position:absolute; inset:auto 0 0 0; padding: 16px;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  font-weight:700; font-size:.92rem;
}
.gallery-item.big{ grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2,1fr); }
  .gallery-item.big{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }
}
@media (max-width: 600px){
  .gallery{ grid-template-columns: 1fr; }
  .gallery-item.big{ grid-column: span 1; }
}

/* process steps (real sequence -> numbering justified) */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: step; }
@media (max-width: 900px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
.step{ position:relative; padding-top: 12px; }
.step .num{
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:2.1rem;
  color: var(--accent, var(--orange)); opacity:.9; display:block; margin-bottom:10px;
}
.step h3{ font-size:1.02rem; margin-bottom:6px; }
.step p{ font-size:.92rem; }

/* stats */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
@media (max-width: 760px){ .stats{ grid-template-columns: 1fr 1fr; } }
.stat b{ font-family:'Baloo 2',sans-serif; font-size:2.2rem; display:block; color:var(--text); }
.stat span{ color: var(--text-muted); font-size:.9rem; }

/* CTA band */
.cta-band{
  border-radius: var(--radius-lg);
  padding: 52px;
  background: linear-gradient(120deg, rgba(255,138,61,.14), rgba(139,107,255,.14));
  border: 1px solid var(--surface-line);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ margin-bottom:6px; font-size:1.6rem; }
.cta-band p{ margin:0; }

/* =========================== FOOTER =========================== */
.site-footer{
  border-top: 1px solid var(--surface-line);
  padding: 44px 0 26px;
  background: var(--bg-soft);
}
.footer-grid{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom: 26px;
}
.footer-col h4{ font-size:.95rem; margin-bottom:12px; color:var(--text); }
.footer-col a{ display:block; color: var(--text-muted); font-size:.92rem; padding:4px 0; }
.footer-col a:hover{ color: var(--lime); }
.footer-bottom{
  border-top:1px solid var(--surface-line); padding-top:18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color: var(--text-muted);
}
.footer-bottom a{ color: var(--text-muted); }
.footer-bottom a:hover{ color: var(--lime); }

/* =========================== FORMS =========================== */
.field{ margin-bottom: 18px; }
.field label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:7px; }
.field input, .field textarea{
  width:100%; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--bg); border: 2px solid var(--surface-line); color: var(--text);
  font-family:'Manrope',sans-serif; font-size: .96rem;
}
.field input:focus, .field textarea:focus{ border-color: var(--lime); outline:none; }
.field input[type="file"]{ padding: 10px 12px; color: var(--text-muted); }
.field input[type="file"]::file-selector-button{
  margin-right: 12px; padding: 8px 14px; border-radius: 999px; border: none;
  background: var(--surface-line); color: var(--text); font-weight:700; cursor:pointer;
}
.field textarea{ min-height: 130px; resize:vertical; }
.form-note{ font-size:.82rem; }
.alert{
  padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 20px;
  font-size:.92rem; font-weight:600;
}
.alert-success{ background: rgba(183,228,42,.14); border:1px solid var(--lime); color: var(--lime); }
.alert-error{ background: rgba(255,79,163,.12); border:1px solid var(--magenta); color: var(--magenta); }

/* honeypot */
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }

/* =========================== LOGIN / PAINEL =========================== */
.auth-wrap{
  min-height: calc(100vh - 74px);
  display:flex; align-items:center; justify-content:center;
  padding: 40px 20px;
  background:
    radial-gradient(520px 380px at 20% 10%, rgba(255,138,61,.12), transparent 70%),
    radial-gradient(520px 380px at 85% 90%, rgba(51,214,207,.12), transparent 70%);
}
.auth-card{
  width:100%; max-width: 400px;
  background: var(--surface); border:2px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 38px 32px;
}
.auth-card .lock{
  width:52px; height:52px; border-radius:16px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background: linear-gradient(135deg, var(--orange), var(--magenta));
}
.auth-card h1{ font-size:1.5rem; }

.painel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 0; border-bottom:1px solid var(--surface-line); margin-bottom: 34px;
}
.badge-user{
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:.92rem;
}
.badge-user .av{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif;
}
.tool-card{
  border: 2px dashed var(--surface-line); border-radius: var(--radius-md);
  padding: 30px; text-align:center; color: var(--text-muted);
}

/* utility */
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.accent-orange{ --accent: var(--orange); }
.accent-cyan{ --accent: var(--cyan); }
.accent-lime{ --accent: var(--lime); }
.accent-magenta{ --accent: var(--magenta); }
.accent-violet{ --accent: var(--violet); }