/* ============ TOKENS (brandbook oficial Hiatos) ============ */
  :root{
    --purple:#9D00D4;
    --pink:#F22178;
    --orange:#FA6623;
    --yellow:#FDBD18;

    --bg:#0B0710;
    --surface:#150D1E;
    --surface-2:#1D1226;
    --line: rgba(255,255,255,0.09);
    --white:#FFFFFF;
    --text-dim:#B8AFC4;
    --text-dimmer:#7A7186;

    --gradient: linear-gradient(90deg, var(--purple) 0%, var(--pink) 35%, var(--orange) 70%, var(--yellow) 100%);
    --gradient-radial: radial-gradient(circle, var(--pink), var(--purple) 70%);

    --font:'Quicksand', sans-serif;
    --container: 1180px;
    --radius: 20px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--white);
    font-family:var(--font);
    font-weight:400;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }

  .wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }
  .section{ padding:50px 0; position:relative; }
  @media (max-width:720px){ .section{ padding:68px 0; } }

  .eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--pink);
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
  }
  .eyebrow::before{
    content:"";
    width:8px; height:8px; border-radius:50%;
    background:var(--gradient);
    flex-shrink:0;
  }

  h1,h2,h3,h4{ font-family:var(--font); font-weight:600; line-height:1.15; letter-spacing:-0.01em; }

  .gradient-text{
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 28px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
    white-space:nowrap;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .btn-primary{
    background:var(--gradient);
    background-size:180% 100%;
    background-position:0% 0%;
    color:#170920;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(242,33,120,0.55); background-position:100% 0%; }
  .btn-ghost{
    border:1.5px solid var(--line);
    color:var(--white);
    background:rgba(255,255,255,0.02);
    font-weight:600;
  }
  .btn-ghost:hover{ border-color:rgba(255,255,255,0.35); transform:translateY(-2px); }
  .btn-sm{ padding:11px 20px; font-size:13.5px; }
  .btn-block{ width:100%; }

  :focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; border-radius:4px; }

  /* ============ HEADER ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:20px 0;
    transition:background 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(11,7,16,0.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:13px 0;
    border-bottom-color:var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .logo-link{ display:block; flex-shrink:0; }
  .logo-link img{ height:26px; width:auto; }

  .nav-links{ display:none; align-items:center; gap:30px; }
  .nav-links a{
    font-size:14.5px; color:var(--text-dim); font-weight:500;
    position:relative; padding:4px 0; transition:color 0.2s ease;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    border-radius:2px;
    background:var(--gradient); transition:right 0.25s ease;
  }
  .nav-links a:hover{ color:var(--white); }
  .nav-links a:hover::after{ right:0; }
  .nav-cta{ display:none; }
  .nav-right{ display:flex; align-items:center; gap:16px; }

  .burger{ display:flex; flex-direction:column; gap:5px; padding:8px; }
  .burger span{ width:22px; height:2px; border-radius:2px; background:var(--white); transition:all 0.25s ease; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-menu{
    position:fixed; inset:0; top:64px; z-index:90;
    background:rgba(11,7,16,0.98);
    backdrop-filter:blur(10px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:all 0.3s ease;
  }
  .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-menu a{ font-family:var(--font); font-size:24px; font-weight:600; }

  @media (min-width:960px){
    .nav-links{ display:flex; }
    .nav-cta{ display:inline-flex; }
    .burger{ display:none; }
    .mobile-menu{ display:none; }
  }

  /* ============ HERO ============ */
  .hero{ padding:160px 0 90px; position:relative; overflow:hidden; }
  .hero::before{
    content:"";
    position:absolute; top:-25%; right:-15%; width:65%; height:75%;
    background:radial-gradient(circle, rgba(157,0,212,0.35), rgba(157,0,212,0) 65%);
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute; bottom:-30%; left:-15%; width:55%; height:60%;
    background:radial-gradient(circle, rgba(253,189,24,0.16), rgba(253,189,24,0) 65%);
    pointer-events:none;
  }
  .hero-grid{ display:grid; grid-template-columns:1fr; gap:56px; align-items:center; position:relative; z-index:1; }
  @media (min-width:980px){ .hero-grid{ grid-template-columns:1.05fr 0.95fr; gap:40px; } }

  .badge-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 16px; border-radius:999px;
    border:1px solid var(--line); background:rgba(255,255,255,0.03);
    font-size:13px; font-weight:600; color:var(--text-dim);
    margin-bottom:24px;
  }
  .badge-pill .ring-dot{
    width:8px; height:8px; border-radius:50%; background:var(--gradient);
  }

  .hero h1{ font-size:clamp(32px, 5.6vw, 54px); max-width:16ch; }
  .hero-highlight{
    margin-top:22px; display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    font-size:clamp(19px,2.6vw,24px); font-weight:700;
  }
  .hero-highlight span.gradient-text{ font-weight:700; }
  .hero-note{ margin-top:8px; font-size:12.5px; color:var(--text-dimmer); max-width:48ch; }
  .hero-sub{ margin-top:20px; font-size:16.5px; color:var(--text-dim); max-width:46ch; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
  .hero-tags{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:38px; }
  .hero-tags span{ font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:8px; font-weight:500; }
  .hero-tags span::before{ content:"✓"; color:var(--yellow); font-weight:700; }

  /* Signature: concentric-ring device mockup (ilustrativo, não é projeto real de cliente) */
  .orbit-visual{ position:relative; }
  .orbit-ring{
    position:absolute; border-radius:50%; border:1px solid var(--line); pointer-events:none;
  }
  .orbit-ring.r1{ inset:-40px; }
  .orbit-ring.r2{ inset:-80px; opacity:0.6; }
  .device-stack{ position:relative; z-index:2; }
  .browser-frame{
    border-radius:16px; border:1px solid var(--line);
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    box-shadow:0 40px 90px -30px rgba(0,0,0,0.65);
    overflow:hidden;
  }
  .browser-bar{ display:flex; align-items:center; gap:6px; padding:14px 16px; border-bottom:1px solid var(--line); }
  .browser-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.15); display:block; }
  .browser-body{ padding:26px 22px 30px; display:flex; flex-direction:column; gap:14px; }
  .skeleton-line{ height:10px; border-radius:5px; background:rgba(255,255,255,0.08); }
  .skeleton-line.grad{ background:var(--gradient); opacity:0.9; }
  .skeleton-row{ display:flex; gap:12px; margin-top:6px; }
  .skeleton-box{ flex:1; height:64px; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid var(--line); }
  .phone-frame{
    position:absolute; bottom:-30px; right:-18px; width:34%;
    border-radius:18px; border:1px solid var(--line);
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.7);
    padding:14px 10px;
    z-index:3;
  }
  .phone-frame .skeleton-line{ height:7px; margin-bottom:8px; }
  .float-stat{
    position:absolute; z-index:4; background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:12px 16px; box-shadow:0 20px 40px -18px rgba(0,0,0,0.7);
    font-size:12.5px; color:var(--text-dim);
  }
  .float-stat b{ display:block; font-family:var(--font); font-size:16px; color:var(--white); }
  .float-stat.fs1{ top:-20px; left:-16px; }
  @media (max-width:560px){ .phone-frame{ display:none; } .float-stat{ display:none; } .orbit-ring{ display:none; } }

  /* ============ SECTION HEADS ============ */
  .head-block{ max-width:660px; margin-bottom:52px; }
  .head-block.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .head-block h2{ font-size:clamp(27px, 3.8vw, 40px); }
  .head-block p{ color:var(--text-dim); margin-top:14px; font-size:16px; }

  /* ============ PROBLEMA ============ */
  .problem-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:760px){ .problem-grid{ grid-template-columns:1fr 1fr; } }
  .problem-item{
    display:flex; gap:14px; align-items:flex-start;
    padding:20px; border-radius:14px; border:1px solid var(--line); background:var(--surface);
  }
  .problem-item .ico{ flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(242,33,120,0.4); display:flex; align-items:center; justify-content:center; color:var(--pink); font-weight:700; }
  .problem-item p{ font-size:14.5px; color:var(--text-dim); }
  .problem-transition{
    margin-top:36px; padding:26px 28px; border-radius:16px;
    background:linear-gradient(120deg, rgba(157,0,212,0.14), rgba(253,189,24,0.08));
    border:1px solid var(--line);
    font-size:16px; font-weight:600;
  }

  /* ============ SITES (produto principal) ============ */
  .flagship{
    border-radius:28px;
    padding:56px;
    background:linear-gradient(150deg, rgba(157,0,212,0.16), rgba(11,7,16,0.4) 55%, rgba(253,189,24,0.08));
    border:1px solid var(--line);
    position:relative; overflow:hidden;
  }
  @media (max-width:720px){ .flagship{ padding:32px 22px; } }
  .flagship-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; position:relative; z-index:1; }
  @media (min-width:940px){ .flagship-grid{ grid-template-columns:1fr 0.85fr; } }
  .flagship h2{ font-size:clamp(27px,3.6vw,38px); max-width:14ch; }
  .flagship > .flagship-grid > div:first-child p.lead{ margin-top:16px; color:var(--text-dim); font-size:16px; max-width:44ch; }
  .benefit-list{ margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
  @media (max-width:560px){ .benefit-list{ grid-template-columns:1fr; } }
  .benefit-list li{ font-size:14px; color:var(--text-dim); display:flex; gap:10px; align-items:flex-start; }
  .benefit-list li::before{ content:"✓"; color:var(--yellow); font-weight:700; flex-shrink:0; }
  .flagship-actions{ margin-top:30px; }

  .ring-graphic{ position:relative; aspect-ratio:1/1; max-width:340px; margin:0 auto; }
  .ring-graphic .ring{ position:absolute; inset:0; border-radius:50%; border:2px solid transparent; }
  .ring-graphic .ring.r1{ border-image:var(--gradient) 1; inset:0; opacity:0.9; }
  .ring-graphic .ring.r2{ border:1px solid var(--line); inset:14%; }
  .ring-graphic .ring.r3{ inset:32%; background:var(--gradient); border:none; display:flex; align-items:center; justify-content:center; }
  .ring-graphic .ring.r3 span{ font-size:13px; font-weight:700; color:#170920; text-align:center; padding:0 20px; }

  /* ============ PROCESSO (como funciona) ============ */
  .promise-banner{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
    padding:26px 30px; border-radius:18px; margin-bottom:52px;
    background:var(--gradient); color:#170920;
  }
  .promise-banner strong{ font-size:clamp(18px,2.6vw,22px); display:block; }
  .promise-banner span{ font-size:12.5px; font-weight:600; opacity:0.85; display:block; margin-top:4px; max-width:56ch; }

  .steps{ display:grid; grid-template-columns:1fr; gap:0; position:relative; }
  @media (min-width:820px){ .steps{ grid-template-columns:repeat(4,1fr); gap:20px; } }
  .step{ position:relative; padding:0 4px 40px; }
  @media (min-width:820px){ .step{ padding-bottom:0; } }
  .step-num{
    width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:2px solid transparent;
    background-image:linear-gradient(var(--surface),var(--surface)), var(--gradient);
    background-origin:border-box; background-clip:padding-box, border-box;
    font-weight:700; font-size:17px; margin-bottom:18px;
  }
  .step h4{ font-size:16.5px; margin-bottom:8px; }
  .step p{ font-size:13.5px; color:var(--text-dim); }
  .step::after{
    content:""; position:absolute; left:26px; top:52px; bottom:0; width:1px; background:var(--line);
  }
  .step:last-child::after{ display:none; }
  @media (min-width:820px){
    .step::after{ left:52px; top:26px; right:-20px; bottom:auto; width:auto; height:1px; }
    .step:nth-child(4)::after{ display:none; }
  }

  /* ============ OUTROS SERVIÇOS ============ */
  .services-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
  @media (min-width:780px){ .services-grid{ grid-template-columns:repeat(3, 1fr); } }
  .card{
    position:relative; padding:30px 26px; border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--line);
    display:flex; flex-direction:column; gap:14px;
    transition:transform 0.3s ease, border-color 0.3s ease;
  }
  .card:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,0.2); }
  .card-icon{
    width:46px; height:46px; border-radius:14px;
    background:linear-gradient(135deg, rgba(157,0,212,0.25), rgba(253,189,24,0.15));
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line);
  }
  .card h3{ font-size:19px; }
  .card p{ color:var(--text-dim); font-size:14px; }
  .card .benefit{ font-size:13px; color:var(--yellow); font-weight:600; }
  .card .card-cta{ margin-top:auto; padding-top:8px; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
  .card .card-cta::after{ content:"→"; transition:transform 0.2s ease; }
  .card .card-cta:hover::after{ transform:translateX(4px); }

  /* ============ POR QUE ESCOLHER ============ */
  .why-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
  @media (min-width:700px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1040px){ .why-grid{ grid-template-columns:repeat(4,1fr); } }
  .why-item{ padding:24px; border-radius:16px; border:1px solid var(--line); }
  .why-item .ring-dot-lg{ width:34px; height:34px; border-radius:50%; background:var(--gradient); margin-bottom:16px; }
  .why-item h4{ font-size:15.5px; margin-bottom:8px; }
  .why-item p{ font-size:13.5px; color:var(--text-dim); }

  /* ============ PORTFÓLIO ============ */
  .portfolio-empty{
    border:1.5px dashed var(--line); border-radius:20px; padding:60px 30px; text-align:center;
  }
  .portfolio-empty .ring-dot-lg{ width:48px; height:48px; border-radius:50%; background:var(--gradient); margin:0 auto 20px; opacity:0.85; }
  .portfolio-empty h3{ font-size:20px; margin-bottom:10px; }
  .portfolio-empty p{ color:var(--text-dim); font-size:14.5px; max-width:44ch; margin:0 auto; }

  /* ============ SOBRE ============ */
  .about-grid{ display:grid; grid-template-columns:1fr; gap:44px; }
  @media (min-width:900px){ .about-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
  .about-text p{ color:var(--text-dim); font-size:16px; }
  .mvv{ display:grid; grid-template-columns:1fr; gap:16px; }
  .mvv-item{ padding:22px 24px; border-radius:16px; background:var(--surface); border:1px solid var(--line); }
  .mvv-item h4{ font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--pink); margin-bottom:10px; }
  .mvv-item p{ font-size:14.5px; color:var(--text-dim); }
  .mvv-item ul{ font-size:14.5px; color:var(--text-dim); display:grid; gap:6px; }
  .mvv-item ul li::before{ content:"— "; color:var(--text-dimmer); }

  /* ============ FAQ ============ */
  .faq-list{ display:flex; flex-direction:column; gap:12px; max-width:820px; margin:0 auto; }
  .faq-item{ border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
  .faq-item summary{
    cursor:pointer; padding:20px 24px; font-weight:600; font-size:15px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    list-style:none;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+"; font-size:22px; font-weight:400; color:var(--pink); flex-shrink:0; transition:transform 0.25s ease;
  }
  .faq-item[open] summary::after{ transform:rotate(45deg); }
  .faq-item .faq-a{ padding:0 24px 22px; color:var(--text-dim); font-size:14.5px; }

  /* ============ CTA FINAL ============ */
  .cta-final{
    border-radius:28px; padding:64px 40px; text-align:center;
    background:linear-gradient(150deg, rgba(157,0,212,0.22), rgba(11,7,16,0.5) 60%, rgba(253,189,24,0.1));
    border:1px solid var(--line);
  }
  @media (max-width:600px){ .cta-final{ padding:44px 22px; } }
  .cta-final h2{ font-size:clamp(26px,4vw,36px); max-width:20ch; margin:0 auto; }
  .cta-final p{ color:var(--text-dim); margin-top:16px; max-width:52ch; margin-left:auto; margin-right:auto; font-size:16px; }
  .cta-final .hero-actions{ justify-content:center; margin-top:30px; }
  .cta-final .micro{ margin-top:16px; font-size:12.5px; color:var(--text-dimmer); }

  /* ============ FOOTER ============ */
  footer{ border-top:1px solid var(--line); padding:56px 0 28px; }
  .footer-grid{ display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:44px; }
  @media (min-width:760px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
  .footer-brand img{ height:24px; }
  .footer-brand p{ color:var(--text-dim); font-size:13.5px; margin-top:14px; max-width:32ch; }
  .footer-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dimmer); margin-bottom:16px; font-weight:700; }
  .footer-col li{ margin-bottom:10px; }
  .footer-col a{ font-size:14px; color:var(--text-dim); transition:color 0.2s ease; }
  .footer-col a:hover{ color:var(--white); }
  .footer-bottom{
    display:flex; flex-direction:column; gap:14px; padding-top:24px; border-top:1px solid var(--line);
    font-size:12.5px; color:var(--text-dimmer);
  }
  @media (min-width:700px){ .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; } }

  /* ============ WHATSAPP FLUTUANTE ============ */
  .wa-float{
    position:fixed; bottom:22px; right:22px; z-index:80;
    width:58px; height:58px; border-radius:50%;
    background:var(--gradient);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -8px rgba(242,33,120,0.55);
    transition:transform 0.25s ease;
  }
  .wa-float:hover{ transform:scale(1.08); }
  .wa-float svg{ width:26px; height:26px; }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

