@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=cabinet-grotesk@400,500,700,800&display=swap');

/* ── TOKENS — DARK (default) ── */
:root,
[data-theme="dark"] {
  --bg:        #010409;
  --bg-1:      #040d1a;
  --bg-2:      #071628;
  --bg-card:   #071526;
  --bg-card-h: #0c2040;

  --blue:      #2563EB;
  --blue-hi:   #3B82F6;
  --blue-sat:  #1D4ED8;
  --blue-glow: rgba(37,99,235,0.35);
  --blue-edge: rgba(59,130,246,0.6);

  --cyan:      #06B6D4;
  --cyan-hi:   #22D3EE;
  --cyan-sat:  #0891B2;
  --cyan-glow: rgba(6,182,212,0.35);
  --cyan-edge: rgba(34,211,238,0.6);

  --green:     #10B981;
  --green-glow:rgba(16,185,129,0.25);
  --amber:     #F59E0B;
  --red:       #EF4444;

  --text:      #F0F6FF;
  --text-dim:  #94A3B8;
  --text-muted:#3D5A80;
  --border:    rgba(37,99,235,0.14);
  --border-h:  rgba(59,130,246,0.4);
  --border-c:  rgba(6,182,212,0.3);

  --font-display: 'Clash Display', sans-serif;
  --font-body:    'Cabinet Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius:    10px;
  --radius-lg: 16px;
  --ease:      cubic-bezier(.4,0,.2,1);
  --t:         0.2s;

  /* Dark mode specific */
  --statusbar-bg: rgba(1,4,9,.96);
  --navbar-scrolled-bg: rgba(1,4,9,.93);
  --nav-mobile-bg: rgba(1,4,9,.98);
  --terminal-bg: #030b18;
  --port-row-bg: rgba(0,0,0,.35);
  --calc-input-bg: rgba(0,0,0,.4);
  --particle-opacity: .55;
}

/* ── TOKENS — LIGHT ── */
[data-theme="light"] {
  --bg:        #f0f4f8;
  --bg-1:      #e4ecf5;
  --bg-2:      #d8e6f0;
  --bg-card:   #ffffff;
  --bg-card-h: #e8f1fb;

  --blue:      #2563EB;
  --blue-hi:   #1D4ED8;
  --blue-sat:  #1E40AF;
  --blue-glow: rgba(37,99,235,0.18);
  --blue-edge: rgba(29,78,216,0.4);

  --cyan:      #0891B2;
  --cyan-hi:   #0284C7;
  --cyan-sat:  #075985;
  --cyan-glow: rgba(8,145,178,0.2);
  --cyan-edge: rgba(2,132,199,0.5);

  --green:     #059669;
  --green-glow:rgba(5,150,105,0.2);
  --amber:     #D97706;
  --red:       #DC2626;

  --text:      #0f172a;
  --text-dim:  #475569;
  --text-muted:#94a3b8;
  --border:    rgba(37,99,235,0.12);
  --border-h:  rgba(29,78,216,0.35);
  --border-c:  rgba(8,145,178,0.28);

  /* Light mode specific overrides */
  --statusbar-bg: rgba(240,244,248,.97);
  --navbar-scrolled-bg: rgba(240,244,248,.95);
  --nav-mobile-bg: rgba(240,244,248,.99);
  --terminal-bg: #1e293b;
  --port-row-bg: rgba(0,0,0,.05);
  --calc-input-bg: rgba(0,0,0,.04);
  --particle-opacity: .22;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease), color .3s var(--ease);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── UTILS ── */
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display)}
.accent-blue {color:var(--blue-hi)}
.accent-cyan {color:var(--cyan-hi)}
.accent-green{color:var(--green)}

.container{max-width:1240px;margin:0 auto;padding:0 28px}

/* ── PARTICLE CANVAS ── */
#particleCanvas{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:var(--particle-opacity);
  transition:opacity .4s;
}

/* ── DARK MODE TOGGLE ── */
.dark-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:rgba(37,99,235,.12);border:1px solid var(--border-h);
  cursor:pointer;font-size:13px;line-height:1;
  transition:background var(--t),border-color var(--t),transform var(--t);
  flex-shrink:0;color:var(--text-dim);
}
.dark-toggle:hover{background:rgba(37,99,235,.22);transform:rotate(20deg);color:var(--cyan-hi)}

