:root { --bg:#070b14; --panel: rgba(14, 22, 38, 0.62); --panel2: rgba(10, 16, 28, 0.72); --border: rgba(130, 190, 255, 0.18); --text: rgba(245, 248, 255, 0.92); --muted: rgba(245, 248, 255, 0.68); --accent: #4CC3FF; --accent2:#7AE2FF; --shadow: 0 10px 40px rgba(0,0,0,.35); }

body { background: radial-gradient(900px 600px at 50% 0%, rgba(76, 195, 255, 0.14), transparent 55%), radial-gradient(700px 500px at 15% 20%, rgba(122, 226, 255, 0.1), transparent 60%), radial-gradient(700px 500px at 85% 25%, rgba(76, 195, 255, 0.08), transparent 60%), var(--bg); color: var(--text); overflow-x: hidden; }

/* --- top nav --- */
.nav-glass { background: rgba(9, 14, 25, 0.58); border-bottom: 1px solid rgba(130, 190, 255, 0.14); backdrop-filter: blur(10px); }

.brandmark { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, rgba(122, 226, 255, 0.35), rgba(76, 195, 255, 0.1)); border: 1px solid rgba(130, 190, 255, 0.22); box-shadow: 0 0 24px rgba(76, 195, 255, 0.12); }

.brandmark span { width: 14px; height: 14px; border-radius: 999px; background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 0 18px rgba(76, 195, 255, 0.55); display: block; }

/* --- glass panels/cards --- */
.glass { background: linear-gradient(180deg, rgba(14, 22, 38, 0.68), rgba(10, 16, 28, 0.68)); border: 1px solid rgba(130, 190, 255, 0.16); box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.35) inset; backdrop-filter: blur(12px); border-radius: 18px; }

.soft-border { border: 1px solid rgba(130, 190, 255, 0.16); border-radius: 18px; }

.muted { color: var(--muted); }

.btn-glow { background: linear-gradient(135deg, rgba(122, 226, 255, 0.95), rgba(76, 195, 255, 0.85)); border: 0; color: #021017; box-shadow: 0 10px 30px rgba(76, 195, 255, 0.18); }

.btn-glow:hover { filter: brightness(1.06); box-shadow: 0 14px 38px rgba(76, 195, 255, 0.22); }

.btn-ghost { border: 1px solid rgba(130, 190, 255, 0.22); color: var(--text); background: rgba(10, 16, 28, 0.35); }

.btn-ghost:hover { background: rgba(10, 16, 28, 0.55); border-color: rgba(130, 190, 255, 0.3); }

.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(130, 190, 255, 0.22), transparent); }

/* --- hero --- */
.hero { position: relative; padding: 7.5rem 0 3.5rem; min-height: 88vh; display: flex; align-items: center; }

.hero-page { min-height: auto; }

.hero-bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 20, 0.55) 0%, rgba(7, 11, 20, 0.76) 40%, rgba(7, 11, 20, 0.92) 100%), url("images/hero-bg-network.png"); /* <-- swap to your chosen background */ background-size: cover; background-position: center; filter: saturate(1.05) contrast(1.05); }

.hero-noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .35; pointer-events: none; }

.hero-content { position: relative; z-index: 2; }

.headline { letter-spacing: -0.02em; line-height: 1.05; }

.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: 999px; background: rgba(10, 16, 28, 0.45); border: 1px solid rgba(130, 190, 255, 0.18); color: var(--muted); font-size: .9rem; }

.pill i { width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 0 14px rgba(76, 195, 255, 0.55); display: inline-block; }

/* --- mini icon blocks --- */
.mini-icon { width: 50px; height: 50px; border-radius: 14px; background: rgba(76, 195, 255, 0.1); border: 1px solid rgba(130, 190, 255, 0.18); display: grid; place-items: center; box-shadow: 0 0 26px rgba(76, 195, 255, 0.1); flex: 0 0 auto; }

/* --- images --- */
.thumb { aspect-ratio: 16/9; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(130, 190, 255, 0.14); overflow: hidden; }

.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.05); opacity: .95; }

.thumb-book { aspect-ratio: 10/16; text-align: center; }

/* --- logo grid for experience --- */
.logo-tile { height: 56px; border-radius: 14px; background: #fff; /* rgba(10,16,28,.42); */ border: 1px solid rgba(130, 190, 255, 0.14); display: grid; place-items: center; overflow: hidden; }

.logo-tile img { max-height: 34px; max-width: 80%; }

/* --- badge chips --- */
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border-radius: 999px; border: 1px solid rgba(130, 190, 255, 0.16); background: rgba(10, 16, 28, 0.35); color: rgba(245, 248, 255, 0.78); font-size: .85rem; margin: .15rem .2rem; white-space: nowrap; }

footer { color: rgba(245, 248, 255, 0.55); }

/*# sourceMappingURL=new_main.css.map */