/* Мадлен — сайт. Шрифты свои, с этого же домена (без Google Fonts). */
@font-face{font-family:"Oswald";src:url(/fonts/Oswald-Light.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Oswald";src:url(/fonts/Oswald-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Oswald";src:url(/fonts/Oswald-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Oswald";src:url(/fonts/Oswald-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fonts/CormorantGaramond-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fonts/CormorantGaramond-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#ECE6DA; --sheet:#F5F2EB; --ink:#16130F; --ink2:#3A342C; --muted:#5F574D;
  --rule:#BDB4A6; --rule2:#D3CBBE; --brown:#6B4F3A; --dark:#1D1A13; --cream:#F2ECE0;
  --brass:#C6A36A; --brass2:#E2C58F;
  --pad:96px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
.sep{display:none}
body{margin:0;background:var(--paper) url(/img/grain.png);color:var(--ink);
  font-family:"Cormorant",Georgia,serif;font-size:20px;line-height:1.45;background-blend-mode:multiply;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brown)}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
.caps{font-family:"Oswald",sans-serif;text-transform:uppercase}
.eyebrow{font-family:"Oswald",sans-serif;font-weight:300;font-size:15px;letter-spacing:.42em;color:var(--muted);text-transform:uppercase}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:64px;padding:0 36px;
  background:var(--ink);color:var(--sheet);font-family:"Oswald",sans-serif;font-weight:500;font-size:17px;letter-spacing:.26em;text-transform:uppercase}
.btn:hover{background:#2c261f;color:var(--sheet)}
.btn svg{flex:none}
.btn-brass{background:transparent;border:1px solid var(--brass);color:var(--brass2);font-weight:400;letter-spacing:.3em}
.btn-brass:hover{background:rgba(198,163,106,.12);color:var(--brass2)}

/* шапка */
.top{height:104px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:"Oswald",sans-serif;font-weight:400;font-size:22px;letter-spacing:.62em}
.nav{display:flex;align-items:center;gap:44px;font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.24em;text-transform:uppercase}
.nav .btn{min-height:44px;padding:0 22px;font-size:14px;font-weight:400;letter-spacing:.24em}

/* первый экран */
.hero{border-top:7px solid var(--ink);display:grid;grid-template-columns:640px 1fr;gap:0;min-height:880px}
.hero-text{padding-top:110px;display:flex;flex-direction:column;gap:36px}
.hero h1{margin:0;font-weight:400;font-style:italic;font-size:108px;line-height:.98;letter-spacing:-.01em}
.hero .lead{margin:0;font-size:27px;line-height:1.4;color:var(--ink2);max-width:540px}
.hero-cta{display:flex;align-items:center;gap:28px;margin-top:14px}
.hero-cta small{font-family:"Oswald",sans-serif;font-weight:300;font-size:14px;letter-spacing:.2em;line-height:1.7;color:var(--muted)}
.fan{position:relative}
.fan img{position:absolute;box-shadow:0 30px 60px rgba(40,28,14,.22),0 2px 6px rgba(40,28,14,.12)}
.fan .c1{left:-10px;top:150px;width:300px;transform:rotate(-9deg)}
.fan .c2{left:320px;top:110px;width:300px;transform:rotate(7deg)}
.fan .c3{left:140px;top:60px;width:340px;transform:rotate(-1.5deg);box-shadow:0 40px 80px rgba(40,28,14,.28),0 2px 6px rgba(40,28,14,.14)}
.fan .lot{position:absolute;right:0;bottom:56px;text-align:right;font-family:"Oswald",sans-serif;font-weight:300;font-size:13px;letter-spacing:.3em;line-height:1.8;color:var(--muted)}

/* цифры */
.stats{background:var(--ink);color:var(--sheet)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;min-height:240px}
.stat{display:flex;flex-direction:column;gap:10px}
.stat+.stat{padding-left:48px;border-left:1px solid var(--ink2)}
.stat b{font-family:"Oswald",sans-serif;font-weight:500;font-size:76px;line-height:1;letter-spacing:.02em}
.stat span{font-family:"Oswald",sans-serif;font-weight:300;font-size:14px;letter-spacing:.34em;color:#B5AC9F;text-transform:uppercase}

/* идея */
.idea{min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;text-align:center;padding:80px 200px}
.idea .quote{display:flex;flex-direction:column;gap:6px}
.idea .quote p{margin:0;font-style:italic;font-size:64px;line-height:1.12}
.idea .quote p+p{color:var(--brown)}
.idea .sub{margin:0;font-size:25px;line-height:1.5;color:var(--ink2);max-width:720px}

/* как работает */
.how{border-top:1px solid var(--rule);padding:88px 0 110px;display:flex;flex-direction:column;gap:72px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.sec-head h2{margin:0;font-family:"Oswald",sans-serif;font-weight:600;font-size:56px;letter-spacing:.04em;text-transform:uppercase}
.sec-head em{font-size:26px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px}
.step{border-top:7px solid var(--ink);padding-top:28px;display:flex;flex-direction:column;gap:20px}
.step .no{font-family:"Oswald",sans-serif;font-weight:300;font-size:15px;letter-spacing:.34em;color:var(--muted)}
.step h3{margin:0;font-family:"Oswald",sans-serif;font-weight:500;font-size:30px;letter-spacing:.1em;text-transform:uppercase}
.step p{margin:0;font-size:24px;line-height:1.45;color:var(--ink2)}

/* портрет */
.portrait{border-top:1px solid var(--rule);padding:110px 0 120px;display:grid;grid-template-columns:480px 1fr;gap:112px}
.portrait .card{width:440px;margin-left:20px;transform:rotate(-3deg);box-shadow:0 40px 80px rgba(40,28,14,.26),0 2px 6px rgba(40,28,14,.14);align-self:start}
.portrait-text{display:flex;flex-direction:column;gap:30px}
.portrait h2{margin:0;font-family:"Oswald",sans-serif;font-weight:600;font-size:64px;line-height:1.02;letter-spacing:.03em;text-transform:uppercase}
.portrait .lead{margin:0;font-style:italic;font-size:32px;line-height:1.3}
.rows{border-top:1px solid var(--rule);margin-top:10px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 4px;border-bottom:1px solid var(--rule2)}
.row span:first-child{font-family:"Oswald",sans-serif;font-weight:500;font-size:15px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;flex:none}
.row span:last-child{font-size:25px;text-align:right}
.buy{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:18px}
.price{display:flex;flex-direction:column;gap:8px}
.price b{font-family:"Oswald",sans-serif;font-weight:500;font-size:60px;line-height:1}
.price small{font-family:"Oswald",sans-serif;font-weight:300;font-size:13px;letter-spacing:.24em;line-height:1.8;color:var(--muted);text-transform:uppercase}

/* финал */
.final{background:var(--dark);color:var(--cream);min-height:760px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;text-align:center;padding:80px 24px}
.final img{width:200px;height:auto;aspect-ratio:1;border-radius:50%}
.final p{margin:0;font-style:italic;font-size:76px;line-height:1.05;max-width:900px}

/* подвал */
.foot{padding:72px 0 64px}
.foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:56px}
.foot h4{margin:0 0 6px;font-family:"Oswald",sans-serif;font-weight:500;font-size:13px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.foot .col{display:flex;flex-direction:column;gap:14px;font-size:19px;color:var(--ink2)}
.foot .col a{color:var(--ink)}
.foot .copy{font-family:"Oswald",sans-serif;font-weight:300;font-size:13px;letter-spacing:.2em;color:var(--muted);margin-top:20px}

/* документы */
.doc{max-width:820px;margin:0 auto;padding:72px 24px 96px}
.doc .back{font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.doc h1{font-family:"Oswald",sans-serif;font-weight:600;font-size:40px;line-height:1.1;letter-spacing:.03em;text-transform:uppercase;margin:28px 0 8px}
.doc h2{font-family:"Oswald",sans-serif;font-weight:500;font-size:20px;letter-spacing:.12em;text-transform:uppercase;margin:44px 0 14px;padding-top:18px;border-top:1px solid var(--rule)}
.doc p,.doc li{font-size:21px;line-height:1.55;color:var(--ink2)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 16px;padding-left:24px}
.doc li{margin:4px 0}
.doc .num{font-family:"Oswald",sans-serif;font-weight:400;font-size:.8em;letter-spacing:.06em;color:var(--muted);margin-right:.4em}
.doc .sub{padding-left:28px}
.doc .subsub{padding-left:56px}
.doc .meta{color:var(--muted);font-style:italic}
.doc-top{border-bottom:7px solid var(--ink)}

/* плашка cookie */
.cookie{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:min(1040px,calc(100% - 24px));z-index:50;
  background:var(--sheet);border-top:5px solid var(--ink);box-shadow:0 20px 50px rgba(40,28,14,.18);
  padding:24px 32px;display:flex;align-items:center;gap:36px}
.cookie[hidden]{display:none}
.cookie .tag{font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.32em;color:var(--muted);flex:none}
.cookie p{margin:0;flex:1;font-size:19px;line-height:1.4;color:var(--ink2)}
.cookie p a{text-decoration:underline;text-underline-offset:3px}
.cookie .acts{display:flex;gap:12px;flex:none}
.cookie button{min-height:48px;padding:0 24px;border:0;cursor:pointer;font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.22em;text-transform:uppercase}
.cookie .ok{background:var(--ink);color:var(--sheet);font-weight:500}
.cookie .no{background:transparent;color:var(--ink);border:1px solid var(--rule);font-weight:400}

/* планшет */
@media (max-width:1200px){
  :root{--pad:48px}
  .hero{grid-template-columns:1fr 1fr}
  .hero h1{font-size:84px}
  .fan .c1{left:-20px;width:240px}.fan .c2{left:220px;width:240px}.fan .c3{left:90px;width:280px}
  .idea{padding:80px 48px}
  .portrait{grid-template-columns:380px 1fr;gap:64px}.portrait .card{width:360px}
  .foot .wrap{grid-template-columns:1fr 1fr}
}

/* телефон */
@media (max-width:760px){
  :root{--pad:22px}
  body{font-size:18px}
  .top{height:72px}
  .logo{font-size:17px;letter-spacing:.55em}
  .nav a:not(.btn){display:none}
  .nav .btn{font-size:12px;padding:0 16px}
  .eyebrow{font-size:12px;letter-spacing:.36em}
  .hero{border-top-width:5px;display:flex;flex-direction:column;min-height:0;padding-bottom:56px}
  .hero-text{padding-top:48px;gap:24px;display:contents}
  .hero .eyebrow{margin-top:48px}
  .hero h1{font-size:56px;line-height:1;margin-top:24px}
  .hero .lead{font-size:21px;margin-top:24px}
  .fan{order:4;height:470px;margin-top:24px}
  .fan .c1{left:-8px;top:70px;width:172px;transform:rotate(-9deg)}
  .fan .c2{left:auto;right:-4px;top:56px;width:172px;transform:rotate(8deg)}
  .fan .c3{left:50%;margin-left:-98px;top:20px;width:196px}
  .fan .lot{display:none}
  .hero-cta{order:5;flex-direction:column;align-items:stretch;gap:14px;margin-top:24px}
  .hero-cta .btn{min-height:60px;font-size:15px;letter-spacing:.24em}
  .hero-cta small{text-align:center;font-size:12px}
  .hero-cta small br{display:none}
  .sep{display:inline}
  .stats .wrap{grid-template-columns:1fr;padding-top:16px;padding-bottom:16px;min-height:0}
  .stat{flex-direction:row;align-items:baseline;justify-content:space-between;padding:22px 0}
  .stat+.stat{padding-left:0;border-left:0;border-top:1px solid var(--ink2)}
  .stat b{font-size:48px}
  .stat span{font-size:11px;letter-spacing:.3em;text-align:right}
  .idea{min-height:0;padding:80px 26px;gap:26px}
  .idea .quote{gap:10px}
  .idea .quote p{font-size:36px}
  .idea .sub{font-size:20px}
  .how{padding:56px 0 72px;gap:36px}
  .sec-head{flex-direction:column;gap:8px}
  .sec-head h2{font-size:36px;line-height:1.05}
  .sec-head em{font-size:20px}
  .steps{grid-template-columns:1fr;gap:36px}
  .step{border-top-width:5px;padding-top:20px;gap:12px}
  .step h3{font-size:22px}
  .step p{font-size:20px}
  .portrait{display:flex;flex-direction:column;padding:56px 0 80px;gap:24px}
  .portrait .card{order:3;width:270px;margin:20px auto 28px}
  .portrait-text{display:contents}
  .portrait .eyebrow{order:0}.portrait h2{order:1;font-size:38px}.portrait .lead{order:2;font-size:24px}
  .rows{order:4;margin-top:0}.buy{order:5}
  .row{flex-direction:column;gap:4px;padding:14px 2px}
  .row span:first-child{font-size:12px}
  .row span:last-child{font-size:20px;text-align:left}
  .buy{flex-direction:column;align-items:stretch}
  .price b{font-size:44px}
  .price small{font-size:11px}
  .buy .btn{min-height:60px;font-size:15px}
  .final{min-height:0;padding:72px 26px 80px;gap:30px}
  .final img{width:140px}
  .final p{font-size:40px;line-height:1.08}
  .final .btn{width:100%;font-size:13px;letter-spacing:.2em;padding:0 12px}
  .final .btn svg{display:none}
  .foot{padding:48px 0 120px}
  .foot .wrap{grid-template-columns:1fr;gap:34px}
  .foot .col{font-size:18px}
  .doc{padding:40px 22px 120px}
  .doc h1{font-size:28px}
  .doc p,.doc li{font-size:19px}
  .doc .sub{padding-left:14px}.doc .subsub{padding-left:28px}
  .cookie{flex-direction:column;align-items:stretch;gap:16px;padding:20px 18px;bottom:12px;border-top-width:4px}
  .cookie p{font-size:17px}
  .cookie .acts button{flex:1}
}