[data-theme="dark"]  .dt-sun  { display:none }
[data-theme="dark"]  .dt-moon { display:block }
[data-theme="light"] .dt-moon { display:none }
[data-theme="light"] .dt-sun  { display:block }

/* ── STATUS BAR ── */
.status-bar{
  position:fixed;top:0;left:0;right:0;
  z-index:300;
  background:var(--statusbar-bg);
  border-bottom:1px solid var(--border);
  padding:5px 0;
  backdrop-filter:blur(12px);
  transition:background .3s;
}
.status-bar-inner{
  display:flex;align-items:center;gap:12px;
  justify-content:center;flex-wrap:wrap;
  padding:0 24px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
}
.status-pulse{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--green);box-shadow:0 0 10px var(--green);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 6px var(--green)}50%{box-shadow:0 0 18px var(--green),0 0 30px var(--green)}}
.status-text{color:var(--cyan-hi);font-weight:700}
.status-sep{color:var(--text-muted)}
.status-node{color:var(--text-dim)}
.status-node strong{color:var(--green)}

/* ── NAVBAR ── */
.navbar{
  position:fixed;top:28px;left:0;right:0;z-index:200;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  background:var(--navbar-scrolled-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-color:var(--border);
}
.nav-container{
  max-width:1240px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:40px;
}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:30px}
.logo-fallback{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text)}
.logo-accent{color:var(--cyan-hi)}
.nav-links{display:flex;gap:32px;margin-left:auto;align-items:center}
.nav-link{
  font-family:var(--font-body);font-size:13.5px;font-weight:700;
  color:var(--text-dim);letter-spacing:.02em;
  position:relative;transition:color var(--t);
}
.nav-link::after{
  content:'';position:absolute;bottom:-3px;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,var(--blue-hi),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease);
}
.nav-link:hover{color:var(--text)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--text)}

.btn-client{
  font-family:var(--font-body);font-size:12.5px;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--blue),var(--cyan-sat));
  color:#fff;padding:8px 18px;border-radius:7px;
  border:1px solid transparent;
  transition:box-shadow var(--t),transform var(--t),opacity var(--t);
}
.btn-client:hover{
  opacity:.9;transform:translateY(-1px);
  box-shadow:0 0 24px var(--blue-glow),0 4px 16px rgba(0,0,0,.4);
}
.nav-burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;margin-left:auto;
}
.nav-burger span{display:block;width:22px;height:1.5px;background:var(--text);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.nav-mobile{
  display:none;flex-direction:column;
  background:var(--nav-mobile-bg);border-top:1px solid var(--border);padding:16px 28px;
}
.nav-mobile a{font-size:15px;font-weight:700;color:var(--text-dim);padding:11px 0;border-bottom:1px solid var(--border)}
.nav-mobile a:hover{color:var(--cyan-hi)}
.nav-mobile a:last-child{border-bottom:none}
.btn-client-mobile{
  background:linear-gradient(135deg,var(--blue),var(--cyan-sat));
  color:#fff!important;border-radius:8px;text-align:center;
  padding:11px 20px!important;border-bottom:none!important;margin-top:8px;
}

/* ── BUTTONS ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:13.5px;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--blue-hi),var(--cyan-sat));
  color:#fff;padding:11px 26px;border-radius:8px;
  transition:box-shadow var(--t),transform var(--t),opacity var(--t);
  white-space:nowrap;border:none;cursor:pointer;
}
.btn-primary:hover{
  opacity:.88;transform:translateY(-2px);
  box-shadow:0 6px 32px var(--blue-glow),0 2px 12px rgba(0,0,0,.5);
}
.btn-primary.btn-lg{padding:14px 32px;font-size:14.5px}

.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:13.5px;font-weight:800;letter-spacing:.04em;
  background:rgba(37,99,235,.08);color:var(--text);
  padding:11px 26px;border-radius:8px;
  border:1px solid var(--border-h);
  transition:background var(--t),border-color var(--t),transform var(--t),box-shadow var(--t);
  cursor:pointer;
}
.btn-ghost:hover{
  background:rgba(37,99,235,.16);border-color:var(--cyan-hi);
  transform:translateY(-2px);box-shadow:0 4px 20px rgba(6,182,212,.15);
}
.btn-ghost.btn-lg{padding:14px 32px;font-size:14.5px}

/* ── SECTION LABELS / TITLES ── */
.section-label{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;color:var(--cyan-hi);text-transform:uppercase;
  margin-bottom:14px;display:block;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(30px,3.8vw,52px);font-weight:700;
  line-height:1.08;letter-spacing:-.025em;color:var(--text);
  margin-bottom:20px;
}
.section-body{
  font-size:16px;color:var(--text-dim);line-height:1.72;
  margin-bottom:28px;max-width:580px;
}
.section-header{text-align:center;margin-bottom:64px}
.section-header .section-body{margin-left:auto;margin-right:auto}

/* ── GLOWING DIVIDER ── */
.glowing-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-edge),var(--cyan-edge),transparent);
  border:none;margin:0;
}

