:root{--rw-navy:#0B2A5B;--rw-blue:#1769D2;--rw-cyan:#00AEEF;--rw-violet:#6956D8;--rw-light:#F4F7FB;--rw-line:#DCE4EE;--rw-text:#242424;--rw-muted:#667085;
}
.snn-page{color:var(--rw-text);overflow:hidden}
.snn-section{padding:108px 0}
.snn-section.bg-light{background:var(--rw-light)}
.snn-section.dark{background:linear-gradient(135deg,#06152D 0%,#0A2855 56%,#173D77 100%);color:#fff}
.snn-title{margin-bottom:50px}
.snn-title .kicker{margin-bottom:12px;font-size:16px;font-weight:800;color:var(--rw-blue);letter-spacing:.08em}
.snn-section.dark .snn-title .kicker{color:#74D6FF}
.snn-title h2{margin:0 0 18px;font-size:44px;line-height:1.28;font-weight:800;color:var(--rw-navy)}
.snn-section.dark .snn-title h2{color:#fff}
.snn-title p{max-width:900px;font-size:18px;line-height:1.8;color:#475467}
.snn-section.dark .snn-title p{color:rgba(255,255,255,.78)}


.snn-overview{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center}
.snn-overview .copy h2{font-size:46px;line-height:1.3;color:var(--rw-navy);margin:0 0 26px;font-weight:800}
.snn-overview .copy p{font-size:18px;line-height:1.9;color:#475467;margin:0 0 18px}
.snn-overview .note{margin-top:24px;padding:18px 20px;border-left:4px solid var(--rw-blue);background:#F2F7FD;color:#435269;line-height:1.72}
.snn-hero-visual{min-height:470px;padding:34px;border-radius:24px;background:linear-gradient(145deg,#071A38 0%,#0D3266 58%,#162D5A 100%);box-shadow:0 20px 55px rgba(11,42,91,.16);position:relative;overflow:hidden}
.snn-hero-visual:before{content:"";position:absolute;inset:auto -80px -80px auto;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(0,174,239,.28),rgba(0,174,239,0) 68%)}
.spike-raster{height:150px;display:grid;grid-template-columns:repeat(24,1fr);align-items:end;gap:7px;margin-bottom:36px}
.spike-raster i{display:block;width:3px;margin:0 auto;border-radius:3px;background:linear-gradient(180deg,#7DE5FF,#4386FF 55%,#8C5CFF);box-shadow:0 0 10px rgba(89,197,255,.45)}
.spike-raster i:nth-child(3n){height:92px}.spike-raster i:nth-child(3n+1){height:44px}.spike-raster i:nth-child(3n+2){height:125px}
.spike-network{display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr;align-items:center}
.layer{display:flex;flex-direction:column;align-items:center;gap:14px}
.layer .node{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#B8F1FF 0%,#1688E8 45%,#164984 100%);box-shadow:0 0 18px rgba(70,185,255,.35)}
.layer.out .node{background:radial-gradient(circle at 35% 35%,#E0D8FF 0%,#7A62DB 48%,#44328C 100%)}
.link-arrow{text-align:center;color:#84D9FF;font-size:29px;font-weight:800}
.visual-label{text-align:center;color:rgba(255,255,255,.88);font-size:14px;font-weight:700;margin-top:12px}


.neuron-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:58px;align-items:center}
.neuron-panel{padding:34px;border-radius:22px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.18)}
.neuron-panel svg{width:100%;height:auto;display:block}
.neuron-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.neuron-step{padding:25px 23px;border-radius:18px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);min-height:160px}
.neuron-step .n{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#1688E8;color:#fff;font-size:13px;font-weight:800;margin-bottom:14px}
.neuron-step h3{font-size:20px;color:#fff;margin:0 0 9px;font-weight:800}
.neuron-step p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.70);margin:0}


.encoding-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.encoding-card{padding:30px 24px;border-radius:18px;background:#fff;border:1px solid var(--rw-line);min-height:262px}
.encoding-card .tag{font-size:12px;font-weight:800;color:var(--rw-blue);letter-spacing:.06em;margin-bottom:14px}
.encoding-card h3{font-size:21px;color:var(--rw-navy);margin:0 0 10px;font-weight:800}
.encoding-card p{font-size:15px;line-height:1.72;color:#667085;margin:0}
.encoding-card code{display:block;margin-top:18px;padding:12px;border-radius:10px;background:#F4F7FB;color:#155AA4;font-size:13px;line-height:1.55}


.temporal-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
.temporal-flow .step{position:relative;padding:27px 14px 24px;border-radius:16px;background:#fff;border:1px solid var(--rw-line);text-align:center}
.temporal-flow .step:not(:last-child):after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:800;color:var(--rw-blue);z-index:2}
.temporal-flow .n{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:#EAF3FD;color:#1769D2;font-size:12px;font-weight:800;margin-bottom:13px}
.temporal-flow h3{font-size:17px;line-height:1.35;color:var(--rw-navy);margin:0 0 8px;font-weight:800}
.temporal-flow p{font-size:13px;line-height:1.58;color:#667085;margin:0}


.intel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.intel-card{padding:30px 24px;border-radius:18px;background:#fff;border:1px solid var(--rw-line)}
.intel-card .n{font-size:13px;font-weight:800;color:var(--rw-blue);margin-bottom:12px}
.intel-card h3{font-size:20px;color:var(--rw-navy);margin:0 0 10px;font-weight:800}
.intel-card p{font-size:14px;line-height:1.7;color:#667085;margin:0}


.learning-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.learning-card{position:relative;padding:34px 30px;border-radius:20px;background:#fff;border:1px solid var(--rw-line);overflow:hidden}
.learning-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--rw-blue),var(--rw-violet))}
.learning-card .tag{font-size:13px;font-weight:800;color:var(--rw-blue);letter-spacing:.05em;margin-bottom:15px}
.learning-card h3{font-size:24px;color:var(--rw-navy);margin:0 0 11px;font-weight:800}
.learning-card p{font-size:15px;line-height:1.75;color:#667085;margin:0}
.learning-card ul{margin:18px 0 0;padding-left:18px;color:#536276}
.learning-card li{margin:8px 0;line-height:1.6}


.eval-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.eval-card{padding:30px 24px;border-radius:18px;background:#fff;border:1px solid var(--rw-line);text-align:center}
.eval-card .value{font-size:28px;line-height:1.1;font-weight:800;color:var(--rw-navy);margin-bottom:10px}
.eval-card .name{font-size:16px;font-weight:800;color:#344054;margin-bottom:8px}
.eval-card .desc{font-size:13px;line-height:1.6;color:#7A8797}


.boundary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.boundary-card{padding:30px 26px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.boundary-card .tag{font-size:12px;font-weight:800;color:#75D6FF;margin-bottom:11px}
.boundary-card h3{font-size:21px;color:#fff;margin:0 0 9px;font-weight:800}
.boundary-card p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.72);margin:0}


.snn-cta{padding:72px 0;background:linear-gradient(135deg,#071A35 0%,#0B2A5B 62%,#193B75 100%);color:#fff}
.snn-cta .inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.snn-cta h2{margin:0 0 12px;font-size:36px;color:#fff;font-weight:800}
.snn-cta p{margin:0;font-size:17px;line-height:1.7;color:rgba(255,255,255,.78)}
.snn-cta .buttons{display:flex;gap:12px;flex-wrap:wrap}
.snn-cta .btn{display:inline-flex;min-width:160px;height:52px;align-items:center;justify-content:center;padding:0 24px;border-radius:10px;text-decoration:none;font-weight:800}
.snn-cta .btn.white{background:#fff;color:var(--rw-navy)}
.snn-cta .btn.line{border:1px solid rgba(255,255,255,.45);color:#fff}

@media(max-width:1100px){.temporal-flow{grid-template-columns:repeat(3,1fr)}.temporal-flow .step:after{display:none}.encoding-grid,.intel-grid,.eval-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){.snn-overview,.neuron-layout{grid-template-columns:1fr;gap:36px}.learning-wrap{grid-template-columns:1fr}
}
@media(max-width:768px){.snn-section{padding:72px 0}.snn-title h2,.snn-overview .copy h2{font-size:32px}.neuron-steps,.encoding-grid,.temporal-flow,.intel-grid,.eval-grid,.boundary{grid-template-columns:1fr}.snn-cta .inner{flex-direction:column;align-items:flex-start}.snn-cta h2{font-size:30px}
}