:root{
  --bg-1:#edf1f5;
  --bg-2:#f7f9fc;
  --bg-3:#dfe8ff;

  --cover-1:#6b8de3;
  --cover-2:#193989;
  --cover-3:#2a67ff;

  --paper:#ffffff;
  --paper-2:#f8fbff;
  --ink:#0e1630;
  --muted:#50607d;
  --line:#dbe5f5;

  --primary:#0145f2;
  --primary-2:#2b6cff;
  --primary-soft:#edf4ff;
  --accent:#0032b1;

  --glass:rgba(255,255,255,.46);
  --glass-strong:rgba(255,255,255,.62);

  --soft-blue:linear-gradient(135deg,#eef4ff,#ffffff);
  --soft-cyan:linear-gradient(135deg,#edfaff,#ffffff);
  --soft-violet:linear-gradient(135deg,#f3f0ff,#ffffff);
  --soft-pink:linear-gradient(135deg,#fff1f6,#ffffff);
  --soft-teal:linear-gradient(135deg,#effffb,#ffffff);

  --shadow:0 28px 90px rgba(1,69,242,.12);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:"Inter",sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(1,69,242,.10), transparent 22%),
    radial-gradient(circle at 92% 10%, rgba(43,108,255,.10), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(1,69,242,.08), transparent 22%),
    linear-gradient(135deg,var(--bg-1),var(--bg-2) 52%,var(--bg-3));
  overflow-x:hidden;
  background-size:contain;
}

.ambient{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.ambient span{
  position:absolute;
  border-radius:50%;
  filter:blur(44px);
  opacity:.22;
  background:linear-gradient(135deg,rgba(1,69,242,.28),rgba(43,108,255,.20));
  animation:floatBlob 14s ease-in-out infinite;
}

.ambient span:nth-child(1){width:220px;height:220px;left:4%;top:8%}
.ambient span:nth-child(2){width:150px;height:150px;left:12%;bottom:10%;animation-delay:-4s}
.ambient span:nth-child(3){width:250px;height:250px;right:5%;top:10%;animation-delay:-7s}
.ambient span:nth-child(4){width:180px;height:180px;right:10%;bottom:8%;animation-delay:-2s}

@keyframes floatBlob{
  0%,100%{transform:translateY(0) translateX(0)}
  50%{transform:translateY(-18px) translateX(10px)}
}

.page-shell{
  position:relative;
  z-index:1;
  min-height:100vh;
  padding:20px 14px 32px;
  display:flex;
  justify-content:center;
}

.stage{
  width:100%;
  max-width:1520px;
}

.navbar-glass{
  max-width:1460px;
  margin:0 auto 18px;
  padding:12px 16px;
  border-radius:22px;
  border:1px solid rgba(1,69,242,.10);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(1,69,242,.08);
}

.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 20px rgba(1,69,242,.18);
}

.brand-title,
.headline h1{
  color:var(--accent);
}

.brand-title{
  font-weight:800;
  font-size:.95rem;
  margin-bottom:1px;
}

.brand-sub,
.headline p{
  color:#5e6f8f;
}

.brand-sub{
  font-size:.74rem;
}

.nav-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-pill,
.mode-pill{
  border:1px solid rgba(1,69,242,.12);
  background:rgba(255,255,255,.86);
  color:var(--accent);
  text-decoration:none;
  padding:9px 13px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:.25s ease;
  cursor:pointer;
  backdrop-filter:blur(10px);
}

.nav-pill:hover,
.mode-pill:hover{
  transform:translateY(-2px);
  color:var(--paper);
  background:#f3614e;
}

.mode-pill.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
}

.headline{
  text-align:center;
  max-width:900px;
  margin:0 auto 14px;
}

.headline h1{
  font-size:clamp(1.9rem,3.7vw,3rem);
  font-weight:800;
  margin:0 0 6px;
}

.headline p{
  margin:0;
  font-size:.92rem;
  line-height:1.7;
}

.book-shell{
  position:relative;
  max-width:1460px;
  margin:0 auto;
}

.book-closed{
  position:relative;
  width:100%;
  height:880px;
  border-radius:34px;
  overflow:hidden;
  background:linear-gradient(145deg,var(--cover-1),var(--cover-2) 58%,var(--cover-3));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 100px rgba(1,69,242,.22);
}

.book-closed::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.16);
}

.book-closed::after{
  content:"";
  position:absolute;
  left:72px;
  top:0;
  bottom:0;
  width:12px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.24),rgba(255,255,255,.06));
  box-shadow:inset 0 0 12px rgba(0,0,0,.25);
}

