/*
  The Secret Cycle Website Styles
  Edit colors, spacing, fonts, and layout here.
  Questionnaire calculation logic is NOT in this file.
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --gold:#C9A458;--gold-light:#E2C47A;--gold-dark:#9E7D38;--gold-dim:rgba(201,164,88,0.12);
  --blue:#A8DDEF;--blue-mid:#5BBAD8;--blue-dim:rgba(168,221,239,0.1);--blue-border:rgba(168,221,239,0.28);
  --black:#080C10;--black2:#0C1018;--black3:#101520;
  --white:#EEF3FA;--muted:#9AAFC6;--mid:#2A3A50;
}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--white);font-family:'Josefin Sans',sans-serif;
  font-weight:300;letter-spacing:0.04em;overflow-x:hidden;}

/* SUBTLE STAR FIELD */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 15% 25%,rgba(126,200,227,0.04) 0%,transparent 45%),
    radial-gradient(ellipse at 85% 75%,rgba(201,164,88,0.05) 0%,transparent 45%);}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;padding:1.1rem 4rem;
  background:rgba(8,12,16,0.92);border-bottom:0.5px solid rgba(126,200,227,0.18);
  backdrop-filter:blur(10px);}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:0.95rem;font-weight:300;
  letter-spacing:0.15em;color:var(--gold);text-decoration:none;text-transform:uppercase;}
.nav-links{display:flex;gap:2.5rem;list-style:none;}
.nav-links a{color:var(--muted);text-decoration:none;font-size:0.7rem;
  letter-spacing:0.18em;text-transform:uppercase;transition:color 0.3s;}
.nav-links a:hover{color:var(--blue);}

/* HERO */
#hero{min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:8rem 4rem 4rem;}
.hero-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(126,200,227,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,200,227,0.03) 1px,transparent 1px);
  background-size:70px 70px;}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 60% 50%,rgba(201,164,88,0.07) 0%,transparent 55%),
    radial-gradient(ellipse at 20% 60%,rgba(126,200,227,0.05) 0%,transparent 45%);}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;align-items:center;max-width:1100px;width:100%;}
.hero-tag{display:inline-block;font-size:0.62rem;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--blue);border:0.5px solid rgba(126,200,227,0.4);
  padding:0.4rem 1rem;margin-bottom:2rem;}
.hero-title{font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.6rem,4.5vw,4rem);font-weight:300;line-height:1.1;
  color:var(--white);margin-bottom:0.6rem;}
.hero-title em{font-style:italic;color:var(--gold);}
.hero-author{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;
  color:var(--blue);margin-bottom:2.5rem;letter-spacing:0.06em;}
.hero-tagline{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;
  color:var(--muted);margin-bottom:1rem;letter-spacing:0.06em;}
.hero-desc{font-size:0.87rem;line-height:1.95;color:var(--muted);
  max-width:440px;margin-bottom:3rem;}
.btn-row{display:flex;gap:1.2rem;flex-wrap:wrap;}
.btn-fire{display:inline-block;padding:0.9rem 2.4rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:#080C10;font-family:'Josefin Sans',sans-serif;font-size:0.7rem;
  letter-spacing:0.22em;text-transform:uppercase;text-decoration:none;font-weight:400;
  border:none;cursor:pointer;transition:opacity 0.3s,transform 0.2s;}
.btn-fire:hover{opacity:0.88;transform:translateY(-2px);}
.btn-blue{display:inline-block;padding:0.9rem 2.4rem;
  border:0.5px solid rgba(126,200,227,0.5);color:var(--blue);
  font-family:'Josefin Sans',sans-serif;font-size:0.7rem;
  letter-spacing:0.22em;text-transform:uppercase;text-decoration:none;font-weight:400;
  background:transparent;cursor:pointer;transition:background 0.3s;}
.btn-blue:hover{background:var(--blue-dim);}
.btn-outline-gold{display:inline-block;padding:0.9rem 2.4rem;
  border:0.5px solid rgba(201,164,88,0.5);color:var(--gold);
  font-family:'Josefin Sans',sans-serif;font-size:0.7rem;
  letter-spacing:0.22em;text-transform:uppercase;text-decoration:none;font-weight:400;
  background:transparent;cursor:pointer;transition:background 0.3s;}
.btn-outline-gold:hover{background:var(--gold-dim);}

