/* ============================================================
   HOME 2 — same dark palette as the original homepage,
   laid out in a cleaner Linear/Stripe-style structure.
   Loaded ONLY on home-2.html. Reuses layout-neutral helpers
   from styles.css (.contain, .reveal, header, footer, forms,
   FAQ) and mirrors its color tokens (--bg, --surface, --border,
   --white, --muted, --dim, --accent) so the two pages look and
   feel like the same product. styles.css itself is untouched.
   ============================================================ */

:root {
  --h2-bg:                 var(--bg);
  --h2-bg-alt:              var(--surface-2);
  --h2-border:              var(--border);
  --h2-border-2:            var(--border-2);
  --h2-text:                var(--white);
  --h2-muted:               var(--muted);
  --h2-dim:                 var(--dim);
  --h2-accent:              var(--accent);
  --h2-accent-soft:         rgba(94,234,212,0.08);
  --h2-accent-soft-border:  rgba(94,234,212,0.22);
  --h2-radius-lg:           20px;
  --h2-radius-md:           14px;
}

/* ============================================================
   SHARED
   ============================================================ */
.h2-section     { padding:96px 0; }
.h2-section-alt { background:var(--surface); border-top:1px solid var(--h2-border); border-bottom:1px solid var(--h2-border); }
.h2-ctr         { text-align:center; }

.h2-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--h2-accent); margin-bottom:16px;
}
.h2-head { max-width:640px; margin:0 auto 56px; }
.h2-h2 {
  font-size:34px; font-weight:700; letter-spacing:-0.02em; line-height:1.16;
  color:var(--h2-text);
}
.h2-lead { font-size:16.5px; color:var(--h2-muted); line-height:1.6; margin-top:12px; }

.h2-btn-primary {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:14px 28px; border-radius:10px;
  background:var(--h2-text); color:#080808;
  font-family:inherit; font-weight:700; font-size:15px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.h2-btn-primary:hover { transform:scale(1.025); box-shadow:0 0 36px rgba(255,255,255,0.18); }
.h2-btn-secondary {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:14px 28px; border-radius:10px;
  background:transparent; color:var(--h2-text); border:1px solid var(--h2-border-2);
  font-family:inherit; font-weight:600; font-size:15px;
  transition:border-color .25s, background .25s, transform .25s;
}
.h2-btn-secondary:hover { border-color:var(--h2-text); background:var(--h2-bg-alt); transform:translateY(-2px); }

/* ============================================================
   1. HERO
   ============================================================ */
.h2-hero { padding:100px 0 96px; position:relative; }
/* Glow radial atras do conteudo da hero — nao afeta o layout */
/* No solid background-color: the aurora layer has to stay visible through
   the now-transparent header. The layer also reaches up behind the header
   and fades out with a mask — clipping it at the hero's top edge drew a
   hard line right under the nav. The mask is a ramp, so it stays seamless
   whatever height the header happens to be. */
.h2-hero::before {
  content:""; position:absolute; left:0; right:0; bottom:0; top:-96px;
  z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 75% 52%, rgba(94,234,212,0.7) 0%, transparent 15%),
    radial-gradient(circle at 75% 52%, rgba(94,234,212,0.4) 0%, transparent 40%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 96px);
  mask-image:linear-gradient(to bottom, transparent 0, #000 96px);
}
.h2-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; }
.h2-hero-copy h1 {
  font-size:56px; font-weight:700; line-height:1.1;
  color:#F5F5F5; max-width:480px; margin-bottom:0;
}
.h2-hero-copy p { font-size:18px; font-weight:400; color:#9CA3AF; line-height:1.6; max-width:440px; margin-top:24px; margin-bottom:0; }
.h2-hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }
.h2-hero-actions .h2-btn-primary {
  background:var(--h2-accent); color:#0A0E14; border:none;
  padding:14px 28px; border-radius:8px; font-weight:600; font-size:15px;
}
.h2-hero-actions .h2-btn-secondary {
  background:transparent; color:#F5F5F5; border:1px solid #374151;
  padding:14px 28px; border-radius:8px; font-weight:600; font-size:15px;
}

@media (max-width:640px) {
  .h2-hero-copy h1 { font-size:36px; }
}

.h2-browser {
  display:block; cursor:pointer;
  border-radius:16px; border:1px solid var(--h2-border);
  background:var(--surface); overflow:hidden;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
}
.h2-browser-bar {
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; background:var(--h2-bg-alt); border-bottom:1px solid var(--h2-border);
}
.h2-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.h2-dot-r { background:rgba(255,110,110,0.7); }
.h2-dot-y { background:rgba(255,190,60,0.7); }
.h2-dot-g { background:rgba(110,220,120,0.7); }
.h2-browser-url {
  margin-left:10px; flex:1;
  background:rgba(255,255,255,0.03); border:1px solid var(--h2-border); border-radius:6px;
  padding:5px 12px; font-size:12px; color:var(--h2-dim);
}
.h2-browser-body-img { position:relative; line-height:0; overflow:hidden; }
.h2-browser-body-img img {
  display:block; width:100%; height:auto;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.h2-browser:hover .h2-browser-body-img img { transform:scale(1.05); }
.h2-browser-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:rgba(0,0,0,0.5); opacity:0;
  transition:opacity .3s ease;
}
.h2-browser:hover .h2-browser-overlay,
.h2-browser:focus-visible .h2-browser-overlay { opacity:1; }
.h2-browser-overlay-title {
  display:inline-flex; align-items:center; gap:8px;
  font-size:1.25rem; font-weight:600; color:#fff; line-height:1;
}
.h2-browser-overlay-sub { font-size:13px; color:rgba(255,255,255,0.75); }

@media (prefers-reduced-motion: reduce) {
  .h2-browser-overlay { transition:none; }
  .h2-browser-body-img img { transition:none; }
  .h2-browser:hover .h2-browser-body-img img { transform:none; }
}

/* ============================================================
   2. TRUST BAR
   ============================================================ */
.h2-trust { padding:26px 0; background:var(--surface); border-top:1px solid var(--h2-border); border-bottom:1px solid var(--h2-border); }
.h2-trust-row { display:flex; justify-content:center; flex-wrap:wrap; gap:24px 48px; }
.h2-trust-item { display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--h2-text); }
.h2-trust-item svg { flex:none; color:var(--h2-accent); }

/* ============================================================
   3. WHY
   ============================================================ */
.h2-stats-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:720px; margin:0 auto 72px; }
.h2-stats-grid::before {
  content:""; position:absolute; top:4px; bottom:4px; left:50%;
  width:1px; background:rgba(255,255,255,0.1);
}
.h2-stat { text-align:center; }
.h2-stat-num { display:block; font-size:56px; font-weight:800; letter-spacing:-0.03em; color:var(--h2-text); line-height:1; margin-bottom:10px; }
.h2-stat p { font-size:14.5px; color:var(--h2-muted); line-height:1.55; max-width:280px; margin:0 auto; }

.h2-problem-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.h2-problem-card {
  padding:28px 26px; border-radius:var(--h2-radius-md);
  background:var(--h2-bg-alt); border:1px solid rgba(255,255,255,0.06);
  transition:all .3s ease;
}
.h2-problem-card:hover {
  transform:translateY(-4px);
  border-color:rgba(20,184,166,0.4);
  box-shadow:0 16px 32px rgba(0,0,0,0.25);
}
.h2-card-mark { display:block; width:28px; height:3px; border-radius:2px; background:var(--h2-accent); margin-bottom:14px; }
.h2-problem-card h3 { font-size:16.5px; font-weight:700; color:var(--h2-text); margin-bottom:8px; }
.h2-problem-card p { font-size:14px; color:var(--h2-muted); line-height:1.6; }

/* ============================================================
   4. PORTFOLIO
   ============================================================ */
.h2-port-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:40px; }

/* ============================================================
   5. TESTIMONIAL
   ============================================================ */
