/* =========================================================
   OKAMY STUDIO — LANDING PAGE
   Design system: preto, centralizado, inspirado na Apple
========================================================= */

:root{
  --black: #060607;
  --black-soft: #0b0d10;
  --black-elev: #121519;
  --black-elev-2: #191d23;
  --hairline: rgba(255,255,255,.1);

  --midnight: #122C4F;
  --midnight-700: #0d213c;
  --pearl: #FBF9E4;
  --ocean: #5B88B2;
  --ocean-light: #8FB6D6;
  --ocean-soft: rgba(91,136,178,.14);
  --whats: #25D366;
  --whats-dark: #1DA851;

  --ink: #F5F7FA;
  --ink-muted: rgba(245,247,250,.66);
  --ink-faint: rgba(245,247,250,.4);

  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --shadow-soft: 0 24px 60px -24px rgba(0,0,0,.7);
  --shadow-glow: 0 0 0 1px rgba(91,136,178,.28), 0 30px 80px -30px rgba(91,136,178,.4);

  --container: 1280px;
  --measure: 760px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);

  --ff-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);

  /* Escala tipografica unica, usada em TODAS as secoes */
  --fs-h1: clamp(2rem, 4.4vw, 2.85rem);
  --fs-h2: clamp(1.7rem, 3.2vw, 2.2rem);
  --fs-h3: 1.22rem;
  --fs-h4: 1.02rem;
  --fs-p:  1rem;
  --fs-sm: .9rem;
  --fs-xs: .8rem;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--ff-body);
  background: var(--black);
  color: var(--ink);
  line-height: 1.6;
  font-size: var(--fs-p);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* Escala tipografica global — todo h1/h2/h3/h4/p do site parte daqui */
h1,h2,h3,h4{ font-family: var(--ff-display); margin:0; line-height:1.15; letter-spacing:-0.01em; font-weight:700; }
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }
p{ margin:0; font-size: var(--fs-p); }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding:0 clamp(1.25rem, 5vw, 3rem); }
.container-wide{ width:100%; max-width: 1440px; margin:0 auto; padding:0 clamp(1.25rem, 5vw, 3rem); }

::selection{ background: var(--ocean); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--black); }
::-webkit-scrollbar-thumb{ background: var(--ocean); border-radius:10px; }

/* =========== Utility =========== */
.section{ padding: clamp(4rem, 8vw, 7rem) 0; position:relative; }
.section-alt{ background: var(--black-soft); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size: var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ocean-light);
  background: var(--ocean-soft);
  border:1px solid rgba(91,136,178,.32);
  padding:.45rem 1rem; border-radius:999px;
  margin-bottom:1.25rem;
}
.section-title{ max-width: var(--measure); }
.section-title.center{ margin-inline:auto; text-align:center; }
.section-sub{
  font-size: var(--fs-p);
  color: var(--ink-muted);
  max-width: 34rem; margin-top:.9rem;
}
.section-head{ margin-bottom: clamp(2.5rem, 5vw, 3.6rem); text-align:center; }
.section-head .section-title{ margin-inline:auto; text-align:center; }
.section-head .section-sub{ margin-inline:auto; text-align:center; }

