:root{
  --bg:#020812;
  --bg-2:#04111f;
  --bg-3:#071a2d;
  --surface:rgba(7,25,43,.68);
  --surface-strong:#071a2e;
  --line:rgba(102,197,255,.13);
  --line-strong:rgba(83,207,255,.26);
  --text:#f5f9ff;
  --muted:#91a8bf;
  --navy:#061c42;
  --blue:#117dff;
  --cyan:#08d5e6;
  --green:#18efad;
  --max:1240px;
  --radius:28px;
  --shadow:0 30px 80px rgba(0,0,0,.36);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 0%,rgba(0,203,226,.12),transparent 26%),
    radial-gradient(circle at 89% 10%,rgba(17,125,255,.11),transparent 28%),
    linear-gradient(180deg,#020812 0%,#020914 38%,#030a14 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(94,179,237,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,179,237,.026) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 85%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.container{width:min(var(--max),calc(100% - 42px));margin-inline:auto}

.page-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--green),var(--cyan),var(--blue));
  box-shadow:0 0 18px rgba(8,213,230,.65);
}

.site-header{
  position:fixed;left:0;right:0;top:0;z-index:80;
  border-bottom:1px solid transparent;
  transition:.3s ease;
}
.site-header.scrolled{
  background:rgba(2,8,18,.82);
  backdrop-filter:blur(18px);
  border-bottom-color:rgba(104,199,255,.1);
  box-shadow:0 15px 40px rgba(0,0,0,.2);
}
.header-inner{
  min-height:82px;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(0,190,238,.18))}
