/* Jenex app shell — shared styling for landing + the authenticated app
 * (dashboard, portfolio, diary…). Visual language taken from the Jenex pitch
 * deck: deep indigo base with purple glows, glassy purple-bordered cards,
 * gradient banner headings and periwinkle highlight numbers. */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600;700;800&display=swap');

:root{
  --bg:#09071a; --panel:#15122e; --panel2:#1c1743; --line:rgba(139,124,255,.20);
  --text:#eae7fb; --muted:#9990c2; --accent:#8b70ff; --accent2:#7c5cff;
  --accent-bright:#7c3aed; --highlight:#9db0ff;
  --good:#2bff9d; --bad:#ff6b8a; --radius:16px;
  --font-display:"Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1000px 560px at 82% -8%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(760px 520px at 2% 8%, rgba(80,60,200,.16), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  min-height:100vh;
}
h1,h2,h3,.brand b,.kpi{ font-family:var(--font-display); }
a{ color:inherit; text-decoration:none; }
.muted{ color:var(--muted); }
.accent{ color:var(--accent); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font-weight:600; cursor:pointer;
  transition:transform .05s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ border-color:var(--accent); }
.btn:active{ transform:translateY(1px); }
.btn-accent{
  border:none;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#0a0710; box-shadow:0 6px 22px rgba(124,92,255,.35);
}
.btn-lg{ padding:15px 30px; font-size:17px; border-radius:14px; }
.btn-ghost{ background:transparent; }

/* ---- brand mark ---- */
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
.brand img{ width:26px; height:26px; }
.brand b{ font-size:18px; }

