:root{ --bg: #0a0906; --bg-soft: #100e0a; --surface: rgba(255,246,238,.045); --surface-2: rgba(255,246,238,.075); --border: rgba(255,246,238,.11); --border-soft: rgba(255,246,238,.07); --glass-blur: 18px; --text: #f6f3ee; --text-dim: #a9a297; --text-faint: #74695c; --accent: #ff7a29; --accent-2: #ffb459; --accent-ink: #1a0e04; --info: #d9a774; --ok: #34d399; --danger: #ff6b6b; --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-2)); --grad-hero: linear-gradient(180deg, rgba(10,8,5,.4) 0%, rgba(9,7,4,.78) 55%, #0a0906 100%); --font-display: 'Unbounded', sans-serif; --font-body: 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', monospace; --container: 1220px; --radius-s: 10px; --radius-m: 16px; --radius-l: 26px; --shadow-1: 0 10px 30px -12px rgba(0,0,0,.6); --shadow-2: 0 24px 60px -20px rgba(0,0,0,.7); --shadow-glow: 0 0 0 1px rgba(255,122,41,.28), 0 12px 30px -10px rgba(255,122,41,.4); --ease: cubic-bezier(.22,.9,.3,1); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } html, body{ max-width: 100%; overflow-x: hidden; } body{ margin: 0; position: relative; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; isolation: isolate; } body::before{ content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(760px 520px at 14% -6%, rgba(255,122,41,.16), transparent 60%), radial-gradient(620px 480px at 100% 18%, rgba(255,180,89,.10), transparent 62%), radial-gradient(900px 620px at 50% 112%, rgba(255,122,41,.09), transparent 60%), var(--bg); } body::after{ content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at 1px 1px, rgba(255,246,238,.045) 1px, transparent 0); background-size: 3px 3px; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4{ margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: -.01em; } p{ margin: 0; } button{ font-family: inherit; cursor: pointer; } input{ font-family: inherit; } svg{ display: block; } a:focus-visible, button:focus-visible, input:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; } .container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } section{ position: relative; } .hazard-strip{ height: 8px; width: 100%; background: repeating-linear-gradient(135deg, var(--accent) 0 18px, #14181f 18px 36px); background-size: 51px 8px; } .noise-layer{ position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 22px 22px; } .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); } .eyebrow::before{ content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 12px rgba(255,122,41,.8); } .section-head{ max-width: 640px; margin: 0 0 44px; } .section-head h2{ font-size: clamp(28px, 3.6vw, 42px); margin-top: 14px; } .section-head p{ margin-top: 14px; color: var(--text-dim); font-size: 16.5px; } .section-head.center{ margin-left: auto; margin-right: auto; text-align: center; } .section-pad{ padding: 96px 0; } @media (max-width: 720px){ .section-pad{ padding: 64px 0; } } .btn{ --btn-h: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btn-h); padding: 0 26px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 15.5px; border: 1px solid transparent; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .btn svg{ width: 19px; height: 19px; flex: none; } .btn-primary{ background: var(--grad-accent); color: var(--accent-ink); box-shadow: var(--shadow-glow); } .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(255,122,41,.55); } .btn-ghost{ background: rgba(255,246,238,.05); border-color: var(--border); color: var(--text); backdrop-filter: blur(var(--glass-blur)); } .btn-ghost:hover{ border-color: var(--info); background: rgba(255,180,89,.12); transform: translateY(-2px); } .btn-block{ width: 100%; } .btn-sm{ --btn-h: 44px; padding: 0 20px; font-size: 14.5px; } .site-header{ position: sticky; top: 0; z-index: 60; background: rgba(10,8,5,.55); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); } .site-header.is-scrolled{ border-bottom-color: var(--border-soft); background: rgba(9,7,4,.82); } .header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 82px; max-width: 1320px; } .brand-group{ display: flex; align-items: center; flex: none; } .brand{ display: flex; align-items: center; gap: 11px; flex: none; } .brand-logo { width: 42px; height: 42px; border-radius: 12px; flex: none; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); } .brand-text{ display: flex; flex-direction: column; line-height: 1.15; } .brand-text .name{ font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--text); white-space: nowrap; } .brand-text .name .amp{ color: var(--accent-2); } .brand-text .tagline{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-top: 3px; white-space: nowrap; } .brand-phone{ display: none; align-items: center; gap: 6px; min-width: 0; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-2); white-space: nowrap; padding: 5px 11px 5px 9px; background: rgba(15,13,10,.82); backdrop-filter: blur(6px); border: 1.5px solid rgba(255,180,89,.55); border-radius: 9px; animation: brand-phone-pulse 2.4s ease-in-out infinite; } .brand-phone:hover{ animation-play-state: paused; border-color: var(--accent-2); } .brand-phone svg{ width: 14px; height: 14px; flex: none; } .brand-phone .num-text{ overflow: hidden; text-overflow: ellipsis; max-width: 100%; } @keyframes brand-phone-pulse{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(255,180,89,.45); } 50%{ box-shadow: 0 0 0 5px rgba(255,180,89,0); } } .main-nav{ display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); flex: 1 1 0%; min-width: 0; } .main-nav a{ font-size: 14.5px; font-weight: 600; color: var(--text-dim); transition: color .2s; position: relative; white-space: nowrap; padding: 6px 1px; } .main-nav a::after{ content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad-accent); transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease, ease); } .main-nav a:hover{ color: var(--text); } .main-nav a:hover::after{ transform: scaleX(1); } .header-actions{ display: flex; align-items: center; gap: 14px; flex: none; } .header-phone{ display: flex; flex-direction: column; align-items: flex-end; gap: 3px; transition: opacity .2s ease; } .header-phone:hover{ opacity: .82; } .header-phone .tag{ font-size: 11px; color: var(--ok); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .header-phone .num{ display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-weight: 700; font-size: 17px; letter-spacing: .01em; color: var(--text); transition: color .2s ease; } .header-phone .num svg{ width: 15px; height: 15px; color: var(--accent-2); flex: none; } .header-phone:hover .num{ color: var(--accent-2); } .header-msg{ display: none; gap: 8px; } .icon-btn{ width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); transition: transform .2s, border-color .2s, background .2s; } .icon-btn:hover{ transform: translateY(-2px); border-color: var(--info); } .icon-btn img, .icon-btn svg{ width: 18px; height: 18px; } .burger{ display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); backdrop-filter: blur(var(--glass-blur)); align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .burger span{ width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .25s; } .burger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .burger.is-active span:nth-child(2){ opacity: 0; } .burger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .mobile-nav{ position: fixed; inset: var(--header-h, 82px) 0 0 0; background: rgba(9,7,4,.97); backdrop-filter: blur(16px); z-index: 59; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); overflow-y: auto; } .mobile-nav.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; } .mobile-nav a{ padding: 16px 4px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-display); font-size: 19px; font-weight: 500; } .mobile-nav .mobile-cta{ margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .mobile-nav .mobile-msg{ display: flex; gap: 10px; margin-top: 8px; } .hero{ position: relative; padding: 64px 0 90px; overflow: hidden; } .hero-bg{ position: absolute; inset: 0; background: url('/images/hero-roadside.jpg') center 20%/cover no-repeat; z-index: 0; } .hero-bg::after{ content: ''; position: absolute; inset: 0; background: var(--grad-hero); } .hero .container{ position: relative; z-index: 2; } .hero-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.68fr); gap: 40px; align-items: center; } .hero-copy h1{ margin-top: 18px; font-size: clamp(34px, 4.6vw, 58px); } .hero-copy h1 em{ font-style: normal; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-copy p.lead{ margin-top: 20px; max-width: 520px; font-size: 17.5px; color: var(--text-dim); } .hero-cta{ margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; } .hero-cta .btn-primary .num{ font-family: var(--font-mono); } .hero-stats{ margin-top: 46px; display: grid; grid-template-columns: repeat(4, auto); gap: 28px 34px; } .hero-stats .stat b{ display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--text); } .hero-stats .stat span{ display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-faint); line-height: 1.35; } .hero-side{ position: relative; } .hero-card{ position: relative; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-2); aspect-ratio: 4/5; } .hero-card img{ width: 100%; height: 100%; object-fit: cover; } .hero-card .frame-stripe{ position: absolute; left: 0; right: 0; bottom: 0; height: 10px; } .radar-chip{ position: absolute; left: -18px; bottom: 26px; background: rgba(16,13,9,.85); border: 1px solid var(--border); backdrop-filter: blur(var(--glass-blur)); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-1); max-width: 260px; } .radar-dot{ position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex: none; } .radar-dot::after{ content:''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ok); animation: radar-ping 1.8s ease-out infinite; } @keyframes radar-ping{ 0%{ transform: scale(.5); opacity: .9; } 100%{ transform: scale(2.1); opacity: 0; } } .radar-chip strong{ font-size: 13.5px; display:block; } .radar-chip span{ font-size: 12px; color: var(--text-dim); } .hero-badge-top{ position: absolute; top: 22px; right: 22px; background: rgba(16,13,9,.72); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); display: flex; align-items: center; gap: 8px; } .hero-badge-top .dot{ width:7px; height:7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent);} .trustbar{ border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: var(--bg-soft); } .trustbar .container{ display: flex; flex-wrap: wrap; gap: 14px 32px; padding: 18px 24px; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); } .trustbar .item{ display: flex; align-items: center; gap: 8px; } .trustbar svg{ width: 16px; height: 16px; color: var(--ok); flex: none; } .services-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; } .svc-card{ position: relative; background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .svc-card::before{ content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px); } .svc-card:hover{ transform: translateY(-5px); background: var(--surface-2); border-color: rgba(255,122,41,.4); box-shadow: 0 18px 40px -18px rgba(255,122,41,.35); } .svc-icon{ width: 64px; height: 64px; border-radius: 16px; background: radial-gradient(circle at 32% 28%, rgba(255,122,41,.14) 0%, var(--surface-2) 68%); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent-2); padding: 8px; } .svc-icon svg{ width: 25px; height: 25px; } .svc-icon img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); } .svc-card h3{ font-family: var(--font-body); font-size: 17.5px; font-weight: 800; } .svc-price{ font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent-2); } .svc-price span{ font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; } .svc-desc{ color: var(--text-dim); font-size: 14.5px; flex: 1; } .svc-link{ margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--text); padding-top: 12px; border-top: 1px dashed var(--border); } .svc-link svg{ width: 15px; height: 15px; transition: transform .25s var(--ease); } .svc-card:hover .svc-link svg{ transform: translateX(4px); } .why-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .why-card{ padding: 28px 22px; border-radius: var(--radius-m); background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--border); } .why-num{ font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); margin-bottom: 18px; } .why-card h3{ font-size: 18px; margin-bottom: 8px; } .why-card p{ color: var(--text-dim); font-size: 14.5px; } .price-panel{ background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; } .price-tabs{ display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; border-bottom: 1px solid var(--border-soft); background: var(--bg-soft); } .price-tab{ padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 13.5px; font-weight: 700; transition: all .2s var(--ease); } .price-tab:hover{ color: var(--text); } .price-tab.is-active{ background: var(--grad-accent); color: var(--accent-ink); border-color: transparent; } .price-body{ padding: 8px 8px 8px; } .price-table{ display: none; padding: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .price-table.is-active{ display: block; } .price-table table{ width: 100%; min-width: 460px; border-collapse: collapse; } .price-table caption{ text-align: left; font-family: var(--font-display); font-size: 16px; margin-bottom: 14px; color: var(--text); } .price-table th{ text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border); } .price-table td{ padding: 14px; border-bottom: 1px solid var(--border-soft); font-size: 15px; } .price-table tr:last-child td{ border-bottom: none; } .price-table td:last-child{ font-family: var(--font-mono); font-weight: 700; color: var(--accent-2); text-align: right; white-space: nowrap; } @media (max-width: 640px){ .price-table{ overflow-x: visible; padding: 6px 4px; } .price-table table{ width: 100%; min-width: 0; } .price-table caption{ padding: 0 10px; } .price-table thead{ display: none; } .price-table tbody, .price-table tr, .price-table td{ display: block; width: 100%; } .price-table tr{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 10px; border-bottom: 1px solid var(--border-soft); } .price-table td{ padding: 0; border-bottom: none; font-size: 14px; } .price-table td:first-child{ flex: 1 1 auto; min-width: 0; } .price-table td:last-child{ flex: 0 0 auto; max-width: 42%; font-size: 15px; white-space: normal; text-align: right; } } .price-note{ padding: 16px 22px 22px; color: var(--text-faint); font-size: 13px; } .area-panel{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); } .area-col{ padding: 34px 32px; } .area-col + .area-col{ border-left: 1px solid var(--border-soft); } .area-col h3{ font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--info); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .area-col h3 svg{ width: 18px; height: 18px; } .pill-list{ display: flex; flex-wrap: wrap; gap: 9px; } .pill{ padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; color: var(--text-dim); } a.pill{ transition: border-color .2s, color .2s; } a.pill:hover{ border-color: var(--accent-2); color: var(--text); } .reviews-scroller{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 360px); gap: 18px; overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .reviews-scroller::-webkit-scrollbar{ height: 6px; } .reviews-scroller::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; } .review-card{ scroll-snap-align: start; background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 24px; display: flex; flex-direction: column; gap: 14px; } .review-top{ display: flex; align-items: center; gap: 12px; } .avatar{ width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--accent-ink); flex: none; } .review-top .who strong{ display: block; font-size: 14.5px; } .review-top .who span{ font-size: 12px; color: var(--text-faint); } .stars{ display:flex; gap: 3px; color: var(--accent-2); } .stars svg{ width: 14px; height: 14px; } .review-text{ color: var(--text-dim); font-size: 14.5px; } .cta-band{ position: relative; overflow: hidden; border-radius: var(--radius-l); border: 1px solid var(--border); padding: 64px 40px; text-align: center; } .cta-band-bg{ position: absolute; inset: 0; background: radial-gradient(680px 420px at 18% 20%, rgba(255,122,41,.22), transparent 60%), radial-gradient(560px 380px at 88% 90%, rgba(255,180,89,.16), transparent 62%), var(--bg-soft); } .cta-band-bg::after{ content:''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,5,.86), rgba(10,8,5,.94)); } .cta-band > *{ position: relative; z-index: 1; } .cta-band .eyebrow{ justify-content: center; } .cta-band h2{ margin-top: 14px; font-size: clamp(26px, 4vw, 40px); max-width: 640px; margin-left: auto; margin-right: auto; } .cta-band .phone-big{ margin-top: 22px; font-family: var(--font-mono); font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; color: var(--accent-2); } .cta-band-actions{ margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .modal-overlay{ position: fixed; inset: 0; background: rgba(8,6,4,.72); backdrop-filter: blur(6px); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .modal-overlay.is-open{ opacity: 1; pointer-events: auto; } .modal-box{ width: 100%; max-width: 420px; background: var(--surface-2); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 34px; position: relative; transform: translateY(14px) scale(.98); transition: transform .25s var(--ease); box-shadow: var(--shadow-2); } .modal-overlay.is-open .modal-box{ transform: translateY(0) scale(1); } .modal-close{ position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; } .modal-box h3{ font-size: 22px; padding-right: 30px; } .modal-box p.hint{ margin-top: 8px; color: var(--text-dim); font-size: 14px; } .field{ margin-top: 18px; } .field label{ display: block; font-size: 12.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; font-weight: 700; } .field input{ width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: 15px; } .field input::placeholder{ color: var(--text-faint); } .field input:focus{ border-color: var(--info); outline: none; } .modal-box .btn{ margin-top: 22px; } .modal-note{ margin-top: 14px; font-size: 12px; color: var(--text-faint); text-align: center; } .form-success{ display: none; text-align: center; padding: 10px 0; } .form-success.is-visible{ display: block; } .form-success svg{ width: 46px; height: 46px; color: var(--ok); margin: 0 auto 14px; } .form-fields.is-hidden{ display: none; } .field select, .field textarea{ width: 100%; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: 15px; font-family: var(--font-body); } .field select{ height: 50px; 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='%23a9a297' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; } .field select:focus, .field textarea:focus{ border-color: var(--info); outline: none; } .field textarea{ padding: 14px 16px; resize: vertical; min-height: 96px; line-height: 1.5; } .field-error{ margin-top: 7px; font-size: 12.5px; color: var(--danger); display: none; } .field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--danger); } .field.has-error .field-error{ display: block; } .checkbox-field{ margin-top: 20px; display: flex; align-items: flex-start; gap: 12px; } .checkbox-field input[type="checkbox"]{ flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; } .checkbox-field label{ font-size: 13.5px; color: var(--text-dim); line-height: 1.5; cursor: pointer; } .checkbox-field label a{ color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .checkbox-field.has-error .field-error{ display: block; margin-left: 32px; } .hp-field{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .form-error-banner{ display: none; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.3); color: var(--danger); font-size: 13.5px; } .form-error-banner.is-visible{ display: block; } .cookie-banner{ position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; max-width: 620px; margin: 0 auto; background: var(--surface-2); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-2); padding: 18px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; transform: translateY(140%); transition: transform .35s var(--ease); } .cookie-banner.is-visible{ transform: translateY(0); } .cookie-banner p{ flex: 1 1 260px; font-size: 13px; color: var(--text-dim); line-height: 1.5; } .cookie-banner p a{ color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .cookie-banner .btn{ flex: none; } @media (max-width: 560px){ .cookie-banner{ left: 10px; right: 10px; bottom: 10px; padding: 16px; } } .site-footer{ background: var(--bg-soft); border-top: 1px solid var(--border-soft); padding: 64px 0 26px; } .footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; } .footer-brand .brand{ margin-bottom: 16px; } .footer-brand p{ color: var(--text-dim); font-size: 14px; max-width: 280px; } .footer-msg{ display: flex; gap: 10px; margin-top: 18px; } .footer-col h4{ font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 16px; } .footer-col ul{ display: flex; flex-direction: column; gap: 11px; } .footer-col a{ color: var(--text-dim); font-size: 14.5px; transition: color .2s; } .footer-col a:hover{ color: var(--text); } .footer-phone{ font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--text); } .footer-status{ display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--ok); font-weight: 700; } .footer-status .dot{ width:7px; height:7px; border-radius:50%; background: var(--ok); box-shadow: 0 0 8px var(--ok);} .footer-bottom{ margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--text-faint); } .mobile-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; gap: 10px; background: transparent; transform: translateY(120%); transition: transform .3s var(--ease); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0)); } .mobile-bar.is-visible{ transform: translateY(0); } .mobile-bar a{ flex: 1; background: var(--surface-2); backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 12px 28px -12px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; font-weight: 700; font-size: 13.5px; } .mobile-bar a.primary{ background: var(--grad-accent); color: var(--accent-ink); border-color: transparent; box-shadow: var(--shadow-glow); } .mobile-bar svg{ width: 18px; height: 18px; } .mobile-bar .icon-btn{ flex: 0 0 54px; width: 54px; height: 54px; box-shadow: 0 12px 28px -12px rgba(0,0,0,.6); } .mobile-bar .icon-btn svg{ width: 22px; height: 22px; } .to-top{ position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .3s var(--ease); } .to-top.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); } .to-top svg{ width: 18px; height: 18px; } html.js [data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.js [data-reveal].is-in{ opacity: 1; transform: translateY(0); } @media (max-width: 1080px){ .why-grid{ grid-template-columns: repeat(2, 1fr); } .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; } .footer-col.col-services{ display: none; } } @media (max-width: 960px){ .main-nav{ display: none; } .header-phone{ display: none; } .burger{ display: flex; } .header-actions{ margin-left: auto; } .site-header{ position: fixed; left: 0; right: 0; width: 100%; } body{ padding-top: var(--header-h, 82px); } .brand-group{ flex: 1 1 auto; min-width: 0; } .hero-grid{ grid-template-columns: 1fr; } .hero-side{ order: -1; max-width: 420px; margin: 0 auto; } .hero-stats{ grid-template-columns: repeat(2, 1fr); } .area-panel{ grid-template-columns: 1fr; } .area-col + .area-col{ border-left: none; border-top: 1px solid var(--border-soft); } } @media (min-width: 961px) and (max-width: 1180px){ .main-nav{ gap: 16px; } } @media (max-width: 720px){ :root{ --header-h: 92px; } .header-inner{ height: 92px; gap: 8px; } .brand-logo { width: 50px; height: 50px; } .brand-text .name{ font-size: 13.5px; } .brand-text .tagline{ display: none; } .brand-group{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; } .brand-phone{ display: flex; margin-left: 56px; } .header-msg{ display: none; } .header-actions{ gap: 8px; } .header-actions .btn-primary{ display: none; } .hero{ padding: 36px 0 60px; } .why-grid{ grid-template-columns: 1fr; } .services-grid{ grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); } .footer-grid{ grid-template-columns: 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } .mobile-bar{ display: flex; } .to-top{ bottom: calc(96px + env(safe-area-inset-bottom, 0)); } .cta-band{ padding: 48px 22px; } body{ padding-bottom: calc(84px + env(safe-area-inset-bottom, 0)); } } @media (max-width: 480px){ .container{ padding: 0 16px; } .footer-grid{ grid-template-columns: 1fr; } .hero-stats{ grid-template-columns: 1fr 1fr; gap: 18px 16px; } .radar-chip{ left: 10px; right: 10px; bottom: 14px; max-width: none; } .trustbar .container{ justify-content: center; flex-wrap: wrap; gap: 10px 20px; padding: 16px 20px; } .section-pad{ padding: 52px 0; } .hero-copy .lead{ font-size: 16px; } .svc-card{ padding: 22px 18px 18px; } .modal-box{ padding: 26px 22px; } .cta-band{ padding: 40px 18px; } .price-tabs{ padding: 14px; gap: 6px; } .price-tab{ padding: 8px 13px; font-size: 12.5px; } } @media (max-width: 360px){ .hero-copy h1{ font-size: 30px; } .hero-stats{ grid-template-columns: 1fr 1fr; gap: 16px 12px; } .btn{ padding: 0 20px; font-size: 14.5px; } .brand-phone{ font-size: 11.5px; letter-spacing: -.02em; padding: 4px 9px 4px 7px; margin-left: 44px; } .brand-phone svg{ width: 12.5px; height: 12.5px; } } .breadcrumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-faint); padding: 18px 0 0; } .breadcrumbs a{ color: var(--text-dim); transition: color .2s; } .breadcrumbs a:hover{ color: var(--accent-2); } .breadcrumbs .sep{ color: var(--text-faint); opacity: .6; } .breadcrumbs .current{ color: var(--text); } .page-hero{ position: relative; padding: 26px 0 56px; overflow: hidden; } .page-hero::before{ content:''; position: absolute; inset: 0; background: radial-gradient(720px 420px at 12% 0%, rgba(255,122,41,.14), transparent 60%), radial-gradient(600px 380px at 100% 10%, rgba(255,180,89,.09), transparent 62%); pointer-events: none; z-index: 0; } .page-hero .container{ position: relative; z-index: 1; } .page-hero h1{ font-size: clamp(28px, 4vw, 46px); margin-top: 14px; max-width: 820px; } .page-hero .lead{ margin-top: 16px; max-width: 680px; color: var(--text-dim); font-size: 17px; } .page-hero .hero-cta{ margin-top: 26px; } .page-price-chip{ display: inline-flex; align-items: baseline; gap: 8px; margin-top: 22px; padding: 12px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(var(--glass-blur)); font-size: 14.5px; color: var(--text-dim); } .page-price-chip b{ font-family: var(--font-display); color: var(--text); font-size: 19px; } .page-price-chip a{ margin-left: 6px; color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; } .prose{ max-width: 760px; } .prose p{ color: var(--text-dim); font-size: 16px; margin-bottom: 16px; } .prose p:last-child{ margin-bottom: 0; } .prose h2{ font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 16px; } .prose h3{ font-size: 19px; margin: 0 0 10px; } .check-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin-top: 8px; } .check-item{ display: flex; align-items: flex-start; gap: 12px; color: var(--text-dim); font-size: 15px; line-height: 1.5; } .check-item svg{ flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ok); } .steps-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; } .step-card{ padding: 26px 22px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border-soft); } .step-num{ font-family: var(--font-mono); font-size: 13px; color: var(--accent-2); letter-spacing: .06em; } .step-card h3{ font-size: 16.5px; margin: 10px 0 8px; } .step-card p{ color: var(--text-dim); font-size: 14px; margin: 0; } .fact-row{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .fact-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; color: var(--text-dim); } .fact-chip svg{ width: 16px; height: 16px; color: var(--ok); flex: none; } .faq-list{ max-width: 760px; display: flex; flex-direction: column; gap: 12px; } .faq-item{ border: 1px solid var(--border-soft); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; } .faq-item summary{ list-style: none; cursor: pointer; padding: 18px 50px 18px 22px; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--text); position: relative; -webkit-tap-highlight-color: transparent; } .faq-item summary::-webkit-details-marker{ display: none; } .faq-item summary::after{ content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--accent-2); font-family: var(--font-body); transition: transform .25s var(--ease); } .faq-item[open] summary::after{ transform: translateY(-50%) rotate(45deg); } .faq-item .faq-a{ padding: 0 22px 20px; color: var(--text-dim); font-size: 15px; line-height: 1.6; } .related-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; } .related-card{ display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border-soft); transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .related-card:hover{ transform: translateY(-3px); border-color: var(--border); background: var(--surface-2); } .related-card img{ width: 40px; height: 40px; flex: none; } .related-card span{ font-size: 14.5px; font-weight: 700; color: var(--text); } .hub-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 8px; } .hub-card{ display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border-soft); transition: transform .25s var(--ease), border-color .25s var(--ease); } .hub-card:hover{ transform: translateY(-4px); border-color: var(--border); } .hub-card .svc-icon{ margin-bottom: 2px; } .hub-card h3{ font-size: 18px; } .hub-card p{ color: var(--text-dim); font-size: 14px; flex: 1; } .hub-card .svc-link{ margin-top: 4px; } .zone-list-block{ margin-top: 10px; } .zone-list-block h3{ display:flex; align-items:center; gap:10px; font-size: 17px; margin-bottom: 16px; } .zone-list-block h3 svg{ width: 18px; height: 18px; color: var(--accent-2); } .about-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } .about-list{ display: flex; flex-direction: column; gap: 18px; margin-top: 24px; } .about-list-item{ display: flex; gap: 14px; } .about-list-item .ico{ flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border-soft); } .about-list-item .ico svg{ width: 19px; height: 19px; color: var(--accent-2); } .about-list-item h4{ font-size: 15.5px; margin: 0 0 4px; } .about-list-item p{ color: var(--text-dim); font-size: 14px; margin: 0; } .contacts-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; } .contact-card{ padding: 28px 26px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border-soft); } .contact-card h3{ font-size: 16px; margin-bottom: 14px; display:flex; align-items:center; gap: 10px; } .contact-card h3 svg{ width: 18px; height: 18px; color: var(--accent-2); } .contact-card .big-phone{ font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--text); } .contact-card p{ color: var(--text-dim); font-size: 14.5px; margin-top: 8px; } .contact-msg-row{ display: flex; gap: 10px; margin-top: 16px; } .legal-content{ max-width: 820px; } .legal-content h2{ font-size: 22px; margin: 36px 0 12px; } .legal-content h2:first-child{ margin-top: 0; } .legal-content p, .legal-content li{ color: var(--text-dim); font-size: 15px; line-height: 1.7; margin-bottom: 10px; } .legal-content ul{ padding-left: 20px; list-style: disc; } .legal-content ol{ padding-left: 20px; list-style: decimal; } .legal-content .updated{ color: var(--text-faint); font-size: 13px; margin-bottom: 30px; } .error-page{ text-align: center; padding: 90px 0 110px; } .error-page .code{ font-family: var(--font-display); font-size: clamp(70px, 16vw, 150px); font-weight: 800; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .error-page h1{ font-size: clamp(22px, 3vw, 30px); margin-top: 12px; } .error-page p{ color: var(--text-dim); margin-top: 12px; } .error-page .btn{ margin-top: 26px; } .error-links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top: 22px; } .reviews-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; } .reviews-note{ margin-top: 28px; padding: 18px 22px; border-radius: var(--radius-m); border: 1px dashed var(--border); color: var(--text-faint); font-size: 13.5px; } @media (max-width: 960px){ .about-grid{ grid-template-columns: 1fr; } .contacts-grid{ grid-template-columns: 1fr; } } @media (max-width: 720px){ .check-grid{ grid-template-columns: 1fr; } .steps-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .steps-grid{ grid-template-columns: 1fr; } .page-hero{ padding: 14px 0 40px; } } .svc-actions{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border); } .svc-actions .svc-link{ margin-top: 0; padding-top: 0; border-top: none; } .svc-actions .svc-link.call{ color: var(--text-dim); font-weight: 600; } .mobile-nav:not(.is-open), .modal-overlay:not(.is-open){visibility:hidden;} .mobile-nav.is-open, .modal-overlay.is-open{visibility:visible;} .modal-overlay{overflow-y:auto;} @media(max-width:960px){ .hero-copy{order:0;} .hero-side{order:1;width:100%;max-width:420px;} .hero-card{max-height:260px;aspect-ratio:16/9;} .hero-card img{height:100%;} } @media(max-width:480px){ .hero{padding-top:24px;} .hero-copy h1{font-size:32px;line-height:1.12;} .cookie-banner{padding:10px 12px;gap:8px;font-size:11px;} .cookie-banner p{font-size:11px;line-height:1.4;} .cookie-banner .btn{min-height:36px;height:36px;padding:0 14px;} }