/* Hero style lab: three deliberately different directions */

/* ---------- Shared variant helpers ---------- */
.hero-v{position:relative;overflow:hidden}
.hero-v .hero-copy{position:relative;z-index:3}
.hero-v .hero-copy h1{margin:0;letter-spacing:-.055em}
.hero-v .hero-copy .lead{max-width:650px}
.hero-v .hero-copy .promise{margin-top:16px}
.hero-v .hero-actions{margin-top:30px}
.hero-v .stat-line{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.hero-v .stat-line strong{font-size:25px;letter-spacing:-.04em}
.hero-v .stat-line span{color:inherit;opacity:.62;font-size:12px;margin-left:6px}
.hero-v .cover{position:relative;overflow:hidden;border-radius:20px;box-shadow:0 22px 50px rgba(20,24,44,.18);border:1px solid rgba(255,255,255,.25)}
.hero-v .cover:before,.hero-v .cover:after{content:"";position:absolute}
.hero-v .cover strong{position:absolute;left:20px;bottom:18px;z-index:2;font-size:20px;line-height:1.05;letter-spacing:.04em;color:#fff}
.cover-b{background:linear-gradient(145deg,#253866,#5e6deb 55%,#9b7cff)}
.cover-b:before{width:160px;height:160px;border-radius:44px;right:-35px;top:-24px;background:rgba(255,255,255,.18);transform:rotate(25deg)}
.cover-b:after{width:86px;height:86px;border-radius:25px;right:55px;top:45px;border:1px solid rgba(255,255,255,.5);transform:rotate(42deg)}
.cover-u{background:linear-gradient(145deg,#162c3b,#177f96 58%,#5bd2bf)}
.cover-u:before{width:190px;height:110px;border-radius:999px;right:-35px;top:20px;background:rgba(255,255,255,.16);transform:rotate(-18deg)}
.cover-a{background:linear-gradient(145deg,#46214d,#a14ec4 55%,#f27b93)}
.cover-a:after{width:115px;height:115px;border-radius:50%;right:28px;top:24px;border:1px solid rgba(255,255,255,.48)}

/* ---------- A: Editorial / content first ---------- */
.hero-editorial{background:#f7f3ed;color:#171923;padding:92px 0 72px;border-bottom:1px solid #ebe5dd}
.hero-editorial:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72),transparent 56%);pointer-events:none}
.hero-editorial .editorial-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(460px,.95fr);gap:72px;align-items:center;position:relative;z-index:2}
.hero-editorial .eyebrow{color:#6c5be6}
.hero-editorial h1{font-size:clamp(52px,5.2vw,82px);line-height:1;max-width:780px;display:grid;gap:.10em}
.hero-editorial h1 .hero-title-line{display:block}
.hero-editorial h1 em{font-style:normal;color:#6b5ce7}
.hero-editorial .lead{color:#626779;font-size:18px;line-height:1.75;margin-top:25px}
.hero-editorial .promise{color:#171923;font-size:16px}
.hero-editorial .hero-actions .btn:first-child{background:transparent;border-color:#c9c4bc}
.hero-editorial .editorial-meta{margin-top:38px;padding-top:23px;border-top:1px solid #dcd5cc;color:#3f4451}
.editorial-stack{height:520px;position:relative}
.editorial-stack .cover{position:absolute}
.editorial-stack .cover.one{width:330px;height:410px;left:22px;top:54px;transform:rotate(-5deg)}
.editorial-stack .cover.two{width:285px;height:350px;right:10px;top:0;transform:rotate(6deg)}
.editorial-stack .cover.three{width:250px;height:310px;right:55px;bottom:0;transform:rotate(-2deg)}
.editorial-badge{position:absolute;left:0;bottom:10px;background:#171923;color:#fff;border-radius:18px;padding:19px 22px;box-shadow:0 18px 38px rgba(23,25,35,.18);z-index:5}
.editorial-badge strong{font-size:34px;display:block;line-height:1;letter-spacing:-.05em}.editorial-badge span{font-size:11px;color:#b8bdc9}

/* ---------- B: Minimal brand / centered ---------- */
.hero-minimal{background:#0d1020;color:#fff;padding:105px 0 0;min-height:720px}
.hero-minimal:before{content:"";position:absolute;width:760px;height:500px;border-radius:50%;left:50%;top:-300px;transform:translateX(-50%);background:radial-gradient(circle,rgba(112,90,255,.44),rgba(112,90,255,0) 70%)}
.hero-minimal .minimal-copy{max-width:980px;margin:0 auto;text-align:center;position:relative;z-index:4;padding:0 20px}
.hero-minimal .eyebrow{color:#9b9fff}
.hero-minimal h1{font-size:clamp(58px,6.4vw,96px);line-height:.97;max-width:980px;margin:0 auto}
.hero-minimal h1 span{color:#9a82ff}
.hero-minimal .lead{font-size:18px;line-height:1.75;color:#b7bfd2;margin:27px auto 0;max-width:680px}
.hero-minimal .promise{font-size:16px;margin-top:13px}
.hero-minimal .hero-actions{justify-content:center}
.hero-minimal .hero-actions .btn:first-child{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.minimal-stats{display:flex;justify-content:center;gap:44px;margin-top:35px;color:#fff}
.minimal-stats div{font-size:13px;color:#9ea6bb}.minimal-stats strong{font-size:21px;color:#fff;margin-right:6px}
.minimal-shelf{width:min(1120px,calc(100% - 48px));height:270px;margin:72px auto 0;position:relative;z-index:3;display:flex;justify-content:center;align-items:flex-end;gap:18px;overflow:hidden}
.minimal-shelf .cover{flex:0 0 275px;height:230px;border-radius:18px 18px 0 0;box-shadow:0 -10px 38px rgba(0,0,0,.25);transform-origin:bottom}
.minimal-shelf .cover:nth-child(1){transform:translateY(38px) rotate(-2deg);opacity:.72}
.minimal-shelf .cover:nth-child(2){height:260px;transform:translateY(10px)}
.minimal-shelf .cover:nth-child(3){height:245px;transform:translateY(26px) rotate(2deg);opacity:.87}
.minimal-shelf .cover:nth-child(4){transform:translateY(50px);opacity:.55}

/* ---------- C: Library / visual catalog ---------- */
.hero-library{background:#fff;color:#151927;padding:76px 0 72px;border-bottom:1px solid var(--line)}
.hero-library .library-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);gap:64px;align-items:center}
.hero-library .eyebrow{color:#5b5ce2}
.hero-library h1{font-size:clamp(50px,5vw,78px);line-height:1.01;max-width:690px}
.hero-library h1 .thin{font-weight:450;color:#848a98}
.hero-library .lead{font-size:18px;color:#687184;margin-top:24px;max-width:590px}
.hero-library .promise{font-size:16px}
.hero-library .library-proof{margin-top:34px;display:flex;gap:18px;align-items:center;color:#5f6776;font-size:12px}
.hero-library .library-proof strong{font-size:23px;color:#151927;margin-right:5px}
.library-wall{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:150px;gap:13px;transform:rotate(1deg)}
.library-wall .cover{border-radius:16px;min-width:0;box-shadow:0 14px 30px rgba(30,35,62,.12)}
.library-wall .cover.tall{grid-row:span 2}.library-wall .cover.wide{grid-column:span 2}.library-wall .cover strong{font-size:14px;left:14px;bottom:13px}
.library-note{grid-column:span 2;background:#111526;color:#fff;border-radius:16px;padding:22px;display:flex;align-items:flex-end;justify-content:space-between;box-shadow:0 14px 30px rgba(30,35,62,.12)}
.library-note strong{font-size:38px;letter-spacing:-.05em;line-height:1}.library-note span{font-size:11px;color:#9da7bd;max-width:115px;text-align:right}

/* variant switch bar */
.style-switch{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;background:rgba(17,21,38,.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px;display:flex;gap:4px;box-shadow:0 12px 35px rgba(0,0,0,.22)}
.style-switch a{color:#cbd2e2;padding:8px 13px;border-radius:999px;font-size:11px;font-weight:800}.style-switch a.active{background:#fff;color:#161a2a}

@media(max-width:1000px){
 .hero-editorial .editorial-grid,.hero-library .library-grid{grid-template-columns:1fr}
 .editorial-stack{height:440px;max-width:680px;margin:0 auto;width:100%}
 .library-wall{max-width:760px;width:100%;margin:0 auto}
}
@media(max-width:700px){
 .hero-editorial{padding:64px 0 54px}.hero-editorial h1,.hero-minimal h1,.hero-library h1{font-size:43px}
 .editorial-stack{height:350px}.editorial-stack .cover.one{width:220px;height:280px}.editorial-stack .cover.two{width:200px;height:245px}.editorial-stack .cover.three{width:180px;height:220px}
 .hero-minimal{padding-top:70px;min-height:auto}.minimal-stats{gap:16px;flex-wrap:wrap}.minimal-shelf{height:190px;margin-top:45px}.minimal-shelf .cover{flex-basis:190px;height:160px}.minimal-shelf .cover:nth-child(2){height:180px}.minimal-shelf .cover:nth-child(3){height:170px}
 .library-wall{grid-auto-rows:110px;gap:9px}.library-note{padding:15px}.library-note strong{font-size:28px}
 .style-switch{display:none}
}

/* V13.02 RC4 positioning title: keep the sentence intact on desktop,
   allow only a semantic clause break on narrower screens. */
.hero-editorial .hero-positioning-title{font-size:clamp(46px,4.35vw,68px);line-height:1.08;max-width:none;display:flex;gap:0;align-items:baseline;white-space:nowrap}
.hero-editorial .hero-positioning-title .hero-title-part{display:inline;white-space:nowrap}
@media(max-width:1180px){
 .hero-editorial .hero-positioning-title{display:grid;gap:.14em;white-space:normal}
}
@media(max-width:700px){
 .hero-editorial .hero-positioning-title{font-size:43px;line-height:1.08;gap:.12em}
}

/* V13.02 RC4 desktop proportion: give the positioning sentence enough width
   to stay on one line at the normal 1180px desktop container. */
@media(min-width:1181px){
 .hero-editorial .editorial-grid{grid-template-columns:minmax(0,1.28fr) minmax(400px,.72fr);gap:54px}
 .hero-editorial .hero-positioning-title{font-size:clamp(48px,3.7vw,60px)}
}