/* BOOK DISPLAY */
.hero-book{display:flex;justify-content:center;align-items:center;}
.book-frame{
  width:260px;
  border:0.5px solid rgba(201,164,88,0.3);
  box-shadow:20px 30px 60px rgba(0,0,0,0.8),
    0 0 40px rgba(126,200,227,0.06),
    -5px -5px 20px rgba(201,164,88,0.04);
  transform:perspective(900px) rotateY(-7deg);
  overflow:hidden;position:relative;background:#090D12;}
.book-spine{position:absolute;top:0;left:0;width:10px;height:100%;
  background:linear-gradient(to right,rgba(201,164,88,0.2),transparent);
  border-right:0.5px solid rgba(201,164,88,0.12);z-index:2;}
.book-frame img{display:block;width:100%;height:auto;}

/* SECTIONS */
section{padding:6rem 4rem;position:relative;z-index:1;}
.section-inner{max-width:1100px;margin:0 auto;}
.sec-tag{display:block;font-size:0.6rem;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1rem;}
.sec-title{font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,3.5vw,2.8rem);font-weight:300;color:var(--white);
  line-height:1.15;margin-bottom:1.5rem;}
.gold-rule{width:55px;height:1px;background:var(--gold);margin-bottom:2.5rem;}
.blue-rule{width:55px;height:1px;background:var(--blue);margin-bottom:2.5rem;}

/* ABOUT */
#about{background:var(--black2);border-top:0.5px solid var(--blue-border);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
.about-text p{font-size:0.88rem;line-height:2;color:var(--muted);margin-bottom:1.4rem;}
.about-quote{border-left:1px solid var(--gold);padding:1.5rem 2rem;
  background:var(--gold-dim);}
.about-quote blockquote{font-family:'Cormorant Garamond',serif;font-size:1.3rem;
  font-style:italic;font-weight:300;color:var(--gold-light);line-height:1.6;}
.about-author-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;
  font-weight:400;color:var(--white);margin:1.5rem 0 0.4rem;}
.about-author-title{font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue);}

/* PARADOX SECTION */
#paradox{background:var(--black3);border-top:0.5px solid var(--blue-border);}
.paradox-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.paradox-img-wrap{position:relative;}
.paradox-img{width:100%;border:0.5px solid rgba(201,164,88,0.2);
  box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.paradox-text p{font-size:0.88rem;line-height:2;color:var(--muted);margin-bottom:1.4rem;}
.concept-tag{display:inline-block;font-size:0.6rem;letter-spacing:0.25em;
  text-transform:uppercase;padding:0.3rem 0.8rem;margin:0.2rem;
  border:0.5px solid;}
.concept-tag.gold{color:var(--gold);border-color:rgba(201,164,88,0.35);}
.concept-tag.blue{color:var(--blue);border-color:rgba(126,200,227,0.35);}
.concept-tags{margin-bottom:1.5rem;}

/* SLIDES GALLERY */
#gallery{background:var(--black2);border-top:0.5px solid var(--blue-border);}
.slide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;}
.slide-item{overflow:hidden;border:0.5px solid rgba(126,200,227,0.12);
  transition:border-color 0.3s;}
.slide-item:hover{border-color:rgba(201,164,88,0.4);}
.slide-item img{display:block;width:100%;height:auto;transition:transform 0.4s;}
.slide-item:hover img{transform:scale(1.02);}

/* QUIZ */
#quiz{background:var(--black);border-top:0.5px solid var(--blue-border);}
.quiz-intro-text{max-width:640px;font-size:0.87rem;line-height:1.95;
  color:var(--muted);margin-bottom:3rem;}
