@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#102129;--bg:#101e25;--cyan:#a4f3f7;--paper:#f4f6f5;--muted:#a2b9c4;--line:#c5e5f11f}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;font-family:Manrope,Arial,sans-serif;color:#f6f9fa;background:var(--bg);font-size:14px;line-height:1.7}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #62c7d5;outline-offset:5px}
.icon{display:inline-block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.container{max-width:1280px;padding-inline:5%;margin:auto}
.brand{font-size:34px;font-weight:800;line-height:1;letter-spacing:-2px}
.brand span{font-size:10px;letter-spacing:2px;color:var(--cyan);margin-left:8px;font-weight:500}
.header{position:relative;z-index:10;border-bottom:1px solid #d0f2ff0d;background:#101e25}
.nav{height:86px;display:flex;justify-content:space-between;align-items:center;gap:40px}
.nav-links{display:flex;gap:34px;color:#d6e2e8;font-size:12px}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--cyan)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid transparent;border-radius:13px;padding:14px 23px;background:var(--cyan);color:#12313b;font-size:12px;font-weight:800;line-height:1.4;transition:transform .2s,box-shadow .2s}
.btn .icon{width:18px;height:18px}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px #a4f3f71a}
.btn.ghost{border-color:#b5d7e3a0;background:#10202950;color:#f3f9fb;backdrop-filter:blur(5px)}
.nav .btn{padding:11px 19px;font-size:11px}
.menu-button{display:none;background:transparent;border:0;color:white;padding:8px}
.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;display:flex;gap:10px;align-items:center;text-transform:uppercase;color:var(--cyan)}
.eyebrow:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 12px #a4f3f76b}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(53px,5.7vw,81px);font-weight:800;letter-spacing:-4px;line-height:1.06;margin:23px 0 25px;max-width:630px}
h1 em{font-style:normal;color:var(--cyan)}
h2{font-size:clamp(30px,3.4vw,43px);line-height:1.15;font-weight:800;letter-spacing:-1.8px;margin-bottom:20px}
h3{font-size:21px;line-height:1.3;letter-spacing:-.7px;margin-bottom:14px}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#10212a}
.hero-backdrop{position:absolute;left:35%;top:0;bottom:0;width:70%;z-index:-2;overflow:hidden}
.hero-scene{position:absolute;width:768px;height:512px;left:0;top:0;transform-origin:0 0}
.hero-source{width:1536px;height:1024px;max-width:none;display:block}
.hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0e1e27 0%,#0e1e27f5 24%,#0e1e27b0 45%,#0e1e2700 65%),linear-gradient(0deg,#0c1b24e8 0%,transparent 25%,#0c1b2430 100%)}
.hero-content{position:relative;padding:90px 0 75px;min-height:560px}
.hero-copy{width:52%;position:relative;z-index:2}
.hero-lead{font-size:16px;line-height:1.75;color:#d6e7ef;max-width:450px;margin-bottom:27px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.hero-note{margin-top:23px;font-size:9px;color:#9cb6c2}
.hero-note span{margin-right:15px}
.hero-note .icon{height:12px;width:12px;color:var(--cyan);margin-right:5px}
.video-plane{position:absolute;top:0;left:0;width:200px;height:320px;transform-origin:0 0;overflow:hidden}
.video-plane video{width:100%;height:100%;object-fit:contain;background:#323944;opacity:0;display:block}
.video-active .video-plane video{opacity:1}
.screen-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #c4ebf9aa;border-radius:50%;background:#123246a6;color:#f2fbff;width:80px;height:80px;padding:0;display:flex;align-items:center;justify-content:center}
.screen-play .icon{width:42px;height:42px;fill:#e0faff22}
.screen-play[hidden]{display:none}
.hero-controls{position:absolute;right:7%;bottom:117px;z-index:3;width:290px;border:1px solid #d6eff533;border-radius:12px;background:#102632d9;backdrop-filter:blur(14px);padding:10px;display:flex;align-items:center;gap:9px}
.hero-controls[hidden]{display:none}
.hero-controls button{border:0;color:white;background:#b3e4ef16;border-radius:7px;padding:5px 9px;min-width:28px;font-size:11px}
.hero-controls input{min-width:0;width:100%;accent-color:var(--cyan)}
.video-error{position:absolute;right:7%;bottom:165px;font-size:11px;background:#173442;padding:8px;border-radius:8px;display:none}
.video-error:not(:empty){display:block}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);max-width:720px;position:relative;z-index:2;padding-bottom:35px;gap:0}
.benefit{padding:5px 24px;border-right:1px solid #b6d1db3d;text-align:center}
.benefit:first-child{padding-left:0}
.benefit:last-child{border:0}
.benefit .icon{color:var(--cyan);width:25px;height:25px;margin-bottom:9px}
.benefit strong{font-size:11px;font-weight:500;display:block}
.light{background:var(--paper);color:var(--ink)}
section{padding:75px 0}
.section-top{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:29px}
.section-top h2{margin-bottom:0}
.section-top p{font-size:12px;color:#6c818b;max-width:330px;margin-bottom:3px}
.install-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.install-card{display:block;padding:0;background:#dfe6e5;color:#183340;border:0;border-radius:13px;position:relative;overflow:hidden;min-width:0;text-align:left;transition:transform .3s}
.install-card:hover{transform:translateY(-4px)}
.scene-photo{display:block;width:100%;height:auto;overflow:hidden}
.install-card .scene-photo{width:100%;height:auto;aspect-ratio:3/2;transition:filter .3s}
.install-label{position:absolute;bottom:14px;left:14px;background:#f5f7f5ed;color:#18303c;border-radius:7px;padding:7px 12px;font-size:11px;font-weight:800;display:flex;align-items:center;gap:9px}
.install-label .icon{width:15px;height:15px}
.photo-note{font-size:9px;color:#7c8e96;margin:17px 0 0}
.config-section{background:linear-gradient(125deg,#182c35,#0d1d26)}
.config-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:55px;align-items:start}
.format-top .eyebrow{margin-bottom:15px}
.size-options{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0 20px}
.size-options button{padding:9px 15px;border:1px solid #a8c6d18c;border-radius:30px;background:transparent;color:#e3eff5;font-size:11px;min-width:62px}
.size-options button.active{color:#12303a;background:var(--cyan);border-color:var(--cyan);font-weight:800}
.size-options button:hover{border-color:var(--cyan)}
.format-caption{font-size:11px;color:#c0d2da;margin-bottom:22px}
.proportion-wrap{background:#dbe4e5;border-radius:13px;overflow:hidden;position:relative;color:#23414e;display:flex;justify-content:center;align-items:center;min-height:315px}
.proportion-wrap:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#f5f7f6,transparent 75%)}
.proportion-svg{position:relative;width:100%;height:320px;display:block}
.proportion-description{font-size:9px;color:#8daab8;margin:12px 0 20px;line-height:1.8}
.dimension-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}
.dimension-row small{color:#92aeba;font-size:8px;display:block}
.dimension-row strong{font-size:12px;font-weight:600}
.avatar-panel{border-left:1px solid var(--line);padding-left:45px}
.avatar-panel .eyebrow{margin:0 0 15px}
.avatar-panel p{font-size:12px;color:#aec4ce;line-height:1.9;max-width:360px}
.avatar-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0 16px}
.avatar-option{padding:0;border:1px solid #a2c8d450;border-radius:12px;background:#162e3b;color:#c9e1ea;overflow:hidden;text-align:center;transition:border-color .2s,transform .2s}
.avatar-option:hover{transform:translateY(-3px)}
.avatar-option.active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.avatar-option svg{width:100%;height:auto;display:block;aspect-ratio:1/1.05}
.avatar-option span{display:block;font-size:9px;padding:8px 3px}
.avatar-description{min-height:71px}
.avatar-panel .languages{display:flex;gap:7px;flex-wrap:wrap;margin:25px 0}
.languages span{border:1px solid var(--line);border-radius:30px;padding:6px 11px;font-size:9px;color:#b8cfda}
.product-angles{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.studio-card{margin:0;border:1px solid #7893a133;border-radius:10px;overflow:hidden;background:#d9dee2;position:relative}
.studio-photo{display:block;width:100%;height:220px}
.studio-card figcaption{position:absolute;bottom:0;left:0;right:0;padding:18px 10px 9px;background:linear-gradient(transparent,#142f3dbf);color:white;font-size:8px;text-align:center}
.cms-section{padding:55px 0;background:#162b35;border-top:1px solid var(--line)}
.cms-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.cms-layout h2{font-size:31px}
.cms-layout p{font-size:12px;color:#adc3ce;margin-bottom:0}
.cms-features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cms-features>div{display:flex;gap:14px;align-items:start}
.cms-features .icon{color:var(--cyan);width:24px;height:24px;flex-shrink:0}
.cms-features h3{font-size:13px;letter-spacing:0;margin:0 0 5px}
.cms-features p{font-size:10px;line-height:1.8}
.faq-section{padding:70px 0}
.faq-layout{display:grid;grid-template-columns:.6fr 1.4fr;gap:65px;align-items:start}
.faq-title{position:sticky;top:40px}
.faq-title h2{font-size:36px}
.faq-title p{color:#6c818b;font-size:12px;max-width:230px}
.faq-title .btn{margin-top:15px}
.faq-list{min-width:0}
.faq-list details{border-bottom:1px solid #b5c5cd80}
.faq-list details:first-child{border-top:1px solid #b5c5cd80}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:18px 0;font-size:12px;font-weight:700;line-height:1.5}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';font-size:22px;font-weight:400;color:#406371;transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
.answer{font-size:12px;color:#5a7582;line-height:1.9;padding:0 28px 22px 0;margin:0;animation:answer-in .25s ease-out}
.closing{padding:55px 0;background:#d5f6f6;color:#12323d}
.closing-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.closing h2{margin-bottom:8px;font-size:36px}
.closing p{margin:0;font-size:12px;color:#507782}
.closing .btn{background:#153440;color:white}
.footer{padding:30px 0;background:#10212a}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.footer .brand{font-size:26px}
.footer-links{display:flex;gap:25px;font-size:10px;color:#b1c9d4}
.footer p{margin:0;font-size:9px;color:#7a9ba9}
.mobile-nav{display:none}
.dialog{padding:0;background:#122b36;border:1px solid #6b92a2;border-radius:20px;color:#f4f9fb;max-width:620px;width:calc(100% - 32px);max-height:90vh;box-shadow:0 35px 100px #0007}
.dialog::backdrop{background:#071720dc;backdrop-filter:blur(8px)}
.dialog-inner{padding:35px}
.dialog h2{font-size:31px;letter-spacing:-1px}
.dialog p{color:#acc6d1;font-size:12px}
.dialog-close{position:absolute;top:15px;right:15px;background:#0e2330;border:1px solid #8fc2d233;color:white;border-radius:50%;height:32px;width:32px;display:flex;align-items:center;justify-content:center}
.dialog-close .icon{width:16px;height:16px}
.brief-form{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:25px}
.brief-form label{font-size:10px;color:#bad2df}
.brief-form select{display:block;width:100%;padding:11px 9px;background:#214554;color:white;border:1px solid #6c929f;border-radius:7px;margin-top:6px;font-size:12px}
.brief-form .btn{grid-column:1/-1;margin-top:6px}
.brief-form-note{font-size:9px!important;color:#87a7b8!important;margin:17px 0 0}
.brief-result{white-space:pre-wrap;font-size:12px;line-height:1.9;border:1px solid var(--line);border-radius:10px;padding:18px;margin:20px 0}
.result-actions{display:flex;gap:10px;flex-wrap:wrap}
#brief-result-view[hidden],#brief-form-view[hidden]{display:none}
.photo-dialog{width:min(920px,calc(100% - 32px));max-width:920px;background:#102631}
.photo-dialog .scene-photo{width:100%;height:auto}
.photo-dialog .dialog-inner{padding:25px 30px}
.photo-dialog h2{font-size:25px;margin-bottom:8px}
.photo-dialog p{margin-bottom:20px}
.photo-modal-controls{display:flex;align-items:center;gap:13px}
.photo-modal-controls button{height:36px;width:36px;border:1px solid #8eb9c64f;border-radius:50%;color:var(--cyan);background:transparent;font-size:20px}
.photo-modal-controls span{font-size:10px;color:#8fafbf;margin:0 10px}
.photo-dialog .dialog-close{z-index:2;background:#102631d9}
body:has(dialog[open]){overflow:hidden}
@keyframes answer-in{from{opacity:0;transform:translateY(-4px)}
to{opacity:1;transform:none}
}
@media(min-width:1450px){.hero-content{padding-top:105px;min-height:615px}
}
@media(max-width:1000px){.nav{gap:20px}
.nav-links{gap:20px;font-size:11px}
.hero-copy{width:57%}
h1{font-size:65px}
.hero-backdrop{left:35%;width:80%}
.benefits{max-width:650px}
.benefit{padding:5px 15px}
.config-layout{gap:30px}
.avatar-panel{padding-left:25px}
.size-options{gap:7px}
.size-options button{min-width:52px;padding:9px 13px}
.avatar-options{gap:7px}
.faq-layout{gap:35px}
.cms-layout{gap:30px}
.hero-controls{right:4%;width:240px}
.install-grid{gap:13px}
}
@media(max-width:760px){.nav-links{display:none}
.nav{height:75px}
.nav .btn{margin-left:auto}
.menu-button{display:block}
.mobile-nav{position:absolute;left:0;right:0;top:75px;background:#142d38;border-bottom:1px solid var(--line);padding:20px 5%;display:none;gap:10px;flex-direction:column}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:13px;padding:8px}
.hero-copy{width:65%}
h1{font-size:57px;letter-spacing:-3px}
.hero-lead{font-size:14px}
.hero-content{min-height:555px;padding-top:65px}
.hero-backdrop{left:35%;width:100%}
.benefits{max-width:100%}
.hero-controls{width:220px;bottom:100px}
.config-layout{grid-template-columns:1fr 1fr;gap:24px}
.avatar-panel{padding-left:24px}
.size-options button{min-width:45px;padding:8px 11px;font-size:10px}
.product-angles{gap:8px}
.studio-photo{height:190px}
.avatar-options{gap:5px}
.avatar-option span{font-size:8px}
.faq-layout{grid-template-columns:.65fr 1.35fr;gap:30px}
.faq-title h2{font-size:31px}
.cms-layout{grid-template-columns:1fr}
.cms-layout p{max-width:550px}
.section-top p{max-width:240px;font-size:11px}
}
@media(max-width:600px){.container{padding-inline:5%}
.brand{font-size:29px}
.brand span{font-size:8px;margin-left:6px}
.nav{height:70px;gap:12px}
.nav .btn{font-size:9px;padding:10px 13px;border-radius:9px}
.menu-button{padding:5px}
.menu-button .icon{width:22px;height:22px}
.mobile-nav{top:70px}
.hero-content{padding:42px 0 535px;min-height:0}
.hero-copy{width:100%}
.eyebrow{font-size:8px;letter-spacing:1.6px}
h1{font-size:56px;letter-spacing:-3px;max-width:340px;margin-top:21px;margin-bottom:22px}
.hero-lead{font-size:13px;max-width:335px;line-height:1.8;margin-bottom:23px}
.hero-actions{gap:9px}
.btn{padding:13px 17px;font-size:10px;gap:12px;border-radius:10px}
.hero-note{font-size:8px;margin-top:18px}
.hero-note span{margin-right:8px}
.hero-note .icon{width:10px;height:10px}
.hero-backdrop{left:0;right:0;top:325px;bottom:102px;width:100%}
.hero:after{background:linear-gradient(180deg,#0e1e27 0%,#0e1e27 31%,#0e1e2730 43%,transparent 55%,#0e1e27b0 85%,#0e1e27 100%)}
.hero-controls{bottom:120px;left:10%;right:10%;width:auto}
.video-error{bottom:170px;left:10%;right:10%;text-align:center}
.benefits{grid-template-columns:repeat(2,1fr);gap:20px 0;padding:0 0 28px;max-width:none}
.benefit{padding:0 15px}
.benefit:first-child{padding-left:15px}
.benefit:nth-child(2){border:0}
.benefit strong{font-size:10px}
.benefit .icon{height:23px;width:23px;margin-bottom:6px}
section{padding:46px 0}
.section-top{display:block;margin-bottom:23px}
.section-top h2{font-size:30px;letter-spacing:-1.3px}
.section-top p{margin:16px 0 0;max-width:none;font-size:11px}
.install-grid{grid-template-columns:1fr;gap:16px}
.install-label{bottom:12px;left:12px;font-size:10px;padding:6px 10px}
.photo-note{font-size:8px;line-height:1.8;margin-top:15px}
.config-layout{grid-template-columns:1fr;gap:40px}
.config-section{padding:46px 0}
.format-top h2,.avatar-panel h2{font-size:30px;letter-spacing:-1.2px}
.size-options{margin-top:23px;gap:7px}
.size-options button{min-width:52px;padding:9px 13px;font-size:11px}
.proportion-svg{height:360px}
.proportion-wrap{min-height:360px}
.dimension-row strong{font-size:11px}
.dimension-row small{font-size:8px}
.proportion-description{font-size:8px}
.avatar-panel{border-left:0;border-top:1px solid var(--line);padding:35px 0 0}
.avatar-panel p{font-size:12px;max-width:none}
.avatar-options{gap:12px;margin-top:22px}
.avatar-option span{font-size:10px}
.avatar-description{min-height:0}
.product-angles{margin-top:25px;gap:15px}
.studio-photo{height:240px}
.cms-section{padding:40px 0}
.cms-layout{gap:26px}
.cms-layout h2{font-size:29px}
.cms-features{gap:22px 16px}
.cms-features>div{gap:9px}
.cms-features h3{font-size:11px}
.cms-features p{font-size:9px}
.cms-features .icon{width:21px;height:21px}
.faq-section{padding:46px 0}
.faq-layout{grid-template-columns:1fr;gap:25px}
.faq-title{position:static}
.faq-title h2{font-size:31px}
.faq-title p{max-width:none}
.faq-title .btn{display:none}
summary{font-size:11px;padding:17px 0;gap:18px}
.answer{font-size:11px;line-height:1.9;padding-right:15px}
.closing{padding:38px 0}
.closing-inner{display:block}
.closing h2{font-size:30px}
.closing p{font-size:11px}
.closing .btn{margin-top:22px}
.footer-inner{flex-wrap:wrap;gap:24px}
.footer .brand{font-size:25px}
.footer-links{gap:18px;font-size:9px}
.footer p{font-size:8px;width:100%}
.dialog-inner{padding:30px 22px}
.dialog h2{font-size:27px;margin-top:12px}
.brief-form{grid-template-columns:1fr;gap:14px}
.brief-form select{font-size:12px;padding:11px}
.photo-dialog .dialog-inner{padding:22px}
.photo-dialog h2{font-size:24px}
.photo-dialog p{font-size:11px}
.photo-dialog .btn{font-size:10px}
.dialog-close{top:10px;right:10px}
.hero-note{display:flex;flex-wrap:wrap;gap:5px}
.photo-modal-controls span{margin-right:auto}
}

@media(max-width:360px){h1{font-size:50px}
.nav .btn{font-size:8px;padding:10px}
.hero-actions .btn{padding:12px 13px;font-size:9px}
.size-options button{min-width:44px;padding:8px 11px}
.hero-backdrop{top:340px}
.hero-content{padding-bottom:535px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
}

.hero>.container{pointer-events:none}
.hero-copy,.benefits{pointer-events:auto}

body{overflow-x:clip}
.brief-form label,.config-layout>*{min-width:0}
.brief-form select{min-width:0;max-width:100%}
.dialog{overflow-x:hidden}
.studio-photo,.proportion-svg{overflow:hidden}


.compare-section{background:#eaf0f0;color:#173542;padding:85px 0}
.compare-eyebrow{color:#567d8c;margin-bottom:18px}
.compare-section .section-top{margin-bottom:32px}
.compare-section .section-top p{max-width:340px;font-size:12px}
.compare-card{background:#f9fbfa;border:1px solid #c5d5da;border-radius:22px;overflow:hidden;box-shadow:0 20px 60px #1b435108}
.compare-toolbar{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 25px;border-bottom:1px solid #cbdadd;background:white}
.compare-toolbar .size-options{margin:0;gap:7px}
.compare-toolbar .size-options button{color:#456674;border:1px solid #aabfc7;font-size:11px;min-width:56px;padding:10px 15px}
.compare-toolbar .size-options button.active{background:#173c4c;color:#e0f8fa;border-color:#173c4c}
.compare-mode{display:flex;gap:4px;padding:4px;background:#e9eff0;border-radius:11px}
.compare-mode button{border:0;padding:9px 13px;background:transparent;color:#67828e;border-radius:8px;font-size:10px;white-space:nowrap}
.compare-mode button.active{background:white;color:#214654;box-shadow:0 2px 8px #16384710}
.compare-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.compare-canvas{min-width:0;background:radial-gradient(ellipse at center,#f7faf8,#e0e9e9);position:relative;border-right:1px solid #cbdadd}
.canvas-badges{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:20px 24px;font-size:9px;color:#66818d;min-height:57px}
.canvas-badges span:first-child{color:#416d7f;display:flex;gap:7px;align-items:center}
.canvas-badges i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#60a7b5}
.compare-drawing{height:560px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#8cb2c0 transparent}
.compare-svg{display:block;width:100%;height:100%;overflow:hidden}
.compare-canvas.mode-all .compare-svg{min-width:0}
.canvas-caption{display:flex;justify-content:space-between;gap:15px;padding:15px 25px 20px;border-top:1px solid #cadbdd66;font-size:9px;color:#67838f}
.canvas-caption span:first-child{color:#204655;font-weight:800}
.compare-settings{padding:27px 23px;background:white}
.settings-eyebrow{font-size:8px;letter-spacing:1.8px;color:#6b8995;margin-bottom:23px}
.height-label{font-size:11px;display:flex;align-items:center;justify-content:space-between;font-weight:700}
.height-label output{font-size:24px;letter-spacing:-1px;font-weight:600;color:#1a4658}
.compare-settings input[type=range]{width:100%;margin:22px 0 6px;accent-color:#315f73;cursor:ew-resize;min-height:24px}
.range-ends{display:flex;justify-content:space-between;font-size:9px;color:#8196a0}
.height-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 22px}
.height-presets button{padding:7px 3px;border:1px solid #ccdade;background:white;color:#63818f;border-radius:7px;font-size:9px}
.height-presets button.active{border-color:#3c798e;background:#e4f2f5;color:#28556a}
.eye-toggle{font-size:10px;color:#617e8a;display:flex;align-items:center;gap:8px;cursor:pointer;margin:0 0 25px}
.eye-toggle input{accent-color:#366f86;width:14px;height:14px}
.selected-specs{padding-top:22px;border-top:1px solid #d2dfe2}
.selected-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}
.selected-heading span{font-size:8px;letter-spacing:1.4px;color:#7e959f}
.selected-heading strong{font-size:28px;font-weight:600;letter-spacing:-1px;color:#214b5b}
.selected-specs dl{margin:0}
.selected-specs dl>div{padding:10px 0;border-top:1px solid #d9e3e640}
.selected-specs dt{font-size:9px;color:#7c929c}
.selected-specs dd{font-size:13px;font-weight:700;color:#315e70;margin:2px 0 0}
.height-relation{font-size:10px;line-height:1.9;color:#6c8792;margin:18px 0}
.compare-settings>.btn{width:100%;background:#193e4d;color:white;font-size:10px;padding:13px 10px}
.compare-explanation{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:32px 0}
.compare-explanation>div{position:relative;padding:3px 0 0 34px}
.compare-explanation>div>span{position:absolute;left:0;top:4px;font-size:10px;color:#6f98a8}
.compare-explanation h3{font-size:13px;letter-spacing:0;margin:0 0 9px;color:#325968}
.compare-explanation p{font-size:11px;color:#708b96;line-height:1.9;margin:0}
.spec-table{border-top:1px solid #bfd1d8;border-bottom:1px solid #bfd1d8}
.spec-table>summary{font-size:11px;color:#3d6678;padding:19px 0}
.spec-table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap;font-size:11px}
th{font-size:9px;font-weight:700;color:#6d8b98}
td,th{padding:13px 18px 13px 0;border-bottom:1px solid #cadbdd}
tbody tr.selected{color:#164f67;background:#deeced}
td:first-child{font-weight:700}
.engineering-note{font-size:9px;line-height:1.9;color:#738f9b;margin:20px 0}
.tour-controls{display:flex;gap:7px;flex-wrap:wrap;margin:25px 0 18px}
.tour-controls button{border:1px solid #96bbc84f;color:#adccd9;border-radius:30px;padding:8px 17px;background:transparent;font-size:10px}
.tour-controls button.active{border-color:var(--cyan);color:var(--cyan);background:#b9f7ff0d}
.tour-stage{display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at center,#37515d,#152d39);border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden}
.tour-product{width:280px;max-width:100%;aspect-ratio:1/2;position:relative}
.tour-product>svg{width:100%;height:100%;display:block;overflow:hidden;mix-blend-mode:normal}
.tour-stage{background:#d8dde0}
.tour-hotspot{position:absolute;height:26px;width:26px;border-radius:50%;border:1px solid #c9fdff;background:#193e50cf;color:#d9fcff;box-shadow:0 0 0 6px #a3f2f729,0 2px 10px #0003;font-size:10px;font-weight:700;padding:0;transform:translate(-50%,-50%);transition:box-shadow .2s,background .2s}
.tour-hotspot.active{background:#a5eef6;color:#123948;box-shadow:0 0 0 7px #a3f2f733,0 2px 12px #0003}
.tour-hotspot:hover{box-shadow:0 0 0 9px #a3f2f733}
.tour-hotspot[hidden]{display:none}
.tour-detail{padding:23px 0 0;min-height:140px}
.tour-detail>span{font-size:8px;letter-spacing:1.8px;color:#7ba9ba}
.tour-detail h3{font-size:21px;font-weight:600;margin:10px 0 9px;letter-spacing:-.7px}
.tour-detail p{color:#a4c0cf;font-size:12px;line-height:1.9;max-width:480px;margin:0}
.tour-index{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.tour-index button{border:1px solid #95b9c437;background:transparent;color:#85a8b9;font-size:9px;padding:8px 12px;border-radius:7px}
.tour-index button.active{border-color:#a1e9f3;color:#c8f8fd;background:#bbf5fb0a}
.assistant-detail{margin-top:32px;border:1px solid var(--line);border-radius:13px;overflow:hidden;position:relative}
.assistant-detail>.scene-photo{height:auto;aspect-ratio:3/2}
.assistant-detail>span{position:absolute;bottom:0;left:0;right:0;padding:20px 18px 13px;background:linear-gradient(transparent,#142a37d9);font-size:9px;color:#d4e7ef}
.assistant-steps{margin-top:25px;border-top:1px solid var(--line)}
.assistant-steps>div{display:flex;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
.assistant-steps>div>span{font-size:9px;color:#779fae;padding-top:4px}
.assistant-steps strong{font-size:12px;color:#d3e4ec}
.assistant-steps p{font-size:10px!important;line-height:1.8;margin:4px 0 0!important;color:#88a8b9!important}
.config-layout{align-items:start;grid-template-columns:1.1fr 1fr}
.config-section .format-top h2{margin-bottom:17px}
.config-section .format-caption{line-height:1.9;margin-bottom:0}
.compare-svg .dimension-text{font-family:Arial,sans-serif;fill:#5e8797}
.compare-svg .measure{stroke:#6d98a9;fill:none}
.compare-svg .dimension-bg{fill:#e7f0f0;opacity:.9}
.compare-svg .kiosk-interactive{cursor:pointer}
.compare-svg .kiosk-interactive:focus{outline:none}
.compare-svg .kiosk-interactive:focus-visible .body-outline{stroke:#45a4c5;stroke-width:12}
.compare-svg .kiosk-interactive:hover .body-outline{stroke:#5fa7be;stroke-width:7}
@media(max-width:1000px){.compare-layout{grid-template-columns:minmax(0,1fr) 260px}
.compare-toolbar{padding:18px;gap:15px}
.compare-toolbar .size-options button{min-width:46px;padding:9px 12px}
.compare-mode button{font-size:9px;padding:9px 10px}
.compare-settings{padding:23px 19px}
.compare-drawing{height:555px}
.config-layout{gap:30px}
.tour-product{width:260px}
.tour-detail{min-height:150px}
.compare-explanation{gap:20px}
}
@media(max-width:760px){.compare-toolbar{align-items:start;flex-direction:column;gap:15px}
.compare-mode{width:100%}
.compare-mode button{flex:1}
.compare-layout{grid-template-columns:minmax(0,1fr) 235px}
.compare-drawing{height:535px}
.compare-settings{padding:22px 16px}
.canvas-badges{padding:15px;font-size:8px}
.canvas-caption{padding:15px;font-size:8px}
.compare-toolbar .size-options{width:100%;justify-content:space-between}
.compare-toolbar .size-options button{min-width:52px}
.tour-product{width:230px}
.tour-detail h3{font-size:19px}
.tour-detail p{font-size:11px}
}
@media(max-width:600px){.compare-section{padding:48px 0}
.compare-section .section-top h2{font-size:31px}
.compare-section .section-top p{font-size:11px;max-width:none}
.compare-card{border-radius:15px}
.compare-toolbar{padding:17px 14px}
.compare-toolbar .size-options{gap:5px}
.compare-toolbar .size-options button{min-width:0;padding:9px 11px;font-size:10px;flex:1}
.compare-mode{padding:4px}
.compare-mode button{font-size:10px}
.compare-layout{grid-template-columns:1fr}
.compare-canvas{border-right:0;border-bottom:1px solid #cbdadd}
.compare-drawing{height:440px}
.compare-canvas.mode-all .compare-svg{min-width:950px}
.canvas-badges{font-size:8px;padding:15px 13px;gap:8px}
.canvas-caption{padding:13px;font-size:8px}
.canvas-caption span:last-child{font-size:7px}
.compare-settings{padding:24px 20px}
.settings-eyebrow{margin-bottom:18px}
.height-label output{font-size:26px}
.compare-settings input[type=range]{margin-top:17px}
.height-presets button{font-size:10px;padding:9px 5px}
.height-presets{gap:8px}
.eye-toggle{font-size:10px;margin-bottom:22px}
.selected-specs dl{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}
.selected-specs dl>div{padding:11px 0}
.selected-heading{margin-bottom:13px}
.selected-specs dt{font-size:9px}
.selected-specs dd{font-size:12px}
.height-relation{font-size:10px;margin:16px 0 20px}
.compare-explanation{grid-template-columns:1fr;gap:23px;margin:29px 0}
.compare-explanation h3{font-size:13px}
.compare-explanation p{font-size:11px}
.compare-explanation>div{padding-left:33px}
.spec-table>summary{font-size:10px}
.engineering-note{font-size:8px;line-height:1.9}
.spec-table table{font-size:10px}
.spec-table th{font-size:8px}
.tour-product{width:270px;max-width:90%}
.tour-stage{border-radius:13px}
.tour-detail{min-height:0;padding-top:23px}
.tour-detail h3{font-size:23px}
.tour-detail p{font-size:12px}
.tour-controls{gap:8px}
.tour-controls button{font-size:10px;padding:9px 16px}
.tour-index{gap:6px;margin-top:19px}
.tour-index button{font-size:9px;padding:9px 11px}
.config-layout{grid-template-columns:1fr;gap:35px}
.assistant-detail{margin-top:25px}
.assistant-steps{margin-top:20px}
.assistant-steps>div{padding:17px 0}
.tour-hotspot{height:28px;width:28px;font-size:11px}
.compare-section .section-top{margin-bottom:24px}
}

@media(min-width:601px) and (max-width:1000px){.compare-canvas.mode-all .compare-svg{min-width:900px}
}


.hero-source{position:absolute;left:-768px;top:-512px}
.auth-carousel{border:1px solid #c7d7dd;border-radius:18px;background:#fff;overflow:hidden;outline-offset:5px}
.auth-tabs{display:flex;gap:4px;padding:15px 18px;border-bottom:1px solid #d5e0e3;overflow-x:auto}
.auth-tabs button{white-space:nowrap;padding:9px 16px;border:1px solid transparent;border-radius:25px;background:transparent;color:#718994;font-size:10px}
.auth-tabs button.active{background:#193d4d;color:#d9f6f8;border-color:#193d4d}
.auth-slide{display:grid;grid-template-columns:1.28fr 1fr;align-items:stretch}
.auth-photo{position:relative;border:0;border-right:1px solid #d7e3e6;padding:0;background:#e3e9e7;min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center;overflow:hidden}
.auth-photo .scene-photo{width:100%;height:auto;aspect-ratio:3/2}
.auth-photo>span{position:absolute;bottom:16px;left:18px;background:#f8fcf6e8;border:1px solid #b5c5cb55;border-radius:8px;padding:8px 12px;color:#335565;font-size:9px;backdrop-filter:blur(8px)}
.case-copy{padding:37px 32px;display:flex;flex-direction:column;align-items:start;justify-content:center;min-width:0}
.case-eyebrow{font-size:8px;letter-spacing:1.7px;color:#6c8b98}
.case-copy h3{font-size:31px;letter-spacing:-1.2px;margin:16px 0}
.case-copy>p{color:#678491;font-size:12px;line-height:1.9;margin-bottom:20px}
.case-copy dl{margin:0 0 25px}
.case-copy dl>div{padding:14px 0;border-top:1px solid #dce5e6}
.case-copy dt{font-size:8px;text-transform:uppercase;letter-spacing:1.3px;color:#97aab1;font-weight:700;margin-bottom:7px}
.case-copy dd{font-size:11px;line-height:1.9;color:#507383;margin:0}
.case-copy .btn{font-size:9px;background:#193d4d;color:white;padding:12px 16px}
.case-footer{display:flex;gap:12px;align-items:center;padding:17px 22px;border-top:1px solid #d4e0e4}
.case-dots{display:flex;gap:8px;margin-right:auto}
.case-dots button{height:7px;width:7px;border:0;border-radius:50%;background:#b6c8cf;padding:0;transition:width .2s}
.case-dots button.active{width:27px;border-radius:7px;background:#48798e}
.case-footer>button{height:35px;width:35px;border:1px solid #b8cbd3;border-radius:50%;background:white;color:#3d6c80;font-size:19px}
.case-footer>span{font-size:9px;color:#7f98a2;letter-spacing:1.5px;margin-right:14px}
.monitor-source{display:block;font-size:10px;color:#2c738a;line-height:1.8;margin-top:15px;text-decoration:underline;text-underline-offset:3px}
.monitor-note{display:block;font-size:8px;color:#94a7ae;line-height:1.9;margin-top:5px}
.compare-settings{padding-bottom:25px}
.selected-specs dl>div{padding:8px 0}
.compare-drawing{height:620px}
.compare-settings .height-relation{font-size:9px}
.spec-table a{color:#357187;text-decoration:underline;text-underline-offset:3px}
.spec-table table{font-size:10px}
.canvas-badges span:first-child{font-size:8px}
.compare-svg .body-outline{transition:none}
.case-copy h3 br{display:none}
@media(max-width:1000px){.auth-slide{grid-template-columns:1.1fr 1fr}
.case-copy{padding:27px 24px}
.case-copy h3{font-size:26px}
.case-copy>p{font-size:11px}
.case-copy dd{font-size:10px}
.case-copy dl{margin-bottom:18px}
.case-copy .btn{font-size:8px;padding:11px 13px}
.compare-drawing{height:640px}
}
@media(max-width:760px){.auth-slide{grid-template-columns:1fr}
.auth-photo{border-right:0;border-bottom:1px solid #d8e2e5}
.auth-photo .scene-photo{width:100%;height:auto;aspect-ratio:3/2}
.case-copy{padding:28px}
.case-copy h3{font-size:29px}
.case-copy>p{font-size:12px}
.case-copy dd{font-size:11px}
.case-copy .btn{font-size:10px}
.auth-tabs{padding:13px;gap:3px}
.auth-tabs button{padding:8px 12px;font-size:9px}
.compare-settings .height-relation{font-size:9px}
}
@media(max-width:600px){.auth-carousel{border-radius:14px}
.auth-tabs button{padding:8px 11px;font-size:9px}
.case-copy{padding:25px 22px}
.case-copy h3{font-size:29px}
.case-eyebrow{font-size:7px;letter-spacing:1.3px}
.case-copy>p{font-size:11px;margin-bottom:15px}
.case-copy dd{font-size:10px}
.case-copy dt{font-size:8px}
.case-copy dl>div{padding:12px 0}
.case-footer{padding:15px 19px;gap:10px}
.case-footer>button{height:35px;width:35px}
.auth-photo>span{bottom:10px;left:12px;font-size:8px;padding:7px 10px}
.compare-drawing{height:470px}
.canvas-badges{font-size:7px;gap:5px}
.canvas-badges span:first-child{font-size:7px}
.canvas-caption{font-size:7px}
.canvas-caption span:last-child{font-size:6px}
.selected-specs dl>div{padding:10px 0}
.monitor-source{font-size:10px}
.monitor-note{font-size:8px}}

.brief-form input,.brief-form textarea{display:block;width:100%;padding:11px 9px;background:#214554;color:white;border:1px solid #6c929f;border-radius:7px;margin-top:6px;font-size:12px;font-family:inherit;resize:vertical}

.lang-switch{display:flex;gap:4px;font-size:11px;font-weight:700}.lang-switch a{padding:6px 10px;border-radius:8px;color:#9fc0cc;border:1px solid transparent}.lang-switch a.active{color:#a4f3f7;border-color:#3b6572;background:#163039}.lang-switch a:hover{color:#a4f3f7}
@media(max-width:1000px){.nav-links,.nav .btn{display:none}.nav .lang-switch{margin-left:auto}}