/* ============================================================ Guia da Tirze · Landing Page · Hator Clinic Design system AURA · MONOCROMÁTICO (stone) · sem cor de accent Space Grotesk (display) · Inter (texto) · JetBrains Mono (labels) ============================================================ */ :root{ --pure:#ffffff; --bg:#fdfdfd; --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1; --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c; --stone-800:#292524; --stone-900:#1c1917; --line:#e7e5e4; --line-soft:#f0efed; --ease:cubic-bezier(0.16,1,0.3,1); --maxw:1280px; --shadow:0 30px 60px -34px rgba(28,25,23,.4); --shadow-lg:0 50px 100px -40px rgba(28,25,23,.5); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--stone-900); line-height:1.65; font-size:16px; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body.no-scroll{ overflow:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--stone-900); color:#fff; } /* foco visível por teclado: anel na própria cor do texto (contrasta em fundo claro e escuro) */ :focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:3px; } h1,h2,h3,h4,.display{ font-family:'Space Grotesk',sans-serif; color:var(--stone-900); letter-spacing:-0.03em; line-height:1.02; font-weight:500; } strong,b{ font-weight:600; color:var(--stone-900); } .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; } .section{ padding:104px 0; position:relative; } .mono{ font-family:'JetBrains Mono',monospace; } /* grain */ .noise{ position:fixed; inset:0; pointer-events:none; opacity:.14; z-index:1; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .noise.over-dark{ mix-blend-mode:overlay; opacity:.08; } /* decoração */ .blob{ position:absolute; border-radius:50%; filter:blur(110px); z-index:0; pointer-events:none; opacity:.6; background:var(--stone-200); } .blob.dark{ background:rgba(255,255,255,.05); } @keyframes float{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-18px) rotate(var(--rot,0deg)); } } .dots{ position:absolute; z-index:0; pointer-events:none; opacity:.6; background-image:radial-gradient(var(--stone-300) 1.3px, transparent 1.3px); background-size:14px 14px; } .dots.on-dark{ background-image:radial-gradient(rgba(255,255,255,.16) 1.3px, transparent 1.3px); } /* reveal */ /* fade-up suave. Só esconde quando o JS está ativo (.js no ), pra nunca deixar a página em branco se o JS falhar. Sem translateX (evita overflow lateral). */ .js .reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); will-change:opacity,transform; } .js .reveal.in{ opacity:1; transform:none; } .d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; } .d4{ transition-delay:.32s; } /* respeita quem pediu menos animação: mostra tudo, sem fade nem deslocamento */ @media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } } /* eyebrow */ .eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px; background:var(--pure); border:1px solid var(--line); box-shadow:0 4px 16px -10px rgba(28,25,23,.3); font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--stone-600); } .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--stone-900); animation:pulse 2.4s infinite; } @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } } .eyebrow.on-dark{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:var(--stone-300); box-shadow:none; } .eyebrow.on-dark .dot{ background:#fff; } /* typography helpers */ .stroke{ color:transparent; -webkit-text-stroke:1.3px var(--stone-500); } .lead{ font-size:19px; color:var(--stone-500); font-weight:300; line-height:1.6; } .lead b{ color:var(--stone-900); font-weight:500; } .s-head{ max-width:680px; margin:0 auto 60px; text-align:center; } .s-head .eyebrow{ margin-bottom:22px; } .s-head h2{ font-size:44px; font-weight:500; letter-spacing:-0.035em; margin-bottom:16px; } .s-head p{ font-size:17px; color:var(--stone-500); font-weight:300; } /* buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:11px; cursor:pointer; border:0; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:18px 30px; border-radius:999px; transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .25s ease, color .25s ease; line-height:1; } .btn iconify-icon{ font-size:16px; } .btn-dark{ background:var(--stone-900); color:#fff; box-shadow:0 18px 40px -18px rgba(28,25,23,.7); } .btn-dark:hover{ transform:translateY(-3px); box-shadow:0 26px 52px -18px rgba(28,25,23,.85); } .btn-light{ background:#fff; color:var(--stone-900); border:1px solid var(--line); box-shadow:var(--shadow); } .btn-light:hover{ transform:translateY(-3px); } .btn-ghost{ background:transparent; color:var(--stone-900); border:1.5px solid var(--stone-300); } .btn-ghost:hover{ border-color:var(--stone-900); transform:translateY(-3px); } .btn-ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.3); } .btn-ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.06); } .btn-wa{ background:#1faa52; color:#fff; } .btn-wa:hover{ transform:translateY(-3px); background:#1b9a4a; } .btn-block{ width:100%; } .btn-lg{ padding:20px 34px; font-size:13px; } /* ---------- NAV ---------- */ .nav{ position:sticky; top:0; z-index:60; background:rgba(253,253,253,.82); backdrop-filter:blur(18px); border-bottom:1px solid var(--line-soft); } .nav .bar{ display:flex; align-items:center; justify-content:space-between; padding:15px 0; } .nav .logo{ height:34px; width:auto; } .nav .nav-right{ display:flex; align-items:center; gap:18px; } .nav .crm{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; color:var(--stone-500); text-transform:uppercase; } .nav .nav-cta{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--stone-900); padding:12px 20px; border:0; border-radius:999px; cursor:pointer; transition:transform .25s var(--ease); } .nav .nav-cta:hover{ transform:translateY(-2px); } /* ---------- HERO ---------- */ .hero{ position:relative; padding:70px 0 96px; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:40px; align-items:center; position:relative; z-index:2; } .hero h1{ font-size:62px; font-weight:500; letter-spacing:-0.045em; line-height:0.97; margin:24px 0 22px; } .hero .lead{ max-width:460px; margin-bottom:32px; } .hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .hero-cta .micro{ font-size:12.5px; color:var(--stone-500); max-width:150px; line-height:1.4; } .hero-trust{ display:flex; align-items:center; gap:26px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line); } .hero-trust .ht{ display:flex; flex-direction:column; } .hero-trust .ht .n{ font-family:'Space Grotesk'; font-weight:600; font-size:22px; color:var(--stone-900); letter-spacing:-0.02em; } .hero-trust .ht .l{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-500); margin-top:3px; } .hero-trust .stars{ letter-spacing:1px; font-size:13px; color:var(--stone-900); } /* product stage */ .stage{ position:relative; height:560px; display:flex; align-items:center; justify-content:center; } .stage .blob{ width:520px; height:520px; top:50%; left:50%; transform:translate(-50%,-50%); } .stage .cover{ position:relative; z-index:5; width:340px; border-radius:6px; box-shadow:var(--shadow-lg); animation:float 8s ease-in-out infinite; } .stage .leaf{ position:absolute; width:225px; border-radius:4px; box-shadow:var(--shadow); border:1px solid var(--line-soft); z-index:2; } .stage .leaf.l1{ top:34px; left:34px; --rot:-9deg; transform:rotate(-9deg); animation:float 9s ease-in-out infinite .4s; } .stage .leaf.l2{ bottom:30px; right:30px; --rot:8deg; transform:rotate(8deg); z-index:6; animation:float 7.5s ease-in-out infinite .9s; } .stage .tag{ position:absolute; z-index:8; bottom:64px; left:-4px; background:var(--stone-900); color:#fff; border-radius:12px; padding:11px 16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; } .stage .tag iconify-icon{ font-size:20px; } .stage .tag .tt{ font-family:'Space Grotesk'; font-weight:600; font-size:13px; line-height:1.1; } .stage .tag .ts{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-400); margin-top:2px; } /* ---------- STATS ---------- */ .stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--stone-50); } .stats .row{ display:grid; grid-template-columns:repeat(3,1fr); } .stats .st{ padding:40px 24px; text-align:center; border-right:1px solid var(--line); } .stats .st:last-child{ border-right:0; } .stats .st .n{ font-family:'Space Grotesk'; font-weight:600; font-size:42px; letter-spacing:-0.03em; color:var(--stone-900); line-height:1; } .stats .st .l{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-500); margin-top:11px; } /* ---------- POR DENTRO ---------- */ .inside-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; } .inside-visual{ position:relative; } .inside-visual .open{ width:100%; border-radius:10px; box-shadow:var(--shadow-lg); } .inside-visual .blob{ width:400px; height:400px; bottom:-60px; left:-60px; } .inside-list{ list-style:none; display:grid; gap:8px; } .inside-list li{ display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); } .inside-list li:last-child{ border-bottom:0; } .inside-list .ix{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--stone-500); padding-top:3px; } .inside-list h3{ font-family:'Space Grotesk'; font-size:19px; font-weight:600; letter-spacing:-0.02em; margin-bottom:5px; } .inside-list p{ font-size:14px; color:var(--stone-500); line-height:1.55; } /* preview strip (páginas reais) */ .pages-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:8px; } .pages-strip .pg{ border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); background:#fff; transition:transform .3s var(--ease); } .pages-strip .pg:hover{ transform:translateY(-6px); } .pages-strip .pg img{ width:100%; display:block; } /* ---------- AUTORIDADE (full-bleed, dobra inteira) ---------- */ .authority{ position:relative; min-height:80vh; display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--stone-900); } .authority .auth-bg{ position:absolute; top:0; right:0; bottom:0; width:56%; z-index:0; } .authority .auth-bg img{ width:100%; height:100%; object-fit:cover; object-position:center top; } .authority .auth-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--stone-900) 0%, rgba(28,25,23,.55) 24%, transparent 58%); } .authority .container{ position:relative; z-index:2; width:100%; } .auth-text{ max-width:560px; padding:64px 0; } .authority h2{ color:#fff; font-size:52px; font-weight:500; letter-spacing:-0.035em; margin:20px 0 6px; line-height:1.0; } .authority .role{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-400); margin-bottom:26px; } .authority p{ color:var(--stone-200); font-size:16.5px; font-weight:300; line-height:1.7; margin-bottom:16px; } .authority p b{ color:#fff; font-weight:500; } .authority .quote{ border-left:2px solid rgba(255,255,255,.4); padding-left:20px; font-size:19px; font-style:italic; color:#fff; font-weight:300; line-height:1.5; margin:8px 0 26px; } .auth-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); } .auth-foot .af{ display:flex; flex-direction:column; } .auth-foot .af .n{ font-family:'Space Grotesk'; font-weight:600; font-size:21px; color:#fff; letter-spacing:-0.02em; } .auth-foot .af .l{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-400); margin-top:4px; } .auth-foot .sep{ width:1px; height:42px; background:rgba(255,255,255,.16); } /* ---------- SERVICES (obrigado) ---------- */ .svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .svc{ background:var(--pure); border:1px solid var(--line); border-radius:18px; padding:32px 30px; display:flex; flex-direction:column; transition:transform .28s var(--ease), box-shadow .28s var(--ease); } .svc:hover{ transform:translateY(-5px); box-shadow:var(--shadow); } .svc .svc-top{ display:flex; align-items:center; gap:15px; margin-bottom:18px; } .svc .svc-ic{ width:52px; height:52px; border-radius:13px; background:var(--stone-100); color:var(--stone-900); display:flex; align-items:center; justify-content:center; flex:none; transition:all .28s ease; } .svc:hover .svc-ic{ background:var(--stone-900); color:#fff; } .svc .svc-ic iconify-icon{ font-size:25px; } .svc .svc-k{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-500); } .svc h3{ font-family:'Space Grotesk'; font-size:21px; font-weight:600; letter-spacing:-0.02em; margin-top:3px; } .svc .svc-q{ font-size:15px; color:var(--stone-900); font-style:italic; font-weight:500; margin-bottom:11px; padding-left:13px; border-left:2px solid var(--stone-300); line-height:1.4; } .svc p{ font-size:14px; color:var(--stone-500); margin-bottom:18px; flex:1; line-height:1.6; } .svc .svc-cta{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-900); } .svc .svc-cta iconify-icon{ transition:transform .2s ease; } .svc:hover .svc-cta iconify-icon{ transform:translateX(5px); } /* ---------- THANK YOU ---------- */ .ty-hero{ padding:72px 0 40px; position:relative; overflow:hidden; } .ty-card{ background:var(--pure); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow-lg); padding:52px 46px; text-align:center; max-width:780px; margin:0 auto; position:relative; z-index:2; } .ty-card .ok-badge{ width:72px; height:72px; border-radius:50%; background:var(--stone-900); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; } .ty-card .ok-badge iconify-icon{ font-size:34px; } .ty-card h1{ font-family:'Space Grotesk'; font-size:40px; font-weight:600; letter-spacing:-0.035em; line-height:1.04; margin-bottom:14px; } .ty-card p{ font-size:16.5px; color:var(--stone-500); font-weight:300; max-width:520px; margin:0 auto 28px; } .ty-card .dl-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; } .ty-card .dl-hint{ font-size:13px; color:var(--stone-500); margin-top:18px; } .ty-card .dl-hint a{ color:var(--stone-900); font-weight:600; text-decoration:underline; } /* ---------- VIDEO ---------- */ .video-wrap{ max-width:900px; margin:0 auto; } .video-frame{ position:relative; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:var(--stone-900); box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center; } .video-frame iframe, .video-frame video, .video-frame #ytplayer{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; } /* zoom leve esconde a barra de título e o logo do YouTube nas bordas */ .video-frame #ytplayer{ transform:scale(1.16); transform-origin:center center; } .vid-cover{ position:absolute; inset:0; z-index:3; cursor:pointer; display:flex; align-items:center; justify-content:center; background:transparent; transition:background .3s ease; } .vid-cover .vsnd{ display:inline-flex; align-items:center; gap:10px; background:rgba(28,25,23,.85); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.18); color:#fff; padding:15px 24px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 14px 36px rgba(0,0,0,.45); animation:vpulse 2.2s ease-in-out infinite; } .vid-cover .vsnd iconify-icon{ font-size:19px; } .vid-cover .vplay{ display:none; width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); align-items:center; justify-content:center; backdrop-filter:blur(2px); } .vid-cover .vplay iconify-icon{ font-size:34px; color:#fff; margin-left:5px; } .vid-cover.active .vsnd{ display:none; } .vid-cover.active.paused{ background:rgba(20,18,16,.4); } .vid-cover.active.paused .vplay{ display:flex; } @keyframes vpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } } .video-frame .vph{ text-align:center; color:var(--stone-300); z-index:2; padding:20px; } .video-frame .vph .play{ width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; } .video-frame .vph .play iconify-icon{ font-size:34px; color:#fff; margin-left:4px; } .video-frame .vph .vt{ font-family:'Space Grotesk'; font-weight:600; font-size:18px; color:#fff; } .video-frame .vph .vs{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-400); margin-top:6px; } /* ---------- FINAL CTA ---------- */ .final-cta{ background:var(--stone-900); color:#fff; border-radius:30px; padding:80px 48px; text-align:center; position:relative; overflow:hidden; } .final-cta .blob{ opacity:.4; } .final-cta .eyebrow{ margin-bottom:22px; } .final-cta h2{ color:#fff; font-size:46px; font-weight:500; letter-spacing:-0.035em; margin-bottom:16px; position:relative; z-index:2; } .final-cta p{ color:var(--stone-300); font-size:17px; font-weight:300; max-width:560px; margin:0 auto 32px; position:relative; z-index:2; } .final-cta .btn{ position:relative; z-index:2; } /* ---------- FOOTER ---------- */ .footer{ background:#100f0e; color:var(--stone-400); padding:60px 0 36px; font-size:13.5px; } .footer .f-grid{ display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; align-items:flex-start; } .footer .logo{ height:32px; width:auto; margin-bottom:16px; } .footer a{ color:var(--stone-200); } .footer .f-col p{ margin-bottom:6px; max-width:340px; line-height:1.6; } .footer .f-ig{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-weight:600; color:#fff; } .footer .f-legal{ margin-top:32px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:11.5px; color:var(--stone-500); line-height:1.65; } /* ---------- MODAL FORM ---------- */ .modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(20,18,16,.6); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); } .modal-overlay.open{ opacity:1; pointer-events:auto; } .modal{ background:var(--pure); border-radius:24px; box-shadow:var(--shadow-lg); width:100%; max-width:460px; padding:38px 36px; position:relative; transform:translateY(24px) scale(.97); transition:transform .4s var(--ease); max-height:92vh; overflow-y:auto; } .modal-overlay.open .modal{ transform:none; } .modal .m-close{ position:absolute; top:18px; right:18px; z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--stone-500); transition:all .2s ease; } .modal .m-close:hover{ background:var(--stone-900); color:#fff; border-color:var(--stone-900); } .modal .m-tag{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-500); margin-bottom:12px; } .modal .m-mock{ width:62px; border-radius:4px; box-shadow:var(--shadow); position:absolute; top:-26px; right:34px; transform:rotate(6deg); pointer-events:none; } .modal h2{ font-family:'Space Grotesk'; font-size:27px; font-weight:600; letter-spacing:-0.02em; margin-bottom:6px; } .modal .m-sub{ font-size:14px; color:var(--stone-500); margin-bottom:22px; } .field{ margin-bottom:14px; } .field label{ display:block; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-500); margin-bottom:7px; } .field input{ width:100%; padding:15px 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--stone-50); font-family:'Inter',sans-serif; font-size:15.5px; color:var(--stone-900); transition:all .2s ease; } .field input::placeholder{ color:var(--stone-500); } .field input:focus{ outline:none; border-color:var(--stone-900); background:#fff; box-shadow:0 6px 16px -10px rgba(28,25,23,.3); } .field.err input{ border-color:#c0473d; background:#fdf4f3; } .field .msg{ font-size:11.5px; color:#c0473d; margin-top:5px; display:none; } .field.err .msg{ display:block; } .modal .btn{ margin-top:8px; } .form-note{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:11.5px; color:var(--stone-500); text-align:center; margin-top:15px; } /* ---------- WHATSAPP FLOAT ---------- */ .wa-float{ position:fixed; right:22px; bottom:22px; z-index:80; display:inline-flex; align-items:center; gap:10px; background:#1faa52; color:#fff; padding:14px 19px; border-radius:999px; box-shadow:0 18px 40px -12px rgba(0,0,0,.45); font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; transition:transform .25s var(--ease); } .wa-float:hover{ transform:translateY(-3px); } .wa-float iconify-icon{ font-size:21px; } /* ---------- RESPONSIVE ---------- */ @media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:20px; } .stage{ order:-1; height:440px; } .stage .cover{ width:280px; } .stage .leaf{ width:180px; } .inside-grid{ grid-template-columns:1fr; gap:36px; } .inside-visual{ order:-1; } .authority{ min-height:0; display:block; } .authority .auth-bg{ position:relative; width:100%; height:360px; } .authority .auth-bg img{ object-position:center top; } .authority .auth-bg::after{ background:linear-gradient(0deg, var(--stone-900) 0%, rgba(28,25,23,.15) 58%, transparent 100%); } .auth-text{ padding:28px 0 56px; max-width:none; } .svc-grid{ grid-template-columns:1fr; } .pages-strip{ grid-template-columns:repeat(3,1fr); } } @media (max-width:600px){ .container{ padding:0 20px; } .section{ padding:68px 0; } .hero{ padding:40px 0 64px; } .hero h1{ font-size:44px; } .lead{ font-size:17px; } .s-head h2{ font-size:32px; } .stats .row{ grid-template-columns:repeat(3,1fr); } .stats .st{ padding:26px 8px; } .stats .st .n{ font-size:24px; } .stats .st .l{ font-size:9px; margin-top:7px; } .authority h2{ font-size:38px; } .authority .auth-bg{ height:300px; } .auth-text{ padding:24px 0 48px; } .final-cta{ padding:52px 26px; } .final-cta h2{ font-size:32px; } .pages-strip{ grid-template-columns:repeat(2,1fr); } .ty-card{ padding:36px 24px; } .ty-card h1{ font-size:30px; } .nav .crm{ display:none; } .modal{ padding:32px 24px; } .wa-float span{ display:none; } } @media print{ .noise,.wa-float,.nav{ display:none; } }