.quiz-wrap{max-width:740px;}
.prog-wrap{margin-bottom:2.8rem;}
.prog-meta{display:flex;justify-content:space-between;font-size:0.63rem;
  letter-spacing:0.15em;text-transform:uppercase;color:#3A4E6A;margin-bottom:0.7rem;}
.prog-track{height:1.5px;background:rgba(126,200,227,0.1);}
.prog-fill{height:100%;background:linear-gradient(to right,var(--gold),var(--blue));
  width:0%;transition:width 0.35s ease;}
.q-panel{display:none;}
.q-panel.active{display:block;}
.q-num{font-size:0.6rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1rem;}
.q-text{font-family:'Cormorant Garamond',serif;font-size:1.42rem;font-weight:300;
  color:var(--white);line-height:1.4;margin-bottom:2.5rem;}
.q-opts{display:flex;flex-direction:column;gap:0.75rem;}
.q-opt{padding:1rem 1.5rem;border:0.5px solid rgba(126,200,227,0.13);
  background:transparent;color:var(--muted);font-family:'Josefin Sans',sans-serif;
  font-size:0.79rem;letter-spacing:0.03em;cursor:pointer;text-align:left;
  transition:all 0.22s;position:relative;}
.q-opt .ltr{color:var(--blue);font-size:0.64rem;letter-spacing:0.18em;
  text-transform:uppercase;margin-right:0.9rem;font-weight:400;}
.q-opt:hover{border-color:var(--blue-mid);color:var(--white);background:var(--blue-dim);}
.q-opt.sel{border-color:var(--gold);background:var(--gold-dim);color:var(--white);}
.q-opt.sel .ltr{color:var(--gold);}
.q-opt.sel::after{content:'✦';position:absolute;right:1.2rem;top:50%;
  transform:translateY(-50%);color:var(--gold);font-size:0.7rem;}
.q-nav{display:flex;align-items:center;gap:1.2rem;margin-top:2.2rem;}
.q-next{padding:0.82rem 2.2rem;background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:#080C10;border:none;cursor:pointer;font-family:'Josefin Sans',sans-serif;
  font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:400;
  display:none;transition:opacity 0.3s;}
.q-next:hover{opacity:0.85;}
.q-next.show{display:block;}
.q-back{padding:0.82rem 1.5rem;background:transparent;
  border:0.5px solid rgba(255,255,255,0.08);color:#445;cursor:pointer;
  font-family:'Josefin Sans',sans-serif;font-size:0.68rem;
  letter-spacing:0.15em;text-transform:uppercase;display:none;transition:all 0.25s;}
.q-back.show{display:block;}
.q-back:hover{border-color:var(--muted);color:var(--white);}
.q-hint{font-size:0.68rem;color:#2A3A50;letter-spacing:0.06em;}

/* RESULT */
#result-section{display:none;background:var(--black2);padding:6rem 4rem;
  border-top:0.5px solid var(--blue-border);}
#result-section.on{display:block;}
.result-wrap{max-width:1100px;margin:0 auto;}
.result-badge{display:inline-flex;align-items:center;gap:1rem;
  border:0.5px solid var(--gold);padding:0.5rem 1.3rem;margin-bottom:1.5rem;}
.rb-label{font-size:0.6rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);}
.rb-element{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--blue);}
.result-name{font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,3.5vw,3rem);font-weight:300;
  line-height:1.1;margin-bottom:1.5rem;}
.result-scores-row{display:flex;gap:2.5rem;margin-bottom:2.5rem;flex-wrap:wrap;}
.score-chip .chip-lbl{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;
  color:#3A4E6A;margin-bottom:0.3rem;}
.score-chip .chip-val{font-family:'Cormorant Garamond',serif;font-size:2.2rem;
  font-weight:300;color:var(--white);}
.result-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-bottom:3rem;}
.result-desc p{font-size:0.88rem;line-height:2;color:var(--muted);margin-bottom:1.2rem;}

/* QUADRANT MAP with dot */
.quad-map-wrap{position:relative;display:inline-block;width:100%;max-width:500px;}
.quad-map-img{width:100%;display:block;border:0.5px solid rgba(201,164,88,0.2);
  box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.quad-dot-layer{position:absolute;inset:0;pointer-events:none;}
.quad-dot{position:absolute;width:18px;height:18px;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity 0.6s,left 0.8s cubic-bezier(.34,1.56,.64,1),top 0.8s cubic-bezier(.34,1.56,.64,1);}
.quad-dot-ring{position:absolute;inset:-8px;border:1.5px solid;
  border-radius:50%;animation:pulseRing 2s ease-out infinite;opacity:0.5;}
.quad-dot-core{position:absolute;inset:0;border-radius:50%;}
@keyframes pulseRing{0%{transform:scale(1);opacity:0.5;}100%{transform:scale(2.2);opacity:0;}}

/* ACTIONS */
.actions-block{border-top:0.5px solid rgba(126,200,227,0.12);padding-top:3rem;margin-top:1rem;}
.actions-title{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;
  color:var(--white);margin-bottom:0.4rem;}
.actions-sub{font-size:0.72rem;color:#3A4E6A;letter-spacing:0.06em;margin-bottom:2rem;}
.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:2.5rem;}
.action-card{border:0.5px solid rgba(126,200,227,0.18);padding:1.4rem 1.5rem;
  background:rgba(126,200,227,0.03);}
.action-card h4{font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--blue);margin-bottom:0.7rem;}
.action-card p{font-size:0.8rem;line-height:1.8;color:var(--muted);}
.result-btns{display:flex;gap:1.2rem;flex-wrap:wrap;}

/* MEDITATION */
#meditation{background:var(--black);border-top:0.5px solid var(--blue-border);}
.med-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}
.med-card{border:0.5px solid rgba(201,164,88,0.15);padding:2rem 1.8rem;
  transition:border-color 0.3s,background 0.3s;position:relative;overflow:hidden;}
.med-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--blue),transparent);
  opacity:0;transition:opacity 0.3s;}
.med-card:hover{border-color:rgba(126,200,227,0.4);background:var(--blue-dim);}
.med-card:hover::before{opacity:1;}
.med-icon{font-size:1.1rem;margin-bottom:1.3rem;}
.med-card h3{font-family:'Cormorant Garamond',serif;font-size:1.18rem;font-weight:400;
  color:var(--white);margin-bottom:0.75rem;}