.grad-text{
  background: linear-gradient(100deg, var(--ocean-light), var(--pearl) 55%, var(--ocean-light));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 1rem 1.9rem; border-radius: 999px;
  font-weight:600; font-size: var(--fs-sm); font-family: var(--ff-body);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap; position:relative;
}
.btn i{ font-size: 1.05em; flex:none; }
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: var(--whats);
  color:#04220f;
  box-shadow: 0 14px 32px -10px rgba(37,211,102,.5);
}
.btn-primary:hover{ background: var(--whats-dark); transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(37,211,102,.6); color:#04220f; }
.btn-ghost{
  background: rgba(245,247,250,.06);
  color: var(--ink);
  border:1px solid rgba(245,247,250,.22);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background: rgba(245,247,250,.13); transform: translateY(-3px); }
.btn-block{ width:100%; }
/* Com GSAP (fora do modo reduced-motion), o próprio JS anima y/scale no hover e no clique —
   a transição/transform CSS entraria em conflito com esse tween curto. Em reduced-motion,
   .js-motion não é aplicada e o hover/active volta a ser só CSS. */
.js-motion .btn{ transition: box-shadow .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease; }
.js-motion .btn:active,
.js-motion .btn-primary:hover,
.js-motion .btn-ghost:hover{ transform:none; }
.btn-sm{ padding:.75rem 1.35rem; font-size: var(--fs-xs); }

/* =========== Header =========== */
.header{
  position: fixed; top:0; left:0; right:0; z-index: 90;
  padding: 1.2rem 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.header.scrolled{
  padding: .65rem 0;
  background: rgba(6,6,7,.75);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.7);
  border-bottom: 1px solid var(--hairline);
}
.brand{ display:flex; align-items:center; }
.brand img{ height:30px; width:auto; }

.nav-desktop{ display:none; }
.nav-desktop ul{ display:flex; align-items:center; gap:2.1rem; }
.nav-desktop a{
  font-size: var(--fs-sm); font-weight:500; color: rgba(245,247,250,.78);
  position:relative; padding:.3rem 0; transition: color .25s ease;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0%;
  background: var(--ocean-light); transition: width .3s var(--ease);
}
.nav-desktop a:hover{ color:#fff; }
.nav-desktop a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:.8rem; }
.header-actions .btn-primary{ display:none; }

.burger{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(245,247,250,.08); border:1px solid rgba(245,247,250,.18);
}
.burger span{ display:block; width:17px; height:1.5px; background:#fff; position:relative; transition: transform .3s ease, opacity .3s ease; }
.burger span::before, .burger span::after{ content:""; position:absolute; left:0; width:17px; height:1.5px; background:#fff; transition: transform .3s ease, top .3s ease; }
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger.open span{ background: transparent; }
.burger.open span::before{ transform: rotate(45deg); top:0; }
.burger.open span::after{ transform: rotate(-45deg); top:0; }

.mobile-nav{
  position: fixed; inset:0; z-index: 89;
  background: var(--black);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2rem;
  transform: translateY(-100%); opacity:0; visibility:hidden;
  transition: transform .5s var(--ease), opacity .4s ease, visibility .5s;
}
.mobile-nav.open{ transform: translateY(0); opacity:1; visibility:visible; }
.mobile-nav a{ font-family: var(--ff-display); font-size:1.5rem; font-weight:600; color:#fff; }
.mobile-nav .btn{ margin-top:1rem; }
.mobile-nav.open ~ .wa-float{ opacity:0; visibility:hidden; pointer-events:none; transition: opacity .25s ease, visibility .25s; }

/* =========== Hero (estilo Apple, centralizado, com laterais animadas) =========== */
.hero{
  position:relative; display:flex; align-items:center;
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(91,136,178,.22) 0%, transparent 60%),
    linear-gradient(180deg, #0a0c10 0%, var(--black) 60%);
  overflow:hidden; padding: 6.5rem 0 2.5rem; color: var(--ink); text-align:center;
}
@media (min-width: 1000px){
  .hero{ padding-top: 6.5rem; padding-bottom: 2rem; min-height: 640px; }
}
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-grid{
  position:absolute; inset:0; opacity:.22;
  background-image: linear-gradient(rgba(245,247,250,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(245,247,250,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
}
.hero-blob{ position:absolute; border-radius:50%; filter: blur(80px); opacity:.5; will-change: transform; }
.hero-blob.b1{ width:34rem; height:34rem; background: radial-gradient(circle, rgba(91,136,178,.5), transparent 70%); top:-14rem; left:50%; margin-left:-8rem; }
.hero-blob.b2{ width:22rem; height:22rem; background: radial-gradient(circle, rgba(245,247,250,.1), transparent 70%); bottom:-8rem; right:6%; }

.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1fr; align-items:center; gap: 1rem; }
.hero-content{ max-width: 40rem; margin:0 auto; }
.hero-title{ text-wrap: balance; }
.hero-sub{ margin-top:1rem; font-size: clamp(1rem, 1.3vw, 1.08rem); color: var(--ink-muted); max-width: 34rem; margin-inline:auto; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.7rem; justify-content:center; }
.hero-note{ margin-top:.9rem; font-size: var(--fs-xs); color: var(--ink-faint); }

/* =========== Feature squares (substitui os numeros) =========== */
.feature-strip{ padding: clamp(2.2rem,4vw,3rem) 0; background: var(--black-soft); border-bottom:1px solid var(--hairline); }
.feature-grid{ display:grid; grid-template-columns:1fr; align-items:stretch; gap:1.1rem; max-width: 62rem; margin-inline:auto; }
.feature-box{
  display:flex; align-items:center; gap:1rem; text-align:left; height:100%; box-sizing:border-box;
  background: rgba(245,247,250,.04); border:1px solid var(--hairline);
  border-radius: var(--radius-md); padding:1.3rem 1.4rem;
  transition: transform .35s var(--ease), border-color .35s ease;
}
.feature-box:hover{ transform: translateY(-4px); border-color: rgba(143,182,214,.4); }
.feature-box .fb-icon{
  flex:none; width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg, var(--midnight), var(--ocean)); color:#fff; font-size:1.3rem;
}
.feature-box .fb-icon.anim-float{ animation: floaty 5s ease-in-out infinite; }
.feature-box .fb-icon.anim-pulse{ animation: pulseScale 3.2s ease-in-out infinite; }
.feature-box .fb-icon.anim-swing{ animation: swing 4.5s ease-in-out infinite; }
.feature-box h4{ font-size: var(--fs-h4); }
.feature-box p{ color: var(--ink-muted); font-size: var(--fs-sm); margin-top:.2rem; }

/* =========== Reveal / animações ===========
   Visível por padrão: se o GSAP não carregar, nada fica escondido.
   O JS (gsap.set) esconde os elementos só depois de confirmar que a lib carregou,
   e então anima a entrada via ScrollTrigger. Isso evita opacity:0 travado. */
.reveal, .reveal-scale{ opacity:1; transform:none; }
.js-gsap .reveal, .js-gsap .reveal-scale{ will-change: opacity, transform; }

@keyframes floaty{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-14px) rotate(3deg);} }
@keyframes pulseScale{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.12);} }
@keyframes swing{ 0%,100%{ transform: rotate(-8deg);} 50%{ transform: rotate(8deg);} }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* =========== Why section =========== */
.why-copy{ max-width: 42rem; margin: 0 auto; text-align:center; }
.why-copy p{ color: var(--ink-muted); margin-top:1rem; }
.why-list{ display:grid; grid-template-columns:1fr; gap:1.1rem; margin-top:2.6rem; max-width: 1100px; margin-inline:auto; }
.why-item{
  display:flex; gap:1rem; align-items:flex-start; text-align:left;
  background: var(--black-elev); border:1px solid var(--hairline);
  padding:1.3rem 1.4rem; border-radius: var(--radius-md);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s ease;
}
.why-item:hover{ transform: translateY(-6px); border-color: rgba(143,182,214,.45); background: var(--black-elev-2); }
.icon-badge{
  flex:none; width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, var(--midnight), var(--ocean));
  color:#fff; box-shadow: 0 14px 30px -12px rgba(91,136,178,.5); font-size:1.1rem;
}
.icon-badge.anim-float{ animation: floaty 6s ease-in-out infinite; }
.icon-badge.anim-pulse{ animation: pulseScale 3.4s ease-in-out infinite; }
.icon-badge.anim-swing{ animation: swing 5s ease-in-out infinite; }
.icon-badge.anim-spin{ animation: spinSlow 7s linear infinite; }
@keyframes spinSlow{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }
.why-item h4{ font-weight:700; }
.why-item p{ color: var(--ink-muted); font-size: var(--fs-sm); margin-top:.3rem; }

