:root { color-scheme: dark; --bg:#070b0e; --surface:#0e1418; --line:#27333b; --text:#eef1f2; --muted:#a0adb4; --blue:#339dfa; --content:1200px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.wrap { width:min(var(--content),calc(100% - 48px)); margin-inline:auto; }
header { border-bottom:1px solid #20292f; }
.topbar { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:13px; font-size:14px; letter-spacing:.24em; font-weight:600; white-space:nowrap; }
.brand svg { width:56px; height:32px; flex:none; }
nav { display:flex; align-items:center; gap:32px; color:var(--muted); font-size:14px; }
nav a:hover { color:var(--text); }
.lang-switch { display:flex; gap:0; align-items:center; border:1px solid #3b4a52; border-radius:6px; overflow:hidden; white-space:nowrap; }
.lang-switch a { display:block; min-width:40px; padding:4px 9px; text-align:center; }
.lang-switch a[aria-current="page"] { background:#243641; color:#e8f4ff; }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); min-height:550px; gap:60px; align-items:center; padding-block:72px 90px; }
.hero > * { min-width:0; }
.eyebrow { margin:0 0 24px; color:var(--blue); letter-spacing:.23em; text-transform:uppercase; font-size:12px; font-weight:700; }
h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(3.7rem,6vw,6.4rem); line-height:1.03; letter-spacing:-.05em; margin:0 0 26px; }
.intro { color:#b8c1c5; font-size:clamp(1.1rem,1.7vw,1.3rem); max-width:540px; margin:0 0 34px; line-height:1.6; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border:1px solid #52616b; border-radius:7px; font-size:14px; font-weight:600; }
.button.primary { background:var(--blue); color:#061018; border-color:var(--blue); }
.button:hover { border-color:#c7dce7; }
.hero-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:center; padding:24px; border:1px solid var(--line); border-radius:28px; background:radial-gradient(circle at 50% 10%,#15222b 0,#0b1014 65%); }
.hero-gallery figure { margin:0; min-width:0; }
.hero-gallery img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:22%; box-shadow:0 20px 35px #0008; }
.hero-gallery figcaption { margin-top:14px; text-align:center; font-size:13px; color:var(--muted); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.section-head h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(2.3rem,4vw,4.2rem); letter-spacing:-.04em; line-height:1.1; }
.section-head p { margin:0; max-width:380px; color:var(--muted); }
.products { padding-block:76px 110px; border-top:1px solid #20292f; }
.product-grid { display:grid; grid-template-columns:1fr; gap:24px; }
.product { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface); }
.product-copy { padding:34px; }
.product small { font-size:12px; color:var(--blue); letter-spacing:.18em; text-transform:uppercase; }
.product h3 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:2.8rem; letter-spacing:-.035em; line-height:1.1; margin:15px 0; }
.product p { color:var(--muted); margin:0; max-width:680px; }
.product .product-subtitle { margin:-3px 0 17px; color:#aab5bb; font-size:14px; letter-spacing:.16em; text-transform:uppercase; }
.cadran-visuals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; align-items:start; padding:27px 55px 25px; background:radial-gradient(circle at 50% 45%,#162129,#080d10 70%); }
.cadran-visuals figure { min-width:0; margin:0; text-align:center; }
.cadran-visuals a { display:block; width:fit-content; max-width:100%; margin-inline:auto; }
.cadran-visuals img { display:block; width:auto; max-width:100%; height:470px; object-fit:contain; box-shadow:0 0 24px #0008; transition:transform .25s ease; }
.cadran-visuals a:hover img { transform:scale(1.025); }
.cadran-visuals figcaption { color:#c4ccd0; font-size:13px; margin-top:13px; }
.listen-copy { padding:18px 34px 24px; border-top:1px solid var(--line); }
.listen-copy strong { font-size:15px; font-weight:500; color:#e6ebed; }
.listen-copy p { margin-top:7px; color:#aebac0; font-size:14px; line-height:1.55; }
.product-renamer { display:grid; grid-template-columns:1fr 1.2fr; align-items:center; }
.product-renamer .visual-note { grid-column:1 / -1; }
.product-visual { display:flex; align-items:center; justify-content:center; height:380px; margin-top:auto; padding:16px; background:radial-gradient(circle at 50% 45%,#162129,#080d10 66%); overflow:hidden; }
.product-visual:hover img { transform:scale(1.025); }
.product-visual img { display:block; max-width:100%; width:auto; max-height:100%; object-fit:contain; transition:transform .25s ease; }
.product-cadran .product-visual img { box-shadow:0 0 32px #0009; }
.product-renamer .product-visual { padding:12px; }
.product .visual-note { margin:0; padding:12px 20px; background:#090e11; border-top:1px solid var(--line); color:#aab6bc; font-size:12px; }
.features { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.features span { color:#c4cdd2; border:1px solid #30404a; border-radius:5px; padding:5px 10px; font-size:13px; }
.philosophy { border-top:1px solid #20292f; padding-block:92px; background:linear-gradient(110deg,#0c1216,#090d10); }
.philosophy-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:start; }
.philosophy h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.5rem,4vw,4.4rem); line-height:1.12; letter-spacing:-.04em; font-weight:400; margin:0; }
.principles { display:grid; gap:24px; }
.principle { border-top:1px solid #35434a; padding-top:17px; display:grid; grid-template-columns:120px 1fr; gap:22px; }
.principle strong { font-weight:500; color:#e7ecee; }
.principle p { margin:0; color:var(--muted); }
.next { display:flex; justify-content:space-between; align-items:center; gap:40px; padding-block:70px 92px; }
.next h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(2rem,3.3vw,3.2rem); line-height:1.15; font-weight:400; margin:0; }
.next p { margin:0; max-width:560px; color:var(--muted); }
footer { border-top:1px solid #253039; color:var(--muted); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:26px; font-size:13px; }
.footer-inner a:hover { color:var(--text); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .product-visual img,.cadran-visuals img { transition:none; } }
@media (max-width:820px) { .hero { grid-template-columns:1fr; gap:40px; padding-block:65px; } .hero-gallery { max-width:600px; } .section-head { display:block; } .section-head p { margin-top:18px; } }
@media (max-width:950px) { .product-renamer { grid-template-columns:1fr; } .product-visual { height:460px; } .philosophy-grid { grid-template-columns:1fr; gap:50px; } }
@media (max-width:580px) { .wrap { width:min(var(--content),calc(100% - 32px)); } .topbar { min-height:72px; } .brand { font-size:11px; gap:7px; } .brand svg { width:42px; } nav { gap:10px; font-size:13px; } nav > a:nth-child(2) { display:none; } .lang-switch a { min-width:33px; padding:4px 6px; } .hero { padding-block:50px 70px; } h1 { font-size:3.65rem; } .hero-gallery { gap:10px; padding:12px; border-radius:16px; } .hero-gallery img { border-radius:19%; } .hero-gallery figcaption { font-size:12px; } .product-copy { padding:26px; } .cadran-visuals { gap:12px; padding:20px 15px; } .cadran-visuals img { height:300px; } .cadran-visuals figcaption { font-size:12px; } .listen-copy { padding:20px 26px; } .product-visual { height:340px; } .philosophy { padding-block:65px; } .principle { grid-template-columns:1fr; gap:3px; } .next { display:block; padding-block:55px 70px; } .next p { margin-top:18px; } .footer-inner { display:block; } .footer-inner span { display:block; } }