:root{
  --bg:#0a0f1c;
  --fg:#e8ecff;
  --muted:rgba(232,236,255,.72);
  --muted2:rgba(232,236,255,.55);
  --line:rgba(232,236,255,.10);

  --green:#00ff41;
  --red:#f40009;

  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius: 22px;
  --max: 1180px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
  cursor:none;
}

a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body{ cursor:auto; }
  .cursor{ display:none !important; }
  *{ animation:none !important; transition:none !important; }
}

/* ---------------- NAV (ONE LINE FIX) ---------------- */
.navWrap{
  position:fixed;
  top:16px;
  left:0;
  right:0;
  z-index:50;
  pointer-events:none;
}

.nav{
  pointer-events:auto;
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
  padding:14px 16px;
  border-radius:999px;
  background:rgba(12,18,34,.72);
  border:1px solid rgba(232,236,255,.10);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* brand left */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  min-width: 240px;
}

.dot{
  width:9px;height:9px;border-radius:999px;background:var(--green);
  box-shadow:0 0 20px rgba(0,255,65,.6);
}

.brandName{
  font-weight:900;
  letter-spacing:.02em;
  font-size:13px;
  text-transform:uppercase;
  white-space:nowrap;
}

/* links center/right — never wrap on desktop */
.navLinks{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  justify-content:flex-end;
  flex-wrap:nowrap;          /* IMPORTANT: prevents 2 lines */
  min-width:0;
  overflow:hidden;           /* ensures it won't push contact down */
}

.navLink{
  font-family:var(--mono);
  font-size:11px;            /* slightly smaller to fit */
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(232,236,255,.78);
  padding:10px 10px;
  border-radius:999px;
  transition: transform .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
  border:1px solid transparent;
  white-space:nowrap;
  flex:0 0 auto;
}

.navLink:hover{
  color:var(--fg);
  background:rgba(232,236,255,.06);
  border-color:rgba(232,236,255,.10);
  transform:translateY(-1px);
}

.navCta{
  border-color:rgba(244,0,9,.35);
  background:rgba(244,0,9,.08);
}
.navCta:hover{
  border-color:rgba(0,255,65,.35);
  background:rgba(0,255,65,.08);
}

/* burger (mobile only) */
.navBurger{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  background:rgba(232,236,255,.06);
  border:1px solid rgba(232,236,255,.10);
  cursor:pointer;
  flex:0 0 auto;
}
.navBurger span{
  display:block;
  width:18px;height:2px;
  margin:4px auto;
  background:rgba(232,236,255,.85);
  border-radius:10px;
}

.navMobile{
  pointer-events:auto;
  width:min(var(--max), calc(100% - 24px));
  margin:10px auto 0;
  padding:14px;
  border-radius:18px;
  background:rgba(12,18,34,.82);
  border:1px solid rgba(232,236,255,.10);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  display:none;
}
.navMobile a{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  font-family:var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(232,236,255,.82);
}
.navMobile a:hover{
  background:rgba(232,236,255,.06);
  color:var(--fg);
}
.navMobile.open{ display:block; }

/* Switch to burger earlier so nav never breaks */
@media (max-width: 1100px){
  .navLinks{ display:none; }
  .navBurger{ display:block; }
}

/* ---------------- TICKERS ---------------- */
.tickerTop, .tickerBottom{
  position:fixed;
  left:0; right:0;
  z-index:20;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:screen;
}
.tickerTop{ top:0; padding-top:92px; }
.tickerBottom{ bottom:0; padding-bottom:8px; }

.tickerInner{
  display:flex;
  gap:16px;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  padding:6px 14px;
  white-space:nowrap;
  width:200%;
  animation: ticker 18s linear infinite;
}
.tickerInner.slow{ animation-duration: 24s; }
.tickerInner span{ color:rgba(232,236,255,.7); }

@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------------- SECTIONS ---------------- */
.section{
  position:relative;
  min-height:100vh;
  padding:130px 0 90px;
  overflow:hidden;
}
.container{
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
  position:relative;
  z-index:2;
}
.pageTag{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(232,236,255,.65);
  margin-bottom:10px;
}
.huge{
  margin:0 0 12px;
  font-weight:900;
  letter-spacing:-.03em;
  font-size:clamp(44px, 6vw, 86px);
  line-height:.92;
}
.lead{
  max-width: 820px;
  margin:0 0 24px;
  font-size:18px;
  color:rgba(232,236,255,.74);
  line-height:1.6;
}

