/* Lecții de pian cu Aurelian — stiluri */
:root{
--black:#121613; --green:#1f2520; --green-2:#29302a; --cream:#efe9df; --cream-2:#f7f4ee;
--sand:#b5aa98; --sand-2:#d4c9b6; --text:#c8c0b6; --mute:#9a9189; --ink:#0f0d0c; --ink-2:#4d473f; --ink-3:#6f685e;
--line:color-mix(in srgb,var(--cream) 14%,transparent); --line-ink:color-mix(in srgb,var(--ink) 14%,transparent);
--hero-p:#e2dcd2; --faq-em:#8a7f6c;
--pad-x:clamp(20px,4vw,56px); --pad-y:clamp(96px,12vw,180px); --head-gap:clamp(40px,4.4vw,64px);
--ease:cubic-bezier(.16,1,.3,1);
--serif:Cinzel,serif; --sans:Geist,system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
--h2:clamp(37px,4vw,60px);
interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
html,body{overflow-x:clip}
body{margin:0;background:var(--black);color:var(--cream);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400}
h2{text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--cream);color:var(--green);padding:10px 16px;font:500 13px var(--sans)}
.skip:focus{top:16px}
/* comune */
.wrap{max-width:1440px;margin:0 auto}
.section{padding:var(--pad-y) var(--pad-x)}
.eyebrow{font:400 11px var(--mono);letter-spacing:.2em;color:var(--sand);margin-bottom:20px}
.h2{font-family:var(--serif);font-size:var(--h2);line-height:1.08;letter-spacing:.01em}
.h2 em{font-style:normal;color:var(--sand)}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:last baseline;gap:24px;margin-bottom:var(--head-gap)}
.head-row > p{max-width:300px;font-size:14px;line-height:1.65;color:var(--mute)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.notch{position:relative}
.notch::after{content:"";position:absolute;right:-1px;bottom:-1px;border-left:11px solid transparent;border-bottom:11px solid currentColor}
.btn-o{display:flex;align-items:center;justify-content:center;height:52px;border:1px solid var(--cream);color:var(--cream);font-size:11px;font-weight:500;letter-spacing:.18em;transition:background .3s,color .3s}
.pl{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,var(--cream) 30%,transparent);display:grid;place-items:center;font-weight:300;font-size:20px;color:var(--sand);transition:transform .3s}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .pl{transform:rotate(45deg)}
details.closing .pl{transform:none}
details::details-content{block-size:0;overflow:clip;transition:block-size .45s cubic-bezier(.2,.7,.1,1),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
/* bara de progres (doar unde browserul suportă animații de scroll) */
.progress{display:none;position:fixed;inset:0 0 auto;height:2px;background:var(--sand);transform-origin:left;z-index:60}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@supports (animation-timeline:scroll()){
.progress{display:block;animation:progress linear both;animation-timeline:scroll(root)}
.act-line{animation:line linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}
/* ===== header ===== */
.site-header{position:fixed;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;height:78px;padding:0 var(--pad-x);background:var(--green);border-bottom:1px solid color-mix(in srgb,var(--sand) 25%,transparent)}
.brand{display:flex;align-items:center;gap:14px}
.brand svg{width:38px;height:38px;flex-shrink:0}
.brand-name{display:flex;flex-direction:column;gap:2px}
.brand-name b{font:500 17px/1.1 var(--serif);letter-spacing:.06em}
.brand-name small{font:400 15px/1.1 var(--serif);letter-spacing:.06em;color:var(--sand)}
.nav{display:flex;gap:6px}
.nav a{position:relative;display:flex;align-items:baseline;gap:8px;padding:10px 16px;font:400 11px var(--mono);letter-spacing:.18em;color:var(--text);white-space:nowrap;transition:color .3s}
.nav a small{font-size:10px;letter-spacing:.1em;color:var(--sand)}
.nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:1px;background:var(--sand);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a.on{color:var(--cream)}
.nav a.on::after{transform:scaleX(1);transform-origin:left}
.header-cta{display:flex;align-items:center;font:400 11px var(--mono);letter-spacing:.18em;color:var(--cream);border-bottom:1px solid var(--sand);padding:4px 0;white-space:nowrap;transition:color .3s,border-color .3s}
.burger{display:none;width:48px;height:48px;margin-right:-10px;border:0;background:none;cursor:pointer;place-items:center;-webkit-tap-highlight-color:transparent}
.burger span{position:relative;display:block;width:28px;height:10px}
.burger i{position:absolute;right:0;height:1.5px;background:var(--cream);transition:transform .6s cubic-bezier(.76,0,.24,1),width .5s cubic-bezier(.76,0,.24,1)}
.burger i:first-child{top:0;width:28px}
.burger i:last-child{top:8.5px;width:17px}
.menu-open .burger i:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu-open .burger i:last-child{width:28px;transform:translateY(-4.25px) rotate(-45deg)}
@media (max-width:1240px){
.nav{gap:0}
.nav a{padding:10px 9px;letter-spacing:.12em}
.nav a small{display:none}
.nav a::after{left:9px;right:9px}
}
/* meniu mobil */
.mmenu{position:fixed;inset:0;z-index:35;display:none;flex-direction:column;padding:96px clamp(20px,6vw,56px) 24px;background:var(--green);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;clip-path:circle(0 at calc(100% - 44px) 39px);transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility 0s linear .9s;visibility:hidden}
.menu-open .mmenu{clip-path:circle(160% at calc(100% - 44px) 39px);visibility:visible;transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility 0s}
.mmenu .ghost{position:absolute;right:-8vw;bottom:-6vw;font:400 62vw/.8 var(--serif);color:color-mix(in srgb,var(--sand) 6%,transparent);pointer-events:none;transform:translateY(20%) rotate(-8deg);transition:transform 1.4s var(--ease)}
.menu-open .mmenu .ghost{transform:none}
.mnav{position:relative;display:flex;flex-direction:column;margin:auto 0}
.mnav a{display:block;-webkit-tap-highlight-color:transparent}
.mnav .row{display:block;overflow:hidden;padding:8px 0 6px}
.mnav .row > span{display:flex;align-items:baseline;gap:16px;transform:translateY(115%);transition:transform 1s var(--ease)}
.mnav small{font:400 11px var(--mono);letter-spacing:.1em;color:var(--sand);width:22px}
.mnav b{font:400 clamp(30px,8.5vw,56px)/1 var(--serif);letter-spacing:.02em}
.mnav .dot{margin-left:auto;font-size:24px;color:var(--sand);opacity:0;transition:opacity .4s}
.mnav .rule{display:block;height:1px;background:color-mix(in srgb,var(--cream) 12%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.menu-open .mnav .row > span{transform:none;transition-delay:var(--dl)}
.menu-open .mnav .rule{transform:scaleX(1);transition-delay:var(--dl)}
.mnav a.on b{color:var(--sand);font-style:italic}
.mnav a.on .dot{opacity:1}
.mfoot{position:relative;padding-top:36px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform 1s var(--ease)}
.menu-open .mfoot{opacity:1;transform:none;transition-delay:.62s}
.mctas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mctas a{height:48px;border:1px solid color-mix(in srgb,var(--cream) 22%,transparent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500}
.mctas a:active{background:color-mix(in srgb,var(--cream) 8%,transparent)}
.mmeta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;font:400 11px var(--mono);letter-spacing:.16em;color:var(--mute)}
.mmeta div{display:flex;gap:18px}
.mmeta span{white-space:nowrap}
/* ===== hero ===== */
.hero{position:relative;height:56.25vw;margin-top:78px;overflow:hidden;display:flex;align-items:center;background:var(--green)}
.hero-media{position:absolute;inset:0;background:var(--green)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 78%;scale:-1 1;filter:brightness(.89);animation:rise 1s ease .1s both}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--black) 90%,transparent) 0%,color-mix(in srgb,var(--black) 72%,transparent) 34%,color-mix(in srgb,var(--black) 28%,transparent) 58%,color-mix(in srgb,var(--black) 0%,transparent) 78%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--black) 0%,transparent) 0%,color-mix(in srgb,var(--black) 18%,transparent) 25%,color-mix(in srgb,var(--black) 50%,transparent) 52%,color-mix(in srgb,var(--black) 82%,transparent) 78%,var(--black) 100%)}
.hero-text{position:relative;z-index:2;max-width:54vw;padding:0 0 4vw 4.6vw}
.hero h1{font:400 max(40px,4.9vw)/1.1 var(--serif);letter-spacing:.02em}
.hero h1 span{display:block;white-space:nowrap;animation:rise 1.1s var(--ease) both}
.hero h1 span+span{animation-delay:.2s}
.hero-chip,.hero-p-m{display:none}
.hero-sub{display:flex;align-items:center;gap:18px;margin-top:18px;animation:rise 1.1s var(--ease) .32s both}
.hero-sub::before{content:"";width:32px;height:1px;background:var(--sand)}
.hero-sub span{font:400 max(14px,1.5vw) var(--serif);letter-spacing:.12em;color:var(--sand-2)}
.hero-p{margin-top:2.2vw;max-width:max(380px,31vw);font-size:max(15px,1.15vw);line-height:1.7;color:var(--hero-p);text-wrap:pretty;animation:rise 1.1s var(--ease) .42s both}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:36px;animation:rise 1.1s var(--ease) .52s both}
.btn-solid{display:inline-block;border:1px solid var(--cream);background:var(--cream);color:var(--green);padding:max(14px,1.4vw) max(22px,2.2vw);font-size:max(11px,.85vw);font-weight:500;letter-spacing:.18em;transition:background .35s,color .35s}
.link-u{font-size:max(11px,.85vw);font-weight:500;letter-spacing:.18em;border-bottom:1px solid var(--sand);padding-bottom:5px}
/* ===== despre ===== */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(40px,7vw,120px);align-items:start}
.portrait{margin:0;position:sticky;top:110px}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;filter:saturate(.92) contrast(1.03)}
.portrait figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font:400 11px var(--mono);letter-spacing:.16em;color:var(--mute);padding-top:14px;border-top:1px solid var(--line);margin-top:14px}
.about h2{margin-bottom:32px}
.about-text{display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.75;color:var(--text);max-width:560px;text-wrap:pretty}
.about-text strong{color:var(--cream);font-weight:500}
.principles{margin-top:48px;border-top:1px solid var(--line)}
.principle{padding:24px 0;border-bottom:1px solid var(--line)}
.principle h3{font:500 clamp(18px,1.5vw,21px) var(--sans);letter-spacing:-.01em;margin-bottom:8px}
.principle p{font-size:15px;line-height:1.7;color:var(--mute);text-wrap:pretty}
.quote{margin:48px 0 0;padding:0 0 0 24px;border-left:1px solid var(--sand)}
.quote p:first-child{margin-bottom:10px;font:300 clamp(21px,2vw,27px)/1.35 var(--sans);letter-spacing:-.01em}
.quote p+p{font-size:15px;line-height:1.7;color:var(--mute);max-width:520px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));margin-top:clamp(64px,8vw,112px);border-top:1px solid var(--line)}
.stat{padding:28px 20px 0 0}
.stat b{display:block;font-size:clamp(44px,4.6vw,66px);font-weight:300;letter-spacing:-.045em;line-height:1}
.stat span{display:block;margin-top:12px;font:400 11px/1.6 var(--mono);letter-spacing:.14em;color:var(--mute)}
/* ===== oferte ===== */
.offers{position:relative;background:var(--green);box-shadow:0 0 0 100vmax var(--green);clip-path:inset(-1px -100vmax 0)}
.offers::before{content:"";position:absolute;top:-2px;left:-100vmax;right:-100vmax;height:clamp(180px,18vw,260px);background:linear-gradient(180deg,var(--black) 0%,var(--black) 3%,color-mix(in srgb,var(--black) 86%,transparent) 18%,color-mix(in srgb,var(--black) 66%,transparent) 34%,color-mix(in srgb,var(--black) 44%,transparent) 52%,color-mix(in srgb,var(--black) 24%,transparent) 68%,color-mix(in srgb,var(--black) 10%,transparent) 83%,color-mix(in srgb,var(--black) 0%,transparent) 100%);pointer-events:none}
.offers > *{position:relative}
.offer{border-top:none}
.offer-stack .offer{background:var(--green);box-shadow:0 -14px 28px -18px rgb(0 0 0/.55)}
.offer summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;padding:32px 0;transition:padding .4s cubic-bezier(.2,.7,.1,1),background .4s}
.offer-name{flex:1 1 260px;display:flex;flex-direction:column;gap:6px}
.offer-name b{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;white-space:nowrap;font:400 clamp(21px,2vw,27px)/1.1 var(--sans);letter-spacing:-.01em}
.badge{font:400 11px var(--mono);letter-spacing:.16em;border:1px solid var(--sand);color:var(--sand);padding:5px 9px;white-space:nowrap}
.offer-name span{font-size:14px;color:var(--mute);line-height:1.5}
.offer-meta{flex:0 0 210px;font:400 11px/1.8 var(--mono);letter-spacing:.14em;color:var(--mute)}
.offer-price{flex:0 0 auto;min-width:150px;margin-left:auto;text-align:right;font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.03em}
.offer summary .pl{align-self:center}
.offer[open] summary{padding-left:20px;padding-right:20px;background:var(--green-2)}
.offer[open],.offer[open]+.offer,.offer[open]+.offers-end{border-top-color:transparent}
.offer-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px clamp(32px,6vw,96px);padding:20px 0 44px}
.offer-tag{font:300 clamp(20px,1.9vw,25px)/1.35 var(--sans);color:var(--sand-2);letter-spacing:-.01em;margin-bottom:18px}
.offer-body p{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--text);text-wrap:pretty}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--cream) 10%,transparent);font-size:14px;line-height:1.6}
.facts li::before{content:"";flex:0 0 5px;height:5px;margin-top:.62em;border-radius:50%;background:var(--sand)}
.offer-body .btn-o{margin-top:24px}
.offers-end{border-top:none}
@media (min-width:700px){.offer-stack .offer{position:sticky;top:calc(78px + var(--i,0) * 14px);background:var(--green);box-shadow:0 -14px 28px -18px rgb(0 0 0/.55)}.offer-stack .offer:nth-of-type(2){--i:1}.offer-stack .offer:nth-of-type(3){--i:2}.offer-stack .offer:nth-of-type(4){--i:3}}
.offer-stack .offer summary{padding-left:20px;padding-right:20px}.offer-stack .offer-body{padding-left:20px;padding-right:20px;background:color-mix(in srgb,var(--cream) 2.2%,var(--green))}
.knows-wrap{margin-top:clamp(64px,8vw,112px)}
.knows-wrap > .eyebrow{margin-bottom:28px}
.knows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));border-top:1px solid var(--line)}
.know{padding:28px 24px 8px 0;display:flex;flex-direction:column;gap:10px;container-type:inline-size}
.know small{font:400 11px var(--mono);letter-spacing:.18em;color:var(--mute)}
.know b{font-size:clamp(26px,17cqi,60px);font-weight:300;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.know em{font:normal 400 min(11px,4.6cqi) var(--mono);letter-spacing:.12em;color:var(--sand);white-space:nowrap}
.know p{margin-top:6px;font-size:14px;line-height:1.65;color:var(--mute);text-wrap:pretty}
/* ===== cum începem ===== */
.steps{background:var(--cream);color:var(--ink)}
.steps .eyebrow{color:var(--ink-3)}
.steps h2{margin-bottom:var(--head-gap)}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:48px}
.act-line{height:1px;background:var(--ink);transform-origin:left}
.act small{display:block;font:400 11px var(--mono);letter-spacing:.2em;margin:20px 0 28px;color:var(--ink-3)}
.act h3{font-size:30px;letter-spacing:-.03em;margin-bottom:14px}
.act p{font-size:15px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
/* ===== muzica mea ===== */
.music .head-row > p{max-width:320px}
@media (min-width:700px){.music .head-row{container-type:inline-size}.music .head-row .h2{white-space:nowrap;font-size:min(var(--h2),calc(100cqw / 15.8))}}
@media (min-width:700px) and (max-width:1159px){.music{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr auto;grid-template-areas:"art ." "art head" "art text" "art meta" "art list" "art ." "links links";column-gap:clamp(48px,6vw,104px)}.music .head-row,.music .player{display:contents}.music .head-row > div{grid-area:head;margin-bottom:18px}.music .head-row .h2{white-space:normal;font-size:clamp(28px,3.6vw,44px)}.music .head-row .h2 em{display:block}.music .head-row > p{grid-area:text;width:auto;max-width:420px;margin:0 0 30px}.music .links{grid-area:links}}
@media (min-width:1160px){.music .head-row{flex-wrap:nowrap}.music .head-row .h2{font-size:min(var(--h2),calc((100cqw - 344px) / 15.8))}.music .head-row > p{flex-shrink:0;width:320px}}
.videos{display:grid;grid-template-columns:1fr;gap:clamp(24px,2.6vw,36px)}
.vid{display:block}
.vid-img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--green-2)}
.vid-img img{width:100%;height:100%;object-fit:cover;transition:filter .5s,transform .7s var(--ease)}
.vid-play{position:absolute;inset:0;display:grid;place-items:center}
.vid-play span{width:58px;height:58px;border-radius:50%;border:1px solid color-mix(in srgb,var(--cream) 75%,transparent);display:grid;place-items:center;background:color-mix(in srgb,var(--green) 35%,transparent);backdrop-filter:blur(4px)}
.vid-play svg{margin-left:3px}
.vid-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--cream) 18%,transparent);opacity:0;transition:opacity .3s}
.vid-bar i{display:block;height:100%;background:var(--sand);transform:scaleX(var(--p,0));transform-origin:left}
.vid.playing .vid-bar{opacity:1}
.vid.playing:not(.paused) .vid-play svg{display:none}
.vid.playing:not(.paused) .vid-play span::before{content:"";width:14px;height:16px;border-left:4px solid var(--cream);border-right:4px solid var(--cream);box-sizing:border-box}
.vid.playing small{color:var(--sand)}
.vid{cursor:pointer}
.vid-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:16px}
.vid-cap b{font-weight:400;font-size:19px;letter-spacing:-.01em}
.vid-cap small{font:400 11px var(--mono);letter-spacing:.14em;color:var(--mute);white-space:nowrap}
/* muzica pe telefon: albumul cu vinil + lista pieselor */
.vid-wave{display:none}
.album-m{--s:clamp(108px,calc((100vw - 158px)/1.45),205px);display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:22px}
.album-art{position:relative;flex-shrink:0;width:calc(var(--s)*1.45);height:var(--s)}
.sleeve{position:absolute;left:0;top:0;z-index:1;width:var(--s);height:var(--s);overflow:hidden;box-shadow:8px 0 20px rgb(0 0 0/.6)}
.sleeve img{width:100%;height:100%;object-fit:cover}
.vinyl{position:absolute;left:calc(var(--s)*.42);top:calc(var(--s)*.04);width:calc(var(--s)*.92);height:calc(var(--s)*.92);border-radius:50%;box-shadow:0 6px 16px rgb(0 0 0/.55);transition:left .9s var(--ease)}
.music.spinning .vinyl{left:calc(var(--s)*.53)}
.vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 10deg,transparent 0deg,rgb(255 255 255/.06) 15deg,rgb(255 255 255/.24) 38deg,rgb(255 255 255/.08) 62deg,transparent 85deg 185deg,rgb(255 255 255/.05) 200deg,rgb(255 255 255/.2) 220deg,rgb(255 255 255/.06) 242deg,transparent 262deg);-webkit-mask:radial-gradient(circle closest-side,transparent 37%,#000 46%,#000 96%,transparent 98%);mask:radial-gradient(circle closest-side,transparent 37%,#000 46%,#000 96%,transparent 98%)}
.disc{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle closest-side,transparent 0 36%,#0d0d0d 36% 45%,transparent 45.5%),radial-gradient(circle closest-side,transparent 0 55.6%,rgb(255 255 255/.055) 56.6%,transparent 57.8% 67.2%,rgb(255 255 255/.05) 68.2%,transparent 69.4% 78.8%,rgb(255 255 255/.045) 79.8%,transparent 81% 96%,rgb(255 255 255/.12) 97%,#020202 98.5%),repeating-radial-gradient(circle closest-side,#0b0b0b 0 .8px,#101010 .8px 1.6px);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);
animation:vinyl-spin 5s linear infinite paused}
.music.spinning .disc{animation-play-state:running}
.disc-label{position:relative;width:35%;height:35%;border-radius:50%;background:#2a2a2a center/cover;box-shadow:0 0 0 2px #050505,inset 0 0 0 1px rgb(0 0 0/.25)}
.disc-label::after{content:"";position:absolute;left:50%;top:50%;width:9%;height:9%;border-radius:50%;background:#e9e3d8;transform:translate(-50%,-50%);box-shadow:inset 0 1px 1px rgb(0 0 0/.35)}
.album-meta{text-align:right;display:flex;flex-direction:column;gap:6px}
.album-meta small{font:400 10.5px var(--mono);letter-spacing:.16em;color:var(--mute)}
.album-meta span{font-size:13px;color:var(--mute)}
.music .videos{counter-reset:trk;gap:0}
.music .vid:last-child{border-bottom:none}
.vid{counter-increment:trk;display:grid;grid-template-columns:24px 1fr auto 40px;column-gap:clamp(12px,1.2vw,14px);align-items:center;padding:clamp(14px,1.6vw,20px) 0;border-bottom:1px solid var(--line)}
.vid::before{content:counter(trk,decimal-leading-zero);grid-column:1;grid-row:1/3;font:400 12px var(--mono);color:var(--mute)}
.vid-img{grid-column:4;grid-row:1/3;width:40px;height:40px;aspect-ratio:auto;overflow:visible;background:none}
.vid-img img,.vid-bar{display:none}
.vid-play span{width:40px;height:40px;background:none;backdrop-filter:none;border-color:color-mix(in srgb,var(--cream) 45%,transparent)}
.vid-play svg{width:14px;height:14px}
.vid.playing:not(.paused) .vid-play span{background:var(--cream);border-color:var(--cream)}
.vid.playing:not(.paused) .vid-play span::before{width:11px;height:13px;border-left-width:3.5px;border-right-width:3.5px;border-color:var(--green)}
.vid-cap{display:contents}
.vid-cap b{grid-column:2;grid-row:1;font-size:clamp(17px,calc(12px + .8vw),21px)}
.vid-cap small{grid-column:3;grid-row:1/3}
.vid:not(.playing) .vid-cap small{font-size:0;letter-spacing:0}
.vid:not(.playing) .vid-cap small::after{content:attr(data-dur);font-size:11px;letter-spacing:.14em}
.vid:not(.playing)::before,.vid:not(.playing) .vid-img,.vid:not(.playing) .vid-cap small{grid-row:1}
.vid.playing .vid-cap b{color:var(--sand-2)}
.vid.playing .vid-wave{display:block;grid-column:2;grid-row:2;height:18px;margin-top:6px;
background:linear-gradient(90deg,var(--sand) calc(var(--p,0)*100%),color-mix(in srgb,var(--cream) 22%,transparent) 0);
-webkit-mask:url("data:image/svg+xml,") left center/102px 18px repeat-x;mask:url("data:image/svg+xml,") left center/102px 18px repeat-x}
.vid:hover img{transform:none}
@media (min-width:700px){
.player{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"art ." "art meta" "art list" "art .";column-gap:clamp(48px,6vw,104px)}
.album-m{display:contents}
.album-art{--s:clamp(200px,29vw,420px);grid-area:art;align-self:center}
.album-meta{grid-area:meta;text-align:left;margin-bottom:22px}
.album-meta small{font-size:11px}
.album-meta span{font-size:15px;color:var(--text)}
.music .videos{grid-area:list}
}
@media (hover:hover){.vid:hover .vid-play span{border-color:var(--cream)}.vid:hover .vid-cap b{color:var(--cream)}}
@keyframes vinyl-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.disc{animation:none!important}.vinyl{transition:none}}
.links{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:16px;margin-top:clamp(40px,4vw,56px);padding-top:24px;border-top:1px solid var(--line)}
.links a{font-size:clamp(12px,1vw,14px);color:var(--text);white-space:nowrap;transition:color .3s}
@media (max-width:1199px){.links{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:14px 24px}.links a{font-size:14px}}
@media (max-width:699px){.links{display:block;line-height:2.1}.links a{display:inline;white-space:normal}.links a:not(:last-child)::after{content:"·";margin:0 10px;color:var(--mute)}.links a{font-size:13px}}
@media (max-width:699px){.music .links{margin-top:0}.music .videos{border-top:1px solid var(--line)}.music .album-m{margin-bottom:48px}}
@media (max-width:699px){.music .head-row .h2{white-space:nowrap;font-size:min(var(--h2),calc((100vw - 2 * var(--pad-x)) / 10.7))}.music .head-row .h2 em{display:block}}
/* ===== recenzii ===== */
.rv-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:var(--head-gap)}
.rv-stat{margin:0;text-align:right;font:400 11px/1.8 var(--mono);letter-spacing:.16em;color:var(--sand);white-space:nowrap}
.rv-stat b{display:block;font:400 clamp(40px,5vw,64px)/1 var(--serif);letter-spacing:0;color:var(--cream);margin-bottom:6px}
.reviews figure{margin:0}
.reviews blockquote{margin:0}
.rv-main{padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line)}
.rv-main blockquote p{margin:0;max-width:22em;font:400 clamp(24px,3.1vw,42px)/1.35 var(--serif);letter-spacing:.01em;color:var(--cream);text-wrap:balance}
.rv-who{margin-top:18px;font:500 12px var(--sans);letter-spacing:.1em;color:var(--cream)}
.rv-who span{color:var(--mute);font-weight:400;letter-spacing:.04em}
.rv-fb{display:inline-flex;align-items:center;gap:10px;margin-top:18px;height:42px;padding:0 20px 0 16px;border:1px solid color-mix(in srgb,var(--sand) 55%,transparent);border-radius:999px;font:500 10.5px var(--sans);letter-spacing:.2em;color:var(--sand-2);transition:background .35s,color .35s,border-color .35s}
.rv-fb svg{flex:0 0 auto}
.rv-src{display:flex;align-items:center;gap:10px;margin:0 0 22px;font:400 11px var(--mono);letter-spacing:.16em;color:var(--sand)}
.rv-src svg{width:22px;height:22px;padding:3px;border:1px solid color-mix(in srgb,var(--sand) 50%,transparent);border-radius:50%}
.rv-fb:hover{background:var(--sand);color:var(--black);border-color:var(--sand)}
.rv-all a{display:inline-flex;align-items:center;gap:8px}
.rv-all a:hover{color:var(--cream)}
.rv-main .rv-src,.rv-main blockquote,.rv-main .rv-tr,.rv-main .rv-who,.rv-main .rv-fb{transition:opacity .28s ease,translate .28s ease,filter .28s ease}
.rv-main.swap blockquote,.rv-main.swap .rv-tr,.rv-main.swap .rv-who,.rv-main.swap .rv-fb{opacity:0;translate:0 -14px;filter:blur(6px)}
.rv-bar{width:min(320px,100%);height:2px;margin-top:28px;background:var(--line);overflow:hidden}
.rv-bar i{display:block;height:100%;width:100%;background:var(--sand);transform:scaleX(0);transform-origin:left}
.rv-bar.paused i{animation-play-state:paused!important}
@keyframes rv-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rv-tr{margin:18px 0 0;max-width:40em;font-size:15px;line-height:1.7;color:var(--mute);font-style:italic;text-wrap:pretty}
.rv-tr:empty{display:none}
.rv-main.enter blockquote{animation:rv-in .85s var(--ease) both}
.rv-main.enter .rv-tr{animation:rv-in .85s var(--ease) .08s both}
.rv-main.enter .rv-who{animation:rv-in .85s var(--ease) .12s both}
.rv-main.enter .rv-fb{animation:rv-in .85s var(--ease) .22s both}
@keyframes rv-in{from{opacity:0;translate:0 22px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.rv-card.pop{animation:rv-pop .7s var(--ease) both}
@keyframes rv-pop{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.rv-main blockquote p.short{font-size:clamp(44px,6.4vw,96px);line-height:1.1}
@media (prefers-reduced-motion:reduce){.rv-main.enter *,.rv-card.pop{animation:none}.rv-bar{display:none}}
.rv-row{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.rv-card[hidden]{display:none}
.rv-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:22px 0;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;cursor:pointer}
.rv-card:last-child{border-bottom:0}
.rv-cq{font-size:15px;line-height:1.7;color:var(--text);transition:color .3s}
.rv-cn{margin-top:12px;font:500 12px var(--sans);letter-spacing:.1em;color:var(--cream)}
.rv-cn span{color:var(--mute);font-weight:400;letter-spacing:.04em}
.rv-more{margin-top:10px;font:400 10.5px var(--mono);letter-spacing:.14em;color:var(--sand);border-bottom:1px solid color-mix(in srgb,var(--sand) 40%,transparent);padding-bottom:2px;opacity:.75;transition:opacity .3s}
@media (hover:hover){.rv-card:hover .rv-cq{color:var(--cream)}.rv-card:hover .rv-more{opacity:1}}
.rv-card:focus-visible{outline:2px solid var(--sand);outline-offset:6px}
@media (min-width:1100px){
.rv-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(24px,2.6vw,40px);padding-top:clamp(24px,3vw,36px)}
.rv-card{padding:0;border-bottom:0;justify-content:space-between}
.rv-cq{min-height:6.8em}
}
.rv-all{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--line);font:400 11px var(--mono);letter-spacing:.14em;color:var(--sand)}
.rv-all a{transition:color .3s}
@media (max-width:900px){.rv-stat{text-align:left}}
@media (max-width:420px){.rv-stat{letter-spacing:.1em;font-size:10.5px}}
/* ===== faq ===== */
.faq{background:var(--cream);color:var(--ink);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax)}
.faq .eyebrow{color:var(--ink-3)}
.faq .h2 em{color:var(--faq-em)}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,80px);align-items:start}
.qa{border-bottom:1px solid var(--line-ink)}
.faq-cols > div > .qa:last-child{border-bottom:none}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:clamp(16px,1.25vw,18px);line-height:1.35;letter-spacing:-.01em}
.qa .pl{width:30px;height:30px;font-size:17px;border-color:color-mix(in srgb,var(--ink) 30%,transparent);color:var(--ink-3)}
.qa p{margin:0 0 22px;font-size:14.5px;line-height:1.7;color:var(--ink-2);max-width:560px}
.qa p.qa-h{margin:18px 0 6px;font-weight:500;color:var(--ink)}
.qa-calc{list-style:none;margin:0 0 6px;padding:0;max-width:560px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.qa-calc li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:7px 0;border-bottom:1px dashed var(--line-ink)}
.qa-calc li:last-child{border-bottom:none}
.qa-calc li > span:last-child{font-variant-numeric:tabular-nums}
.qa-calc b{font-weight:500;color:var(--ink)}
.qa-calc + p{margin-top:16px}
/* ===== contact ===== */
.contact{background:var(--green);padding-bottom:40px}
.contact .eyebrow{margin-bottom:28px}
.contact-intro{margin-top:28px;max-width:560px;font-size:16px;line-height:1.7;color:var(--mute);text-wrap:pretty}
.channels{margin-top:clamp(48px,6vw,80px)}
.channel{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding:32px 20px;border-top:none;position:relative;background:var(--green);box-shadow:0 -14px 28px -18px rgb(0 0 0/.55);transition:background .4s}
.channel-t{flex:1 1 200px;display:flex;flex-direction:column;gap:8px}
.channel-t b{font:400 clamp(21px,2vw,27px)/1.15 var(--sans);letter-spacing:-.01em}
.channel-t span{font-size:14px;line-height:1.6;color:var(--mute);max-width:460px;text-wrap:pretty}
.channel-v{flex:0 0 300px;font:400 11px/1.8 var(--mono);letter-spacing:.14em;color:var(--mute)}
.channel-v span{display:block;color:var(--cream);overflow-wrap:anywhere}
.channel-btn{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--cream) 30%,transparent);font-size:0;color:var(--sand);transition:transform .3s,background .3s,color .3s}
.channel-info .channel-v{margin-right:68px}
.offer-stack .offer:last-of-type,.channels .channel:last-child{box-shadow:0 -14px 28px -18px rgb(0 0 0/.55),inset 0 -14px 28px -18px rgb(0 0 0/.55)}
.channel-btn::after{content:"↗";font-size:17px;font-weight:300;line-height:1}
.channel-info .channel-v span + span{letter-spacing:.06em}
.place{padding-top:clamp(36px,4.5vw,64px)}
.place .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.place h3{font:400 clamp(22px,7.4vw,46px)/1.05 var(--serif);letter-spacing:.01em;white-space:nowrap}
.place .sub{margin-top:clamp(10px,1.4vw,20px);font:300 clamp(18px,1.9vw,25px)/1.3 var(--sans);letter-spacing:-.01em;color:var(--sand-2)}
/* footer */
.footer{display:grid;grid-template-columns:auto 1fr auto auto;align-items:last baseline;gap:24px 40px;margin-top:clamp(48px,6vw,88px);padding-top:28px;border-top:1px solid var(--line)}
.ft-brand{display:flex;align-items:center;gap:16px}
.ft-brand svg{width:46px;height:46px;flex-shrink:0}
.ft-brand div{display:flex;flex-direction:column;gap:6px}
.ft-brand b{font:400 18px var(--serif);letter-spacing:.08em}
.ft-brand b{white-space:nowrap}
@media (max-width:1240px){.ft-brand b{font-size:17px;line-height:1.15}.ft-brand b span{display:block;color:var(--sand)}}
.ft-brand small{font:400 11px var(--mono);letter-spacing:.18em;color:var(--mute)}
.ft-social{display:flex;gap:24px;justify-self:center;font:400 11px var(--mono);letter-spacing:.16em}
.ft-copy{font:400 11px var(--mono);letter-spacing:.16em;color:var(--mute)}
.ft-top{align-self:center;width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb,var(--cream) 30%,transparent);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
/* ===== tema luminoasă (culorile temei închise de pe site-ul vechi) ===== */
:root[data-theme="light"]{
--black:oklch(21.5% .016 42); --green:oklch(27% .018 45); --green-2:oklch(32% .02 45);
--cream:oklch(96% .01 75); --cream-2:oklch(98% .006 80);
--sand:oklch(71% .15 36); --sand-2:oklch(86% .045 60); --text:oklch(88% .014 72); --mute:oklch(78% .018 70);
--ink:oklch(22% .02 42); --ink-2:oklch(36% .025 45); --ink-3:oklch(48% .03 45);
--hero-p:oklch(92% .012 75); --faq-em:oklch(58% .13 36);
color-scheme:dark;
}
/* logo și iconițe care aveau culorile scrise direct în SVG */
svg [fill="#efe9df"]{fill:var(--cream)} svg [stroke="#efe9df"]{stroke:var(--cream)} svg [fill="#b5aa98"]{fill:var(--sand)}
/* portretul: altă fotografie pe tema luminoasă */
.portrait .img-light{display:none}
:root[data-theme="light"] .portrait .img-dark{display:none}
:root[data-theme="light"] .portrait .img-light{display:block}
/* butonul de temă */
.mtheme{position:relative;align-self:flex-end;display:flex;align-items:center;gap:10px;margin:-8px 0 0;padding:10px 0;border:0;background:none;cursor:pointer;font:400 11px var(--mono);letter-spacing:.16em;color:var(--cream);-webkit-tap-highlight-color:transparent;opacity:0;transform:translateY(-10px);transition:opacity .6s ease,transform .8s var(--ease)}
.mtheme svg{width:18px;height:18px}
.menu-open .mtheme{opacity:1;transform:none;transition-delay:.25s}
.hdr-r{display:flex;align-items:center;gap:14px}
.theme-btn{display:flex;align-items:center;gap:8px;height:36px;padding:0;border:0;background:none;color:var(--text);font:400 11px var(--mono);letter-spacing:.18em;cursor:pointer;transition:color .3s}
.theme-btn b{font-weight:400}
.hdr-sep{width:1px;height:22px;background:color-mix(in srgb,var(--sand) 35%,transparent)}
.theme-btn svg{width:16px;height:16px}
@media (hover:hover){.theme-btn:hover{color:var(--cream)}}
/* animația butonului de temă: iconița se rotește, un inel se extinde, textul se schimbă lin */
.theme-btn,.mtheme{position:relative}
.theme-btn svg,.mtheme svg{transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
:root[data-theme="light"] .theme-btn svg,:root[data-theme="light"] .mtheme svg{transform:rotate(180deg)}
.theme-btn::after,.mtheme svg+span::before{content:none}
.mtheme.pulse svg{animation:pop .5s var(--ease)}
.mtheme.pulse span{animation:swap .5s var(--ease)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:theme-circle .9s cubic-bezier(.76,0,.24,1)}
@keyframes theme-circle{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0))}to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,0))}}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes pop{0%{scale:1}40%{scale:1.35}100%{scale:1}}
@keyframes swap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
/* ===== animații legate de scroll (CSS scroll-driven animations, fără JavaScript) =====
Rulează doar unde browserul le suportă (Chrome, Edge, Safari 26+); în rest rămân aparițiile simple din main.js. */
@keyframes sd-reveal{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes sd-title{from{opacity:0;clip-path:inset(0 0 100% 0);translate:0 .35em}to{opacity:1;clip-path:inset(0 0 -10% 0);translate:0 0}}
@keyframes sd-hero-img{to{translate:0 9%}}
@keyframes sd-hero-text{to{opacity:0;translate:0 -70px}}
@keyframes sd-portrait{from{opacity:0;translate:0 28px;scale:1.03}to{opacity:1;translate:0 0;scale:1}}
@keyframes act-dim{from{opacity:.16}to{opacity:1}}
@keyframes act-light{0%{opacity:0}55%{opacity:1}100%{opacity:.45}}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
/* aparițiile din JS sunt înlocuite de cele legate de scroll */
.js [data-rv]{opacity:1;transform:none;transition:none}
[data-rv]{animation:sd-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
/* titlurile urcă dintr-o mască, ca o cortină */
.h2[data-rv]{animation-name:sd-title;animation-range:entry 10% entry 90%}
/* hero: fotografia coboară mai încet decât pagina, textul se estompează */
.hero-media img{top:-9%;height:118%}
.hero-media{animation:none}
.hero-media img{animation:rise 1s ease .1s both,sd-hero-img linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
.hero-text{animation:sd-hero-text linear both;animation-timeline:scroll(root);animation-range:20vh 85vh}
/* portretul se deschide ca o fereastră */
.portrait[data-rv]{animation:none}
.portrait img{animation:sd-portrait linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
/* „Trei acte”: fiecare act se aprinde ca sub un reflector când ajunge în fața ochilor */
.act{position:relative;isolation:isolate}
.act::before{content:"";position:absolute;inset:-70px -60px -50px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 40% 45%,color-mix(in srgb,var(--sand) 20%,transparent),color-mix(in srgb,var(--sand) 7%,transparent) 55%,transparent);opacity:0;animation:act-light linear both;animation-timeline:view();animation-range:entry 25% cover 60%}
.act > :not(.act-line){animation:act-dim linear both;animation-timeline:view();animation-range:entry 25% cover 45%}
@media (min-width:700px){
.act:nth-child(2)::before,.act:nth-child(2) > :not(.act-line){animation-range:entry 55% cover 52%}
.act:nth-child(3)::before,.act:nth-child(3) > :not(.act-line){animation-range:entry 85% cover 58%}
.act:nth-child(2) .act-line{animation-range:entry 30% cover 47%}
.act:nth-child(3) .act-line{animation-range:entry 50% cover 54%}
}
}
}
/* ===== interacțiuni doar cu mouse ===== */
@media (hover:hover){
.nav a:hover{color:var(--cream)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.btn-o:hover,.ft-top:hover{background:var(--cream);color:var(--green);border-color:var(--cream)}
.header-cta:hover{color:var(--sand);border-color:var(--cream)}
.btn-solid:hover{background:transparent;color:var(--cream)}
.offer summary:hover,.channel:hover{padding-left:20px;padding-right:20px;background:var(--green-2)}
.channel:hover .channel-btn{background:var(--cream);color:var(--green);border-color:var(--cream)}
.offer:has(>summary:hover),.offer:has(>summary:hover)+.offer,.offer:has(>summary:hover)+.offers-end{border-top-color:transparent}
.links a:hover{color:var(--cream)}
.ft-social a:hover{color:var(--sand)}
}
/* ===== apariții la scroll (doar cu JavaScript activ) ===== */
.js [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .7s ease var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.js [data-rv].in{opacity:1;transform:none}
/* ===== ecrane mici ===== */
@media (max-width:899px){
.nav,.header-cta,.hdr-sep{display:none}
.burger{display:grid}
.site-header .theme-btn{display:none}
.mmenu{display:flex}
.hero{height:auto;align-items:stretch;flex-direction:column}
.hero-media{overflow:hidden;position:relative;inset:auto;order:2;width:100%;height:min(86svh,780px);min-height:460px;max-height:none}
.hero-media img{top:0;height:100%;animation:none;translate:0 -5%;object-position:46% 60%;filter:none}
:root[data-theme="light"] .hero-media img{filter:contrast(1.04) brightness(1.02) saturate(1.05)}
.hero::after{display:none}
/* fără blur cu mască peste imagine: pe iPhone provoacă salturi la primul scroll */
.hero-media::before{display:none}
.hero-media::after{z-index:2;background:linear-gradient(180deg,var(--green) 0%,color-mix(in srgb,var(--green) 100.0%,transparent) 0.0%,color-mix(in srgb,var(--green) 99.1%,transparent) 4.2%,color-mix(in srgb,var(--green) 94.2%,transparent) 8.4%,color-mix(in srgb,var(--green) 83.7%,transparent) 12.6%,color-mix(in srgb,var(--green) 68.3%,transparent) 16.8%,color-mix(in srgb,var(--green) 50.0%,transparent) 21.0%,color-mix(in srgb,var(--green) 31.7%,transparent) 25.2%,color-mix(in srgb,var(--green) 16.3%,transparent) 29.4%,color-mix(in srgb,var(--green) 5.8%,transparent) 33.6%,color-mix(in srgb,var(--green) 0.9%,transparent) 37.8%,color-mix(in srgb,var(--green) 0.0%,transparent) 42.0%),linear-gradient(0deg,var(--black) 0%,var(--black) 5%,color-mix(in srgb,var(--black) 100.0%,transparent) 5.0%,color-mix(in srgb,var(--black) 99.1%,transparent) 9.7%,color-mix(in srgb,var(--black) 94.2%,transparent) 14.4%,color-mix(in srgb,var(--black) 83.7%,transparent) 19.1%,color-mix(in srgb,var(--black) 68.3%,transparent) 23.8%,color-mix(in srgb,var(--black) 50.0%,transparent) 28.5%,color-mix(in srgb,var(--black) 31.7%,transparent) 33.2%,color-mix(in srgb,var(--black) 16.3%,transparent) 37.9%,color-mix(in srgb,var(--black) 5.8%,transparent) 42.6%,color-mix(in srgb,var(--black) 0.9%,transparent) 47.3%,color-mix(in srgb,var(--black) 0.0%,transparent) 52.0%)}
.hero-text{order:1;max-width:100%;padding:40px 20px 32px;animation:none;opacity:1;translate:none;filter:none}
.hero h1{font-size:clamp(34px,10vw,56px)}
.hero-sub span{font-size:15px}
.hero-p{margin-top:24px;max-width:420px;font-size:15px}
.btn-solid{padding:16px 24px;font-size:11px}
.link-u{font-size:11px}
.portrait{position:static}
.offer-body{padding:28px 0 36px}
.faq-cols{grid-template-columns:1fr}
.faq-cols > div:first-child > .qa:last-child{border-bottom:1px solid var(--line-ink)}
.channel{align-items:flex-start;gap:14px 16px}
.channel-t{flex:1 1 100%}
.channel-v{flex:1 1 0;letter-spacing:.03em}
.channel-info .channel-v{margin-right:0}
.footer{grid-template-columns:1fr auto;grid-template-areas:"brand top" "social top";gap:14px 16px}
.ft-brand{grid-area:brand;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:10px 12px}
.ft-brand div{display:contents}
.ft-brand small{grid-column:1/-1}
.ft-brand svg{width:40px;height:40px;margin-bottom:3.6px}
.ft-brand small{white-space:nowrap}
.ft-brand small{letter-spacing:.04em;font-size:10.5px}
.ft-social{grid-area:social;justify-self:start;gap:18px}
.ft-copy{display:none}
.ft-top{grid-area:top;align-self:end;width:40px;height:40px}
.js [data-rv]{transition-delay:0ms}
}
/* ===== hero pe telefon și tabletă (varianta A2): fotografia sus, titlul urcă peste marginea ei ===== */
@media (max-width:899px){
.hero-media{order:1;height:min(62svh,520px);min-height:380px}
.hero-media img{translate:none;object-position:44% 62%}
.hero-media::after{background:linear-gradient(180deg,color-mix(in srgb,var(--green) 0%,transparent) 0%,color-mix(in srgb,var(--green) 0%,transparent) 42%,color-mix(in srgb,var(--green) 45%,transparent) 66%,color-mix(in srgb,var(--green) 85%,transparent) 84%,var(--green) 100%)}
.hero-text{order:2;z-index:3;margin-top:-132px;padding:0 20px 72px}
/* trecere lină spre secțiunea următoare */
.hero::after{display:block;height:220px;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--black) 0.0%,transparent) 0%,color-mix(in srgb,var(--black) 2.8%,transparent) 10%,color-mix(in srgb,var(--black) 10.4%,transparent) 20%,color-mix(in srgb,var(--black) 21.6%,transparent) 30%,color-mix(in srgb,var(--black) 35.2%,transparent) 40%,color-mix(in srgb,var(--black) 50.0%,transparent) 50%,color-mix(in srgb,var(--black) 64.8%,transparent) 60%,color-mix(in srgb,var(--black) 78.4%,transparent) 70%,color-mix(in srgb,var(--black) 89.6%,transparent) 80%,color-mix(in srgb,var(--black) 97.2%,transparent) 90%,color-mix(in srgb,var(--black) 100.0%,transparent) 100%)}
.hero-chip{display:inline-block;margin-bottom:16px;padding:5px 9px;border:1px solid var(--sand);font:400 10.5px var(--mono);letter-spacing:.16em;color:var(--sand)}
.hero-sub{gap:12px;margin-top:14px}
.hero-sub::before{width:22px}
.hero-sub span{font-size:13.5px;letter-spacing:.1em}
.hero-p{margin-top:18px}
.hero-p:not(.hero-p-m){display:none}
.hero-p-m{display:block}
.hero-ctas{flex-wrap:nowrap;gap:22px;margin-top:28px}
.hero-ctas .btn-solid{flex:0 0 auto;padding:14px 22px;font-size:10.5px}
}
/* ===== telefon: spații și carduri mai compacte ===== */
@media (max-width:699px){
:root{--pad-y:64px}
.offer summary{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name name" "meta price";align-items:center;gap:14px 16px;position:relative;padding-top:22px;padding-bottom:22px}
.offer-name{grid-area:name;flex:none;padding-right:48px}
.offer-meta{grid-area:meta;flex:none;align-self:end}
.offer-price{grid-area:price;min-width:0;margin:0;align-self:end;font-size:28px;line-height:1}
.offer summary .pl{position:absolute;top:20px;right:20px}
.offer-name b{white-space:normal}
/* cardurile ating marginile ecranului, ca textul din ele să se alinieze cu restul paginii */
.offer-stack{margin-left:calc(-1 * var(--pad-x));margin-right:calc(-1 * var(--pad-x))}
.channels{margin-left:calc(-1 * var(--pad-x));margin-right:calc(-1 * var(--pad-x))}
.channel{padding-top:22px;padding-bottom:22px}
/* cifre mai liniștite: „Bine de știut” și cifrele din „Despre” */
.know b{font-size:40px}
.know{padding:22px 0 4px;gap:8px}
.stat b{font-size:38px}
.channel-t{gap:6px}
}
/* ===== tabletă: textul din carduri aliniat cu restul paginii (cardurile ies cu padding-ul lor în afară) ===== */
@media (min-width:700px) and (max-width:1159px){
.offer-stack,.channels{margin-left:-20px;margin-right:-20px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
.js [data-rv]{opacity:1;transform:none}
}