.closed-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:58px 58px 58px 112px;
}

.closed-copy{
  text-align:left;
  max-width:690px;
}

.cover-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.cover-name{
  font-size:clamp(2.3rem,4vw,3.8rem);
  line-height:1.04;
  font-weight:800;
  margin-bottom:10px;
}

.cover-role{
  font-size:1rem;
  color:rgba(255,255,255,.86);
  font-weight:600;
  margin-bottom:14px;
}

.cover-summary{
  font-size:.95rem;
  line-height:1.82;
  color:rgba(255,255,255,.83);
  margin-bottom:18px;
}

.cover-pills,
.hero-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cover-pill,
.hero-pill,
.mini-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  backdrop-filter:blur(8px);
}

.open-panel{
  width:310px;
  padding:22px;
  text-align:left;
  border-radius:24px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

.open-panel h4{
  margin:0 0 10px;
  font-size:1.02rem;
  font-weight:800;
}

.open-panel p{
  margin:0 0 16px;
  font-size:.85rem;
  line-height:1.7;
  color:rgba(255,255,255,.82);
}

.open-book-btn{
  width:100%;
  border:none;
  border-radius:16px;
  padding:12px 15px;
  font-size:.84rem;
  font-weight:800;
  background:linear-gradient(135deg,#fff,#e7efff);
  color:var(--accent);
  cursor:pointer;
  transition:.25s ease;
}

.open-book-btn:hover{
  transform:translateY(-2px);
}

.book-stage{
  display:none;
  width:100%;
  margin:0 auto;
  animation:fadeInUp .6s ease;
  position:relative;
}

.book-open{
  position:relative;
  width:100%;
  height:880px;
  border-radius:34px;
  overflow:hidden;
  padding:22px;
  background:linear-gradient(145deg,#0139cb,#0145f2 58%,#2d6eff);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 100px rgba(1,69,242,.18);
}

.book-open::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}

.spread{
  position:relative;
  height:100%;
  border-radius:28px;
  background:linear-gradient(180deg,#f8fbff,#edf4ff);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}

.spread::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:24px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(11,41,122,.16),rgba(255,255,255,.80) 48%,rgba(11,41,122,.14));
  border-radius:12px;
  z-index:5;
  box-shadow:inset 0 0 10px rgba(0,0,0,.05);
}

.spread-page{
  position:absolute;
  top:18px;
  bottom:18px;
  width:calc(50% - 22px);
  background:linear-gradient(180deg,#a8b4c952,#a5b9a587);
  color:var(--ink);
  border:1px solid rgba(1,69,242,.08);
  box-shadow:0 18px 40px rgba(1,69,242,.08);
  overflow:hidden;
}

.left-page{
  left:18px;
  border-radius:24px 0 0 24px;
}

.right-page{
  right:18px;
  border-radius:0 24px 24px 0;
}

.page-inner{
  height:100%;
  overflow:hidden;
  padding:22px 22px 18px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  font-size:12.5px;
  color:var(--ink);
}

.page-inner.project-fill .project-card,
.page-inner.company-fill .company-card,
.page-inner.cover-fill .hero-card,
.page-inner.final-fill .closing-card{
  flex:1;
}

.page-inner.cover-fill .hero-card{
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:30px 26px;
}

.page-inner.cover-fill .hero-avatar,
.page-inner.cover-fill .profile-photo{
  width:112px;
  height:112px;
  margin:0 auto 18px;
  border-radius:28px;
}

.page-inner.cover-fill .hero-name{
  font-size:2rem;
}

.page-inner.cover-fill .hero-role{
  font-size:1rem;
}

.page-inner.cover-fill .hero-summary{
  max-width:360px;
  margin:8px auto 0;
  font-size:.88rem;
  line-height:1.7;
}

.page-inner.cover-fill .hero-tags{
  justify-content:center;
}

.side-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  box-shadow:0 14px 30px rgba(1,69,242,.20);
  display:none;
  align-items:center;
  justify-content:center;
  font-size:1.08rem;
  z-index:20;
  cursor:pointer;
  transition:.25s ease;
}

.side-nav:hover{
  transform:translateY(-50%) scale(1.05);
  background:linear-gradient(135deg,#013bd1,#2e6fff);
}

.side-nav:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:translateY(-50%);
}

.side-nav.prev{left:-16px}
.side-nav.next{right:-16px}

.page-indicator-wrap{
  display:none;
  justify-content:center;
  margin-top:14px;
  animation:fadeInUp .5s ease;
}

.page-indicator{
  font-size:.82rem;
  font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
}

.turn-page{
  position:absolute;
  top:18px;
  bottom:18px;
  width:calc(50% - 22px);
  transform-style:preserve-3d;
  display:none;
  z-index:14;
  pointer-events:none;
  will-change:transform;
  perspective:2200px;
}

.turn-page-right{
  right:18px;
  transform-origin:left center;
  transform:rotateY(0deg);
}

.turn-page-left{
  left:18px;
  transform-origin:right center;
  transform:rotateY(0deg);
}

.turn-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  background:linear-gradient(180deg,var(--paper),#ffffff);
  border:1px solid rgba(1,69,242,.08);
  box-shadow:
    0 18px 40px rgba(1,69,242,.10),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.turn-page-right .turn-front{
  border-radius:0 24px 24px 0;
}

.turn-page-right .turn-back{
  transform:rotateY(180deg);
  border-radius:24px 0 0 24px;
}

.turn-page-left .turn-front{
  border-radius:24px 0 0 24px;
}

.turn-page-left .turn-back{
  transform:rotateY(180deg);
  border-radius:0 24px 24px 0;
}

.turn-shadow{
  position:absolute;
  top:0;
  bottom:0;
  width:30px;
  z-index:2;
  pointer-events:none;
}

.turn-page-right .turn-shadow{
  left:0;
  background:linear-gradient(90deg,rgba(0,38,135,.22),transparent);
}

.turn-page-left .left-shadow{
  right:0;
  background:linear-gradient(270deg,rgba(0,38,135,.22),transparent);
}

.turn-page-right.animating-next{
  display:block;
  animation:pageTurnNext 980ms cubic-bezier(.42,0,.2,1) forwards;
}

.turn-page-left.animating-prev{
  display:block;
  animation:pageTurnPrev 980ms cubic-bezier(.42,0,.2,1) forwards;
}

@keyframes pageTurnNext{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(-180deg)}
}

@keyframes pageTurnPrev{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(180deg)}
}

.section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.95rem;
  font-weight:800;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  color:var(--accent);
  flex:0 0 auto;
}

