/* Белый Луг — site.css. Строго по брендбуку v2 (vault/brandbook). Токены — первыми. */
:root{
  color-scheme:light;
  --milk-0:#FFFFFF; --milk-50:#FBF8F2; --milk-100:#F6EFE3; --milk-200:#EADFCF; --milk-300:#D9CDB9;
  --ink-900:#2B2623; --ink-700:#4A4440; --ink-500:#7C746E;
  --red-700:#B8231B; --red-600:#E12D22; --red-100:#FDE8E5;
  --sky-500:#2AA7E0; --sky-100:#E3F3FB;
  --ok:#2E7D4F; --warn:#C98A1B; --err:#B3412F;
  --font-body:"Golos Text","Segoe UI",Roboto,system-ui,sans-serif;
  --font-display:"Pacifico",cursive;
  --display:clamp(3rem,1.8rem + 5vw,6rem); --h1:clamp(2.5rem,1.8rem + 3vw,4rem); --h2:clamp(2rem,1.5rem + 2vw,3rem); --h3:clamp(1.375rem,1.2rem + .8vw,1.75rem);
  --lead:1.25rem; --body:1.0625rem; --small:.9375rem; --caption:.8125rem;
  --r-input:10px; --r-card:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(43,38,35,.06); --shadow-md:0 8px 24px rgba(43,38,35,.08); --shadow-lg:0 24px 64px rgba(43,38,35,.12); --shadow-red:0 10px 28px rgba(225,45,34,.28);
  --t-fast:150ms; --t-base:300ms; --t-slow:600ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-pour:cubic-bezier(.2,.8,.2,1);
  --container:1240px; --gutter:24px; --side:20px;
}
@media (min-width:768px){ :root{ --side:40px } }
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--milk-0); color:var(--ink-900); font-family:var(--font-body); font-size:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
@media (max-width:480px){ body{font-size:1rem} }
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:700; letter-spacing:-.02em; line-height:1.1}
h1{font-size:var(--h1); font-weight:800; letter-spacing:-.025em; line-height:1.05}
h2{font-size:var(--h2)} h3{font-size:var(--h3); letter-spacing:-.01em; line-height:1.2} h4{font-size:1.15rem; line-height:1.25}
p{margin:0}
a{color:var(--red-600); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.18em}
a:hover{color:var(--red-700)}
img,video{max-width:100%; height:auto; display:block}
:focus-visible{outline:3px solid var(--red-600); outline-offset:3px; border-radius:6px}
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--side)}
.lead{font-size:var(--lead); line-height:1.5; color:var(--ink-700); max-width:62ch}
.small{font-size:var(--small)} .muted{color:var(--ink-500)} .num{font-variant-numeric:tabular-nums}
.cap{font-size:var(--caption); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500)}
.script{font-family:var(--font-display); font-weight:400; letter-spacing:0; line-height:1.15}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--milk-0); padding:10px 16px; border-radius:var(--r-pill); z-index:100} .skip:focus{left:16px}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--milk-0) 86%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--milk-200)}
.site-header .container{display:flex; align-items:center; gap:20px; min-height:72px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--red-600)}
.brand svg{width:20px; height:28px; flex:none} .brand .script{font-size:1.7rem; line-height:1; white-space:nowrap}
.nav{display:none; gap:2px; margin-left:8px}
.nav a{display:inline-flex; align-items:center; min-height:48px; padding:0 12px; white-space:nowrap; border-radius:var(--r-pill); text-decoration:none; color:var(--ink-700); font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{background:var(--milk-100); color:var(--ink-900)}
.header-cta{margin-left:auto; display:flex; align-items:center; gap:12px}
.phone{font-weight:700; text-decoration:none; color:var(--ink-900); display:inline-flex; align-items:center; gap:8px; min-height:48px; font-variant-numeric:tabular-nums; white-space:nowrap}
.phone svg{width:20px; height:20px; color:var(--red-600)}
.menu-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:48px; padding:0 14px; border-radius:var(--r-pill); border:1.5px solid var(--milk-200); background:var(--milk-0); font:inherit; font-weight:600; cursor:pointer}
@media (min-width:1024px){ .nav{display:flex} .menu-btn{display:none} }
@media (max-width:1023px){ .header-cta .btn{display:none} }
@media (min-width:1024px) and (max-width:1279px){ .header-cta .btn{display:none} .nav a{padding:0 9px; font-size:var(--small)} }
@media (max-width:640px){ .site-header .container{gap:10px} .brand .script{font-size:1.4rem} .brand svg{width:16px; height:22px} .header-cta{gap:6px} .header-cta .phone{font-size:0; gap:0; min-width:48px; justify-content:center} .header-cta .phone svg{width:24px; height:24px} .menu-btn{padding:0 12px} }
.mobile-nav{display:none; background:var(--milk-0); border-bottom:1px solid var(--milk-200)}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav a{display:flex; align-items:center; min-height:56px; padding:0 var(--side); text-decoration:none; color:var(--ink-900); font-weight:600; border-top:1px solid var(--milk-200); font-size:1.1rem}
.mobile-nav .btn{margin:16px var(--side) 20px}