.audience-wrap{ margin-top: clamp(2.6rem,5vw,3.6rem); max-width: 1100px; margin-inline:auto; }
.audience-card{
  background: linear-gradient(160deg, var(--midnight-700), var(--black-soft));
  color:#fff; border-radius: var(--radius-xl); padding: clamp(2rem,4vw,3rem);
  position:relative; overflow:hidden; box-shadow: var(--shadow-soft); border:1px solid var(--hairline);
}
.audience-card::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background: radial-gradient(circle at 50% 0%, rgba(91,136,178,.4), transparent 55%);
}
.audience-card h3{ position:relative; margin-bottom:1.6rem; text-align:center; }
.audience-list{ position:relative; display:grid; gap:.9rem; grid-template-columns: repeat(1,1fr); }
.audience-list li{
  display:flex; align-items:center; gap:.75rem; font-size: var(--fs-sm);
  background: rgba(245,247,250,.05); border:1px solid rgba(245,247,250,.12);
  padding:.9rem 1.1rem; border-radius: var(--radius-sm);
  transition: transform .3s var(--ease), background .3s ease;
}
.audience-list li:hover{ transform: translateX(6px); background: rgba(245,247,250,.1); }
.audience-list li i{ color: var(--ocean-light); width:20px; text-align:center; flex:none; }

