@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#080808;--paper:#eeeae3;--muted:#9a9690;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box}html{background:var(--bg);color:var(--paper);font-family:Inter,Arial,sans-serif}body{margin:0;background:var(--bg)}
a{color:inherit;text-decoration:none}main{min-height:100vh}
.hero{min-height:47vh;padding:32px 4.5vw 48px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:5vw;border-bottom:1px solid var(--line)}
.brand-column{grid-column:1;grid-row:1;align-self:start}.brand{display:inline-block;width:min(190px,26vw)}.brand img{display:block;width:100%;height:auto}
.hero-copy{grid-column:1;grid-row:2;align-self:center;justify-self:start}
.overline,.type{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.hero h1{font-size:clamp(54px,8vw,122px);letter-spacing:-.075em;line-height:.82;margin:0;font-weight:600}.hero h1 em{font-family:Georgia,serif;font-weight:400}
.intro{max-width:500px;margin:28px 0 0;color:#aaa6a0;line-height:1.65;font-size:14px}
.training-card{grid-column:2;grid-row:2;justify-self:end;align-self:center;width:min(520px,42vw);padding:28px 0 0;border-top:1px solid rgba(255,255,255,.28);position:relative;cursor:pointer}
.training-kicker{margin:0 0 7px;font-size:16.8px;letter-spacing:.17em;color:#b8b4ae}.training-card strong{display:block;font-size:clamp(33.6px,3.15vw,49px);line-height:.95;letter-spacing:.035em;font-weight:600}.training-card span{display:block;margin-top:22px;font-size:clamp(15.4px,1.4vw,23.8px);line-height:1.25;color:#8f8b85}.training-card i{position:absolute;right:0;top:28px;font-style:normal;font-size:38px;color:#85817b}
.products{display:grid;grid-template-columns:repeat(4,1fr);min-height:610px}
.product{position:relative;overflow:hidden;min-height:610px;border-right:1px solid var(--line);display:flex;align-items:flex-end;isolation:isolate}
.product:last-child{border-right:0}.portrait,.shade{position:absolute;inset:0}.portrait{background-size:cover;background-position:center 18%;filter:saturate(.65) contrast(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
.kasandra .portrait{background-image:url('./kasandra/kasandra-hero-portrait-v1.png')}.delta .portrait{background-image:url('./delta/delta-hero-portrait-v1.png')}.ossan .ossan-portrait{background-image:url('./ossan-card.png');background-position:center;background-size:cover;filter:none}.alpha .portrait{background-image:url('./alpha-card.png');background-position:center center;filter:saturate(.45) contrast(1.08) brightness(.78)}
.shade{background:linear-gradient(180deg,rgba(0,0,0,.03) 14%,rgba(0,0,0,.16) 51%,rgba(0,0,0,.94) 100%);z-index:1}.alpha .shade{background:linear-gradient(180deg,rgba(0,0,0,.05) 7%,rgba(0,0,0,.12) 48%,rgba(0,0,0,.94) 100%)}
.product-content{position:relative;z-index:3;padding:34px 2.7vw 40px;width:100%}.num{position:absolute;right:2.7vw;top:36px;font-size:11px;color:rgba(255,255,255,.55)}
.product h2{font-size:clamp(38px,3.5vw,60px);letter-spacing:-.065em;line-height:.9;margin:0 0 18px;font-weight:600}
.product .result{font-size:13px;line-height:1.55;color:#c2beb8;min-height:43px;margin:0 0 34px;max-width:260px}.enter{font-size:10px;text-transform:uppercase;letter-spacing:.12em;border-top:1px solid rgba(255,255,255,.25);padding-top:15px;display:flex;justify-content:space-between}.enter b{font-size:18px;font-weight:400;transition:transform .3s}
.product:hover .portrait{transform:scale(1.025);filter:saturate(.85) contrast(1.03)}.alpha:hover .portrait{filter:saturate(.55) contrast(1.1) brightness(.84)}.product:hover .enter b{transform:translateX(7px)}
.tests{padding:58px 4.5vw 62px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tests .overline{margin-bottom:12px;font-size:16px;letter-spacing:.18em;color:#c8c4be}.tests h3{margin:0;font-family:Georgia,serif;font-weight:400;font-style:italic;font-size:clamp(40px,5vw,76px);letter-spacing:-.045em}.tests-right{display:grid;grid-template-columns:auto auto auto;gap:22px;align-items:center;padding-bottom:8px}.test-name{font-size:20px;letter-spacing:.10em;font-weight:500}.test-more{text-transform:uppercase;letter-spacing:.15em;font-size:9px;color:var(--muted)}.tests-right b{font-size:22px;font-weight:400;color:#85817b}
footer{display:flex;justify-content:space-between;padding:28px 4.5vw;color:#77736e;font-size:10px;text-transform:uppercase;letter-spacing:.14em}.footer-home{color:inherit;text-decoration:none}.footer-home:hover{color:#f3f1ed}
@media(max-width:1150px){.products{grid-template-columns:repeat(2,1fr)}.product{border-bottom:1px solid var(--line)}.product:nth-child(2){border-right:0}.product-content{padding-left:4vw;padding-right:4vw}.num{right:4vw}}
@media(max-width:850px){.hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:auto;padding-top:26px}.brand-column{grid-column:1;grid-row:1}.brand{width:150px}.hero-copy{grid-column:1;grid-row:2;margin-top:78px}.training-card{grid-column:1;grid-row:3;justify-self:stretch;width:100%;margin-top:52px;max-width:none}.training-kicker{font-size:10.5px}.training-card strong{font-size:29.4px}.training-card span{font-size:14px}.training-card i{font-size:28px}.products{grid-template-columns:1fr}.product{min-height:72vh;border-right:0}.tests{align-items:flex-start;flex-direction:column}.tests-right{width:100%;grid-template-columns:1fr auto auto}footer{gap:20px;flex-wrap:wrap}}

/* language switch */
.lang-switch{display:flex;flex-direction:column;gap:3px;margin-left:14px;align-self:center;font-size:9px;line-height:1;letter-spacing:.14em;z-index:20}.lang-switch a{color:#777;text-decoration:none}.lang-switch a.active{color:#fff}.lang-switch a:hover{color:#fff}@media(max-width:700px){.lang-switch{font-size:8px;margin-left:9px}}

/* v3 header alignment: OSSAN logo + SK/CZ */
.brand-column{display:flex;align-items:flex-start}
.brand{width:190px;max-width:26vw}
.lang-switch{height:58px;margin-left:8px;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;font-size:18px;line-height:1;letter-spacing:.08em}
@media(max-width:850px){.brand{width:150px;max-width:none}.lang-switch{height:48px;margin-left:7px;font-size:15px}}

/* v4 language switch spacing/alignment */
.lang-switch{margin-left:24px!important;position:relative!important}
.lang-switch a:last-child{position:absolute;left:0;bottom:-2px}
@media(max-width:850px){.lang-switch{margin-left:21px!important}.lang-switch a:last-child{bottom:-2px}}

/* v5 language switch — SK and CZ side by side */
.lang-switch{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;height:auto!important;margin-left:24px!important;gap:12px!important;position:relative!important;align-self:center!important}
.lang-switch a,.lang-switch a:last-child{position:static!important;left:auto!important;bottom:auto!important}
@media(max-width:850px){.lang-switch{margin-left:21px!important;gap:10px!important;height:auto!important}}

/* v7: hero typography + language alignment */
.hero h1{font-size:clamp(40.5px,6vw,91.5px);letter-spacing:.015em;line-height:.96;font-weight:400}
.hero h1 em{font-weight:400}
.brand-column{align-items:flex-start}
.lang-switch{align-self:flex-start!important;margin-top:0!important}

/* v9: more breathing room between top header and hero content */
@media(min-width:851px){
  .hero{row-gap:50px;min-height:calc(47vh + 50px)}
}