@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #06080b;
  --bg-soft: #0a0e13;
  --surface: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.07);
  --text: #f6f7f8;
  --muted: #9ca6b1;
  --cyan: #65f5df;
  --cyan-2: #43bfc4;
  --red: #ff4d5f;
  --amber: #ffb454;
  --green: #62f7a6;
  --max: 1480px;
  --radius: 28px;
  --radius-sm: 16px;
  --shadow: 0 32px 90px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(64, 197, 203, .11), transparent 32%),
    linear-gradient(180deg, #06080b 0%, #070a0f 44%, #05070a 100%);
  color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--cyan); color: #02100e; }

.site-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
}

.container { width: min(calc(100% - 64px), var(--max)); margin-inline: auto; }
.mono { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { font: 500 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.kicker { font: 500 13px/1.4 'IBM Plex Mono', monospace; color: var(--muted); letter-spacing: .11em; text-transform: uppercase; }
.display { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -.055em; line-height: .92; }
.section { padding: 150px 0; position: relative; }
.section-tight { padding: 90px 0; }
.section-title { font: 500 clamp(48px, 7vw, 112px)/.94 'Space Grotesk', sans-serif; letter-spacing: -.055em; margin: 18px 0 0; max-width: 1100px; }
.section-copy { max-width: 700px; color: var(--muted); font-size: clamp(18px, 2vw, 24px); line-height: 1.55; }
.section-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 72px; align-items: end; margin-bottom: 72px; }

/* header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled { background: rgba(6,8,11,.72); backdrop-filter: blur(18px); border-color: var(--line-soft); }
.nav-wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: flex; align-items: center; gap: 14px; font-family: 'Space Grotesk'; font-weight: 600; letter-spacing: -.02em; font-size: 20px; }
.brand-mark { width: 31px; height: 31px; position: relative; display: inline-grid; place-items: center; }
.brand-mark:before, .brand-mark:after { content: ''; position: absolute; inset: 3px; border: 1px solid var(--cyan); transform: rotate(45deg); }
.brand-mark:after { inset: 9px; border-color: rgba(101,245,223,.55); }
.desktop-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; }
.desktop-nav a { color: #c2cad1; transition: color .2s ease; }
.desktop-nav a:hover { color: #fff; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 13px 19px; background: rgba(255,255,255,.03); }
.nav-cta:after { content: '↗'; color: var(--cyan); }
.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.03); position: relative; }
.menu-toggle:before,.menu-toggle:after { content:''; position:absolute; left:13px; right:13px; height:1px; background:#fff; transition:.25s; }
.menu-toggle:before { top:18px; }.menu-toggle:after { top:26px; }
.menu-open .menu-toggle:before { top:22px; transform: rotate(45deg); }
.menu-open .menu-toggle:after { top:22px; transform: rotate(-45deg); }
.mobile-menu { display: none; }

/* hero */
.hero { min-height: 100svh; display: flex; align-items: flex-end; padding: 190px 0 72px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
#network-canvas { position: absolute; inset: 0; width:100%; height:100%; opacity:.82; }
.hero-grid-overlay { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.034) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, transparent 0, black 32%, black 85%, transparent); }
.hero-glow { position:absolute; width:900px; height:900px; left:48%; top:44%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(36,213,195,.11),rgba(14,45,48,.04) 45%,transparent 70%); filter:blur(10px); }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-topline { display:flex; justify-content:space-between; align-items:center; padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:36px; color:var(--muted); font-size:12px; }
.live-dot { display:inline-flex; align-items:center; gap:9px; }
.live-dot:before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 6px rgba(98,247,166,.08); }
.hero h1 { font: 500 clamp(78px, 13.3vw, 220px)/.78 'Space Grotesk', sans-serif; letter-spacing: -.075em; margin: 0; text-transform: uppercase; }
.hero h1 span { display:block; }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 1px rgba(246,247,248,.44); }
.hero-bottom { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:end; margin-top:50px; }
.hero-copy { max-width: 620px; font-size: clamp(19px, 2vw, 28px); color:#c8d0d6; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:13px; border-radius:999px; padding:16px 23px; min-height:56px; font-size:14px; font-weight:600; border:1px solid var(--line); transition:transform .22s ease, background .22s ease, border-color .22s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background:var(--cyan); color:#03100f; border-color:var(--cyan); }
.btn-dark { background:rgba(255,255,255,.04); }
.btn .arrow { font-size:18px; }
.hero-side-tag { position:absolute; right:16px; top:46%; z-index:4; writing-mode:vertical-rl; font:500 10px/1 'IBM Plex Mono'; color:#77818b; letter-spacing:.18em; text-transform:uppercase; }

/* ticker */
.ticker { border-bottom:1px solid var(--line-soft); overflow:hidden; background:#080b0f; }
.ticker-track { display:flex; width:max-content; animation:ticker 32s linear infinite; }
.ticker-item { padding:20px 32px; display:flex; align-items:center; gap:32px; font:500 12px 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.13em; color:#9ba5ad; }
.ticker-item:after { content:'◆'; color:var(--cyan); font-size:8px; }
@keyframes ticker { to { transform:translateX(-50%); } }

/* story */
.statement { min-height: 95vh; display:flex; align-items:center; border-bottom:1px solid var(--line-soft); overflow:hidden; }
.statement-text { font: 500 clamp(54px, 8.6vw, 140px)/.92 'Space Grotesk'; letter-spacing:-.065em; max-width:1300px; margin:0; }
.statement-text .dim { color:#30373e; transition:color .8s ease; }
.statement.in-view .statement-text .dim { color:#cfd4d8; }

/* capability cards */
.cap-grid { display:grid; grid-template-columns: repeat(12,1fr); gap:18px; }
.cap-card { min-height:430px; padding:32px; border:1px solid var(--line-soft); border-radius:var(--radius); position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)); transition:transform .3s ease,border-color .3s ease,background .3s ease; }
.cap-card:hover { transform:translateY(-6px); border-color:rgba(101,245,223,.28); background:linear-gradient(180deg,rgba(101,245,223,.045),rgba(255,255,255,.018)); }
.cap-card:nth-child(1), .cap-card:nth-child(4) { grid-column:span 7; }
.cap-card:nth-child(2), .cap-card:nth-child(3) { grid-column:span 5; }
.cap-num { color:var(--cyan); font:500 11px 'IBM Plex Mono'; letter-spacing:.13em; }
.cap-card h3 { font:500 clamp(30px,3vw,48px)/1 'Space Grotesk'; letter-spacing:-.045em; margin:70px 0 16px; max-width:520px; }
.cap-card p { color:var(--muted); max-width:520px; font-size:16px; }
.cap-link { position:absolute; left:32px; bottom:30px; font:500 12px 'IBM Plex Mono'; letter-spacing:.1em; text-transform:uppercase; display:flex; gap:12px; align-items:center; }
.cap-link span { color:var(--cyan); }
.card-visual { position:absolute; right:-10%; bottom:-15%; width:50%; aspect-ratio:1; opacity:.75; }
.rings { border:1px solid rgba(101,245,223,.2); border-radius:50%; position:absolute; inset:0; animation:spin 18s linear infinite; }
.rings:before,.rings:after { content:''; position:absolute; border:1px solid rgba(101,245,223,.18); border-radius:50%; }
.rings:before { inset:13%; }.rings:after { inset:30%; }
.rings i { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 20px var(--cyan); top:16%; left:72%; }
@keyframes spin { to { transform:rotate(360deg); } }

/* metrics */
.metrics { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.metric { padding:70px 34px; border-right:1px solid var(--line-soft); }
.metric:last-child { border-right:0; }
.metric-value { font:500 clamp(58px,6vw,96px)/1 'Space Grotesk'; letter-spacing:-.06em; }
.metric-value span { color:var(--cyan); }
.metric-label { color:var(--muted); margin-top:16px; max-width:230px; }

/* terminal / attack path */
.attack-stage { position:relative; min-height:760px; border:1px solid var(--line-soft); border-radius:34px; overflow:hidden; background:radial-gradient(circle at 65% 50%,rgba(64,197,203,.09),transparent 26%),#070a0e; }
.attack-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:50px 50px; }
.terminal { position:absolute; left:5%; top:12%; width:min(600px,49%); background:rgba(5,8,11,.88); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.terminal-head { height:48px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; padding:0 18px; font:500 10px 'IBM Plex Mono'; color:#8d97a0; letter-spacing:.1em; }
.terminal-dots { display:flex; gap:7px; }.terminal-dots i { width:7px;height:7px;border-radius:50%;background:#444b51; }
.terminal-body { padding:24px; min-height:410px; font:400 13px/1.75 'IBM Plex Mono'; color:#9aa5ad; white-space:pre-line; }
.terminal-body .ok { color:var(--green); }.terminal-body .warn { color:var(--amber); }.terminal-body .bad { color:var(--red); }.terminal-body .hi { color:#fff; }
.attack-map { position:absolute; width:44%; right:4%; top:11%; bottom:10%; }
.node { position:absolute; width:82px; height:82px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:#0c1015; display:grid; place-items:center; font:500 10px 'IBM Plex Mono'; color:#bac3ca; z-index:2; box-shadow:0 0 0 12px rgba(255,255,255,.015); }
.node.hot { border-color:rgba(255,77,95,.55); box-shadow:0 0 0 12px rgba(255,77,95,.04),0 0 50px rgba(255,77,95,.11); color:#fff; }
.node.secure { border-color:rgba(101,245,223,.45); }
.n1 { left:1%; top:45%; }.n2 { left:35%; top:10%; }.n3 { left:39%; bottom:8%; }.n4 { right:0; top:38%; }
.path { position:absolute; height:1px; background:linear-gradient(90deg,rgba(101,245,223,.1),rgba(101,245,223,.78),rgba(101,245,223,.1)); transform-origin:left center; z-index:1; overflow:visible; }
.p1 { left:13%; top:51%; width:42%; transform:rotate(-36deg); }.p2 { left:13%; top:54%; width:44%; transform:rotate(31deg); }.p3 { left:46%; top:21%; width:49%; transform:rotate(26deg); }.p4 { left:48%; bottom:19%; width:49%; transform:rotate(-27deg); }
.path:after { content:''; position:absolute; width:7px;height:7px;border-radius:50%;background:var(--cyan); top:-3px; left:0; box-shadow:0 0 18px var(--cyan); animation:travel 2.8s linear infinite; }
.p3:after { background:var(--red); box-shadow:0 0 18px var(--red); animation-delay:1s; }
@keyframes travel { to { left:100%; } }
.attack-caption { position:absolute; right:5%; bottom:4%; font:500 10px 'IBM Plex Mono'; color:#69737c; text-transform:uppercase; letter-spacing:.13em; }

/* use cases */
.service-list { border-top:1px solid var(--line-soft); }
.service-row { display:grid; grid-template-columns:90px 1fr 1fr 52px; gap:24px; align-items:center; padding:35px 10px; border-bottom:1px solid var(--line-soft); transition:padding .25s ease,background .25s ease; }
.service-row:hover { padding-left:24px; padding-right:24px; background:rgba(255,255,255,.018); }
.service-row .idx { font:500 11px 'IBM Plex Mono'; color:#69737c; }
.service-row h3 { margin:0; font:500 clamp(26px,3vw,46px)/1 'Space Grotesk'; letter-spacing:-.04em; }
.service-row p { margin:0; color:var(--muted); max-width:550px; }
.service-row .plus { width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--cyan); }

/* industries */
.industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.industry { min-height:310px; border:1px solid var(--line-soft); padding:28px; border-radius:var(--radius-sm); display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.02); position:relative; overflow:hidden; }
.industry:after { content:''; position:absolute; width:190px;height:190px; border:1px solid rgba(101,245,223,.13); border-radius:50%; right:-85px; bottom:-95px; box-shadow:0 0 0 36px rgba(101,245,223,.025),0 0 0 75px rgba(101,245,223,.015); transition:transform .5s ease; }
.industry:hover:after { transform:scale(1.2); }
.industry .icon { font:500 11px 'IBM Plex Mono'; color:var(--cyan); }
.industry h3 { margin:0; font:500 31px/1.05 'Space Grotesk'; letter-spacing:-.04em; max-width:250px; }

/* process */
.process { counter-reset:step; }
.process-row { display:grid; grid-template-columns:90px .9fr 1.1fr; gap:40px; padding:42px 0; border-top:1px solid var(--line-soft); }
.process-row:before { counter-increment:step; content:'0' counter(step); font:500 12px 'IBM Plex Mono'; color:var(--cyan); }
.process-row h3 { font:500 34px/1.05 'Space Grotesk'; letter-spacing:-.04em; margin:0; }
.process-row p { color:var(--muted); margin:0; max-width:650px; }

/* CTA */
.cta-panel { border-radius:36px; border:1px solid rgba(101,245,223,.18); background:radial-gradient(circle at 75% 30%,rgba(101,245,223,.12),transparent 29%),linear-gradient(135deg,#0a0f13,#06080b); padding:80px; position:relative; overflow:hidden; min-height:480px; display:flex; flex-direction:column; justify-content:space-between; }
.cta-panel h2 { font:500 clamp(58px,8vw,124px)/.88 'Space Grotesk'; letter-spacing:-.065em; margin:0; max-width:1000px; }
.cta-bottom { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.cta-bottom p { max-width:520px; color:var(--muted); font-size:18px; }

/* footer */
.footer { padding:82px 0 30px; border-top:1px solid var(--line-soft); }
.footer-grid { display:grid; grid-template-columns:1.2fr .7fr .7fr .8fr; gap:50px; padding-bottom:70px; }
.footer-brand p { max-width:390px; color:var(--muted); }
.footer h4 { font:500 11px 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.14em; color:#6f7981; margin:4px 0 20px; }
.footer-links { display:grid; gap:11px; font-size:14px; color:#c1c8ce; }
.footer-links a:hover { color:var(--cyan); }
.footer-bottom { border-top:1px solid var(--line-soft); padding-top:24px; display:flex; justify-content:space-between; gap:30px; color:#69737c; font-size:12px; }
.footer-credit a { color:#aab3ba; border-bottom:1px solid rgba(170,179,186,.3); }
.footer-credit a:hover { color:var(--cyan); border-color:var(--cyan); }

/* inner pages */
.page-hero { padding:200px 0 95px; border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden; min-height:72vh; display:flex; align-items:flex-end; }
.page-hero:before { content:''; position:absolute; width:720px;height:720px;border-radius:50%;right:-170px;top:-280px;border:1px solid rgba(101,245,223,.09);box-shadow:0 0 0 90px rgba(101,245,223,.018),0 0 0 180px rgba(101,245,223,.009); }
.page-hero h1 { font:500 clamp(70px,10vw,160px)/.82 'Space Grotesk'; letter-spacing:-.07em; margin:24px 0 35px; max-width:1250px; }
.page-hero p { color:#bdc6ce; font-size:clamp(19px,2vw,27px); max-width:780px; }
.page-meta { display:flex; gap:30px; margin-top:45px; color:#78828b; font:500 11px 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.11em; flex-wrap:wrap; }
.two-col { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; }
.rich-copy h2 { font:500 clamp(42px,5vw,78px)/.98 'Space Grotesk'; letter-spacing:-.05em; margin:0 0 30px; }
.rich-copy h3 { font:500 30px 'Space Grotesk'; letter-spacing:-.035em; margin:42px 0 12px; }
.rich-copy p,.rich-copy li { color:var(--muted); font-size:17px; }
.rich-copy ul { padding-left:20px; }
.sticky-label { position:sticky; top:130px; height:max-content; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feature-box { border:1px solid var(--line-soft); border-radius:18px; padding:30px; min-height:240px; background:rgba(255,255,255,.018); }
.feature-box .num { font:500 10px 'IBM Plex Mono'; color:var(--cyan); letter-spacing:.12em; }
.feature-box h3 { font:500 26px 'Space Grotesk'; margin:45px 0 12px; letter-spacing:-.035em; }
.feature-box p { color:var(--muted); font-size:15px; }

/* forms */
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; }
.contact-card { border:1px solid var(--line-soft); border-radius:26px; padding:34px; background:rgba(255,255,255,.02); }
.contact-details { display:grid; gap:25px; margin-top:45px; }
.contact-detail small { display:block; font:500 10px 'IBM Plex Mono'; color:#69737c; letter-spacing:.13em; text-transform:uppercase; margin-bottom:6px; }
.contact-detail a,.contact-detail span { font-size:18px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:8px; }
.field.full { grid-column:1/-1; }
.field label { font:500 10px 'IBM Plex Mono'; letter-spacing:.1em; text-transform:uppercase; color:#8b959e; }
.field input,.field textarea,.field select { width:100%; border:1px solid var(--line); border-radius:12px; background:#080b0f; color:#fff; padding:16px; outline:none; transition:border-color .2s; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:rgba(101,245,223,.45); }
.field textarea { min-height:160px; resize:vertical; }
.hp { position:absolute !important; left:-9999px !important; }
.form-status { margin-top:14px; font-size:13px; color:var(--muted); min-height:22px; }

/* reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s ease; }
.reveal.in-view { opacity:1; transform:none; }

@media (max-width: 1000px) {
  .container { width:min(calc(100% - 36px), var(--max)); }
  .desktop-nav { display:none; }.menu-toggle{display:block;}
  .mobile-menu { display:block; position:fixed; inset:88px 0 0; background:rgba(6,8,11,.98); padding:42px 22px; transform:translateX(100%); transition:transform .35s ease; }
  .menu-open .mobile-menu { transform:none; }
  .mobile-menu nav { display:grid; gap:10px; }
  .mobile-menu a { font:500 38px/1.15 'Space Grotesk'; letter-spacing:-.04em; padding:11px 0; border-bottom:1px solid var(--line-soft); }
  .hero { padding-top:145px; }.hero h1{font-size:clamp(66px,16vw,130px)}
  .hero-bottom,.section-head,.two-col,.contact-grid { grid-template-columns:1fr; }
  .hero-actions { justify-content:flex-start; }
  .cap-card,.cap-card:nth-child(n) { grid-column:span 12; }
  .metrics-grid { grid-template-columns:1fr 1fr; }.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .industry-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.attack-stage{min-height:940px}.terminal{width:90%;left:5%}.attack-map{width:80%;right:10%;top:57%;height:340px}.service-row{grid-template-columns:55px 1fr 52px}.service-row p{grid-column:2/4}.process-row{grid-template-columns:60px 1fr}.process-row p{grid-column:2}
  .sticky-label{position:static}.section{padding:105px 0}.cta-panel{padding:50px 35px}
}
@media (max-width: 650px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .nav-wrap{height:74px}.brand{font-size:17px}.brand-mark{width:27px;height:27px}.mobile-menu{inset:74px 0 0}
  .hero{padding:130px 0 48px;min-height:95svh}.hero-topline span:last-child{display:none}.hero h1{font-size:19vw}.hero-bottom{margin-top:30px}.hero-copy{font-size:18px}.hero-side-tag{display:none}
  .section{padding:85px 0}.statement{min-height:72vh}.statement-text{font-size:14vw}.section-title{font-size:13vw}.section-head{gap:28px;margin-bottom:42px}
  .cap-card{min-height:380px;padding:24px}.cap-card h3{margin-top:55px}.cap-link{left:24px}.card-visual{width:65%}
  .metrics-grid{grid-template-columns:1fr}.metric{border-right:0!important;border-bottom:1px solid var(--line-soft)!important;padding:45px 10px}.metric:last-child{border-bottom:0!important}
  .attack-stage{min-height:850px;border-radius:22px}.terminal{top:4%;width:92%;left:4%}.terminal-body{min-height:360px;font-size:11px}.attack-map{top:58%;height:290px}.node{width:64px;height:64px;font-size:8px}
  .service-row{grid-template-columns:42px 1fr 44px;padding:28px 0}.service-row h3{font-size:27px}.service-row p{grid-column:2/4;font-size:14px}
  .industry-grid,.feature-grid{grid-template-columns:1fr}.industry{min-height:250px}.process-row{gap:16px}.process-row h3{font-size:28px}.cta-panel{padding:38px 24px;min-height:420px}.cta-bottom{display:grid}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:grid}.page-hero{padding:150px 0 70px;min-height:64vh}.page-hero h1{font-size:16vw}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
}

/* =========================================================
   CINEMATIC MOTION SYSTEM — portfolio demo v2
   ========================================================= */
.hero { background:#030507; perspective:1200px; }
#network-canvas { opacity:1; filter:saturate(1.15) contrast(1.08); }
.hero:before {
  content:''; position:absolute; inset:-15%; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse at 72% 42%, rgba(74,255,226,.13), transparent 22%),
    radial-gradient(ellipse at 25% 64%, rgba(255,65,88,.07), transparent 18%),
    linear-gradient(90deg,rgba(0,0,0,.42),transparent 42%,rgba(0,0,0,.18));
  mix-blend-mode:screen; animation:heroLightDrift 11s ease-in-out infinite alternate;
}
.hero:after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(3,5,7,.05),rgba(3,5,7,.08) 58%,#06080b 100%);
}
@keyframes heroLightDrift { from{transform:translate3d(-2%,-1%,0) scale(1)} to{transform:translate3d(3%,2%,0) scale(1.08)} }
.hero-grid-overlay { z-index:1; opacity:.48; transform:perspective(850px) rotateX(61deg) scale(1.7) translateY(27%); transform-origin:center bottom; animation:gridBreath 8s ease-in-out infinite alternate; }
@keyframes gridBreath { to { opacity:.25; transform:perspective(850px) rotateX(61deg) scale(1.76) translateY(29%); } }
.hero-glow { z-index:1; animation:glowPulse 6s ease-in-out infinite; }
@keyframes glowPulse { 50%{opacity:.62; filter:blur(34px)} }
.hero-inner,.hero-side-tag{z-index:4}
.hero h1 { text-shadow:0 18px 80px rgba(0,0,0,.65); }
.hero h1 span:first-child { transform:translateZ(40px); }
.hero h1 .outline { -webkit-text-stroke:1px rgba(246,247,248,.6); }

.cinematic-story { height:420vh; position:relative; background:#020406; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.cinematic-sticky { position:sticky; top:0; height:100vh; overflow:hidden; background:#020406; }
#breach-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.cinematic-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 62% 48%,transparent 0 19%,rgba(2,4,6,.08) 38%,rgba(2,4,6,.58) 80%,#020406 100%),linear-gradient(90deg,rgba(2,4,6,.89) 0 24%,rgba(2,4,6,.18) 57%,rgba(2,4,6,.56) 100%); }
.scan-beam { position:absolute; top:-18%; bottom:-18%; width:13vw; min-width:110px; left:-18%; transform:skewX(-11deg); background:linear-gradient(90deg,transparent,rgba(101,245,223,.03),rgba(101,245,223,.18),rgba(101,245,223,.03),transparent); filter:blur(2px); mix-blend-mode:screen; opacity:.65; pointer-events:none; }
.cinematic-hud { position:absolute; z-index:5; top:112px; left:max(32px,calc((100vw - min(calc(100vw - 64px), var(--max)))/2)); right:max(32px,calc((100vw - min(calc(100vw - 64px), var(--max)))/2)); display:flex; justify-content:space-between; color:rgba(218,230,235,.52); font-size:10px; }
.cinematic-hud span:last-child { color:var(--cyan); }
.cinematic-copy { position:absolute; z-index:4; inset:0; width:min(calc(100% - 64px),var(--max)); margin:auto; pointer-events:none; }
.cinematic-frame { position:absolute; left:0; top:50%; transform:translateY(-42%) translateY(38px); max-width:790px; opacity:0; transition:opacity .55s ease,transform .75s cubic-bezier(.2,.75,.25,1); }
.cinematic-frame.is-active { opacity:1; transform:translateY(-50%); }
.cinematic-frame h2 { font:500 clamp(56px,7.4vw,122px)/.9 'Space Grotesk',sans-serif; letter-spacing:-.065em; margin:18px 0 25px; max-width:1050px; text-wrap:balance; }
.cinematic-frame p { width:min(570px,78vw); color:#aeb8bf; font-size:clamp(18px,1.8vw,25px); }
.cinematic-progress { position:absolute; z-index:5; right:32px; top:20%; bottom:20%; width:1px; background:rgba(255,255,255,.12); }
.cinematic-progress i { position:absolute; left:-1px; top:0; width:3px; height:0%; background:var(--cyan); box-shadow:0 0 18px rgba(101,245,223,.8); }

/* Shared cinematic treatment for interior page heroes. JS injects a canvas here. */
.page-hero { overflow:hidden; background:#030507; }
.page-hero > .page-cinematic-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.72; pointer-events:none; }
.page-hero:after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 76% 46%,rgba(101,245,223,.08),transparent 26%),linear-gradient(90deg,rgba(3,5,7,.3),rgba(3,5,7,.02) 58%,rgba(3,5,7,.36)); }
.page-hero .container { position:relative; z-index:2; }

@media (max-width:1000px){
  .cinematic-story{height:360vh}.cinematic-hud{left:24px;right:24px}.cinematic-copy{width:calc(100% - 42px)}
  .cinematic-frame{max-width:83vw}.cinematic-frame h2{font-size:clamp(50px,10vw,96px)}
}
@media (max-width:650px){
  .cinematic-story{height:340vh}.cinematic-hud{top:92px;left:16px;right:16px}.cinematic-hud span:first-child{display:none}.cinematic-copy{width:calc(100% - 28px)}
  .cinematic-frame{top:45%;max-width:93vw}.cinematic-frame h2{font-size:13vw}.cinematic-frame p{font-size:17px}.cinematic-progress{right:12px;top:15%;bottom:15%}
}
@media (prefers-reduced-motion:reduce){
  .hero:before,.hero-grid-overlay,.hero-glow,.ticker-track{animation:none!important}.scan-beam{display:none}.cinematic-frame{transition:none}
}