/* Carlion — Acoustic Architecture theme. Light default, dark via [data-theme="dark"]. Sharp 0px. */
:root{
  --font-display:"Plus Jakarta Sans","Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter","Hanken Grotesk",system-ui,sans-serif;
  --font-brand:"Flamante Sans","Plus Jakarta Sans",system-ui,sans-serif;
  --r:20px;
  --r-sm:14px;
  --r-lg:28px;
  --pill:999px;
  --shadow-soft:0 1px 2px rgba(16,24,40,.05),0 8px 24px -8px rgba(16,24,40,.12);
  --shadow-lift:0 2px 4px rgba(16,24,40,.06),0 20px 44px -16px rgba(16,24,40,.22);
  /* M2 motion: standard / decelerated / accelerated + duration scale */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-decel:cubic-bezier(0,0,.2,1);
  --ease-accel:cubic-bezier(.4,0,1,1);
  --dur-s:150ms; --dur-m:300ms; --dur-l:500ms;
  /* M2 type scale roles */
  --text-display:clamp(1.9rem,3.8vw,3.1rem);
  --text-headline:clamp(1.7rem,3.4vw,2.6rem);
  --text-title:1.3rem;
  --max:1280px;
  --gutter:1.25rem;
}
/* M2 Material baseline: light bg/surface #FFFFFF, primary #008B9E (contrast-safe cyan),
   error #B00020; dark baseline #121212 surfaces, 200-level cyan primary, error #CF6679,
   text emphasis 87/60/38%, elevation via white overlays (01dp 5% … 24dp 16%). */
[data-theme="light"]{
  --bg:#FFFFFF; --bg2:#FFFFFF; --bg3:#F5F5F5;
  --ink:rgba(0,0,0,.87); --ink2:#616161; --muted:#5F6368; --faint:rgba(0,0,0,.38);
  --cyan-ink:#006B7A;
  --line:#E0E0E0; --line2:#BDBDBD;
  --cyan:#008B9E; --cyan-soft:rgba(0,139,158,.12); --on-cyan:#062A30;
  --error:#B00020; --on-error:#FFFFFF;
  --card:#FFFFFF; --header:rgba(255,255,255,.88);
  --elv1:#FFFFFF; --elv2:#F5F5F5; --elv3:#EEEEEE;
  --glow:rgba(0,139,158,.16);
  --hero-grid:rgba(0,0,0,.06);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#121212; --bg2:#121212; --bg3:#1D1D1D;
  --ink:rgba(255,255,255,.87); --ink2:rgba(255,255,255,.60); --muted:rgba(255,255,255,.60); --faint:rgba(255,255,255,.38);
  --line:#2C2C2C; --line2:#3D3D3D;
  --cyan:#00E5FF; --cyan-soft:rgba(0,229,255,.12);
  --error:#CF6679; --on-error:#000000;
  --card:#1D1D1D; --header:rgba(18,18,18,.82);
  --elv1:#1E1E1E; --elv2:#232323; --elv3:#282828;
  --glow:rgba(0,229,255,.14);
  --hero-grid:rgba(255,255,255,.05);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .35s ease,color .35s ease}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.08;margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.mono{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600}
.badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line2);padding:.3rem .65rem;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--bg2)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.kicker{color:var(--cyan);font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sec{padding:4.5rem 0;border-top:1px solid var(--line)}
.sec-lead{color:var(--muted);max-width:62ch}
/* skip */
.skip{position:absolute;left:-9999px;top:0;background:var(--cyan);color:#000;padding:.6rem 1rem;z-index:200}
/* header */
.site-header{position:sticky;top:0;z-index:100;background:var(--header);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:1rem;height:68px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.02em}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font-size:13px;font-weight:700;letter-spacing:.06em}
[data-theme="dark"] .brand-mark{background:var(--cyan);color:#04181b}
.brand small{display:block;font-size:10px;letter-spacing:.22em;color:var(--muted);font-weight:600}
.nav{display:flex;align-items:center;gap:.25rem;margin-left:1rem}
.nav>div{position:relative}
.nav a.top,.nav button.top{background:none;border:0;color:var(--ink2);font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none;padding:.7rem .8rem;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.nav a.top:hover,.nav button.top:hover{color:var(--ink)}
.nav a.top.on,.nav button.top.on{background:var(--cyan-soft);border-radius:var(--pill);color:var(--ink)}
.nav .caret{font-size:14px;color:var(--muted)}
.drop{position:absolute;top:100%;left:0;min-width:250px;background:var(--elv3);border:1px solid var(--line2);padding:.5rem;display:none;box-shadow:0 24px 60px rgba(0,0,0,.18)}
[data-theme="dark"] .drop a:hover{background:rgba(255,255,255,.08)}
[data-theme="light"] .drop a:hover{background:rgba(0,0,0,.04)}
.txt:invalid,textarea:invalid,select:invalid{border-color:var(--error)}
.nav>div:hover .drop,.nav>div:focus-within .drop{display:block}
.drop a{display:flex;justify-content:space-between;align-items:center;padding:.6rem .7rem;text-decoration:none;font-size:14px;color:var(--ink2);border:1px solid transparent}
.drop a:hover{border-color:var(--cyan);color:var(--ink);background:var(--cyan-soft)}
.drop a span.n{font-family:var(--font-display);font-size:10px;color:var(--muted);letter-spacing:.1em}
.hd-tools{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line2);cursor:pointer;color:var(--ink);font-size:18px}
.icon-btn svg,.faq .q svg,.wa-float svg,.co-ic svg,.search span svg{display:block;flex:none}
.search span{display:inline-flex}
.icon-btn:hover{border-color:var(--cyan)}
.lang{display:flex;border:1px solid var(--line2);background:var(--bg2)}
.lang button{border:0;background:transparent;color:var(--muted);font-family:var(--font-display);font-size:12px;font-weight:700;padding:.55rem .7rem;cursor:pointer;letter-spacing:.08em}
.lang button.on{background:var(--ink);color:var(--bg)}
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 1.3rem;border:1px solid var(--line2);cursor:pointer;background:var(--bg2);color:var(--ink)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#04181b}
[data-theme="light"] .btn.primary{color:var(--on-cyan)}
[data-theme="dark"] .btn.primary{color:#04181b}
[data-theme="light"] .mini-btn.primary,[data-theme="light"] .cmp-toggle.on,[data-theme="light"] .cmp-bar .mini-btn{color:var(--on-cyan)}
[data-theme="light"] .kicker,[data-theme="light"] .card .cat,[data-theme="light"] .glass-info .cat,[data-theme="light"] .axis .num,[data-theme="light"] .marquee-track i,[data-theme="light"] .float-chip .dot,[data-theme="light"] .link-arrow:hover{color:var(--cyan-ink)}
[data-theme="light"] .co-ic{color:var(--cyan-ink)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 0 0 1px var(--cyan),0 8px 32px var(--glow)}
.btn.ghost:hover{border-color:var(--cyan)}
.burger{display:none}
/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(1000px 520px at 88% -12%,var(--cyan-soft),transparent 62%),radial-gradient(760px 460px at -8% 110%,rgba(150,130,255,.14),transparent 60%),var(--bg)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--hero-grid) 1.2px,transparent 1.2px);background-size:26px 26px;mask-image:radial-gradient(760px 480px at 72% 18%,#000 25%,transparent 78%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;padding:4.5rem 0 3.5rem;align-items:center}
.hero h1{font-size:clamp(1.9rem,3.8vw,3.1rem);font-weight:700;line-height:1.07;max-width:16ch;text-wrap:balance}
.hero h1 .accent{color:var(--cyan)}
.hero .lead{color:var(--muted);font-size:1.08rem;max-width:56ch}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.6rem 0}
.hero-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:2.2rem;justify-content:start;margin-top:2rem;max-width:100%}
.hero-stats div{padding:0;min-width:0}
.hero-stats b{display:block;font-family:"Nunito",var(--font-brand),system-ui,sans-serif;font-weight:800;font-size:42px;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums}
.hero-grid>div{min-width:0}
.hero h1{overflow-wrap:anywhere}
.hero-visual{overflow:clip}
.hero-stats span{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-display);font-weight:600}
.cockpit{position:relative;border:1px solid var(--line2);background:linear-gradient(160deg,var(--bg3),var(--bg2));min-height:420px;overflow:hidden}
.cockpit .screen{position:absolute;inset:9% 8% auto 8%;height:46%;border:1px solid var(--cyan);background:radial-gradient(400px 200px at 50% 100%,var(--cyan-soft),transparent),#0a1114;box-shadow:0 0 60px var(--glow),inset 0 0 40px rgba(0,0,0,.5)}
[data-theme="light"] .cockpit .screen{background:radial-gradient(400px 200px at 50% 100%,var(--cyan-soft),transparent),#0b1e22}
.cockpit .dash{position:absolute;left:6%;right:6%;bottom:8%;height:34%;border:1px solid var(--line2);background:var(--bg2)}
.cockpit .eq{position:absolute;left:12%;right:12%;top:16%;height:30%}
.cockpit .meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:.5rem .7rem;font-family:var(--font-display);font-size:10px;letter-spacing:.12em;color:#9adfe8}
/* hero device composition (Android-style soft stage) */
.hero-visual{position:relative;min-height:480px}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.blob.b1{width:420px;height:420px;left:-60px;top:-40px;background:radial-gradient(circle,var(--cyan-soft),transparent 70%)}
.blob.b2{width:360px;height:360px;right:-40px;bottom:-30px;background:radial-gradient(circle,rgba(150,130,255,.22),transparent 70%)}
.device-main{position:relative;margin:6px 6px 0 0;border-radius:32px;box-shadow:var(--shadow-lift);border:1px solid var(--line);background:#fff;padding:1.1rem 1.1rem 1rem}
.device-main img{width:100%;height:clamp(280px,36vw,440px);object-fit:contain;display:block;border-radius:20px;background:#fff}
.eq-card{margin-top:.9rem;background:color-mix(in srgb,var(--bg2) 62%,transparent);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.45);border-radius:18px;padding:.65rem .9rem;box-shadow:0 14px 34px -12px rgba(16,24,40,.35)}
.eq-card .eq{height:56px;background:transparent;border:0}
.float-chip{position:absolute;display:inline-flex;align-items:center;gap:.5rem;background:color-mix(in srgb,var(--bg2) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:var(--pill);padding:.6rem 1rem;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;box-shadow:var(--shadow-lift);animation:floaty 5s ease-in-out infinite}
.float-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.fc1{top:14px;left:14px}
.fc2{top:42%;right:14px;animation-delay:-2.5s;max-width:70%}
.hero h1{font-family:var(--font-brand)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
.hero-grid{padding-bottom:4.5rem}
.tick{position:absolute;width:9px;height:9px;border:1px solid var(--cyan)}
.tick.tl{top:8px;left:8px;border-right:0;border-bottom:0}.tick.tr{top:8px;right:8px;border-left:0;border-bottom:0}.tick.bl{bottom:8px;left:8px;border-right:0;border-top:0}.tick.br{bottom:8px;right:8px;border-left:0;border-top:0}
/* axes */
.axes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.axis{border:1px solid var(--line2);background:var(--card);padding:1.6rem;position:relative;transition:border-color .25s}
.axis:hover{border-color:var(--cyan)}
.axis .num{font-family:var(--font-display);font-size:12px;color:var(--cyan);letter-spacing:.14em}
.axis h3{font-size:1.5rem;margin:.5rem 0}
.axis p{color:var(--muted);font-size:.95rem}
.axis ul{list-style:none;margin:1rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.link-arrow{text-decoration:none;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.link-arrow:hover{color:var(--cyan)}
/* products */
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:1.6rem 0}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:.5rem;border:1px solid var(--line2);background:var(--bg2);padding:.7rem .9rem}
.search input{flex:1;border:0;background:transparent;color:var(--ink);font-size:15px;outline:none}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{border:1px solid var(--line2);background:var(--bg2);color:var(--muted);font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.08em;padding:.55rem .8rem;cursor:pointer;text-transform:uppercase}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.card:hover{border-color:var(--cyan);transform:translateY(-3px)}
.card .vis{position:relative;overflow:hidden;background:#fff}
.card .vis .model{font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:-.02em}
.card .vis{display:block;position:relative;overflow:hidden;background:#fff}
.card .vis picture,.axis .ph-fill picture{display:block;height:100%}
.gal picture{display:block}.cmp-table picture{display:block}
.pd-gal picture{display:block}.pd-thumbs picture{display:inline-block}
.card .vis img{width:100%;height:100%;object-fit:contain;display:block;padding:.6rem;background:#fff}
.card .vis.noimg{display:grid;place-items:center}
.mini-btn.primary{background:var(--cyan);border-color:var(--cyan);color:#04181b}
.btn svg{width:16px;height:16px;flex:none}
.pd-cta{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.xbtn{display:inline-flex;align-items:center;height:52px;padding:0 17px;border-radius:26px;border:1px solid transparent;cursor:pointer;text-decoration:none;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;color:#fff}
.xbtn svg{width:18px;height:18px;flex:none}
.xbtn-t{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .35s var(--ease-decel),opacity .25s,margin .35s var(--ease-decel)}
.xbtn:hover .xbtn-t,.xbtn:focus-visible .xbtn-t,.xbtn.open .xbtn-t{max-width:260px;opacity:1;margin-left:.6rem}
.xbtn-c{background:var(--cyan);border-color:var(--cyan);color:#04181b}
[data-theme="light"] .xbtn-c{color:var(--on-cyan)}
.xbtn-wa{background:#25D366;border-color:#1DA851;color:#fff}
.xbtn-pdf{background:#EC1C24;border-color:#C2151C;color:#fff}
[data-theme="light"] .mini-btn.primary{color:#fff}
.brand-mark img{width:34px;height:34px;object-fit:contain;display:block}
.brand-word{font-family:var(--font-brand);font-weight:700;font-size:23px;letter-spacing:.05em;line-height:1;display:block}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.8s infinite;margin-right:.45rem;vertical-align:1px}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.axis .ph-fill{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#fff}
.axis .ph-fill img{background:#fff !important;object-fit:contain !important;padding:.6rem !important}
.axis .ph{position:relative;height:240px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg2);overflow:hidden;margin-bottom:1rem}
.axis .ph img{width:100%;height:100%;object-fit:cover;display:block;padding:0}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;margin:.8rem 0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border:1px solid var(--line);display:block}
.card .vis .wave{position:absolute;bottom:0;left:0;right:0;height:54px;opacity:.8}
.card .body{padding:1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card .cat{font-family:var(--font-display);font-size:10px;letter-spacing:.14em;color:var(--cyan);font-weight:700}
.card h3{font-size:1.05rem}
.card p{font-size:.88rem;color:var(--muted);margin:0;flex:1}
.card .row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:.8rem}
.mini-btn{border:1px solid var(--line2);background:transparent;color:var(--ink);font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;padding:.55rem .9rem;cursor:pointer;text-transform:uppercase}
.mini-btn:hover{background:var(--cyan);border-color:var(--cyan);color:#04181b}
[data-theme="light"] .mini-btn:hover{color:var(--on-cyan)}
.empty{border:1px dashed var(--line2);padding:2rem;text-align:center;color:var(--muted);display:none}
/* lab + chassis */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.panel{border:1px solid var(--line2);background:var(--card);padding:1.6rem}
.panel h3{font-size:1.3rem;margin:.4rem 0 .6rem}
canvas.eq{width:100%;height:180px;border:1px solid var(--line);background:var(--bg2);cursor:crosshair}
.sliders{display:grid;gap:.8rem;margin-top:1rem}
.sliders label{display:grid;grid-template-columns:90px 1fr 64px;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:12px;letter-spacing:.08em}
input[type=range]{accent-color:var(--cyan)}
.presets{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1rem}
select,.txt{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);padding:.75rem .9rem;font-size:15px;border-radius:0;outline:none}
select:focus,.txt:focus{border-color:var(--cyan)}
.form-grid{display:grid;gap:.8rem;margin-top:1rem}
.result{border:1px solid var(--cyan);background:var(--cyan-soft);padding:1rem;margin-top:1rem;display:none}
.result h4{margin:.2rem 0;font-size:1rem}
.result ul{margin:.5rem 0;padding-left:1.1rem;color:var(--ink2)}
/* corporate */
.corp{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.contact-card{border:1px solid var(--line2);background:var(--card);padding:1.6rem}
.faq{border:1px solid var(--line2);background:var(--card)}
.faq button.q{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);padding:1rem 1.2rem;font-size:15px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;gap:.8rem;font-family:var(--font-body)}
.faq-cat{font-size:1.35rem;margin:1.6rem 0 .8rem;padding-left:1.2rem}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.rel-card{position:relative;display:block;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;height:340px;box-shadow:var(--shadow-soft)}
.rel-card picture{position:absolute;inset:0 0 64px 0;display:block}
.rel-card img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;padding:.5rem}

.rel-card .rel-name{left:10px;right:10px;top:auto;bottom:10px;max-width:none;font-size:11px;text-align:center}
@media(max-width:620px){.rel-grid{grid-template-columns:1fr 1fr}}
.faq button.q:hover{color:var(--cyan)}
.faq .a{display:none;padding:0 1.2rem 1.1rem;color:var(--muted)}
.faq .item.open .a{display:block}
/* footer */
footer{border-top:1px solid var(--line2);background:var(--bg2);margin-top:4rem}
.ft{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;padding:3rem var(--gutter)}
.ft p{color:var(--muted);font-size:.92rem}
.ft h4{font-size:12px;letter-spacing:.14em;margin-bottom:.8rem}
.ft a{display:block;color:var(--muted);text-decoration:none;font-size:.92rem;padding:.22rem 0}
.ft a:hover{color:var(--cyan)}
.base{border-top:1px solid var(--line);padding:1.1rem var(--gutter);display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem}
/* modal */
.modal{position:fixed;inset:0;display:none;z-index:150}
.modal.open{display:block}
.modal .scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal .box{position:absolute;inset:5% 50% auto 50%;transform:translateX(-50%);width:min(880px,94vw);max-height:86vh;overflow:auto;background:var(--elv3);border:1px solid var(--line2);padding:2rem}
.specs{width:100%;border-collapse:collapse;font-size:.9rem}
.specs td{border-top:1px solid var(--line);padding:.5rem .3rem}
.specs td:first-child{color:var(--muted)}
/* toast */
.toast{position:fixed;bottom:18px;left:18px;transform:translateY(20px);background:var(--ink);color:var(--bg);padding:.8rem 1.2rem;font-size:14px;opacity:0;transition:.3s;z-index:200;max-width:min(420px,calc(100vw - 36px));border-radius:14px;box-shadow:var(--shadow-lift)}
.toast.show{opacity:1;transform:translateY(0)}
.fade{transition:opacity .25s ease}
body{overflow-x:clip}
footer{overflow:hidden}
@media(max-width:1000px){
  .hero-grid,.two,.corp,.co-grid{grid-template-columns:1fr}
  .grid,.axes{grid-template-columns:1fr 1fr}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--bg2);flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line2);padding:.6rem}
  .nav.open{display:flex}
  .nav .drop{position:static;display:block;border:0;box-shadow:none;padding:0 0 .4rem 1rem}
  .burger{display:grid}
  .ft{grid-template-columns:1fr 1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats div:nth-child(2){border-right:0}
}
@media(max-width:620px){.grid,.axes{grid-template-columns:1fr}.hd .btn{display:none}
  .fc1{left:8px;top:-12px}.fc2{right:8px}
  .hero-stats{gap:1.2rem 1.6rem}.hero-stats b{font-size:32px}
  .pd-thumbs{overflow-x:auto}
  .float-chip{font-size:10px;padding:.5rem .8rem}
  .ft{grid-template-columns:1fr;gap:1.4rem}
  .base{flex-direction:column;gap:.3rem}
}

/* ---------- Soft modern layer (Android-Auto-like friendliness) ---------- */
h1,h2,h3{letter-spacing:-.03em}
.hero h1{font-weight:800}
.sec h2{font-weight:700}
.mono,.kicker{letter-spacing:.1em}
/* pills */
.btn{border-radius:var(--pill);padding:.9rem 1.6rem;box-shadow:var(--shadow-soft)}
.chip{border-radius:var(--pill)}
.badge{border-radius:var(--pill)}
.icon-btn{border-radius:50%}
.lang{border-radius:var(--pill);overflow:hidden}
.mini-btn{border-radius:var(--pill)}
.link-arrow{border:1px solid var(--line2);border-radius:var(--pill);padding:.55rem 1rem;display:inline-flex;background:var(--bg2)}
.link-arrow:hover{border-color:var(--cyan);box-shadow:var(--shadow-soft)}
/* cards & panels */
.card{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-soft);border-color:var(--line)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

.axis{border-radius:var(--r);box-shadow:var(--shadow-soft)}
.axis .ph{border-radius:var(--r-sm)}
.panel{border-radius:var(--r);box-shadow:var(--shadow-soft)}
.contact-card{border-radius:var(--r);box-shadow:var(--shadow-soft)}
.faq{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-soft)}
.faq .item{border-radius:var(--r-sm)}
.drop{border-radius:18px;overflow:hidden}
.search{border-radius:var(--pill)}
select,.txt{border-radius:var(--r-sm)}
select:focus,.txt:focus{box-shadow:0 0 0 3px var(--cyan-soft)}
canvas.eq{border-radius:var(--r-sm)}
.result{border-radius:var(--r-sm)}
.modal .box{border-radius:var(--r-lg);box-shadow:var(--shadow-lift)}
.toast{border-radius:var(--pill)}

.cockpit{border-radius:var(--r-lg);box-shadow:var(--shadow-lift)}
.cockpit .screen{border-radius:20px}
.cockpit .dash{border-radius:18px;left:8%;right:8%}
.gal img{border-radius:var(--r-sm)}
.brand-mark{border-radius:12px;overflow:hidden}
.empty{border-radius:var(--r)}
.sliders label b{background:var(--bg3);border-radius:var(--pill);padding:.15rem .6rem;font-size:12px}

/* ---------- M2 foundations: focus, touch, type roles ---------- */
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}
@media(pointer:coarse){
  .icon-btn{width:44px;height:44px}
  .chip,.mini-btn{padding:.7rem 1rem}
  .nav a.top,.nav button.top{padding:.9rem 1rem}
  .faq button.q{padding:1.1rem 1.2rem}
}
.type-display{font-size:var(--text-display);line-height:1.07;letter-spacing:-.03em;font-weight:800}
.sec h2{font-weight:800;font-family:var(--font-brand);letter-spacing:-.02em}
.sf-w{color:var(--faint);transition:color .35s var(--ease-standard)}
.sf-w.on{color:var(--ink)}
.type-headline{font-size:var(--text-headline);line-height:1.12;letter-spacing:-.02em;font-weight:700}
/* ---------- aqlova-inspired: marquee, manifesto, scroll reveal ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;gap:2.2rem;padding:.85rem 0;animation:mq 26s linear infinite;font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--muted)}
.marquee-track i{font-style:normal;color:var(--cyan);font-size:9px}
@keyframes mq{to{transform:translateX(-50%)}}
.co{background:var(--bg2)}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media(max-width:1000px){.co-grid{grid-template-columns:1fr;gap:1.6rem}}
.co-grid h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:.5rem 0 1rem}
.co-feats{display:grid;gap:.8rem}
.co-feat{display:flex;align-items:flex-start;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--shadow-soft);overflow:hidden;cursor:default;min-height:86px}
.co-feat .co-ic{margin-top:.15rem}
.co-feat .co-tx{margin-left:1.1rem}
.co-feat .co-tx h3{font-size:1.02rem;margin:0 0 .2rem}
.co-feat .co-tx p{margin:0;color:var(--muted);font-size:.9rem;white-space:normal}
.co-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:22px;transition:transform .35s var(--ease-standard)}
.co-feat:hover .co-ic{transform:translateX(4px) scale(1.06)}
.co-feat:nth-child(1) .co-ic{background:rgba(0,180,200,.14);color:var(--cyan)}
.co-feat:nth-child(2) .co-ic{background:rgba(139,92,246,.14);color:#8b5cf6}
.co-feat:nth-child(3) .co-ic{background:rgba(245,158,11,.16);color:#b45309}
[data-theme="dark"] .co-feat:nth-child(3) .co-ic{color:#fbbf24}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.25,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal="zoom"].in{transform:scale(1)}
.img-zoom{overflow:hidden}
.img-zoom img{transition:transform 1.1s cubic-bezier(.2,.65,.25,1)}
.img-zoom.in img{transform:scale(1)}
.img-zoom img{transform:scale(1.07)}
.site-header.scrolled{box-shadow:0 8px 30px -12px rgba(16,24,40,.25)}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.marquee-track,.float-chip,.device-main{animation:none!important}}
/* ---------- whatsapp float, compare, favs, print ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:120;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;font-size:28px;text-decoration:none;box-shadow:0 14px 34px -8px rgba(37,211,102,.55);transition:transform .25s}
.wa-float:hover{transform:scale(1.08)}
.cmp-bar{position:fixed;left:50%;transform:translateX(-50%) translateY(90px);bottom:18px;z-index:130;display:flex;gap:.7rem;align-items:center;background:var(--ink);color:var(--bg);border-radius:var(--pill);padding:.6rem .7rem .6rem 1.1rem;font-family:var(--font-display);font-size:13px;font-weight:700;box-shadow:var(--shadow-lift);transition:transform .3s}
.cmp-bar.show{transform:translateX(-50%) translateY(0)}
.cmp-bar .mini-btn{border-color:transparent;background:var(--cyan);color:#04181b}
[data-theme="light"] .cmp-bar .mini-btn{color:#fff}

.cmp-table{width:100%;border-collapse:collapse;font-size:.9rem}
.cmp-table th,.cmp-table td{border:1px solid var(--line);padding:.6rem;text-align:left;vertical-align:top}
.cmp-table th{background:var(--bg3)}
.cmp-table img{width:100%;max-height:150px;object-fit:contain;background:#fff;border-radius:12px}
.cmp-table tr.diff td{background:var(--cyan-soft);font-weight:600}
@media print{.site-header,.wa-float,.cmp-bar,.toast,.modal,footer,.giant,#contactForm,.pd-thumbs{display:none!important}.pd-grid{grid-template-columns:1fr}.pd-left{position:static}body{background:#fff}}
/* ---------- rhythm band : full-bleed interactive interlude ---------- */
.band{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.band canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.band-in{position:relative;padding:5rem 0;text-align:center}
.band-in h2{font-family:var(--font-brand);font-weight:800;font-size:clamp(2.2rem,5.4vw,3.8rem);letter-spacing:-.02em;margin:.6rem auto;max-width:20ch;text-wrap:balance}
.band-in .sec-lead{margin:0 auto}
.band-tiles{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:2rem 0}
.band-tile{display:flex;align-items:center;gap:.7rem;text-decoration:none;background:color-mix(in srgb,var(--bg2) 60%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:var(--pill);padding:.7rem 1.2rem;transition:transform .3s var(--ease-standard),border-color .3s,box-shadow .3s}
.band-tile:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow-lift)}
.band-tile b{font-family:var(--font-brand);font-size:1.3rem;color:var(--cyan-ink,#008B9E)}
[data-theme="dark"] .band-tile b{color:var(--cyan)}
.band-tile span{font-weight:600}
.band-tile i{font-style:normal;color:var(--muted);transition:transform .3s}
.band-tile:hover i{transform:translate(3px,-3px)}
.band .hero-cta{justify-content:center}
/* ---------- product detail: sticky gallery left, scrolling specs right ---------- */
.pd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem;align-items:start;margin-top:1.2rem}
.pd-left{position:sticky;top:88px}
.pd-gal{position:relative;height:clamp(300px,44vw,520px);background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-soft);margin-bottom:.7rem}
.pd-gal picture{position:absolute;inset:0;display:block;height:100%}
.pd-gal img.pd-main{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.pd-thumbs{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--line);background:var(--bg2)}
.pd-thumbs img{width:76px;height:57px;object-fit:contain;border:1px solid var(--line2);border-radius:12px;cursor:pointer;background:#fff;padding:.2rem;display:block}
.pd-thumbs img.on,.pd-thumbs img:hover{border-color:var(--cyan)}
.pd-left ul{margin:.6rem 0 1rem;padding-left:1.2rem;color:var(--ink2)}
.pd-right h2{margin-top:0}
@media(max-width:900px){.pd-grid{grid-template-columns:1fr}.pd-left{position:static}}
/* ---------- corporate document rhythm ---------- */
.corp-doc h1{margin:.6rem 0 1.2rem}
.corp-doc h2{margin:2.2rem 0 .9rem;font-size:1.45rem}
.corp-doc p{margin:.7rem 0}
.corp-doc ul,.corp-doc ol{margin:.7rem 0;padding-left:1.3rem}
.corp-doc li{margin:.35rem 0}
/* ---------- giant footer wordmark (aqlova-style) ---------- */
.giant{display:flex;justify-content:center;align-items:baseline;gap:.01em;user-select:none;padding:3.2rem 1rem 1.2rem;overflow:hidden}
.giant-fx{position:absolute;inset:0;pointer-events:none}
.giant span{position:relative;z-index:1}
.giant span{font-family:var(--font-brand);font-weight:700;font-size:clamp(3.4rem,13.5vw,12.5rem);line-height:.95;letter-spacing:.01em;color:var(--ink);display:inline-block;transition:transform .35s cubic-bezier(.2,.65,.25,1.4),color .3s;cursor:default}
.giant span:hover{transform:scaleY(1.1) translateY(-6px);color:var(--cyan)}
.giant .gdot{color:var(--cyan);font-size:.5em;align-self:flex-end;padding-bottom:.35em}
/* ---------- product card: big visual + liquid glass spec ---------- */
.card .vis{aspect-ratio:4/3}
.glass-info{position:absolute;left:12px;right:12px;top:12px;background:color-mix(in srgb,var(--bg2) 62%,transparent);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.45);border-radius:20px;padding:.8rem .95rem;display:flex;flex-direction:column;gap:.15rem;box-shadow:0 14px 34px -10px rgba(16,24,40,.4);transform:translateY(-130%);opacity:0;transition:transform .45s var(--ease-decel),opacity .3s}
.card:hover .glass-info,.card:focus-within .glass-info,.axis:hover .glass-info,.axis:focus-within .glass-info{transform:none;opacity:1}
@media(hover:none){.glass-info{transform:none;opacity:1}}
.row .ibtn{position:static;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;color:var(--ink);display:inline-grid;place-items:center;transition:transform .2s,background .2s}
.row .ibtn:hover{transform:scale(1.1)}
.row .ibtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.row .ibtn.fav-on{color:#e11d48;border-color:#e11d48}
.row .ibtn.fav-on svg{fill:#e11d48}
.row .ibtn.cmp-on{background:var(--cyan);border-color:var(--cyan);color:#04181b}
[data-theme="light"] .row .ibtn.cmp-on{color:var(--on-cyan)}
.row-btns{display:inline-flex;align-items:center;gap:.45rem}
.row .model{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em}
[data-theme="dark"] .glass-info{background:rgba(255,255,255,.8);border-color:rgba(255,255,255,.65)}
[data-theme="dark"] .glass-info .t{color:#0D0C22}
[data-theme="dark"] .glass-info .d{color:#3A3F4D}
[data-theme="dark"] .glass-info .cat{color:#008B9E}
[data-theme="dark"] .glass-spec{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.65);color:#0D0C22}
.glass-info .cat{font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
.glass-info .t{font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.25;color:var(--ink)}
.glass-info .d{font-size:.82rem;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .row{padding:.85rem 1.1rem}
.axis .row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-top:1px solid var(--line)}
.glass-spec{position:absolute;right:14px;top:14px;max-width:70%;background:color-mix(in srgb,var(--bg2) 55%,transparent);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.5);border-radius:20px;padding:.65rem 1.05rem;font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.04em;box-shadow:0 14px 34px -10px rgba(16,24,40,.4);color:var(--ink)}
[data-theme="dark"] .glass-spec{border-color:rgba(255,255,255,.16)}
/* ---------- dark theme: corporate neutral, no neon borders ---------- */
[data-theme="dark"] .card:hover{border-color:var(--line2);box-shadow:0 20px 44px -16px rgba(0,0,0,.6)}
[data-theme="dark"] .axis:hover{border-color:var(--line2)}
[data-theme="dark"] .drop a:hover{border-color:var(--line2);background:transparent}
[data-theme="dark"] .mini-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
[data-theme="dark"] .btn.primary:hover{box-shadow:0 8px 30px -8px rgba(0,0,0,.6)}
[data-theme="dark"] .chip.on{background:var(--ink);border-color:var(--ink)}
[data-theme="dark"] .device-main{box-shadow:0 24px 60px -20px rgba(0,0,0,.65)}
[data-theme="dark"] .float-chip,[data-theme="dark"] .eq-card{box-shadow:0 14px 34px -12px rgba(0,0,0,.6)}