/* ============ REFINAMENTOS 2026 ============ */
:root{ --section-space: clamp(72px, 8vw, 116px); }
body{ text-wrap:pretty; }
.section{ padding:var(--section-space) 0; }
.head-block{ max-width:760px; margin-bottom:44px; }
.head-block h2{ font-size:clamp(30px,4vw,50px); max-width:20ch; }
.head-block.center h2{ margin-inline:auto; }
.lead, .hero-sub, .about-text p{ line-height:1.8; }

.brand-lockup{ display:inline-flex; align-items:center; gap:11px; }
.brand-symbol{ width:31px; height:31px; position:relative; flex:none; filter:drop-shadow(0 0 14px rgba(242,33,120,.16)); }
.brand-symbol img{ width:100%; height:100%; object-fit:contain; }
.brand-symbol::after{ content:""; position:absolute; width:5px; height:5px; border-radius:50%; top:1px; left:50%; background:var(--yellow); box-shadow:0 0 10px var(--orange); transform-origin:0 14.5px; animation:pathOrbit 7s linear infinite; }
@keyframes pathOrbit{ to{ transform:rotate(360deg); } }
.logo-link .wordmark{ height:26px; width:auto; }

.hero{ min-height:760px; display:flex; align-items:center; padding-top:150px; }
.hero-grid{ gap:clamp(48px,7vw,92px); }
.hero-copy{ max-width:650px; }
.hero h1{ font-size:clamp(39px,5.1vw,66px); max-width:15ch; letter-spacing:-.035em; }
.hero-highlight{ max-width:25ch; }
.hero-note{ border-left:2px solid rgba(253,189,24,.45); padding-left:12px; }
.hero-sub{ font-size:17px; }
.btn{ min-height:50px; position:relative; overflow:hidden; }
.btn svg{ width:19px; height:19px; flex:none; }
.btn-primary::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28),transparent 70%); transform:translateX(-120%); transition:transform .65s ease; }
.btn-primary:hover::before{ transform:translateX(120%); }

