:root{
  --bg0:#04070c; --bg1:#07121f; --bg2:#0b1f33;
  --text:#eaf2ff; --soft:#a8b6cc;
  --cyan:#00c2ff; --blue:#3aa0ff;
  --card:rgba(10,18,32,.55);
  --bd:rgba(206,223,255,.14);
}

/* fix any navbar clipping only here */
html{overflow-x:hidden;}
.ceo-page nav{width:100%; box-sizing:border-box;}
.ceo-page #menu-icon-toggle{white-space:nowrap;}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg0),var(--bg1) 35%,var(--bg2));
  line-height:1.7;
}

/* sections “one-after-another”: minimal spacing */
section{padding:0}

/* ===== HERO (pushed further down so it clears logo) ===== */
.hero{
  position:relative;
  padding:150px 20px 16px; /* increased top to avoid logo collision */
}
.hero-wrap{
  width:min(1200px,92vw); margin:0 auto;
  display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:center;
}
@media (max-width:900px){.hero-wrap{grid-template-columns:1fr;text-align:center}}

.portrait{position:relative;display:grid;place-items:center}
/* Natural photo: no spotlight/rings */
.portrait img{
  width:220px;height:220px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.25); /* subtle only */
}

.intro h1{
  font-size:clamp(2rem,4.5vw,3rem); font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(90deg,#fff,#c7e7ff 45%,#fff 65%,#d7d0ff 85%,#fff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:sheen 9s linear infinite;
}
@keyframes sheen{0%{background-position:200% 0}100%{background-position:-200% 0}}
.role{margin-top:6px;color:#e9f4ffcc;font-weight:700}
.meta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;color:var(--soft);font-size:.92rem}
.meta-row .meta i{color:var(--cyan);margin-right:6px}
.scroll-cta{
  display:inline-flex;gap:8px;align-items:center;margin-top:10px;
  padding:8px 12px;border-radius:10px;border:1px solid #fff3;
  background:linear-gradient(180deg,#fff1,#fff0);
  color:#eaf4ff;text-decoration:none;backdrop-filter:blur(6px);
}
.scroll-cta:hover{transform:translateY(-2px);border-color:rgba(0,194,255,.5);box-shadow:0 0 0 3px rgba(0,194,255,.12)}

/* ===== BIO (three paragraphs; clean small gap; no inner scrollbars) ===== */
.bio{
  width:min(1200px,92vw); margin:0 auto; padding:12px 20px 0;
}
.bio p{
  text-align:justify;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid var(--bd);
  border-radius:14px;
  padding:16px 18px;
  backdrop-filter:blur(6px);
  box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.bio p + p{ margin-top:10px; }
.dropcap{
  float:left;line-height:.9;margin:.08em .18em 0 0;font-weight:800;font-size:3rem;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ===== FOCUS DOMAINS — AUTO‑SCROLLING MARQUEE ===== */
.rail{padding:10px 0 0}
.sec-title{
  font-size:clamp(1.4rem,3vw,2rem); text-align:center; margin-bottom:8px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.marquee-cards{
  position:relative; overflow:hidden; width:100%;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-cards .track{
  display:inline-flex; align-items:center; gap:12px; padding:10px 8px;
  animation: scrollX 28s linear infinite;
  will-change: transform;
}
@keyframes scrollX{ to{ transform: translateX(-50%);} }

.pill-card{
  white-space:nowrap;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--bd);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  display:flex; align-items:center; gap:10px;
  backdrop-filter:blur(6px);
  color:#dfe7ff;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.pill-card i{color:var(--cyan)}
/* Pause marquee on hover for accessibility */
.marquee-cards:hover .track{animation-play-state:paused}

/* ===== CTA (tight) ===== */
.cta{padding:12px 20px 40px; text-align:center}
.cta h2{font-weight:800;font-size:clamp(1.6rem,3.8vw,2.2rem)}
.cta p{color:var(--soft);max-width:760px;margin:6px auto 10px}
.cta-btn{
  display:inline-block; padding:12px 18px; border-radius:10px; border:1px solid #fff3;
  background:linear-gradient(145deg,var(--cyan),var(--blue)); color:#02121f; font-weight:800; text-decoration:none;
  box-shadow:0 10px 24px rgba(0,194,255,.25)
}
.cta-btn:hover{transform:translateY(-2px)}