/* =================================================================
   CREATOR — design tokens
   ================================================================= */
:root{
  --navy-deep:   #120e29;
  --navy:        #1a153a;
  --navy-soft:   #241c52;
  --teal:        #0da58e;
  --teal-light:  #17c9ae;
  --amber:       #f2a541;
  --cream:       #f7f5ef;
  --paper:       #fffdf9;
  --ink:         #1c1b29;
  --ink-soft:    #4c4a63;
  --line:        #e7e3d8;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(18,14,41,0.08);
  --shadow-card: 0 16px 40px rgba(18,14,41,0.10);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

a{ text-decoration: none; }

/* ---------- Buttons ---------- */
.btn{ font-weight: 600; border-radius: 10px; padding: .65rem 1.3rem; transition: all .18s ease; }

.btn-primary-teal{
  background: var(--teal); color:#fff; border: 1px solid var(--teal);
  position: relative; overflow: hidden; z-index: 1;
}
.btn-primary-teal::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}
.btn-primary-teal:hover{ background: var(--teal-light); border-color: var(--teal-light); color:#fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,165,142,.35); }
.btn-primary-teal:hover::after{ left: 120%; }
.btn-primary-teal:active{ transform: translateY(0); }

.btn-outline-cream{
  background: transparent; color:#fff; border: 1px solid rgba(255,255,255,.35);
}
.btn-outline-cream:hover{ background: rgba(255,255,255,.1); color:#fff; border-color:#fff; transform: translateY(-2px); }

.btn-ghost-navy{ background: transparent; color: var(--navy); border: 1px solid var(--line); }
.btn-ghost-navy:hover{ border-color: var(--navy); background: var(--navy); color: #fff; transform: translateY(-2px); }

/* ---------- Nav ---------- */
.site-nav{
  background: var(--navy);
  padding: .9rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.site-nav.scrolled{
  background: rgba(18,14,41,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  padding: .6rem 0;
}
.site-nav .brand{
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  transition: opacity .2s ease;
}
.site-nav .brand:hover{ opacity: .85; }
.site-nav .brand i{ color: var(--teal); }
.site-nav .nav-link{
  color: rgba(255,255,255,.75); font-weight: 500; font-size: .93rem;
  position: relative; transition: color .2s ease;
}
.site-nav .nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background: var(--teal); transition: width .25s ease;
}
.site-nav .nav-link:hover{ color: #fff; }
.site-nav .nav-link:hover::after{ width: 100%; }

/* ---------- Hero ---------- */
.hero{
  background: radial-gradient(circle at 15% 20%, var(--navy-soft), var(--navy-deep) 65%);
  color: #fff;
  padding: 5.5rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:-20%;
  background: radial-gradient(circle at 80% 30%, rgba(13,165,142,.18), transparent 55%);
  animation: heroDrift 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroDrift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-3%, 3%) scale(1.08); }
}
.hero h1{ font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 700; line-height: 1.08; }
.hero .lead{ color: rgba(255,255,255,.72); font-size: 1.1rem; max-width: 540px; }

/* hero entrance animation */
.hero .eyebrow,
.hero h1,
.hero .lead,
.hero .hero-cta,
.hero .hero-note{
  opacity: 0;
  animation: heroIn .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero .eyebrow{ animation-delay: 0s; }
.hero h1{ animation-delay: .08s; }
.hero .lead{ animation-delay: .18s; }
.hero .hero-cta{ animation-delay: .28s; }
.hero .hero-note{ animation-delay: .38s; }
@keyframes heroIn{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform: translateY(0); } }

/* signature element: an animated "directory being built" panel */
.builder-mock{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transform: rotate(1.2deg);
  transition: transform .15s ease-out, box-shadow .3s ease;
  opacity: 0;
  animation: heroMockIn .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: .22s;
  will-change: transform;
}
@keyframes heroMockIn{
  from{ opacity:0; transform: translateY(24px) rotate(1.2deg) scale(.96); }
  to{ opacity:1; transform: translateY(0) rotate(1.2deg) scale(1); }
}
.builder-mock:hover{ box-shadow: 0 22px 50px rgba(13,165,142,.25); }
.builder-mock .bm-bar{
  display:flex; align-items:center; gap:.4rem;
  padding: .7rem 1rem; background: #eee9dd; border-bottom: 1px solid var(--line);
}
.builder-mock .bm-dot{ width:9px; height:9px; border-radius:50%; background:#d8d2c0; }
.builder-mock .bm-title{
  margin-left:.5rem; font-family: var(--font-mono); font-size:.72rem; color: var(--ink-soft);
}
.builder-mock .bm-cols{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr .9fr;
  padding: .7rem 1rem 0; font-family: var(--font-mono); font-size:.68rem;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em;
}
.builder-mock .bm-row{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr .9fr;
  padding: .6rem 1rem; font-size:.82rem; border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(6px);
  animation: bm-in .5s ease forwards;
  transition: background .15s ease;
}
.builder-mock .bm-row:hover{ background: rgba(13,165,142,.06); }
.builder-mock .bm-row:nth-child(1){ animation-delay: .55s; }
.builder-mock .bm-row:nth-child(2){ animation-delay: .75s; }
.builder-mock .bm-row:nth-child(3){ animation-delay: .95s; }
.builder-mock .bm-row:nth-child(4){ animation-delay: 1.15s; }
@keyframes bm-in{ to{ opacity:1; transform: translateY(0); } }
.builder-mock .bm-tag{
  font-family: var(--font-mono); font-size:.66rem; background: rgba(13,165,142,.12);
  color: var(--teal); padding: .1rem .5rem; border-radius: 999px; display:inline-block;
}
.builder-mock .bm-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem 1rem; border-top: 1px solid var(--line);
  opacity: 0; animation: bm-in .5s ease forwards; animation-delay: 1.35s;
}
.builder-mock .bm-published{
  font-family: var(--font-mono); font-size:.72rem; color: var(--teal); font-weight:600;
}
.builder-mock .bm-published i{ display:inline-block; animation: pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------- Scroll-reveal (used across the page) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal, .hero *, .builder-mock, .builder-mock .bm-row, .builder-mock .bm-footer{
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ---------- Sections ---------- */
.section{ padding: 5rem 0; }
.section-alt{ background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-title{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; color: var(--navy); }
.section-sub{ color: var(--ink-soft); max-width: 620px; }

/* ---------- Feature cards ---------- */
.feat-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; height: 100%; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: rgba(13,165,142,.35); }
.feat-icon{
  width: 42px; height: 42px; border-radius: 10px; background: rgba(13,165,142,.1);
  color: var(--teal); display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  margin-bottom: 1rem; transition: transform .25s ease, background .25s ease;
}
.feat-card:hover .feat-icon{ transform: scale(1.12) rotate(-6deg); background: rgba(13,165,142,.18); }

/* ---------- How it works ---------- */
.step{
  display:flex; gap: 1rem; padding: 1.4rem .5rem; border-top: 1px solid var(--line);
  transition: background .2s ease, padding-left .2s ease, border-radius .2s ease;
  border-radius: 8px;
}
.step:last-child{ border-bottom: 1px solid var(--line); }
.step:hover{ background: rgba(13,165,142,.05); padding-left: 1rem; }
.step .step-tag{
  font-family: var(--font-mono); font-size: .78rem; color: var(--teal); min-width: 62px;
  transition: color .2s ease;
}
.step:hover .step-tag{ color: var(--amber); }

/* ---------- Pricing ---------- */
.price-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; height: 100%; position: relative; transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-card); }
.price-card.highlight{
  border-color: var(--teal); box-shadow: var(--shadow-card);
  animation: pulseGlow 3.5s ease-in-out infinite;
}
.price-card.highlight:hover{ animation-play-state: paused; transform: translateY(-8px) scale(1.02); }
@keyframes pulseGlow{
  0%,100%{ box-shadow: 0 16px 40px rgba(18,14,41,0.10); }
  50%{ box-shadow: 0 16px 46px rgba(13,165,142,.30); }
}
.price-card .badge-pop{
  position:absolute; top:-13px; left: 2rem; background: var(--amber); color: var(--navy-deep);
  font-family: var(--font-mono); font-size: .68rem; font-weight:700; padding: .25rem .6rem; border-radius: 999px;
}
.price-card .price{ font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--navy); }
.price-card .price span{ font-size: 1rem; color: var(--ink-soft); font-family: var(--font-body); font-weight: 500; }
.price-card ul{ list-style:none; padding:0; margin: 1.3rem 0; }
.price-card ul li{ padding: .35rem 0; font-size: .93rem; color: var(--ink-soft); transition: transform .15s ease; }
.price-card ul li:hover{ transform: translateX(4px); color: var(--ink); }
.price-card ul li i{ color: var(--teal); margin-right:.5rem; }

/* ---------- FAQ ---------- */
.accordion-button{ font-weight: 600; color: var(--navy); transition: background .2s ease, color .2s ease; }
.accordion-button:not(.collapsed){ color: var(--teal); background: rgba(13,165,142,.06); box-shadow:none; }
.accordion-button:focus{ box-shadow: none; }
.accordion-item{ transition: border-color .2s ease; }

/* ---------- Contact ---------- */
.contact-card{ background: var(--navy); color:#fff; border-radius: var(--radius); padding: 2.2rem; transition: box-shadow .25s ease; }
.contact-card:hover{ box-shadow: 0 20px 50px rgba(13,165,142,.18); }
.form-control{ transition: border-color .2s ease, box-shadow .2s ease; }
.form-control:focus{ border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(13,165,142,.15); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,.6); padding: 2.5rem 0; font-size: .88rem; }
.site-footer a{ color: rgba(255,255,255,.8); transition: color .2s ease; }
.site-footer a:hover{ color: var(--teal-light); }

/* ================================================================
   Auth portal (login/signup)
   ================================================================ */
.auth-wrap{
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 20% 20%, var(--navy-soft), var(--navy-deep) 70%);
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
}
.auth-blob{
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35;
  animation: blobFloat 12s ease-in-out infinite; pointer-events: none;
}
.auth-blob.b1{ width: 340px; height: 340px; background: var(--teal); top: -90px; left: -90px; }
.auth-blob.b2{ width: 300px; height: 300px; background: var(--amber); bottom: -110px; right: -70px; animation-delay: -5s; }
@keyframes blobFloat{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(30px,-24px); }
}