.h2-testimonial-card {
  max-width:640px; margin:0 auto; text-align:center;
  padding:48px 44px; border-radius:var(--h2-radius-lg);
  background:#F7F7F5; border:1px solid rgba(0,0,0,0.06);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, background .3s, box-shadow .3s;
}
.h2-testimonial-card:hover {
  transform:translateY(-4px);
  border-color:rgba(0,0,0,0.1); background:#F0F0EC;
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}
.h2-stars { display:flex; justify-content:center; gap:4px; margin-bottom:22px; color:#B8860B; }
.h2-quote { font-size:20px; font-weight:600; color:#1A1A1A; line-height:1.5; letter-spacing:-0.01em; margin-bottom:22px; }
.h2-testi-name { font-size:14.5px; font-weight:700; color:#1A1A1A; }
.h2-testi-role { font-size:13px; color:#6B7280; margin-top:2px; }
.h2-link-more {
  display:inline-block; margin-top:32px; font-size:14.5px; font-weight:600; color:var(--h2-text);
  border-bottom:1px solid var(--h2-border-2); padding-bottom:2px;
  transition:border-color .2s, color .2s;
}
.h2-link-more:hover { color:var(--h2-accent); border-color:var(--h2-accent); }

/* ============================================================
   6. PROCESS
   ============================================================ */
.h2-process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; position:relative; }
.h2-process-grid::before {
  content:""; position:absolute; top:22px; left:calc(100%/6); right:calc(100%/6);
  height:1px; background:var(--h2-border); z-index:0;
}
.h2-step { position:relative; z-index:1; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.h2-step:hover { transform:translateY(-4px); }
.h2-step-n {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; margin-bottom:20px;
  background:var(--h2-bg-alt); border:1px solid var(--h2-accent-soft-border);
  font-size:15px; font-weight:700; color:var(--h2-accent);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.h2-step:hover .h2-step-n { transform:scale(1.1); border-color:var(--h2-accent); }
.h2-step h3 { font-size:17px; font-weight:700; color:var(--h2-text); margin-bottom:8px; }
.h2-step p { font-size:14px; color:var(--h2-muted); line-height:1.6; }

/* ============================================================
   7. TEAM
   ============================================================ */
.h2-team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.h2-team-card {
  border-radius:var(--h2-radius-lg); border:1px solid var(--h2-border); background:var(--surface); overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.h2-team-card:hover { transform:translateY(-4px); border-color:var(--h2-border-2); }
.h2-team-photo { position:relative; aspect-ratio:1 / 1; overflow:hidden; background:var(--h2-bg-alt); }
.h2-team-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.h2-team-info { padding:20px 22px 24px; }
.h2-team-name { font-size:16px; font-weight:700; color:var(--h2-text); }
.h2-team-role { font-size:13px; font-weight:600; color:var(--h2-accent); margin:3px 0 10px; }
.h2-team-desc { font-size:13.5px; color:var(--h2-muted); line-height:1.6; }

/* ============================================================
   8. FAQ — reuses .faq-item/.faq-btn/.faq-body from styles.css
   as-is (same dark palette already, no overrides needed)
   ============================================================ */

/* ============================================================
   9. CONTACT — reuses .the-form/.form-card/.form-success
   from styles.css as-is (same dark palette already)
   ============================================================ */
.h2-contact-wrap { max-width:600px; margin:0 auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  .h2-hero-grid { grid-template-columns:1fr; gap:48px; }
  .h2-hero-copy p { max-width:none; }
}

@media (max-width:768px) {
  .h2-section { padding:64px 0; }
  .h2-hero { padding:56px 0 64px; }
  .h2-hero-copy h1 { font-size:36px; }
  .h2-h2 { font-size:28px; }
  .h2-stats-grid { grid-template-columns:1fr; gap:36px; margin-bottom:48px; }
  .h2-stats-grid::before { display:none; }
  .h2-problem-grid,
  .h2-port-grid,
  .h2-team-grid { grid-template-columns:1fr; }
  .h2-process-grid { grid-template-columns:1fr; gap:40px; }
  .h2-process-grid::before { display:none; }
  .h2-testimonial-card { padding:36px 26px; }
}

/* ============================================================
   MOTION — "living organism" layer. Every animation below only
   touches transform / opacity / filter, and everything is turned
   off in the prefers-reduced-motion block at the end.
   ============================================================ */

/* ---- 1. Hero: glow breathes, mockup levitates ---- */
.h2-hero::before {
  transform-origin:75% 45%;
  animation:h2-glow-breathe 8s ease-in-out infinite;
}
@keyframes h2-glow-breathe {
  0%,100% { opacity:0.82; transform:scale(0.98); }
  50%     { opacity:1;    transform:scale(1.04); }
}
.h2-browser { animation:h2-float 7s ease-in-out infinite; }
@keyframes h2-float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-9px); }
}

/* ---- CTA shimmer: diagonal light sweep on hover ---- */
.h2-btn-primary,
.btn-submit { position:relative; overflow:hidden; }
.h2-btn-primary::before,
.btn-submit::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform:translateX(-130%);
}
.btn-submit::before {
  background:linear-gradient(115deg,
    transparent 30%, rgba(94,234,212,0.4) 50%, transparent 70%);
}
.h2-btn-primary:hover::before,
.btn-submit:hover::before { transition:transform .7s ease; transform:translateX(130%); }

/* ---- 2. Trust bar: checkmarks draw themselves on reveal ---- */
.h2-trust-item .h2-check { stroke-dasharray:14; stroke-dashoffset:14; }
.h2-trust-item.revealed .h2-check { animation:h2-check-draw .5s ease-out .35s forwards; }
@keyframes h2-check-draw { to { stroke-dashoffset:0; } }

/* ---- 3. Why: stat punch on count-up finish, card marks expand ---- */
.h2-stat-num.h2-stat-pop { animation:h2-stat-pop .45s cubic-bezier(.2,.7,.2,1); }
@keyframes h2-stat-pop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.07); filter:drop-shadow(0 0 18px rgba(94,234,212,0.35)); }
  100% { transform:scale(1); filter:none; }
}
.h2-problem-card .h2-card-mark { transform-origin:left center; }
.h2-problem-card.revealed .h2-card-mark { animation:h2-mark-grow .5s cubic-bezier(.2,.7,.2,1) .35s both; }
@keyframes h2-mark-grow {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}