/* =========== Timeline / processo =========== */
.timeline{ max-width: 1120px; margin-inline:auto; }
.timeline-track{
  position:relative; display:grid; grid-template-columns: 1fr; gap: 1.6rem;
}
.timeline-line{
  position:absolute; background: rgba(245,247,250,.12); border-radius:2px; overflow:hidden;
  top:0; bottom:0; left:23px; width:2px;
}
.timeline-fill{
  position:absolute; inset:0; width:100%; height:100%;
  background: linear-gradient(var(--ocean-light), var(--ocean));
  transform: scaleY(0); transform-origin: top center;
}
/* Sem JS/GSAP: mostra a linha completa, fallback estático */
.no-js-gsap .timeline-fill{ transform:none; }
.timeline-step{
  position:relative; display:grid; grid-template-columns: 48px 1fr; gap:1.1rem; align-items:flex-start; text-align:left;
}
.timeline-node{
  position:relative; z-index:2; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--ff-display); font-weight:700; font-size:1rem;
  background: linear-gradient(145deg, var(--ocean-light), var(--ocean)); border:2px solid transparent; color:#07111d;
}
.timeline-body{ padding-top:.35rem; }
.timeline-body h4{ color:#fff; }
.timeline-body p{ margin-top:.35rem; color: var(--ink-muted); font-size: var(--fs-sm); }

@media (min-width: 900px){
  .timeline-track{ grid-template-columns: repeat(5,1fr); gap:.9rem; }
  .timeline-line{ left:0; right:0; top:23px; bottom:auto; height:2px; width:auto; }
  .timeline-fill{ transform: scaleX(0); transform-origin: left center; }
  .timeline-step{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .timeline-node{ margin-bottom:.4rem; }
  .timeline-body{ padding-top:0; }
}

/* =========== Services =========== */
.services-grid{ display:grid; grid-template-columns:1fr; gap: var(--gap); max-width:1200px; margin-inline:auto; }
.service-card{
  background: var(--black-elev); border-radius: var(--radius-lg); padding: clamp(1.7rem,3vw,2.2rem);
  border:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:.9rem; position:relative; overflow:hidden; text-align:left;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s ease;
}
.service-card::after{
  content:""; position:absolute; inset:auto -40% -60% auto; width:14rem; height:14rem; border-radius:50%;
  background: radial-gradient(circle, var(--ocean-soft), transparent 70%); pointer-events:none;
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); border-color: rgba(143,182,214,.4); }
.service-icon{
  width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex:none;
  background: linear-gradient(150deg, var(--midnight), var(--ocean)); color:#fff; font-size:1.2rem;
  transition: transform .5s var(--ease); box-shadow: 0 14px 30px -12px rgba(91,136,178,.5);
}
.service-card:hover .service-icon{ transform: rotate(-8deg) scale(1.08); }
.service-card h3{ }
.service-card p{ color: var(--ink-muted); font-size: var(--fs-sm); }
.service-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.1rem; }
.service-tags span{
  font-size:.72rem; font-weight:600; padding:.32rem .65rem; border-radius:999px;
  background: var(--ocean-soft); color: var(--ocean-light);
}
.service-cta{
  margin-top:1.1rem; width:100%;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size: var(--fs-sm); text-align:center; white-space:nowrap;
  background: rgba(245,247,250,.07); border:1px solid var(--hairline); color:#fff;
  padding:.95rem 1.2rem; border-radius:999px; transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.service-card:hover .service-cta{ background: var(--whats); color:#04220f; border-color: var(--whats); transform: translateY(-2px); }
.service-cta i{ transition: transform .3s var(--ease); flex:none; }
.service-card:hover .service-cta i{ transform: translateX(4px); }
/* O JS anima y/scale do próprio botão (fora do reduced-motion); mantém só cor/fundo no CSS do hover do card. */
.js-motion .service-cta{ transition: background .3s ease, border-color .3s ease; }
.js-motion .service-card:hover .service-cta{ transform:none; }

/* =========== Tech strip (somente logos) =========== */
.tech-strip{ padding: 2.6rem 0; background: var(--black-soft); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.tech-strip p{ text-align:center; font-size: var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); font-weight:700; margin-bottom:1.6rem; }
.tech-marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tech-track{ display:flex; align-items:center; gap:3.6rem; width:max-content; animation: marquee 26s linear infinite; }
.tech-item{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; opacity:.85; transition: opacity .3s ease, transform .3s ease; }
.tech-item:hover{ opacity:1; transform: translateY(-4px); }
.tech-item i{ font-size:2.6rem; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* =========== Portfolio =========== */
.portfolio-grid{ display:grid; grid-template-columns:1fr; gap: 1.5rem; max-width:1200px; margin-inline:auto; }
.portfolio-card{
  border-radius: var(--radius-lg); overflow:hidden; position:relative; cursor:pointer; text-align:left;
  background: var(--black-elev); border:1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s ease;
}
.portfolio-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-glow); border-color: rgba(143,182,214,.4); }
/* Com GSAP, o tilt 3D no mousemove assume o transform (via quickTo) — a transição CSS de transform
   entraria em conflito com o tween contínuo, então deixamos só box-shadow/border-color no CSS. */
.js-gsap .portfolio-card{ transition: box-shadow .5s var(--ease), border-color .4s ease; transform-style: preserve-3d; }
.js-gsap .portfolio-grid{ perspective: 1200px; }
.portfolio-frame{ position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--black-elev); }
.browser-bar{
  position:absolute; top:0; left:0; right:0; height:32px; z-index:2;
  display:flex; align-items:center; gap:6px; padding:0 12px; flex:none;
  background: rgba(6,6,7,.55); backdrop-filter: blur(4px);
  border-bottom:1px solid var(--hairline);
}
.browser-bar i{ width:8px; height:8px; border-radius:50%; background: rgba(245,247,250,.35); font-size:0; }
.browser-bar .url{
  margin-left:8px; font-size:.66rem; color: rgba(245,247,250,.55);
  background: rgba(245,247,250,.06); padding:.2rem .6rem; border-radius:999px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.portfolio-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position: top center;
  background: var(--black-elev);
  transition: transform .7s var(--ease);
}
.portfolio-card:hover .portfolio-frame img{ transform: scale(1.06); }
.portfolio-mock{ display:none; }
.portfolio-info{ padding:1.2rem 1.3rem 1.35rem; color:#fff; }
.portfolio-info h4{ font-size: var(--fs-h4); font-weight:700; }
.portfolio-info p{ font-size: var(--fs-xs); color: var(--ink-muted); margin-top:.3rem; }
.expand-hint{
  position:absolute; top:42px; right:12px; z-index:3; width:34px; height:34px; border-radius:50%;
  background: rgba(6,6,7,.6); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0; transform: scale(.8); transition: opacity .3s ease, transform .3s ease; font-size:.8rem;
}
.portfolio-card:hover .expand-hint{ opacity:1; transform:scale(1); }

/* Portfolio modal */
.pf-modal{
  position: fixed; inset:0; z-index: 200; display:flex; align-items:center; justify-content:center;
  padding: 1.5rem; opacity:0; visibility:hidden; transition: opacity .35s ease, visibility .35s;
}
.pf-modal.open{ opacity:1; visibility:visible; }
.pf-modal-backdrop{ position:absolute; inset:0; background: rgba(2,2,3,.86); backdrop-filter: blur(6px); }
.pf-modal-box{
  position:relative; z-index:2; width:min(880px, 100%); max-height:88vh; overflow:auto;
  background: var(--black-elev); border-radius: var(--radius-xl); border:1px solid var(--hairline);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.8);
  transform: translateY(20px) scale(.97); transition: transform .4s var(--ease);
}
.pf-modal.open .pf-modal-box{ transform:none; }
/* GSAP assume a animação de abertura/fechamento (fade + scale); a transição CSS vira só o fallback sem JS */
.js-gsap .pf-modal{ transition:none; }
.js-gsap .pf-modal-box{ transition:none; }
.pf-modal-media{
  position:relative; max-height: min(64vh, 620px); overflow-y:auto; overflow-x:hidden;
  background: var(--black-elev); scrollbar-width: thin; scrollbar-color: var(--ocean) transparent;
}
.pf-modal-media .browser-bar{ position:sticky; top:0; left:0; right:0; }
.pf-modal-shot{ display:block; position:relative; cursor:pointer; }
.pf-modal-shot img{ width:100%; height:auto; display:block; }
.pf-modal-shot .shot-hint{
  position:sticky; bottom:14px; left:0; width:100%;
  display:flex; justify-content:center; pointer-events:none;
}
.pf-modal-shot .shot-hint span{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.72rem; font-weight:700; color:#fff;
  background: rgba(6,6,7,.78); backdrop-filter: blur(6px);
  border:1px solid var(--hairline); padding:.55rem .95rem; border-radius:999px;
}
.pf-modal-body{ padding: clamp(1.5rem,3vw,2.4rem); color:#fff; text-align:left; }
.pf-modal-body .pf-cat{ color: var(--ocean-light); font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; display:block; }
.pf-modal-body p{ color: var(--ink-muted); margin-top:.9rem; }
.pf-modal-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.6rem; }
.pf-modal-close{
  position:absolute; top:16px; right:16px; z-index:5; width:40px; height:40px; border-radius:50%;
  background: rgba(2,2,3,.7); border:1px solid var(--hairline); color:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* =========== Pricing: tabela comparativa =========== */
.pricing-wrap{ max-width: 1200px; margin-inline:auto; }
.pricing-table-scroll{ overflow-x:auto; border-radius: var(--radius-lg); border:1px solid var(--hairline); }
.pricing-table{ width:100%; border-collapse:collapse; min-width: 780px; background: var(--black-elev); }
.pricing-table thead th{
  text-align:left; padding: 1.6rem 1.4rem 1.2rem; vertical-align:top; background: var(--black-elev-2);
  border-bottom:1px solid var(--hairline); position:relative;
}
.pricing-table thead th.col-feature{ background:transparent; }
.pricing-table thead th.featured{ background: linear-gradient(165deg, var(--ocean) 0%, var(--midnight-700) 90%); }
.pricing-table th, .pricing-table td{ border-left:1px solid var(--hairline); }
.pricing-table th:first-child, .pricing-table td:first-child{ border-left:none; }
.pricing-table thead th.featured{ border-left-color: rgba(245,247,250,.25); }
.plan-badge{
  display:inline-block; background: var(--whats); color:#04220f; font-size:.68rem; font-weight:800;
  padding:.32rem .7rem; border-radius:999px; margin-bottom:.6rem; letter-spacing:.02em;
}
.plan-name{ color:#fff; font-size:1.05rem; }
.plan-price{ margin-top:.5rem; display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap; }
.plan-price .from{ font-size:.68rem; color: rgba(245,247,250,.6); width:100%; }
.plan-price b{ font-family: var(--ff-display); font-size:1.5rem; color:#fff; }
.plan-price span{ font-size:.72rem; color: rgba(245,247,250,.6); }
.pricing-table thead .btn{ margin-top:1rem; width:100%; }
.pricing-table tbody td, .pricing-table tbody th{
  padding: .9rem 1.4rem; border-bottom:1px solid var(--hairline); font-size: var(--fs-sm);
  height: 60px; vertical-align: middle; box-sizing: border-box;
}
.pricing-table tbody tr:last-child td, .pricing-table tbody tr:last-child th{ border-bottom:none; }
.pricing-table tbody th{
  text-align:left; font-weight:500; color: var(--ink-muted); white-space:nowrap;
}
.pricing-table tbody th > span{ display:flex; align-items:center; gap:.6rem; height:100%; }
.pricing-table tbody th i{ color: var(--ocean-light); width:18px; text-align:center; flex:none; }
.pricing-table tbody td{ text-align:center; color: var(--ink-muted); }
.pricing-table tbody td .yes{ color: var(--whats); font-size:1.05rem; }
.pricing-table tbody td .no{ color: rgba(245,247,250,.25); font-size:1.05rem; }
.pricing-table tbody td.value{ color:#fff; font-weight:600; font-size:.85rem; }
.pricing-table tbody tr:hover td, .pricing-table tbody tr:hover th{ background: rgba(245,247,250,.03); }

.maintenance-card{
  margin-top: 1.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; justify-content:space-between;
  background: linear-gradient(120deg, var(--black-elev), var(--black-elev-2));
  border:1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.2rem);
}
.maintenance-info{ display:flex; align-items:center; gap:1.1rem; text-align:left; max-width:32rem; }
.maintenance-info .service-icon{ width:56px; height:56px; }
.maintenance-info h3{ color:#fff; }
.maintenance-info p{ color: var(--ink-muted); font-size: var(--fs-sm); margin-top:.3rem; }
.maintenance-price{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.maintenance-price b{ font-family: var(--ff-display); font-size:1.7rem; color:#fff; }
.maintenance-price span{ font-size: var(--fs-xs); color: var(--ink-muted); display:block; }

.price-foot{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.price-foot .chip{
  font-size: var(--fs-xs); color: var(--ink-muted); background: rgba(245,247,250,.05);
  border:1px solid var(--hairline); padding:.6rem 1.1rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.4rem;
}
.price-foot .chip i{ color: var(--ocean-light); font-size:.85em; }

/* =========== Team =========== */
.team-grid{ display:grid; grid-template-columns:1fr; gap: var(--gap); max-width:1100px; margin-inline:auto; }
.team-card{
  background: var(--black-elev); border-radius: var(--radius-lg); padding: clamp(1.8rem,3vw,2.4rem);
  border:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:1.2rem; text-align:left;
  transition: transform .4s var(--ease), border-color .4s ease;
}
.team-card:hover{ transform: translateY(-6px); border-color: rgba(143,182,214,.4); }
.team-head{ display:flex; gap:1.2rem; align-items:center; }
.team-photo{
  flex:none; width:80px; height:80px; border-radius: 22px; overflow:hidden;
  background: linear-gradient(145deg, var(--midnight), var(--ocean)); padding:3px;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; border-radius:19px; }
.team-role{ font-size: var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--ocean-light); }
.team-card h3{ margin-top:.2rem; }
.team-card p.team-bio{ color: var(--ink-muted); }
.team-traits{ display:flex; flex-wrap:wrap; gap:.5rem; }
.team-traits span{
  font-size: var(--fs-xs); font-weight:600; padding:.38rem .8rem; border-radius:999px;
  background: rgba(245,247,250,.06); border:1px solid var(--hairline); color: var(--ink-muted);
}
.team-social{
  margin-top:.1rem; display:inline-flex; align-items:center; gap:.5rem; font-size: var(--fs-sm); font-weight:600;
  color: #fff; border:1px solid var(--hairline); padding:.5rem .9rem; border-radius:999px;
  transition: background .3s ease, border-color .3s ease; align-self:flex-start;
}
.team-social:hover{ background: var(--ocean); border-color: var(--ocean); }

/* =========== Final CTA =========== */
.cta-final{
  position:relative; border-radius: var(--radius-xl); overflow:hidden;
  padding: clamp(2.6rem,6vw,4.5rem); text-align:center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(91,136,178,.28) 0%, var(--black-soft) 55%, var(--black) 100%);
  color:#fff; border:1px solid var(--hairline); max-width:1200px; margin-inline:auto;
}
.cta-final h2{ position:relative; max-width:32rem; margin-inline:auto; }
.cta-final p{ position:relative; margin-top:1rem; color: var(--ink-muted); max-width:32rem; margin-inline:auto; }
.cta-actions{ position:relative; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.2rem; }
.cta-final .contact-line{ position:relative; margin-top:1.8rem; font-size: var(--fs-xs); color: var(--ink-faint); }

/* =========== Footer =========== */
.footer{ background: var(--black-soft); color: rgba(245,247,250,.65); padding: 3.5rem 0 1.6rem; border-top:1px solid var(--hairline); }
.footer-top{ display:grid; grid-template-columns:1fr; gap:2.4rem; padding-bottom:2.6rem; border-bottom:1px solid var(--hairline); text-align:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:center; }
.footer-brand img{ height:28px; margin-bottom:1rem; }
.footer-brand p{ max-width:24rem; font-size: var(--fs-sm); color: var(--ink-faint); }
.footer-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; transition: background .3s ease, transform .3s ease, border-color .3s ease, color .3s ease;
  color: var(--ink-muted); font-size:1.05rem;
}
.footer-social a.ico-wa:hover{ background: var(--whats); border-color: var(--whats); color:#04220f; transform: translateY(-3px); }
.footer-social a.ico-mail:hover{ background: var(--ocean); border-color: var(--ocean); color:#fff; transform: translateY(-3px); }
.footer-col h5{ font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:1rem; }
.footer-col ul{ display:grid; gap:.65rem; }
.footer-col a{ font-size: var(--fs-sm); color: var(--ink-muted); transition: color .25s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; text-align:center;
  font-size: var(--fs-xs); color: var(--ink-faint);
}

/* =========== WhatsApp float =========== */
.wa-float{
  position: fixed; right: clamp(1rem,4vw,2rem); bottom: clamp(1rem,4vw,2rem); z-index: 150;
  display:flex; align-items:center; gap:.7rem;
}
.wa-float .wa-tip{
  background:#fff; color: #10151c; font-size: var(--fs-sm); font-weight:600; padding:.6rem 1rem; border-radius:12px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.5);
  opacity:0; transform: translateX(10px); transition: opacity .3s ease, transform .3s ease; pointer-events:none;
  white-space:nowrap;
}
.wa-float:hover .wa-tip{ opacity:1; transform:none; }
.wa-btn{
  width:58px; height:58px; border-radius:50%; background: var(--whats); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 16px 34px -10px rgba(37,211,102,.6);
  animation: pulseRing 2.6s infinite; font-size:1.6rem;
}

/* =========== Responsive =========== */
@media (min-width: 560px){
  .why-list{ grid-template-columns: repeat(2,1fr); }
  .audience-list{ grid-template-columns: repeat(2,1fr); }
  .feature-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 780px){
  .nav-desktop{ display:block; }
  .burger{ display:none; }
  .header-actions .btn-primary{ display:inline-flex; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .portfolio-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1.3fr .7fr .7fr .9fr; text-align:left; }
  .footer-brand{ align-items:flex-start; }
  .footer-bottom{ justify-content:space-between; text-align:left; }
}
@media (min-width: 1000px){
  .portfolio-grid{ grid-template-columns: repeat(3,1fr); }
  .why-list{ grid-template-columns: repeat(4,1fr); }
}
@media (min-width: 1200px){
  .services-grid{ max-width: 1280px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{ transition-duration: .25s !important; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior:auto !important; }
}