/* ---- global top toolbar (Everdex-style) ---- */
.topnav{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:18px;
  height:60px; padding:0 20px;
  background:linear-gradient(180deg, rgba(18,12,44,.9), rgba(12,9,30,.78));
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}
.topnav .brand{ flex:0 0 auto; }
.topnav-tabs{
  display:flex; align-items:center; gap:4px;
  margin:0 auto; padding:5px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line);
}
.topnav-tabs a{
  padding:8px 16px; border-radius:10px; color:var(--muted); font-weight:600; font-size:14px; white-space:nowrap;
}
.topnav-tabs a:hover{ color:var(--text); }
.topnav-tabs a.active{ background:linear-gradient(135deg,var(--accent2),var(--accent)); color:#0a0710; }
.topnav-right{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }

/* "please connect your wallet" banner */
.connect-banner{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; font-size:13px; color:var(--muted);
  background:var(--panel); border-bottom:1px solid var(--line);
}
.connect-banner .dot{ width:8px; height:8px; border-radius:50%; background:var(--bad); }

@media (max-width:820px){
  .topnav{ flex-wrap:wrap; height:auto; padding:10px 14px; gap:10px; }
  .topnav-tabs{ order:3; width:100%; margin:0; overflow-x:auto; }
}

/* ---- language switch ---- */
.lang-switch{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.lang-switch button{
  background:transparent; color:var(--muted); border:none; cursor:pointer;
  padding:7px 11px; font-weight:700; font-size:12px; letter-spacing:.04em;
}
.lang-switch button.active{ background:var(--panel2); color:var(--text); }
.lang-switch button:hover{ color:var(--text); }

/* ================= LANDING ================= */
.landing-nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1160px; margin:0 auto; padding:22px 24px;
}
.landing-hero{
  max-width:900px; margin:0 auto; padding:70px 24px 40px; text-align:center;
}
.landing-hero h1{
  font-size:clamp(34px,6vw,60px); line-height:1.05; margin:0 0 18px; letter-spacing:-.5px;
}
.landing-hero h1 .accent{
  background:linear-gradient(120deg,var(--accent),#c9b8ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.landing-hero p{ font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:620px; margin:0 auto 30px; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-note{ margin-top:16px; font-size:13px; color:var(--muted); }

.feature-grid{
  max-width:1080px; margin:30px auto; padding:0 24px 70px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;
}
.landing-footer{ border-top:1px solid var(--line); color:var(--muted); text-align:center; padding:26px 24px; font-size:13px; }

/* ---- landing sections ---- */
.section{ max-width:1080px; margin:0 auto; padding:56px 24px; }
.section-head{ text-align:center; margin-bottom:36px; }
.section-head h2{
  display:inline-block; font-size:clamp(20px,3vw,30px); margin:0 0 14px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  padding:12px 34px; border-radius:999px;
  background:linear-gradient(100deg, var(--accent-bright), var(--accent));
  box-shadow:0 12px 36px rgba(124,58,237,.42);
}
.section-head p{ color:var(--muted); margin:0 auto; max-width:560px; }

/* product cards with a badge in the header */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.prod-card{
  background:linear-gradient(180deg, rgba(34,27,74,.72), rgba(18,14,42,.72));
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.32);
}
.prod-card .head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.prod-card h3{ margin:0; font-size:17px; }
.prod-card p{ margin:0; color:var(--muted); font-size:14px; }
.tag{ font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.tag.testnet{ color:var(--accent); border:1px solid rgba(124,92,255,.45); }
.tag.roadmap{ color:var(--muted); border:1px solid var(--line); }

/* how-it-works steps */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; counter-reset:step; }
.step{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:relative; }
.step .n{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#0a0710; background:linear-gradient(135deg,var(--accent2),var(--accent)); margin-bottom:12px;
}
.step h3{ margin:0 0 6px; font-size:16px; }
.step p{ margin:0; color:var(--muted); font-size:14px; }

/* roadmap timeline */
.roadmap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.road-item{ border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:var(--panel); border-top:3px solid var(--accent); }
.road-item .when{ color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.04em; }
.road-item h3{ margin:6px 0 8px; font-size:18px; }
.road-item p{ margin:0; color:var(--muted); font-size:14px; }

/* bottom CTA band */
.cta-band{ text-align:center; max-width:760px; margin:20px auto 70px; padding:44px 24px;
  border:1px solid rgba(124,92,255,.3); border-radius:20px;
  background:radial-gradient(600px 300px at 50% -40%, rgba(124,92,255,.22), transparent 70%), var(--panel); }
.cta-band h2{ font-size:clamp(24px,4vw,34px); margin:0 0 8px; }
.cta-band p{ color:var(--muted); margin:0 0 20px; }

/* ---- card ---- */
.card{
  background:linear-gradient(180deg, rgba(34,27,74,.72), rgba(18,14,42,.72));
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.32);
}
.card h3{ margin:0 0 8px; font-size:16px; }
.card p{ margin:0; color:var(--muted); font-size:14px; }
.card .kpi{ font-size:28px; font-weight:700; color:var(--highlight); }

/* ================= APP SHELL ================= */
.app-topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  height:58px; padding:0 18px;
  background:rgba(9,12,22,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.app-topbar .spacer{ flex:1; }
.wallet-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel2); font-weight:600; font-size:14px;
}
.wallet-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--good); }

.app-layout{ display:flex; align-items:stretch; min-height:calc(100vh - 58px); }
.sidebar{
  width:230px; flex:0 0 230px; border-right:1px solid var(--line);
  padding:16px 12px; background:rgba(13,18,32,.5);
}
.sidebar a{
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:10px;
  color:var(--muted); font-weight:600; margin-bottom:4px;
}
.sidebar a:hover{ background:var(--panel2); color:var(--text); }
.sidebar a.active{ background:rgba(124,92,255,.14); color:var(--text); border:1px solid rgba(124,92,255,.35); }
.sidebar .side-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); padding:14px 13px 6px; }

.app-main{ flex:1; padding:26px 28px; max-width:1200px; }
.app-main h1{ margin:0 0 4px; font-size:24px; }
.app-main .sub{ color:var(--muted); margin:0 0 22px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.stub{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:40px; text-align:center; color:var(--muted); margin-top:8px;
}
.badge-soon{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(124,92,255,.4); border-radius:999px; padding:3px 10px;
}

@media (max-width:760px){
  .sidebar{ display:none; }
  .app-main{ padding:18px; }
}