.med-card p{font-size:0.79rem;line-height:1.8;color:var(--muted);margin-bottom:1.4rem;}
.med-link{font-size:0.63rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;
  transition:gap 0.25s;}
.med-link:hover{gap:0.8rem;}

/* VIDEOS */
#videos{background:var(--black2);border-top:0.5px solid var(--blue-border);}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem;}
.vid-card{border:0.5px solid var(--blue-border);overflow:hidden;
  transition:border-color 0.3s;text-decoration:none;display:block;color:inherit;}
.vid-card:hover{border-color:var(--gold);}
.vid-thumb{width:100%;aspect-ratio:16/9;background:var(--black3);
  display:flex;align-items:center;justify-content:center;position:relative;}
.vid-thumb-bg{position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(126,200,227,0.07) 0%,rgba(201,164,88,0.05) 100%);}
.vid-play{width:46px;height:46px;border:1.5px solid var(--blue);border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:1;transition:background 0.3s;}
.vid-card:hover .vid-play{background:var(--blue-dim);border-color:var(--gold);}
.vid-play::after{content:'';border-left:13px solid var(--blue);
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px;}
.vid-card:hover .vid-play::after{border-left-color:var(--gold);}
.vid-info{padding:1.1rem 1.3rem;}
.vid-ch{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:0.4rem;}
.vid-title{font-family:'Cormorant Garamond',serif;font-size:1rem;
  font-weight:400;color:var(--white);line-height:1.4;}

/* CONTACT */
#contact{background:var(--black);border-top:0.5px solid var(--blue-border);}
.contact-inner{max-width:660px;margin:0 auto;text-align:center;}
.contact-inner .sec-tag,.contact-inner .sec-title{text-align:center;}
.contact-inner .gold-rule{margin:0 auto 2.5rem;}
.contact-desc{font-size:0.87rem;line-height:2;color:var(--muted);margin-bottom:2.5rem;}
.contact-email{display:inline-block;font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;font-style:italic;color:var(--gold);text-decoration:none;
  border-bottom:0.5px solid rgba(201,164,88,0.35);padding-bottom:0.25rem;
  transition:border-color 0.3s;word-break:break-all;}
.contact-email:hover{border-color:var(--gold);}
.ornament{text-align:center;color:rgba(126,200,227,0.2);font-size:0.9rem;
  letter-spacing:0.6em;margin:2rem 0;}
.contact-socials{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;}
.contact-socials a{font-size:0.63rem;letter-spacing:0.22em;text-transform:uppercase;
  color:#2A3A50;text-decoration:none;transition:color 0.3s;}
.contact-socials a:hover{color:var(--blue);}

/* FOOTER */
footer{padding:2.2rem 4rem;border-top:0.5px solid var(--blue-border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;position:relative;z-index:1;}
.foot-logo{font-family:'Cormorant Garamond',serif;font-size:0.88rem;
  letter-spacing:0.1em;color:var(--gold);}
.foot-copy{font-size:0.63rem;letter-spacing:0.08em;color:#1A2A3A;}

@media(max-width:768px){
  nav{padding:1rem 1.5rem;}
  .nav-links{display:none;}
  section,#result-section{padding:4rem 1.5rem;}
  #hero{padding:7rem 1.5rem 3rem;}
  .hero-inner,.about-grid,.paradox-grid,.result-intro-grid,.actions-grid{
    grid-template-columns:1fr;gap:2.5rem;}
  .hero-book{display:flex;order:-1;margin-bottom:0.5rem;}
  .book-frame{width:160px;transform:perspective(900px) rotateY(-5deg);}
  .quad-map-wrap{max-width:100%;}
  footer{flex-direction:column;text-align:center;padding:2rem 1.5rem;}
}

  #lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
  }
  #lightbox.active {
    display: flex;
  }
  #lightbox-img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    object-fit: contain;
  }
  .slide-item img {
    cursor: zoom-in;
    transition: transform 0.2s ease;
  }


/* --- Override: make quadrant pointer clearly blue and visible --- */
.quad-dot-ring {
    border-color: #4BA8D0 !important;
    box-shadow: 0 0 8px rgba(75,168,208,0.55) !important;
}
.quad-dot-core {
    background: #4BA8D0 !important;
    box-shadow: 0 0 6px rgba(75,168,208,0.45) !important;
}
.quad-dot {
    opacity: 1 !important;
}


/* AUTHOR PHOTO */
.author-photo-wrap{
  margin-bottom:1.5rem;
  text-align:center;
}
.author-photo{
  max-width:260px;
  width:100%;
  border:0.5px solid rgba(201,164,88,0.35);
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
  display:block;
  margin:0 auto;
}