/* ---- 4. Process: line draws itself, numbers light up in turn ---- */
.h2-process-grid.h2-anim::before { transform:scaleX(0); transform-origin:left center; }
.h2-process-grid.h2-anim.drawn::before { animation:h2-line-draw 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes h2-line-draw { to { transform:scaleX(1); } }
.h2-step-n.lit {
  border-color:var(--h2-accent);
  animation:h2-step-lit .45s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes h2-step-lit {
  0%   { transform:scale(1);    box-shadow:none; }
  50%  { transform:scale(1.18); box-shadow:0 0 22px rgba(94,234,212,0.55); }
  100% { transform:scale(1);    box-shadow:0 0 12px rgba(94,234,212,0.28); }
}

/* ---- 5. Portfolio: cards slide in from opposite sides,
        arrow nudges on hover ---- */
.h2-port-grid .port-card.reveal:nth-child(1) { transform:translate(-32px,16px); }
.h2-port-grid .port-card.reveal:nth-child(2) { transform:translate(32px,16px); }
.port-card:hover .port-visit .arrow { display:inline-block; animation:h2-arrow-nudge .6s ease infinite; }
@keyframes h2-arrow-nudge {
  0%,100% { transform:translateX(0); }
  50%     { transform:translateX(4px); }
}

/* ---- 6. Reviews: stars light up left → right, quote follows ---- */
.h2-testimonial-card .h2-stars svg { opacity:0; transform:scale(.4); }
.h2-testimonial-card.revealed .h2-stars svg { animation:h2-star-in .35s cubic-bezier(.2,.7,.2,1) forwards; }
.h2-testimonial-card.revealed .h2-stars svg:nth-child(1) { animation-delay:.25s; }
.h2-testimonial-card.revealed .h2-stars svg:nth-child(2) { animation-delay:.37s; }
.h2-testimonial-card.revealed .h2-stars svg:nth-child(3) { animation-delay:.49s; }
.h2-testimonial-card.revealed .h2-stars svg:nth-child(4) { animation-delay:.61s; }
.h2-testimonial-card.revealed .h2-stars svg:nth-child(5) { animation-delay:.73s; }
@keyframes h2-star-in {
  to { opacity:1; transform:scale(1); }
}
.h2-testimonial-card .h2-quote,
.h2-testimonial-card .h2-testi-name,
.h2-testimonial-card .h2-testi-role { opacity:0; }
.h2-testimonial-card.revealed .h2-quote { animation:h2-soft-in .5s ease .85s both; }
.h2-testimonial-card.revealed .h2-testi-name,
.h2-testimonial-card.revealed .h2-testi-role { animation:h2-soft-in .5s ease 1s both; }
@keyframes h2-soft-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ---- 7. Team: photos settle into place as cards emerge ---- */
.h2-team-card .h2-team-photo img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.h2-team-card.revealed .h2-team-photo img { animation:h2-photo-settle .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes h2-photo-settle {
  from { transform:scale(1.08); opacity:.6; }
  to   { transform:scale(1); opacity:1; }
}

/* ---- 8. FAQ: open item gains a teal edge ---- */
.h2-faq .faq-item { transition:border-color .3s ease; }
.h2-faq .faq-item.open { border-color:rgba(94,234,212,0.28); }

/* ---- 9. Contact: focus glows teal — the conversion moment ---- */
.h2-contact .form-input:focus {
  border-color:rgba(94,234,212,0.45);
  box-shadow:0 0 0 3px rgba(94,234,212,0.08), 0 0 24px rgba(94,234,212,0.07);
}

/* ---- Reduced motion: the page stays calm and complete ---- */
@media (prefers-reduced-motion: reduce) {
  .h2-hero::before,
  .h2-browser,
  .h2-stat-num.h2-stat-pop,
  .h2-problem-card.revealed .h2-card-mark,
  .h2-process-grid.h2-anim.drawn::before,
  .h2-step-n.lit,
  .port-card:hover .port-visit .arrow,
  .h2-testimonial-card.revealed .h2-stars svg,
  .h2-testimonial-card.revealed .h2-quote,
  .h2-testimonial-card.revealed .h2-testi-name,
  .h2-testimonial-card.revealed .h2-testi-role,
  .h2-team-card.revealed .h2-team-photo img { animation:none; }
  .h2-trust-item .h2-check { stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .h2-process-grid.h2-anim::before { transform:none; }
  .h2-port-grid .port-card.reveal:nth-child(1),
  .h2-port-grid .port-card.reveal:nth-child(2) { transform:none; }
  .h2-testimonial-card .h2-stars svg { opacity:1; transform:none; }
  .h2-testimonial-card .h2-quote,
  .h2-testimonial-card .h2-testi-name,
  .h2-testimonial-card .h2-testi-role { opacity:1; }
  .h2-btn-primary::before,
  .btn-submit::before { display:none; }
}