.lead-copy,
.project-desc,
.company-list,
.project-points,
.edu-meta,
.contact-row span,
.contact-row a{
  color:#42506c;
}

.company-head h5,
.project-head h5,
.edu-title,
.contact-row strong,
.project-block-title{
  color:#10214f;
}

.page-bg-soft,
.page-bg-warm,
.page-bg-cool,
.page-bg-purple,
.page-bg-cyan{
  border-radius:16px;
  padding:10px 12px;
  margin-bottom:10px;
  flex:0 0 auto;
}

.page-bg-soft{background:var(--soft-blue);border:1px solid #dce8ff}
.page-bg-warm{background:var(--soft-violet);border:1px solid #e4dcff}
.page-bg-cool{background:var(--soft-teal);border:1px solid #d8f5ef}
.page-bg-purple{background:var(--soft-pink);border:1px solid #f2ddeb}
.page-bg-cyan{background:var(--soft-cyan);border:1px solid #d9eff8}

.hero-card,
.closing-card{
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.16),transparent 28%),    linear-gradient(145deg,#6b8de3,#193989 60%,#2e6fff)
}

.hero-card{
  height:100%;
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
}

.hero-card::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
}

.hero-card>*{
  position:relative;
  z-index:1;
}

.hero-avatar,
.profile-photo{
  width:82px;
  height:82px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  font-size:1.45rem;
  font-weight:800;
  margin-bottom:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  overflow:hidden;
  object-fit:cover;
}

.hero-name{
  font-size:1.75rem;
  font-weight:800;
  color:#fff;
  line-height:1.08;
  margin-bottom:8px;
}

.hero-role{
  font-size:.92rem;
  color:rgba(255,255,255,.92);
  font-weight:700;
  margin-bottom:12px;
}

.hero-summary{
  font-size:.84rem;
  line-height:1.6;
  color:rgba(255,255,255,.92);
  margin:0;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.profile-hero-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:18px;
  margin-bottom:14px;
  background:linear-gradient(135deg,rgba(1,69,242,.88),rgba(43,108,255,.78));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  box-shadow:0 14px 30px rgba(1,69,242,.12);
}

.profile-hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  pointer-events:none;
}

.profile-hero-content{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.profile-hero-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 52px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:1.15rem;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.profile-hero-card h4{
  margin:0 0 6px;
  color:#fff;
  font-size:1rem;
  font-weight:800;
}

.profile-hero-card p{
  margin:0;
  color:rgba(255,255,255,.90);
  font-size:.8rem;
  line-height:1.6;
}

.feature-gradient-card,
.skills-category-card,
.company-card,
.project-card,
.edu-card,
.contact-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.54);
  border:1px solid rgba(255,255,255,.44);
  backdrop-filter:blur(14px);
  box-shadow:
    0 12px 30px rgba(1,69,242,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
  border-radius:16px;
}

.feature-gradient-card::before,
.skills-category-card::before,
.company-card::before,
.project-card::before,
.edu-card::before,
.contact-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.96;
}

.feature-gradient-card > *,
.skills-category-card > *,
.company-card > *,
.project-card > *,
.edu-card > *,
.contact-card > *{
  position:relative;
  z-index:1;
}

.feature-gradient-card{
  min-height:132px;
  padding:16px;
  color:#1f2937;
}

.feature-card-red::before{
  background:linear-gradient(135deg,rgba(1,69,242,.55),rgba(97,157,255,.06));
}

.feature-card-softred::before{
  background:linear-gradient(135deg,rgba(111,66,193,.55),rgba(220,236,255,.06));
}

.feature-card-rose::before{
  background:linear-gradient(135deg,rgba(0,200,255,.55),rgba(232,245,255,.06));
}

.feature-card-light::before{
  background:linear-gradient(135deg,rgba(18,184,134,.55),rgba(232,255,248,.06));
}

.feature-card-icon,
.skills-category-icon,
.contact-icon{
  background:rgba(255,255,255,.75);
  color:var(--primary);
  box-shadow:0 8px 18px rgba(1,69,242,.10);
}

.feature-card-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,.45);
  font-size:1rem;
}

