@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{--bg:#050b18;--panel:#0a1427;--paper:#0c1930;--cyan:#00d9ff;--blue:#167bff;--text:#e8f5ff;--muted:#8da8c4;--line:rgba(0,217,255,.2);--glow:0 0 24px rgba(0,217,255,.15)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100vh;background:radial-gradient(ellipse at 70% 40%,#0b2140 0%,var(--bg) 55%);color:var(--text);font-family:'Poppins',sans-serif;overflow-x:hidden}
button,a,input,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit}
.ambient{position:fixed;border-radius:50%;filter:blur(100px);opacity:.12;pointer-events:none;z-index:-1}
.ambient-one{width:300px;height:300px;background:var(--cyan);top:15%;left:-100px}
.ambient-two{width:400px;height:400px;background:#135bff;right:-140px;bottom:0}
.topbar,.footer{width:min(1180px,92%);margin:auto;display:flex;align-items:center;justify-content:space-between}
.topbar{height:82px;border-bottom:1px solid rgba(141,168,196,.12)}
.brand{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:800;letter-spacing:2px;display:flex;gap:7px;align-items:center}
.brand-mark,.brand-dot{color:var(--cyan)}
.status{font:500 .65rem 'Orbitron',sans-serif;letter-spacing:1px;color:var(--muted);display:flex;align-items:center;gap:9px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#3cffad;box-shadow:0 0 12px #3cffad}
.stage{width:min(1180px,92%);min-height:calc(100vh - 140px);margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(25px,5vw,75px);align-items:center;padding:50px 0 35px}
.intro{padding-bottom:35px}
.eyebrow,.mini-label,.page-top,.page-bottom,.scroll-hint,#page-counter{font-family:'Orbitron',sans-serif;font-size:.62rem;letter-spacing:1.5px;color:var(--cyan)}
.eyebrow{margin-bottom:24px}
.intro h1{font-size:clamp(2.7rem,5vw,4.8rem);line-height:1.08;letter-spacing:-2px;font-weight:700}
.intro h1 span,.section-heading span{color:var(--cyan);text-shadow:0 0 25px rgba(0,217,255,.22)}
.intro-copy{max-width:350px;color:var(--muted);font-size:.95rem;line-height:1.9;margin-top:22px}
.scroll-hint{display:flex;align-items:center;gap:9px;margin-top:42px;font-size:.58rem;color:#8da8c4}
.scroll-hint i{font-size:1.4rem;color:var(--cyan)}
.book-scene{width:100%;max-width:610px;justify-self:end;perspective:1800px}
.book{position:relative;width:100%;aspect-ratio:1.12/1;min-height:410px;transform-style:preserve-3d;filter:drop-shadow(0 22px 30px rgba(0,0,0,.3))}
.book-base{position:absolute;inset:0;background:#071020;border:1px solid rgba(0,217,255,.35);border-radius:5px 12px 12px 5px;box-shadow:inset 0 0 30px rgba(0,217,255,.05),var(--glow)}
.paper{position:absolute;top:0;left:0;width:100%;height:100%;transform-style:preserve-3d;transform-origin:left center;transition:transform .85s cubic-bezier(.2,.75,.2,1);border-radius:5px 12px 12px 5px}
.paper.is-flipped{transform:rotateY(-180deg)}
.paper-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;border:1px solid rgba(0,217,255,.26);border-radius:5px 12px 12px 5px;background:linear-gradient(145deg,rgba(13,29,53,.99),rgba(5,13,27,.99));padding:clamp(20px,3vw,36px);display:flex;flex-direction:column}
.paper-face:after{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:linear-gradient(transparent,var(--cyan),transparent);opacity:.5}
.paper-face.back{transform:rotateY(180deg)}
.profile-paper{z-index:3}
.paper[data-index="1"]{z-index:2}
.paper[data-index="2"]{z-index:1}
.paper.is-flipped{z-index:10!important}
.profile-page{align-items:center;text-align:center}
.page-top,.page-bottom{display:flex;justify-content:space-between;gap:10px;font-size:.49rem;letter-spacing:1px;color:#7896b8}
.page-bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.48rem}
.avatar{position:relative;width:88px;height:88px;border:1px solid var(--cyan);border-radius:50%;display:grid;place-items:center;margin:20px auto 13px;box-shadow:0 0 26px rgba(0,217,255,.14),inset 0 0 20px rgba(0,217,255,.08);background:repeating-linear-gradient(0deg,transparent,transparent 5px,rgba(0,217,255,.04) 6px)}
.avatar span{font:700 1.8rem 'Orbitron',sans-serif;color:var(--cyan)}
.avatar i{position:absolute;right:-4px;bottom:0;border-radius:50%;background:var(--cyan);color:var(--bg);padding:6px;font-size:1rem}
.profile-page .mini-label{font-size:.55rem}
.profile-page h2{font:800 clamp(2rem,4vw,3.2rem)/1.05 'Orbitron',sans-serif;margin:9px 0 12px;letter-spacing:-1.5px}
.profile-page h2 span{color:var(--cyan)}
.role{font:600 .56rem 'Orbitron',sans-serif;letter-spacing:.6px;color:#b3cce6}
.role span{color:var(--cyan)}
.bio{max-width:350px;color:var(--muted);font-size:.74rem;line-height:1.8;margin:15px auto 5px}
.socials{display:flex;justify-content:center;gap:10px;margin:14px 0 18px}
.socials a{width:34px;height:34px;border:1px solid var(--line);display:grid;place-items:center;border-radius:50%;font-size:1.2rem;color:var(--cyan);transition:.25s}
.socials a:hover{background:var(--cyan);color:#04101f;box-shadow:0 0 20px rgba(0,217,255,.3);transform:translateY(-3px)}
.button-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--cyan);border-radius:3px;padding:10px 13px;font-size:.66rem;font-weight:600;cursor:pointer;transition:.25s}
.button i{font-size:1rem}
.button.primary{background:var(--cyan);color:#03111d}
.button.primary:hover{background:#8bf0ff;box-shadow:0 0 20px rgba(0,217,255,.25)}
.button.ghost{background:transparent;color:var(--cyan)}
.button.ghost:hover{background:rgba(0,217,255,.1)}
.content-page .mini-label{margin-top:24px;margin-bottom:10px}
.section-heading{font:700 clamp(1.5rem,3vw,2.2rem)/1.15 'Orbitron',sans-serif;letter-spacing:-1px}
.body-copy{font-size:.74rem;line-height:1.8;color:var(--muted);margin-top:12px}
.rule{height:1px;background:var(--line);margin:17px 0 0}
.skill-list{display:grid;gap:9px;margin-top:3px}
.skill{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;font-size:.68rem;color:#d5e9ff}
.skill-track{height:5px;border-radius:10px;background:#172c45;overflow:hidden}
.skill-track i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 10px var(--cyan);border-radius:10px}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.tag-row span,.project-tech{font:500 .5rem 'Orbitron',sans-serif;letter-spacing:.4px;color:var(--cyan);border:1px solid var(--line);padding:5px 7px;border-radius:2px}
.service{display:grid;grid-template-columns:35px 1fr;gap:11px;margin-top:20px}
.service>i{font-size:1.5rem;color:var(--cyan);border:1px solid var(--line);width:34px;height:34px;display:grid;place-items:center}
.service h3,.project-card h3{font-size:.78rem;font-weight:600}
.service p,.project-card p{font-size:.66rem;color:var(--muted);line-height:1.7;margin-top:4px}
.callout{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:11px;margin-top:20px;color:#b9d3ec;font-size:.65rem}
.callout i{font-size:1.2rem;color:var(--cyan)}
.project-card{display:grid;grid-template-columns:35px 1fr;gap:12px;margin-top:19px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.project-number{font:700 .8rem 'Orbitron',sans-serif;color:var(--cyan)}
.project-tech{display:inline-block;margin-top:7px}
.contact-form{display:grid;gap:7px;margin-top:12px}
.contact-form label{font-size:.62rem;color:#a8c3df}
.contact-form input,.contact-form textarea{width:100%;background:#061020;border:1px solid rgba(0,217,255,.22);border-radius:3px;padding:9px 10px;color:var(--text);font-size:.68rem;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:1px solid var(--cyan);border-color:var(--cyan)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#5f7894}
.send-button{margin-top:4px;width:100%}
.form-note{font-size:.57rem;color:var(--muted);line-height:1.6}
.blank-back{align-items:center;justify-content:center;font:800 2rem 'Orbitron',sans-serif;color:var(--cyan)}
.book-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}
.nav-button{width:36px;height:36px;display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--cyan);font-size:1.5rem;cursor:pointer;transition:.2s}
.nav-button:hover:not(:disabled){background:var(--cyan);color:var(--bg)}
.nav-button:disabled{opacity:.25;cursor:not-allowed}
#page-counter{font-size:.58rem;min-width:125px;text-align:center}
.footer{min-height:58px;border-top:1px solid rgba(141,168,196,.12);color:#6f89a6;font:500 .53rem 'Orbitron',sans-serif;letter-spacing:1px}
.footer b{color:var(--cyan);margin-left:5px}
@media(min-width:1300px){.stage{padding-top:60px}.book{min-height:490px}}
@media(max-width:900px){.stage{grid-template-columns:1fr;gap:20px;padding-top:35px}.intro{text-align:center;padding-bottom:0}.intro-copy{margin-left:auto;margin-right:auto}.scroll-hint{justify-content:center;margin-top:20px}.book-scene{justify-self:center;max-width:580px}.intro h1{font-size:clamp(2.5rem,7vw,4rem)}}
@media(max-width:560px){.topbar,.footer{width:90%}.topbar{height:65px}.brand{font-size:.8rem}.status{font-size:.48rem;letter-spacing:.5px}.stage{width:92%;padding-top:28px;min-height:auto}.intro h1{font-size:2.55rem}.intro-copy{font-size:.82rem}.book-scene{width:100%}.book{aspect-ratio:auto;min-height:560px}.paper-face{padding:18px 17px}.page-top{font-size:.43rem}.page-bottom{font-size:.42rem}.avatar{width:70px;height:70px;margin:18px auto 10px}.profile-page h2{font-size:2.1rem}.bio{font-size:.7rem}.button{font-size:.61rem;padding:9px 10px}.socials{margin:12px 0 14px}.content-page .mini-label{margin-top:18px}.section-heading{font-size:1.65rem}.body-copy{font-size:.7rem}.skill{grid-template-columns:88px 1fr;font-size:.65rem}.service{margin-top:17px}.service p,.project-card p{font-size:.64rem}.contact-form input,.contact-form textarea{padding:8px}.footer{font-size:.43rem;letter-spacing:.4px;gap:10px}.footer span:last-child{text-align:right}}
@media(max-width:360px){.book{min-height:590px}.profile-page h2{font-size:1.8rem}.button-row{gap:6px}.button{padding:8px}.page-face{padding:14px}.status{font-size:.42rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.avatar {
overflow: hidden;
  background-image: url("../images/cfb9a290-425d-4245-ba38-f6457007d9f8.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.avatar span {
  position: relative;
  z-index: 2;
  color: white;
  text-shadow: 0 2px 8px #000;
}

.blank-back {
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

.blank-back::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("./Images/Bigger\ Dreams\,\ Same\ Guy.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}

.blank-back > span {
  position: relative;
  z-index: 2;
}

/* Three certificate slots */
.certificate-slots {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
}

.certificate-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 171, 240, 0.3);
  border-radius: 6px;
  background: rgba(0, 171, 240, 0.06);
  color: #e9f7ff;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
}

.certificate-slot:hover {
  border-color: #00abf0;
  background: rgba(0, 171, 240, 0.13);
}

.certificate-slot > i:first-child {
  flex-shrink: 0;
  color: #63d7ff;
  font-size: 23px;
}

.certificate-slot > span {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.certificate-slot strong {
  color: #e9f7ff;
  font-size: 12px;
  font-weight: 600;
}

.certificate-slot small {
  overflow-wrap: anywhere;
  color: #9cb7c8;
  font-size: 10px;
}

.certificate-slot .slot-link {
  flex-shrink: 0;
  color: #00abf0;
  font-size: 16px;
}

.certificate-gallery a {
  display: block;
  color: #e9f7ff;
  text-decoration: none;
}

.certificate-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  padding: 15px;
  text-align: center;
  background: rgba(0, 171, 240, 0.08);
  border: 1px solid rgba(0, 171, 240, 0.5);
  border-radius: 6px;
  transition: 0.25s;
}

.certificate-preview:hover {
  border-color: #00abf0;
  background: rgba(0, 171, 240, 0.16);
}

.certificate-preview .bx-award {
  color: #00abf0;
  font-size: 36px;
}

.certificate-preview strong {
  font-size: 12px;
}

.certificate-preview span {
  color: #00abf0;
  font-size: 10px;
}

/* FIX: Make the Projects page scroll so certificates are visible */
.paper[data-index="2"] .paper-face.front {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #00d9ff #071020;
}

/* Keep the certificate photo inside the book page */
.certificate-gallery {
  width: 100%;
  margin: 12px 0;
}

.certificate-gallery a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: #e8f5ff;
  text-align: center;
}

.certificate-gallery .certificate-photo {
  display: block;
  width: 100%;
  max-width: 240px;
  max-height: 150px;
  object-fit: contain;
  border: 1px solid rgba(0, 217, 255, 0.45);
  border-radius: 5px;
  background: #071020;
}

.certificate-gallery a > span {
  color: #00d9ff;
  font: 500 0.55rem 'Orbitron', sans-serif;
}

.certificate-slots {
  width: 100%;
  margin: 10px 0 16px;
}

.certificate-slot {
  width: 100%;
}

@media (max-width: 560px) {
  .paper[data-index="2"] .paper-face.front {
    overflow-y: auto;
  }

  .certificate-gallery .certificate-photo {
    max-height: 120px;
  }
}



.certificate-preview strong {

  font-size: 12px;

}



.certificate-preview span {

  color: #00abf0;

  font-size: 10px;

}



/* FIX: Make the Projects page scroll so certificates are visible */

.paper[data-index="2"] .paper-face.front {

  overflow-y: auto;

  overflow-x: hidden;

  scrollbar-width: thin;

  scrollbar-color: #00d9ff #071020;

}



/* Keep the certificate photo inside the book page */

.certificate-gallery {

  width: 100%;

  margin: 12px 0;

}
/* Center the final-page thank-you content and home button */
.final-page,
.thank-you-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.final-page .back-home,
.thank-you-page .back-home,
.back-to-home {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0;
    text-align: center;
}

.final-page h1,
.final-page h2,
.thank-you-page h1,
.thank-you-page h2,
.final-page p,
.thank-you-page p {
    text-align: center;
}



.certificate-gallery a {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  width: 100%;

  color: #e8f5ff;

  text-align: center;

}



.certificate-gallery .certificate-photo {

  display: block;

  width: 100%;

  max-width: 240px;

  max-height: 150px;

  object-fit: contain;

  border: 1px solid rgba(0, 217, 255, 0.45);

  border-radius: 5px;

  background: #071020;

}



.certificate-gallery a > span {

  color: #00d9ff;

  font: 500 0.55rem 'Orbitron', sans-serif;

}



.certificate-slots {

  width: 100%;

  margin: 10px 0 16px;

}



.certificate-slot {

  width: 100%;

}



@media (max-width: 560px) {

  .paper[data-index="2"] .paper-face.front {

    overflow-y: auto;

  }



  .certificate-gallery .certificate-photo {

    max-height: 120px;

  }

}