:root[data-palette="a"]{ --bg:#F5F1E8; --surface:#E4E7DF; --accent:#8A9A82; --accent-dark:#5C6B54; --cta:#5C6B54; --text:#2E2E2A; }
:root[data-palette="b"]{ --bg:#FAF6F0; --surface:#EDE0D4; --accent:#C9A88F; --accent-dark:#8C6E5D; --cta:#8C6E5D; --text:#3A342E; }
:root[data-palette="c"]{ --bg:#FBF7F4; --surface:#F0E4DE; --accent:#C99E92; --accent-dark:#7D6E66; --cta:#B5867A; --text:#33302D; }
:root[data-palette="d"]{ --bg:#F4F2EE; --surface:#DCE3E3; --accent:#9DB0AE; --accent-dark:#4F6360; --cta:#4F6360; --text:#2C302F; }
:root{
  --muted: color-mix(in srgb, var(--text) 58%, transparent);
  --line:  color-mix(in srgb, var(--text) 12%, transparent);
  --card:  color-mix(in srgb, var(--surface) 55%, #fff 45%);
  --shadow: 0 18px 50px -24px color-mix(in srgb, var(--text) 40%, transparent);
  --shadow-sm: 0 8px 26px -18px color-mix(in srgb, var(--text) 45%, transparent);
  --radius: 22px; --radius-lg: 34px; --maxw: 1160px;
  --serif:"Cormorant Garamond", Georgia, serif; --sans:"Manrope", system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); color:var(--text); background:var(--bg); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; transition:background .5s, color .5s; overflow-x:hidden}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:.2px}
h2{font-size:clamp(30px,4.4vw,52px); margin-bottom:14px}
h3{font-size:24px}
p{color:var(--muted)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:clamp(60px,8vw,110px) 0; position:relative}
.eyebrow{font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-dark); margin-bottom:14px; display:block}
.lead{font-size:19px; max-width:620px}
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; z-index:0; pointer-events:none}
.center{text-align:center}
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:16px; padding:15px 30px; border-radius:100px; border:1px solid transparent; transition:transform .25s, box-shadow .25s, background .3s, color .3s; white-space:nowrap}
.btn-primary{background:var(--cta); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent-dark); transform:translateY(-2px)}
.btn-white{background:color-mix(in srgb,#fff 88%, var(--surface)); color:var(--text)}

header{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid transparent; transition:border-color .3s, background .5s}
header.scrolled{border-color:var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px}
.logo{font-family:var(--serif); font-size:23px; font-weight:600; white-space:nowrap}
.logo span{color:var(--accent-dark)}
.nav-links{display:flex; gap:22px; font-size:15px; font-weight:500}
.nav-links a{color:var(--muted); transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex; align-items:center; gap:14px}
.nav-phone{font-weight:600; font-size:15px; white-space:nowrap}
.switch{display:flex; align-items:center; gap:6px}
.lang{display:flex; border:1px solid var(--line); border-radius:100px; overflow:hidden}
.lang button{background:none; border:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.3px; padding:3px 7px; color:var(--muted); transition:background .2s, color .2s}
.lang button[aria-pressed="true"]{background:var(--accent-dark); color:#fff}
.palette{display:flex; align-items:center; gap:6px}
.palette .sw{width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .2s, border-color .2s}
.palette .sw:hover{transform:scale(1.15)}
.palette .sw[aria-pressed="true"]{border-color:var(--text)}
.sw.pa{background:linear-gradient(135deg,#8A9A82,#5C6B54)} .sw.pb{background:linear-gradient(135deg,#C9A88F,#8C6E5D)} .sw.pc{background:linear-gradient(135deg,#C99E92,#B5867A)} .sw.pd{background:linear-gradient(135deg,#9DB0AE,#4F6360)}

.hero{padding-top:clamp(36px,5vw,64px); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,68px); margin-bottom:8px}
.hero .spec{font-weight:600; letter-spacing:3px; text-transform:uppercase; font-size:14px; color:var(--accent-dark); margin-bottom:22px}
.hero .lead{margin-bottom:30px; font-size:20px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px}
.hero-trust{display:flex; gap:28px; flex-wrap:wrap}
.hero-trust .item{display:flex; flex-direction:column}
.hero-trust .n{font-family:var(--serif); font-size:34px; font-weight:600; color:var(--accent-dark); line-height:1}
.hero-trust .l{font-size:13px; color:var(--muted); margin-top:6px}
.hero-photo{position:relative}
.hero-photo .frame{position:relative; border-radius:180px 180px var(--radius-lg) var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:526/700; z-index:2; background:var(--surface)}
.hero-photo .frame img{width:100%; height:100%; object-fit:cover; object-position:center top}
.hero-photo .badge{position:absolute; z-index:3; background:color-mix(in srgb,#fff 90%, var(--surface)); box-shadow:var(--shadow-sm); border-radius:18px; padding:12px 16px; display:flex; align-items:center; gap:12px; bottom:28px; left:-24px}
.hero-photo .badge .ic{width:38px; height:38px; border-radius:11px; background:var(--surface); display:grid; place-items:center; color:var(--accent-dark)}
.hero-photo .badge .t{font-size:12px; line-height:1.3}
.hero-photo .badge .t b{font-size:14px; display:block; color:var(--text)}
.hero-photo .ring{position:absolute; inset:auto -28px -28px auto; width:140px; height:140px; border:1.5px solid var(--accent); border-radius:50%; opacity:.4; z-index:1}

.tint{background:var(--surface); transition:background .5s}
.approach-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.approach .big{font-family:var(--serif); font-size:clamp(24px,3vw,32px); color:var(--text); line-height:1.25; margin:16px 0 18px; font-style:italic}
.approach-points{display:flex; flex-direction:column; gap:16px}
.approach-points .pt{display:flex; gap:14px; align-items:flex-start}
.approach-points .pt .dot{flex:none; width:32px; height:32px; border-radius:10px; background:var(--card); display:grid; place-items:center; color:var(--accent-dark); margin-top:2px}
.approach-points .pt b{color:var(--text); font-weight:600}

.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.about-photo{position:relative}
.about-photo img{width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; object-position:center 20%}
.about-photo .stamp{position:absolute; right:18px; top:18px; background:var(--cta); color:#fff; border-radius:16px; padding:12px 16px; text-align:center; box-shadow:var(--shadow-sm)}
.about-photo .stamp .n{font-family:var(--serif); font-size:26px; font-weight:600; line-height:1}
.about-photo .stamp .l{font-size:10px; letter-spacing:1px; text-transform:uppercase; opacity:.9}
.about-text p{margin-bottom:15px}
.about-text p.intro{font-family:var(--serif); font-size:22px; color:var(--text); font-style:italic}
.credentials{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px}
.cred{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px}
.cred .ic{color:var(--accent-dark); margin-bottom:8px}
.cred b{display:block; color:var(--text); font-size:15px; margin-bottom:2px}
.cred span{font-size:13px; color:var(--muted)}

.svc-head{text-align:center; max-width:640px; margin:0 auto 46px}
.svc-head p{margin:0 auto}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.svc-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:transform .3s, box-shadow .3s}
.svc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.svc-card .ic{width:54px; height:54px; border-radius:15px; background:var(--surface); color:var(--accent-dark); display:grid; place-items:center; margin-bottom:18px}
.svc-card h3{margin-bottom:12px}
.svc-card ul{list-style:none; display:flex; flex-direction:column; gap:8px}
.svc-card li{font-size:15px; color:var(--muted); padding-left:22px; position:relative}
.svc-card li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.svc-note{margin-top:26px; background:var(--card); border:1px dashed var(--accent); border-radius:var(--radius); padding:22px 26px; display:flex; gap:16px; align-items:flex-start}
.svc-note .ic{flex:none; color:var(--accent-dark)}
.svc-note b{color:var(--text)}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:40px}
.step .num{font-family:var(--serif); font-size:50px; font-weight:600; color:var(--accent); opacity:.55; line-height:1; margin-bottom:10px}
.step h3{font-size:20px; margin-bottom:8px}
.step p{font-size:15px}

.practice{margin-top:52px}
.practice-cap{font-family:var(--serif); font-size:22px; color:var(--text); margin-bottom:22px}
.practice-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.pshot{margin:0; border-radius:16px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/5; box-shadow:var(--shadow); background:var(--surface)}
.pshot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s}
.pshot:hover img{transform:scale(1.05)}

/* certificates */
.certs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px}
.cert{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .3s, box-shadow .3s; display:flex; flex-direction:column}
.cert:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.cert .thumb{aspect-ratio:4/3; overflow:hidden; background:#fff; display:grid; place-items:center; padding:6px}
.cert .thumb img{width:100%; height:100%; object-fit:contain; transition:transform .4s}
.cert:hover .thumb img{transform:scale(1.05)}
.cert .cap{padding:14px 16px; font-size:13px; color:var(--muted); line-height:1.4}
.cert .cap b{display:block; color:var(--text); font-size:14px; margin-bottom:2px}
.cert.soon{align-items:center; justify-content:center; text-align:center; border-style:dashed; border-color:var(--accent); padding:24px; color:var(--accent-dark); font-weight:600}
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(20,18,16,.86); display:none; align-items:center; justify-content:center; padding:30px; cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:90vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .close{position:absolute; top:22px; right:28px; color:#fff; font-size:34px; cursor:pointer; line-height:1}

/* cosmeceutics */
.cosme-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.cosme-list{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 26px}
.cosme-list div{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-size:15px; color:var(--text)}
.cosme-list div span{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.cosme-quote{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 36px}
.cosme-quote .q{font-family:var(--serif); font-style:italic; font-size:21px; color:var(--text); line-height:1.35; margin-bottom:16px}
.cosme-quote .who{font-size:14px; color:var(--muted)}

/* prices */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px}
.price-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; text-align:center; transition:transform .3s, box-shadow .3s}
.price-card.featured{background:var(--cta); color:#fff; transform:scale(1.03)}
.price-card.featured p,.price-card.featured .unit{color:color-mix(in srgb,#fff 78%, transparent)}
.price-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.price-card.featured:hover{transform:scale(1.03) translateY(-5px)}
.price-card .val{font-family:var(--serif); font-size:44px; font-weight:600; margin:12px 0 2px}
.price-card .unit{font-size:14px; color:var(--muted); margin-bottom:16px}
.price-tag{display:inline-block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; background:color-mix(in srgb,#fff 55%, transparent); color:var(--accent-dark); padding:5px 12px; border-radius:100px; margin-bottom:6px; font-weight:600}
.price-note{text-align:center; font-size:14px; color:var(--muted); margin-top:24px}

/* reviews */
.rev-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:34px}
.rating-badge{display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 22px}
.rating-badge .score{font-family:var(--serif); font-size:44px; font-weight:600; color:var(--accent-dark); line-height:1}
.rating-badge .stars{color:var(--accent-dark); letter-spacing:2px; font-size:14px}
.rating-badge .sub{font-size:13px; color:var(--muted)}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.review{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px; display:flex; flex-direction:column}
.review .stars{color:var(--accent-dark); font-size:14px; letter-spacing:2px; margin-bottom:12px}
.review p{color:var(--text); font-size:15.5px; font-style:italic; margin-bottom:18px; flex:1; line-height:1.5}
.review .who{display:flex; align-items:center; gap:12px}
.review .av{width:42px; height:42px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-family:var(--serif); font-weight:600; color:var(--accent-dark); font-size:19px}
.review .who b{display:block; font-size:14px; color:var(--text)}
.review .who span{font-size:12px; color:var(--muted)}

/* blog */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.post{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s}
.post:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.post .ph{aspect-ratio:16/10; background:linear-gradient(135deg,var(--surface),var(--accent)); opacity:.9; display:grid; place-items:center; color:var(--accent-dark)}
.post .body{padding:22px 24px; display:flex; flex-direction:column; flex:1}
.post .tag{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-dark); font-weight:600; margin-bottom:8px}
.post h3{font-size:20px; margin-bottom:8px}
.post p{font-size:14px; flex:1}
.post .soon{margin-top:14px; font-size:13px; color:var(--muted); font-weight:600}
.blog-cta{margin-top:30px; text-align:center}
.post{cursor:pointer}
.post .read{margin-top:14px; font-size:14px; color:var(--accent-dark); font-weight:600}
.art{position:fixed; inset:0; z-index:210; background:rgba(20,18,16,.6); display:none; align-items:flex-start; justify-content:center; padding:6vh 20px; overflow-y:auto}
.art.open{display:flex}
.art-box{background:var(--bg); max-width:720px; width:100%; border-radius:var(--radius-lg); padding:clamp(28px,4vw,48px); box-shadow:var(--shadow); position:relative}
.art-box .close{position:absolute; top:18px; right:22px; font-size:30px; line-height:1; cursor:pointer; color:var(--muted)}
.art-box .tag{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-dark); font-weight:600; margin-bottom:10px}
.art-box h3{font-size:clamp(24px,3.2vw,34px); margin-bottom:18px; line-height:1.15}
.art-box .art-body p{color:var(--text); font-size:16px; margin-bottom:14px; line-height:1.6}
.art-box .art-body b{color:var(--text)}

details.faq{background:var(--card); border:1px solid var(--line); border-radius:18px; margin-bottom:14px; overflow:hidden; transition:box-shadow .3s}
.faq-grid{max-width:820px; margin:44px auto 0}
details.faq[open]{box-shadow:var(--shadow-sm)}
details.faq summary{cursor:pointer; padding:20px 24px; font-weight:600; font-size:17px; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:16px; list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .plus{flex:none; width:24px; height:24px; position:relative}
details.faq summary .plus::before,details.faq summary .plus::after{content:""; position:absolute; background:var(--accent-dark); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%)}
details.faq summary .plus::before{width:13px; height:2px}
details.faq summary .plus::after{width:2px; height:13px; transition:transform .3s}
details.faq[open] summary .plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
details.faq .ans{padding:0 24px 22px; color:var(--muted); font-size:16px}

.cta-inner{background:var(--cta); border-radius:var(--radius-lg); padding:clamp(34px,5vw,60px); display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; color:#fff; position:relative; overflow:hidden}
.cta-inner h2{color:#fff}
.cta-inner .lead{color:color-mix(in srgb,#fff 82%, transparent); margin-bottom:24px}
.cta-contacts{display:flex; flex-direction:column; gap:12px}
.cta-contacts a{display:flex; align-items:center; gap:14px; font-size:16px; font-weight:500; padding:11px 0; border-bottom:1px solid color-mix(in srgb,#fff 20%, transparent)}
.cta-contacts a .ic{width:40px; height:40px; border-radius:12px; background:color-mix(in srgb,#fff 16%, transparent); display:grid; place-items:center; flex:none}
.form{background:color-mix(in srgb,#fff 96%, var(--surface)); border-radius:var(--radius); padding:30px; color:var(--text)}
.form h3{margin-bottom:6px}
.form p{font-size:14px; margin-bottom:18px}
.form label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text)}
.form input,.form textarea{width:100%; padding:12px 15px; border:1px solid var(--line); border-radius:12px; margin-bottom:14px; font-family:var(--sans); font-size:15px; background:var(--bg); color:var(--text)}
.form textarea{resize:vertical; min-height:74px}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--accent)}
.form .consent{font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; margin-bottom:16px}
.form .btn-primary{width:100%; justify-content:center}
.lf-trap{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; opacity:0}
.lf-status{font-size:13px; margin:12px 0 0; color:#c0392b; line-height:1.4}
.lf-ok{text-align:center; padding:10px 0}
.lf-ok h3{margin-bottom:8px}
.lf-ok p{color:var(--muted); font-size:15px}

footer{background:var(--bg); padding:56px 0 40px; border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px}
.foot-logo{font-family:var(--serif); font-size:25px; font-weight:600; margin-bottom:12px}
.foot-logo span{color:var(--accent-dark)}
footer p{font-size:15px}
.foot-col h4{font-size:14px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-dark); margin-bottom:16px; font-weight:600}
.foot-col a{display:block; color:var(--muted); font-size:15px; margin-bottom:10px}
.foot-col a:hover{color:var(--text)}
.socials{display:flex; gap:12px; margin-top:6px}
.socials a{width:40px; height:40px; border-radius:12px; background:var(--surface); display:grid; place-items:center; color:var(--text)}
.socials a:hover{background:var(--accent); color:#fff}
.foot-theme{display:flex; align-items:center; gap:12px; padding-bottom:20px; font-size:13px; color:var(--muted)}
.disclaimer{border-top:1px solid var(--line); padding-top:22px; font-size:13px; color:var(--muted); line-height:1.7}
.disclaimer .warn{color:var(--text); font-weight:600}

.sticky-cta{position:fixed; bottom:0; left:0; right:0; z-index:60; display:none; gap:10px; padding:12px 16px; background:color-mix(in srgb,var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line)}
.sticky-cta .btn{flex:1; justify-content:center; padding:13px}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s, transform .7s}
.reveal.in{opacity:1; transform:none}

@media(max-width:980px){
  .hero-grid,.approach-inner,.about-grid,.cosme-grid,.cta-inner{grid-template-columns:1fr; gap:40px}
  .hero-photo{max-width:400px; margin:0 auto; order:-1}
  .svc-grid,.price-grid,.rev-grid,.blog-grid{grid-template-columns:1fr 1fr}
  .certs-grid{grid-template-columns:repeat(3,1fr)}
  .practice-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  .nav-phone{display:none}
  .logo{font-size:18px}
  .nav{gap:10px}
  .hero-photo .badge{left:12px; right:12px; bottom:14px}
  .svc-grid,.price-grid,.rev-grid,.blog-grid,.steps,.foot-grid,.cosme-list{grid-template-columns:1fr}
  .certs-grid,.practice-grid{grid-template-columns:1fr 1fr}
  .price-card.featured{transform:none}
  .about-photo .stamp{right:14px; top:14px}
  .sticky-cta{display:flex}
  footer{padding-bottom:90px}
}

/* ─── подстраницы (статьи, космецевтика) ─── */
.sub{padding:clamp(28px,4vw,56px) 0 clamp(48px,7vw,90px)}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:20px}
.crumbs a{border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.crumbs a:hover{color:var(--text);border-color:var(--line)}
.crumbs span{opacity:.6;margin:0 6px}
.art-wrap{max-width:760px;margin:0 auto}
.art-wrap h1{font-size:clamp(30px,4.6vw,50px);margin:6px 0 14px}
.art-meta{font-size:14px;color:var(--muted);margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.art-body p{font-size:17.5px;line-height:1.68;color:var(--text);margin-bottom:16px}
.art-body b{color:var(--text);font-weight:600}
.art-body h2{font-family:var(--serif);font-size:clamp(23px,3vw,31px);margin:36px 0 12px;line-height:1.2}
.sub-cta{margin:46px auto 0;max-width:760px;background:var(--cta);color:#fff;border-radius:var(--radius-lg);padding:clamp(26px,4vw,42px);text-align:center}
.sub-cta h3{color:#fff;font-size:clamp(22px,3vw,28px);margin-bottom:8px}
.sub-cta p{color:color-mix(in srgb,#fff 82%,transparent);margin-bottom:22px;font-size:16px}
.sub-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.more{max-width:760px;margin:46px auto 0}
.more h4{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-dark);margin-bottom:16px;font-weight:600}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.more-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;transition:transform .3s,box-shadow .3s}
.more-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.more-card .tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-dark);font-weight:600;margin-bottom:6px}
.more-card b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2;color:var(--text)}
.blog-index{max-width:var(--maxw);margin:0 auto}
.blog-index .art-meta{margin-bottom:26px}
.blog-index .blog-grid{margin-top:0}
.sub-foot{border-top:1px solid var(--line);padding:34px 0 40px;font-size:14px;color:var(--muted)}
.sub-foot .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.sub-foot a{border-bottom:1px solid var(--line)}
.sub-foot a:hover{color:var(--text)}
.sub-foot .disc{font-size:12.5px;line-height:1.7}
@media(max-width:620px){.more-grid{grid-template-columns:1fr}}