:root{
  --bg:#f4f8ff;
  --surface:#ffffff;
  --surface-2:#eef6ff;
  --text:#0b1f44;
  --muted:#60708d;
  --line:#dbe8f7;
  --blue:#0879ef;
  --blue-2:#0f5ccb;
  --cyan:#26b9f4;
  --green:#0fb981;
  --purple:#7654e8;
  --orange:#f59e0b;
  --rose:#e74f8a;
  --indigo:#5261df;
  --slate:#46627f;
  --shadow:0 12px 32px rgba(20,74,140,.08);
  --shadow-hover:0 18px 45px rgba(12,91,182,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 85% 10%, rgba(78,184,255,.14), transparent 25rem),
    linear-gradient(180deg,#fff 0,#f6faff 34rem,#f3f8ff 100%);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.container{width:calc(100% - 24px);max-width:none;margin-inline:auto}

.topbar{
  position:sticky; top:0; z-index:70;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(219,232,247,.85);
  backdrop-filter:blur(18px);
}
.topbar-inner{
  min-height:88px;
  display:grid;
  grid-template-columns:minmax(240px,320px) minmax(320px,1fr) minmax(240px,330px);
  align-items:center;
  gap:20px;
}
.brand{display:flex;align-items:center}
.brand img{width:min(270px,100%);max-height:72px;object-fit:contain;object-position:left center}
.search-wrap{
  display:flex;align-items:center;gap:10px;
  max-width:640px;width:100%;justify-self:center;
  padding:0 14px;height:46px;
  border:1px solid var(--line);border-radius:14px;background:#f7fbff;
}
.search-wrap svg{width:20px;fill:none;stroke:#6f82a0;stroke-width:1.9;stroke-linecap:round}
.search-wrap input{border:0;outline:0;background:transparent;width:100%;color:var(--text)}
.search-wrap input::placeholder{color:#91a0b7}
.search-wrap kbd{border:1px solid #d5e1ef;background:#fff;border-radius:7px;padding:2px 7px;color:#8190a8;font-size:12px}
.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:15px}
.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center}
.icon-btn svg{width:20px;fill:none;stroke:#425c7f;stroke-width:1.8;stroke-linecap:round}
.profile{display:flex;align-items:center;gap:10px;padding-left:3px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#28b9f5,#0c67dc);color:white;font-weight:800}
.profile-copy{display:flex;flex-direction:column;line-height:1.2}
.profile-copy strong{font-size:14px}
.profile-copy span{font-size:12px;color:var(--muted);margin-top:4px}

/* ENTERPRISE NAV */
.enterprise-nav{
  position:sticky;
  top:88px;
  z-index:65;
  background:#ffffff;
  border-bottom:1px solid #dfe8f4;
  box-shadow:0 8px 20px rgba(20,74,140,.05);
}
.enterprise-nav-inner{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.nav-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:116px;
  padding:12px 22px;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  color:#324a6a;
  transition:.2s ease;
}
.nav-item:hover,
.nav-item.active{
  color:#0a6cdb;
  background:linear-gradient(135deg,#eef6ff,#e5f2ff);
  box-shadow:0 10px 20px rgba(15,101,213,.08);
}

main{padding-bottom:26px}
.hero{
  margin-top:24px; min-height:330px; border-radius:30px; overflow:hidden;
  background:
    linear-gradient(110deg,rgba(235,247,255,.98),rgba(235,247,255,.8)),
    radial-gradient(circle at 85% 50%,rgba(14,127,246,.22),transparent 28rem);
  border:1px solid #d9eafa;
  display:grid; grid-template-columns:1.08fr .92fr;
  position:relative; box-shadow:var(--shadow);
}
.hero:before{
  content:""; position:absolute; inset:auto -10% -55% 38%; height:390px;
  border-radius:50%; background:linear-gradient(180deg,rgba(17,132,239,.12),rgba(70,192,255,.05));
  transform:rotate(-8deg);
}
.hero-copy{padding:46px clamp(34px,4vw,72px); position:relative; z-index:2}
.eyebrow,.section-kicker{font-size:12px;letter-spacing:.2em;color:#0e78e8;font-weight:800}
.hero h1{font-size:clamp(38px,3.6vw,58px);line-height:1.03;margin:16px 0 16px;letter-spacing:-.035em}
.hero p{font-size:18px;line-height:1.6;color:#49617f;max-width:900px;margin:0}
.hero-points{display:flex;flex-wrap:wrap;gap:22px;margin-top:28px}
.hero-points span{display:flex;align-items:center;gap:8px;color:#2e5c91;font-size:14px;font-weight:650}
.hero-points i{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#168af4,#045ecf);position:relative;box-shadow:0 4px 10px rgba(9,112,225,.2)}
.hero-points i:after{content:"";position:absolute;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);left:5px;top:6px}

.hero-art{position:relative;min-height:330px}
.network{position:absolute;width:280px;height:280px;left:50%;top:50%;transform:translate(-50%,-50%)}
.core{position:absolute;width:150px;height:150px;border-radius:42px;left:65px;top:65px;display:grid;place-items:center;background:radial-gradient(circle at 38% 28%,#8de6ff,transparent 35%),linear-gradient(145deg,#2bc0ff,#0753c8);box-shadow:0 30px 50px rgba(5,93,193,.22)}
.core img{width:115px;height:115px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(3,68,150,.12))}
.node{position:absolute;width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#39c6ff,#075ad4);box-shadow:0 14px 26px rgba(11,103,219,.2)}
.n1{left:113px;top:0}.n2{left:5px;bottom:20px}.n3{right:5px;bottom:20px}
.line{position:absolute;height:8px;border-radius:10px;background:linear-gradient(90deg,#8edfff,#0e6ce6);transform-origin:left center}
.l1{width:62px;left:139px;top:61px;transform:rotate(90deg)}
.l2{width:88px;left:59px;bottom:73px;transform:rotate(-26deg)}
.l3{width:88px;right:56px;bottom:66px;transform:rotate(205deg)}
.orb{position:absolute;border:1px solid rgba(44,145,241,.25);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.orb-a{width:430px;height:230px}.orb-b{width:520px;height:300px;transform:translate(-50%,-50%) rotate(-9deg)}

.section{padding-top:42px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.section-heading h2,.about-box h3,.contact-text h3{margin:6px 0 0;font-size:26px;letter-spacing:-.02em}
.filter-note{font-size:13px;color:#6d7f99;background:#eaf4ff;padding:8px 12px;border-radius:999px}

.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.app-card{
  border:1px solid #e0ebf7;background:rgba(255,255,255,.95);border-radius:20px;
  min-height:118px;padding:18px 18px;display:flex;align-items:center;gap:16px;
  color:inherit;position:relative;box-shadow:0 6px 20px rgba(20,74,140,.05);
  transition:.2s ease;overflow:hidden;text-align:left;width:100%;
}
.app-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(13,119,236,.05),transparent 45%);opacity:0;transition:.2s}
.app-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:#cfe3fb}
.app-card:hover:before{opacity:1}
.app-button{cursor:pointer;font:inherit}
.upcoming{border-style:dashed}
.app-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:0 0 58px}
.app-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.blue{background:#e3f1ff;color:#0879ef}.teal{background:#dff8f5;color:#0b9d90}.green{background:#e1f8f0;color:#0da878}.purple{background:#eee8ff;color:#7552e8}.orange{background:#fff0d9;color:#e38d0c}.cyan{background:#def6ff;color:#109cd5}.rose{background:#ffe3ee;color:#d93d78}.indigo{background:#e7eaff;color:#5261df}.slate{background:#e9f0f6;color:#496782}
.app-content{min-width:0;position:relative;z-index:2}
.app-content h3{font-size:18px;margin:0 0 6px;letter-spacing:-.01em}
.app-content p{font-size:13px;line-height:1.45;color:#687b96;margin:0}
.launch{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#edf6ff;color:#0879ef;font-size:18px;font-weight:700;position:relative;z-index:2}
.status-pill{position:absolute;right:14px;top:12px;font-size:10px;font-weight:750;color:#7a8799;background:#f3f6f9;border:1px solid #e3e9ef;border-radius:999px;padding:5px 8px}
.empty-search{padding:40px;text-align:center;color:var(--muted);background:#fff;border-radius:18px;border:1px dashed var(--line)}

.online-pill{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:#14885f;background:#e7f8f0;padding:8px 12px;border-radius:999px;font-weight:700
}
.online-pill i{width:8px;height:8px;border-radius:50%;background:#12b377;box-shadow:0 0 0 4px rgba(18,179,119,.12)}

.system-layout{
  display:grid;
  grid-template-columns:1.55fr .95fr;
  gap:18px;
}
.stats-grid,.about-box,.contact-main,.contact-info{
  background:rgba(255,255,255,.96);
  border:1px solid #dfebf7;
  border-radius:24px;
  padding:26px;
  box-shadow:0 8px 22px rgba(20,74,140,.04);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.stat-box{
  min-height:144px;
  border-radius:20px;
  border:1px solid #e4edf8;
  background:linear-gradient(150deg, rgba(13,118,237,.05), rgba(255,255,255,.96));
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.stat-box strong{font-size:30px;letter-spacing:-.03em;color:#0b2d62}
.stat-box span{margin-top:8px;font-size:14px;color:#6f819b}
.about-badge{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#eaf4ff,#deeeff);
  color:#0b6fdf;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.about-box p{font-size:16px;line-height:1.7;color:#536881}
.domain-chip{display:inline-block;margin-top:8px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,#0d76ed,#0b5fcb);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;box-shadow:0 12px 20px rgba(13,114,232,.18)}

.contact-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
}
.contact-main{
  display:flex;
  align-items:center;
  gap:18px;
  background:linear-gradient(140deg, rgba(234,244,255,.95), rgba(255,255,255,.96));
}
.contact-avatar{
  width:92px;height:92px;border-radius:26px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#28b9f5,#0c67dc);
  color:#fff;font-weight:800;font-size:28px;
  box-shadow:0 18px 30px rgba(11,103,220,.18)
}
.contact-text p{margin:10px 0 0;color:#5f748f;line-height:1.6}
.contact-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.info-card{
  min-height:120px;
  border-radius:18px;
  border:1px solid #e4edf8;
  background:#fbfdff;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.info-card .label{font-size:12px;color:#0a70df;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.info-card a,.info-card span:last-child{font-size:18px;color:#143562;font-weight:700;word-break:break-word}

footer{
  border-top:1px solid #dce8f5;background:rgba(255,255,255,.7);margin-top:42px
}
.footer-inner{min-height:96px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:42px;height:42px;object-fit:contain}
.footer-brand div{display:flex;flex-direction:column}
.footer-brand span{font-size:11px;color:var(--muted);margin-top:3px}
.footer-copy{font-size:12px;color:#73859e}

.toast{
  position:fixed;right:22px;bottom:22px;z-index:80;max-width:360px;
  background:#0b1f44;color:#fff;border-radius:14px;padding:13px 16px;
  box-shadow:0 16px 40px rgba(3,28,68,.25);opacity:0;transform:translateY(15px);pointer-events:none;transition:.25s;
}
.toast.show{opacity:1;transform:translateY(0)}

body.dark{
  --bg:#0b1423;--surface:#111d2f;--surface-2:#13253a;--text:#edf5ff;--muted:#9bb0ca;--line:#213650;
  background:radial-gradient(circle at 85% 10%,rgba(30,132,255,.12),transparent 25rem),#0b1423;
}
body.dark .topbar,body.dark .enterprise-nav,body.dark footer{
  background:rgba(10,20,34,.94);border-color:#1d324d
}
body.dark .search-wrap,body.dark .icon-btn,body.dark .app-card,body.dark .stats-grid,body.dark .about-box,body.dark .contact-main,body.dark .contact-info,.body.dark .info-card{
  background:#111d2f;border-color:#223953
}
body.dark .nav-item{color:#b4c6dc}
body.dark .nav-item:hover,body.dark .nav-item.active{
  color:#f4f8ff;
  background:linear-gradient(135deg,#17314e,#1a3552);
  box-shadow:none;
}
body.dark .search-wrap input{color:#edf5ff}
body.dark .search-wrap kbd{background:#152943;border-color:#284463;color:#a9bad0}
body.dark .hero{background:linear-gradient(120deg,#13283f,#102236);border-color:#23415f}
body.dark .hero p,body.dark .app-content p,body.dark .about-box p,body.dark .contact-text p{color:#9fb2ca}
body.dark .stat-box,.body.dark .info-card{background:#122238;border-color:#223953}
body.dark .stat-box strong,body.dark .info-card a,body.dark .info-card span:last-child,body.dark .contact-text h3{color:#edf5ff}
body.dark .footer-copy,body.dark .footer-brand span{color:#9ab0cb}

#apps, #system, #contact, #footer{
  scroll-margin-top: 170px;
}

@media (min-width:1700px){
  .container{width:calc(100% - 32px)}
}
@media (max-width:1100px){
  .topbar-inner{grid-template-columns:230px 1fr auto}
  .brand img{width:190px}
  .profile-copy{display:none}
  .hero{grid-template-columns:1fr}
  .hero-art{display:none}
  .app-grid{grid-template-columns:repeat(2,1fr)}
  .system-layout,.contact-layout{grid-template-columns:1fr}
}
@media (max-width:720px){
  .container{width:calc(100% - 16px)}
  .topbar-inner{min-height:74px;grid-template-columns:1fr auto}
  .brand img{width:170px}
  .search-wrap{display:none}
  .enterprise-nav{top:74px}
  .enterprise-nav-inner{
    min-height:56px;
    justify-content:flex-start;
    overflow:auto;
    white-space:nowrap;
    padding:0 2px;
  }
  .nav-item{
    min-width:auto;
    flex:0 0 auto;
    padding:10px 16px;
    font-size:15px;
  }
  .hero{margin-top:18px;min-height:0}
  .hero-copy{padding:32px 24px}
  .hero h1{font-size:36px}
  .hero p{font-size:15px}
  .hero-points{gap:10px 16px;margin-top:22px}
  .section{padding-top:30px}
  .app-grid{grid-template-columns:1fr}
  .stats-grid,.contact-info{grid-template-columns:1fr}
  .contact-main{flex-direction:column;align-items:flex-start}
  .footer-inner{flex-direction:column;align-items:flex-start;padding:22px 0}
  #apps, #system, #contact, #footer{scroll-margin-top:130px}
}