:root { color-scheme:dark; --ink:#061123; --surface:#0d2638; --text:#e8f1f6; --muted:#a7c1d1; --blue:#69c4f3; --teal:#61e4cf; --line:rgba(156,200,222,.19); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:radial-gradient(ellipse at 80% 5%,#15435560,transparent 32%),linear-gradient(#061123a8,#061123 950px),url('/brand/bg1.jpg') center top/1500px auto no-repeat,var(--ink); color:var(--text); font:16px/1.65 Arial,Helvetica,sans-serif; }
body::before { content:''; position:absolute; inset:0 0 auto; height:720px; pointer-events:none; background:linear-gradient(90deg,transparent 49.9%,#b5def306 50%,transparent 50.1%); background-size:72px 72px; }
.wrap { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
a { color:var(--teal); text-underline-offset:4px; }
a:hover { color:#d6fff7; }
button,a,summary { -webkit-tap-highlight-color:#61e4cf33; }
:focus-visible { outline:3px solid var(--teal); outline-offset:5px; }
.symbols { position:absolute; width:0; height:0; overflow:hidden; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
img { display:block; max-width:100%; height:auto; }
figure,p,h1,h2,h3,h4 { margin:0; }
.skip-link { position:absolute; z-index:5; top:-100px; left:20px; padding:10px; background:var(--ink); }
.skip-link:focus { top:10px; }
.header { position:relative; border-bottom:1px solid var(--line); background:#061123a6; }
.header-inner { min-height:92px; display:flex; align-items:center; gap:32px; padding-block:10px; }
.logo { width:210px; }
.back-link { margin-left:auto; color:var(--muted); font-size:13px; text-decoration:none; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:24px; min-height:54px; padding:12px 23px; border:1px solid #8dedde; border-radius:8px; background:linear-gradient(125deg,#60e3d0,#7ce7c7); color:#092c36; text-decoration:none; font-size:14px; font-weight:800; box-shadow:0 7px 30px #42d9c81c,inset 0 1px #ffffff6b; transition:box-shadow .2s,background .2s; }
.button:hover { color:#041923; background:#a0f7df; box-shadow:0 7px 30px #42d9c838; }
.button-small { min-height:42px; padding:9px 15px; gap:14px; font-size:12px; }
.button-small svg { width:18px; height:18px; }
.hero { position:relative; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:50px; padding-block:78px 70px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:10px; font-weight:800; letter-spacing:.18em; color:var(--teal); }
.live-dot { width:6px; height:6px; background:var(--teal); border-radius:50%; box-shadow:0 0 13px #61e4cf77; flex-shrink:0; }
h1 { margin:18px 0 22px; font:normal clamp(44px,5.2vw,70px)/1.08 Georgia,'Times New Roman',serif; letter-spacing:-.045em; }
h1 em { color:#95d6ed; font-weight:normal; }
.intro { max-width:440px; margin-bottom:28px; color:var(--muted); font-size:17px; line-height:1.75; }
.hero-notes { display:flex; flex-wrap:wrap; gap:7px 17px; margin-top:21px; font-size:10px; color:#bed6e1; }
.hero-notes span::before { content:'✓'; color:var(--teal); margin-right:5px; }
.hero-visual { min-width:0; position:relative; }
.hero-visual::before { content:''; position:absolute; z-index:-1; inset:-40% -8%; border-radius:50%; background:radial-gradient(ellipse,#45c8c526,transparent 65%); }
.visual-label { display:flex; align-items:center; gap:9px; margin:0 0 16px 10px; color:#a3c6d8; font-size:9px; font-weight:800; letter-spacing:.16em; }
.landscape-device { padding:11px 22px; border:1px solid #4a697b; border-radius:30px; background:linear-gradient(135deg,#24323e,#050b12 40%,#182d3c); box-shadow:0 30px 70px #0009,inset 0 0 0 3px #07111d; }
.landscape-device img { width:100%; border-radius:9px; }
.visual-caption { display:flex; justify-content:space-between; gap:10px; margin:18px 10px 0; font-size:11px; color:#c5dbe6; }
.visual-caption span:last-child { color:var(--teal); }
figcaption { margin-top:14px; color:#819eaf; font-size:10px; line-height:1.6; text-align:center; }
.hero-visual figcaption { margin-inline:20px; }
.benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:26px 0; border-block:1px solid var(--line); background:linear-gradient(90deg,transparent,#163c4d29,transparent); }
.benefits > div { display:flex; justify-content:center; align-items:center; gap:16px; padding:0 12px; }
.benefits > div + div { border-left:1px solid var(--line); }
.benefits svg { width:28px; height:28px; color:var(--teal); }
.benefits b,.benefits small { display:block; }
.benefits b { font-size:13px; }
.benefits small { color:var(--muted); font-size:11px; margin-top:3px; }
.installation { padding-top:80px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:28px; }
h2 { margin-top:12px; font:normal clamp(29px,3vw,40px)/1.2 Georgia,'Times New Roman',serif; letter-spacing:-.025em; }
.section-heading > p { max-width:300px; color:var(--muted); font-size:13px; }
.platforms { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px; }
.platform { display:flex; align-items:center; gap:15px; min-height:84px; padding:16px 22px; border:1px solid var(--line); border-radius:10px; background:#102a3a96; color:var(--text); text-decoration:none; }
.platform:hover { border-color:#61e4cf85; }
.platform[aria-selected="true"] { color:var(--text); border-color:#61e4cf9c; background:linear-gradient(125deg,#123a43,#122a39); box-shadow:inset 3px 0 var(--teal); }
.platform > svg { width:30px; height:30px; color:var(--teal); }
.platform b,.platform small { display:block; }
.platform b { font-size:16px; }
.platform small { font-size:11px; color:var(--muted); }
.platform-arrow { margin-left:auto; color:var(--teal); font-size:23px; }
.installation-layout { display:grid; grid-template-columns:1fr 270px; gap:38px; align-items:start; }
.instructions { min-width:0; }
.platform-panel { scroll-margin-top:28px; padding:28px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(125deg,#123044c4,#0c2234db); }
.platform-panel:not([hidden]) + .platform-panel:not([hidden]) { margin-top:20px; }
[hidden] { display:none !important; }
.panel-heading { padding-bottom:22px; border-bottom:1px solid var(--line); }
.badge { display:inline-flex; padding:4px 8px; border:1px solid #73c5cc3d; border-radius:4px; color:#92dcd7; font-size:9px; font-weight:800; letter-spacing:.11em; white-space:nowrap; }
h3 { font-size:21px; line-height:1.4; }
.panel-heading h3 { margin-top:13px; }
.steps { list-style:none; padding:0; margin:0; }
.steps li { display:grid; grid-template-columns:42px 1fr 26px; gap:18px; padding:25px 0; }
.steps li + li { border-top:1px solid var(--line); }
.step-number { display:grid; align-content:center; justify-content:center; width:42px; height:42px; border:1px solid #61e4cf3d; border-radius:10px; background:#61e4cf09; color:var(--teal); font-size:12px; font-weight:800; }
.steps h4 { margin-bottom:7px; font-size:16px; line-height:1.4; }
.steps p { font-size:13px; color:var(--muted); }
.steps strong { color:#dfedf3; font-weight:700; }
.steps svg { margin-top:9px; color:#67c5cf; width:24px; height:24px; }
.source-note { padding-top:17px; border-top:1px solid var(--line); color:#8cabbc; font-size:10px; }
.source-note a { display:inline-block; }
.important { display:flex; align-items:flex-start; gap:17px; margin:22px 0; padding:20px 22px; border:1px solid #dcbd6b44; border-radius:9px; background:#cda44809; }
.important svg { color:#e3c685; margin-top:4px; }
.important b { color:#ead4a3; font-size:13px; }
.important p { margin-top:4px; color:var(--muted); font-size:12px; }
.preview-heading { text-align:center; margin-bottom:20px; }
.preview-heading p { margin-top:7px; font:normal 22px Georgia,serif; }
.portrait-device { width:218px; max-width:100%; margin:auto; padding:8px; border:1px solid #486175; border-radius:27px; background:#080f1b; box-shadow:0 15px 40px #0005,inset 0 0 0 3px #1b2c3b; }
.portrait-device img { border-radius:19px; }
.preview figcaption { padding:0 14px; }
.app-card { display:flex; align-items:center; gap:13px; margin:25px auto 0; width:max-content; max-width:100%; }
.app-card img { border:1px solid var(--line); border-radius:12px; }
.app-card b,.app-card small { display:block; }
.app-card b { font-size:14px; }
.app-card small { color:var(--muted); font-size:10px; }
.comfort { padding-top:80px; }
.controls-preview { margin-bottom:22px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#0c2234; }
.controls-preview > img { width:100%; border-radius:5px; }
.controls-legend { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:17px 12px 6px; color:var(--muted); font-size:12px; text-align:center; }
.controls-legend b { margin-right:7px; color:var(--teal); }
.comfort-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.comfort-grid article { position:relative; min-width:0; padding:27px; border:1px solid var(--line); border-radius:11px; background:linear-gradient(145deg,#15374a80,#0b2033); }
.comfort-grid svg { display:block; color:var(--teal); width:32px; height:32px; margin-bottom:24px; }
.card-kicker { color:#8db5c8; font-size:9px; letter-spacing:.12em; font-weight:800; }
.comfort-grid h3 { margin:8px 0 13px; font-size:20px; }
.comfort-grid p { color:var(--muted); font-size:13px; }
.download-note { display:flex; align-items:center; gap:24px; margin-top:22px; padding:25px 28px; border:1px solid var(--line); border-radius:10px; background:#163c4d26; }
.download-mark { font-size:38px; color:var(--teal); line-height:1; }
.download-note b { font-size:14px; }
.download-note p { margin-top:5px; color:var(--muted); font-size:12px; }
.download-note .badge { margin-left:auto; }
.faq { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; padding-block:80px; }
.faq > div > p { margin-top:20px; max-width:250px; color:var(--muted); font-size:13px; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list details:first-child { border-top:1px solid var(--line); }
summary { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:68px; padding:18px 0; cursor:pointer; list-style:none; font-size:14px; font-weight:700; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; flex-shrink:0; color:var(--teal); font-size:23px; font-weight:400; }
details[open] summary::after { content:'−'; }
.faq-list details p { padding:0 25px 23px 0; color:var(--muted); font-size:13px; }
.final-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:38px; border:1px solid #61e4cf52; border-radius:12px; background:linear-gradient(110deg,#143a47,#10323cc7),url('/brand/bgs1.jpg') center/cover; }
.final-cta h2 { font-size:32px; }
.final-cta p { color:var(--muted); font-size:13px; margin-top:13px; }
.final-cta .button { flex-shrink:0; }
.footer { display:flex; align-items:center; gap:24px; padding-block:38px; color:#7d9cad; font-size:10px; }
.footer a { color:#aac5d4; text-decoration:none; }
.footer a:last-child { margin-left:auto; }
@media (max-width:1000px) {
  .hero { gap:28px; }
  .installation-layout { grid-template-columns:1fr 230px; gap:24px; }
  .comfort-grid article { padding:22px; }
  .faq { gap:40px; }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 36px); }
  .header-inner { min-height:76px; gap:15px; }
  .logo { width:170px; }
  .back-link { display:none; }
  .header .button { margin-left:auto; }
  .hero { grid-template-columns:1fr; gap:42px; padding-block:44px 35px; }
  h1 { font-size:56px; }
  .hero-copy { max-width:540px; }
  .intro { font-size:16px; }
  .hero-visual { max-width:620px; }
  .benefits { gap:16px; padding-block:23px; }
  .benefits > div { padding:0; gap:9px; justify-content:flex-start; align-items:flex-start; }
  .benefits > div + div { border:0; }
  .benefits svg { width:22px; height:22px; margin-top:2px; }
  .benefits b { font-size:11px; }
  .benefits small { font-size:10px; }
  .section-heading { display:block; }
  .section-heading > p { max-width:100%; margin-top:16px; }
  .installation,.comfort { padding-top:50px; }
  .installation-layout { grid-template-columns:1fr; }
  .preview { display:none; }
  .comfort-grid { grid-template-columns:1fr; gap:12px; }
  .comfort-grid article { padding:24px 24px 24px 76px; }
  .comfort-grid svg { position:absolute; top:26px; left:24px; width:28px; }
  .comfort-grid h3 { margin-block:4px 10px; }
  .download-note { padding:22px; gap:18px; flex-wrap:wrap; }
  .download-note > div { flex:1; }
  .download-note .badge { margin-left:42px; }
  .faq { grid-template-columns:1fr; gap:28px; padding-block:50px; }
  .faq h2 br { display:none; }
  .faq > div > p { max-width:100%; margin-top:14px; }
  .final-cta { display:block; padding:26px; }
  .final-cta .button { margin-top:24px; }
  .footer { gap:12px; flex-wrap:wrap; padding-block:28px; }
}
@media (max-width:430px) {
  .controls-legend { padding:14px 0 4px; font-size:9px; gap:6px; }
  .controls-legend b { display:block; margin:0 0 2px; }
  .header .button { font-size:11px; padding-inline:11px; gap:8px; }
  .logo { width:145px; }
  h1 { font-size:48px; }
  .hero-notes { gap:5px 12px; font-size:9px; }
  .landscape-device { padding:8px 13px; border-radius:22px; }
  .visual-label { font-size:8px; }
  .visual-caption { font-size:9px; margin-inline:4px; }
  .benefits { grid-template-columns:1fr; gap:19px; padding-left:8px; }
  .benefits b { font-size:13px; }
  .benefits small { font-size:11px; }
  .platforms { gap:9px; }
  .platform { padding:13px 11px; min-height:76px; gap:8px; }
  .platform b { font-size:12px; }
  .platform small { font-size:10px; }
  .platform > svg { width:22px; height:22px; }
  .platform-arrow { display:none; }
  .platform-panel { padding:21px 17px; }
  .panel-heading h3 { font-size:20px; }
  .steps li { grid-template-columns:32px 1fr; gap:13px; padding-block:23px; }
  .step-number { width:32px; height:32px; border-radius:8px; font-size:10px; }
  .steps li > svg { display:none; }
  .steps h4 { font-size:15px; }
  .important { padding:18px 16px; gap:12px; }
  .instructions > .button { width:100%; padding-inline:14px; font-size:13px; gap:12px; }
  .final-cta h2 { font-size:29px; }
  .footer span { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }