:root{ --navy: #1A3A52; --navy-deep: #14304A; --navy-900: #0F2637; --navy-soft: #EDF1F4; --slate: #6F8493; --grey: #A0A1A0; --text: #556575; --ink: #16202b; --line: #EAEAEA; --bg: #FFFFFF; --surface: #F8F8F8; --surface-2: #F5F5F5; --star: #FFB800; --wa: #00C083; --wa-brand: #25D366; --r-sm: 8px; --r: 14px; --r-lg: 20px; --shadow: 0 1px 2px rgba(16,32,44,.05), 0 8px 24px -12px rgba(16,32,44,.12); --shadow-lg: 0 16px 40px -16px rgba(16,32,44,.25); --wrap: 1918px; --gutter: clamp(20px, 7.7vw, 148px); --content: min(1622px, calc(100vw - 2 * var(--gutter))); --rule-inset: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter) * .9); --gap: 20px; --ff-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--ff-body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } h1,h2,h3,h4{ font-family:var(--ff-head); color:var(--navy); margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:700; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } :focus-visible{ outline:3px solid var(--navy); outline-offset:3px; border-radius:6px; } .container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); } .page-rules{ position:fixed; inset:0; z-index:0; pointer-events:none; } .page-rules::before, .page-rules::after{ content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--line); } .page-rules::before{ left:var(--rule-inset); } .page-rules::after{ right:var(--rule-inset); } .hero__card, .section--dark, .footer{ position:relative; z-index:1; } .section{ position:relative; } .section + .section::before, .strip + .section::before{ content:""; position:absolute; top:0; left:var(--rule-inset); right:var(--rule-inset); height:1px; background:var(--line); } .strip + .section{ margin-top:62px; } @media (max-width:860px){ .page-rules{ display:none; } } .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); } .reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; } } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ff-head); font-weight:600; font-size:.85rem; padding:11px 22px; border:1.5px solid transparent; border-radius:12px; cursor:pointer; transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; white-space:nowrap; } .btn svg{ width:15px; height:15px; stroke-width:2.2; transition:transform .2s ease; } .btn:hover{ transform:translateY(-2px); } .btn:hover svg{ transform:translateX(3px); } .btn--primary{ background:var(--navy); color:#fff; border-radius:12px; box-shadow:0 4px 14px -4px rgba(26,58,82,.4); } .btn--primary:hover{ background:var(--navy-deep); } .btn--hero-primary{ background:var(--navy); color:#ffffff; border:1.5px solid rgba(255,255,255,.3); border-radius:12px; font-weight:700; font-size:.95rem; padding:11px 26px; box-shadow:0 8px 24px rgba(0,0,0,.45); } .btn--hero-primary:hover{ background:var(--navy-deep); border-color:#ffffff; transform:translateY(-2px); } .btn--hero-secondary{ background:#ffffff; color:var(--navy); border:1.5px solid #ffffff; border-radius:12px; font-weight:700; font-size:.95rem; padding:11px 26px; box-shadow:0 6px 18px rgba(0,0,0,.25); } .btn--hero-secondary:hover{ background:#F2F5F8; color:var(--navy-deep); transform:translateY(-2px); } .btn--light{ background:#ffffff; color:var(--navy); font-weight:700; border-radius:12px; box-shadow:0 6px 18px -6px rgba(0,0,0,.35); } .btn--light:hover{ background:#F2F5F8; color:var(--navy-deep); } .btn--wa{ background:var(--wa); color:#fff; font-weight:600; border-radius:12px; box-shadow:0 6px 18px -6px rgba(0,192,131,.5); } .btn--wa:hover{ background:#00a874; } .btn--ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); border-radius:12px; backdrop-filter:blur(6px); } .btn--ghost:hover{ background:rgba(255,255,255,.22); } .btn--sm{ padding:9px 16px; font-size:.82rem; } .btn--header{ padding:9px 18px; font-size:.82rem; border-radius:12px; } .btn--block{ width:100%; justify-content:center; padding:14px 20px; } .header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-bottom:1px solid rgba(0,0,0,.04); transition:border-color .25s ease, box-shadow .25s ease; } .header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 4px 16px -12px rgba(16,32,44,.12); } .header__inner{ display:flex; align-items:center; justify-content:space-between; height:92px; } .header__logo img{ height:36px; width:auto; } .nav{ display:flex; align-items:center; gap:34px; margin-inline:auto; } .nav a{ position:relative; padding:6px 0; font-family:var(--ff-head); font-weight:500; font-size:.92rem; color:var(--slate); transition:color .2s ease; } .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--navy); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .nav a:hover{ color:var(--navy); } .nav a:hover::after{ transform:scaleX(1); } .nav a.is-active{ color:var(--navy); font-weight:600; } .nav a.is-active::after{ transform:scaleX(1); } .header__actions{ display:flex; align-items:center; gap:16px; } .header__phone{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-head); font-weight:600; font-size:.85rem; color:var(--navy); transition:color .2s ease; } .header__phone svg{ width:15px; height:15px; color:var(--navy); stroke-width:2; } .header__phone:hover{ color:var(--slate); } .burger{ display:none; flex-direction:column; gap:4px; width:38px; height:38px; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:10px; cursor:pointer; } .burger span{ width:16px; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s ease, opacity .2s ease; } .burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .burger.is-open span:nth-child(2){ opacity:0; } .burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } .hero{ padding:10px 0 8px; } .hero__card{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:866 / 400; min-height:380px; max-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); } .hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; } .hero__card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,18,28,.52) 0%, rgba(10,24,38,.58) 45%, rgba(6,14,22,.72) 100%), radial-gradient(85% 75% at 50% 40%, rgba(10,24,38,.34), transparent 80%); } .hero__content{ position:relative; z-index:2; text-align:center; padding:48px 20px 38px; max-width:820px; display:flex; flex-direction:column; align-items:center; } .hero__content h1{ color:#ffffff; font-size:clamp(2.2rem, 3.45vw, 4rem); font-weight:800; letter-spacing:-.03em; line-height:1.14; text-shadow:0 3px 18px rgba(0,0,0,.65); } .hero__accent{ color:#458DC4; } .hero__desc{ margin-top:20px; color:rgba(255,255,255,.95); font-size:clamp(1rem, 1.05vw, 1.2rem); max-width:640px; line-height:1.6; font-weight:500; text-shadow:0 2px 10px rgba(0,0,0,.65); } .hero__cta{ margin-top:34px; display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; } .hero__social-proof{ margin-top:38px; display:inline-flex; align-items:center; gap:16px; text-align:left; } .hero__avatars{ display:flex; align-items:center; } .hero__avatars img{ width:46px; height:46px; border-radius:50%; border:2.5px solid #ffffff; margin-left:-12px; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .2s ease; } .hero__avatars img:first-child{ margin-left:0; } .hero__avatars img:hover{ transform:translateY(-2px) scale(1.1); z-index:3; } .hero__rating{ display:flex; flex-direction:column; justify-content:center; gap:4px; } .hero__rating-top{ display:flex; align-items:center; gap:9px; line-height:1; } .hero__score{ font-family:var(--ff-head); font-weight:800; font-size:1.05rem; color:#ffffff; text-shadow:0 1px 4px rgba(0,0,0,.6); } .stars{ display:inline-flex; gap:2px; } .stars svg{ width:17px; height:17px; fill:var(--star); stroke:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); } .stars--sm svg{ width:13px; height:13px; } .hero__rating-sub{ font-size:.95rem; color:rgba(255,255,255,.95); font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.6); } .strip{ position:relative; padding:48px 0; background:#ffffff; margin-top:34px; } .strip::before, .strip::after{ content:""; position:absolute; left:var(--rule-inset); right:var(--rule-inset); height:1px; background:var(--line); } .strip::before{ top:0; } .strip::after{ bottom:0; } .strip__inner{ display:flex; align-items:center; justify-content:space-between; gap:44px; } .strip__label{ font-family:var(--ff-head); font-size:1rem; line-height:1.32; color:var(--slate); font-weight:500; flex:0 0 auto; max-width:200px; letter-spacing:-.01em; padding-right:8px; } .strip__label strong{ color:var(--navy); font-weight:800; } .strip__seals{ flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:26px 0; border-left:1px solid var(--line); } .strip__seals li{ display:flex; align-items:center; gap:13px; font-family:var(--ff-head); font-weight:600; font-size:.98rem; color:var(--navy); line-height:1.35; padding:0 30px; } .strip__seals li:not(:nth-child(3n+1)){ border-left:1px solid var(--line); } .strip__seals svg{ width:24px; height:24px; flex:0 0 auto; color:var(--navy); stroke-width:1.7; opacity:.75; } @media (max-width:1080px){ .strip__seals{ grid-template-columns:repeat(2, 1fr); } .strip__seals li:not(:nth-child(3n+1)){ border-left:0; } .strip__seals li:not(:nth-child(2n+1)){ border-left:1px solid var(--line); } } @media (max-width:720px){ .strip__inner{ flex-direction:column; align-items:flex-start; gap:24px; } .strip__label{ max-width:none; } .strip__seals{ grid-template-columns:1fr; width:100%; border-left:0; gap:18px; } .strip__seals li{ padding:0; } .strip__seals li:not(:nth-child(2n+1)){ border-left:0; } } .section{ padding:68px 0 50px; } .section--tight{ padding-top:40px; } .section__head{ max-width:700px; margin-bottom:46px; } .section__head--center{ margin-inline:auto; text-align:center; } .section__head h2{ font-size:clamp(1.75rem, 3.6vw, 2.6rem); font-weight:700; } .section__head .lead{ margin-top:16px; font-size:1rem; } .section__foot{ margin-top:38px; display:flex; justify-content:center; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; font-family:var(--ff-head); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--slate); } .eyebrow::before{ content:""; width:22px; height:1.5px; background:currentColor; opacity:.55; } .eyebrow--light{ color:rgba(255,255,255,.72); } .section--dark{ background:var(--navy); } .section--dark h2, .section--dark h3{ color:#fff; } .section--dark .lead, .section--dark p{ color:rgba(255,255,255,.72); } .section--dark .eyebrow{ color:rgba(255,255,255,.6); } .section--dark .card-stat, .section--dark .card-step{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); } .section--dark .card-stat:hover, .section--dark .card-step:hover{ background:rgba(255,255,255,.1); box-shadow:none; } .section--dark .icon-box{ background:rgba(255,255,255,.12); color:#fff; } .lead{ color:var(--text); line-height:1.7; } .icon-box{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--navy-soft); color:var(--navy); flex:0 0 auto; } .icon-box svg{ width:21px; height:21px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); } .section--beneficios{ background:#ffffff; padding:56px 0 72px; } .section--beneficios .section__head{ margin-bottom:40px; } .section--beneficios h2{ font-size:clamp(1.75rem, 3.2vw, 2.35rem); font-weight:800; letter-spacing:-.025em; color:var(--navy); line-height:1.24; } .card-stat{ background:var(--surface); border:0; border-radius:16px; padding:28px; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; } .card-stat:hover{ transform:translateY(-4px); background:#F2F2F2; box-shadow:0 10px 28px rgba(26,58,82,.08); } .card-stat .icon-box{ width:auto; height:auto; border-radius:0; background:transparent; color:var(--navy); } .card-stat .icon-box svg{ width:24px; height:24px; } .card-stat .icon-box img{ width:64px; height:64px; object-fit:contain; } .card-stat h3{ margin:46px 0 10px; font-size:clamp(1.05rem, 1vw, 1.19rem); font-weight:700; color:var(--navy); } .card-stat p{ font-size:clamp(.95rem, .89vw, 1.06rem); line-height:1.6; color:#64748B; } .section--about{ padding:clamp(56px, 5vw, 96px) 0; background:#ffffff; } .about{ display:grid; grid-template-columns:1fr 1.23fr; gap:clamp(40px, 9.4vw, 180px); align-items:center; } .about__text h2{ font-size:clamp(1.9rem, 2.3vw, 2.75rem); line-height:1.18; font-weight:800; color:var(--navy); } .about__text .lead{ margin-top:20px; font-size:clamp(.95rem, .89vw, 1.06rem); line-height:1.75; color:#64748B; } .checklist{ margin:30px 0 36px; display:grid; gap:18px; } .checklist li{ display:flex; gap:13px; align-items:flex-start; font-size:clamp(.95rem, .89vw, 1.06rem); line-height:1.55; color:#475569; } .checklist li svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; padding:3.5px; border-radius:50%; background:var(--navy); color:#fff; stroke-width:2.8; } .checklist strong{ color:var(--navy); font-family:var(--ff-head); font-weight:700; } .about__gallery{ display:grid; grid-template-columns:1fr 1fr; gap:14px; grid-template-areas: "a b" "c b" "c d"; grid-template-rows:1fr 1fr 1fr; height:clamp(440px, 44vw, 870px); } .about__gallery img{ width:100%; height:100%; object-fit:cover; border-radius:14px; box-shadow:0 4px 16px rgba(0,0,0,.08); transition:transform .3s ease; } .about__gallery img:hover{ transform:scale(1.02); } .about__gallery img:nth-child(1){ grid-area:a; } .about__gallery img:nth-child(2){ grid-area:b; } .about__gallery img:nth-child(3){ grid-area:c; } .about__gallery img:nth-child(4){ grid-area:d; } .section--processo{ background:#ffffff; padding:56px 0 68px; border-top:1px solid #ECEEF1; } .section--processo h2{ font-size:clamp(1.75rem, 3.2vw, 2.35rem); font-weight:800; color:var(--navy); line-height:1.24; } .process{ --pgap: calc(var(--content) * .0069); --col: calc((var(--content) - 2 * var(--pgap)) / 3); display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:var(--col); gap:var(--pgap); align-items:stretch; } .process__col{ display:grid; grid-template-rows:1fr 1fr; gap:var(--pgap); min-height:0; } .process__img{ height:100%; } .process__img img{ width:100%; height:100%; object-fit:cover; object-position:center 48%; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); } .card-step{ background:var(--surface); border:0; border-radius:16px; padding:clamp(18px, 1.46vw, 28px); display:flex; flex-direction:column; align-items:flex-start; min-height:0; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; } .card-step:hover{ transform:translateY(-4px); background:#F2F2F2; box-shadow:0 10px 26px rgba(26,58,82,.08); } .card-step .icon-box{ width:auto; height:auto; border-radius:0; background:transparent; color:var(--navy); flex:0 0 auto; } .card-step .icon-box svg{ width:clamp(20px, 1.25vw, 24px); height:clamp(20px, 1.25vw, 24px); } .card-step .icon-box img{ width:clamp(44px, 3.3vw, 60px); height:clamp(44px, 3.3vw, 60px); object-fit:contain; } .card-step h3{ margin:auto 0 8px; font-size:clamp(1.05rem, 1vw, 1.19rem); font-weight:700; color:var(--navy); } .card-step p{ font-size:clamp(.95rem, .89vw, 1.06rem); line-height:1.6; color:#64748B; } .carousel{ --slides:3; --cgap:20px; } .carousel__viewport{ overflow:hidden; padding:4px; margin:-4px; } .carousel__track{ display:flex; gap:var(--cgap); transition:transform .62s cubic-bezier(.22,.75,.24,1); will-change:transform; } .carousel__track.is-dragging{ transition:none; cursor:grabbing; } .carousel .card-srv{ flex:0 0 calc((100% - (var(--slides) - 1) * var(--cgap)) / var(--slides)); min-width:0; transition:transform .62s cubic-bezier(.22,.75,.24,1), opacity .5s ease, background .3s ease, box-shadow .3s ease; } .carousel .card-srv[aria-hidden="true"]{ opacity:.45; } .carousel__nav{ margin-top:28px; display:flex; align-items:center; justify-content:center; gap:18px; } .carousel__nav[hidden]{ display:none; } .carousel__btn{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--line); color:var(--navy); cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease; } .carousel__btn svg{ width:19px; height:19px; stroke-width:2.1; } .carousel__btn:hover:not(:disabled){ background:var(--navy); border-color:var(--navy); color:#fff; transform:translateY(-2px); } .carousel__btn:disabled{ opacity:.35; cursor:default; } .carousel__dots{ display:flex; align-items:center; gap:8px; } .carousel__dots button{ width:8px; height:8px; padding:0; border:0; border-radius:99px; background:var(--line); cursor:pointer; transition:width .35s ease, background .25s ease; } .carousel__dots button[aria-current="true"]{ width:26px; background:var(--navy); } @media (max-width:1080px){ .carousel{ --slides:2; } } @media (max-width:720px){ .carousel{ --slides:1; } } .card-srv{ display:flex; flex-direction:column; background:var(--surface); border:0; border-radius:16px; padding:28px; transition:transform .3s ease, box-shadow .3s ease, background .3s ease; } .card-srv:hover{ transform:translateY(-5px); box-shadow:var(--shadow); background:#F2F2F2; } .card-srv__head{ min-height:118px; } .card-srv__head h3{ font-size:1.1rem; } .card-srv__head p{ margin-top:10px; font-size:.875rem; line-height:1.6; } .card-srv > img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-sm); margin:18px 0; } .card-srv > img.is-top{ object-position:center 26%; } .card-srv__list{ display:grid; gap:9px; flex:1; } .card-srv__list li{ display:flex; gap:9px; align-items:flex-start; font-size:.83rem; line-height:1.5; } .card-srv__list svg{ width:17px; height:17px; flex:0 0 auto; margin-top:2px; padding:3px; border-radius:50%; background:var(--navy); color:#fff; stroke-width:3; } .card-srv__cta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--ff-head); font-weight:600; font-size:.88rem; color:var(--navy); transition:color .2s ease; } .card-srv__cta svg{ width:17px; height:17px; stroke-width:2.2; transition:transform .2s ease; } .card-srv__cta:hover{ color:var(--slate); } .card-srv__cta:hover svg{ transform:translateX(4px); } .card-srv--cta{ background:var(--navy); border-color:var(--navy); justify-content:center; align-items:flex-start; gap:14px; background-image:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.12), transparent 60%); } .card-srv--cta:hover{ background:var(--navy); transform:translateY(-5px); } .card-srv--cta h3{ color:#fff; font-size:1.5rem; } .card-srv--cta p{ color:rgba(255,255,255,.75); font-size:.88rem; line-height:1.65; } .card-srv--cta .btn{ margin-top:8px; } .carousel--quotes{ --slides:2; } @media (max-width:720px){ .carousel--quotes{ --slides:1; } } .carousel--quotes .card-quote{ flex:0 0 calc((100% - (var(--slides) - 1) * var(--cgap)) / var(--slides)); min-width:0; } .card-quote{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease, background .3s ease; } .card-quote:hover{ transform:translateY(-5px); box-shadow:var(--shadow); background:#fff; } .card-quote blockquote{ margin:20px 0 0; flex:1; font-family:var(--ff-head); font-weight:500; font-size:1rem; line-height:1.6; color:var(--navy); } .card-quote--norating{ font-weight:400 !important; color:var(--text) !important; font-style:italic; font-size:.92rem !important; } .card-quote footer{ margin-top:32px; display:grid; gap:2px; } .card-quote footer strong{ font-family:var(--ff-head); font-weight:600; font-size:.94rem; color:var(--navy); } .card-quote footer span{ font-size:.79rem; color:var(--grey); } .card-quote--score{ background:var(--navy); border-color:var(--navy); align-items:flex-start; justify-content:center; gap:8px; } .card-quote--score:hover{ background:var(--navy); } .card-quote--score .score{ font-family:var(--ff-head); font-weight:800; font-size:3.4rem; line-height:1; color:#fff; } .card-quote--score p{ margin-top:10px; color:rgba(255,255,255,.72); font-size:.86rem; line-height:1.6; } .section--contact{ padding-bottom:100px; } .contact{ display:grid; grid-template-columns:1fr 1.02fr; gap:56px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:56px; } .contact__info h2{ font-size:clamp(1.65rem, 3.2vw, 2.3rem); } .contact__info > p{ margin-top:16px; font-size:.95rem; line-height:1.7; } .contact__channels{ margin-top:32px; display:grid; gap:14px; } .contact__channels a{ display:flex; align-items:center; gap:14px; transition:transform .2s ease; } .contact__channels a:hover{ transform:translateX(4px); } .contact__channels small{ display:block; font-size:.73rem; text-transform:uppercase; letter-spacing:.08em; color:var(--grey); } .contact__channels strong{ font-family:var(--ff-head); font-weight:600; font-size:.95rem; color:var(--navy); word-break:break-word; } .contact__hint{ margin-top:26px; font-size:.87rem; } .contact__hint a{ color:var(--navy); font-weight:600; border-bottom:1.5px solid currentColor; } .form{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px; display:grid; gap:16px; align-content:start; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .field{ display:grid; gap:7px; } .field > span{ font-family:var(--ff-head); font-weight:600; font-size:.82rem; color:var(--navy); } .field > span small{ font-weight:400; color:var(--grey); } .field input,.field select,.field textarea{ width:100%; padding:13px 15px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:.9rem; color:var(--ink); transition:border-color .2s ease, background .2s ease; } .field textarea{ resize:vertical; min-height:88px; } .field input::placeholder,.field textarea::placeholder{ color:#AEB6BD; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--navy); background:#fff; } .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3A52' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:17px; padding-right:42px; } .field input:user-invalid,.field select:user-invalid{ border-color:#E05252; } .form__note{ font-size:.82rem; text-align:center; min-height:1.2em; } .form__note.is-error{ color:#C23B3B; } .form__note.is-ok{ color:var(--navy); } .footer{ background:var(--navy-900); color:rgba(255,255,255,.62); } .footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:44px; padding-block:64px; } .footer__brand img{ height:34px; width:auto; } .footer__brand p{ margin-top:20px; font-size:.87rem; line-height:1.72; max-width:36ch; } .footer__social{ margin-top:22px; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.16); color:#fff; transition:background .25s ease, border-color .25s ease; } .footer__social:hover{ background:#fff; border-color:#fff; color:var(--navy-900); } .footer__col{ display:grid; gap:11px; align-content:start; } .footer__col h4{ color:#fff; font-size:.88rem; font-weight:600; margin-bottom:6px; letter-spacing:0; } .footer__col a,.footer__col span{ font-size:.86rem; transition:color .2s ease; } .footer__col a:hover{ color:#fff; } .footer__bar{ border-top:1px solid rgba(255,255,255,.1); padding-block:22px; } .footer__bar p{ font-size:.8rem; text-align:center; } .wa-float{ position:fixed; right:22px; bottom:22px; z-index:90; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--wa-brand); color:#fff; box-shadow:0 12px 28px -8px rgba(37,211,102,.7); transition:transform .25s ease; } .wa-float svg{ width:31px; height:31px; stroke:none; } .wa-float:hover{ transform:scale(1.08); } @media (max-width:1080px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } .quotes{ grid-template-columns:repeat(2,1fr); } .about{ grid-template-columns:1fr; gap:44px; } .process{ grid-template-columns:1fr 1fr; } .process__img{ grid-column:1 / -1; order:-1; } .process__img img{ min-height:260px; max-height:320px; } .footer__inner{ grid-template-columns:1fr 1fr; gap:36px; } .footer__brand{ grid-column:1 / -1; } } @media (max-width:1080px){ .nav{ gap:22px; } .nav a{ font-size:.87rem; } } @media (max-width:860px){ .nav{ position:fixed; inset:92px 0 auto; z-index:99; flex-direction:column; align-items:stretch; gap:0; margin-inline:0; background:#fff; border-bottom:1px solid var(--line); padding:8px 20px 20px; box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .3s cubic-bezier(.22,.8,.3,1); } .nav.is-open{ transform:none; } .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem; color:var(--navy); } .nav a:last-child{ border-bottom:0; } .nav a::after{ display:none; } .burger{ display:flex; } .header__phone{ display:none; } .contact{ grid-template-columns:1fr; gap:36px; padding:36px 26px; } } @media (max-width:720px){ .section{ padding:64px 0; } .hero{ padding-top:12px; } .hero__card{ min-height:0; border-radius:18px; } .hero__content{ padding:40px 18px; } .hero__cta .btn{ width:100%; justify-content:center; } .hero__social-proof{ flex-direction:column; align-items:center; text-align:center; gap:8px; } .hero__rating-top{ justify-content:center; } .strip{ padding:30px 0 10px; } .strip__inner{ flex-direction:column; align-items:center; text-align:center; gap:20px; } .strip__label{ max-width:none; text-align:center; font-size:.9rem; } .grid-4,.grid-3,.quotes{ grid-template-columns:1fr; } .process{ grid-template-columns:1fr; } .card-srv__head{ min-height:0; } .form__row{ grid-template-columns:1fr; } .form{ padding:24px 20px; } .footer__inner{ grid-template-columns:1fr; gap:32px; padding-block:48px; } .wa-float{ right:16px; bottom:16px; width:52px; height:52px; } }