:root{--navy:#140047;--cyan:#01caff;--bg:#f6f8fb;--card:#fff;--ink:#12063a;--mut:#5a6082;--line:#dde2ee;--wa:#1faa59;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root:not([data-theme="light"]){}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1230;--card:#181c45;--ink:#eef1fb;--mut:#a5abcf;--line:#2a2f66}}
:root[data-theme="dark"]{--bg:#0f1230;--card:#181c45;--ink:#eef1fb;--mut:#a5abcf;--line:#2a2f66}
html{scroll-padding-top:calc(82px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "Instrument Sans",system-ui,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;line-height:1.1;margin:0;letter-spacing:-.02em}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.nav img{height:58px;width:auto;background:#fff;border-radius:10px;padding:2px 8px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-weight:500}
.nav ul a{text-decoration:none;color:var(--mut)}.nav ul a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:#fff;font-weight:600;text-decoration:none;padding:13px 22px;border-radius:999px;border:0;font-size:16px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:2px solid #fff;color:#fff}
.hero{position:relative;color:#fff;background:var(--navy);overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,#140047 22%,rgba(20,0,71,.55) 70%,rgba(20,0,71,.15))}
.hero .wrap{position:relative;z-index:1;padding-top:110px;padding-bottom:110px}
.hero h1{font-size:clamp(40px,6.4vw,78px);font-weight:800;max-width:760px}
.hero p{font-size:clamp(18px,2vw,22px);max-width:560px;margin:22px 0 34px;color:#dfe5ff}
.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.strip{background:var(--cyan);color:#10143a;font-weight:600}
.strip .wrap{display:flex;gap:10px 34px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;justify-content:space-between}
section{padding:92px 0}
h2{font-size:clamp(30px,4.2vw,48px);font-weight:800}
.lead{color:var(--mut);max-width:620px;margin:14px 0 0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card.big{grid-column:span 2}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:#fff}
.card.big .ph{aspect-ratio:16/9}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .ph img{transform:scale(1.05)}
.card .tx{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:22px;font-weight:600}
.card p{margin:0;color:var(--mut);font-size:15.5px}
.card a.q{margin-top:auto;padding-top:10px;font-weight:600;color:var(--navy);text-decoration:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .card a.q{color:var(--cyan)}}
:root[data-theme="dark"] .card a.q{color:var(--cyan)}
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.about .pic{border-radius:22px;overflow:hidden}
.about .pic img{width:100%;height:100%;object-fit:cover}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.mv div{border-left:4px solid var(--cyan);padding:2px 0 2px 16px}
.mv h3{font-size:20px;margin-bottom:6px}.mv p{margin:0;color:var(--mut);font-size:15.5px}
.dark{background:var(--navy);color:#fff}
.dark .lead{color:#c5cbf0}
.uses{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.uses div{border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:22px 18px}
.uses h3{font-size:19px;font-weight:600;margin-bottom:8px}
.uses p{margin:0;font-size:15px;color:#c5cbf0}
.cta{text-align:center}
.cta h2{max-width:720px;margin:0 auto}
.cta .lead{margin:16px auto 30px}
.cta .btn{font-size:19px;padding:17px 32px}
.cta small{display:block;margin-top:18px;color:var(--mut)}
footer{background:var(--navy);color:#c5cbf0;padding:34px 0;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:#fff}
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;background:var(--wa);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.3)}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.uses{grid-template-columns:repeat(2,1fr)}.about{grid-template-columns:1fr}.nav ul{display:none}}
@media(max-width:560px){section{padding:64px 0}.grid,.mv{grid-template-columns:1fr}.card.big{grid-column:auto}.uses{grid-template-columns:1fr}.hero .wrap{padding-top:70px;padding-bottom:70px}.nav .btn{padding:10px 16px;font-size:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.phone{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--navy);text-decoration:none;font-weight:800;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(22px,3.4vw,34px);padding:10px 24px 10px 14px;border-radius:999px;margin-top:22px}
.phone i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cyan);font-style:normal;font-size:22px}
.fab.call{background:var(--navy);bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.card .tx .more{margin-top:auto;padding-top:10px;font-weight:600;color:var(--navy);text-decoration:none}
.card h3 a{text-decoration:none}
.card.cust{background:var(--navy);color:#fff;justify-content:center}.card.cust .tx{justify-content:center;flex:1}.card.cust p{color:#c5cbf0}
.crumb{font-size:14px;color:var(--mut);padding:22px 0 0}.crumb a{color:var(--mut)}
.ph1{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:34px 0 70px}
.ph1 h1{font-size:clamp(32px,4.6vw,54px);font-weight:800}.ph1 p{color:var(--mut)}
.ph1 .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn.alt{background:var(--navy)}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.gal img{width:100%;border-radius:16px;border:1px solid var(--line);object-fit:cover;aspect-ratio:4/3;background:#fff}.gal img:first-child{grid-column:span 2;aspect-ratio:16/10}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}.box h2{font-size:26px;margin-bottom:14px}
.box ul{margin:0;padding-left:20px;color:var(--mut)}.box li{margin:7px 0}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-top:12px}summary{cursor:pointer;font-weight:600}details p{color:var(--mut);margin:10px 0 0}
.sec2{padding:56px 0 0}.sec2 h2{font-size:clamp(26px,3.4vw,36px)}
.rel{grid-template-columns:repeat(3,1fr)}
.note{background:var(--navy);color:#fff;border-radius:18px;padding:30px;margin-top:28px}.note p{color:#c5cbf0;margin:8px 0 0}
.vid{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;margin-top:20px}.vid video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}.why div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}.why b{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--cyan);color:#140047;font-size:22px;margin-bottom:14px}.why h3{font-size:21px;margin-bottom:6px}.why p{margin:0;color:var(--mut);font-size:15.5px}
.vsec{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:center}
@media(max-width:980px){.why{grid-template-columns:1fr 1fr}.vsec{grid-template-columns:1fr}}@media(max-width:560px){.why{grid-template-columns:1fr}}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px;width:100%}
@media(max-width:980px){.ph1,.two{grid-template-columns:1fr}.rel{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rel{grid-template-columns:1fr}}
.burger{display:none;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;width:46px;height:46px;font-size:24px;line-height:1;cursor:pointer}
@media(max-width:980px){
.burger{display:grid;place-items:center}
.nav{gap:10px}.nav>.btn{margin-left:auto}
header.open .nav ul{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 22px 16px;box-shadow:0 14px 30px rgba(0,0,0,.18)}
header.open .nav ul a{display:block;padding:14px 0;font-size:18px;color:var(--ink);border-bottom:1px solid var(--line)}
header.open .nav ul li:last-child a{border-bottom:0}
}