.hero-mockup{ position:relative; min-height:430px; display:grid; place-items:center; }
.hero-brand-watermark{ position:absolute; width:76%; max-width:430px; opacity:.1; filter:blur(.2px); animation:softFloat 7s ease-in-out infinite; }
.hero-brand-watermark img{ width:100%; }
@keyframes softFloat{ 50%{ transform:translateY(-10px) rotate(1deg); } }
.mockup-screen{ width:min(100%,580px); position:relative; z-index:2; border-radius:22px; border:1px solid rgba(255,255,255,.13); background:linear-gradient(145deg,#1b1025,#0e0914); padding:10px; box-shadow:0 45px 110px -45px rgba(242,33,120,.48); transform:perspective(1200px) rotateY(-4deg) rotateX(1deg); }
.mockup-screen-inner{ border-radius:15px; overflow:hidden; background:#0b0710; border:1px solid rgba(255,255,255,.08); }
.mockup-topbar{ height:32px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#17101e; border-bottom:1px solid var(--line); }
.mockup-topbar i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); }
.mockup-page{ padding:30px 28px; min-height:285px; background:radial-gradient(circle at 80% 10%,rgba(157,0,212,.32),transparent 40%),#0b0710; }
.mockup-mini-logo{ width:84px; margin-bottom:32px; }
.mockup-kicker{ height:8px; width:40%; border-radius:8px; background:var(--gradient); margin-bottom:14px; }
.mockup-title{ height:16px; width:72%; border-radius:8px; background:rgba(255,255,255,.88); margin-bottom:10px; }
.mockup-text{ height:8px; width:88%; border-radius:8px; background:rgba(255,255,255,.18); margin-bottom:7px; }
.mockup-text.short{ width:62%; }
.mockup-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:28px; }
.mockup-cards span{ height:68px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.mockup-phone{ position:absolute; right:-14px; bottom:-36px; width:31%; min-width:130px; z-index:3; border-radius:24px; padding:7px; background:#120b18; border:1px solid rgba(255,255,255,.15); box-shadow:0 30px 70px -30px #000; }
.mockup-phone .mockup-page{ min-height:190px; padding:24px 14px 16px; border-radius:17px; }
.mockup-phone .mockup-mini-logo{ width:48px; margin-bottom:18px; }
.mockup-phone .mockup-cards{ grid-template-columns:1fr; margin-top:18px; }
.mockup-phone .mockup-cards span:nth-child(n+2){ display:none; }

.problem-grid{ gap:14px; }
.problem-item{ min-height:76px; padding:20px 22px; }
.problem-transition{ margin-top:22px; padding:23px 26px; }

.flagship{ overflow:hidden; }
.flagship-grid{ grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr); gap:70px; align-items:center; }
.product-visual{ min-height:440px; position:relative; display:grid; place-items:center; }
.product-visual::before{ content:""; position:absolute; inset:10% 2%; border-radius:50%; background:radial-gradient(circle,rgba(242,33,120,.24),transparent 67%); filter:blur(14px); }
.product-symbol{ position:absolute; width:88%; opacity:.11; animation:softFloat 8s ease-in-out infinite reverse; }
.product-browser{ width:100%; max-width:480px; position:relative; z-index:2; border-radius:18px; padding:9px; border:1px solid rgba(255,255,255,.14); background:rgba(11,7,16,.88); box-shadow:0 40px 90px -42px rgba(253,189,24,.35); }
.product-browser img{ border-radius:11px; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; background:#130c1b; }
.product-caption{ margin-top:15px; display:flex; gap:10px; align-items:center; color:var(--text-dim); font-size:13px; justify-content:center; }
.product-caption img{ width:26px; height:26px; object-fit:contain; }

.steps{ position:relative; }
.steps::before{ content:""; position:absolute; top:24px; left:4%; right:4%; height:1px; background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange),var(--yellow)); opacity:.55; }
.step{ position:relative; }
.step-num{ box-shadow:0 0 0 7px var(--bg); background:var(--bg); }
.card,.why-item,.mvv-item,.faq-item,.problem-item{ transition:border-color .25s ease,transform .25s ease,background .25s ease; }
.card:hover,.why-item:hover,.problem-item:hover{ transform:translateY(-4px); border-color:rgba(242,33,120,.3); }
.card{ display:flex; flex-direction:column; }
.card-cta{ margin-top:auto; padding-top:24px; display:inline-flex; align-items:center; gap:8px; }
.card-cta::after{ content:"→"; transition:transform .2s ease; }
.card-cta:hover::after{ transform:translateX(4px); }

.portfolio-empty{ background:linear-gradient(145deg,rgba(157,0,212,.09),rgba(250,102,35,.04)); position:relative; overflow:hidden; }
.portfolio-empty::after{ content:""; position:absolute; width:360px; height:360px; border:1px solid rgba(255,255,255,.05); border-radius:50%; right:-130px; top:-150px; box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012); }

.faq-item summary{ min-height:70px; display:flex; align-items:center; padding-right:58px; }
.faq-item summary::after{ top:50%; transform:translateY(-50%); }
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.cta-final{ padding:clamp(58px,8vw,96px) clamp(24px,8vw,100px); box-shadow:0 38px 100px -65px rgba(242,33,120,.7); }
.cta-final h2{ font-size:clamp(32px,4.5vw,54px); max-width:20ch; margin-inline:auto; }

.wa-float{ color:#170920; }
.wa-float img{ width:27px; height:27px; }
.wa-tooltip{ position:absolute; right:70px; white-space:nowrap; padding:9px 13px; border-radius:9px; background:#fff; color:#170920; font-size:12.5px; font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,.25); opacity:0; transform:translateX(8px); pointer-events:none; transition:.25s ease; }
.wa-float:hover .wa-tooltip,.wa-float:focus-visible .wa-tooltip{ opacity:1; transform:translateX(0); }

.skip-link{ position:fixed; left:16px; top:-60px; z-index:999; background:#fff; color:#120817; padding:10px 16px; border-radius:8px; font-weight:700; }
.skip-link:focus{ top:12px; }

@media(max-width:979px){
  .hero{ min-height:auto; }
  .hero-grid{ gap:72px; }
  .hero-copy{ max-width:none; }
  .hero h1{ max-width:18ch; }
  .hero-mockup{ max-width:650px; margin-inline:auto; width:92%; }
  .flagship-grid{ grid-template-columns:1fr; }
  .product-visual{ min-height:380px; }
  .steps::before{ display:none; }
}
@media(max-width:720px){
  .wrap{ padding-inline:20px; }
  header{ padding:14px 0; }
  .brand-symbol{ width:27px; height:27px; }
  .logo-link .wordmark{ height:22px; }
  .hero{ padding:120px 0 66px; }
  .hero h1{ font-size:clamp(36px,10.2vw,48px); line-height:1.08; }
  .hero-highlight{ font-size:20px; }
  .hero-actions{ display:grid; grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; }
  .hero-tags{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .hero-mockup{ min-height:325px; width:100%; }
  .mockup-screen{ transform:none; }
  .mockup-page{ min-height:220px; padding:24px 18px; }
  .mockup-phone{ right:-6px; bottom:-26px; min-width:105px; }
  .mockup-phone .mockup-page{ min-height:150px; }
  .mockup-cards span{ height:48px; }
  .head-block{ margin-bottom:30px; }
  .head-block h2{ font-size:34px; }
  .flagship{ padding:30px 22px; }
  .flagship-grid{ gap:40px; }
  .benefit-list{ grid-template-columns:1fr; }
  .product-visual{ min-height:300px; }
  .product-browser{ max-width:390px; }
  .problem-item{ min-height:unset; }
  .promise-banner{ padding:25px 22px; }
  .cta-final{ border-radius:22px; }
  .wa-tooltip{ display:none; }
}
@media(max-width:390px){
  .wrap{ padding-inline:16px; }
  .hero h1{ font-size:34px; }
  .hero-tags{ grid-template-columns:1fr; }
  .btn{ padding-inline:20px; }
  .mockup-phone{ min-width:96px; }
}


/* ============ CORREÇÕES DE ACABAMENTO — 2026-07-30 ============ */
/* Mantém o SVG do WhatsApp dentro dos botões em escala normal. */
.btn > img[src$="whatsapp.svg"]{
  width:18px;
  height:18px;
  min-width:18px;
  flex:0 0 18px;
  object-fit:contain;
}
.btn-sm > img[src$="whatsapp.svg"]{
  width:16px;
  height:16px;
  min-width:16px;
  flex-basis:16px;
}

/* Botões equilibrados e sem dimensões circulares causadas pelo ícone. */
.hero-actions .btn,
.nav-cta,
.mobile-menu .btn{
  width:auto;
  max-width:100%;
}
.cta-final .hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* Remove o brilho amarelo no canto inferior esquerdo do hero/header. */
.hero::after{ display:none; }

/* Missão, Visão e Valores em uma composição horizontal e proporcional. */
.about-grid{
  grid-template-columns:1fr;
  gap:34px;
}
.about-text{
  max-width:820px;
}
.mvv{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.mvv-item{
  min-height:100%;
  display:flex;
  flex-direction:column;
  padding:26px;
}
.mvv-item p,
.mvv-item ul{
  line-height:1.72;
}

/* Preserva a proporção original do logo no rodapé. */
.footer-brand .brand-lockup{
  align-items:center;
}
.footer-brand .brand-symbol{
  width:31px;
  height:31px;
}
.footer-brand .brand-symbol img{
  width:31px;
  height:31px;
  object-fit:contain;
}
.footer-brand .wordmark{
  display:block;
  width:auto !important;
  height:31px !important;
  max-width:140px;
  object-fit:contain;
}

@media (max-width:900px){
  .mvv{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .hero-actions .btn,
  .cta-final .hero-actions .btn{
    width:100%;
  }
  .cta-final .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .btn > img[src$="whatsapp.svg"]{
    width:17px;
    height:17px;
    min-width:17px;
    flex-basis:17px;
  }
}