:root { --bg:#07141e; --surface:#0c2030; --text:#edf7ff; --muted:#abc1d0; --accent:#67efda; --accent-rgb:103,239,218; --line:rgba(183,217,233,.17); font-family:Inter,system-ui,sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; overflow-x:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button,a,summary { touch-action:manipulation; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
button[hidden],[hidden] { display:none !important; }
h1,h2,h3,p { margin-top:0; }
em { font-style:normal; }
:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
.wrap { width:min(1200px,calc(100% - 72px)); margin-inline:auto; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.skip-link { position:fixed; top:-100px; left:20px; padding:16px; background:var(--accent); color:var(--bg); z-index:100; }
.skip-link:focus { top:16px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:27px; position:relative; z-index:10; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.35rem; letter-spacing:-.06em; white-space:nowrap; }
.brand>span>span { color:#67efda; }
.brand-mark { display:grid; place-items:center; width:39px; height:39px; color:#67efda; border:1px solid rgba(103,239,218,.3); border-radius:12px; background:rgba(103,239,218,.08); }
.brand-mark svg { width:29px; height:29px; }
.site-header nav { display:flex; gap:30px; color:#b6c8d5; font-size:.9375rem; }
.site-header nav a { transition:color .2s; }
.site-header nav a:hover { color:white; }
.header-contact { display:flex; gap:28px; align-items:center; border:1px solid #476170; padding:12px 20px; border-radius:100px; font-weight:600; font-size:.9375rem; transition:background .2s,border-color .2s; }
.header-contact:hover { background:rgba(103,239,218,.1); border-color:#67efda; }
.menu-toggle { display:none; color:var(--text); background:none; border:1px solid var(--line); border-radius:10px; padding:12px; }
.hero { position:relative; isolation:isolate; overflow:hidden; padding-top:50px; background:radial-gradient(ellipse at 80% 35%,rgba(34,99,126,.13),transparent 65%); }
#connection-field { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.8; }
.ambient { position:absolute; border-radius:50%; pointer-events:none; filter:blur(70px); opacity:.13; z-index:-2; }
.ambient-a { width:500px; height:500px; background:#20a4c1; left:45%; top:12%; }
.ambient-b { width:350px; height:350px; background:#4b57c5; right:-8%; top:38%; }
body[data-motion="on"] .ambient-a { animation:drift 18s ease-in-out infinite alternate; }
body[data-motion="on"] .ambient-b { animation:drift 23s ease-in-out infinite alternate-reverse; }
.pointer-glow { position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(63,187,202,.09),transparent 68%); border-radius:50%; left:var(--pointer-x,75%); top:var(--pointer-y,35%); transform:translate(-50%,-50%); pointer-events:none; z-index:-1; }
.hero-grid { display:grid; grid-template-columns:1.08fr 1fr; gap:50px; align-items:center; padding-bottom:45px; }
.hero-copy { padding-bottom:28px; }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:.8125rem; line-height:1.6; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8adaca; margin-bottom:25px; }
.local-dot { width:7px; height:7px; border-radius:50%; background:#67efda; box-shadow:0 0 0 5px rgba(103,239,218,.08); }
h1 { font-size:clamp(3.3rem,5.9vw,5.3rem); letter-spacing:-.065em; line-height:1.03; margin-bottom:29px; font-weight:600; }
h1 em { color:var(--accent); }
.lead { max-width:490px; color:var(--muted); font-size:1.0625rem; line-height:1.8; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:17px 23px; border-radius:100px; font-size:.9375rem; font-weight:700; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(103,239,218,.18); }
.primary { background:#67efda; color:#06221f; }
.text-link { display:flex; gap:15px; align-items:center; font-size:.9375rem; }
.text-link:hover { color:var(--accent); }
.hero-note { display:flex; align-items:center; gap:14px; color:#819fad; font-size:.875rem; line-height:1.5; margin-top:42px; }
.note-line { width:30px; height:1px; background:#466170; }
.service-explorer { min-width:0; }
.explorer-caption { display:flex; align-items:center; justify-content:space-between; color:#8daaba; font-size:.8125rem; letter-spacing:.02em; }
.explorer-count { font-variant-numeric:tabular-nums; color:var(--accent); }
.constellation { position:relative; width:100%; height:340px; margin-block:8px 6px; }
.connections { width:100%; height:100%; position:absolute; overflow:visible; }
.connections path { stroke:var(--accent); stroke-opacity:.18; stroke-width:.22; fill:none; }
.connections .selected { stroke-opacity:.9; stroke-width:.36; stroke-dasharray:2 1.4; }
body[data-motion="on"] .connections .selected { animation:signal 7s linear infinite; }
.orbit-ring { fill:none; stroke:#799fae; stroke-width:.12; stroke-dasharray:.7 1.5; opacity:.3; }
.orbit-ring.inner { opacity:.15; stroke-dasharray:none; }
.connection-core { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:92px; height:92px; display:grid; place-items:center; color:var(--accent); background:linear-gradient(145deg,#13303f,#081b29); border:1px solid rgba(103,239,218,.35); border-radius:28px; box-shadow:0 0 50px rgba(var(--accent-rgb),.11),inset 0 1px 1px rgba(255,255,255,.15); }
.connection-core>svg { width:59px; height:59px; }
.core-ring { position:absolute; inset:-12px; border-radius:37px; border:1px solid rgba(var(--accent-rgb),.1); }
body[data-motion="on"] .core-ring { animation:core-pulse 4s ease-in-out infinite; }
.service-node { border:0; position:absolute; transform:translate(-50%,-50%); padding:8px; min-width:86px; background:transparent; color:#99b1be; display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2; }
.service-node>span { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; border:1px solid #294551; background:#0a1c29; transition:transform .22s,background .22s,color .22s,box-shadow .22s; }
.service-node strong { font-weight:500; font-size:.875rem; background:rgba(7,20,30,.8); padding:2px 5px; border-radius:4px; }
.service-node:hover>span { transform:translateY(-4px); color:var(--accent); border-color:var(--accent); }
.service-node[aria-selected="true"] { color:var(--accent); }
.service-node[aria-selected="true"]>span { border-color:var(--accent); background:rgba(var(--accent-rgb),.12); box-shadow:0 0 22px rgba(var(--accent-rgb),.16); }
.node-support { left:14%; top:20%; }.node-camera { left:81%; top:16%; }.node-wifi { left:91%; top:66%; }.node-software { left:52%; top:87%; }.node-network { left:12%; top:69%; }
.service-panels { margin-top:10px; }
.service-panel { display:grid; grid-template-columns:1fr 48px; gap:18px; align-items:center; padding:22px 24px; border:1px solid rgba(var(--accent-rgb),.25); border-radius:18px; background:linear-gradient(125deg,rgba(20,48,62,.9),rgba(10,28,39,.94)); min-height:164px; }
.panel-kicker { margin-bottom:8px; color:var(--accent); font-size:.75rem; letter-spacing:.04em; }
.service-panel h2 { font-size:1.28rem; letter-spacing:-.03em; font-weight:600; margin-bottom:9px; line-height:1.2; }
.service-panel p:last-child { color:#a8bdc9; font-size:.875rem; line-height:1.6; margin-bottom:0; }
.service-panel>a { display:grid; place-items:center; width:46px; height:46px; border:1px solid #38505d; border-radius:50%; color:var(--accent); transition:background .2s; }
.service-panel>a:hover { background:rgba(var(--accent-rgb),.15); }
.explorer-contact { margin:16px 4px 0; display:flex; justify-content:space-between; color:var(--accent); font-size:.875rem; font-weight:500; }
.explorer-fallback { font-size:.875rem; color:var(--muted); line-height:1.6; margin-top:16px; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; padding-block:22px; border-top:1px solid var(--line); color:#89a6b7; font-size:.8125rem; }
.hero-bottom>a { display:flex; align-items:center; gap:16px; }
.hero-bottom>a>span { font-size:1.1rem; color:var(--accent); }
.motion-toggle { display:flex; align-items:center; gap:10px; border:none; background:none; color:#adc0cc; padding:10px; font-size:.8125rem; }
.motion-indicator { width:21px; height:12px; border:1px solid #54737d; border-radius:20px; position:relative; }
.motion-indicator::after { content:""; width:6px; height:6px; position:absolute; border-radius:50%; left:2px; top:2px; background:#91a9b7; }
[aria-checked="true"] .motion-indicator { border-color:#67efda; }
[aria-checked="true"] .motion-indicator::after { background:#67efda; left:11px; }
.solutions { background:#eaf3f6; color:#0b2935; padding:95px 0 105px; }
.solutions-grid { display:grid; grid-template-columns:.95fr 1.2fr; gap:90px; }
.solutions .eyebrow { color:#2c746b; }
.section-intro h2 { font-size:clamp(2.4rem,4.5vw,3.8rem); font-weight:500; line-height:1.06; letter-spacing:-.055em; margin-bottom:28px; }
.section-intro h2 em { color:#4f7681; }
.section-intro>p:not(.eyebrow) { font-size:1rem; color:#516d77; max-width:320px; line-height:1.8; }
.section-index { display:block; margin-top:60px; font-size:.75rem; letter-spacing:.12em; color:#718d94; }
.solution-list { border-top:1px solid #c4d7de; }
.solution-list details { border-bottom:1px solid #c4d7de; }
.solution-list summary { cursor:pointer; list-style:none; display:grid; grid-template-columns:28px 1fr 28px; gap:18px; align-items:start; padding:25px 0; }
.solution-list summary::-webkit-details-marker { display:none; }
.solution-number { font-size:.8125rem; color:#719097; padding-top:5px; }
.solution-list summary>span:nth-child(2) { font-size:1.1875rem; font-weight:600; letter-spacing:-.03em; line-height:1.4; }
.solution-list small { display:block; color:#5f7b85; font-size:.875rem; letter-spacing:0; font-weight:400; margin-top:6px; }
.expand-icon { font-weight:400; font-size:1.7rem; line-height:1; transition:transform .25s; }
.solution-list details[open] .expand-icon { transform:rotate(45deg); }
.solution-list details[open] summary { padding-bottom:14px; }
.solution-body { margin-left:46px; padding:0 32px 28px 0; }
.solution-body p { color:#506d77; font-size:.9375rem; line-height:1.75; }
.solution-body a { display:inline-flex; gap:25px; color:#115f5d; font-size:.9375rem; font-weight:600; }
.solution-list :focus-visible { outline-color:#168c87; }
.process { padding-block:90px 95px; }
.process-heading { display:flex; gap:70px; justify-content:space-between; align-items:start; margin-bottom:60px; }
.process-heading h2 { width:65%; font-size:clamp(2rem,3.5vw,3rem); font-weight:500; line-height:1.18; letter-spacing:-.045em; }
.process-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.process-steps li { border-top:1px solid #294651; padding-top:24px; }
.process-steps li>span { color:#67efda; font-size:.8125rem; display:block; margin-bottom:30px; }
.process-steps h3 { font-size:1.18rem; font-weight:500; letter-spacing:-.025em; }
.process-steps p { font-size:.9375rem; color:#95afbe; line-height:1.75; }
.contact-section { position:relative; overflow:hidden; background:linear-gradient(115deg,#0c2f3c,#0c232e); border-block:1px solid #25414c; }
.contact-inner { display:grid; grid-template-columns:1.2fr 1fr; gap:100px; padding-block:78px; align-items:center; }
.contact-inner h2 { font-size:clamp(2.8rem,5vw,4.3rem); font-weight:500; letter-spacing:-.055em; line-height:1.05; }
.contact-inner h2 em { color:#67efda; }
.contact-inner>div>p:not(.eyebrow) { color:#a0bdc9; margin-bottom:28px; line-height:1.6; }
.contact-details { display:flex; flex-direction:column; gap:12px; }
.contact-details a { width:fit-content; font-size:1.1rem; font-weight:700; letter-spacing:-.02em; }
.contact-details a:hover { color:#67efda; }
.contact-details p { color:#8ba7b5; font-size:.875rem; line-height:1.7; margin:6px 0 0; }
.contact-form { display:grid; align-content:start; gap:16px; padding:32px; border:1px solid rgba(103,239,218,.22); border-radius:20px; background:linear-gradient(125deg,rgba(20,48,62,.85),rgba(10,28,39,.9)); }
.contact-form label { display:flex; flex-direction:column; gap:8px; font-size:.8125rem; color:#9db8c6; font-weight:700; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; border:1px solid #33505c; border-radius:12px; background:rgba(6,20,28,.6); color:var(--text); padding:13px 14px; font-size:.9375rem; font-family:inherit; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color:rgba(103,239,218,.7); box-shadow:0 0 0 4px rgba(103,239,218,.14); }
.contact-form textarea { resize:vertical; }
.contact-form button[type="submit"] { justify-self:start; border:none; }
.contact-form button[disabled] { opacity:.55; cursor:not-allowed; }
.form-note { margin:0; color:#7f9eac; font-size:.8125rem; line-height:1.6; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-block:30px; }
.footer p,.footer>a:last-child { font-size:.8125rem; color:#7695a4; margin:0; line-height:1.6; }
.footer .brand { font-size:1.2rem; }
.footer-brand { display:flex; align-items:center; gap:22px; }
.social-links { display:flex; align-items:center; gap:20px; }
.social-links a { display:inline-flex; color:#7695a4; }
.social-links svg { width:18px; height:18px; fill:currentColor; transition:color .2s ease, transform .2s ease; }
.social-links a:hover svg,.social-links a:focus-visible svg { color:var(--accent); transform:translateY(-2px); }
@keyframes drift { to { transform:translate(80px,-35px) scale(1.15); } }
@keyframes signal { to { stroke-dashoffset:-34; } }
@keyframes core-pulse { 50% { opacity:.35; transform:scale(1.1); } }
@media(min-width:1500px) { .hero { padding-top:65px; }.hero-grid { padding-bottom:65px; }.constellation { height:370px; } }
@media(max-width:1050px) { .wrap { width:calc(100% - 48px); }.hero-grid { gap:35px; }.hero-actions { gap:20px; }.site-header nav { gap:20px; }.hero h1 { font-size:3.5rem; }.constellation { height:300px; }.service-panel { padding:18px; min-height:180px; }.solutions-grid { gap:55px; }.contact-inner { gap:50px; } }
@media(max-width:800px) {
  .site-header { flex-wrap:wrap; gap:20px; padding-block:20px; }.site-header nav { order:4; width:100%; justify-content:center; }.header-contact { margin-left:auto; }.menu-toggle:not([hidden]) { display:block; }.js .site-header nav { display:none; }.js .site-header nav.is-open { display:flex; padding-top:18px; border-top:1px solid var(--line); }.js .header-contact { display:none; }
  .hero { padding-top:48px; }.hero-grid { grid-template-columns:1fr; gap:25px; }.hero-copy { max-width:600px; }.hero h1 { font-size:clamp(3.2rem,8.5vw,4.8rem); }.hero-note { margin-top:25px; }.service-explorer { width:min(510px,100%); margin-inline:auto; }.constellation { height:330px; }.service-panel { min-height:164px; }.hero-bottom { margin-top:15px; }
  .solutions { padding-block:65px; }.solutions-grid { grid-template-columns:1fr; gap:35px; }.section-intro h2 br:last-child { display:none; }.section-intro>p:not(.eyebrow) { max-width:500px; }.section-index { display:none; }.section-intro h2 { font-size:3rem; }.process-heading { display:block; margin-bottom:35px; }.process-heading h2 { width:auto; }.process-steps { grid-template-columns:repeat(2,1fr); gap:25px; }.contact-inner { grid-template-columns:1fr; gap:45px; }.contact-form { padding:26px; }.footer { flex-wrap:wrap; }.footer p { display:none; }
}
@media(max-width:480px) {
  .wrap { width:calc(100% - 36px); }.brand { font-size:1.2rem; }.site-header nav { gap:18px; font-size:.875rem; }.hero h1 { font-size:clamp(2.6rem,10.7vw,3.5rem); }.lead { font-size:1rem; }.hero-actions { gap:25px; }.button { padding:16px 20px; font-size:.875rem; }.hero-grid { gap:38px; }.explorer-caption { font-size:.75rem; }.constellation { height:295px; }.service-node { min-width:70px; padding:5px; }.service-node>span { width:46px; height:46px; border-radius:15px; }.service-node strong { font-size:.8125rem; }.node-wifi { left:88%; }.connection-core { width:80px; height:80px; border-radius:24px; }.service-panel { grid-template-columns:1fr 40px; gap:12px; padding:19px 16px; min-height:176px; }.service-panel>a { width:40px; height:40px; }.hero-bottom { align-items:start; gap:20px; }.hero-bottom>a { font-size:.75rem; line-height:1.6; max-width:150px; }.motion-toggle { font-size:.75rem; padding:4px 0; line-height:1.6; }.motion-indicator { flex-shrink:0; }.solution-list summary { gap:12px; grid-template-columns:24px 1fr 22px; }.solution-list summary>span:nth-child(2) { font-size:1.0625rem; }.solution-body { margin-left:36px; padding-right:10px; }.process { padding-block:65px; }.process-steps { gap:26px 20px; }.footer { gap:18px; }.footer>a:last-child { font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } .pointer-glow { display:none; } }