/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
/* Remove tap highlight on iOS */
a, button, .cmode, .filter-btn { -webkit-tap-highlight-color: rgba(0,0,0,0); }
/* Fix iOS bounce on fixed header */
.hdr { -webkit-transform: translateZ(0); }
/* Prevent iOS rubber-band on body when menu is open */
body.mob-menu-open { position: fixed; width: 100%; overflow: hidden; }
/* Fix smoother scrolling on iOS */
body { -webkit-overflow-scrolling: touch; }
}
/* ========== TOKENS ========== */
:root{
--bg: #F4EEE4;
--bg-elev: #EBE3D4;
--bg-card: #FFFBF3;
--ink: #16110C;
--ink-dim: #5C5348;
--ink-mute: #908476;
--line: #D9CEBC;
--line-soft: #E8DFCE;
--accent: #8B5E3A;
--accent-bright: #C9926A;
--accent-deep: #5E3F25;
--danger: #C0392B;
--ok: #4C7B39;
--font-display: 'Fraunces', 'Noto Serif Georgian', Georgia, serif;
--font-body: 'DM Sans', 'Noto Sans Georgian', system-ui, sans-serif;
--ease: cubic-bezier(.22,1,.36,1);
--max: 1320px;
--pad: clamp(20px, 4vw, 56px);
}
/* Dark theme — applied when [data-theme="dark"] on */
html[data-theme="dark"]{
--bg: #0E0B08;
--bg-elev: #15110D;
--bg-card: #1A1511;
--ink: #F2E8D8;
--ink-dim: #A89B87;
--ink-mute: #6F6554;
--line: #2A2420;
--line-soft: #1E1A16;
--accent: #D0A078;
--accent-bright: #E6BD96;
--accent-deep: #8B5E3A;
--danger: #E07B6B;
--ok: #7AB06A;
}
html[data-theme="dark"] body::before{
mix-blend-mode: screen; opacity: .35;
background-image: url("data:image/svg+xml;utf8,");
}
html[data-theme="dark"] .hero-bg{
background:
radial-gradient(ellipse at 70% 20%, rgba(208,160,120,.13), transparent 55%),
radial-gradient(ellipse at 20% 85%, rgba(139,94,58,.2), transparent 55%),
linear-gradient(180deg, #0E0B08 0%, #15110D 50%, #1A1511 100%);
}
html[data-theme="dark"] .hero-bg::before{
background-image:
linear-gradient(90deg, transparent 49.8%, rgba(208,160,120,.06) 50%, transparent 50.2%),
linear-gradient(180deg, transparent 49.8%, rgba(208,160,120,.04) 50%, transparent 50.2%);
}
html[data-theme="dark"] meta[name="theme-color"]{ /* handled via JS */ }
/* Theme toggle button */
.theme-toggle{
width: 38px; height: 38px; border-radius: 99px;
border: 1px solid var(--line);
display: grid; place-items: center;
color: var(--ink-dim); flex-shrink: 0;
transition: all .3s var(--ease);
background: transparent;
}
.theme-toggle:hover{ color: var(--ink); border-color: var(--ink-mute); }
.theme-toggle .theme-icon-dark{ display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-light{ display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark{ display: block; }
@media(max-width:900px){
.theme-toggle{ width: 36px; height: 36px; }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; scroll-padding-top: 84px}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:var(--font-body);
font-size:16px; line-height:1.55;
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
/* ========== GRAIN + AMBIENT ========== */
body::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply; opacity:.5;
}
/* ========== HEADER ========== */
.hdr{
position:fixed; top:0; left:0; right:0; z-index:50;
padding:18px var(--pad);
display:flex; align-items:center; gap:24px;
background: linear-gradient(180deg, rgba(244,238,228,.94), rgba(244,238,228,.7));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom:1px solid transparent;
transition: border-color .4s var(--ease), padding .4s var(--ease);
}
.hdr.scrolled{ border-bottom-color: var(--line); padding-top:12px; padding-bottom:12px }
html[data-theme="dark"] .hdr{
background: linear-gradient(180deg, rgba(14,11,8,.94), rgba(14,11,8,.7));
}
.logo{
font-family:var(--font-display); font-weight:600;
font-size:22px; letter-spacing:-.02em;
font-style:italic;
}
.logo em{ color:var(--accent); font-style:normal }
.nav{
display:flex; gap:28px; margin-left:auto;
font-size:14px; font-weight:400; letter-spacing:.02em;
}
.nav a{
position:relative; color:var(--ink-dim); transition:color .3s;
}
.nav a:hover{ color:var(--ink) }
.nav a::after{
content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
background:var(--accent); transform:scaleX(0); transform-origin:left;
transition:transform .4s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1) }
.lang{
display:flex; gap:2px; align-items:center;
font-size:12px; letter-spacing:.08em; text-transform:uppercase;
border:1px solid var(--line); border-radius:99px; padding:4px; margin-left:12px;
}
.lang button, .lang a{
text-decoration:none; color:inherit;
padding:6px 10px; border-radius:99px;
color:var(--ink-mute); transition:all .3s;
}
.lang button.on, .lang a.on{ background:var(--ink); color:var(--bg); font-weight:600 }
.hdr .cta-sm{
padding:10px 18px; background:var(--ink); color:var(--bg);
border-radius:99px; font-weight:500; font-size:13px;
letter-spacing:.04em; transition:transform .3s var(--ease);
}
.hdr .cta-sm:hover{ transform: translateY(-2px) }
.burger{ display:none; width:28px; height:28px; flex-direction:column; justify-content:center; gap:5px; margin-left:auto }
.burger span{ height:1.5px; background:var(--ink); transition:all .3s }
@media(max-width:900px){
.nav, .hdr .cta-sm{ display:none }
.burger{ display:flex }
.lang{ margin-left:auto }
}
/* Mobile narrow screens — tighten header so everything fits */
@media(max-width:480px){
.hdr{ gap:6px; padding-left:10px; padding-right:10px; }
.logo{ font-size:17px; }
.theme-toggle{ width:30px; height:30px; }
.lang{ padding:2px; gap:0; margin-left:auto; }
.lang a, .lang button{ padding:4px 6px; font-size:10px; letter-spacing:.04em; }
.hdr-phone-mobile,
.hdr-calc-mobile{ width:30px; height:30px; margin-left:0; }
.hdr-phone-mobile svg, .hdr-calc-mobile svg{ width:14px; height:14px; }
.burger{ width:22px; height:22px; margin-left:4px; }
}
@media(max-width:380px){
.hdr{ gap:4px; padding-left:8px; padding-right:8px; }
.logo{ font-size:15px; }
.theme-toggle{ width:28px; height:28px; }
.lang a, .lang button{ padding:3px 5px; font-size:9px; }
.hdr-phone-mobile,
.hdr-calc-mobile{ width:28px; height:28px; }
}
/* ========== HERO ========== */
.hero{
position:relative; min-height:100vh; min-height:100svh;
padding: 160px var(--pad) 100px;
display:grid; align-items:end;
overflow:hidden;
}
.hero-bg{
position:absolute; inset:0; z-index:0;
background:
radial-gradient(ellipse at 70% 20%, rgba(201,146,106,.18), transparent 55%),
radial-gradient(ellipse at 20% 85%, rgba(139,94,58,.1), transparent 55%),
linear-gradient(180deg, #F4EEE4 0%, #EFE6D5 50%, #E8DFCE 100%);
}
/* faux timelapse — animated ceiling pattern */
.hero-bg::before{
content:""; position:absolute; inset:0;
background-image:
linear-gradient(90deg, transparent 49.8%, rgba(22,17,12,.05) 50%, transparent 50.2%),
linear-gradient(180deg, transparent 49.8%, rgba(22,17,12,.04) 50%, transparent 50.2%);
background-size: 80px 80px, 80px 80px;
animation: drift 20s linear infinite;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
@keyframes drift{
to{ background-position: 80px 80px, 80px 80px }
}
.hero-bg::after{
content:""; position:absolute; top:8%; right:-10%; width:65%; aspect-ratio:1;
background: radial-gradient(circle, rgba(201,146,106,.4), transparent 60%);
filter: blur(80px);
animation: glow 8s ease-in-out infinite alternate;
}
@keyframes glow{
to{ transform: translate(-30px, 20px) scale(1.1); opacity:.65 }
}
.hero-inner{
position:relative; z-index:2; max-width:var(--max); margin:0 auto; width:100%;
display:grid; grid-template-columns: 1.1fr .9fr; gap:80px; align-items:end;
}
@media(max-width:900px){ .hero-inner{ grid-template-columns:1fr; gap:48px } }
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-size:12px; letter-spacing:.22em; text-transform:uppercase;
color:var(--accent); margin-bottom:36px;
}
.eyebrow::before{
content:""; width:36px; height:1px; background:var(--accent);
}
.h1{
font-family:var(--font-display); font-weight:300;
font-size: clamp(48px, 7.6vw, 116px);
line-height:.95; letter-spacing:-.035em;
margin:0 0 36px; color:var(--ink);
}
.h1 em{
font-style:italic; font-weight:400; color:var(--accent);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
.lead{
font-size: clamp(16px, 1.4vw, 19px);
color:var(--ink-dim); max-width:46ch; margin:0 0 48px;
line-height:1.6;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap }
.btn{
display:inline-flex; align-items:center; gap:14px;
padding:18px 28px; border-radius:99px;
font-size:15px; font-weight:500; letter-spacing:.01em;
transition: all .4s var(--ease);
white-space:nowrap;
}
.btn-primary{
background:var(--accent); color:#FFFBF3;
}
.btn-primary:hover{ background:var(--accent-deep); color:var(--bg-card); transform:translateY(-3px); box-shadow: 0 20px 40px -10px rgba(139,94,58,.4) }
.btn-ghost{
border:1px solid var(--line); color:var(--ink);
}
.btn-ghost:hover{ border-color:var(--ink); background:rgba(22,17,12,.05) }
.btn .arrow{ transition:transform .4s var(--ease) }
.btn:hover .arrow{ transform: translateX(4px) }
/* Hero side stats block */
.hero-side{
display:grid; gap:40px;
padding-bottom:20px;
}
.stat{
border-top: 1px solid var(--line);
padding-top:20px;
}
.stat .big{
font-family:var(--font-display); font-weight:300;
font-size:clamp(48px, 5vw, 72px); line-height:1;
letter-spacing:-.03em; color:var(--ink);
display:flex; align-items:baseline; gap:4px;
}
.stat .big em{ font-style:italic; color:var(--accent); font-size:.55em; font-weight:400; letter-spacing:-.01em }
.stat .label{
margin-top:8px; font-size:13px; color:var(--ink-dim);
letter-spacing:.02em;
}
.hero-marquee{
position:absolute; left:0; right:0; bottom:24px;
z-index:1; overflow:hidden;
border-top:1px solid var(--line-soft);
padding-top:22px;
}
.hero-marquee-track{
display:flex; gap:60px; animation: marq 45s linear infinite;
font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute);
white-space:nowrap;
}
.hero-marquee-track span{ display:inline-flex; align-items:center; gap:60px }
.hero-marquee-track span::after{ content:"✦"; color:var(--accent) }
.hero-marquee-track .mq-brand{
color: inherit; text-decoration: none;
position: relative; padding: 4px 2px;
cursor: pointer;
pointer-events: auto;
transition: color .25s ease;
}
.hero-marquee-track .mq-brand:hover{
color: var(--accent);
}
.hero-marquee-track .mq-brand::after{ content: "✦"; color:var(--accent); margin-left: 60px; }
.hero-marquee-track .mq-brand:last-child::after{ content: "✦"; color:var(--accent); margin-left: 60px; }
.hero-marquee:hover{ animation-play-state: paused; }
.hero-marquee:hover .hero-marquee-track{ animation-play-state: paused; }
@keyframes marq{
to{ transform: translateX(-50%) }
}
/* ========== HERO VIDEO + FACTS ========== */
.hero-video{
position:relative; align-self:start;
display:flex; justify-content:center;
padding-top:8px;
}
.hero-video-frame{
position:relative; width:100%; max-width:380px;
aspect-ratio: 9 / 16;
border-radius:32px; overflow:hidden;
background:var(--ink);
border:1px solid var(--line);
box-shadow:
0 40px 80px -25px rgba(22,17,12,.35),
0 18px 40px -20px rgba(139,94,58,.25),
inset 0 0 0 1px rgba(255,251,243,.04);
transform: translateZ(0);
}
.hero-video-frame::before{
/* warm copper edge glow */
content:""; position:absolute; inset:0; border-radius:inherit;
padding:1px; pointer-events:none; z-index:2;
background: linear-gradient(155deg, rgba(201,146,106,.55), rgba(139,94,58,0) 45%, rgba(201,146,106,.35));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.hero-video-el{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block;
}
.hero-video-tag{
position:absolute; left:14px; bottom:14px; z-index:3;
display:inline-flex; align-items:center; gap:8px;
padding:6px 12px 6px 10px;
background: rgba(22,17,12,.55);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius:99px;
font-size:11px; letter-spacing:.14em; text-transform:uppercase;
color:#FFFBF3;
border:1px solid rgba(255,251,243,.12);
}
.hero-video-tag .dot{
width:6px; height:6px; border-radius:50%;
background:#E84B3C;
animation: liveDot 1.8s ease-out infinite;
}
@keyframes liveDot{
0%{ box-shadow: 0 0 0 0 rgba(232,75,60,.6) }
70%{ box-shadow: 0 0 0 10px rgba(232,75,60,0) }
100%{ box-shadow: 0 0 0 0 rgba(232,75,60,0) }
}
/* compact facts strip in left column */
.hero-facts{
display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
border-top:1px solid var(--line);
margin-top:32px;
}
.hero-fact{
padding:18px 16px 4px 0;
border-right:1px solid var(--line);
}
.hero-fact:last-child{ border-right:none; padding-right:0 }
.hero-fact:not(:first-child){ padding-left:16px }
.hero-fact-num{
font-family:var(--font-display); font-weight:300;
font-size:clamp(26px, 2.4vw, 36px); line-height:1;
letter-spacing:-.02em; color:var(--ink);
display:flex; align-items:baseline; gap:4px;
}
.hero-fact-num em{
font-style:italic; color:var(--accent);
font-size:.5em; font-weight:400; letter-spacing:-.01em;
}
.hero-fact-lbl{
margin-top:6px;
font-size:11px; line-height:1.35;
color:var(--ink-dim);
letter-spacing:.02em;
}
/* ========== SECTION BASE ========== */
.sec{
padding: clamp(80px, 10vw, 140px) var(--pad);
position:relative;
}
.sec-inner{ max-width:var(--max); margin:0 auto }
.sec-head{
display:grid; grid-template-columns: 1fr 1fr; gap:80px;
align-items:end; margin-bottom:72px;
}
@media(max-width:900px){ .sec-head{ grid-template-columns:1fr; gap:24px; margin-bottom:48px } }
.sec-num{
font-family:var(--font-display); font-style:italic; font-weight:300;
font-size:14px; color:var(--accent);
display:flex; align-items:center; gap:12px; margin-bottom:16px;
letter-spacing:.05em;
}
.sec-num::before{ content:""; width:24px; height:1px; background:var(--accent) }
.sec-title{
font-family:var(--font-display); font-weight:300;
font-size: clamp(36px, 5vw, 68px); line-height:1; letter-spacing:-.025em;
margin:0; color:var(--ink);
}
.sec-title em{ font-style:italic; color:var(--accent); font-weight:400 }
.sec-desc{
font-size:16px; color:var(--ink-dim); max-width:44ch; margin:0;
}
/* ========== CATEGORIES ========== */
.cats{ background: linear-gradient(180deg, var(--bg), var(--bg-elev)) }
.cats-grid{
display:grid; grid-template-columns: repeat(2, 1fr); gap:2px;
background:var(--line);
border:1px solid var(--line);
}
@media(max-width:500px){ .cats-grid{ grid-template-columns: 1fr } }
.cat{
position:relative; background:var(--bg);
padding:44px 36px 40px;
overflow:hidden;
transition: background .5s var(--ease);
aspect-ratio: 4/3.5;
display:flex; flex-direction:column; justify-content:space-between;
}
.cat:hover{ background:var(--bg-card) }
.cat-visual{
position:absolute; inset:0; opacity:.18; transition:opacity .6s var(--ease);
pointer-events:none;
}
.cat:hover .cat-visual{ opacity:.35 }
/* svg fills built per category inline */
/* Photo-based visuals (real product images) — higher opacity + desaturation
so text stays readable but the photo is recognizable */
.cat-visual:has(img){ opacity:.55 }
.cat:hover .cat-visual:has(img){ opacity:.85 }
.cat-visual img{ filter: saturate(.85) contrast(1.02); }
.cat-kind{
font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:var(--ink-mute); position:relative;
}
.cat-name{
font-family:var(--font-display); font-weight:350;
font-size: clamp(28px, 2.8vw, 42px); line-height:1;
letter-spacing:-.02em; color:var(--ink);
margin:8px 0 auto; position:relative;
}
.cat-name em{ font-style:italic; color:var(--accent) }
.cat-bottom{
display:flex; justify-content:space-between; align-items:end;
gap:20px; position:relative; margin-top:24px;
}
.cat-price{
font-size:13px; color:var(--ink-dim);
}
.cat-price b{ color:var(--ink); font-weight:600; font-size:15px }
.cat-link{
width:38px; height:38px; border-radius:50%;
border:1px solid var(--line);
display:grid; place-items:center;
transition: all .4s var(--ease);
}
.cat:hover .cat-link{ background:var(--accent-bright); border-color:var(--accent-bright); transform: rotate(-45deg) }
.cat:hover .cat-link svg{ color:var(--ink) }
/* ========== FAQ TOGGLE ========== */
function toggleFaq(btn) {
const item = btn.closest('.faq-item');
const isOpen = item.classList.contains('open');
// закрыть все
document.querySelectorAll('.faq-item.open').forEach(el => {
el.classList.remove('open');
const a = el.querySelector('.faq-a');
if(a) a.style.maxHeight = '0';
});
if(!isOpen) {
item.classList.add('open');
const answerEl = item.querySelector('.faq-a');
if(answerEl) answerEl.style.maxHeight = answerEl.scrollHeight + 'px';
}
}
/* ========== CALCULATOR ========== */
.calc{
background: linear-gradient(180deg, var(--bg-elev), var(--bg));
}
.calc-wrap{
background: var(--bg-card);
border:1px solid var(--line);
border-radius:24px;
overflow:hidden;
display:grid; grid-template-columns: 1.4fr 1fr;
position:relative;
box-shadow: 0 30px 60px -20px rgba(139,94,58,.18);
}
.calc-mode-switch{
display:inline-flex; gap:4px; padding:5px;
background: var(--bg-card);
border:1px solid var(--line);
border-radius:99px;
margin-bottom:28px;
box-shadow: 0 10px 30px -15px rgba(139,94,58,.2);
}
/* Minimal heading above calc toggle */
.calc-mini-head{
margin-bottom: 18px;
}
.calc-mini-head .sec-num{
font-family: var(--font-display);
font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
color: var(--accent); font-weight: 500;
}
/* Description block moved below calculator */
.sec-head-below{
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--line);
}
@media(max-width:900px){
.sec-head-below{ margin-top: 40px; padding-top: 24px; }
}
.cmode{
display:flex; flex-direction:column; align-items:flex-start;
padding:12px 26px; border-radius:99px;
transition: all .35s var(--ease);
color: var(--ink-dim);
min-width:140px;
}
.cmode:hover{ color: var(--ink) }
.cmode.on{
background: var(--ink); color: var(--bg);
}
.cmode-label{
font-family: var(--font-display); font-size:17px; font-weight:400;
line-height:1;
}
.cmode-sub{
font-size:11px; letter-spacing:.08em; margin-top:4px;
opacity:.7;
}
@media(max-width:560px){
.calc-mode-switch{ width:100%; }
.cmode{ flex:1; min-width:0; padding:10px 16px; align-items:center; }
.cmode-label{ font-size:15px }
}
@media(max-width:900px){
/* Reorder calculator on mobile: inputs first, then price preview, inside card */
.calc-wrap{
grid-template-columns:1fr;
}
.calc-left{ order: 1; }
.calc-right{ order: 2; }
.calc-mode-switch{ align-self: center; margin: 0 auto 20px; }
}
.calc-left{ padding: clamp(32px, 4vw, 56px) }
.calc-step-indicator{
display:flex; gap:6px; margin-bottom:32px;
}
.calc-step-indicator .dot{
flex:1; height:3px; background:var(--line); border-radius:2px;
transition: background .4s var(--ease);
}
.calc-step-indicator .dot.active{ background:var(--accent) }
.calc-step-indicator .dot.done{ background:var(--accent-deep) }
.calc-step-label{
font-size:12px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-mute); margin-bottom:14px;
}
.calc-q{
font-family:var(--font-display); font-weight:300;
font-size: clamp(28px, 3.2vw, 42px); line-height:1.05;
margin:0 0 32px; letter-spacing:-.02em;
}
.calc-q em{ font-style:italic; color:var(--accent) }
.opt-grid{
display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap:10px; margin-bottom:32px;
}
.opt{
border:1px solid var(--line); border-radius:12px;
padding:16px 18px; text-align:left; font-size:14px;
transition: all .3s var(--ease); color:var(--ink-dim);
background:var(--bg);
}
.opt:hover{ border-color:var(--ink-mute); color:var(--ink); background:var(--bg-card) }
.opt.sel{
border-color:var(--accent); background:rgba(201,146,106,.12);
color:var(--ink);
}
.opt-sub{
display:block; font-size:12px; color:var(--ink-mute); margin-top:4px;
}
.field{ display:block; margin-bottom:24px }
.field label{
font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-mute); display:block; margin-bottom:10px;
}
.inp{
width:100%; padding:18px 20px; background:var(--bg);
border:1px solid var(--line); border-radius:12px;
font-size:16px; color:var(--ink);
transition: border-color .3s;
}
.inp:focus{ outline:none; border-color:var(--accent) }
.field-err{
font-size:12px; color: var(--danger); margin-top:6px; min-height:0;
line-height:1.4; letter-spacing:.005em;
transition: min-height .3s var(--ease);
}
.field-err:not(:empty){ min-height: 16px; margin-top:6px; }
.field.has-error .inp,
.field.has-error select.inp{
border-color: var(--danger);
background: rgba(192,57,43,.04);
}
.field.has-error label{ color: var(--danger) }
.check-err:not(:empty){ margin: -4px 0 12px 26px; }
.check.has-error span{ color: var(--danger) }
.check.has-error input{ accent-color: var(--danger) }
.field-row{ display:grid; grid-template-columns: 1.1fr 1fr; gap:14px }
.field-row .field input.inp,
.field-row .field select.inp{ min-width: 0 }
/* lead form: phone gets noticeably more room than city */
.lead-form .field-row{ grid-template-columns: 2.3fr 1fr }
@media(max-width:680px){
.field-row{ grid-template-columns:1fr }
.lead-form .field-row{ grid-template-columns:1fr }
}
.stepper{
display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line);
border-radius:12px; overflow:hidden; background:var(--bg);
}
.stepper button{
width:52px; height:52px; color:var(--ink-dim); font-size:20px;
transition:color .3s, background .3s;
}
.stepper button:hover{ color:var(--accent); background:var(--bg-elev) }
.stepper .val{
min-width:60px; text-align:center; font-variant-numeric: tabular-nums;
font-size:17px;
}
.calc-nav{
display:flex; justify-content:space-between; align-items:center;
margin-top:36px; gap:16px; flex-wrap:wrap;
}
/* --- Simple calc UI --- */
.dim-input{
position:relative; display:flex; align-items:center;
}
.dim-input .inp{ padding-right:50px; }
.dim-suffix{
position:absolute; right:18px; top:50%; transform:translateY(-50%);
font-size:13px; color:var(--ink-mute); letter-spacing:.08em;
text-transform:uppercase; pointer-events:none;
}
.area-readout{
display:flex; justify-content:space-between; align-items:baseline;
gap:20px; padding:20px 24px; margin-bottom:32px;
background: var(--bg-elev); border:1px solid var(--line);
border-radius:12px;
}
.area-readout-label{
font-size:12px; letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-mute);
}
.area-readout-val{
font-family:var(--font-display); font-weight:400; font-size:34px;
line-height:1; letter-spacing:-.02em; color:var(--accent);
font-style:italic;
}
.area-readout-val span{
font-size:14px; font-style:normal; color:var(--ink-mute); margin-left:4px;
letter-spacing:.05em;
}
.simple-subq{
font-family:var(--font-display); font-weight:300;
font-size:24px; margin:0 0 16px; letter-spacing:-.015em;
}
.simple-subq em{ font-style:italic; color:var(--accent) }
.mat-grid{
display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:24px;
}
@media(max-width:600px){ .mat-grid{ grid-template-columns: 1fr } }
.mat-opt{
text-align:left; padding:16px 18px;
border:1px solid var(--line); border-radius:12px;
background: var(--bg);
transition: all .3s var(--ease);
color: var(--ink-dim);
}
.mat-opt:hover{ border-color:var(--ink-mute); color:var(--ink); background:var(--bg-card) }
.mat-opt.sel{
border-color:var(--accent); background:rgba(201,146,106,.12); color:var(--ink);
}
.mat-opt-top{
display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.mat-name{
font-family:var(--font-display); font-weight:400; font-size:18px;
letter-spacing:-.01em;
}
.mat-price{
font-variant-numeric: tabular-nums; font-weight:500;
color:var(--accent);
}
.mat-opt-sub{
font-size:11px; letter-spacing:.1em; text-transform:uppercase;
color:var(--ink-mute); margin-top:4px;
}
.calc-back{
font-size:14px; color:var(--ink-mute); display:inline-flex; align-items:center; gap:8px;
transition:color .3s;
}
.calc-back:hover{ color:var(--ink) }
.calc-back.hidden{ visibility:hidden }
/* right side: live price */
.calc-right{
background: linear-gradient(180deg, rgba(201,146,106,.08), rgba(139,94,58,.12));
border-left: 1px solid var(--line);
padding: clamp(32px, 4vw, 56px);
position:sticky; top:0; align-self:stretch;
display:flex; flex-direction:column; justify-content:space-between;
}
@media(max-width:900px){ .calc-right{ border-left:0; border-bottom:1px solid var(--line); position:static } }
.price-label{
font-size:12px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-mute); margin-bottom:16px;
}
.price-range{
font-family:var(--font-display); font-weight:300;
font-size:clamp(36px, 4vw, 56px); line-height:1; letter-spacing:-.025em;
}
.price-range em{ font-style:italic; color:var(--accent); font-weight:400 }
.price-mid{
font-family:var(--font-display); font-style:italic;
font-size:clamp(56px, 6vw, 88px); line-height:1; letter-spacing:-.035em;
margin:8px 0; color:var(--accent); font-weight:400;
}
.price-mid sup{ font-size:.35em; vertical-align:super; margin-left:6px; color:var(--ink-dim); font-weight:500; font-style:normal }
.currency-switch{
display:inline-flex; gap:0; border:1px solid var(--line); border-radius:99px; padding:3px;
margin:20px 0; font-size:12px;
}
.currency-switch button{
padding:7px 14px; border-radius:99px; color:var(--ink-mute); transition:all .3s;
letter-spacing:.06em;
}
.currency-switch button.on{ background:var(--ink); color:var(--bg) }
.breakdown{
border-top:1px solid var(--line); padding-top:24px; margin-top:24px;
font-size:13px;
}
.breakdown-row{
display:flex; justify-content:space-between; padding:6px 0;
color:var(--ink-dim);
}
.breakdown-row b{ color:var(--ink); font-weight:500; font-variant-numeric: tabular-nums }
.disclaimer{
font-size:12px; color:var(--ink-mute); margin-top:24px;
line-height:1.5; border-left:2px solid var(--accent); padding-left:12px;
}
.warning{
background: rgba(192,57,43,.08);
border:1px solid rgba(192,57,43,.3);
color: var(--danger);
padding:14px 16px; border-radius:12px;
font-size:14px; margin-top:16px;
}
/* ========== WHY US ========== */
.why-grid{
display:grid; grid-template-columns: repeat(4, 1fr); gap:1px;
background:var(--line); border:1px solid var(--line);
}
@media(max-width:900px){ .why-grid{ grid-template-columns: repeat(2,1fr) } }
@media(max-width:500px){ .why-grid{ grid-template-columns: 1fr } }
.why{
padding:44px 32px; background:var(--bg);
transition: background .4s;
}
.why:hover{ background:var(--bg-elev) }
.why-num{
font-family:var(--font-display); font-style:italic; font-weight:300;
font-size:68px; line-height:1; color:var(--accent);
letter-spacing:-.03em;
}
.why-title{
font-family:var(--font-display); font-weight:400;
font-size:22px; line-height:1.2; letter-spacing:-.01em;
margin:28px 0 12px;
}
.why-desc{
font-size:14px; color:var(--ink-dim); line-height:1.6; margin:0;
}
/* ========== PROCESS ========== */
.process{ background: var(--bg-elev) }
.proc-track{
display:grid; grid-template-columns: repeat(5, 1fr); gap:2px;
position:relative; margin-top:24px;
}
@media(max-width:900px){ .proc-track{ grid-template-columns: 1fr; gap:0 } }
.proc-step{
position:relative; padding:32px 24px 32px 0;
border-top:1px solid var(--line);
}
@media(max-width:900px){
.proc-step{ padding:24px 0; border-top:1px solid var(--line) }
.proc-step:last-child{ border-bottom:1px solid var(--line) }
}
.proc-step::before{
content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
background: var(--accent); transform: scaleX(0); transform-origin:left;
transition: transform .8s var(--ease);
}
.proc-step:hover::before{ transform: scaleX(1) }
.proc-num{
font-family:var(--font-display); font-style:italic;
font-size:14px; color:var(--accent); margin-bottom:20px;
}
.proc-title{
font-family:var(--font-display); font-weight:350;
font-size:24px; line-height:1.15; letter-spacing:-.01em;
margin:0 0 8px;
}
.proc-desc{ font-size:13px; color:var(--ink-dim); margin:0; line-height:1.55 }
/* ========== PORTFOLIO ========== */
.port-filters{
display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px;
}
.chip{
padding:8px 16px; border:1px solid var(--line); border-radius:99px;
font-size:13px; color:var(--ink-dim); transition:all .3s;
background:var(--bg-card);
}
.chip:hover{ border-color:var(--ink-mute); color:var(--ink) }
.chip.on{
background:var(--ink); color:var(--bg); border-color:var(--ink);
}
.port-grid{
display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
@media(max-width:900px){ .port-grid{ grid-template-columns: repeat(2,1fr) } }
@media(max-width:560px){ .port-grid{ grid-template-columns: 1fr } }
.card{
position:relative; overflow:hidden; border-radius:14px;
aspect-ratio: 4/5; cursor:pointer;
border:1px solid var(--line);
}
.card-visual{
position:absolute; inset:0; transition: transform .8s var(--ease);
background: var(--bg-card);
}
.card-visual img{
width:100%; height:100%; object-fit:cover; object-position:center;
display:block;
}
.card:hover .card-visual{ transform: scale(1.06) }
.card-overlay{
position:absolute; inset:0;
background: linear-gradient(180deg, transparent 40%, rgba(22,17,12,.88) 100%);
display:flex; flex-direction:column; justify-content:flex-end;
padding:24px 24px 22px;
color: #F4EEE4;
}
.card-tag{
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--accent-bright); margin-bottom:8px;
}
.card-title{
font-family:var(--font-display); font-weight:400;
font-size:22px; line-height:1.15; letter-spacing:-.01em;
margin:0 0 6px;
}
.card-meta{
font-size:13px; color:var(--ink-dim);
display:flex; gap:12px; flex-wrap:wrap;
}
.card.hidden{ display:none }
/* ========== REVIEWS ========== */
.reviews{ background:var(--bg-elev) }
.rev-grid{
display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
@media(max-width:900px){ .rev-grid{ grid-template-columns: 1fr } }
.rev{
background:var(--bg-card); border:1px solid var(--line);
padding:36px 32px; border-radius:16px;
position:relative;
}
.rev-stars{ color:var(--accent); font-size:16px; letter-spacing:3px; margin-bottom:18px }
.rev-text{
font-family:var(--font-display); font-weight:350;
font-size:18px; line-height:1.45; letter-spacing:-.005em;
margin:0 0 24px;
}
.rev-author{
display:flex; align-items:center; gap:12px; font-size:14px;
padding-top:20px; border-top:1px solid var(--line);
}
.rev-avatar{
width:40px; height:40px; border-radius:50%;
background: linear-gradient(135deg, var(--accent), var(--accent-bright));
display:grid; place-items:center; font-weight:600; color:var(--bg);
font-size:14px;
}
.rev-name b{ display:block; color:var(--ink) }
.rev-name span{ color:var(--ink-mute); font-size:12px }
/* ========== FAQ ========== */
.faq-list{ max-width:800px; margin:0 auto }
.faq-item{
border-bottom:1px solid var(--line);
}
.faq-q{
width:100%; padding:28px 0; text-align:left;
display:flex; justify-content:space-between; align-items:center; gap:24px;
font-family:var(--font-display); font-weight:400; font-size:22px;
line-height:1.25; letter-spacing:-.01em;
transition: color .3s;
}
.faq-q:hover{ color:var(--accent) }
.faq-icon{
width:32px; height:32px; flex-shrink:0;
border:1px solid var(--line); border-radius:50%;
display:grid; place-items:center;
transition: all .4s var(--ease);
font-size:18px; color:var(--ink-dim);
}
.faq-item.open .faq-icon{ background:var(--accent-bright); border-color:var(--accent-bright); color:#16110C; transform: rotate(45deg) }
.faq-a{
overflow:hidden; max-height:0;
transition: max-height .5s var(--ease);
}
.faq-a-inner{
padding:0 0 28px; color:var(--ink-dim); font-size:15px; max-width:70ch;
line-height:1.65;
}
/* faq max-height управляется через JS scrollHeight */
/* ========== LEAD FORM ========== */
.lead-sec{
background: linear-gradient(180deg, var(--bg), var(--bg-elev));
}
.lead-wrap{
display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:center;
}
@media(max-width:1100px){ .lead-wrap{ grid-template-columns: 1fr 1.1fr; gap:48px } }
@media(max-width:900px){
.lead-wrap{ grid-template-columns: 1fr; gap:36px }
/* On mobile: form FIRST, description below */
.lead-wrap > .reveal:first-child{ order: 2; }
.lead-wrap > .lead-form{ order: 1; }
}
.lead-title{
font-family:var(--font-display); font-weight:300;
font-size: clamp(40px, 5.5vw, 76px); line-height:1; letter-spacing:-.03em;
margin:0 0 24px;
}
.lead-title em{ font-style:italic; color:var(--accent) }
.lead-sub{
font-size:17px; color:var(--ink-dim); max-width:44ch; line-height:1.55; margin:0 0 32px;
}
.lead-feats{ display:grid; gap:16px; margin-top:36px }
.lead-feat{
display:flex; align-items:flex-start; gap:14px;
font-size:14px; color:var(--ink-dim);
}
.lead-feat::before{
content:""; width:5px; height:5px; background:var(--accent); border-radius:50%;
margin-top:9px; flex-shrink:0;
}
.lead-form{
background:var(--bg-card); border:1px solid var(--line);
border-radius:20px; padding:48px 52px;
box-shadow: 0 20px 50px -20px rgba(139,94,58,.15);
width:900px; max-width:100%;
}
@media(max-width:900px){ .lead-form{ padding:40px } }
@media(max-width:600px){ .lead-form{ padding:28px } }
.lead-form h3{
font-family:var(--font-display); font-weight:400;
font-size:28px; margin:0 0 6px; letter-spacing:-.015em;
}
.lead-form .subt{ color:var(--ink-mute); font-size:14px; margin-bottom:24px }
.lead-form .check{
display:flex; gap:10px; align-items:flex-start; margin-top:20px;
font-size:12px; color:var(--ink-mute); line-height:1.5; cursor:pointer;
}
.lead-form .check input{ margin-top:2px; accent-color: var(--accent) }
.consent-link{
color: var(--ink-dim); text-decoration: underline;
text-decoration-color: var(--line);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .3s, text-decoration-color .3s;
}
.consent-link:hover{ color: var(--accent); text-decoration-color: var(--accent); }
.lead-form .btn{ width:100%; justify-content:center; margin-top:20px }
.thanks{
text-align:center; padding:20px 0;
display:none;
}
.thanks.show{ display:block }
.thanks-icon{
width:60px; height:60px; border-radius:50%;
background: var(--accent); color:var(--bg);
display:grid; place-items:center; margin:0 auto 20px;
font-size:28px;
}
.thanks h3{ margin-bottom:10px }
/* ========== CONTACTS / FOOTER ========== */
.foot{
padding: 80px var(--pad) 40px;
background: #1C1510;
color: #E4DCCB;
border-top:1px solid var(--line);
}
.foot-inner{ max-width:var(--max); margin:0 auto }
.foot-top{
display:grid; grid-template-columns: 1.8fr 1fr 1.8fr 1fr; gap:40px;
margin-bottom:60px;
}
@media(max-width:900px){ .foot-top{ grid-template-columns: 1fr 1fr; gap:32px } }
@media(max-width:560px){ .foot-top{ grid-template-columns: 1fr } }
.foot-col h4{
font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:#9A8F7E; margin:0 0 18px; font-weight:500;
}
.foot-col ul{ list-style:none; padding:0; margin:0 }
.foot-col li{ margin-bottom:10px; font-size:14px; color:#BDB3A1 }
.foot-col a{ color:#BDB3A1; transition:color .3s }
.foot-col a:hover{ color:var(--accent-bright) }
.foot-brand .logo{ font-size:26px; margin-bottom:16px; display:inline-block; color:#E4DCCB }
.foot-brand .logo em{ color:var(--accent-bright) }
.foot-brand p{ color:#9A8F7E; font-size:14px; max-width:32ch; line-height:1.55 }
.foot-bottom{
display:flex; justify-content:space-between; align-items:center; gap:24px;
flex-wrap:wrap;
padding-top:28px; border-top:1px solid #352B21;
font-size:12px; color:#9A8F7E;
}
.foot-bottom a{ color:#9A8F7E; transition:color .3s }
.foot-bottom a:hover{ color:var(--accent-bright) }
.foot-socials{ display:flex; gap:10px }
.foot-socials a{
width:36px; height:36px; border-radius:50%; border:1px solid #352B21;
display:grid; place-items:center; transition: all .3s;
color:#BDB3A1;
}
/* ========== SOCIAL BRAND COLORS ========== */
/* On hover, each social icon lights up in its official brand color.
Works across .hdr-socials, .mob-socials, .foot-socials via data-social attribute. */
/* Facebook — Meta Blue */
[data-social="facebook"]:hover{
background: #1877F2 !important; border-color: #1877F2 !important; color: #FFFFFF !important;
}
/* Instagram — official brand gradient */
[data-social="instagram"]:hover{
background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%) !important;
border-color: transparent !important;
color: #FFFFFF !important;
}
/* YouTube — Red */
[data-social="youtube"]:hover{
background: #FF0000 !important; border-color: #FF0000 !important; color: #FFFFFF !important;
}
/* Telegram — Blue */
[data-social="telegram"]:hover{
background: #229ED9 !important; border-color: #229ED9 !important; color: #FFFFFF !important;
}
/* Subtle lift + glow on hover, universal */
[data-social]{ transition: all .3s var(--ease) !important; }
[data-social]:hover{
transform: translateY(-2px);
box-shadow: 0 8px 20px -6px rgba(0,0,0,.18);
}
/* ========== FLOATING WA ========== */
.wa-float{
position:fixed; bottom:24px; right:24px; z-index:40;
width:58px; height:58px; border-radius:50%;
background:#25D366; color:white;
display:grid; place-items:center;
box-shadow: 0 14px 40px -10px rgba(37,211,102,.6);
transition: transform .3s var(--ease);
animation: pulse 2.4s ease-in-out infinite;
}
.wa-float:hover{ transform: scale(1.08) }
@keyframes pulse{
0%,100%{ box-shadow: 0 14px 40px -10px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.4) }
50%{ box-shadow: 0 14px 40px -10px rgba(37,211,102,.6), 0 0 0 14px rgba(37,211,102,0) }
}
/* ========== SCROLL REVEAL ========== */
/* Progressive enhancement: visible by default. JS adds .js-reveal to html when ready,
only then elements start hidden and animate in. Safer for old iOS Safari. */
.reveal{ opacity:1; transform:none; transition: opacity .8s var(--ease), transform .8s var(--ease) }
html.js-reveal .reveal{ opacity:0; transform: translateY(30px) }
html.js-reveal .reveal.in{ opacity:1; transform: none }
/* reduced motion */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
.reveal{ opacity:1; transform:none }
.hero-marquee-track{ animation: none !important }
.urgency-dot{ animation: none !important }
.wa-float{ animation: none !important }
.hero-bg::before, .hero-bg::after{ animation: none !important }
}
/* ====== HERO TRUST + URGENCY ====== */
.hero-trust {
display: flex; flex-wrap: wrap; gap: 16px;
margin-top: 24px; font-size: 13px; color: var(--ink-dim);
}
.hero-trust span {
display: inline-flex; align-items: center; gap: 6px;
}
.hero-trust span::before {
content: "✔"; color: var(--accent); font-size: 12px;
}
.hero-trust .stars::before { content: "★★★★★"; color: var(--accent); font-size: 12px; margin-right: 4px; }
.hero-urgency {
display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
background: rgba(76,123,57,.08); border: 1px solid rgba(76,123,57,.3);
border-radius: 99px; padding: 8px 18px;
font-size: 13px; color: #3E6330; font-weight: 500;
letter-spacing: .01em;
}
.urgency-dot {
width:8px; height:8px; border-radius:50%;
background: var(--ok);
box-shadow: 0 0 0 0 rgba(76,123,57,.6);
animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(76,123,57,.5); }
70% { box-shadow: 0 0 0 8px rgba(76,123,57,0); }
100% { box-shadow: 0 0 0 0 rgba(76,123,57,0); }
}
/* ====== PRICE GUARANTEE BLOCK (УБИЙЦА) ====== */
.price-guarantee {
background: var(--ink);
color: var(--bg);
padding: clamp(60px, 8vw, 100px) var(--pad);
}
.price-guarantee .sec-inner { max-width: var(--max); margin: 0 auto; }
.pg-title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(32px, 4vw, 56px); line-height: 1;
letter-spacing: -.025em; margin: 0 0 16px;
color: var(--bg);
}
.pg-title em { font-style: italic; color: var(--accent-bright); }
.pg-sub {
font-size: 16px; color: rgba(228,220,203,.65);
max-width: 52ch; margin: 0 0 56px; line-height: 1.6;
}
.pg-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: rgba(228,220,203,.15);
border: 1px solid rgba(228,220,203,.15); border-radius: 16px;
overflow: hidden;
}
@media(max-width:700px) { .pg-grid { grid-template-columns: 1fr; } }
.pg-item {
padding: 40px 36px; background: rgba(28,21,16,.6);
transition: background .3s;
}
.pg-item:hover { background: rgba(139,94,58,.15); }
.pg-item-icon {
font-size: 28px; margin-bottom: 16px;
}
.pg-item h3 {
font-family: var(--font-display); font-weight: 400;
font-size: 22px; line-height: 1.2; letter-spacing: -.01em;
color: var(--bg); margin: 0 0 8px;
}
.pg-item p {
font-size: 14px; color: rgba(228,220,203,.55);
margin: 0; line-height: 1.55;
}
.pg-item .pg-proof {
margin-top: 16px; font-size: 12px; letter-spacing: .08em;
text-transform: uppercase; color: var(--accent-bright);
}
/* ====== CALC CTA BLOCK ====== */
.calc-trust-list {
margin-top: 20px; display: grid; gap: 8px;
}
.calc-trust-list li {
font-size: 13px; color: var(--ink-dim);
display: flex; align-items: center; gap: 8px;
list-style: none;
}
.calc-trust-list li::before {
content: "✔"; color: var(--accent); font-size: 11px; flex-shrink: 0;
}
.calc-cta-box {
margin-top: 32px; padding: 28px 32px;
background: linear-gradient(135deg, rgba(201,146,106,.12), rgba(139,94,58,.08));
border: 1px solid rgba(139,94,58,.25); border-radius: 16px; text-align: center;
}
.calc-cta-box h3 {
font-family: var(--font-display); font-weight: 400;
font-size: 22px; margin: 0 0 8px; letter-spacing: -.01em;
}
.calc-cta-box p {
font-size: 14px; color: var(--ink-dim); margin: 0 0 20px;
}
/* ====== TELEGRAM FLOAT ====== */
.tg-float {
position: fixed; bottom: 94px; right: 24px; z-index: 40;
width: 58px; height: 58px; border-radius: 50%;
background: #229ED9; color: white;
display: grid; place-items: center;
box-shadow: 0 14px 40px -10px rgba(34,158,217,.55);
transition: transform .3s var(--ease);
}
.tg-float:hover { transform: scale(1.08); }
/* ====== MESSENGER LINKS IN LEAD ====== */
.lead-messengers {
display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px;
}
.btn-wa {
background: #25D366; color: white;
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px; border-radius: 99px;
font-size: 14px; font-weight: 500; transition: all .3s;
}
.btn-wa:hover { background: #1db954; transform: translateY(-2px); }
.btn-tg {
background: #229ED9; color: white;
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px; border-radius: 99px;
font-size: 14px; font-weight: 500; transition: all .3s;
}
.btn-tg:hover { background: #1a85b8; transform: translateY(-2px); }
.lead-phone-block {
margin-top: 16px; font-size: 15px; color: var(--ink-dim);
}
.lead-phone-block a {
color: var(--ink); font-weight: 600; font-size: 18px;
font-family: var(--font-display);
}
.lead-spam-note {
font-size: 12px; color: var(--ink-mute); margin-top: 10px;
letter-spacing: .02em;
}
/* ====== HEADER SOCIALS ====== */
.hdr-socials {
display: flex; align-items: center; gap: 6px; margin-left: 16px;
}
.hdr-socials a {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid var(--line); color: var(--ink-mute);
display: grid; place-items: center;
transition: all .3s var(--ease);
flex-shrink: 0;
}
.hdr-socials a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media(max-width:900px) { .hdr-socials { display: none; } }
/* ====== МОБИЛЬНОЕ МЕНЮ ====== */
.mob-overlay {
display: none;
position: fixed; inset: 0; z-index: 45;
background: rgba(22,17,12,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0; transition: opacity .35s var(--ease);
}
.mob-overlay.open { opacity: 1; }
.mob-menu {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 46;
width: min(340px, 88vw);
background: var(--bg-card);
border-left: 1px solid var(--line);
display: flex; flex-direction: column;
padding: 0;
transform: translateX(100%);
transition: transform .4s var(--ease);
box-shadow: -20px 0 60px -10px rgba(22,17,12,.18);
}
.mob-menu.open { transform: translateX(0); }
.mob-menu-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 24px;
border-bottom: 1px solid var(--line);
}
.mob-menu-head .logo { font-size: 20px; }
.mob-close {
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--line); color: var(--ink-mute);
display: grid; place-items: center;
transition: all .3s;
}
.mob-close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mob-nav {
flex: 1; display: flex; flex-direction: column;
padding: 20px 0; overflow-y: auto;
}
.mob-nav a {
padding: 14px 24px;
font-size: 17px; font-family: var(--font-display);
font-weight: 400; letter-spacing: -.01em;
color: var(--ink-dim); border-bottom: 1px solid var(--line-soft);
transition: color .25s, background .25s;
display: flex; align-items: center; justify-content: space-between;
}
.mob-nav a::after {
content: "→"; font-family: var(--font-display);
color: var(--accent); opacity: 0; transition: opacity .25s, transform .25s;
transform: translateX(-6px);
}
.mob-nav a:hover { color: var(--ink); background: var(--bg-elev); }
.mob-nav a:hover::after { opacity: 1; transform: translateX(0); }
.mob-menu-footer {
padding: 24px;
border-top: 1px solid var(--line);
display: flex; flex-direction: column; gap: 12px;
}
.mob-cta-primary {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 15px 24px; border-radius: 99px;
background: var(--accent-bright); color: var(--ink);
font-size: 15px; font-weight: 500; letter-spacing: .01em;
transition: all .3s var(--ease);
}
.mob-cta-primary:hover { background: var(--accent); color: var(--bg); transform: translateY(-2px); }
.mob-contact-row {
display: flex; align-items: center; justify-content: center; gap: 12px;
}
.mob-contact-row a {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--ink-mute);
transition: color .25s;
}
.mob-contact-row a:hover { color: var(--ink); }
.mob-socials {
display: flex; justify-content: center; gap: 10px; margin-top: 4px;
}
.mob-socials a {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--line); color: var(--ink-mute);
display: grid; place-items: center;
transition: all .3s;
}
.mob-socials a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Бургер → крестик анимация */
.burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media(min-width:901px) {
.mob-overlay, .mob-menu { display: none !important; }
}
/* ============================================================
ПОЛНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ (375px — 768px)
============================================================ */
/* ----- Общие токены для мобильных ----- */
@media(max-width:768px) {
:root {
--pad: 20px;
}
/* ----- ШАПКА ----- */
.hdr {
padding: 14px var(--pad);
}
.hdr-socials { display: none; }
/* ----- HERO ----- */
.hero {
min-height: 100svh;
padding: 120px var(--pad) 80px;
align-items: start;
}
.hero-inner {
grid-template-columns: 1fr;
gap: 32px;
}
.h1 {
font-size: clamp(36px, 10vw, 56px);
margin-bottom: 20px;
}
.lead {
font-size: 15px;
margin-bottom: 28px;
max-width: 100%;
}
.hero-cta {
flex-direction: column;
gap: 10px;
}
.hero-cta .btn {
width: 100%;
justify-content: center;
padding: 16px 20px;
}
.hero-trust {
gap: 10px;
margin-top: 16px;
}
.hero-trust span {
font-size: 12px;
}
.hero-urgency {
font-size: 12px;
padding: 7px 14px;
}
.hero-side {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
padding-top: 24px;
}
.stat {
border-top: none;
border-right: 1px solid var(--line);
padding: 16px 12px;
text-align: center;
}
.stat:last-child { border-right: none; }
.stat .big {
font-size: clamp(28px, 7vw, 40px);
justify-content: center;
}
.stat .label { font-size: 11px; text-align: center; }
/* New: hero video on mobile */
.hero-video { padding-bottom: 0; }
.hero-video-frame { max-width: 280px; border-radius: 26px; }
.hero-video-tag { left: 10px; bottom: 10px; padding: 5px 10px 5px 8px; font-size: 10px; }
/* New: facts strip on mobile */
.hero-facts { margin-top: 22px; }
.hero-fact { padding: 14px 8px 4px 0; }
.hero-fact:not(:first-child) { padding-left: 8px; }
.hero-fact-num { font-size: clamp(22px, 6vw, 30px); }
.hero-fact-lbl { font-size: 10px; }
.eyebrow { margin-bottom: 20px; font-size: 11px; }
.hero-marquee { display: none; }
/* ----- СЕКЦИИ ----- */
.sec {
padding: clamp(48px, 8vw, 80px) var(--pad);
}
.sec-head {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 36px;
}
.sec-title {
font-size: clamp(28px, 8vw, 42px);
}
/* ----- КАТЕГОРИИ ----- */
.cats-grid {
grid-template-columns: 1fr;
}
.cat {
aspect-ratio: 4/2.2;
padding: 28px 24px;
}
.cat-name {
font-size: clamp(24px, 6vw, 32px);
}
/* ----- КАЛЬКУЛЯТОР ----- */
.calc-wrap {
border-radius: 16px;
}
.calc-left {
padding: 24px 20px;
}
.calc-right {
padding: 24px 20px;
}
.calc-mode-switch {
width: 100%;
}
.cmode {
flex: 1;
min-width: 0;
padding: 10px 12px;
align-items: center;
}
.cmode-label { font-size: 14px; }
.opt-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.opt { padding: 12px 14px; font-size: 13px; }
.calc-q {
font-size: clamp(22px, 5vw, 30px);
margin-bottom: 20px;
}
.price-mid {
font-size: clamp(40px, 10vw, 64px);
}
.price-range {
font-size: clamp(24px, 6vw, 36px);
}
.field-row {
grid-template-columns: 1fr;
}
.calc-cta-box {
padding: 20px 16px;
}
.calc-cta-box .btn {
width: 100%;
justify-content: center;
}
/* ----- БЛОК ГАРАНТИИ (price-guarantee) ----- */
.price-guarantee {
padding: 48px var(--pad);
}
.pg-title {
font-size: clamp(26px, 7vw, 40px);
}
.pg-grid {
grid-template-columns: 1fr;
}
.pg-item {
padding: 28px 24px;
}
/* ----- ПОЧЕМУ МЫ ----- */
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
.why { padding: 28px 20px; }
.why-num { font-size: 48px; }
.why-title { font-size: 18px; margin: 16px 0 8px; }
/* ----- ПРОЦЕСС ----- */
.proc-track {
grid-template-columns: 1fr;
gap: 0;
}
.proc-step {
padding: 20px 0;
border-top: 1px solid var(--line);
}
.proc-step:last-child {
border-bottom: 1px solid var(--line);
}
.proc-title { font-size: 20px; }
/* ----- ПОРТФОЛИО ----- */
.port-filters {
gap: 8px;
margin-bottom: 28px;
}
.chip {
padding: 6px 14px;
font-size: 12px;
}
.port-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.card { aspect-ratio: 4/2.8; }
.card-title { font-size: 18px; }
/* ----- ОТЗЫВЫ ----- */
.rev-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.rev { padding: 24px 20px; }
.rev-text { font-size: 16px; }
/* ----- FAQ ----- */
.faq-q {
font-size: 17px;
padding: 20px 0;
gap: 16px;
}
.faq-icon { width: 28px; height: 28px; font-size: 16px; }
/* ----- ФОРМА ЗАЯВКИ (LEAD) ----- */
.lead-wrap {
grid-template-columns: 1fr;
gap: 32px;
}
.lead-title {
font-size: clamp(30px, 8vw, 48px);
}
.lead-form {
padding: 24px 20px;
border-radius: 16px;
width: 100%;
}
.lead-form h3 { font-size: 22px; }
.lead-form .btn {
padding: 16px 20px;
}
.lead-messengers {
flex-direction: column;
gap: 10px;
}
.btn-wa, .btn-tg {
justify-content: center;
padding: 13px 20px;
}
/* ----- ФУТЕР ----- */
.foot {
padding: 48px var(--pad) 32px;
}
.foot-top {
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 40px;
}
.foot-brand {
grid-column: 1 / -1;
}
.foot-bottom {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
/* ----- ПЛАВАЮЩИЕ КНОПКИ ----- */
.wa-float, .tg-float {
width: 52px;
height: 52px;
right: 16px;
}
.wa-float { bottom: 16px; }
.tg-float { bottom: 80px; }
}
/* ----- 375px — самые маленькие экраны ----- */
@media(max-width:400px) {
.hero-side {
grid-template-columns: 1fr;
}
.stat {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 14px 0;
text-align: left;
}
.stat:last-child { border-bottom: none; }
.why-grid { grid-template-columns: 1fr; }
.foot-top { grid-template-columns: 1fr; }
.opt-grid { grid-template-columns: 1fr; }
.hero-trust { flex-direction: column; gap: 6px; }
/* facts strip — stack to 1 column on tiny screens */
.hero-facts { grid-template-columns: 1fr; }
.hero-fact {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 12px 0;
}
.hero-fact:not(:first-child) { padding-left: 0; }
.hero-fact:last-child { border-bottom: none; }
.hero-video-frame { max-width: 240px; }
}
/* ----- Планшет 768–900px ----- */
@media(min-width:769px) and (max-width:900px) {
.hero-inner { grid-template-columns: 1fr; gap: 40px; }
.port-grid { grid-template-columns: repeat(2, 1fr); }
.rev-grid { grid-template-columns: repeat(2, 1fr); }
.lead-wrap { grid-template-columns: 1fr; gap: 40px; }
}
/* Safe area для iPhone с вырезом */
@supports(padding: max(0px)) {
.hdr {
padding-left: max(var(--pad), env(safe-area-inset-left));
padding-right: max(var(--pad), env(safe-area-inset-right));
}
.wa-float { bottom: max(16px, env(safe-area-inset-bottom)); }
.tg-float { bottom: max(80px, calc(env(safe-area-inset-bottom) + 64px)); }
.foot { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); }
}
/* ========== PORTFOLIO EMPTY STATE ========== */
.port-empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: var(--ink-mute);
display: none;
animation: fadeIn .4s var(--ease);
}
.port-empty svg { margin: 0 auto 20px; opacity: .4; color: var(--ink-mute); }
.port-empty-title {
font-family: var(--font-display); font-size: 22px; font-weight: 350;
letter-spacing: -.01em; color: var(--ink-dim); margin: 0 0 10px;
}
.port-empty-text { font-size: 14px; max-width: 38ch; margin: 0 auto; line-height: 1.6; }
.port-empty-link {
color: var(--accent); text-decoration: underline;
text-decoration-color: var(--accent); text-underline-offset: 3px;
font: inherit; background: none; border: none; cursor: pointer; padding: 0;
transition: color .3s;
}
.port-empty-link:hover { color: var(--accent-deep); }
@keyframes fadeIn { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform: none } }
/* ========== MOBILE PHONE IN HEADER ========== */
.hdr-phone-mobile,
.hdr-calc-mobile {
display: none;
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--line);
place-items: center;
color: var(--ink-dim);
flex-shrink: 0;
transition: all .3s var(--ease);
}
.hdr-phone-mobile { margin-left: auto; }
.hdr-phone-mobile:hover,
.hdr-calc-mobile:hover { color: var(--accent); border-color: var(--accent); }
@media(max-width:900px){
.hdr-phone-mobile,
.hdr-calc-mobile { display: grid; }
.burger { margin-left: 8px; }
}
/* ====== PROFILES SECTION ====== */
.profs{ background: var(--bg) }
.profs-grid{
display:grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: var(--line);
border: 1px solid var(--line);
}
@media(max-width: 900px){ .profs-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width: 600px){ .profs-grid{ grid-template-columns: 1fr; } }
.prof{
background: var(--bg-card);
padding: 32px 28px 24px;
cursor: pointer;
transition: background .3s var(--ease), transform .3s var(--ease);
display: flex; flex-direction: column; gap: 16px;
position: relative;
min-height: 320px;
}
.prof:hover{ background: var(--bg); }
.prof:focus-visible{ outline: 2px solid var(--accent); outline-offset: -4px; }
.prof-num{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px; color: var(--accent); font-weight: 700;
letter-spacing: .15em;
}
.prof-svg{
width: 100%; aspect-ratio: 3/2;
background: var(--bg);
display: grid; place-items: center;
color: var(--ink-dim);
border: 1px solid var(--line-soft);
padding: 20px;
overflow: hidden;
position: relative;
}
.prof-svg svg{ width: 100%; height: auto; max-height: 100%; }
.prof-svg img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
transition: transform .6s var(--ease);
}
.prof:hover .prof-svg img{ transform: scale(1.04); }
.prof-name{
font-family: var(--font-display); font-weight: 500;
font-size: 22px; line-height: 1.1;
letter-spacing: -.01em; margin: 0;
color: var(--ink);
}
.prof-desc{
font-size: 14px; line-height: 1.5;
color: var(--ink-dim); margin: 0;
flex: 1;
}
.prof-foot{
display: flex; justify-content: space-between; align-items: center;
padding-top: 16px;
border-top: 1px dashed var(--line);
}
.prof-price{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 14px; color: var(--ink); font-weight: 700;
letter-spacing: .02em;
}
.prof-link{
width: 36px; height: 36px; border-radius: 99px;
border: 1px solid var(--line);
display: grid; place-items: center;
color: var(--ink-dim);
transition: all .25s var(--ease);
}
.prof:hover .prof-link{
background: var(--accent); border-color: var(--accent); color: #FFF;
transform: rotate(-45deg);
}
/* ════════════ DETAIL MODAL ════════════ */
.detail-modal{
position: fixed; inset: 0; z-index: 100;
display: grid; place-items: center;
padding: clamp(16px, 4vw, 40px);
animation: modalIn .25s var(--ease);
}
.detail-modal[hidden]{ display: none; }
.detail-backdrop{
position: absolute; inset: 0;
background: rgba(11,7,3,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.detail-panel{
position: relative;
background: var(--bg);
border: 1px solid var(--line);
width: min(720px, 100%);
max-height: calc(100svh - 80px);
overflow-y: auto;
padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
animation: panelIn .35s var(--ease);
border-radius: 2px;
}
@keyframes modalIn{ from{opacity:0} to{opacity:1} }
@keyframes panelIn{
from{ opacity:0; transform: translateY(20px) scale(.98); }
to{ opacity:1; transform: none; }
}
html[data-theme="dark"] .detail-panel{ background: var(--bg-card); }
.detail-close{
position: absolute; top: 16px; right: 16px;
width: 40px; height: 40px;
display: grid; place-items: center;
border: 1px solid var(--line); background: transparent;
border-radius: 99px;
color: var(--ink-dim);
transition: all .25s var(--ease);
cursor: pointer;
}
.detail-close:hover{ color: var(--ink); border-color: var(--ink); }
.detail-eyebrow{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--accent); margin-bottom: 12px;
display: inline-block;
}
.detail-title{
font-family: var(--font-display); font-weight: 400;
font-size: clamp(28px, 3.5vw, 44px);
line-height: 1.05; letter-spacing: -.02em;
margin: 0 0 32px; color: var(--ink);
}
.detail-title em{ font-style: italic; color: var(--accent); }
.detail-body{ font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.detail-body p{ margin: 0 0 16px; }
.detail-body h4{
font-family: var(--font-display); font-weight: 500;
font-size: 18px; margin: 28px 0 12px;
color: var(--ink); letter-spacing: -.01em;
}
.detail-body ul{ list-style: none; padding: 0; margin: 0 0 20px; }
.detail-body ul li{
position: relative; padding-left: 24px;
margin-bottom: 8px;
}
.detail-body ul li::before{
content: '+'; position: absolute; left: 0;
color: var(--accent); font-weight: 700;
}
.detail-body ul.minus li::before{ content: '−'; color: var(--danger); }
.detail-body .specs{
display: grid; grid-template-columns: 1fr 1fr;
gap: 1px; background: var(--line);
border: 1px solid var(--line);
margin: 16px 0 24px;
}
@media(max-width: 540px){ .detail-body .specs{ grid-template-columns: 1fr; } }
.detail-body .specs > div{
background: var(--bg);
padding: 14px 18px;
display: flex; flex-direction: column; gap: 4px;
}
.detail-body .specs span{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-mute);
}
.detail-body .specs b{
color: var(--ink); font-weight: 600;
font-size: 15px;
}
html[data-theme="dark"] .detail-body .specs > div{ background: var(--bg-elev); }
.detail-foot{
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
/* ====== Cat card clickability ====== */
.cat{ cursor: pointer; }
.cat:focus-visible{ outline: 2px solid var(--accent); outline-offset: -4px; }
/* fireproof badges */
.fireproof-grid{
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-bottom: 24px;
}
@media(max-width:600px){ .fireproof-grid{ grid-template-columns: 1fr; } }
.fireproof-opt{
display: grid; grid-template-columns: auto 1fr auto;
gap: 14px; align-items: center;
padding: 16px 18px;
background: var(--bg-card); color: var(--ink);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: 6px;
cursor: pointer;
text-align: left;
transition: background .2s, border-color .2s;
}
.fireproof-opt:hover{ background: var(--bg-elev); border-color: var(--accent); }
.fireproof-icon{
font-size: 24px; line-height: 1;
}
.fireproof-content{ display: flex; flex-direction: column; gap: 4px; }
.fireproof-name{
font-family: var(--font-display);
font-weight: 600; font-size: 16px; color: var(--ink);
letter-spacing: -.01em;
}
.fireproof-sub{
font-size: 12px; color: var(--ink-dim);
}
.fireproof-price{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
}
/* Make .mat-grid work with 4 cards */
.mat-grid{ grid-template-columns: repeat(4, 1fr) !important; }
@media(max-width:880px){ .mat-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
@media(max-width:480px){ .mat-grid{ grid-template-columns: 1fr !important; } }
/* === Construction step (calculator) === */
.constr-section{ margin-bottom: 28px; }
.constr-label{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-mute); margin: 12px 0 8px;
}
.constr-section .constr-label:first-child{ margin-top: 0; }
.opt-construction{
display: flex !important; flex-direction: column !important;
align-items: center !important; gap: 4px !important;
text-align: center;
min-height: 60px;
padding: 12px 14px !important;
}
.opt-construction small{
font-size: 11px; color: var(--ink-mute);
font-family: ui-monospace, 'SF Mono', monospace;
font-weight: 400;
}
.opt-construction.sel small{ color: var(--accent); font-weight: 600; }
.constr-note{
font-size: 12px; color: var(--ink-mute); font-style: italic;
margin: 8px 0 0; line-height: 1.5;
}
.constr-meters{ background: var(--bg-card); padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 24px; }
.constr-meters label{ display: block; }
.constr-meters label small{
display: block; font-weight: 400; color: var(--ink-mute);
font-size: 12px; margin-top: 4px; font-family: inherit;
letter-spacing: 0; text-transform: none;
}
.num-input-wrap{
display: flex; align-items: center; gap: 8px;
background: var(--bg); border: 1px solid var(--line);
border-radius: 6px; padding: 8px 14px; margin-top: 8px;
max-width: 220px;
}
.num-input-wrap input{
flex: 1; border: none; background: transparent;
font-family: var(--font-display); font-size: 18px; font-weight: 500;
color: var(--ink); outline: none; min-width: 0;
}
.num-input-wrap .num-unit{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 12px; color: var(--ink-mute); white-space: nowrap;
}
.constr-summary{
margin-top: 10px; font-size: 13px; color: var(--ink-2);
font-family: ui-monospace, 'SF Mono', monospace;
}
.constr-summary b{ color: var(--accent); font-size: 14px; }
/* Dimensions input (step 2) */
.dim-wrap{
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-bottom: 16px;
}
@media(max-width:600px){ .dim-wrap{ grid-template-columns: 1fr; } }
.dim-field label{ font-weight: 600; color: var(--ink); }
.dim-summary{
display: flex; gap: 24px; padding: 14px 18px;
background: var(--bg-card); border: 1px solid var(--line);
border-radius: 6px; margin-bottom: 24px;
}
.dim-stat{ display: flex; flex-direction: column; gap: 4px; }
.dim-stat span{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-mute);
}
.dim-stat b{
font-family: var(--font-display); font-size: 18px;
color: var(--ink); font-weight: 600;
}
.constr-meters-auto{
background: linear-gradient(135deg, rgba(201,146,106,.06), rgba(201,146,106,.02));
border: 1px solid var(--accent);
padding: 18px 20px;
}
.constr-auto-label{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--accent); margin-bottom: 6px;
}
.constr-auto-value{
font-family: var(--font-display);
font-size: 28px; font-weight: 600; color: var(--ink);
letter-spacing: -.02em; line-height: 1;
}
.constr-auto-value span{
font-size: 14px; color: var(--ink-mute); font-weight: 400;
margin-left: 4px;
}
.constr-auto-formula{
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 12px; color: var(--ink-mute); margin: 8px 0 4px;
}
/* ============ MULTI-PAGE / SUBPAGE COMPONENTS ============ */
.crumbs{ max-width:var(--max); margin:0 auto; padding:88px var(--pad) 0; font:500 13px/1.5 var(--font-body); color:var(--ink-mute); display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.crumbs a{ color:var(--ink-dim); text-decoration:none } .crumbs a:hover{ color:var(--accent) }
.crumbs span.sep{ opacity:.5 } .crumbs span.cur{ color:var(--ink) }
.subhero{ max-width:var(--max); margin:0 auto; padding:28px var(--pad) 8px }
.subhero .kicker{ font:600 13px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:18px }
.subhero h1{ font:300 clamp(34px,5.4vw,62px)/1.04 var(--font-display); letter-spacing:-.02em; color:var(--ink); margin:0 0 18px; max-width:16ch }
.subhero h1 em{ font-style:italic; color:var(--accent) }
.subhero .lead{ font:400 clamp(17px,2vw,21px)/1.55 var(--font-body); color:var(--ink-dim); max-width:60ch; margin:0 0 28px }
.subhero .sh-cta{ display:flex; flex-wrap:wrap; gap:12px }
.page-body{ max-width:var(--max); margin:0 auto; padding:24px var(--pad) 64px }
.prose{ max-width:68ch; font:400 17px/1.7 var(--font-body); color:var(--ink-dim) }
.prose h2{ font:400 clamp(24px,3vw,34px)/1.15 var(--font-display); color:var(--ink); margin:44px 0 16px; letter-spacing:-.01em }
.prose h2 em{ font-style:italic; color:var(--accent) }
.prose p{ margin:0 0 18px } .prose strong{ color:var(--ink); font-weight:600 }
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:30px 0 }
.feature{ background:var(--bg-card); border:1px solid var(--line-soft); border-radius:18px; padding:24px }
.feature .fn{ font:600 14px/1 var(--font-body); color:var(--accent); margin-bottom:10px }
.feature h3{ font:500 19px/1.25 var(--font-display); color:var(--ink); margin:0 0 8px }
.feature p{ font:400 15px/1.6 var(--font-body); color:var(--ink-dim); margin:0 }
.forwhom{ background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:20px; padding:28px 30px; margin:34px 0; font:400 16px/1.65 var(--font-body); color:var(--ink-dim) }
.forwhom b{ color:var(--ink); display:block; font:600 14px/1 var(--font-body); letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:12px }
.subfaq{ margin:40px 0 8px } .subfaq h2{ font:400 clamp(24px,3vw,34px)/1.15 var(--font-display); color:var(--ink); margin:0 0 20px }
.subfaq details{ border-bottom:1px solid var(--line-soft); padding:4px 0 }
.subfaq summary{ cursor:pointer; list-style:none; padding:18px 0; font:500 18px/1.4 var(--font-body); color:var(--ink); display:flex; justify-content:space-between; gap:16px; align-items:center }
.subfaq summary::-webkit-details-marker{ display:none }
.subfaq summary::after{ content:"+"; font:300 26px/1 var(--font-display); color:var(--accent); transition:transform .3s var(--ease) }
.subfaq details[open] summary::after{ transform:rotate(45deg) }
.subfaq details p{ margin:0 0 18px; font:400 16px/1.7 var(--font-body); color:var(--ink-dim); max-width:64ch }
.related{ max-width:var(--max); margin:0 auto; padding:8px var(--pad) 72px }
.related h2{ font:400 clamp(22px,2.6vw,30px)/1.15 var(--font-display); color:var(--ink); margin:0 0 22px }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px }
.related-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg-card); border:1px solid var(--line-soft); border-radius:14px; padding:18px 20px; text-decoration:none; color:var(--ink); font:500 16px/1.3 var(--font-body); transition:border-color .25s,transform .25s var(--ease) }
.related-card:hover{ border-color:var(--accent); transform:translateY(-2px) }
.related-card svg{ color:var(--accent); flex:none }
.cta-band{ max-width:var(--max); margin:0 auto 80px; padding:0 var(--pad) }
.cta-band-inner{ background:linear-gradient(135deg,var(--accent-deep),var(--accent)); border-radius:28px; padding:clamp(34px,5vw,60px); color:#FFFBF3; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px }
.cta-band-inner h2{ font:300 clamp(26px,3.4vw,40px)/1.1 var(--font-display); margin:0; max-width:18ch; color:#FFFBF3 }
.cta-band-inner h2 em{ font-style:italic; color:#F4D9BE }
.cta-band .btn-primary{ background:#FFFBF3; color:var(--accent-deep) }
.pricing-table{ width:100%; border-collapse:collapse; margin:24px 0; font:400 15px/1.5 var(--font-body) }
.pricing-table th,.pricing-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line-soft) }
.pricing-table th{ font:600 13px/1 var(--font-body); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute) }
.pricing-table td:last-child{ font-weight:600; color:var(--accent); white-space:nowrap }
.pricing-table tr:hover td{ background:var(--bg-card) }
.home-catalog{ max-width:var(--max); margin:0 auto; padding:40px var(--pad) 8px }
.home-catalog h2{ font:400 clamp(22px,2.6vw,30px)/1.15 var(--font-display); color:var(--ink); margin:0 0 6px }
.home-catalog p{ font:400 16px/1.5 var(--font-body); color:var(--ink-dim); margin:0 0 22px }
/* ============ SUBPAGE MEDIA (hero image + gallery) ============ */
.subhero.has-media{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center }
.subhero-media{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line-soft); box-shadow:0 24px 60px -28px rgba(40,26,12,.45); aspect-ratio:4/3 }
.subhero-media img{ width:100%; height:100%; object-fit:cover; display:block }
@media(max-width:860px){ .subhero.has-media{ grid-template-columns:1fr } .subhero-media{ aspect-ratio:16/10; margin-top:8px } }
.page-gallery{ max-width:var(--max); margin:0 auto; padding:8px var(--pad) 8px }
.page-gallery h2{ font:400 clamp(22px,2.6vw,30px)/1.15 var(--font-display); color:var(--ink); margin:24px 0 18px }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.gallery-grid figure{ margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line-soft); aspect-ratio:4/3 }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease) }
.gallery-grid figure:hover img{ transform:scale(1.05) }
@media(max-width:680px){ .gallery-grid{ grid-template-columns:repeat(2,1fr) } .gallery-grid figure:last-child{ display:none } }
/* ---- contrast fix for emphasized words ---- */
.subhero h1 em, .prose h2 em{ color:var(--accent-deep) }
[data-theme="dark"] .subhero h1 em, [data-theme="dark"] .prose h2 em{ color:var(--accent-bright) }
.cta-band-inner h2 em{ color:#FFE9D2 }
/* ============ ACCENT EMPHASIS COLOR (gold/amber) ============ */
:root{ --accent-em:#9E6B05; }
[data-theme="dark"]{ --accent-em:#E9B85C; }
.logo em, .foot-brand .logo em,
.h1 em, .sec-title em, .cat-name em, .lead-title em, .pg-title em, .detail-title em,
.hero-fact-num em, .stat .big em, .price-range em, .calc-q em, .simple-subq em,
.subhero h1 em, .prose h2 em{ color:var(--accent-em); }
[data-theme="dark"] .subhero h1 em,
[data-theme="dark"] .prose h2 em{ color:var(--accent-em); }
/* comparison table variant (no last-column accent) */
.cmp-table{ width:100%; border-collapse:collapse; margin:24px 0; font:400 15px/1.5 var(--font-body) }
.cmp-table th,.cmp-table td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top }
.cmp-table thead th{ font:600 13px/1.2 var(--font-body); letter-spacing:.03em; text-transform:uppercase; color:var(--ink-mute) }
.cmp-table tbody th{ font:600 14px/1.4 var(--font-body); color:var(--ink); white-space:nowrap }
.cmp-table td:nth-child(2){ color:var(--accent); font-weight:600 }
.cmp-table tr:hover td{ background:var(--bg-card) }
@media(max-width:680px){ .cmp-table{ font-size:13px } .cmp-table th,.cmp-table td{ padding:10px 8px } }