/* V5 — Dark premium theme (Black - Gray - White) with soft cyan accents and animations */

:root{
  --bg-0: #030305;
  --bg-1: #0b0c10;
  --card: #0f1114;
  --text: #eceff4;
  --muted: #a8b0bb;
  --accent: #9be8ff; /* cyan accent */
  --accent-2: #6ec8ff;
  --glass: rgba(255,255,255,0.03);
  --radius: 14px;
  --ease: cubic-bezier(.2,.9,.3,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(80,90,120,0.03), transparent), var(--bg-0);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}

/* NAV - appears as a circle that expands into a floating pill */
.nav-wrap{
  position:fixed;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  pointer-events:none;
}

/* the circle that will expand */
.nav-circle{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:0 6px 30px rgba(0,0,0,0.6), 0 0 20px rgba(100,160,255,0.03);
  display:flex;align-items:center;justify-content:center;
  transition: transform 0.7s var(--ease), width 0.7s var(--ease), height 0.7s var(--ease), border-radius 0.7s var(--ease);
  backdrop-filter: blur(8px);
  pointer-events:auto;
  overflow:hidden;
}

/* expanded pill */
.nav-circle.expanded{
  width:820px; height:64px; border-radius:40px;
}

/* nav content */
.nav-inner{
  display:flex;align-items:center;gap:24px;padding:0 16px;width:100%;height:100%;
  opacity:0; transform:translateY(-6px); transition:opacity 0.4s ease 0.3s, transform 0.5s ease 0.3s;
}
.nav-circle.expanded .nav-inner{ opacity:1; transform:none; pointer-events:auto; }

/* brand */
.brand{
  padding:6px 12px;border-radius:10px;font-weight:700;color:var(--muted); background:transparent;
}

/* links */
.nav-links{ display:flex; gap:22px; margin-left:24px; align-items:center; }
.nav-links a{ color:var(--muted); text-decoration:none; font-weight:600; transition: color .25s var(--ease), text-shadow .25s var(--ease);}
.nav-links a:hover{ color:var(--accent); text-shadow:0 0 10px rgba(155,232,255,0.22); }

/* profile & actions */
.nav-actions{ margin-left:auto; display:flex; gap:12px; align-items:center; }
.icon-btn{
  width:40px;height:40px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03);
  transition: box-shadow .25s var(--ease), transform .18s var(--ease);
}
.icon-btn:hover{ box-shadow: 0 6px 28px rgba(110,200,255,0.08); transform:translateY(-3px); }

/* hero */
.hero{
  padding:120px 24px 40px 24px;
  max-width:1100px;margin:0 auto; display:flex; gap:40px; align-items:center;
}
.hero-left{ flex:1; min-width:300px; }
.hero-title{
  font-size:56px; font-weight:900; margin:0 0 12px 0;
  color:linear-gradient(90deg,var(--text),var(--accent));
  background:linear-gradient(90deg, rgba(200,230,255,0.95), rgba(180,220,255,0.5));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 28px rgba(0,0,0,0.6));
  opacity:0; transform:translateY(12px); animation:fadeUpText .7s .25s forwards;
}
@keyframes fadeUpText{ to { opacity:1; transform:none; } }

.hero-desc{ color:var(--muted); margin-bottom:18px; opacity:0; transform:translateY(12px); animation:fadeUpText .7s .35s forwards; }

/* buttons */
.btn{
  display:inline-block;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#021220;font-weight:800;text-decoration:none;margin-right:12px; box-shadow:0 10px 30px rgba(110,200,255,0.07);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{ transform:translateY(-4px); box-shadow:0 20px 45px rgba(110,200,255,0.14); }

/* sections */
.section{ max-width:1100px; margin:48px auto; padding:20px; color:var(--muted); }
.section-title{ font-size:28px; color:var(--text); margin-bottom:12px; }

/* card */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;padding:18px; box-shadow: 0 10px 40px rgba(2,6,12,0.6);
}

/* footer */
.footer{ text-align:center; padding:40px 0; color:var(--muted); }

/* Responsive */
@media (max-width:900px){
  .nav-circle.expanded{ width:92%; }
  .hero{ flex-direction:column; padding-top:160px; text-align:center; }
  .nav-links{ display:none; }
}

/* utility for delayed reveal */
.reveal{ opacity:0; transform:translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.show{ opacity:1; transform:none; }