/* ---------- buttons ---------- */
.btn{white-space:nowrap; position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border-radius:var(--r-pill); border:0; font:inherit; font-weight:700; font-size:var(--body); text-decoration:none; cursor:pointer; color:var(--milk-0); background:var(--red-600); box-shadow:var(--shadow-red); transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base)}
.btn::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%); transition:transform 700ms var(--ease-out); pointer-events:none}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(225,45,34,.34); background:var(--red-700); color:var(--milk-0)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-milk{background:var(--milk-0); color:var(--red-600); box-shadow:var(--shadow-md); border:1.5px solid var(--milk-200)}
.btn-milk:hover{background:var(--milk-0); color:var(--red-700); box-shadow:var(--shadow-lg); border-color:var(--red-100)}
.btn-milk::after{background:linear-gradient(115deg,transparent 30%,rgba(225,45,34,.12) 50%,transparent 70%)}
.btn-ghost{background:transparent; color:var(--ink-900); box-shadow:none} .btn-ghost:hover{background:var(--milk-100); color:var(--ink-900); box-shadow:none; transform:none} .btn-ghost::after{display:none}
.btn-star{background:var(--milk-0); color:var(--ink-900); box-shadow:none; padding:2px}
.btn-star::before{content:""; position:absolute; inset:-100%; background:conic-gradient(from 0deg, transparent 0 60%, var(--red-600) 75%, transparent 90%); animation:spin 4s linear infinite; z-index:-2}
.btn-star span{display:inline-flex; align-items:center; min-height:50px; padding:0 26px; border-radius:inherit; background:var(--milk-0)}
.btn-star::after{display:none}
.btn-lg{min-height:62px; padding:0 34px; font-size:1.125rem}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--milk-300); color:var(--ink-500); box-shadow:none; pointer-events:none}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.on-red .btn{background:var(--milk-0); color:var(--red-600); box-shadow:0 10px 28px rgba(0,0,0,.18)} .on-red .btn:hover{background:var(--milk-50); color:var(--red-700)}
.on-red .btn::after{background:linear-gradient(115deg,transparent 30%,rgba(225,45,34,.15) 50%,transparent 70%)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- sections, bands, waves ---------- */
section{position:relative; padding-block:clamp(64px,8vw,104px)}
.band-milk{background:var(--milk-100)}
.band-red{background:var(--red-600); color:var(--milk-0); overflow:visible}
.band-red h2,.band-red h3,.band-red .cap{color:var(--milk-0)} .band-red .lead{color:rgba(255,255,255,.9)} .band-red .muted{color:rgba(255,255,255,.72)}
.wave{display:block; width:100%; height:56px; line-height:0} @media (min-width:768px){ .wave{height:84px} }
.wave svg{display:block; width:100%; height:100%}
.sec-head{display:grid; gap:14px; margin-bottom:40px; max-width:72ch}
.grid{display:grid; gap:var(--gutter)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.card{background:var(--milk-0); border:1px solid var(--milk-200); border-radius:var(--r-card); padding:24px}
.card-milk{background:var(--milk-100); border-color:transparent}
.badge{display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 12px; border-radius:var(--r-pill); font-weight:700; font-size:var(--caption); letter-spacing:.06em; text-transform:uppercase}
.badge-red{background:var(--red-100); color:var(--red-700)} .badge-sky{background:var(--sky-100); color:#146B94} .badge-milk{background:var(--milk-100); color:var(--ink-700)} .badge-white{background:var(--milk-0); color:var(--red-700)}
ul.list{margin:0; padding-left:1.2em; display:grid; gap:8px}
table{border-collapse:collapse; width:100%} th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--milk-200); vertical-align:top}
th{font-weight:700; color:var(--ink-700); font-size:var(--caption); letter-spacing:.06em; text-transform:uppercase}
.tbl{overflow-x:auto; border:1px solid var(--milk-200); border-radius:var(--r-card); background:var(--milk-0)}
.tbl table{min-width:560px}
.prose{max-width:68ch; display:grid; gap:18px} .prose h2{margin-top:24px} .prose h3{margin-top:12px} .prose ul{margin:0; padding-left:1.2em; display:grid; gap:8px}

/* ---------- milk drops on red ---------- */
.drops{position:absolute; inset:0; pointer-events:none; z-index:2; overflow:visible}
.drops .drop-big{position:absolute; right:6%; top:-58px; width:clamp(72px,9vw,132px); filter:drop-shadow(0 18px 24px rgba(120,20,14,.35)); animation:dropfloat 7s var(--ease-in-out) infinite alternate}
.drops .drop-sm{position:absolute; width:26px; filter:drop-shadow(0 8px 12px rgba(120,20,14,.3))}
.drops .drop-sm.a{left:12%; top:-14px; animation:dripfall 5.5s var(--ease-in-out) infinite}
.drops .drop-sm.b{left:38%; top:-8px; width:18px; animation:dripfall 7s var(--ease-in-out) 1.2s infinite}
.drops .drop-sm.c{right:22%; top:-10px; width:16px; animation:dripfall 6.3s var(--ease-in-out) 2.4s infinite}
@keyframes dropfloat{from{transform:translateY(0) rotate(-3deg)} to{transform:translateY(10px) rotate(3deg)}}
@keyframes dripfall{0%,55%{transform:translateY(0) scaleY(1)} 70%{transform:translateY(8px) scaleY(1.18)} 85%{transform:translateY(28px) scaleY(.92); opacity:1} 100%{transform:translateY(46px) scaleY(.9); opacity:0}}
@media (max-width:767px){ .drops .drop-big{right:4%; top:-30px} }

/* ---------- hero ---------- */
.hero{padding-block:24px 0}
.hero-stage{position:relative; border-radius:28px; overflow:hidden; background:linear-gradient(135deg,#FFFFFF 0%,#F6EFE3 45%,#FDE8E5 100%); border:1px solid var(--milk-200); box-shadow:var(--shadow-lg); isolation:isolate}
.hero-stage .shader{position:absolute; inset:0; z-index:0}
.hero-stage .grain{position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply; z-index:1; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:24px; padding:40px 24px 0; align-items:end}
@media (min-width:1024px){ .hero-inner{grid-template-columns:1.05fr 1fr; padding:64px 56px 0} }
.hero-copy{padding-bottom:40px} @media (min-width:1024px){ .hero-copy{padding-bottom:64px} }
.hero-copy .script{font-size:clamp(2.6rem,1.6rem + 4vw,5.4rem); white-space:nowrap; color:var(--red-600); line-height:1.05; margin:0 0 12px}
.hero-copy h1{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.3rem); font-weight:700; letter-spacing:-.02em; max-width:22ch}
.hero-copy .lead{margin-top:16px; max-width:48ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; align-items:center}
.hero-art{position:relative; min-height:300px; display:grid; align-items:end; justify-items:center}
@media (min-width:1024px){ .hero-art{min-height:420px} }
.hero-art video{display:block; width:min(112%,720px); max-width:none; margin-right:-8%; -webkit-mask-image:radial-gradient(78% 78% at 55% 58%, #000 38%, transparent 72%); mask-image:radial-gradient(78% 78% at 55% 58%, #000 38%, transparent 72%)}
.hero-meta{display:flex; gap:32px; flex-wrap:wrap; margin-top:28px; padding-inline:4px}
.hero-meta div{display:grid; gap:2px} .hero-meta b{font-weight:700}

/* ---------- inner page hero ---------- */
.page-hero{padding-block:48px 8px}
.page-hero .cap{margin-bottom:12px} .page-hero .lead{margin-top:16px}
.page-hero.with-photo .container{display:grid; gap:32px; align-items:center}
@media (min-width:1024px){ .page-hero.with-photo .container{grid-template-columns:1fr 1fr} }
.page-hero .photo{border-radius:28px; overflow:hidden; aspect-ratio:4/3} .page-hero .photo img{width:100%; height:100%; object-fit:cover}
.breadcrumbs{display:flex; gap:8px; flex-wrap:wrap; font-size:var(--small); color:var(--ink-500); margin-bottom:16px}
.breadcrumbs a{color:var(--ink-500); text-decoration:none} .breadcrumbs a:hover{color:var(--red-600)}

/* ---------- wave cards ---------- */
.wave-card{position:relative; background:var(--milk-0); border-radius:var(--r-card); overflow:hidden; border:1px solid var(--milk-200); text-decoration:none; color:inherit; display:grid; grid-template-rows:auto 1fr; transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out)}
.wave-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); color:inherit}
.wave-card .top{height:190px; background-size:cover; background-position:center; position:relative}
.wave-card .top svg{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:44px}
.wave-card .body{padding:20px 22px 24px; display:grid; gap:8px; align-content:start}
.wave-card .body .more{color:var(--red-600); font-weight:700; margin-top:6px}

/* ---------- products ---------- */
.products{display:grid; gap:var(--gutter); grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.product{display:grid; grid-template-rows:auto 1fr auto; background:var(--milk-0); border:1px solid var(--milk-200); border-radius:var(--r-card); overflow:hidden; transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out)}
.product:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.product .ph{aspect-ratio:1; background:radial-gradient(70% 60% at 50% 90%, var(--milk-100), var(--milk-0) 75%) center/cover; position:relative; display:block}
.product .ph .badge{position:absolute; left:14px; top:14px}
.product .body{padding:18px 22px; display:grid; gap:10px} .product h3{font-size:1.15rem; line-height:1.25} .product h3 a{color:inherit; text-decoration:none} .product h3 a:hover{color:var(--red-600)}
.product dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:var(--small)} .product dt{color:var(--ink-500)} .product dd{margin:0; font-variant-numeric:tabular-nums}
.product .foot{padding:16px 22px; border-top:1px solid var(--milk-200); display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.product .foot .btn{min-height:46px; padding:0 20px; font-size:var(--small)}
.product-hero{display:grid; gap:32px; align-items:start} @media (min-width:1024px){ .product-hero{grid-template-columns:1fr 1fr} }
.product-hero .photo{border-radius:28px; overflow:hidden; aspect-ratio:1} .product-hero .photo img{width:100%; height:100%; object-fit:cover}
.specs{display:grid; gap:0; border:1px solid var(--milk-200); border-radius:var(--r-card); overflow:hidden; background:var(--milk-0)}
.specs div{display:grid; grid-template-columns:1fr 1.4fr; gap:12px; padding:14px 18px; border-top:1px solid var(--milk-200)} .specs div:first-child{border-top:0}
.specs dt{color:var(--ink-500); font-size:var(--small)} .specs dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- steps, stats ---------- */
.steps{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); counter-reset:step; position:relative}
.step{background:var(--milk-0); border:1px solid var(--milk-200); border-radius:var(--r-card); padding:22px; display:grid; gap:8px; align-content:start}
.step::before{counter-increment:step; content:counter(step); font-family:var(--font-display); color:var(--red-600); font-size:1.8rem; line-height:1}
.step b{font-size:1.1rem} .step p{color:var(--ink-700); font-size:var(--small)}
.path{position:relative; height:70px; margin:-20px 0 8px; overflow:hidden} .path svg{position:absolute; inset:0; width:100%; height:100%}
.path path{stroke:var(--sky-500); stroke-width:3; stroke-dasharray:10 12; fill:none; stroke-linecap:round; animation:dash 12s linear infinite}
@keyframes dash{to{stroke-dashoffset:-220}}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:24px}
.stats div{display:grid; gap:6px} .stats b{font-size:clamp(2.4rem,1.6rem + 2.4vw,3.6rem); font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}