.feature-gradient-card h6{
  margin:0 0 6px;
  font-size:.86rem;
  font-weight:800;
  color:#10214f;
}

.feature-gradient-card p{
  margin:0;
  font-size:.74rem;
  line-height:1.55;
  color:#42506c;
}

.skills-hero-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
  margin-bottom:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.70),rgba(237,244,255,.86));
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 24px rgba(1,69,242,.05);
}

.skills-hero-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-size:1rem;
  box-shadow:0 10px 20px rgba(1,69,242,.18);
}

.skills-hero-card h4{
  margin:0 0 5px;
  font-size:.92rem;
  font-weight:800;
  color:var(--accent);
}

.skills-hero-card p{
  margin:0;
  font-size:.76rem;
  line-height:1.5;
  color:#566785;
}

.skills-stack-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.skills-category-card{
  padding:14px 14px 12px;
  border-radius:18px;
}

.skills-variant-1::before{
  background:linear-gradient(135deg,rgba(1,69,242,.55),rgba(255,255,255,.30));
}

.skills-variant-2::before{
  background:linear-gradient(135deg,rgba(111,66,193,.55),rgba(255,255,255,.30));
}

.skills-variant-3::before{
  background:linear-gradient(135deg,rgba(0,184,212,.55),rgba(255,255,255,.30));
}

.skills-variant-4::before{
  background:linear-gradient(135deg,rgba(20,184,166,.55),rgba(255,255,255,.30));
}

.skills-category-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.skills-category-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.45);
  font-size:.9rem;
}

.skills-category-title{
  font-size:.82rem;
  font-weight:800;
  color:var(--accent);
  line-height:1.3;
}

.skills-badge-wrap,
.chips,
.techs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.skill-badge-pro,
.chip,
.tech{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:700;
  line-height:1;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(1,69,242,.10);
  color:#12306d;
  backdrop-filter:blur(8px);
}

.company-card::before{
  background:linear-gradient(135deg,rgba(1,69,242,.08),rgba(255,255,255,.20));
}

.project-card::before{
  background:linear-gradient(135deg,rgba(111,66,193,.08),rgba(255,255,255,.20));
}

.edu-card::before{
  background:linear-gradient(135deg,rgba(0,184,212,.08),rgba(255,255,255,.20));
}

.contact-card::before{
  background:linear-gradient(135deg,rgba(18,184,134,.08),rgba(255,255,255,.20));
}

.company-card,
.project-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  height:100%;
}

.company-head,
.project-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}

.company-head h5,
.project-head h5{
  margin:0;
  font-size:.98rem;
  line-height:1.35;
  font-weight:800;
}

.company-period,
.project-year{
  font-size:.69rem;
  font-weight:800;
  color:var(--primary);
  background:rgba(255,255,255,.75);
  border:1px solid rgba(1,69,242,.10);
  padding:5px 8px;
  border-radius:999px;
  white-space:nowrap;
}

.company-sub,
.project-meta{
  font-size:.76rem;
  font-weight:700;
  margin-bottom:10px;
  color:#5c6c87;
}