/* ── HERO ── */
.hero{
  min-height:100vh;display:flex;align-items:center;
  position:relative;padding:140px 28px 90px;overflow:hidden;
  z-index:1;
}
.hero-noise{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity:.4;pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.7) 15%,rgba(0,0,0,.7) 85%,transparent);
  pointer-events:none;
}
.hero-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%,transparent 40%,var(--bg) 100%);
  pointer-events:none;
}

.hero-inner{
  max-width:1240px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  position:relative;z-index:2;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--cyan-hi);
  background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.25);
  border-radius:100px;padding:5px 14px;margin-bottom:26px;width:fit-content;
}
.hero-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan-hi);box-shadow:0 0 8px var(--cyan);
  animation:pulse 2s ease-in-out infinite;flex-shrink:0;
}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(38px,5.2vw,72px);
  font-weight:700;line-height:1.0;letter-spacing:-.03em;
  margin-bottom:22px;
}
.hero-title em{
  font-style:normal;
  background:linear-gradient(135deg,var(--blue-hi) 0%,var(--cyan-hi) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero-desc{font-size:16.5px;color:var(--text-dim);max-width:500px;line-height:1.75;margin-bottom:36px}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}

.hero-stats{
  display:flex;
  background:rgba(7,21,38,.8);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;width:fit-content;
  backdrop-filter:blur(8px);
}
[data-theme="light"] .hero-stats{background:rgba(255,255,255,.8)}
.hero-stat{padding:14px 22px;display:flex;flex-direction:column;gap:3px}
.hero-stat-div{width:1px;background:var(--border);align-self:stretch}
.hero-stat-val{font-family:var(--font-mono);font-size:17px;font-weight:700;color:var(--cyan-hi)}
.hero-stat-label{font-size:10.5px;color:var(--text-muted);letter-spacing:.04em}

/* Hero Visual – network diagram */
.hero-visual{display:flex;justify-content:center;align-items:center}
.network-diagram{width:420px;height:420px;position:relative;flex-shrink:0}
.nd-svg{position:absolute;inset:0;width:100%;height:100%}
.nd-line{stroke:rgba(59,130,246,.2);stroke-width:1;stroke-dasharray:5 4;animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-36}}
.nd-node{position:absolute;transform:translate(-50%,-50%)}
.nd-center{top:50%;left:50%}
.nd-inner{
  font-family:var(--font-mono);
  background:var(--bg-card);border:1px solid var(--border-h);
  border-radius:10px;padding:12px 16px;font-size:12px;font-weight:700;color:var(--cyan-hi);
  box-shadow:0 0 24px var(--blue-glow);position:relative;z-index:2;
  transition:box-shadow var(--t);
}
.nd-inner.nd-sm{padding:7px 11px;font-size:10px;color:var(--text-dim);border-color:rgba(37,99,235,.2);box-shadow:none}
.nd-node:hover .nd-inner{box-shadow:0 0 36px var(--cyan-glow)}
.nd-ring{
  position:absolute;inset:-12px;border:1px solid rgba(59,130,246,.2);border-radius:14px;
  animation:rpulse 3s ease-in-out infinite;
}
.nd-ring2{inset:-26px;border-color:rgba(59,130,246,.08);animation-delay:1.5s;border-radius:20px}
@keyframes rpulse{0%,100%{opacity:.6}50%{opacity:.12}}
.nd-packets{position:absolute;inset:0;pointer-events:none}
.nd-packet{
  position:absolute;width:5px;height:5px;
  background:var(--cyan-hi);border-radius:50%;
  box-shadow:0 0 8px var(--cyan);
}