.brand-name{display:flex;align-items:baseline;gap:6px;letter-spacing:.095em;font-size:16px}
.brand-name strong{font-weight:900;color:#fff}
.brand-name span{
  font-weight:850;
  background:linear-gradient(90deg,var(--green),var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{
  padding:10px 11px;border-radius:12px;color:#aebed0;font-size:13px;font-weight:680;
  transition:.2s ease;
}
.main-nav a:hover,.main-nav a.active{color:#fff;background:rgba(255,255,255,.045)}
.menu-toggle{
  display:none;width:44px;height:44px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.035);padding:0;cursor:pointer;
}
.menu-toggle span{width:19px;height:2px;background:#d8eaff;display:block;margin:4px auto;border-radius:3px}

.hero{
  min-height:100vh;
  padding:150px 0 78px;
  position:relative;
  overflow:hidden;
}
.hero-grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(57,159,235,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(57,159,235,.045) 1px,transparent 1px);
  background-size:84px 84px;
  transform:perspective(700px) rotateX(66deg) scale(1.45);
  transform-origin:center 77%;
  opacity:.45;
  mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 76%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(8px);pointer-events:none}
.hero-glow-a{width:620px;height:620px;left:-300px;top:20px;background:radial-gradient(circle,rgba(11,224,213,.15),transparent 66%)}
.hero-glow-b{width:760px;height:760px;right:-300px;top:60px;background:radial-gradient(circle,rgba(17,125,255,.18),transparent 66%)}
.hero-layout{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:72px;
  position:relative;z-index:2;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;border:1px solid rgba(41,217,223,.18);
  background:rgba(6,29,49,.52);color:#a7d8e5;
  font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.14em;
}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 15px var(--green)}
.hero h1{
  margin:22px 0 24px;max-width:820px;
  font-size:clamp(50px,6.8vw,88px);line-height:.95;letter-spacing:-.055em;
}
.hero h1 span{
  display:block;
  background:linear-gradient(90deg,#fff 0%,#bddcff 38%,#5fe7ee 72%,#38f1b4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{margin:0;max-width:760px;color:#9eb2c8;font-size:18px;line-height:1.72}
.hero-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.hero-pill-row span{
  padding:8px 11px;border-radius:999px;border:1px solid rgba(102,197,255,.1);
  background:rgba(255,255,255,.03);color:#9fbad1;font-size:11px;font-weight:750;letter-spacing:.04em;
}
.scroll-cue{
  margin-top:32px;display:inline-flex;align-items:center;gap:10px;color:#cfeaff;font-size:13px;font-weight:750;
}
.scroll-cue i{
  width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  border:1px solid rgba(76,203,255,.18);background:rgba(255,255,255,.03);color:var(--cyan);
  transition:.2s ease;
}
.scroll-cue:hover i{transform:translateY(3px);border-color:rgba(76,203,255,.35)}
.hero-visual{
  min-height:570px;position:relative;display:grid;place-items:center;
  isolation:isolate;
}
.logo-halo{
  position:absolute;width:390px;height:390px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,196,255,.18),rgba(0,62,144,.08) 45%,transparent 70%);
  filter:blur(14px);
}
.hero-symbol{
  width:min(79%,470px);position:relative;z-index:4;
  filter:drop-shadow(0 28px 58px rgba(0,0,0,.45)) drop-shadow(0 0 30px rgba(0,130,255,.18));
  animation:heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat{50%{transform:translateY(-12px)}}
.orbit{
  position:absolute;border-radius:50%;border:1px solid rgba(60,179,249,.13);
  animation:orbitSpin linear infinite;
}
.orbit::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 18px var(--cyan);
}
.orbit-1{width:530px;height:530px;border-style:dashed;animation-duration:28s}
.orbit-1::after{left:20%;top:7%}
.orbit-2{width:445px;height:445px;animation-duration:21s;animation-direction:reverse}
.orbit-2::after{right:13%;bottom:17%;background:var(--blue);box-shadow:0 0 18px var(--blue)}
.orbit-3{width:350px;height:350px;border-color:rgba(20,239,173,.1);animation-duration:16s}
.orbit-3::after{left:5%;bottom:29%;background:var(--green);box-shadow:0 0 18px var(--green)}
.orbit-4{width:610px;height:610px;border-color:rgba(60,179,249,.07);animation-duration:38s;animation-direction:reverse}
.orbit-4::after{right:18%;top:8%;width:5px;height:5px}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.visual-dot{position:absolute;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(8,213,230,.85)}
.dot-a{width:7px;height:7px;right:12%;top:22%}
.dot-b{width:5px;height:5px;left:9%;bottom:27%;background:var(--green)}
.dot-c{width:6px;height:6px;right:18%;bottom:11%;background:var(--blue)}

.hero-strip{
  margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  position:relative;z-index:3;
}
.strip-item{
  display:flex;align-items:flex-start;gap:14px;padding:17px 18px;
  border:1px solid rgba(96,196,255,.09);border-radius:18px;
  background:rgba(6,20,35,.46);backdrop-filter:blur(10px);
}
.strip-icon{
  flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(23,126,255,.14),rgba(20,239,173,.08));
  color:#51e2e6;border:1px solid rgba(64,199,255,.12);font-size:9px;font-weight:900;letter-spacing:.07em;
}
.strip-item b{display:block;font-size:13px;margin-bottom:4px}
.strip-item small{display:block;color:#7f98af;font-size:11px;line-height:1.45}

.section{padding:112px 0;position:relative}
.section-kicker{
  color:#48dbe6;font-size:11px;font-weight:900;text-transform:uppercase;
  letter-spacing:.18em;margin-bottom:14px;
}
.section-heading{max-width:850px}
.section-heading h2,.smart-copy h2,.intelligence-copy h2,.security-copy h2{
  margin:0 0 18px;font-size:clamp(36px,5vw,60px);line-height:1.04;letter-spacing:-.045em;
}
.section-heading p,.section-text{
  margin:0;color:var(--muted);font-size:16px;line-height:1.75;
}

.public-sector{
  background:linear-gradient(180deg,rgba(3,10,20,.1),rgba(5,16,29,.76),rgba(3,10,20,.12));
}
.public-grid{
  margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.public-card{
  min-height:245px;padding:26px;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(9,29,50,.72),rgba(5,16,29,.76));
  border:1px solid var(--line);transition:.3s ease;
}
.public-card::after{
  content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;top:-70px;
  background:radial-gradient(circle,rgba(0,204,230,.09),transparent 68%);transition:.3s ease;
}
.public-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 24px 60px rgba(0,0,0,.22)}
.public-card:hover::after{transform:scale(1.35)}
.public-card-featured{
  grid-column:span 2;
  background:
    radial-gradient(circle at 85% 20%,rgba(16,127,255,.15),transparent 34%),
    linear-gradient(140deg,rgba(7,32,53,.92),rgba(4,17,31,.9));
}
.card-label{
  display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(18,239,173,.08);
  border:1px solid rgba(18,239,173,.15);color:#61e9bd;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.public-card h3{font-size:21px;margin:20px 0 10px;letter-spacing:-.02em}
.public-card-featured h3{font-size:30px;max-width:560px}
.public-card p{margin:0;color:#91a7bc;line-height:1.65;font-size:14px}
.card-symbol{
  width:45px;height:45px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(18,125,255,.15),rgba(8,213,230,.08));
  border:1px solid rgba(83,203,255,.13);color:#a9e9f4;font-size:11px;font-weight:900;letter-spacing:.08em;
}
.micro-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}
.micro-list span{
  padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);
  color:#a8bfd2;font-size:11px;
}

