:root {
  --bg: #040818;
  --bg-card: #0b1120;
  --accent: #22c55e;
  --accent-2: #0ea5e9;
  --text-main: #f9fafb;
  --text-muted: #9ca3af;
  --border: #1f2937;
  --danger: #fb7185;
  --radius-lg: 1.25rem;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.55);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.18), transparent 60%),
    radial-gradient(circle at 85% 100%, rgba(34, 197, 94, 0.14), transparent 60%),
    var(--bg);
  color: var(--text-main);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* NAVBAR */
header.nav { position: sticky; top: 0; z-index: 100; background: rgba(2, 6, 23, 0.9); border-bottom: 1px solid rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); }
.nav-inner { max-width: 1220px; margin: 0 auto; padding: 0.6rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.brand-logo { width: 34px; height: 34px; border-radius: 999px; background: radial-gradient(circle at 30% 0, #ffffff, #22c55e 50%, #0ea5e9); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #020617; box-shadow: 0 0 22px rgba(34, 197, 94, 0.7); }
.brand-title { font-size: 1.1rem; font-weight: 700; }
.brand-sub { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); }
nav.nav-links { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; white-space: nowrap; }
nav.nav-links a { padding: 0.25rem 0.7rem; border-radius: 999px; color: var(--text-muted); transition: background 0.15s ease, color 0.15s ease; }
nav.nav-links a:hover, nav.nav-links a.active { background: rgba(15, 23, 42, 0.9); color: var(--text-main); }
.nav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pill { font-size: 0.7rem; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid rgba(45, 212, 191, 0.8); background: rgba(15, 23, 42, 0.9); color: #a5f3fc; text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; }
.btn { border-radius: 999px; border: none; cursor: pointer; padding: 0.55rem 1.2rem; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; white-space: nowrap; }
.btn-primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #020617; box-shadow: 0 12px 30px rgba(34, 197, 94, 0.35); }
.btn-primary:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 16px 40px rgba(34, 197, 94, 0.55); }
.btn-ghost { background: rgba(15, 23, 42, 0.9); color: var(--text-main); border: 1px solid rgba(148, 163, 184, 0.7); }
.btn-link { background: none; border: none; color: #93c5fd; cursor: pointer; padding: 0; }
/* LAYOUT */
.container { max-width: 1220px; margin: 0 auto; padding: 1.8rem 1.5rem 3.5rem; }
main { min-height: 100vh; }
section { margin-top: 3.5rem; scroll-margin-top: 90px; }
/* HERO */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; margin-top: 1.5rem; align-items: center; }
.hero-kickers { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--text-muted); }
h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.12; margin-bottom: 0.6rem; }
.hero-sub { font-size: 0.95rem; color: var(--text-muted); max-width: 36rem; margin-bottom: 1.2rem; }
.hero-bullets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem; margin-bottom: 1.4rem; }
.chip { padding: 0.5rem 0.7rem; border-radius: 0.85rem; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(31, 41, 55, 0.9); font-size: 0.8rem; color: var(--text-muted); }
.hero-card { background: var(--bg-card); border-radius: 1.5rem; border: 1px solid var(--border); padding: 1.2rem 1.3rem 1.4rem; box-shadow: var(--shadow-soft); }
.hero-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; font-size: 0.8rem; color: var(--text-muted); }
.hero-tag { font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid rgba(34, 197, 94, 0.7); color: var(--accent); background: rgba(22, 163, 74, 0.1); text-transform: uppercase; letter-spacing: 0.13em; }
.hero-label { font-size: 0.75rem; color: #bbf7d0; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.3rem; }
.hero-price-row { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.4rem; }
.hero-price { font-size: 2.1rem; font-weight: 800; }
.hero-price-sub { font-size: 0.75rem; color: var(--text-muted); }
.hero-list { list-style: none; margin-top: 0.6rem; margin-bottom: 1rem; display: grid; gap: 0.45rem; font-size: 0.82rem; color: var(--text-muted); }
.hero-list li { display: flex; gap: 0.4rem; align-items: flex-start; }
.dot { width: 7px; height: 7px; border-radius: 999px; margin-top: 0.25rem; background: linear-gradient(120deg, var(--accent), var(--accent-2)); flex-shrink: 0; }
.hero-meta { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.75rem; color: var(--text-muted); border-top: 1px dashed rgba(55, 65, 81, 0.9); padding-top: 0.6rem; }
/* VALUE GRID */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1rem; margin-top: 2rem; }
.value-card { background: rgba(15,23,42,0.95); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; }
.value-card h3 { margin-bottom: .3rem; }
/* PARTNER CAROUSEL */
.partners { margin-top: 2.2rem; }
.partner-strip { display: flex; gap: 1rem; overflow:hidden; border: 1px solid var(--border); border-radius: 1rem; padding: .8rem; background: rgba(2,6,23,0.8); }
.partner-strip .logo { flex: 0 0 auto; padding: .5rem .9rem; border: 1px solid rgba(148,163,184,0.3); border-radius: .8rem; color: #cbd5e1; background: rgba(15,23,42,0.95); }
.partner-strip .marquee { display:flex; gap:1rem; animation: marquee 16s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* SECTIONS */
.section-title { font-size: 1.7rem; margin-bottom: 0.5rem; }
.section-sub { font-size: 0.9rem; color: var(--text-muted); max-width: 40rem; }
.card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1.2rem 1.3rem 1.4rem; box-shadow: var(--shadow-soft); }
/* OFFERS */
.offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 0.8rem; }
.offer-card { background: rgba(15,23,42,0.96); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1rem 1.1rem; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.offer-card:hover { transform: translateY(-2px); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.offer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.offer-title { font-size: 1.05rem; }
.offer-sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.offer-list { list-style: none; display:grid; gap:.35rem; font-size:.85rem; color:#e5e7eb; }
.offer-details { max-height: 0; overflow: hidden; transition: max-height .3s ease; border-top: 1px dashed rgba(55, 65, 81, 0.6); margin-top: .6rem; padding-top: .6rem; }
.offer-card:hover .offer-details { max-height: 300px; }
.offer-actions { display:flex; gap:.6rem; margin-top:.8rem; }
.price-badge { font-weight:700; color: var(--accent); }
/* FORMS */
form { display: grid; gap: 0.8rem; margin-top: 0.5rem; }
label { font-size: 0.8rem; color: var(--text-muted); display: block; margin-bottom: 0.2rem; }
input, select, textarea { width: 100%; padding: 0.65rem 0.75rem; border-radius: 0.85rem; border: 1px solid rgba(55, 65, 81, 0.95); background: rgba(15, 23, 42, 0.95); color: var(--text-main); font-size: 0.9rem; outline: none; transition: border 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.7); background: #020617; }
textarea { resize: vertical; min-height: 100px; }
.form-helper { font-size: 0.75rem; color: var(--text-muted); }
footer { border-top: 1px solid rgba(15, 23, 42, 0.95); padding: 1.4rem 1.5rem 2rem; font-size: 0.75rem; color: var(--text-muted); text-align: center; background: rgba(2, 6, 23, 0.98); }
.text-danger { color: var(--danger); font-weight: 500; }
/* CHATBOT */
.chatbot-container { position: fixed; right: 18px; bottom: 90px; z-index: 120; }
.chatbot-toggle { border-radius: 999px; background: rgba(15, 23, 42, 0.95); color: var(--text-main); border: 1px solid rgba(148, 163, 184, 0.7); padding: 0.4rem 0.8rem; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.chatbot-window { margin-top: 0.5rem; width: 280px; max-height: 360px; background: rgba(15, 23, 42, 0.98); border-radius: 1rem; border: 1px solid rgba(55, 65, 81, 0.95); box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9); display: none; flex-direction: column; overflow: hidden; }
.chatbot-window.open { display: flex; }
.chatbot-header { padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(31, 41, 55, 0.95); font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; }
.chatbot-header-title { font-weight: 600; }
.chatbot-header-sub { font-size: 0.7rem; color: var(--text-muted); }
.chatbot-messages { padding: 0.6rem 0.7rem; flex: 1; overflow-y: auto; font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.4rem; }
.chatbot-msg { padding: 0.35rem 0.5rem; border-radius: 0.6rem; max-width: 85%; }
.chatbot-msg.bot { background: rgba(30, 64, 175, 0.7); align-self: flex-start; }
.chatbot-msg.user { background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(55, 65, 81, 0.9); align-self: flex-end; }
.chatbot-input-area { padding: 0.5rem 0.6rem; border-top: 1px solid rgba(31, 41, 55, 0.95); display: flex; gap: 0.3rem; }
.chatbot-input-area input { flex: 1; font-size: 0.8rem; padding: 0.35rem 0.5rem; }
.chatbot-input-area button { font-size: 0.8rem; padding: 0.3rem 0.6rem; border-radius: 0.6rem; border: none; cursor: pointer; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #020617; }
.chatbot-quick { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.4rem 0.6rem 0.1rem; border-top: 1px solid rgba(31, 41, 55, 0.95); font-size: 0.7rem; }
.chatbot-quick button { border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); background: rgba(15, 23, 42, 0.95); color: var(--text-main); padding: 0.15rem 0.5rem; cursor: pointer; }
/* ROBOT TOAST */
.robot-toast { position: fixed; left: 18px; bottom: 18px; z-index: 130; display:flex; align-items:center; gap:.6rem; background: rgba(15,23,42,0.95); border:1px solid rgba(148,163,184,0.4); border-radius: .9rem; padding: .6rem .8rem; box-shadow: 0 16px 45px rgba(0,0,0,.4); animation: slideUp .4s ease; }
.robot-avatar { font-size: 1.4rem; }
.robot-text { font-size: .85rem; color: #e5e7eb; }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* LOGIN PAGE specific tweaks */
.login-wrapper { max-width: 420px; margin: 0 auto; }
.login-meta { display:flex; justify-content: space-between; align-items: center; gap:.6rem; }
.remember { display:flex; align-items:center; gap:.4rem; font-size:.85rem; color: var(--text-muted); }
.helper-row { margin-top:.6rem; display:flex; justify-content: space-between; align-items:center; gap:.6rem; flex-wrap:wrap; }
.wealth-anim { margin:.4rem 0 1rem; height:8px; background: linear-gradient(90deg,#22c55e,#0ea5e9,#22c55e); background-size:200% 100%; animation: wealth 2.6s linear infinite; border-radius:999px; }
@keyframes wealth { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,6,23,0.7); z-index: 120; }
.modal.open { display: flex; }
.modal-card { width: 92%; max-width: 420px; background: rgba(15, 23, 42, 0.98); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.modal-title { font-weight:600; }
.modal-close { background:none; border:none; color: var(--text-muted); font-size:1.1rem; cursor:pointer; }
.modal-msg { margin-top:.6rem; font-size:.9rem; color: #e5e7eb; }
.modal-msg.success { color: #86efac; }
.modal-msg.error { color: var(--danger); }
/* DASHBOARD */
.dashboard-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
@media(max-width:900px){ .dashboard-grid{ grid-template-columns: 1fr; } }
.card-title { font-weight:700; margin-bottom:.4rem; }
.list { list-style:none; display:grid; gap:.4rem; }
.list li { display:flex; align-items:center; justify-content: space-between; gap:.6rem; }
.badge { font-size:.75rem; padding:.2rem .5rem; border-radius:.6rem; border:1px solid rgba(148,163,184,.5); color:#cbd5e1; }
/* ADMIN SECTION */
.admin-setup-notice { background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(34, 197, 94, 0.1)); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 0.85rem; padding: 1.2rem; margin-bottom: 1.5rem; }
.admin-setup-notice h4 { color: #38bdf8; margin-bottom: 0.6rem; font-size: 1rem; }
.admin-setup-notice p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; }
.admin-setup-notice code { background: rgba(15, 23, 42, 0.9); padding: 0.2rem 0.5rem; border-radius: 0.4rem; color: #10b981; font-family: 'Courier New', monospace; font-size: 0.8rem; }
/* WELCOME SECTION */
.welcome-section { background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(14, 165, 233, 0.1)); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 1.25rem; padding: 2rem 1.5rem; margin-bottom: 2.5rem; text-align: center; }
.welcome-section h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.8rem; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.welcome-phrase { font-size: 1.1rem; color: var(--text-muted); font-style: italic; margin-bottom: 0; line-height: 1.6; }
/* NETWORTH DISPLAY */
.networth-display { text-align: center; padding: 1.5rem 0; }
.networth-amount { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; }
.networth-label { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.networth-updated { font-size: 0.8rem; color: var(--text-muted); opacity: 0.8; }
/* MOBILE DASHBOARD */
@media (max-width: 768px) {
  .welcome-section { padding: 1.5rem 1rem; margin-bottom: 2rem; }
  .welcome-section h1 { font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: 0.6rem; }
  .welcome-phrase { font-size: 0.95rem; }
  .networth-amount { font-size: clamp(1.6rem, 5vw, 2.5rem); margin-bottom: 0.4rem; }
  .list li { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .list li span:last-child { display: flex; width: 100%; }
}
/* NOTIFICATIONS */
.notification { position: fixed; top: 100px; right: 20px; padding: 1rem 1.5rem; border-radius: 0.85rem; font-size: 0.9rem; z-index: 150; animation: slideInRight 0.3s ease, slideOutRight 0.3s ease 4.7s; max-width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.notification.success { background: rgba(22, 163, 74, 0.2); border: 1px solid rgba(34, 197, 94, 0.5); color: #86efac; }
.notification.error { background: rgba(251, 113, 133, 0.2); border: 1px solid rgba(251, 113, 133, 0.5); color: var(--danger); }
.notification.info { background: rgba(14, 165, 233, 0.2); border: 1px solid rgba(14, 165, 233, 0.5); color: #38bdf8; }
@keyframes slideInRight { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } }
/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
  .container { padding: 1.2rem 1rem 2.5rem; }
  h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
  .hero { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1rem; }
  .hero-bullets { grid-template-columns: 1fr; }
  .nav-inner { padding: 0.5rem 1rem; gap: 0.5rem; flex-wrap: wrap; }
  nav.nav-links { gap: 0.5rem; font-size: 0.8rem; }
  nav.nav-links a { padding: 0.2rem 0.5rem; }
  .nav-right { gap: 0.3rem; }
  .pill { font-size: 0.65rem; padding: 0.2rem 0.5rem; }
  .btn { padding: 0.45rem 0.9rem; font-size: 0.75rem; }
  .hero-card { padding: 0.9rem 1rem; }
  .hero-meta { flex-direction: column; gap: 0.5rem; }
  .hero-price { font-size: 1.6rem; }
  .value-grid { grid-template-columns: 1fr; }
  .offers-grid { grid-template-columns: 1fr; }
  .section-title { font-size: 1.3rem; }
  .partner-strip { padding: 0.6rem; gap: 0.6rem; }
  .partner-strip .logo { padding: 0.4rem 0.6rem; font-size: 0.75rem; }
  .login-wrapper { max-width: 100%; padding: 0 1rem; }
  .modal-card { width: 95%; }
  .login-meta { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .helper-row { flex-direction: column; }
  .helper-row > * { width: 100%; }
  .btn { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .chatbot-container { right: 10px; bottom: 80px; }
  .chatbot-window { width: 85vw; max-width: 280px; }
  .notification { right: 10px; max-width: calc(100vw - 20px); }
}
@media (max-width: 480px) {
  .container { padding: 1rem 0.8rem 2rem; }
  h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .brand-sub { display: none; }
  nav.nav-links a { padding: 0.2rem 0.4rem; }
  nav.nav-links { gap: 0.3rem; font-size: 0.75rem; }
  .hero-kickers { font-size: 0.7rem; margin-bottom: 0.8rem; }
  .hero-sub { font-size: 0.85rem; margin-bottom: 0.8rem; }
  .chip { padding: 0.4rem 0.5rem; font-size: 0.7rem; }
  .hero-list { font-size: 0.75rem; }
  .hero-price { font-size: 1.4rem; }
  .hero-price-row { flex-direction: column; gap: 0.3rem; align-items: flex-start; }
  .hero-card-header { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .offer-header { flex-direction: column; align-items: flex-start; }
  .section-title { font-size: 1.1rem; margin-bottom: 0.4rem; }
  .card { padding: 0.8rem; }
  footer { padding: 1rem 0.8rem 1.5rem; font-size: 0.7rem; }
  form { gap: 0.6rem; }
  input, select, textarea { padding: 0.5rem 0.6rem; font-size: 0.85rem; }
  label { font-size: 0.75rem; margin-bottom: 0.15rem; }
}