/* ── JUNIPER SECTION ── */
.section-juniper{
  padding:110px 0;position:relative;z-index:1;
  background:linear-gradient(180deg,transparent,var(--bg-1) 30%,var(--bg-1) 70%,transparent);
}
.juniper-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}

.juniper-specs{display:flex;flex-direction:column;gap:20px;margin-bottom:36px}
.spec-item{display:flex;gap:16px;align-items:flex-start}
.spec-icon{
  width:42px;height:42px;flex-shrink:0;
  background:rgba(37,99,235,.1);border:1px solid var(--border);
  border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--blue-hi);
  transition:background var(--t),box-shadow var(--t);
}
.spec-item:hover .spec-icon{background:rgba(37,99,235,.18);box-shadow:0 0 16px var(--blue-glow)}
.spec-title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:4px}
.spec-desc{font-size:12.5px;color:var(--text-dim);line-height:1.6}

/* Router card */
.router-card{
  background:var(--bg-card);border:1px solid var(--border-h);
  border-radius:var(--radius-lg);padding:28px;max-width:380px;width:100%;
  box-shadow:0 0 80px rgba(37,99,235,.12),0 24px 60px rgba(0,0,0,.6);
  position:relative;
}
[data-theme="light"] .router-card{box-shadow:0 0 40px rgba(37,99,235,.1),0 8px 32px rgba(0,0,0,.12)}
.router-card::before{
  content:'';position:absolute;top:0;left:32px;right:32px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan-hi),transparent);
}
.router-top{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.router-ports{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.port-row{
  display:flex;align-items:center;gap:10px;
  background:var(--port-row-bg);border:1px solid rgba(255,255,255,.04);
  border-radius:7px;padding:7px 12px;
}
[data-theme="light"] .port-row{border-color:var(--border)}
.port-label{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);flex:1}
.port-leds{display:flex;gap:4px}
.led{width:8px;height:8px;border-radius:50%}
.led-g{background:var(--green);box-shadow:0 0 7px var(--green)}
.led-a{background:var(--amber);box-shadow:0 0 7px var(--amber)}
.blink{animation:blink 1.1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.port-st{font-family:var(--font-mono);font-size:9.5px;color:var(--green);font-weight:700;width:36px;text-align:right}

.router-metrics{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.metric-row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:11.5px;
  padding:5px 0;border-bottom:1px solid var(--border);
}
.mkey{color:var(--text-muted)}
.mval{color:var(--text)}
.mval.cv{color:var(--cyan-hi)}
.mval.gv{color:var(--green)}

.router-chip{
  font-family:var(--font-mono);font-size:8.5px;font-weight:700;
  letter-spacing:.16em;color:var(--text-muted);
  text-align:center;padding-top:12px;border-top:1px solid var(--border);
}

/* ── SERVICES GRID ── */
.section-services{padding:110px 0;position:relative;z-index:1}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.scard{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:28px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
  cursor:pointer;
}
.scard:hover{
  border-color:var(--border-h);
  transform:translateY(-4px);
  box-shadow:0 12px 48px rgba(37,99,235,.18);
}
.scard-glow{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue-hi),var(--cyan-hi));
  opacity:0;transition:opacity var(--t);
}
.scard-glow-c{background:linear-gradient(90deg,var(--cyan-hi),var(--blue-hi))}
.scard-glow-g{background:linear-gradient(90deg,var(--green),var(--cyan-hi))}
.scard:hover .scard-glow{opacity:1}

.scard-featured{border-color:rgba(6,182,212,.2);background:linear-gradient(135deg,var(--bg-card),rgba(6,182,212,.04))}
.scard-academy{border-color:rgba(16,185,129,.15);background:linear-gradient(135deg,var(--bg-card),rgba(16,185,129,.04))}

.sbadge{
  font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;
  display:inline-block;padding:3px 9px;border-radius:100px;width:fit-content;
  background:rgba(37,99,235,.15);border:1px solid rgba(59,130,246,.35);color:var(--blue-hi);
}
.sbadge-g{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.35);color:var(--green)}

.sicon{
  width:46px;height:46px;
  background:rgba(37,99,235,.09);border:1px solid var(--border);
  border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--blue-hi);
  transition:background var(--t),box-shadow var(--t);
}
.scard:hover .sicon{background:rgba(37,99,235,.18);box-shadow:0 0 18px var(--blue-glow)}
.scard-featured .sicon{color:var(--cyan-hi)}
.scard-academy .sicon{color:var(--green)}