.company-list,
.project-points{
  margin:0;
  padding-left:16px;
  line-height:1.52;
  font-size:.77rem;
}

.project-desc{
  line-height:1.54;
  font-size:.78rem;
  margin-bottom:12px;
}

.project-block-title{
  font-size:.74rem;
  font-weight:800;
  margin-bottom:6px;
}

.edu-card,
.contact-card{
  padding:13px;
}

.edu-card+.edu-card{
  margin-top:9px;
}

.edu-title{
  font-size:.85rem;
  font-weight:800;
  margin-bottom:4px;
}

.edu-meta{
  font-weight:700;
  font-size:.74rem;
  line-height:1.46;
  margin-bottom:5px;
}

.edu-score{
  font-weight:800;
  color:var(--primary);
  font-size:.77rem;
}

.contact-list{
  display:grid;
  gap:9px;
}

.contact-row{
  display:flex;
  gap:9px;
  align-items:flex-start;
}

.contact-icon{
  width:32px;
  height:32px;
  border-radius:11px;
  display:grid;
  place-items:center;
  flex:0 0 32px;
  border:1px solid rgba(255,255,255,.45);
  font-size:.84rem;
}

.contact-row strong{
  display:block;
  font-size:.77rem;
  margin-bottom:2px;
}

.contact-row a{
  text-decoration:none;
  word-break:break-word;
  font-size:.74rem;
  line-height:1.4;
}

.closing-card{
  height:100%;
  border-radius:20px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
}

.closing-card h2{
  font-size:1.5rem;
  font-weight:800;
  margin:0 0 10px;
}

.closing-card p{
  max-width:300px;
  line-height:1.62;
  font-size:.84rem;
  color:rgba(255,255,255,.90);
  margin:0 0 12px;
}

.scroll-mode{
  display:none;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  animation:fadeInUp .55s ease;
}

.scroll-reader{
  background:rgba(58 75 163 / 72%);
  border:1px solid rgba(1,69,242,.10);
  border-radius:28px;
  padding:18px;
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}

.scroll-page{
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  color:var(--ink);
  border:1px solid rgba(1,69,242,.08);
  border-radius:22px;
  padding:22px;
  margin-bottom:18px;
  box-shadow:0 14px 34px rgba(1,69,242,.08);
}

.scroll-page:last-child{
  margin-bottom:0;
}

.scroll-page .hero-card{
  min-height:420px;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

@media (max-width:1300px){
  .book-closed,.book-open{height:820px}
}

@media (max-width:1100px){
  .book-closed,.book-open{height:760px}
  .closed-content{padding:42px 34px 42px 82px}
  .side-nav.prev{left:-8px}
  .side-nav.next{right:-8px}
}

@media (max-width:991px){
  .navbar-glass .row{row-gap:12px}
  .nav-actions{justify-content:flex-start}
  .book-closed,.book-open{height:700px}
  .closed-content{
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:36px 28px 36px 70px;
  }
  .open-panel{width:100%;max-width:100%}
  .grid-2{grid-template-columns:1fr}
  .page-inner{
    padding:18px 16px;
    font-size:12px;
  }
  .hero-summary,
  .lead-copy,
  .project-desc,
  .company-list,
  .project-points{
    font-size:.74rem;
  }
}

@media (max-width:768px){
  .page-shell{padding:14px 10px 24px}
  .headline h1{font-size:1.75rem}
  .navbar-glass{padding:12px}
  .book-closed,.book-stage,.side-nav,.page-indicator-wrap{display:none !important}
  .scroll-mode{display:block}
  .scroll-page{padding:18px}
  .scroll-page .hero-card{min-height:auto}
  .profile-grid{grid-template-columns:1fr !important}
  .page-inner.cover-fill .hero-avatar,
  .page-inner.cover-fill .profile-photo{
    width:92px;
    height:92px;
  }
  .page-inner.cover-fill .hero-name{
    font-size:1.6rem;
  }
}

@media (max-width:768px){
  .scroll-page .hero-card{
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px 18px;
    min-height:auto;
  }
  .scroll-page .hero-card::before{
    inset:10px;
  }
  .scroll-page .hero-card .profile-photo,
  .scroll-page .hero-card .hero-avatar{
    width:96px;
    height:96px;
    margin:0 auto 14px;
    border-radius:22px;
  }
  .scroll-page .hero-tags{
    justify-content:center;
  }
  .scroll-page .hero-pill{
    justify-content:center;
  }
  .scroll-page .hero-name,
  .scroll-page .hero-role,
  .scroll-page .hero-summary{
    text-align:center;
  }
}