.smart-city{overflow:hidden}
.smart-city::before{
  content:"";position:absolute;width:650px;height:650px;border-radius:50%;right:-320px;top:80px;
  background:radial-gradient(circle,rgba(13,126,255,.12),transparent 70%);
}
.smart-layout{display:grid;grid-template-columns:.98fr 1.02fr;gap:72px;align-items:center}
.smart-points{margin-top:30px;display:grid;gap:10px}
.smart-point{
  display:flex;gap:14px;padding:15px 16px;border-radius:16px;
  background:rgba(255,255,255,.022);border:1px solid rgba(100,190,255,.08);
}
.point-number{
  flex:0 0 33px;width:33px;height:33px;border-radius:10px;display:grid;place-items:center;
  color:#43e1dc;background:rgba(9,207,214,.08);border:1px solid rgba(38,213,221,.12);font-size:9px;font-weight:900;
}
.smart-point b{display:block;font-size:13px;margin-bottom:4px}
.smart-point small{display:block;color:#8099b0;font-size:12px;line-height:1.45}
.city-visual{
  min-height:560px;border-radius:34px;border:1px solid var(--line);
  background:
    radial-gradient(circle at center,rgba(0,134,255,.11),transparent 42%),
    linear-gradient(145deg,rgba(6,24,42,.86),rgba(3,12,22,.88));
  position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.city-visual::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(86,185,244,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(86,185,244,.045) 1px,transparent 1px);
  background-size:34px 34px;opacity:.48;
}
.city-center{
  width:155px;height:155px;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;background:rgba(3,16,30,.75);border:1px solid rgba(85,206,255,.18);z-index:4;
  box-shadow:0 0 50px rgba(0,119,255,.15);
}
.city-center img{width:84%}
.city-radar{position:absolute;border-radius:50%;border:1px solid rgba(64,185,255,.10);left:50%;top:50%;transform:translate(-50%,-50%)}
.radar-1{width:280px;height:280px}
.radar-2{width:390px;height:390px;border-style:dashed;animation:radar 26s linear infinite}
.radar-3{width:510px;height:510px;border-color:rgba(18,239,173,.07);animation:radar 33s linear infinite reverse}
@keyframes radar{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.city-node{
  position:absolute;z-index:5;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;background:rgba(5,22,38,.88);border:1px solid rgba(84,200,255,.14);
  color:#a9c7da;font-size:10px;font-weight:750;box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.city-node i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.node-1{left:11%;top:17%}.node-2{right:9%;top:22%}.node-3{left:7%;bottom:24%}.node-4{right:12%;bottom:18%}.node-5{left:42%;top:8%}.node-6{left:39%;bottom:8%}
.node-3 i,.node-6 i{background:var(--green);box-shadow:0 0 14px var(--green)}
.node-2 i,.node-4 i{background:var(--blue);box-shadow:0 0 14px var(--blue)}

.platform-section{
  background:linear-gradient(180deg,rgba(4,13,24,.18),rgba(3,11,21,.75),rgba(4,13,24,.18));
}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:42px}
.capability{
  min-height:240px;padding:25px;border-radius:22px;background:rgba(7,23,40,.65);
  border:1px solid var(--line);transition:.3s ease;overflow:hidden;position:relative;
}
.capability:hover{transform:translateY(-5px);border-color:rgba(83,207,255,.24);box-shadow:0 22px 55px rgba(0,0,0,.2)}
.capability-icon{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:21px;
  background:linear-gradient(145deg,rgba(17,125,255,.15),rgba(24,239,173,.08));border:1px solid rgba(72,204,255,.12);
}
.capability-icon svg{width:23px;height:23px;fill:none;stroke:#58dfe7;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.capability h3{font-size:18px;margin:0 0 10px}
.capability p{font-size:13px;line-height:1.65;color:#8da5bb;margin:0}

.intelligence-layout{display:grid;grid-template-columns:1.03fr .97fr;gap:70px;align-items:center}
.intelligence-console{
  border-radius:30px;padding:17px;background:rgba(4,16,29,.84);border:1px solid var(--line);box-shadow:var(--shadow);
}
.console-header{display:flex;align-items:center;justify-content:space-between;padding:7px 7px 17px}
.console-title{display:flex;align-items:center;gap:9px;color:#b7d5e5;font-size:10px;letter-spacing:.12em}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.console-status{font-size:9px;color:#63849c;letter-spacing:.14em}
.console-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.camera-tile,.event-panel,.map-panel{
  min-height:160px;border-radius:18px;border:1px solid rgba(88,183,241,.08);background:#07192a;position:relative;overflow:hidden;
}
.camera-tile{
  background:
    linear-gradient(140deg,rgba(8,29,49,.8),rgba(8,45,68,.6)),
    linear-gradient(35deg,transparent 48%,rgba(30,187,210,.11) 49% 51%,transparent 52%);
}
.camera-tile::after{
  content:"";position:absolute;left:16%;right:16%;bottom:20%;height:38%;border:1px solid rgba(68,215,222,.16);
  border-top:none;transform:skewX(-12deg);opacity:.75;
}
.camera-tile span{position:absolute;left:12px;bottom:11px;color:#7997ae;font-size:9px;letter-spacing:.12em}
.camera-tile i{position:absolute;right:10px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green)}
.event-panel{padding:14px;display:grid;align-content:center;gap:9px}
.event-line{display:grid;grid-template-columns:52px 1fr 8px;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.035)}
.event-line span{font-size:8px;color:#4fdbe2;font-weight:900;letter-spacing:.1em}
.event-line b{font-size:9px;color:#a3b9cb;font-weight:650}
.event-line i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.map-panel{background:linear-gradient(145deg,#071728,#0a2135)}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(89,185,244,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(89,185,244,.07) 1px,transparent 1px);background-size:25px 25px}
.map-pin{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(8,213,230,.08),0 0 16px rgba(8,213,230,.8)}
.pin-a{left:28%;top:35%}.pin-b{right:24%;top:24%;background:var(--blue)}.pin-c{left:55%;bottom:24%;background:var(--green)}
.analytics-list{margin-top:28px;display:grid;gap:8px}
.analytic-row{
  display:grid;grid-template-columns:33px 110px 1fr;align-items:center;gap:10px;padding:12px 14px;
  border-radius:13px;border:1px solid rgba(93,187,245,.07);background:rgba(255,255,255,.02);
}
.analytic-row span{font-size:9px;color:#40d9e3;font-weight:900}
.analytic-row b{font-size:12px}
.analytic-row small{font-size:11px;color:#829bb1}

.architecture{background:linear-gradient(180deg,rgba(4,13,24,.1),rgba(5,16,29,.7),rgba(4,13,24,.1))}
.architecture-flow{
  margin-top:44px;display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr 26px 1fr 26px 1fr;align-items:center;gap:7px;
}
.flow-card{
  min-height:190px;padding:18px 13px;border-radius:19px;border:1px solid var(--line);
  background:rgba(6,22,38,.68);text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.flow-card>span{position:absolute;left:12px;top:11px;font-size:8px;color:#526f86;font-weight:900}
.flow-icon{
  width:45px;height:45px;border-radius:13px;display:grid;place-items:center;margin-bottom:13px;
  border:1px solid rgba(71,197,255,.13);background:rgba(17,125,255,.08);color:#58dfe5;font-size:9px;font-weight:900;letter-spacing:.08em;
}
.flow-card img{width:57px;margin-bottom:8px;filter:drop-shadow(0 0 16px rgba(0,151,255,.18))}
.flow-card b{font-size:12px;margin-bottom:7px}
.flow-card small{font-size:10px;line-height:1.45;color:#748da4}
.flow-card-brand{background:linear-gradient(160deg,rgba(7,35,58,.9),rgba(4,19,34,.82));border-color:rgba(70,206,255,.18)}
.flow-arrow{text-align:center;color:#2c799d;font-size:18px}
.architecture-details{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.detail-card{
  padding:22px;border-radius:20px;border:1px solid rgba(94,188,246,.09);background:rgba(255,255,255,.018);
}
.detail-number{font-size:9px;color:#48dae5;font-weight:900;letter-spacing:.14em;margin-bottom:22px}
.detail-card h3{font-size:16px;margin:0 0 9px}
.detail-card p{font-size:12px;line-height:1.6;color:#829ab0;margin:0}

.security-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.security-items{margin-top:27px;display:grid;gap:9px}
.security-item{
  display:flex;gap:13px;padding:14px 15px;border-radius:14px;border:1px solid rgba(87,187,245,.07);background:rgba(255,255,255,.018);
}
.security-item>i{
  flex:0 0 17px;width:17px;height:17px;border-radius:50%;margin-top:1px;
  border:1px solid rgba(19,239,173,.24);background:radial-gradient(circle,var(--green) 0 2px,transparent 3px);
}
.security-item b{display:block;font-size:12px;margin-bottom:4px}
.security-item small{display:block;color:#8199ae;font-size:11px;line-height:1.45}
.security-visual{
  min-height:520px;border-radius:34px;border:1px solid var(--line);position:relative;overflow:hidden;
  display:grid;place-items:center;background:
    radial-gradient(circle at center,rgba(11,139,255,.15),transparent 43%),
    linear-gradient(145deg,rgba(5,23,41,.84),rgba(3,12,22,.92));
}
.security-visual::before{
  content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(97,190,247,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(97,190,247,.035) 1px,transparent 1px);background-size:33px 33px;
}
.shield-ring{position:absolute;border-radius:50%;border:1px solid rgba(64,193,250,.11)}
.shield-ring-a{width:390px;height:390px}
.shield-ring-b{width:300px;height:300px;border-style:dashed;animation:orbitSpin 24s linear infinite}
.shield-core{
  width:220px;height:220px;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:rgba(3,18,33,.75);border:1px solid rgba(78,204,255,.16);box-shadow:0 0 55px rgba(0,122,255,.13);
}
.shield-core img{width:86%}
.shield-caption{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);text-align:center;z-index:3;width:80%;
}
.shield-caption strong{display:block;font-size:10px;letter-spacing:.22em;color:#6adddf;margin-bottom:6px}
.shield-caption span{display:block;color:#6f8da4;font-size:8px;letter-spacing:.12em}

.vision{padding-top:30px}
.vision-box{
  position:relative;overflow:hidden;border-radius:34px;padding:68px;
  border:1px solid rgba(80,201,255,.14);
  background:
    radial-gradient(circle at 88% 8%,rgba(20,239,173,.11),transparent 26%),
    radial-gradient(circle at 12% 92%,rgba(17,125,255,.15),transparent 32%),
    linear-gradient(135deg,rgba(6,31,51,.95),rgba(3,14,25,.96));
  box-shadow:var(--shadow);
}
.vision-watermark{
  position:absolute;right:-18px;bottom:-20px;font-size:clamp(90px,16vw,210px);font-weight:900;
  letter-spacing:-.07em;color:rgba(80,189,255,.022);line-height:.8;pointer-events:none;
}
.vision-box h2{position:relative;z-index:2;max-width:900px;margin:0 0 18px;font-size:clamp(38px,5vw,62px);line-height:1.04;letter-spacing:-.045em}
.vision-box p{position:relative;z-index:2;max-width:780px;margin:0;color:#9bb2c7;font-size:16px;line-height:1.7}
.vision-line{position:relative;z-index:2;width:100%;height:1px;background:linear-gradient(90deg,rgba(72,214,229,.38),rgba(72,214,229,.04));margin:36px 0 22px}
.vision-tags{position:relative;z-index:2;display:flex;align-items:center;gap:13px;color:#c5dced;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.vision-tags i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 13px var(--cyan)}
.vision-tags i:last-of-type{background:var(--blue);box-shadow:0 0 13px var(--blue)}

.site-footer{padding:38px 0 46px;border-top:1px solid rgba(93,188,246,.08)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{width:44px;height:44px;object-fit:contain}
.footer-brand b{display:block;font-size:13px;letter-spacing:.12em}
.footer-brand span{display:block;margin-top:3px;color:#6e879d;font-size:10px;letter-spacing:.05em}
.footer-message{color:#667f94;font-size:11px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

@media (max-width:1100px){
  .hero-layout,.smart-layout,.intelligence-layout,.security-layout{grid-template-columns:1fr}
  .hero-layout{gap:24px}
  .hero-copy{max-width:850px}
  .hero-visual{min-height:500px}
  .public-grid,.capability-grid{grid-template-columns:repeat(2,1fr)}
  .public-card-featured{grid-column:span 2}
  .architecture-flow{grid-template-columns:repeat(3,1fr);gap:12px}
  .flow-arrow{display:none}
  .architecture-details{grid-template-columns:repeat(2,1fr)}
  .city-visual,.security-visual{min-height:500px}
}

@media (max-width:920px){
  .menu-toggle{display:block}
  .main-nav{
    display:none;position:absolute;left:20px;right:20px;top:72px;flex-direction:column;align-items:stretch;
    padding:12px;background:rgba(2,10,20,.97);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(18px);
    box-shadow:0 20px 50px rgba(0,0,0,.28);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 13px}
  .hero-strip{grid-template-columns:1fr}
}

@media (max-width:700px){
  .container{width:min(var(--max),calc(100% - 26px))}
  .header-inner{min-height:70px}
  .brand img{width:40px;height:40px}
  .brand-name{font-size:14px}
  .hero{padding-top:112px}
  .hero h1{font-size:clamp(42px,14vw,64px)}
  .hero-lead{font-size:16px}
  .hero-visual{min-height:390px}
  .hero-symbol{width:min(82%,340px)}
  .orbit-1{width:365px;height:365px}.orbit-2{width:310px;height:310px}.orbit-3{width:250px;height:250px}.orbit-4{width:405px;height:405px}
  .section{padding:86px 0}
  .public-grid,.capability-grid,.architecture-details{grid-template-columns:1fr}
  .public-card-featured{grid-column:auto}
  .public-card-featured h3{font-size:24px}
  .city-visual,.security-visual{min-height:390px}
  .city-center{width:120px;height:120px}
  .radar-1{width:220px;height:220px}.radar-2{width:300px;height:300px}.radar-3{width:380px;height:380px}
  .city-node{font-size:8px;padding:7px 8px}
  .node-1{left:4%;top:16%}.node-2{right:3%;top:22%}.node-3{left:3%;bottom:23%}.node-4{right:4%;bottom:18%}.node-5{left:36%;top:7%}.node-6{left:35%;bottom:7%}
  .console-grid{grid-template-columns:1fr}
  .camera-tile,.event-panel,.map-panel{min-height:145px}
  .analytic-row{grid-template-columns:28px 94px 1fr}
  .architecture-flow{grid-template-columns:repeat(2,1fr)}
  .shield-core{width:175px;height:175px}
  .shield-ring-a{width:300px;height:300px}.shield-ring-b{width:235px;height:235px}
  .vision-box{padding:42px 25px}
  .vision-tags{flex-wrap:wrap;gap:10px}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:480px){
  .architecture-flow{grid-template-columns:1fr}
  .flow-card{min-height:165px}
  .hero-pill-row span{font-size:10px}
  .city-node span{display:none}
  .city-node{width:24px;height:24px;padding:0;display:grid;place-items:center}
  .city-node i{width:6px;height:6px}
}