.auth-card{
  width:100%; max-width: 430px; background: var(--paper); border-radius: 18px;
  box-shadow: var(--shadow-card); overflow:hidden;
  position: relative; z-index: 1;
  animation: cardIn .55s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn{
  from{ opacity: 0; transform: translateY(20px) scale(.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card .auth-head{ padding: 2rem 2rem 0; text-align:center; }
.auth-card .auth-body{ padding: 1.5rem 2rem 2rem; }

.auth-tabs{ position: relative; display:flex; border-bottom: 1px solid var(--line); margin-top: 1.4rem; }
.auth-tab-btn{
  flex:1; background:none; border:none; padding: .8rem 0; font-weight:600; color: var(--ink-soft);
  transition: color .2s ease; position: relative; z-index: 1;
}
.auth-tab-btn.active{ color: var(--teal); }
.auth-tab-indicator{
  position:absolute; bottom:-1px; left:0; width:50%; height:2px;
  background: var(--teal); transition: transform .3s cubic-bezier(.65,0,.35,1);
}
.auth-tab-indicator.signup{ transform: translateX(100%); }

.auth-plan-pill{
  display:inline-flex; align-items:center; gap:.4rem; font-family: var(--font-mono); font-size:.72rem;
  background: rgba(13,165,142,.1); color: var(--teal); padding: .3rem .7rem; border-radius: 999px;
  margin-bottom: 1rem;
}
.form-label-sm{ font-size:.8rem; font-weight:600; color: var(--ink-soft); }

/* form fade-switch */
.auth-form{ transition: opacity .22s ease, transform .22s ease; }
.auth-form.fade-out{ opacity: 0; transform: translateY(6px); }
.auth-form.fade-in{ animation: authFormIn .32s ease forwards; }
@keyframes authFormIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }

/* ---------- input + icon fix (this was the click-blocking bug) ---------- */
.input-icon-group{ position:relative; }
.input-icon-group i{
  position:absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size:.9rem;
  pointer-events: none;           /* decorative icons must never intercept clicks */
}
.input-icon-group input{ padding-left: 2.2rem; padding-right: 2.4rem; }
.toggle-pass{
  left: auto !important;          /* cancel the stretched left+right box that was blocking the field */
  right: 12px;
  cursor: pointer;
  pointer-events: auto;           /* this one SHOULD be clickable */
  z-index: 2;
  transition: color .2s ease, transform .15s ease;
}
.toggle-pass:hover{ color: var(--teal); transform: translateY(-50%) scale(1.1); }

.form-control{ transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.form-control:focus{ transform: translateY(-1px); }

@media (max-width: 767px){
  .hero{ padding: 3.5rem 0 3rem; text-align:center; }
  .hero .lead{ margin: 0 auto; }
  .builder-mock{ margin-top: 2.5rem; }
}