/* Tok Vision visual theme, inspired by the supplied SmartHome Pro reference.
   Presentation only: original copy, media, links and behavior are retained. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#0a192f;--bg-soft:#112240;--ink:#e6f1ff;--ink-2:#cad5ea;--ink-3:#a5afc8;--line:rgba(0,217,255,.17);--accent:#00d9ff;--accent-2:#64ffda;--hero-bg:#0a192f;--hero-ink:#e6f1ff;--mono:'Space Grotesk','IBM Plex Mono',monospace;--radius:20px}
body{font-family:'Outfit','Inter',sans-serif;background:var(--bg);color:var(--ink)}
.wrap,.nav-in{max-width:1200px}
section{padding:100px 0;position:relative}
section,header[id]{scroll-margin-top:104px}
h1,h2,h3{font-family:'Outfit','Inter',sans-serif}
h1{font-size:clamp(38px,4.4vw,60px);font-weight:800;line-height:1.16;letter-spacing:-.025em}
h2{font-size:clamp(30px,3.2vw,44px);position:relative;margin-bottom:30px;line-height:1.2}
section:not(.sr-only) h2::after{content:'';display:block;width:60px;height:4px;background:var(--accent);border-radius:2px;margin-top:20px}
.sub{color:var(--ink-3);line-height:1.8;font-size:18px;max-width:940px}
.kicker{color:var(--accent);font-size:12px;letter-spacing:.15em}
nav{background:rgba(10,25,47,.95);backdrop-filter:blur(15px);border-color:var(--line);box-shadow:0 5px 20px #0003}
.nav-in{height:86px;gap:24px}
.logo,.logo span{color:var(--accent);font-size:25px}
.nav-links{gap:8px}
.nav-links a{color:var(--ink);display:block;padding:8px 12px;border-radius:22px;font-size:14px}
.nav-links a:hover{background:rgba(0,217,255,.1);color:var(--accent)}
.nav-links a::after{background:var(--accent);bottom:0;left:20%;max-width:60%}
.nav-cta,.btn-primary{background:linear-gradient(100deg,#00d9ff,#64ffda);color:#0a192f;border:0;box-shadow:0 5px 18px rgba(0,217,255,.22)}
.nav-cta{border-radius:28px;white-space:nowrap;padding:11px 22px}
.hero{min-height:calc(100svh - 30px);display:flex;align-items:center;padding:160px 0 90px;background:linear-gradient(135deg,#0a192f,#112240)}
.hero-flex{display:grid;grid-template-columns:1.25fr .85fr;gap:50px;width:100%}
.hero-flex>div:first-child{flex:1.25;min-width:0}
.hero-visual{flex:.85;min-width:0;position:relative}
.hero-visual::before{content:none}
.hero-visual img{position:relative;width:100%;border-radius:0;border:0;box-shadow:none;background:transparent}
.hero::before{background:radial-gradient(circle at 85% 20%,rgba(0,217,255,.09),transparent 28%),radial-gradient(circle at 15% 90%,rgba(100,255,218,.06),transparent 30%)}
.hero::after{background:none}
.hero h1{background:linear-gradient(110deg,#e6f1ff 35%,#00d9ff 90%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero p.lead{color:var(--ink-3);font-size:19px;line-height:1.75}
.hero .kicker,.dark .kicker{color:var(--accent)}
.btn{border-radius:30px;padding:13px 28px;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,217,255,.25)}
.btn-ghost{border:2px solid var(--accent);color:var(--accent);background:transparent}
.btn-ghost:hover{background:var(--accent);color:var(--bg)}
.hero-stats{grid-column:1/-1;gap:24px 64px;padding-top:28px;border-top:1px solid var(--line);margin-top:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.hero-flex{grid-template-columns:minmax(0,1fr)}.hero-stats{column-gap:32px}.hero-visual{justify-self:center}}
.hero-stats div{min-width:0}
.hero-stats div b{white-space:nowrap}
.hero-stats div span{display:block;margin-top:8px}
@media(max-width:560px){.hero-stats{grid-template-columns:repeat(4,minmax(130px,1fr));overflow-x:auto;padding-bottom:12px}}
.hero-stats div b{color:var(--accent);font-family:var(--mono);font-size:30px}
.hero-stats div span{color:var(--ink-3);font-size:12px}
.trust{background:#0d1d35;border-color:var(--line);padding:26px 0}
.trust-in{gap:18px 32px}
.trust-in span{color:var(--ink-2);font-size:12px}
.card,.dark .card{background:linear-gradient(145deg,rgba(17,34,64,.95),rgba(14,29,53,.95));border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 8px 25px #0002;transition:transform .3s,border-color .3s,box-shadow .3s;min-width:0}
.card:hover,.dark .card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 16px 36px rgba(0,217,255,.1)}
.card h3,.dark h3{color:var(--ink)}
.card p,.dark .card p{color:var(--ink-3);line-height:1.8}
.card ul li,.dark .card ul li{color:var(--ink-2);line-height:1.65}
.card .tag,.num{color:var(--accent)}
.dark{background:linear-gradient(135deg,#0a192f,#0e203a)}
.dark .sub{color:var(--ink-3)}
.sync-item{background:rgba(17,34,64,.8);border-color:var(--line);border-radius:20px}
.sync-item b{color:var(--accent)}
.sync-item small{color:var(--ink-3)}
.spec-card{background:var(--bg-soft);border-color:var(--line);box-shadow:0 10px 30px #0002}
th{color:var(--accent)}
th,td{border-color:var(--line)}
tbody tr:nth-child(even){background:rgba(0,217,255,.025)}
tbody tr:hover{background:rgba(0,217,255,.07)}
td:first-child{color:var(--ink-2)}
td:last-child{color:var(--ink)}
.flow{gap:16px}
.flow-step{background:var(--bg-soft);border-color:var(--line);border-radius:16px!important;min-width:160px}
.flow-step:not(:last-child)::after{background:var(--bg);border-color:var(--line);right:-22px;color:var(--accent)}
.flow-step span{color:var(--ink-3)}
.factory-gallery figure{background:var(--bg-soft);border-color:var(--line)}
.factory-gallery figcaption{color:var(--ink-2)}
/* Reconcile legacy inline panel colors without changing the document content. */
section [style*="background:#fff"],section [style*="background: #fff"]{background:var(--bg-soft)!important}
section img[style*="background:#fff"]{background:#fff!important}
section [style*="background:#060a12"],section [style*="background:#0c1320"]{background:#112240!important}
section [style*="color:#8a93a3"],section [style*="color:#6b7482"]{color:var(--ink-3)!important}
section [style*="color:#3d4552"],section [style*="color:#0a0e14"]{color:var(--ink-2)!important}
section [style*="min-width"]{min-width:0!important}
img,video,svg{max-width:100%}
.grid{min-width:0}
#contact{background:radial-gradient(ellipse at 50% 0,rgba(0,217,255,.1),transparent 65%),#112240}
#contact h2::after{margin-left:auto;margin-right:auto}
footer{background:#081426;color:var(--ink-3);border-top:1px solid var(--line);padding-top:72px}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--accent)}
footer .foot-bottom{color:var(--ink-3)}
footer .foot-top{border-color:var(--line)}
a:focus-visible{outline:3px solid var(--accent-2);outline-offset:5px}
@media(max-width:1050px){.nav-links{gap:0}.nav-links a{padding:8px;font-size:12px}.nav-in{gap:14px}}
@media(max-width:900px){.nav-in{height:76px;flex-wrap:wrap;align-content:center;padding-top:10px;padding-bottom:10px}.nav-links{display:flex;order:3;width:100%;overflow-x:auto;white-space:nowrap;gap:5px;padding-bottom:3px}.nav-in{height:auto;min-height:110px}.nav-links a{font-size:12px;padding:5px 9px}.hero{padding-top:170px;min-height:auto}.hero-flex{gap:48px}.hero-visual{max-width:480px;align-self:center}section{padding:72px 0}section,header[id]{scroll-margin-top:132px}}
@media(max-width:560px){.wrap,.nav-in{padding-left:20px;padding-right:20px}.logo,.logo span{font-size:21px}.nav-cta{font-size:12px;padding:8px 16px}.hero{padding-bottom:64px}.hero-visual img{border-radius:70px 18px}.hero p.lead{font-size:17px}.hero-stats{gap:20px}.hero-stats div b{font-size:26px}.hero-ctas{gap:12px}.btn{font-size:14px;padding:12px 20px}.card,.dark .card{padding:24px}.grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}.flow{flex-direction:column}.flow-step{flex:auto}.flow-step:not(:last-child)::after{display:none}.sync-grid{grid-template-columns:1fr}section [style*="padding:40px"]{padding:24px!important}.trust-in{justify-content:flex-start;gap:12px}#contact{padding:76px 0!important}.spec-card{overflow-x:auto}footer .foot-top{gap:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.btn,.nav-links a{transition:none}.card:hover,.btn:hover{transform:none}}
.hero .hero-visual img{border-radius:0;border:0;box-shadow:none;background:transparent}