:root{ --bg:#FFFFFF; --bg2:#F5F7FA; --p-top:#FFFFFF; --p-bot:#F7F9FC; --shell:#FFFFFF; --line:rgba(14,20,32,.11); --line2:rgba(14,20,32,.20); --paper:#0E1219; --soft:#333B46; --mute:#616B7A; --gold-hi:#A0632E; --gold:#79441D; --gold-mid:#6B3D19; --gold-dp:#5C3415; /* золотой ТЕКСТ на белом нечитаем (контраст ~1.9) — для надписей отдельный тёмный */ --gold-ink:#8A4F22; --graphite:#1E242C; --graphite-2:#171C22; --steel:#4A5B7A; --metal:linear-gradient(135deg,#BE7438 0%,#A8602B 48%,#8A4F22 100%); --ease:cubic-bezier(.32,.72,0,1); --ease2:cubic-bezier(.2,.7,.2,1); --maxw:1180px; } /* Тёмные острова на белой странице: видео-шапка и шоурил. Внутри них переменные возвращаются к тёмной теме — иначе текст сливается с фоном. */ .billboard, .hero .billboard *, .reel-core, .reel-core *, .soon, .nav, .nav *, .nav-drop-menu, .nav-drop-menu *, .m-overlay, .m-overlay *, footer, footer *{ --paper:#EEF3F8; --soft:#C2D0DD; --mute:#98A6B6; --line:rgba(228,240,252,.14); --line2:rgba(228,240,252,.24); /* золото тоже возвращаем светлое: тёмная бронза для белого фона на графите не читается (заголовки колонок в подвале давали контраст 2.02) */ --gold-hi:#F8D8B4; --gold:#EBA97D; --gold-mid:#D68F63; --gold-dp:#EBA97D; --gold-ink:#F0C79B; --metal:linear-gradient(135deg,#F8D8B4 0%,#EBA97D 48%,#CE7E58 100%); } /* Цвет задаём ЯВНО на самом блоке: наследуется вычисленный цвет, а не ссылка на переменную, поэтому подмены переменных внутри блока мало. */ .billboard, .reel-core, .nav, .nav-drop-menu, .m-overlay, footer{ color:#EEF3F8 } /* метка на тёмной плашке: серый давал контраст 4.19 из нужных 4.5 */ .soon{ color:#D6DEE8 } html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(/assets/blueprint-icons.svg) repeat;background-size:760px 760px;opacity:.16} *{margin:0;padding:0;box-sizing:border-box} @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{ background:var(--bg); color:var(--paper); font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } /* ⚠️ overflow-x:hidden стоит на , а НЕ на . На body он делает сам body прокручиваемым блоком: window.scrollY тогда всегда 0, и всё, что считает прокрутку (фон шапки, position:sticky), молча не работает. */ html{ overflow-x:hidden } /* ambient glow on its own fixed compositing layer — no repaint on scroll */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 80% at 50% -8%, #1A1B21 0%, var(--bg) 55%), radial-gradient(90% 60% at 88% 6%, rgba(235,169,125,.10), transparent 60%), radial-gradient(70% 60% at 4% 28%, rgba(110,128,166,.07), transparent 60%); } ::selection{background:var(--gold-mid); color:#16110a} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:"Space Grotesk","Manrope",system-ui,sans-serif; letter-spacing:-.02em; line-height:1.04} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px} .mono{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif} .serif{font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-weight:400; letter-spacing:0} .metal-text{background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent} .eyebrow{display:inline-flex; align-items:center; gap:12px; font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.7rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gold-dp)} .eyebrow::before{content:""; width:28px; height:1px; background:linear-gradient(90deg,var(--gold-mid),transparent)} .muted{color:var(--mute)} /* skip-to-content — visible only on keyboard focus */ .skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden} .skip:focus{position:fixed; left:10px; top:10px; width:auto; height:auto; z-index:80; padding:11px 18px; border-radius:100px; background:var(--metal); color:#1c1305; font-weight:600; font-size:.9rem; overflow:visible; outline:none} /* film grain — fixed, pointer-none, no blend-mode (blend forces full-screen repaint on scroll) */ body::after{ content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- SMOOTH MOMENTUM SCROLL (Lenis) ---------- */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-smooth iframe{pointer-events:none} /* ---------- editorial section index (de-templates repeated headers) ---------- */ body{counter-reset:band} .band{counter-increment:band} .band .s-head .eyebrow::after{ content:counter(band,decimal-leading-zero); margin-left:14px; padding-left:14px; border-left:1px solid var(--line2); color:var(--mute); letter-spacing:.1em; } /* ---------- FLOATING ISLAND NAV ---------- */ header{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; justify-content:center; padding:18px 16px; pointer-events:none} .nav{pointer-events:auto; width:min(var(--maxw),100%); display:flex; align-items:center; justify-content:space-between; gap:18px; height:60px; padding:0 12px 0 18px; border-radius:100px; background:var(--graphite); border:1px solid rgba(14,20,32,.08); box-shadow:0 1px 0 rgba(14,20,32,.05) inset, 0 16px 40px -24px rgba(14,20,32,.22); transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .4s} .brand{display:flex; align-items:center; gap:11px; font-family:"Space Grotesk","Manrope",system-ui,sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:-.01em} .brand img{width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 3px 9px rgba(235,169,125,.28))} .nav-links{display:flex; gap:28px; font-size:.9rem; color:var(--soft)} .nav-links a{position:relative; padding:4px 0; transition:color .3s var(--ease)} .nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--metal); transition:width .35s var(--ease)} .nav-links a:hover{color:var(--paper)} .nav-links a:hover::after{width:100%} .nav-right{display:flex; align-items:center; gap:10px} .lang{position:relative; display:inline-flex; align-items:center; border:1px solid var(--line2); border-radius:100px; overflow:hidden} .lang-select{appearance:none; -webkit-appearance:none; -moz-appearance:none; background:transparent; border:0; color:var(--soft); font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.78rem; letter-spacing:.05em; padding:8px 30px 8px 14px; cursor:pointer; outline:none; transition:color .3s} .lang-select:hover{color:var(--paper)} .lang::after{content:"\25BE"; position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--mute); font-size:.66rem} .lang-select option{background:var(--bg2); color:var(--paper)} .burger{display:none} .nav-drop{position:relative} .nav-drop-btn{font:inherit; color:var(--soft); background:transparent; border:0; cursor:pointer; padding:4px 0; display:inline-flex; align-items:center; gap:5px; transition:color .3s var(--ease)} .nav-drop-btn:hover, .nav-drop.open .nav-drop-btn{color:var(--paper)} .nav-drop-car{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .3s var(--ease)} .nav-drop:hover .nav-drop-car, .nav-drop.open .nav-drop-car{transform:rotate(180deg)} .nav-drop-menu{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px); min-width:236px; background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line2); border-radius:16px; padding:8px; box-shadow:0 26px 64px -30px rgba(14,20,32,.22); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease); display:flex; flex-direction:column; gap:2px} /* мостик под курсор: без него между кнопкой и меню пустота, hover слетает на полпути и меню захлопывается */ .nav-drop-menu::before{content:""; position:absolute; left:-10px; right:-10px; top:-22px; height:22px} /* раскрытие с клавиатуры: до этого меню было доступно только мышью */ .nav-drop:focus-within .nav-drop-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)} .nav-drop:hover .nav-drop-menu, .nav-drop.open .nav-drop-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)} .nav-drop-menu a{color:var(--soft); font-size:.9rem; padding:9px 14px; border-radius:9px; text-decoration:none; transition:background .2s, color .2s; white-space:nowrap} .nav-drop-menu a:hover{background:rgba(14,20,32,.05); color:var(--paper)} .nav-drop-menu .nav-drop-all{color:var(--gold); border-top:1px solid var(--line); margin-top:4px; padding-top:11px} /* Подписи групп в выпадающем меню: десять пунктов подряд не читались. */ .nav-drop-h{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--gold-dp); padding:12px 14px 5px} .nav-drop-menu > .nav-drop-h:first-child{padding-top:4px} .nav-drop-menu .nav-drop-demo{color:var(--gold)} @media(max-width:900px){.nav-links{display:none}} @media(max-width:560px){.nav-right .btn-sm{display:none} .lang-select{font-size:.74rem; padding:8px 28px 8px 12px}} /* buttons */ .btn{display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:.95rem; padding:13px 14px 13px 24px; border-radius:100px; cursor:pointer; border:0; transition:transform .35s var(--ease), box-shadow .45s var(--ease), background .3s, color .3s; will-change:transform} .btn .ico{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.95rem; transition:transform .4s var(--ease), background .3s} .btn-pri{color:#F2F5F8; background:var(--graphite); box-shadow:0 1px 0 rgba(14,20,32,.45) inset, 0 14px 34px -14px rgba(235,169,125,.7)} .btn-pri .ico{background:rgba(28,19,5,.16)} .btn-pri:hover{transform:translateY(-2px); box-shadow:0 1px 0 rgba(14,20,32,.5) inset, 0 20px 46px -12px rgba(235,169,125,.85)} .btn-pri:hover .ico{transform:translate(3px,-1px) scale(1.06)} .btn-pri:active{transform:translateY(0) scale(.985)} .btn-ghost{color:var(--paper); background:rgba(14,20,32,.03); border:1px solid var(--line2); padding:13px 22px} .btn-ghost:hover{border-color:var(--gold-mid); transform:translateY(-2px)} .btn-sm{padding:9px 10px 9px 18px; font-size:.86rem} .btn-sm .ico{width:24px;height:24px} /* mobile overlay menu */ .burger{pointer-events:auto; width:42px;height:42px; border-radius:50%; border:1px solid var(--line2); background:rgba(14,20,32,.02); position:relative; cursor:pointer} .burger span{position:absolute; left:11px; width:20px; height:1.6px; background:var(--paper); border-radius:2px; transition:transform .45s var(--ease), opacity .3s var(--ease)} .burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:24px} @media(max-width:900px){.burger{display:block}} .m-overlay{position:fixed; inset:0; z-index:39; background:rgba(13,14,17,.93); backdrop-filter:blur(22px); display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 34px; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s} body.menu-open .m-overlay{opacity:1; visibility:visible} body.menu-open .burger span:nth-child(1){top:21px; transform:rotate(45deg)} body.menu-open .burger span:nth-child(2){top:21px; transform:rotate(-45deg)} .m-overlay a{font-family:"Space Grotesk","Manrope",system-ui,sans-serif; font-weight:600; font-size:2rem; color:var(--paper); padding:8px 0; opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease), transform .5s var(--ease)} body.menu-open .m-overlay a{opacity:1; transform:none} body.menu-open .m-overlay a:nth-child(1){transition-delay:.08s} body.menu-open .m-overlay a:nth-child(2){transition-delay:.13s} body.menu-open .m-overlay a:nth-child(3){transition-delay:.18s} body.menu-open .m-overlay a:nth-child(4){transition-delay:.23s} body.menu-open .m-overlay a:nth-child(5){transition-delay:.28s} body.menu-open .m-overlay a:nth-child(6){transition-delay:.33s} .m-overlay{justify-content:flex-start; padding:96px 34px 46px; overflow-y:auto; gap:1px} .m-overlay a{font-size:1.5rem; padding:8px 0} .m-overlay .mo-h{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--gold-dp); margin:12px 0 2px} .m-overlay .mo-p{font-size:1.28rem; color:var(--soft)} .m-overlay .mo-p:hover{color:var(--paper)} /* ---------- LAYOUT PRIMITIVES ---------- */ section{position:relative} .band{padding:144px 0; border-top:1px solid rgba(14,20,32,.06)} .s-head{max-width:640px; margin-bottom:76px} .s-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:600; margin-top:18px} .s-head .lead{color:var(--mute); margin-top:16px; font-size:1rem; max-width:48ch} .row-between{display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap} /* Double-bezel surface */ .bezel{background:var(--shell); border:1px solid rgba(14,20,32,.05); border-radius:26px; padding:7px; box-shadow:0 1px 0 rgba(14,20,32,.04) inset, 0 22px 46px -28px rgba(14,20,32,.22)} .bezel-core{background:linear-gradient(180deg,var(--p-top),var(--p-bot)); border:1px solid var(--line); border-radius:20px; box-shadow:inset 0 1px 0 rgba(14,20,32,.04); height:100%} /* ---------- HERO (video-first) ---------- */ .hero{position:relative; padding:clamp(128px,20vh,168px) 0 84px; overflow:hidden} .hero .gridlines{position:absolute; inset:0; z-index:0; opacity:.45; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(72% 62% at 50% 20%,#000 20%,transparent 78%); mask-image:radial-gradient(72% 62% at 50% 20%,#000 20%,transparent 78%)} .hero-inner{position:relative; z-index:2; max-width:940px; margin:0 auto; padding:0 26px; text-align:center} .hero-inner .eyebrow{justify-content:center} h1{font-size:clamp(2.5rem,6.4vw,4.9rem); font-weight:700; max-width:17ch; margin:24px auto 0} h1 .h-accent{font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-style:italic; font-weight:400; color:var(--gold-dp); letter-spacing:.01em} .h-tag{margin:22px auto 0; font-size:clamp(1.08rem,1.7vw,1.32rem); font-weight:500; color:var(--soft); max-width:56ch; line-height:1.5} .h-cta{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center} .h-trust{margin:26px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; list-style:none} .h-trust li{display:inline-flex; align-items:center; gap:9px; font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.72rem; color:var(--soft); border:1px solid var(--line2); border-radius:100px; padding:8px 14px; background:rgba(14,20,32,.02)} .h-trust li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-mid); box-shadow:0 0 8px var(--gold-mid)} .h-trust b{color:var(--paper); font-weight:600} /* showreel — video-ready hero centrepiece (drop in when the reel is rendered) */ .reel-wrap{position:relative; z-index:2; margin-top:clamp(44px,6vw,64px)} .reel-core{position:relative; overflow:hidden; border-radius:20px; aspect-ratio:16/8; background:#0b0d12} @media(max-width:640px){ .reel-wrap.wrap{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:0; padding-right:0} .reel-core{aspect-ratio:16/9; border-radius:0} .reel-cap{padding:0 22px} .reel-btn{width:48px; height:48px} .reel-sound{gap:13px} .reel-sound-txt{font-size:.78rem; padding:7px 14px} } .reel-vid{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block; background:transparent} .reel-fallback{position:absolute; inset:0; z-index:0; display:grid; place-items:center; align-content:center; gap:16px; background:radial-gradient(120% 100% at 50% 0%, #17191f, #0a0c11 72%)} .reel-orbit{position:absolute; width:min(80%,520px); aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(235,169,125,.20), transparent 70%); filter:blur(24px)} @media(prefers-reduced-motion:no-preference){.reel-orbit{animation:reelfloat 13s var(--ease) infinite}} @keyframes reelfloat{0%,100%{transform:translateY(-5%) scale(1)}50%{transform:translateY(5%) scale(1.08)}} .reel-mark{position:relative; z-index:1} .reel-mark img{width:clamp(60px,9vw,88px); height:clamp(60px,9vw,88px); object-fit:contain; filter:drop-shadow(0 10px 30px rgba(235,169,125,.5))} .reel-note{position:relative; z-index:1; font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--mute)} .reel-badge{position:absolute; left:16px; top:16px; z-index:2; display:inline-flex; align-items:center; gap:8px; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); background:rgba(8,10,14,.55); border:1px solid var(--line2); border-radius:100px; padding:6px 12px} .reel-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px var(--gold)} .reel-cap{margin:22px auto 0; text-align:center; color:var(--mute); font-size:1rem; line-height:1.6; max-width:58ch} .reel-ctrls{position:absolute; right:14px; bottom:14px; z-index:3; display:flex; gap:10px; transition:opacity .3s var(--ease)} .reel-sound:not(.hidden) ~ .reel-ctrls{opacity:0; pointer-events:none} /* while the "tap for sound" prompt is up, keep a single primary action */ .reel-btn{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(12,14,18,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--paper); cursor:pointer; display:grid; place-items:center; padding:0; transition:transform .15s var(--ease), background .2s} .reel-btn:hover{background:rgba(12,14,18,.85); transform:translateY(-2px)} .reel-btn svg{width:19px; height:19px; fill:currentColor; display:block} .reel-sound{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:0; border:0; cursor:pointer; touch-action:manipulation; text-align:center; background:radial-gradient(75% 75% at 50% 48%, rgba(8,9,13,.5), rgba(8,9,13,.16)); transition:opacity .4s var(--ease)} .reel-sound-ring{position:relative; width:clamp(72px,12vw,94px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(130% 130% at 50% 12%, rgba(40,31,22,.72), rgba(12,13,17,.68)); border:1px solid rgba(219,176,132,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 14px 38px -12px rgba(0,0,0,.8), 0 0 26px -6px rgba(219,176,132,.3), inset 0 1px 0 rgba(240,214,176,.22); transition:transform .2s var(--ease), box-shadow .3s var(--ease)} .reel-sound:hover .reel-sound-ring{transform:scale(1.07); box-shadow:0 16px 44px -12px rgba(0,0,0,.8), 0 0 42px -4px rgba(219,176,132,.5), inset 0 1px 0 rgba(240,214,176,.3)} .reel-sound:active .reel-sound-ring{transform:scale(.95)} .reel-sound:focus-visible{outline:none} .reel-sound:focus-visible .reel-sound-ring{outline:2px solid var(--gold); outline-offset:4px} .reel-sound-ring svg{width:40%; height:40%; margin-left:8%} /* gold play triangle, nudged to optical centre */ .reel-sound-txt{padding:8px 17px; border-radius:999px; background:rgba(11,10,8,.5); border:1px solid rgba(219,176,132,.3); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--paper); font:600 .82rem/1 "Space Grotesk","Manrope",system-ui,sans-serif; letter-spacing:.03em; text-shadow:0 1px 6px rgba(0,0,0,.6); transition:color .3s var(--ease), border-color .3s var(--ease)} .reel-sound:hover .reel-sound-txt{color:var(--gold-hi); border-color:rgba(219,176,132,.6)} @media(prefers-reduced-motion:no-preference){ .reel-sound-ring::before,.reel-sound-ring::after{content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid rgba(219,176,132,.55); animation:reelpulse 2.4s ease-out infinite} .reel-sound-ring::after{animation-delay:1.2s} @keyframes reelpulse{0%{transform:scale(1); opacity:.65} 100%{transform:scale(2.25); opacity:0}} } .reel-sound.hidden{opacity:0; pointer-events:none} /* tighter vertical rhythm on phones — less endless scroll, easier to read */ @media(max-width:640px){ .band{padding:92px 0} .s-head{margin-bottom:48px} .contact{padding:96px 0} } /* ---------- SERVICES ---------- */ .svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px} .svc{grid-column:span 1} .svc.wide{grid-column:span 2} @media(min-width:861px){ .svc.wide .bezel-core{display:grid; grid-template-columns:45% 1fr; align-items:center; gap:0; padding:9px} .svc.wide .svc-prev{height:100%; min-height:206px; margin-bottom:0} .svc.wide .svc-body{padding:0 28px} .svc.wide h3{font-size:1.42rem} .svc.wide p{font-size:.96rem; max-width:36ch} .svc.wide .num{margin-bottom:14px} } @media(max-width:860px){.svc-grid{grid-template-columns:repeat(2,1fr)} .svc.wide{grid-column:span 2}} @media(max-width:560px){.svc-grid{grid-template-columns:1fr} .svc.wide{grid-column:span 1}} .svc .bezel-core{padding:9px 9px 24px; position:relative; overflow:hidden; transition:transform .5s var(--ease), border-color .4s} .svc:hover .bezel-core{transform:translateY(-6px); border-color:var(--line2)} .svc-prev{position:relative; height:148px; border-radius:13px; overflow:hidden; margin-bottom:18px; background:linear-gradient(180deg,#10141c,#0b0e14); border:1px solid var(--line)} .svc-prev *{box-sizing:border-box} .svc-body{padding:0 15px} .svc .num{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.7rem; color:var(--gold-mid); margin-bottom:12px} .svc h3{font-size:1.16rem; font-weight:600; margin-bottom:9px} .svc p{color:var(--mute); font-size:.9rem; line-height:1.55} /* service preview mockups */ .pv-site .bar{position:absolute;top:0;left:0;right:0;height:22px;background:rgba(8,10,14,.55);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:5px;padding:0 10px} .pv-site .bar i{width:6px;height:6px;border-radius:50%;background:var(--line2)} .pv-site .bar u{margin-left:6px;height:8px;width:52%;border-radius:4px;background:#1b222d;display:block} .pv-site .bn{position:absolute;top:34px;left:14px;right:14px;height:48px;border-radius:8px;background:linear-gradient(120deg,#232b37,#161b24)} .pv-site .ln{position:absolute;height:7px;border-radius:4px;background:#222936} .pv-site .l1{top:94px;left:14px;width:58%}.pv-site .l2{top:108px;left:14px;width:40%} .pv-site .go{position:absolute;top:96px;right:14px;width:58px;height:20px;border-radius:6px;background:var(--metal)} .pv-ads .fn{position:absolute;left:16px;right:16px;top:22px} .pv-ads .b{height:14px;border-radius:5px;background:linear-gradient(90deg,rgba(248,216,180,.5),rgba(235,169,125,.14));border:1px solid rgba(248,216,180,.25);margin-bottom:11px} .pv-ads .b2{width:78%}.pv-ads .b3{width:54%}.pv-ads .b4{width:34%;background:var(--metal);border:0} .pv-ads .roi{position:absolute;right:16px;bottom:13px;font-family:"Space Grotesk","Manrope",system-ui,sans-serif;font-weight:700;color:var(--gold);font-size:.95rem} .pv-crm .side{position:absolute;left:12px;top:12px;bottom:12px;width:30%;background:linear-gradient(160deg,#1a2028,#12161d);border:1px solid var(--line);border-radius:8px} .pv-crm .side i{position:absolute;left:9px;right:9px;height:6px;border-radius:3px;background:#262d39} .pv-crm .side i:nth-child(1){top:12px;background:var(--gold-mid);opacity:.7} .pv-crm .side i:nth-child(2){top:26px}.pv-crm .side i:nth-child(3){top:38px;width:55%}.pv-crm .side i:nth-child(4){top:50px} .pv-crm .kpi{position:absolute;left:40%;right:14px;top:14px;display:flex;gap:7px} .pv-crm .kpi b{flex:1;height:30px;border-radius:6px;background:rgba(248,216,180,.1);border:1px solid rgba(248,216,180,.2)} .pv-crm .row{position:absolute;left:40%;right:14px;height:8px;border-radius:4px;background:#1d2330} .pv-crm .r1{top:58px}.pv-crm .r2{top:72px}.pv-crm .r3{top:86px;right:35%}.pv-crm .r4{top:100px} .pv-app{display:grid;place-items:center} .pv-app .ph{width:72px;height:122px;border:3px solid #0f141c;border-radius:16px;background:#0c0f15;position:relative;box-shadow:0 10px 22px -12px #000} .pv-app .hd{position:absolute;top:0;left:0;right:0;height:26px;background:linear-gradient(150deg,var(--gold-mid),var(--gold-dp));border-radius:12px 12px 0 0} .pv-app .c{position:absolute;left:8px;right:8px;border-radius:6px;background:#1a212c} .pv-app .c1{top:34px;height:20px}.pv-app .c2{top:58px;height:20px}.pv-app .c3{top:82px;height:13px;width:60%} .pv-app .nv{position:absolute;bottom:7px;left:0;right:0;display:flex;justify-content:center;gap:8px} .pv-app .nv i{width:6px;height:6px;border-radius:50%;background:#2a323f}.pv-app .nv i:first-child{background:var(--gold)} .pv-brand{display:flex;align-items:center;justify-content:center;gap:16px} .pv-brand .mk{width:44px;height:44px;border-radius:12px;background:var(--metal);box-shadow:0 8px 18px -8px rgba(235,169,125,.6)} .pv-brand .sw{display:flex;flex-direction:column;gap:6px} .pv-brand .sw i{width:30px;height:12px;border-radius:4px} .pv-brand .sw i:nth-child(1){background:var(--gold)}.pv-brand .sw i:nth-child(2){background:var(--steel)}.pv-brand .sw i:nth-child(3){background:var(--paper);opacity:.45} .pv-brand .aa{font-family:"Instrument Serif","Playfair Display",Georgia,serif;font-size:2.3rem;color:var(--paper)} .pv-legal{display:grid;place-items:center} .pv-legal .doc{width:88px;height:108px;background:linear-gradient(180deg,#1a212c,#12171f);border:1px solid var(--line2);border-radius:8px;position:relative;padding:13px 12px} .pv-legal .doc i{display:block;height:5px;border-radius:3px;background:#2a323f;margin-bottom:8px} .pv-legal .doc i:nth-child(1){width:55%;background:var(--gold-mid);opacity:.75} .pv-legal .doc i:nth-child(4){width:80%}.pv-legal .doc i:nth-child(5){width:48%} .pv-legal .seal{position:absolute;right:-9px;bottom:-9px;width:32px;height:32px;border-radius:50%;background:var(--metal);display:grid;place-items:center;color:#1c1305;font-weight:800;box-shadow:0 6px 14px -6px rgba(235,169,125,.7)} /* ---------- PACKAGES ---------- */ .pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch} @media(max-width:860px){.pkg-grid{grid-template-columns:1fr; max-width:460px; margin:0 auto}} .pkg .bezel-core{padding:30px 28px 32px; display:flex; flex-direction:column; height:100%; position:relative} .pkg.feat .bezel{background:linear-gradient(180deg,rgba(248,216,180,.17),rgba(235,169,125,.05)); border-color:rgba(248,216,180,.22); box-shadow:0 1px 0 rgba(14,20,32,.06) inset, 0 36px 80px -38px rgba(235,169,125,.45)} .pkg .tier{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-mid)} .pkg .pop{position:absolute; top:0; left:28px; transform:translateY(-50%); display:inline-flex; align-items:center; gap:8px; font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); background:var(--bg2); padding:6px 13px; border:1px solid rgba(235,169,125,.32); border-radius:8px} .pkg .pop::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px var(--gold)} .pkg h3{font-size:1.55rem; font-weight:600; margin:14px 0 6px} .pkg .tag{color:var(--mute); font-size:.9rem; min-height:42px} .pkg .price{margin:18px 0 22px; display:flex; align-items:baseline; gap:8px} .pkg .price .f{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.66rem; color:var(--mute)} .pkg .price .v{font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-size:2.6rem; line-height:1} .pkg .price:has(+ .price-mo){margin-bottom:6px} .pkg .price-mo{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.82rem; color:var(--mute); margin:0 0 22px} .pkg .price-mo b{color:var(--soft); font-weight:600} .pkg ul{list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1} .pkg li{display:flex; gap:11px; font-size:.9rem; color:var(--soft); line-height:1.45} .pkg li svg{flex:none; width:16px;height:16px; margin-top:3px; stroke:var(--gold); fill:none; stroke-width:1.8} .pkg .btn{width:100%; justify-content:space-between} .pkg-custom{margin-top:22px; text-align:center; color:var(--mute); font-size:.92rem} .pkg-custom a{color:var(--gold); border-bottom:1px solid rgba(235,169,125,.4)} /* ---------- PACKAGES · buyable services ---------- */ .pack-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch} @media(max-width:900px){.pack-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.pack-grid{grid-template-columns:1fr; max-width:430px; margin:0 auto}} .pack .bezel-core{padding:10px 10px 26px; display:flex; flex-direction:column; height:100%; position:relative; overflow:hidden; transition:transform .5s var(--ease), border-color .4s} .pack:hover .bezel-core{transform:translateY(-6px); border-color:var(--line2)} .pack.feat .bezel{background:linear-gradient(180deg,rgba(248,216,180,.15),rgba(235,169,125,.045)); border-color:rgba(248,216,180,.22); box-shadow:0 1px 0 rgba(14,20,32,.06) inset, 0 34px 76px -40px rgba(235,169,125,.42)} .pack-prev{position:relative; height:146px; border-radius:12px; overflow:hidden; margin-bottom:16px; background:linear-gradient(180deg,#10141c,#0b0e14); border:1px solid var(--line)} .pack-prev *{box-sizing:border-box} .pack-prev svg.pack-svg{width:100%; height:100%; display:block} .pack .pop{position:absolute; top:20px; right:20px; z-index:3; display:inline-flex; align-items:center; gap:7px; font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.54rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); background:var(--bg2); padding:6px 12px; border:1px solid rgba(235,169,125,.32); border-radius:8px} .pack .pop::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px var(--gold)} .pack-body{padding:0 13px; display:flex; flex-direction:column; flex:1} .pack-top{display:flex; align-items:baseline; gap:10px; margin-bottom:8px} .pack-top .num{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.72rem; color:var(--gold-mid); flex:none} .pack-top h3{font-size:1.16rem; font-weight:600; line-height:1.15} .pack .tag{color:var(--mute); font-size:.88rem; line-height:1.5; min-height:38px} .pack .price{margin:14px 0 2px; display:flex; align-items:baseline; gap:8px} .pack .price .f{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.66rem; color:var(--mute)} .pack .price .v{font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-size:2.15rem; line-height:1} .pack .price-mo{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.8rem; color:var(--mute); margin:2px 0 0} .pack .price-mo b{color:var(--soft); font-weight:600} .pack ul{list-style:none; display:flex; flex-direction:column; gap:9px; margin:16px 0 22px; flex:1} .pack li{display:flex; gap:10px; font-size:.85rem; color:var(--soft); line-height:1.4} .pack li svg{flex:none; width:15px; height:15px; margin-top:3px; stroke:var(--gold); fill:none; stroke-width:1.8} .pack .btn{width:100%; justify-content:space-between} /* ---------- NICHES ---------- */ .niche-grid{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:920px; margin:0 auto} .niche{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:100px; background:rgba(14,20,32,.02); border:1px solid var(--line2); color:var(--soft); font-size:.94rem; transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)} .niche::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--metal); box-shadow:0 0 8px rgba(235,169,125,.5)} .niche:hover{border-color:var(--gold-mid); color:var(--paper); transform:translateY(-2px)} @media(max-width:560px){.niche{padding:10px 16px; font-size:.88rem}} /* ---------- illustration micro-animations ---------- */ @media(prefers-reduced-motion:no-preference){ .pack .pack-svg{transition:transform .55s var(--ease), filter .4s var(--ease)} .pack:hover .pack-svg{transform:scale(1.04); filter:brightness(1.1)} .pv-grow{stroke-dasharray:172} .pack:hover .pv-grow{animation:pvgrow 1.5s var(--ease)} @keyframes pvgrow{from{stroke-dashoffset:172}to{stroke-dashoffset:0}} .pack.feat .pack-prev::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(58% 58% at 50% 42%, rgba(219,176,132,.16), transparent 68%); animation:pvglow 3.6s ease-in-out infinite} @keyframes pvglow{0%,100%{opacity:.35} 50%{opacity:1}} } /* ---------- WORK ---------- */ .case-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px} @media(max-width:860px){.case-grid{grid-template-columns:1fr}} .case .bezel-core{padding:9px 9px 30px; position:relative; transition:transform .55s var(--ease), border-color .4s, box-shadow .4s; overflow:hidden} .case:hover .bezel-core{transform:translateY(-7px); border-color:var(--line2); box-shadow:inset 0 1px 1px rgba(14,20,32,.06), 0 0 70px -34px rgba(235,169,125,.6)} .preview{position:relative; height:210px; border-radius:14px; overflow:hidden; margin-bottom:24px; background:linear-gradient(180deg,#11141b,#0b0d12); border:1px solid var(--line)} .preview *{box-sizing:border-box} .case-body{padding:0 18px} .case-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px} .case-id{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.72rem; color:var(--mute); transition:color .4s} .case:hover .case-id{color:var(--gold)} .case-tag{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.66rem; letter-spacing:.08em; color:var(--gold-mid)} .case h3{font-size:1.7rem; font-weight:600; margin-bottom:12px} .case p{color:var(--mute); font-size:.92rem; line-height:1.6; margin-bottom:22px} .chips{display:flex; flex-wrap:wrap; gap:8px} .chip{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.68rem; color:var(--soft); border:1px solid var(--line2); border-radius:7px; padding:5px 11px; background:rgba(14,20,32,.025)} .soon{position:absolute; top:12px; right:12px; z-index:3; font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.56rem; letter-spacing:.1em; color:var(--mute); background:rgba(8,10,14,.7); border:1px solid var(--line2); border-radius:100px; padding:3px 10px} /* preview — szybko */ .pv-szy .map{position:absolute; inset:0; background:radial-gradient(60% 60% at 28% 34%, rgba(126,140,168,.12), transparent 70%), linear-gradient(180deg,#11151d,#0b0e14)} .pv-szy .route{position:absolute; left:12%; top:26%; width:54%; height:46%} .pv-szy .route svg{width:100%;height:100%} .pv-szy .card{position:absolute; right:18px; top:50%; transform:translateY(-50%); width:38%; background:rgba(8,10,14,.82); border:1px solid var(--line2); border-radius:10px; padding:13px} .pv-szy .card .t{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.52rem; color:var(--mute); margin-bottom:8px} .pv-szy .card .b{height:8px; border-radius:4px; background:#222936; margin-bottom:7px} .pv-szy .card .mini{height:20px; border-radius:6px; background:var(--metal); margin-top:11px} /* preview — sher */ .pv-sher .grid{position:absolute; inset:16px; display:grid; grid-template-columns:34% 1fr; gap:10px} .pv-sher .col{background:linear-gradient(160deg,#1a2028,#12161d); border:1px solid var(--line); border-radius:9px; padding:11px} .pv-sher .ava{width:26px;height:26px;border-radius:8px; background:var(--metal); margin-bottom:10px} .pv-sher .ln{height:6px;border-radius:3px; background:#262d39; margin-bottom:7px} .pv-sher .ln.s{width:60%} .pv-sher .kpi{display:flex; gap:8px; margin-bottom:10px} .pv-sher .kpi div{flex:1; background:rgba(248,216,180,.08); border:1px solid rgba(248,216,180,.18); border-radius:8px; height:34px; position:relative} .pv-sher .kpi div::after{content:""; position:absolute; left:8px; top:9px; width:50%; height:5px; border-radius:3px; background:var(--gold-mid); opacity:.7} .pv-sher .row{height:9px; border-radius:4px; background:#1d2330; margin-bottom:8px} .pv-sher .pill{position:absolute; right:22px; bottom:22px; font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.56rem; color:#1c1305; background:var(--metal); padding:3px 9px; border-radius:100px; font-weight:500} /* ---------- PROCESS ---------- */ .steps .bezel-core{overflow:hidden} .step{display:grid; grid-template-columns:96px 1fr; gap:28px; padding:30px 32px; align-items:start; transition:background .4s} .step + .step{border-top:1px solid var(--line)} .step:hover{background:rgba(14,20,32,.012)} @media(max-width:560px){.step{grid-template-columns:1fr; gap:10px; padding:26px 22px}} .step .sn{font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-size:2.6rem; line-height:.9; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent} .step h3{font-size:1.2rem; font-weight:600; margin-bottom:7px} .step p{color:var(--mute); font-size:.93rem; line-height:1.6; max-width:60ch} /* ---------- WHY ---------- */ .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center} @media(max-width:900px){.why-grid{grid-template-columns:1fr; gap:42px}} .why h2{font-size:clamp(1.9rem,3.4vw,2.5rem); font-weight:600; line-height:1.1; margin:18px 0 22px} .why p{color:var(--mute); line-height:1.7; margin-bottom:16px; max-width:48ch} .metrics{display:grid; grid-template-columns:1fr 1fr; gap:14px} .metric .bezel-core{padding:28px 24px} .metric .big{font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-size:2.6rem; line-height:1; margin-bottom:10px; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent} .metric p{color:var(--mute); font-size:.86rem; margin:0} /* ---------- CONTACT ---------- */ .contact{padding:140px 0; border-top:1px solid rgba(14,20,32,.06); overflow:hidden; text-align:center; position:relative} .contact .glow{position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:80%; height:130%; z-index:0; pointer-events:none; background:radial-gradient(50% 50% at 50% 38%, rgba(235,169,125,.22), transparent 68%); filter:blur(40px)} .contact .wrap{position:relative; z-index:2} .contact h2{font-size:clamp(2.2rem,5.4vw,3.9rem); font-weight:700; line-height:1.04; margin-bottom:22px} .contact .lead{color:var(--soft); font-size:1.1rem; max-width:46ch; margin:0 auto 38px} .contact .h-cta{justify-content:center; margin-top:0} /* ---------- LEAD FORM ---------- */ .lf-wrap{max-width:560px; margin:40px auto 0} .lf{display:block} .lf .bezel-core{padding:26px 24px 24px; text-align:left} .lf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media(max-width:560px){.lf-row{grid-template-columns:1fr}} .lf-field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px} .lf-lbl{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--mute)} .lf input,.lf textarea{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.95rem; color:var(--paper); background:rgba(14,20,32,.03); border:1px solid var(--line2); border-radius:12px; padding:13px 15px; width:100%; transition:border-color .3s var(--ease), background .3s; resize:vertical} .lf input::placeholder,.lf textarea::placeholder{color:var(--mute); opacity:.65} .lf input:focus,.lf textarea:focus{outline:none; border-color:var(--gold-mid); background:rgba(14,20,32,.05)} .lf-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none} .lf-submit{width:100%; justify-content:space-between; margin-top:4px} .lf.sending .lf-submit{opacity:.65; pointer-events:none} .lf-consent{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:.86rem; line-height:1.45; color:var(--soft); cursor:pointer} .lf-consent input{flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--gold); cursor:pointer} .lf-consent a{color:var(--gold); text-decoration:underline; text-underline-offset:2px} .lf-status{min-height:20px; margin-top:14px; font-size:.9rem; text-align:center; color:var(--mute); transition:color .3s} .lf-status.ok{color:var(--gold)} .lf-status.err{color:#E08A6A} .lf-alt{text-align:center; margin-top:20px; font-size:.86rem; color:var(--mute)} .lf-alt a{color:var(--gold); border-bottom:1px solid rgba(235,169,125,.35); transition:border-color .3s} .lf-alt a:hover{border-color:var(--gold)} /* ---------- SENIOR PASS: spotlight · depth · motion ---------- */ h1,h2,h3{text-wrap:balance} .lead,.h-sub,.s-head .lead,.svc p,.pkg .tag,.case p,.why p{text-wrap:pretty} /* cursor-tracking spotlight border on every card */ .bezel{position:relative} .bezel::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; z-index:2; background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(216,176,132,.6), transparent 42%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; transition:opacity .45s var(--ease)} .bezel:hover::after{opacity:1} /* featured tier — emphasis without the clichéd height/pill */ .pkg.feat .bezel-core{padding-top:42px} .pkg.feat .price .v{font-size:3rem} /* staggered cascade for card grids */ @media(prefers-reduced-motion:no-preference){ .js .svc-grid .svc:nth-child(2),.js .pkg-grid .pkg:nth-child(2){transition-delay:.08s} .js .svc-grid .svc:nth-child(3),.js .pkg-grid .pkg:nth-child(3){transition-delay:.16s} .js .svc-grid .svc:nth-child(4){transition-delay:.24s} .js .svc-grid .svc:nth-child(5){transition-delay:.32s} .js .svc-grid .svc:nth-child(6){transition-delay:.40s} .js .stat-grid .stat:nth-child(2){transition-delay:.08s} .js .stat-grid .stat:nth-child(3){transition-delay:.16s} .js .stat-grid .stat:nth-child(4){transition-delay:.24s} .js .case-grid .case:nth-child(2){transition-delay:.1s} } /* ---------- FOOTER ---------- */ footer{background:var(--graphite-2); border-top:0; padding:44px 0 38px; margin-top:60px} .foot{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; color:var(--mute); font-size:.85rem} /* ---------- rich footer ---------- */ .ft{border-top:1px solid var(--line); padding:66px 0 34px; margin-top:56px} .ft-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:40px} @media(max-width:820px){.ft-grid{grid-template-columns:1fr 1fr; gap:34px 26px}} .ft-logo{font-family:"Space Grotesk","Manrope",system-ui,sans-serif; font-weight:600; font-size:1.14rem; color:var(--paper); display:inline-flex; align-items:center; gap:9px; text-decoration:none} .ft-logo img{width:26px; height:26px; object-fit:contain} .ft-desc{color:var(--mute); font-size:.9rem; line-height:1.6; max-width:32ch; margin-top:16px} .ft-col{display:flex; flex-direction:column; gap:12px} .ft-h{font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.64rem; text-transform:uppercase; letter-spacing:.18em; color:var(--gold-dp); margin-bottom:3px} .ft-col a{color:var(--soft); font-size:.9rem; text-decoration:none; transition:color .3s var(--ease)} .ft-col a:hover{color:var(--paper)} .ft-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px 20px; flex-wrap:wrap; margin-top:52px; padding-top:24px; border-top:1px solid var(--line); color:var(--mute); font-size:.8rem} .ft-langs{color:var(--soft); letter-spacing:.06em} @media(max-width:560px){.ft-langs{display:none}} .foot .brand{font-size:1rem} /* ---------- REVEAL ---------- */ .reveal{opacity:1} @media(prefers-reduced-motion:no-preference){ .js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)} .js .reveal.in{opacity:1; transform:none} } /* ---------- TOOLS MARQUEE ---------- */ .marquee{position:relative; border-top:1px solid rgba(14,20,32,.06); border-bottom:1px solid rgba(14,20,32,.06); padding:30px 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)} .marquee .lbl{text-align:center; font-family:"Hanken Grotesk","Manrope",system-ui,sans-serif; font-size:.66rem; text-transform:uppercase; letter-spacing:.24em; color:var(--mute); margin-bottom:22px} .mq-track{display:flex; gap:48px; width:max-content; animation:mqscroll 34s linear infinite} .marquee:hover .mq-track{animation-play-state:paused} @media(prefers-reduced-motion:reduce){.mq-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto}} .mq-item{display:inline-flex; align-items:center; gap:11px; font-family:"Space Grotesk","Manrope",system-ui,sans-serif; font-weight:600; font-size:1.12rem; color:var(--soft); white-space:nowrap} .mq-item .d{width:6px; height:6px; border-radius:50%; background:var(--gold-mid); opacity:.85; flex:none} @keyframes mqscroll{to{transform:translateX(-50%)}} /* ---------- STATS BAND ---------- */ .statband{border-top:1px solid rgba(14,20,32,.06); padding:74px 0} .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px} @media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr); gap:28px 16px}} .stat .n{font-family:"Instrument Serif","Playfair Display",Georgia,serif; font-size:clamp(2.7rem,5vw,3.7rem); line-height:1; margin-bottom:12px; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent} .stat .l{color:var(--mute); font-size:.92rem; line-height:1.45; max-width:22ch} :focus-visible{outline:2px solid var(--gold-mid); outline-offset:3px; border-radius:4px} /* ===== Светлая тема: чистка фона ===== Фоновые фотографии под секциями на белом давали грязный призрак — местами видно, местами нет. Чистый белый читается дороже и не спорит с текстом. Узор-обои на тёмном был текстурой, на белом читается как каракули. */ /* Узор-обои (горы/облака/солнце) убран совсем: на тёмном был текстурой, на белом читается как детские каракули по всему полю. */ /* ⚠️ 09.08.2026: выключатель узора убран — узор снова нужен (даёт объём). Вид задаёт lovai-light.css, раздел 20. Не возвращать display:none сюда: страницы, которые не подключают светлый слой, останутся без фактуры. */ /* ⚠️ 07.08.2026: подсветка страницы и зернистость переехали в lovai-light.css (раздел 20 MIDNIGHT) и задаются там в тон тёмного холста. Здесь стояли светлые значения (#F4F7FA) — они рисовали белое пятно наверху и слепили на телефоне. Не возвращать: значение должно быть в ОДНОМ месте. */ /* Плотность под светлую тему: у секций было по 144px пустоты сверху и снизу. На тёмном фоне это читалось как воздух, на белом — как дыры (у отдельных секций до 56%% высоты составляли отступы). Ужимаем. */ /* ⚠️ 07.08.2026: строку `.band{padding:88px}` отсюда убрали — ритм секций на всём сайте задаёт lovai-light.css (96px десктоп / 64px телефон). Пока правило жило в двух файлах, страницы дышали по-разному. */ #statband{ padding-top:52px; padding-bottom:52px } .s-head{ margin-bottom:38px } /* ---------- FAQ (перенесено из инлайна главной 07.08.2026) ---------- Правила жили ТОЛЬКО в