:root{--bg: #ffffff;--ink: #0c1f30;--muted: #5a6e7f;--line: #d4dde6;--soft: #f2f6fb;--accent: #0a3558;--accent-mid: #1562a0;--accent-light: #5aaade;--accent-bright: #2e8cd6;--card-shadow: 0 12px 32px rgba(11, 31, 48, .08)}html,body{overflow-x:hidden}html,a{color:inherit;text-decoration:none}header{position:sticky;top:0;z-index:100;background:#fffffff5;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.header-inner{max-width:1320px;margin:0 auto;width:min(1320px,100% - 48px);padding:0;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}nav{display:flex;align-items:center;gap:2px}.nav-item{position:relative}.nav-item>a{display:flex;align-items:center;gap:4px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.05em;transition:color .2s;white-space:nowrap}.nav-item>a:after{content:"\25be";font-size:9px;opacity:.45}.nav-item>a:hover{color:var(--accent)}.dropdown{position:absolute;top:100%;left:0;min-width:190px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--accent);box-shadow:0 8px 28px #0b1f301f;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s ease;z-index:200}.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}.dropdown a{display:block;padding:9px 16px;font-size:12px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line);transition:background .15s,color .15s}.dropdown a:last-child{border-bottom:none}.dropdown a:hover{background:var(--soft);color:var(--accent)}.nav-cta{font-family:IBM Plex Mono,monospace!important;font-size:11px!important;background:var(--accent)!important;color:#fff!important;padding:9px 18px!important;letter-spacing:.08em;margin-left:8px;transition:background .2s!important}.nav-cta:hover{background:var(--accent-mid)!important}.nav-cta:after{display:none!important}@media(max-width:1024px){.header-inner{width:min(1320px,100% - 32px)}}.hero{position:relative;height:clamp(210px,28vw,32vw);display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#0b1a2b,#0f2236,#132a42)}.hero-top-bg,.hero-bottom-devices{object-position:center bottom}@media(max-width:600px){.hero-bottom-devices,.hero-wifi{object-fit:contain}}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b1a2b1a,#0b1a2b66);z-index:1;pointer-events:none}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 60%,rgba(14,165,182,.06) 0%,transparent 70%);pointer-events:none;z-index:1}@keyframes hero-flow{0%{transform:translate(-20px);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translate(64px);opacity:0}}@keyframes hero-flow-vertical{0%{transform:translateY(-8px);opacity:0}20%{opacity:1}80%{opacity:1}to{transform:translateY(30px);opacity:0}}@keyframes hero-glow{0%,to{box-shadow:0 0 #0ea5b600}50%{box-shadow:0 0 14px 5px #0ea5b64d}}.hero-layer{position:absolute;pointer-events:none;will-change:transform}.hero-top-bg{transform:translateY(var(--hp-far, 0px))}.hero-bottom-devices{transform:translateY(var(--hp-near, 0px))}.hero-top-bg{inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:invert(1) brightness(1.2) sepia(.3) hue-rotate(170deg) saturate(.5);opacity:.18}.hero-bottom-devices{inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:invert(1) brightness(1.2) sepia(.3) hue-rotate(170deg) saturate(.5);opacity:.55}.hero-wifi{inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.9;transform:translateY(var(--hp-wifi, 0px));will-change:transform}.hero-inner{position:absolute;bottom:24px;left:50%;transform:translate(-50%);z-index:4;max-width:1100px;width:min(1100px,100% - 48px);color:#fff;display:flex;justify-content:center}.hero-process{display:flex;align-items:center;gap:0;flex-wrap:wrap}.hero-step{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 22px}.hero-step-dot{width:54px;height:54px;border-radius:50%;border:2px solid rgba(14,165,182,.6);display:flex;align-items:center;justify-content:center;background:#0b1a2bb3;backdrop-filter:blur(4px);transition:box-shadow .3s}.hero-step-dot{animation:hero-glow 3s ease-in-out infinite}.hero-step:nth-child(3) .hero-step-dot{animation-delay:.5s}.hero-step:nth-child(5) .hero-step-dot{animation-delay:1s}.hero-step:nth-child(7) .hero-step-dot{animation-delay:1.5s}.hero-step-dot svg{width:22px;height:22px;stroke:#0ea5b6;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.hero-step-label{font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#ffffffb3;margin-top:2px}.hero-step-connector{width:64px;height:2px;background:#0ea5b640;align-self:flex-start;margin-top:27px;position:relative;overflow:hidden}.hero-step-connector:before{content:"";position:absolute;width:20px;height:100%;background:linear-gradient(90deg,transparent,#0ea5b6,transparent);top:0;left:-20px;animation:hero-flow 2s ease-in-out infinite}.hero-step-connector:nth-of-type(2):before{animation-delay:.4s}.hero-step-connector:nth-of-type(4):before{animation-delay:.8s}.hero-step-connector:nth-of-type(6):before{animation-delay:1.2s}.hero-step-connector:after{display:none}@media(max-width:860px){.hero-step{padding:0 12px}.hero-step-dot{width:42px;height:42px}.hero-step-dot svg{width:18px;height:18px}.hero-step-connector{width:36px;margin-top:20px}.hero-step-label{font-size:10px}}@media(max-width:768px){.hero-process{gap:4px}.hero-step{padding:0 8px}.hero-step-connector{width:24px;margin-top:16px}.hero-step-label{font-size:8px;white-space:nowrap;text-align:center}.hero-step-dot{width:32px;height:32px}.hero-step-dot svg{width:14px;height:14px}}@media(max-width:400px){.hero-step-connector{display:none}.hero-process{gap:12px;justify-content:center}}@media(max-width:590px){.hero-inner{justify-content:flex-start;bottom:50%;transform:translate(-50%) translateY(50%)}.hero-process{flex-direction:column;gap:0;align-items:flex-start;padding-left:10px}.hero-step{flex-direction:row;padding:0;gap:10px}.hero-step-dot{width:30px;height:30px;flex-shrink:0}.hero-step-dot svg{width:14px;height:14px}.hero-step-label{font-size:9px}.hero-step-connector{width:30px;height:auto;background:none;opacity:1;margin-top:0;align-self:auto;padding:2px 0;display:flex;justify-content:center;overflow:visible}.hero-step-connector:before{animation:none;display:none}.hero-step-connector:after{position:static;border:4px solid transparent;border-top:5px solid rgba(14,165,182,.5);display:inline-block}.hero-step-dot{animation:none}}.hero-eyebrow{font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#fffc;display:inline-flex;align-items:center;gap:10px}.hero-eyebrow:before,.hero-eyebrow:after{content:"";width:24px;height:2px;background:#0ea5b6}.hero-ref{position:absolute;bottom:28px;right:40px;z-index:5;font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#0ea5b64d;pointer-events:none}.sep{display:flex;align-items:center;gap:0;max-width:1320px;margin:0 auto;width:min(1320px,100% - 48px);padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.sep-label{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 24px 14px 0;border-right:1px solid var(--line);white-space:nowrap}.sep-tags{display:flex;gap:0;overflow-x:auto}.sep-tag{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 20px;border-right:1px solid var(--line);white-space:nowrap;display:flex;align-items:center;gap:8px}.sep-tag svg{stroke:var(--accent-light);flex-shrink:0}.cards-section{position:relative;z-index:1;padding:96px 0}.cs-inner{max-width:1320px;margin:0 auto;width:min(1320px,100% - 48px)}.cs-header{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:64px;padding-bottom:32px;border-bottom:1px solid var(--line)}@media(max-width:860px){.cs-header{grid-template-columns:1fr;gap:24px}}.cs-eyebrow{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-mid);margin-bottom:16px;display:flex;align-items:center;gap:10px}.cs-eyebrow:before{content:"";display:block;width:24px;height:1px;background:var(--accent-mid)}.cs-title{font-family:Barlow,sans-serif;font-size:clamp(28px,4vw,52px);font-weight:800;line-height:1;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em}.cs-lead{font-size:clamp(18px,2.5vw,24px);color:var(--muted);line-height:1.5;margin-top:16px;font-weight:400}.cs-blocks{display:flex;flex-direction:column;gap:16px;align-self:end}.cs-desc{font-size:16px;color:var(--muted);line-height:1.75}.cs-desc strong{color:var(--ink);font-weight:600}.cs-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:64px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}@media(max-width:860px){.cs-insights{grid-template-columns:1fr;gap:24px}}.cs-insight p{font-size:14px;color:var(--muted);line-height:1.7}.cs-insight-num{font-family:Barlow,sans-serif;font-size:48px;font-weight:800;color:var(--accent-mid);line-height:1;display:block;margin-bottom:12px}.cs-insight-icon{display:block;margin-bottom:12px}.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}@media(max-width:900px){.cards-grid{grid-template-columns:1fr}}.card{position:relative;background:var(--soft);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s}.card:hover{border-color:var(--accent-light);box-shadow:var(--card-shadow)}.card-no{position:absolute;top:-1px;left:16px;transform:translateY(-50%);font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--accent-mid);background:var(--bg);padding:0 8px;line-height:1;z-index:2}.card-inner{display:flex;flex-direction:column;flex:1;padding:24px 24px 28px;gap:20px;color:inherit;text-decoration:none;cursor:pointer}.card-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1;gap:20px}.card h3{font-family:Barlow,sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);line-height:1.2}.card-schematic{border:1px solid var(--line);height:300px;position:relative;overflow:hidden;background:#fff;flex-shrink:0}.card-schematic img:not(.stormbox-img):not(.pipe-img){width:100%;height:100%;object-fit:cover;opacity:.22;filter:grayscale(1) contrast(1.3);transition:opacity .4s,transform .5s}.card:hover .card-schematic img:not(.stormbox-img):not(.pipe-img){opacity:.34;transform:scale(1.04)}.stormbox-stack{position:relative;border:none;background:#fff;height:auto;aspect-ratio:16/10;cursor:pointer}.stormbox-stack .stormbox-img{position:absolute;object-fit:contain;opacity:1;will-change:transform,filter;transition:transform 1.2s cubic-bezier(.4,0,.2,1),filter 1.2s cubic-bezier(.4,0,.2,1)}.sb-back{z-index:1;height:38%;width:auto;left:16%;top:14%;transform:translateY(-8%) rotate(-3deg);filter:drop-shadow(0 4px 10px rgba(0,0,0,.15)) sepia(1) saturate(2) hue-rotate(185deg) brightness(1.05);transition-delay:.05s}.sb-mid{z-index:2;height:45%;width:auto;right:17%;top:7%;left:auto;transform:translateY(-8%) rotate(3deg);filter:drop-shadow(0 4px 10px rgba(0,0,0,.15)) sepia(1) saturate(2) hue-rotate(185deg) brightness(1.05);transition-delay:.1s}.sb-front{z-index:3;width:50%;height:auto;left:50%;top:50%;transform:translate(-50%,-43%);filter:drop-shadow(0 8px 20px rgba(0,0,0,.25)) sepia(1) saturate(2) hue-rotate(185deg) brightness(1.05)}.card:hover .sb-back{transform:translate(-6px,calc(-8% - 4px)) rotate(-4deg) scale(.97);filter:drop-shadow(0 6px 14px rgba(0,0,0,.18)) sepia(1) saturate(2) hue-rotate(185deg) brightness(1.05) blur(.2px)}.card:hover .sb-mid{transform:translate(6px,calc(-8% - 4px)) rotate(4deg) scale(.97);filter:drop-shadow(0 6px 14px rgba(0,0,0,.18)) sepia(1) saturate(2) hue-rotate(185deg) brightness(1.05) blur(.2px)}.card:hover .sb-front{transform:translate(-50%,-40%) scale(1.06);filter:drop-shadow(0 12px 32px rgba(0,0,0,.35)) sepia(1) saturate(2) hue-rotate(185deg) brightness(1.07)}.pipe-display{position:relative;border:none;background:#fff;height:auto;aspect-ratio:16/10;cursor:pointer;display:flex;align-items:center;justify-content:center}.pipe-display .pipe-img{width:92%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25)) sepia(1) saturate(1.9) hue-rotate(180deg) brightness(.95);transition:transform 1.2s cubic-bezier(.4,0,.2,1),filter 1.2s cubic-bezier(.4,0,.2,1)}.card:hover .pipe-display .pipe-img{transform:scale(1.06);filter:drop-shadow(0 12px 32px rgba(0,0,0,.35)) sepia(1) saturate(1.9) hue-rotate(180deg) brightness(.95)}.card-schematic-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);pointer-events:none}.card-link{font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--accent-mid);display:inline-flex;align-items:center;gap:8px;margin-top:auto;transition:gap .2s,color .2s}.card-link:before{content:"\2192"}.card:hover .card-link{color:var(--accent);gap:12px}.cta-section{padding:0 0 96px}.fade-in.fade-ready{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.fade-in.visible{opacity:1;transform:translateY(0)}@media print{.fade-in.fade-ready{opacity:1;transform:none}}@media(max-width:1024px){.cards-section{padding:64px 0}.cs-header,.cs-insights{margin-bottom:48px}.cta-section{padding:0 0 64px}}@media(max-width:600px){.hero{height:210px}.hero-bottom-devices{opacity:.7}.hero-top-bg{opacity:.25}.cards-section{padding:48px 0}.cs-inner{width:min(1320px,100% - 32px)}.cs-title{font-size:28px;line-height:1.05}.cs-lead{font-size:17px;margin-top:10px}.cs-desc{font-size:15px;line-height:1.65}.cs-header{margin-bottom:32px;padding-bottom:24px;gap:20px}.cs-insight-num{font-size:56px;margin-bottom:8px}.cs-insight p{font-size:14px;line-height:1.6}.cs-insights{margin-bottom:32px;padding:24px 0;gap:20px}.card-inner{padding:20px 20px 24px;gap:16px}.card h3{font-size:16px}.card-link{font-size:12px;font-weight:600;color:var(--accent)}.stormbox-stack,.pipe-display{aspect-ratio:16/9}.cta-section{padding:0 0 48px}}
