:root{
  --ink:#111418;
  --ink-2:#22272e;
  --paper:#ffffff;
  --paper-2:#f7f8fa;
  --paper-3:#eef0f3;
  --line:#e6e8ec;
  --line-2:#d8dbe0;
  --line-soft:#e6e8ec;
  --muted:#5b6573;
  --muted-2:#8a909a;
  --accent:#0f62fe;        /* IBM-blue style */
  --accent-deep:#0043ce;
  --success:#198754;
}
*{ -webkit-font-smoothing:antialiased; }
html,body{ background:var(--paper); color:var(--ink); }
body{ font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.font-mono{ font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted{ color:var(--muted);} .muted-2{ color:var(--muted-2);}
.ring-line{ box-shadow: inset 0 0 0 1px var(--line); }
.ring-line-2{ box-shadow: inset 0 0 0 1px var(--line-2); }
.hairline{ border-color: var(--line);}
.accent{ color:var(--accent);} .bg-accent{ background:var(--accent);}
.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:3px 10px; border-radius:999px; font-size:12px; line-height:1; height:22px;}
.badge-new{ background:rgba(15,98,254,.1); color:var(--accent); font-weight:600;}
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border-radius:6px; font-size:14px; font-weight:500; transition:all .15s ease; line-height:1; height:38px;}
.btn-primary{ background:var(--accent); color:white; }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2);}
.btn-ghost:hover{ background:var(--paper-2);}
.btn-dark{ background:var(--ink); color:white;}
.btn-dark:hover{ background:#000;}
.nav-link{ color:var(--ink); font-size:14px; padding:8px 12px; border-radius:6px;}
.nav-link:hover{ background:var(--paper-2);}
.nav-link.is-on{ background:var(--paper-2); }
.h-display{ font-weight:600; letter-spacing:-0.025em; line-height:1.05;}
.grid-bg{
  background-image:
    linear-gradient(to right, rgba(17,20,24,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,20,24,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* MS-style top utility */
.ms-top{ background:#0f1115; color:#dcdfe4;}
.ms-top a:hover{ color:white; }
/* Mockup */
.mockup{ border-radius:10px; box-shadow:0 24px 60px -20px rgba(17,20,24,.18), 0 0 0 1px var(--line); background:white; overflow:hidden;}
.scroll-fade{ mask-image: linear-gradient(to bottom, black 86%, transparent 100%); }
.num{ font-variant-numeric: tabular-nums; }
.tabline[aria-selected="true"]{ background:white; box-shadow: inset 0 0 0 1px var(--line); color:var(--ink); }
.tabline{ color:var(--muted); }
.iface-panel[hidden]{ display:none !important; }

/* App switcher dropdown */
.switcher{ position:absolute; top:46px; left:0; z-index:50; display:none;}
.switcher.is-open{ display:block;}

/* Mega menu — anchored to header row, two-column shell */
.has-mega{ position:static;}
.mega{
  position:absolute; left:24px; right:24px; top:calc(100% + 8px);
  margin-inline:auto; max-width:1180px;
  background:white; border:1px solid var(--line-soft);
  border-radius:16px;
  box-shadow:0 30px 80px -20px rgba(13,20,38,.22), 0 6px 18px rgba(13,20,38,.06);
  z-index:60; opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease;
  overflow:hidden;
}
.has-mega:hover .mega, .has-mega:focus-within .mega{ opacity:1; pointer-events:auto; transform:translateY(0);}
/* JS hover-intent: keeps panel open while cursor crosses the gap to the panel */
.has-mega.mega-open .mega{ opacity:1; pointer-events:auto; transform:translateY(0);}
.nav-link.has-mega:hover{ background:var(--paper-2);}
.mega-grid{ display:grid; grid-template-columns: 240px 1fr;}
.mega-side{ background:linear-gradient(160deg, #eef3fb 0%, #f7f9fc 100%); padding:24px 22px; border-right:1px solid var(--line-soft);}
.mega-side .kicker{ font-size:10.5px; letter-spacing:.1em; color:var(--accent); font-weight:700; text-transform:uppercase;}
.mega-side h4{ font-size:18px; font-weight:600; color:var(--ink); margin-top:8px; line-height:1.2;}
.mega-side p{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:10px;}
.mega-side .stat{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft);}
.mega-side .stat .n{ font-family:'JetBrains Mono', monospace; font-size:22px; font-weight:600; color:var(--ink);}
.mega-side .stat .l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}
.mega-body{ padding:22px 24px; display:grid; gap:6px 28px; align-content:start;}
.mega-body.cols-3{ grid-template-columns: repeat(3, 1fr);}
.mega-body.cols-2{ grid-template-columns: repeat(2, 1fr);}
.mega-col h5{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:6px 8px 8px;}
.mega-item{ display:grid; grid-template-columns: 36px 1fr; gap:12px; padding:9px 10px; border-radius:10px; transition:background .15s ease; align-items:start;}
.mega-item:hover{ background:var(--paper-2);}
.mega-item .ico{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.mega-item .t{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.25;}
.mega-item .d{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4;}
.mega-foot{ background:#fafbfd; border-top:1px solid var(--line-soft); padding:12px 24px; display:flex; justify-content:space-between; align-items:center;}

/* Sub header bar */
.subbar{ background:var(--paper-2); border-bottom:1px solid var(--line-soft);}
.subbar a{ font-size:12.5px; color:var(--muted); padding:8px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:6px;}
.subbar a:hover{ color:var(--ink); background:white;}
.subbar a.is-on{ color:var(--ink); background:white; box-shadow:inset 0 -2px 0 var(--accent);}

/* Globe / map — NOC monitoring panel, flat & precise */
.globe-wrap{
  position:relative;
  background:#0a0f1a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden;
  box-shadow: 0 18px 50px -28px rgba(7,11,20,.55);
}
/* single motivated glow behind Istanbul hub only */
.globe-wrap::after{
  content:""; position:absolute; left:58%; top:34%; width:46%; height:55%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:0;
  background: radial-gradient(circle, rgba(15,98,254,.20) 0%, transparent 68%);
}
/* thin top sheen line + corner registration ticks vibe */
.globe-wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 14%);
  border-radius:16px;
}
.globe-wrap > *{ position:relative; z-index:1; }
.globe-stage{ position:relative; aspect-ratio: 16/9; }
/* precise fine dotted grid — monitoring map base */
.globe-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(110,168,255,.16) 1px, transparent 1.4px);
  background-size: 13px 13px;
  mask-image: radial-gradient(ellipse 92% 90% at 56% 42%, black 55%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 56% 42%, black 55%, transparent 92%);
}
.globe-map-img{ filter: brightness(0) invert(1); opacity:.10; }
.globe-head-label{ color:#8b9bb5 !important; }
.globe-rate{ color:#eaf1ff !important; }
.globe-counter-strip{ border-color: rgba(255,255,255,.08) !important; }
.globe-counter-strip .lbl{ color:#6f7d96; }
.globe-counter-strip .val{ color:#f3f7ff; }
.city-pin{ position:absolute; transform:translate(-50%,-50%);}
.city-pin .core{ width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 4px rgba(15,98,254,.18);}
.city-pin.gold .core{ background:#f1a700; box-shadow:0 0 0 4px rgba(241,167,0,.2);}
.city-pin.green .core{ background:#198754; box-shadow:0 0 0 4px rgba(25,135,84,.2);}
.city-pin.red .core{ background:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.2);}
.city-pin .ring{ position:absolute; inset:-6px; border-radius:999px; border:1.5px solid currentColor; opacity:.6; animation: ringpulse 2.4s ease-out infinite;}
.city-pin .lbl{ position:absolute; left:14px; top:-6px; font-size:10.5px; font-weight:600; color:#eaf1ff; white-space:nowrap; background:rgba(14,20,34,.78); border:1px solid rgba(255,255,255,.14); border-radius:4px; padding:1px 6px;}
.city-pin .lbl::before{ content:""; position:absolute; left:-4px; top:50%; transform:translateY(-50%); width:0; height:0; border:4px solid transparent; border-right-color:rgba(14,20,34,.78);}
@keyframes ringpulse{ 0%{ transform:scale(.6); opacity:.7;} 100%{ transform:scale(2.6); opacity:0;}}

.arc-line{ stroke:#6ea8ff; stroke-width:1.1; fill:none; opacity:.28;}
.arc-glow{ stroke:#0f62fe; stroke-width:2; fill:none; stroke-linecap:round;}
@keyframes dashflow{ to{ stroke-dashoffset:-200;}}
.arc-glow{ stroke-dasharray: 6 200; animation: dashflow 2.6s linear infinite;}
.arc-2 .arc-glow{ stroke:#f1a700; animation-duration:3.2s; animation-delay:.4s;}
.arc-3 .arc-glow{ stroke:#198754; animation-duration:2.2s; animation-delay:.8s;}
.arc-4 .arc-glow{ stroke:#7c3aed; animation-duration:2.9s; animation-delay:1.2s;}
.arc-5 .arc-glow{ stroke:#0e7490; animation-duration:2.5s; animation-delay:.2s;}
.arc-6 .arc-glow{ stroke:#dc2626; animation-duration:3.4s; animation-delay:1.6s;}
.arc-7 .arc-glow{ stroke:#0f62fe; animation-duration:2.8s; animation-delay:1s;}

.log-feed{ background:#fbfcfe; color:#3a4456; border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11.5px;}
.log-row{ display:flex; gap:10px; padding:5px 0; border-bottom:1px dashed rgba(13,20,38,.06); animation: logIn .5s ease both;}
.log-row:last-child{ border-bottom:none;}
@keyframes logIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);}}
.log-row .ts{ color:#8a93a4; min-width:54px;}
.log-row .src{ color:#0f62fe; min-width:118px;}
.log-row .dst{ color:#3a4456; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.log-row .tag{ font-weight:700; min-width:42px; text-align:right;}
.log-row.ok .tag{ color:#106c40;}
.log-row.spam .tag{ color:#a51919;}
.log-row.in .tag{ color:#a06f00;}

/* Mail stream animation */
.stream-row{ position:relative; height:36px; overflow:hidden; }
.stream-card{
  position:absolute; left:100%; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:8px;
  background:white; box-shadow:0 1px 0 var(--line), 0 8px 22px -10px rgba(17,20,24,.16);
  border-radius:6px; padding:6px 10px; font-size:12px; white-space:nowrap;
  animation: streamL 16s linear infinite;
}
.stream-row.r2 .stream-card{ animation-direction: reverse; animation-duration:18s;}
.stream-row.r3 .stream-card{ animation-duration:14s;}
.stream-row.r4 .stream-card{ animation-duration:20s; animation-direction:reverse;}
.stream-row.r5 .stream-card{ animation-duration:17s;}
@keyframes streamL{
  from{ transform: translate(0, -50%);}
  to{ transform: translate(calc(-100vw - 200px), -50%);}
}
.pulse-dot{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(.85);} }

/* Map dots */
.map-dot{
  position:absolute; width:8px; height:8px; border-radius:999px;
  background:var(--accent); box-shadow:0 0 0 0 rgba(15,98,254,.5);
  animation: ping 2.4s ease-out infinite;
}
.map-dot.gold{ background:#f1a700; box-shadow: 0 0 0 0 rgba(241,167,0,.5);}
.map-dot.green{ background:#198754; box-shadow: 0 0 0 0 rgba(25,135,84,.5);}
@keyframes ping{
  0%{ box-shadow: 0 0 0 0 currentColor; opacity:1;}
  80%{ box-shadow: 0 0 0 22px transparent; opacity:.4;}
  100%{ box-shadow: 0 0 0 0 transparent; opacity:.4;}
}
.arc{ stroke-dasharray: 6 6; animation: dash 6s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset: -120;} }
.flying-mail{
  position:absolute; width:22px; height:16px; opacity:0;
  animation: flymail 5s ease-in-out infinite;
}
@keyframes flymail{
  0%{ opacity:0; transform: translate(0,0) scale(.8);}
  10%{ opacity:1;}
  90%{ opacity:1;}
  100%{ opacity:0; transform: translate(var(--dx), var(--dy)) scale(1);}
}

/* Inbox count animation */
@keyframes drop{
  from{ transform: translateY(-30px); opacity:0;}
  to{ transform: translateY(0); opacity:1;}
}
.drop-in{ animation: drop .55s cubic-bezier(.2,.8,.2,1) both;}

/* Bar chart */
.bar{ animation: barGrow 1.4s ease-out infinite alternate; transform-origin:bottom;}
@keyframes barGrow{
  from{ transform: scaleY(.55);}
  to{ transform: scaleY(1);}
}

::selection{ background:#0f62fe; color:white; }
details > summary{ list-style:none; cursor:pointer;}
details > summary::-webkit-details-marker{ display:none;}
details[open] .faq-plus{ transform: rotate(45deg);}
.faq-plus{ transition: transform .2s ease;}
.marquee-track{ animation: marquee 50s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Counter */
.counter{ font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum"; }

/* ===================== HERO SLIDER ===================== */
.hero-slider{ position:relative; overflow:hidden; background:#040a18; }
.hero-viewport{ position:relative; min-height:580px; }
@media (max-width:768px){ .hero-viewport{ min-height:520px; } }
.hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .8s ease; }
.hero-slide.is-active{ opacity:1; pointer-events:auto; }
.hero-slide .media{
  position:absolute; inset:0; background-size:cover; background-position:center right;
}
.hero-slide .scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(4,9,22,.95) 0%, rgba(4,9,22,.85) 28%, rgba(4,9,22,.5) 55%, rgba(4,9,22,.08) 80%, transparent 100%);
}
.hero-inner{ position:absolute; inset:0; display:flex; align-items:center; }

/* glass / phone button on dark */
.btn-glass{ display:inline-flex; align-items:center; gap:.5rem; height:46px; padding:0 18px; border-radius:6px; font-size:15px; font-weight:500; color:#fff; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); backdrop-filter:blur(6px); transition:background .15s ease; }
.btn-glass:hover{ background:rgba(255,255,255,.16); }

/* controls */
.hero-ctrls{ position:absolute; left:0; right:0; bottom:26px; z-index:5; }
.hero-dots{ display:flex; gap:8px; }
.hero-dot{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.35); transition:all .25s ease; cursor:pointer; }
.hero-dot:hover{ background:rgba(255,255,255,.6); }
.hero-dot.is-active{ width:26px; background:#fff; }
.hero-arrow{ width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); backdrop-filter:blur(6px); transition:background .15s ease; cursor:pointer; }
.hero-arrow:hover{ background:rgba(255,255,255,.18); }

/* ===== Blog article body typography ===== */
.blog-body{ font-size:16.5px; line-height:1.75; color:var(--ink-2); }
.blog-body > * + *{ margin-top:1.05rem; }
.blog-body h2{ font-size:26px; font-weight:600; letter-spacing:-0.02em; margin-top:2.2rem; line-height:1.2; }
.blog-body h3{ font-size:20px; font-weight:600; margin-top:1.6rem; }
.blog-body p{ color:var(--ink-2); }
.blog-body a{ color:var(--accent); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.blog-body ul,.blog-body ol{ padding-left:1.3rem; }
.blog-body ul{ list-style:disc; } .blog-body ol{ list-style:decimal; }
.blog-body li{ margin-top:.4rem; }
.blog-body blockquote{ border-left:3px solid var(--accent); padding:.4rem 0 .4rem 1rem; color:var(--muted); font-style:italic; }
.blog-body img{ border-radius:12px; max-width:100%; }
.blog-body table{ width:100%; border-collapse:collapse; font-size:14px; }
.blog-body th,.blog-body td{ border:1px solid var(--line); padding:9px 12px; text-align:left; }
.blog-body thead th{ background:var(--paper-2); font-weight:600; }
.blog-body strong{ color:var(--ink); }
.blog-body hr{ border:0; border-top:1px solid var(--line); margin:2rem 0; }