.stitle{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--text)}
.sdesc{font-size:13px;color:var(--text-dim);line-height:1.6;flex:1}
.sprice{font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}
.sprice strong{color:var(--cyan-hi);font-size:15px}
.sarrow{
  font-size:18px;color:var(--text-muted);margin-top:auto;
  transition:color var(--t),transform var(--t);
}
.scard:hover .sarrow{color:var(--cyan-hi);transform:translateX(5px)}

/* ── TERMINAL ── */
.section-terminal{
  padding:80px 0;position:relative;z-index:1;
  background:linear-gradient(180deg,transparent,var(--bg-1) 20%,var(--bg-1) 80%,transparent);
}
.terminal-wrap{
  background:var(--terminal-bg);border:1px solid var(--border-h);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 0 100px rgba(37,99,235,.12),0 24px 64px rgba(0,0,0,.7);
}
.terminal-hdr{
  display:flex;align-items:center;gap:12px;padding:11px 20px;
  background:rgba(0,0,0,.5);border-bottom:1px solid var(--border);
}
[data-theme="light"] .terminal-hdr{background:rgba(0,0,0,.15)}
.tdots{display:flex;gap:6px}
.tdot{width:11px;height:11px;border-radius:50%}
.td-r{background:#ef4444}.td-y{background:#f59e0b}.td-g{background:#22c55e}
.ttitle{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);flex:1}
.tlive{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--green);letter-spacing:.08em}
.tlive-dot{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 6px var(--green);animation:pulse 2s ease-in-out infinite}

.terminal-body{
  padding:24px;min-height:260px;max-height:340px;overflow-y:auto;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.75;color:#94a3b8;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.terminal-output{white-space:pre;word-break:break-all}
.tcursor-line{display:flex;align-items:baseline;margin-top:6px}
.tprompt{color:var(--cyan-hi)}
.tcursor{color:var(--cyan-hi);animation:cblink 1s step-end infinite;font-size:14px}
@keyframes cblink{0%,100%{opacity:1}50%{opacity:0}}
.t-c{color:var(--cyan-hi)}.t-g{color:var(--green)}.t-b{color:var(--blue-hi)}
.t-a{color:var(--amber)}.t-r{color:var(--red)}.t-d{color:#475569}.t-w{color:#e2e8f0}

/* ── WHY SECTION ── */
.section-why{padding:110px 0;position:relative;z-index:1}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.why-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.why-item{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-dim)}
.why-check{font-family:var(--font-mono);color:var(--cyan-hi);font-size:12px;font-weight:700;flex-shrink:0;margin-top:2px}
.why-item strong{color:var(--text)}
.why-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 22px;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.stat-card:hover{border-color:var(--border-h);box-shadow:0 6px 28px rgba(37,99,235,.14);transform:translateY(-2px)}
.stat-card-b{border-color:rgba(37,99,235,.22);background:linear-gradient(135deg,var(--bg-card),rgba(37,99,235,.05))}
.stat-card-c{border-color:rgba(6,182,212,.22);background:linear-gradient(135deg,var(--bg-card),rgba(6,182,212,.05))}
.scval{font-family:var(--font-mono);font-size:30px;font-weight:700;color:var(--blue-hi);display:block;margin-bottom:5px}
.stat-card-c .scval{color:var(--cyan-hi)}
.sclabel{font-size:13px;font-weight:700;color:var(--text);display:block;margin-bottom:3px}
.scsub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}