/* ---------------- BACKGROUNDS ---------------- */
.bgMarket{
  position:absolute;
  inset:-18%;
  background:
    radial-gradient(900px 520px at 20% 40%, rgba(0,255,65,.16), transparent 60%),
    radial-gradient(900px 520px at 78% 45%, rgba(244,0,9,.16), transparent 60%),
    radial-gradient(700px 420px at 60% 75%, rgba(232,236,255,.08), transparent 60%);
  opacity:1;
}
.bgMarket.faint{ opacity:.65; }

.bgSplit{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(0,255,65,.12) 0%,
    rgba(0,255,65,.06) 44%,
    rgba(244,0,9,.06) 56%,
    rgba(244,0,9,.12) 100%
  );
  opacity:.9;
}

.bgGrid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(232,236,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,236,255,.07) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity:.08;
  mask-image: radial-gradient(circle at 50% 45%, black 40%, transparent 72%);
}

.bgWaves{
  position:absolute;
  left:0; right:0;
  bottom:8%;
  height: 38%;
  opacity:.9;
}
.bgWaves svg{ width:100%; height:100%; }
.wave{
  fill:none;
  stroke-width:4;
  opacity:.65;
}
.wave.green{
  stroke: rgba(0,255,65,.85);
  filter: drop-shadow(0 0 18px rgba(0,255,65,.35));
}
.wave.red{
  stroke: rgba(244,0,9,.65);
  filter: drop-shadow(0 0 18px rgba(244,0,9,.25));
}

/* Floating background tape text across sections */
.hero::before,
.about::before,
.experience::before,
.skills::before,
.education::before,
.projects::before,
.interests::before,
.contact::before{
  content:"USD INR CAD GBP EUR JPY AUD $ $ $   SPX 5,0XX   VIX 1X.XX   YLD 4.XX   BETA 1.0X   TSLA   AAPL   NVDA   MSFT   AMZN   META   DXY   OIL   GOLD   USD INR CAD GBP EUR JPY AUD $";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing: .26em;
  font-size: clamp(12px, 1.2vw, 18px);
  line-height: 2.7;
  color: rgba(232,236,255,.08);
  transform: rotate(-6deg);
  white-space: pre;
  opacity:.9;
}

/* ---------------- HERO ---------------- */
.hero{ display:flex; align-items:center; }
.heroInner{ padding-top:24px; }
.heroCopy{ max-width: 980px; }

.kicker{
  font-family:var(--mono);
  letter-spacing:.26em;
  text-transform:uppercase;
  font-size:14px;
  color:rgba(232,236,255,.80);
  margin-bottom:14px;
}

.heroTitle{
  margin:0 0 12px;
  font-weight:900;
  letter-spacing:-.04em;
  font-size:clamp(52px, 6.2vw, 92px);
  line-height:1.02;
  white-space:nowrap;
}
@media (max-width: 900px){
  .heroTitle{ white-space:normal; }
}

.glow{
  color:var(--fg);
  text-shadow: 0 0 22px rgba(0,255,65,.18), 0 0 16px rgba(232,236,255,.12);
}
.dotEnd{ color: rgba(0,255,65,.9); }

.typeLine{
  margin:14px 0 22px;
  max-width: 760px;
  color:rgba(232,236,255,.74);
  font-size:16px;
  line-height:1.7;
}
.caret{
  display:inline-block;
  width:10px;
  height:1.2em;
  border-right:2px solid rgba(0,255,65,.9);
  transform: translateY(2px);
  animation: blink 0.8s steps(1) infinite;
}
@keyframes blink { 50%{ opacity:0; } }

.heroBtns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(232,236,255,.12);
  background:rgba(12,18,34,.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  font-family:var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(232,236,255,.20);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.btnPrimary{
  border-color: rgba(0,255,65,.26);
  background: linear-gradient(180deg, rgba(0,255,65,.12), rgba(12,18,34,.55));
}
.btnPrimary:hover{ border-color: rgba(0,255,65,.45); }
.btnGhost{
  border-color: rgba(244,0,9,.26);
  background: linear-gradient(180deg, rgba(244,0,9,.10), rgba(12,18,34,.55));
}
.btnGhost:hover{ border-color: rgba(244,0,9,.45); }

.btnFull{ width:100%; margin-top: 12px; }
.btnSmall{ margin-top: 12px; padding:10px 14px; }

/* ---------------- GRID + CARDS ---------------- */
.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 920px){
  .grid2{ grid-template-columns: 1fr; }
}

.card{
  border-radius: var(--radius);
  background: rgba(12,18,34,.62);
  border: 1px solid rgba(232,236,255,.10);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  position:relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 180px at 20% 20%, rgba(0,255,65,.10), transparent 60%),
    radial-gradient(420px 180px at 80% 20%, rgba(244,0,9,.10), transparent 60%);
  opacity:.6;
  pointer-events:none;
}
.card > *{ position:relative; z-index:1; }

.cardLabel{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  margin-bottom:10px;
  opacity:.75;
  color: rgba(232,236,255,.78);
}
.cardLabel.green{ color: rgba(0,255,65,.9); }
.cardLabel.red{ color: rgba(244,0,9,.9); }

.bigStat{
  font-weight:900;
  letter-spacing:-.02em;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height:1.05;
  margin-bottom:10px;
}
.g{ color: rgba(0,255,65,.95); }

.cardBody{
  margin:0 0 12px;
  color: rgba(232,236,255,.74);
  line-height:1.7;
  font-size:14px;
}

.pillRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pill{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(232,236,255,.10);
  background:rgba(0,0,0,.16);
  color: rgba(232,236,255,.72);
}

/* powered row */
.powered{
  margin-top:18px;
  padding:14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(232,236,255,.10);
  background: rgba(12,18,34,.52);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.poweredLabel{
  font-family:var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:11px;
  color: rgba(232,236,255,.62);
}
.poweredLine{
  font-weight:800;
  letter-spacing:-.01em;
  color: rgba(232,236,255,.88);
}

/* ---------------- TIMELINE ---------------- */
.timeline{
  position:relative;
  margin-top: 18px;
  padding-left: 22px;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 7px;
  top:0;
  bottom:0;
  width:2px;
  background: linear-gradient(180deg, rgba(0,255,65,.65), rgba(232,236,255,.10), rgba(244,0,9,.45));
  opacity:.8;
}
.tItem{ position:relative; margin: 0 0 16px; }
.tDot{
  position:absolute;
  left: -22px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,255,65,.9);
  box-shadow: 0 0 18px rgba(0,255,65,.55);
}
.tCard{
  border-radius: var(--radius);
  background: rgba(12,18,34,.62);
  border: 1px solid rgba(232,236,255,.10);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
}
.tHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.tRole{
  font-weight:900;
  letter-spacing:-.02em;
  font-size:16px;
}
.tLoc{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  color: rgba(232,236,255,.60);
  white-space:nowrap;
  padding-top:2px;
}
.tBullets{
  margin:0;
  padding-left: 18px;
  color: rgba(232,236,255,.74);
  line-height:1.7;
}
.tBullets b{ color: rgba(0,255,65,.95); }

/* ---------------- SKILLS HUD ---------------- */
.skills .bgIcons{
  position:absolute;
  inset:0;
  opacity:.16;
  pointer-events:none;
  background:
    radial-gradient(90px 90px at 18% 32%, rgba(0,255,65,.35), transparent 60%),
    radial-gradient(90px 90px at 36% 62%, rgba(232,236,255,.22), transparent 60%),
    radial-gradient(90px 90px at 72% 38%, rgba(244,0,9,.28), transparent 60%),
    radial-gradient(90px 90px at 84% 68%, rgba(232,236,255,.18), transparent 60%);
}
.hud{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .hud{ grid-template-columns:1fr; }
}
.hudCol{
  border-radius: var(--radius);
  background: rgba(12,18,34,.62);
  border: 1px solid rgba(232,236,255,.10);
  box-shadow: var(--shadow);
  padding: 18px;
}
.hudTitle{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  color: rgba(232,236,255,.70);
  margin-bottom:10px;
}
.hudItem{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(232,236,255,.10);
  background: rgba(0,0,0,.16);
  margin-bottom:10px;
  font-weight:800;
  letter-spacing:-.01em;
}
.hudItem:last-child{ margin-bottom:0; }

/* ---------------- AWARDS ---------------- */
.awardsCard{
  margin-top: 16px;
}
.award{
  padding: 12px 0;
  border-top: 1px solid rgba(232,236,255,.10);
}
.award:first-of-type{ border-top: 0; padding-top: 0; }
.awardTitle{
  font-weight:900;
  letter-spacing:-.01em;
  font-size:14px;
}
.awardBody{
  margin-top:6px;
  color: rgba(232,236,255,.72);
  line-height:1.6;
  font-size:13px;
}

/* ---------------- PROJECT ACCENTS ---------------- */
.proj{
  padding-bottom: 14px;
}
.projTitle{
  font-size: clamp(22px, 2.2vw, 32px);
}
.projTag{
  display:inline-flex;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(232,236,255,.10);
  background:rgba(0,0,0,.16);
  color: rgba(232,236,255,.72);
}

/* green project */
.projGreen{
  border-color: rgba(0,255,65,.18);
}
.projGreen::after{
  background: radial-gradient(520px 220px at 20% 20%, rgba(0,255,65,.16), transparent 60%);
}
.projGreen .projTag{
  border-color: rgba(0,255,65,.22);
  color: rgba(0,255,65,.9);
}

/* red project */
.projRed{
  border-color: rgba(244,0,9,.18);
}
.projRed::after{
  background: radial-gradient(520px 220px at 20% 20%, rgba(244,0,9,.16), transparent 60%);
}
.projRed .projTag{
  border-color: rgba(244,0,9,.22);
  color: rgba(244,0,9,.9);
}

/* ---------------- FORM ---------------- */
.form{
  max-width: 760px;
  margin-top: 18px;
}
.row2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 720px){
  .row2{ grid-template-columns:1fr; }
}
.field{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(232,236,255,.12);
  background: rgba(12,18,34,.55);
  padding: 12px 14px;
  outline:none;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.field:focus{ border-color: rgba(0,255,65,.35); }
.area{ min-height: 140px; resize: vertical; }

.contactMeta{
  margin-top: 18px;
  color: rgba(232,236,255,.72);
}
.metaLine{ margin: 6px 0; }
.link{ text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- CURSOR ---------------- */
.cursor{
  position:fixed;
  top:0; left:0;
  width: 34px;
  height: 34px;
  pointer-events:none;
  z-index:999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.candle{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.candle .wick{
  position:absolute;
  width:2px;
  height:22px;
  border-radius:2px;
  background: rgba(0,255,65,.95);
  box-shadow: 0 0 12px rgba(0,255,65,.55);
}
.candle .body{
  position:absolute;
  width:12px;
  height:20px;
  border-radius:6px;
  background: linear-gradient(180deg, rgba(0,255,65,1), rgba(0,255,65,.55));
  box-shadow: 0 0 14px rgba(0,255,65,.55);
}
.crosshair{
  position:absolute;
  inset:0;
  opacity:0;
}
.crosshair::before,
.crosshair::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  background: rgba(0,255,65,.85);
  border-radius:999px;
  box-shadow: 0 0 16px rgba(0,255,65,.45);
}
.crosshair::before{ width:28px; height:2px; }
.crosshair::after{ width:2px; height:28px; }

.cursor.crosshair .candle{ opacity:0; }
.cursor.crosshair .crosshair{ opacity:1; }
/* ================================
   CURSOR CLICK: RED + EXTEND
================================ */

.cursor .candle .wick,
.cursor .candle .body {
  transition:
    height 120ms ease,
    transform 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

/* Mouse down = RED */
.cursor.down .candle .wick {
  background: rgba(244, 0, 9, 0.95);
  box-shadow: 0 0 14px rgba(244, 0, 9, 0.6);
}

.cursor.down .candle .body {
  background: linear-gradient(
    180deg,
    rgba(244, 0, 9, 1),
    rgba(244, 0, 9, 0.55)
  );
  box-shadow: 0 0 16px rgba(244, 0, 9, 0.6);
}

/* Extend candle on click */
.cursor.down .candle .wick {
  height: 34px; /* normal = 22px */
}

.cursor.down .candle .body {
  height: 32px; /* normal = 20px */
  transform: scaleY(1.05);
}