/* ---------- form ---------- */
.request{display:grid; gap:32px; align-items:start} @media (min-width:1024px){ .request{grid-template-columns:1.1fr 1fr} }
.form{display:grid; gap:16px; background:var(--milk-0); border:1px solid var(--milk-200); border-radius:28px; padding:28px; position:relative; z-index:1}
.field{display:grid; gap:8px} .field label{font-weight:700; font-size:var(--small)}
.field input,.field textarea,.field select{font:inherit; font-size:var(--body); min-height:54px; padding:12px 18px; border-radius:var(--r-input); border:1.5px solid var(--milk-300); background:var(--milk-0); color:var(--ink-900); width:100%; transition:border-color var(--t-fast), box-shadow var(--t-fast)}
.field textarea{min-height:120px; resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--ink-500)} .field input:focus,.field textarea:focus{border-color:var(--red-600); outline:0; box-shadow:0 0 0 4px var(--red-100)}
.field .hint{font-size:var(--small); color:var(--ink-500)} .field.err input,.field.err textarea{border-color:var(--err)} .field.err .hint{color:var(--err)}
.form .row{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.form .hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}
.form-note{font-size:var(--small); color:var(--ink-500)}
.alert{border-radius:var(--r-card); padding:18px 22px; font-weight:600} .alert-ok{background:#E6F4EB; color:#1E5B3C} .alert-err{background:var(--red-100); color:var(--red-700)}
.drops-bg{position:absolute; inset:0; z-index:0; border-radius:28px; overflow:hidden; pointer-events:none}

/* ---------- footer ---------- */
.site-footer{background:var(--red-600); color:var(--milk-0); padding-block:8px 32px}
.site-footer a{color:var(--milk-0)} .site-footer a:hover{color:var(--milk-100)}
.site-footer .cols{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); padding-block:40px 32px}
.site-footer .brand{color:var(--milk-0)} .site-footer .brand .script{font-size:1.9rem}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.site-footer ul a{text-decoration:none; display:inline-flex; min-height:32px; align-items:center}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.25); padding-top:20px; font-size:var(--small); color:rgba(255,255,255,.8); display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between}
.footer-wave{background:var(--milk-0); line-height:0} .footer-wave svg{display:block; width:100%; height:56px; color:var(--red-600)} @media (min-width:768px){ .footer-wave svg{height:84px} }

/* ---------- misc ---------- */
.reveal{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important} html{scroll-behavior:auto} .btn::after{display:none} }
@media print{ .site-header,.site-footer,.hero-art,.drops{display:none} }