/* ── PRICING TABLE ── */
.price-table{width:100%;border-collapse:collapse;margin:24px 0}
.price-table th{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--text-muted);text-transform:uppercase;
  padding:10px 16px;border-bottom:1px solid var(--border);text-align:left;
}
.price-table td{
  padding:11px 16px;font-size:13.5px;color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.price-table tr:hover td{background:rgba(37,99,235,.05);color:var(--text)}
.price-table td.price-val{font-family:var(--font-mono);color:var(--cyan-hi);font-weight:700}
.price-table td.price-tag{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}

/* ── BANDWIDTH CALCULATOR ── */
.calc-card{
  background:var(--bg-card);border:1px solid var(--border-h);
  border-radius:var(--radius-lg);padding:32px;
  box-shadow:0 0 60px rgba(37,99,235,.1);
}
.calc-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px}
.calc-sub{font-size:13px;color:var(--text-dim);margin-bottom:28px}
.calc-row{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.calc-label{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}
.calc-select,.calc-input{
  font-family:var(--font-mono);font-size:13px;color:var(--text);
  background:var(--calc-input-bg);border:1px solid var(--border);
  border-radius:8px;padding:10px 14px;width:100%;
  transition:border-color var(--t),box-shadow var(--t);
  -webkit-appearance:none;appearance:none;
}
.calc-select:focus,.calc-input:focus{
  outline:none;border-color:var(--blue-hi);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.calc-result{
  background:rgba(6,182,212,.07);border:1px solid var(--border-c);
  border-radius:var(--radius);padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.calc-result-label{font-size:13px;color:var(--text-dim)}
.calc-result-val{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--cyan-hi)}
.calc-result-detail{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);width:100%}

/* ── VPS CARDS ── */
.vps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vps-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px 28px;
  position:relative;overflow:hidden;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.vps-card:hover{border-color:var(--border-h);transform:translateY(-4px);box-shadow:0 12px 48px rgba(37,99,235,.18)}
.vps-card.featured{border-color:var(--border-c);background:linear-gradient(135deg,var(--bg-card),rgba(6,182,212,.05))}
.vps-tier{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;margin-bottom:8px}
.vps-name{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text);margin-bottom:4px}
.vps-price{font-family:var(--font-mono);font-size:36px;font-weight:700;color:var(--cyan-hi);margin-bottom:24px}
.vps-price span{font-size:14px;color:var(--text-muted)}
.vps-specs{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.vps-spec{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-dim)}
.vps-spec-dot{width:5px;height:5px;border-radius:50%;background:var(--blue-hi);box-shadow:0 0 6px var(--blue-glow);flex-shrink:0}
.vps-card.featured .vps-spec-dot{background:var(--cyan-hi);box-shadow:0 0 6px var(--cyan-glow)}
.vps-stripe{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-hi),var(--cyan-hi))}
.vps-card.featured .vps-stripe{background:linear-gradient(90deg,var(--cyan-hi),var(--blue-hi))}

/* ── MANAGED PLANS ── */
.managed-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plan-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.plan-card:hover{border-color:var(--border-h);transform:translateY(-3px);box-shadow:0 10px 40px rgba(37,99,235,.16)}
.plan-card.plan-hi{border-color:var(--border-c);background:linear-gradient(135deg,var(--bg-card),rgba(6,182,212,.04))}
.plan-name{font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:4px}
.plan-price{font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--cyan-hi);margin-bottom:6px}
.plan-price span{font-size:13px;color:var(--text-muted)}
.plan-scope{font-size:12px;color:var(--text-muted);margin-bottom:22px}
.plan-features{display:flex;flex-direction:column;gap:10px}
.plan-feature{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-dim)}
.pf-check{color:var(--cyan-hi);font-family:var(--font-mono);font-size:12px;flex-shrink:0;margin-top:1px}

/* ── SLA / SUPPORT ── */
.sla-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:60px}
.sla-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 22px;text-align:center;
  transition:border-color var(--t),box-shadow var(--t);
}
.sla-card:hover{border-color:var(--border-h);box-shadow:0 6px 30px rgba(37,99,235,.15)}
.sla-val{font-family:var(--font-mono);font-size:36px;font-weight:700;color:var(--cyan-hi);display:block;margin-bottom:6px}
.sla-label{font-size:13px;color:var(--text-dim)}

