@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Manrope:wght@500;700;800&family=Playfair+Display:ital,wght@1,500&display=swap');:root{--n:#082a35;--b:#84d7eb;--p:#f5f8f7;--t:#0a303a;--m:#6e7e80;--l:#d8e3e1}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;overflow-x:hidden;background:var(--p);color:var(--t);font-family:'DM Sans',sans-serif}
a{color:inherit;text-decoration:none}
.top{height:44px;padding:0 4%;background:#062633;color:#d7e5e7;display:flex;align-items:center;justify-content:space-between;font-size:12px}
.top span{letter-spacing:.2px}
.top span:first-letter{color:#72d7bd}
header{height:112px;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 4%;position:sticky;top:0;z-index:10;border-bottom:1px solid #edf1f0}
.brand img,footer img{width:190px;height:90px;object-fit:contain;mix-blend-mode:multiply}
nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:700}
.cta{border:1px solid var(--t);border-radius:35px;padding:18px 25px}
#menu{display:none;border:0;background:none;font-size:25px}
.hero{min-height:680px;background:var(--n);color:white;padding:8% 4%;display:grid;grid-template-columns:46% 54%;gap:3%;overflow:hidden}
.hero>div:first-child{align-self:center}
.tag{font-size:10px;letter-spacing:3px;font-weight:700;color:#63b6cc}
.tag:before{content:'—';margin-right:14px}
h1,h2,h3{font-family:Manrope,sans-serif;letter-spacing:-3px}
h1{font-size:clamp(56px,5vw,86px);line-height:1.08;margin:28px 0}
em{font-family:'Playfair Display',serif;color:#54a9c2;font-weight:500}
.hero>div>p:not(.tag){max-width:610px;color:#b8cbcf;line-height:1.9;font-size:17px}
.button{display:inline-flex;align-items:center;justify-content:space-between;background:var(--b);border:0;border-radius:40px;padding:17px 18px 17px 25px;min-width:220px;font:700 13px inherit;cursor:pointer}
.button b{width:45px;height:45px;border-radius:50%;background:var(--n);color:white;display:grid;place-items:center;margin:-11px -11px -11px 25px;font-size:20px}
.under{display:inline-block;border-bottom:2px solid #a8c4ca;padding:10px 0;margin-left:28px;font-size:13px;font-weight:700}
.hero-img{height:590px;position:relative}
.hero-img>img{width:100%;height:100%;object-fit:cover;border-radius:190px 25px 25px 25px}
.badge{position:absolute;right:-10px;top:35px;width:135px;height:135px;border-radius:50%;border:8px solid #174653;background:#a5e5f3;color:var(--n);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:34px;text-align:center}
.badge small{font-size:9px;letter-spacing:2px;font-weight:700}
.caption{position:absolute;bottom:28px;left:34px}
.caption small{display:block;font-size:9px;letter-spacing:3px}
.caption b{display:block;font-size:30px;line-height:1.1;margin-top:10px}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);background:white}
.benefits article{padding:35px 8%;border-right:1px solid var(--l);display:flex;gap:20px;align-items:center;color:#3997b2;font-size:26px}
.benefits span{font-size:13px;line-height:1.8;color:var(--m)}
.benefits b{color:var(--t);font-size:15px}
.section{padding:100px 4%}
.intro{display:grid;grid-template-columns:60% 40%;align-items:end;margin-bottom:55px}
.section h2,.occasion h2{font-size:clamp(43px,4vw,65px);line-height:1.1;margin:25px 0}
.intro>p,.gallery>div>p,.faq>div>p,.about>div>p,.info>p:not(.tag){color:var(--m);line-height:1.9;max-width:570px}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.offers article{background:white;border-radius:20px;overflow:hidden}
.offers article>img{width:100%;height:390px;object-fit:cover;object-position:25%}
.offers article>img.sauna{object-position:85%}
.offers article>div{padding:38px 42px}
.offers h3{font-size:50px;line-height:1.05;margin:24px 0}
.offers article>div>p:not(.tag){color:var(--m);line-height:1.8}
.offers a{display:flex;justify-content:space-between;border-top:1px solid var(--l);padding-top:24px;margin-top:30px;font-size:13px;font-weight:700}
.about{background:var(--n);color:white;display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center}
.rings{height:600px;display:grid;place-items:center;background:repeating-radial-gradient(circle,#0000 0 72px,#ffffff20 73px 74px)}
.rings span{width:220px;height:220px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:50px;background:radial-gradient(circle at 45% 30%,#337b8f,#0c3947 70%);box-shadow:0 0 55px #57bad044;color:#a6e9f3}
.rings b{font-size:24px;color:white}
.rings small{font-size:8px;letter-spacing:3px;margin-top:14px}
.about>div>p{color:#b7c8cc}
.ghost{background:transparent;border:1px solid #75949c;color:white;margin-top:20px}
.ghost b{background:var(--b);color:var(--n)}
.center{text-align:center}
.center>p:not(.tag){color:var(--m)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
.steps article{background:white;border:1px solid var(--l);border-radius:20px;padding:34px;min-height:300px}
.steps article>b{display:block;color:#59a6ba;border-bottom:1px solid var(--l);padding-bottom:22px}
.steps i{width:54px;height:54px;border-radius:13px;background:#e8f7fa;color:#388fa8;display:grid;place-items:center;font-size:25px;font-style:normal;margin-top:42px}
.steps h3{font-size:22px;letter-spacing:-1px}
.steps p{color:var(--m);line-height:1.8;font-size:14px}
.occasion{margin:0 4% 80px;padding:75px;background:linear-gradient(110deg,#236a7e,#0b4151);color:white;border-radius:25px;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.occasion>div>p:not(.tag){max-width:650px;color:#d0e0e3;line-height:1.8}
.occasion .under{margin-left:0}
.big-ring{height:390px;display:grid;place-items:center;background:repeating-radial-gradient(circle,#0000 0 67px,#ffffff20 68px 69px);font-size:75px;color:#a4e6f1;position:relative}
.big-ring small{position:absolute;right:14%;bottom:12%;font-size:9px;letter-spacing:4px;line-height:2;color:white}
.gallery{display:grid;grid-template-columns:40% 60%;gap:4%;align-items:center}
.gallery hr{border:0;border-top:1px solid var(--l);margin:35px 0}
.gallery figure{margin:0;position:relative}
.gallery figure img{width:100%;border-radius:20px;display:block}
.gallery figcaption{position:absolute;bottom:24px;left:25px;color:white;font-size:12px}
.faq{background:#edf3f2;display:grid;grid-template-columns:40% 60%;gap:4%}
.faq details{border-top:1px solid #cad8d5;padding:28px 4px}
.faq summary{list-style:none;cursor:pointer;font-weight:700;display:flex;justify-content:space-between}
.faq summary:after{content:'+';width:32px;height:32px;border:1px solid #c4d6d3;border-radius:50%;display:grid;place-items:center;font-size:20px}
.faq details[open] summary:after{content:'−'}
.faq details p{color:var(--m);line-height:1.8}
.faq .under{margin-left:0}
.contact{background:var(--n);color:white;display:grid;grid-template-columns:44% 56%;gap:5%;align-items:start}
.info>a,.info>div{display:grid;grid-template-columns:55px 1fr auto;gap:20px;align-items:center;border-top:1px solid #31515a;padding:25px 0;color:var(--b);font-size:25px}
.info>a span,.info>div span{font-size:9px;letter-spacing:2px;color:#91a8ad}
.info>a b,.info>div b{font-size:17px;letter-spacing:0;color:white}
.info>p:not(.tag){color:#b5c7cb}
form{background:white;color:var(--t);padding:50px;border-radius:25px}
form h2{font-size:50px}
form>p:not(.tag){color:var(--m);line-height:1.8}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:23px 20px;margin:35px 0}
.fields label{font-size:13px;font-weight:700}
.fields label small{font-weight:400;color:#91a0a2}
.wide{grid-column:1/-1}
input,select,textarea{display:block;width:100%;margin-top:10px;padding:16px;border:1px solid #cbdad7;border-radius:9px;background:#fbfdfc;color:var(--t);font:inherit}
textarea{height:100px;resize:vertical}
form>small{display:block;color:var(--m);margin-top:15px}
footer{height:120px;background:white;padding:0 4%;display:flex;align-items:center;justify-content:space-between;color:var(--m);font-size:12px}
footer img{width:150px}
.mobile{display:none}
@media(max-width:850px){.top a{display:none}
header{height:82px}
.brand img{width:145px;height:65px}
#menu{display:block}
nav{display:none;position:absolute;top:82px;left:0;right:0;background:white;padding:25px;box-shadow:0 12px 20px #0002}
nav.open{display:flex;flex-direction:column;align-items:stretch}
.hero{grid-template-columns:1fr;padding:70px 6%;gap:50px}
.hero h1{font-size:52px}
.hero-img{height:440px}
.hero-img>img{border-radius:110px 20px 20px 20px}
.badge{width:105px;height:105px}
.benefits,.intro,.offers,.about,.steps,.occasion,.gallery,.faq,.contact{grid-template-columns:1fr}
.benefits article{padding:25px 8%}
.section{padding:70px 6%}
.intro{gap:10px}
.offers article>img{height:280px}
.rings{height:400px}
.occasion{margin:0 5% 60px;padding:55px 30px}
.big-ring{height:280px}
.gallery,.faq,.contact{gap:40px}
.fields{grid-template-columns:1fr}
.wide{grid-column:auto}
form{padding:32px 22px}
form h2{font-size:40px}
.mobile{display:block;position:fixed;left:6%;right:6%;bottom:14px;background:var(--b);padding:15px;text-align:center;border-radius:8px;z-index:30;font-weight:700;box-shadow:0 8px 25px #0004}
footer{padding-bottom:75px;height:160px}
}
@media(max-width:520px){.hero h1{font-size:46px}
.hero-img{height:350px}
.hero .under{margin:20px 0 0}
.section h2,.occasion h2{font-size:38px}
.offers article>div{padding:30px 24px}
.offers h3{font-size:42px}
.rings{height:320px}
.occasion{padding:45px 24px}
.big-ring{height:220px}
footer p{display:none}
}