.support-pass{
  background:var(--bg-card);border:1px solid var(--border-c);
  border-radius:var(--radius-lg);padding:40px;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  position:relative;overflow:hidden;
}
.support-pass::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue-hi),var(--cyan-hi));
}
.sp-badge{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--cyan-hi);text-transform:uppercase;margin-bottom:10px}
.sp-title{font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:8px}
.sp-desc{font-size:14px;color:var(--text-dim);line-height:1.65;max-width:560px}
.sp-channels{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.sp-ch{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  background:rgba(37,99,235,.12);border:1px solid var(--border);
  color:var(--text-dim);padding:5px 12px;border-radius:100px;
}
.sp-price-box{text-align:center;flex-shrink:0}
.sp-price{font-family:var(--font-mono);font-size:44px;font-weight:700;color:var(--cyan-hi);display:block}
.sp-per{font-size:12px;color:var(--text-muted);display:block;margin-bottom:14px}

/* ── CTA SECTION ── */
.section-cta{padding:110px 0;position:relative;z-index:1;text-align:center;overflow:hidden}
.cta-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:400px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(37,99,235,.12) 0%,transparent 70%);
}
.cta-title{font-family:var(--font-display);font-size:clamp(34px,4.5vw,62px);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin-bottom:16px}
.cta-desc{font-size:17px;color:var(--text-dim);margin-bottom:40px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
.site-footer{background:var(--bg-1);border-top:1px solid var(--border);padding:64px 0 32px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo-img{height:26px;margin-bottom:12px}
.footer-brand-desc{font-size:13px;color:var(--text-muted);line-height:1.7;margin-bottom:16px}
.footer-as-badge{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  color:var(--cyan-hi);background:rgba(6,182,212,.09);
  border:1px solid rgba(6,182,212,.22);border-radius:100px;
  padding:3px 12px;display:inline-block;letter-spacing:.07em;
}
.footer-col{display:flex;flex-direction:column;gap:9px}
.footer-col-title{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.footer-link{font-size:13px;color:var(--text-muted);transition:color var(--t);width:fit-content}
.footer-link:hover{color:var(--cyan-hi)}
.footer-bottom{display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap}
.footer-copy{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted)}
.footer-sep{color:var(--text-muted);opacity:.35}

/* ── PAGE HERO VARIANT ── */
.page-hero{
  padding:140px 28px 80px;position:relative;z-index:1;
  border-bottom:1px solid var(--border);
}
.page-hero-inner{max-width:800px}
.page-hero-tag{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  color:var(--cyan-hi);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;margin-bottom:20px;
}
.page-hero-tag::before{content:'//'}
.page-hero-title{font-family:var(--font-display);font-size:clamp(40px,5vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1.0;margin-bottom:20px}
.page-hero-title em{font-style:normal;color:var(--cyan-hi)}
.page-hero-desc{font-size:17px;color:var(--text-dim);line-height:1.72;max-width:600px}

/* ── SECTION BLOCK ── */
.section-block{padding:90px 0;position:relative;z-index:1}
.section-block+.section-block{border-top:1px solid var(--border)}
.block-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}

/* ── ACCORDION / FAQ ── */
.faq-item{border-bottom:1px solid var(--border);padding:0}
.faq-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--text);text-align:left;
  transition:color var(--t);
}
.faq-btn:hover{color:var(--cyan-hi)}
.faq-icon{font-size:18px;color:var(--text-muted);transition:transform var(--t),color var(--t);flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--cyan-hi)}
.faq-body{font-size:14px;color:var(--text-dim);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .35s var(--ease),padding var(--t)}
.faq-item.open .faq-body{max-height:400px;padding-bottom:18px}

/* ── LEGAL BLOCK ── */
.legal-block{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:40px;
}
.legal-title{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:16px}
.legal-text{font-size:13.5px;color:var(--text-dim);line-height:1.75}
.legal-text strong{color:var(--text)}
.legal-text p+p{margin-top:12px}

/* ── FTTH — Offre Fibre ── */
.ftth-hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:#F59E0B;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  border-radius:100px;padding:5px 14px;margin-bottom:20px;
}
.ftth-speed{
  font-family:var(--font-mono);
  font-size:clamp(64px,10vw,130px);
  font-weight:700;line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--blue-hi) 0%,var(--cyan-hi) 60%,var(--green) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:10px;display:block;
}
.ftth-speed-label{font-family:var(--font-mono);font-size:14px;color:var(--text-muted);letter-spacing:.1em;margin-bottom:28px;display:block}

.ftth-feature-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px;
}
.ftth-feature-block{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;
  position:relative;overflow:hidden;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.ftth-feature-block:hover{border-color:var(--border-h);transform:translateY(-3px);box-shadow:0 10px 40px rgba(37,99,235,.15)}
.ftth-feature-block::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  opacity:0;transition:opacity var(--t);
}
.ftth-feature-block:hover::before{opacity:1}
.ftth-fb-net::before{background:linear-gradient(90deg,var(--blue-hi),var(--cyan-hi))}
.ftth-fb-dc::before{background:linear-gradient(90deg,var(--cyan-hi),var(--green))}
.ftth-fb-mon::before{background:linear-gradient(90deg,var(--green),var(--blue-hi))}

.ftth-block-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-size:22px;
  border:1px solid var(--border);
}
.ftth-fb-net .ftth-block-icon{background:rgba(37,99,235,.1);color:var(--blue-hi)}
.ftth-fb-dc  .ftth-block-icon{background:rgba(6,182,212,.1);color:var(--cyan-hi)}
.ftth-fb-mon .ftth-block-icon{background:rgba(16,185,129,.1);color:var(--green)}

.ftth-block-title{
  font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--text);margin-bottom:12px;
}
.ftth-block-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.ftth-block-item{display:flex;gap:10px;font-size:13.5px;color:var(--text-dim);align-items:flex-start}
.ftth-check{flex-shrink:0;color:var(--cyan-hi);font-family:var(--font-mono);font-size:11px;margin-top:2px}
.ftth-fb-dc  .ftth-check{color:var(--cyan-hi)}
.ftth-fb-mon .ftth-check{color:var(--green)}
.ftth-block-item strong{color:var(--text)}

.ftth-price-card{
  background:var(--bg-card);border:1px solid var(--border-c);
  border-radius:var(--radius-lg);padding:48px;
  position:relative;overflow:hidden;text-align:center;
  box-shadow:0 0 80px rgba(6,182,212,.1),0 24px 60px rgba(0,0,0,.5);
}
[data-theme="light"] .ftth-price-card{box-shadow:0 0 40px rgba(6,182,212,.08),0 8px 32px rgba(0,0,0,.1)}
.ftth-price-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue-hi),var(--cyan-hi),var(--green));
}
.ftth-price-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;margin-bottom:8px}
.ftth-price-main{font-family:var(--font-mono);font-size:72px;font-weight:700;color:var(--cyan-hi);line-height:1}
.ftth-price-main span{font-size:22px;color:var(--text-muted)}
.ftth-price-sub{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);margin-top:8px;margin-bottom:32px}
.ftth-price-fas{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;color:var(--text-dim);
  background:rgba(37,99,235,.08);border:1px solid var(--border);
  border-radius:8px;padding:10px 18px;margin-bottom:24px;
}
.ftth-price-fas strong{color:var(--text)}

.ftth-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.ftth-option-block{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;
}
.ftth-option-title{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:4px}
.ftth-option-desc{font-size:13px;color:var(--text-muted);margin-bottom:20px}

.ftth-ip-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.ftth-ip-row{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(37,99,235,.06);border:1px solid var(--border);
  border-radius:8px;padding:10px 14px;
  font-family:var(--font-mono);font-size:12px;
}
.ftth-ip-row .ip-block{color:var(--text-dim)}
.ftth-ip-row .ip-price{color:var(--cyan-hi);font-weight:700}

.ftth-bgp-list{display:flex;flex-direction:column;gap:10px}
.ftth-bgp-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:13.5px;color:var(--text-dim);
}
.ftth-bgp-item:last-child{border-bottom:none}
.ftth-bgp-item .bgp-price{font-family:var(--font-mono);font-weight:700;color:var(--cyan-hi);flex-shrink:0}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero-inner,.juniper-grid,.why-grid,.block-grid{grid-template-columns:1fr}
  .hero-visual,.nd-packets{display:none}
  .services-grid,.vps-grid,.sla-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .managed-grid{grid-template-columns:1fr}
  .support-pass{grid-template-columns:1fr}
  .sp-price-box{text-align:left}
  .ftth-feature-grid{grid-template-columns:1fr}
  .ftth-options-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links,.btn-client{display:none}
  .nav-burger{display:flex}
  .nav-mobile.open{display:flex}
  .services-grid,.vps-grid,.sla-grid{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap}
  .hero-stat{flex:1 1 calc(50% - 1px);min-width:110px}
  .hero-stat-div:nth-child(4){display:none}
  .footer-grid{grid-template-columns:1fr}
  .why-stats{grid-template-columns:1fr 1fr}
  .page-hero{padding:130px 24px 60px}
  .section-block{padding:60px 0}
  .ftth-ip-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero-stats{width:100%}
  .hero-stat{padding:12px 14px}
  .support-pass{padding:28px}
  .ftth-price-card{padding:32px 24px}
  .ftth-price-main{font-size:52px}
}