/* styles.css
- Updated: 2025-09-06
- Fixes:
  1) Adds .will-reveal and .is-visible rules so elements animated by IntersectionObserver actually become visible.
  2) Adds carousel layout tweaks (flex child sizing) and transition rules for smooth transforms.
- How to run: save over your old styles.css and refresh the page.
- Edit brand colors in :root as before.
*/

/* ========== Brand / Theme Variables ========== */
:root{
  --color-bg:#0f1720;
  --color-surface:#0b1220;
  --color-muted:#94a3b8;
  --color-text:#e6eef6;
  --color-accent:#ff4d4f;
  --color-accent-weak:#ffd7d8;
  --radius:12px;
  --max-width:1100px;
  --container-padding:1rem;
  --transition-fast:200ms;
  --shadow-1: 0 6px 18px rgba(2,6,23,0.45);
  --glass: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --color-accordion-text:#ffffff; /* brighter text for accordion buttons */
  --color-nav-link-text: #e6eef6;

}

/* Light theme */
[data-theme="light"]{
  --color-bg:#f7f8fb;
  --color-surface:#ffffff;
  --color-text:#b91c1c;
  --color-muted:#475569;
  --color-accent:#b91c1c;
  --color-accent-weak:#ffecea;
  --color-accordion-text:#0b1220;
  --color-nav-link-text: #ffffff;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  :root{ --reduce-motion:1; }
}
@media (prefers-reduced-motion: no-preference){
  :root{ --reduce-motion:0; }
}

/* ========== Global reset & layout ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1.25rem var(--container-padding);
}

/* Accessibility helpers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ========== Header / Nav ========== */
.header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg, rgba(15,23,32,0.92), rgba(15,23,32,0.72));backdrop-filter: blur(4px);box-shadow:var(--shadow-1)}
.nav{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:0.6rem 1rem}
.nav__brand{display:flex;align-items:center;gap:0.5rem;color:var(--color-text);text-decoration:none}
.nav__title{font-family:Manrope, Inter, sans-serif;font-weight:700}
.nav__list{display:none;list-style:none;margin:0;padding:0;gap:1rem}
.nav__link{color:var(--color-text);text-decoration:none;padding:0.4rem 0.6rem;border-radius:8px}
.nav__link:focus,.nav__link:hover{background:rgba(255,255,255,0.02)}
.nav__right{display:flex;gap:0.5rem;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;padding:0.6rem 0.9rem;border-radius:10px;font-weight:600;text-decoration:none;background:transparent;color:var(--color-text);cursor:pointer}
.btn--primary{background:var(--color-accent);color:#fff}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:0.45rem 0.7rem}
.btn--accent{background:var(--color-accent);color:#fff}
.btn--lg{padding:0.9rem 1.2rem;border-radius:12px;font-size:1rem}

/* Mobile nav toggle */
.nav__toggle{display:inline-flex;background:transparent;border:0;color:var(--color-text)}
@media(min-width:880px){
  .nav__list{display:flex}
  .nav__toggle{display:none}
}

/* Sticky small progress at top */
.progress{position:fixed;left:0;top:0;height:3px;background:var(--color-accent);width:0;z-index:80;transition:width 120ms linear}

/* ========== HERO ========== */
.hero{position:relative;padding:2.25rem 0 3rem;overflow:hidden}
.hero__bg{
  position:absolute;inset:0;background-image:radial-gradient(circle at 10% 20%, rgba(255,77,79,0.06), transparent 6%), radial-gradient(circle at 80% 80%, rgba(0,0,0,0.12), transparent 20%);
  transform:translateZ(0);will-change:transform;
}
.hero__inner{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center}
.hero__title{font-family:Manrope, Inter, sans-serif;font-size:2rem;margin:0 0 0.25rem}
.hero__lead{color:var(--color-muted);margin:0 0 1rem}
.hero__ctas{display:flex;gap:0.6rem;margin-bottom:1rem}
.device{width:100%;max-width:320px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.device__screen{width:100%;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1)}
.device__shadow{width:220px;height:8px;border-radius:50%;background:rgba(0,0,0,0.18);filter:blur(6px);margin-top:0.6rem;opacity:0.7}

/* email form */
.email-form{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-top:0.5rem}
.input{padding:0.6rem 0.8rem;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--color-text);min-width:180px}
.email-form__msg{font-size:0.9rem;color:var(--color-muted);margin-top:0.5rem}

/* ========== SECTIONS ========== */
.section__title{font-family:Manrope, Inter, sans-serif;font-size:1.25rem;margin:0 0 0.25rem}
.section__subtitle{color:var(--color-muted);margin:0 0 1rem}

/* Steps */
.steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.steps__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--glass);
  padding: 1rem;
  border-radius: 12px;
}

.steps__icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0; /* prevent shrinking */
}

.steps__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.steps__title {
  margin: 0;
  font-weight: 600;
}

.steps__desc {
  margin: 0;
  color: var(--text-muted, #666);
}

/* Features grid */
.grid--features{display:grid;gap:1rem;grid-template-columns:1fr}
.card{border-radius:12px;padding:1rem;background:var(--color-surface);box-shadow:0 6px 18px rgba(2,6,23,0.35);transition:transform var(--transition-fast),box-shadow var(--transition-fast);color:var(--color-text)}
.card--feature{display:flex;flex-direction:column;gap:0.5rem}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-1)}
.card__icon{font-size:1.6rem}
@media(min-width:680px){
  .grid--features{grid-template-columns:repeat(3,1fr)}
}

/* Map skeleton */
.map__shell{height:260px;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,#0b1220 0%, #07101a 100%);display:flex;align-items:center;justify-content:center;position:relative}
.map__skeleton{width:90%;height:80%;border-radius:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));position:relative;overflow:hidden}
.map__pulse{position:absolute;left:20%;top:30%;width:24px;height:24px;border-radius:50%;background:var(--color-accent-weak);opacity:0.6;animation:pulse 2.4s infinite}
.pulse--delay{left:60%;top:60%;animation-delay:0.8s}
@keyframes pulse{0%{transform:scale(.8);opacity:.3}50%{transform:scale(2);opacity:.05}100%{transform:scale(.8);opacity:.3}}

/* Testimonials carousel */
.carousel{position:relative;padding:1rem;background:transparent}
.carousel__track{display:flex;gap:1rem;overflow:hidden;scroll-behavior:smooth;will-change:transform;transition:transform 360ms cubic-bezier(.22,.9,.3,1)}
.testimonial{flex:0 0 100%;min-width:100%;background:var(--color-surface);padding:1rem;border-radius:12px;box-shadow:var(--shadow-1);outline:0}
.carousel__controls{display:flex;gap:0.5rem;align-items:center;justify-content:center;margin-top:0.75rem}
.carousel__btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:0.4rem 0.6rem;border-radius:8px}

/* Tutors / panel */
.tutors__inner{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}
.panel{background:var(--color-surface);padding:1rem;border-radius:12px;box-shadow:var(--shadow-1)}
@media(min-width:880px){
  .hero__inner{grid-template-columns:1fr 360px}
  .tutors__inner{grid-template-columns:2fr 1fr}
}

/* Accordion */
.accordion__item{margin-bottom:0.5rem}
.accordion__button{width:100%;text-align:left;padding:0.85rem;border-radius:10px;border:0;background:var(--color-surface);font-weight:600;cursor:pointer}
.accordion__panel{padding:0.75rem;background:rgba(255,255,255,0.02);border-radius:8px;margin-top:0.5rem}

/* CTA */
.cta{padding:1.2rem 0;margin-top:1rem;background:linear-gradient(180deg, rgba(255,77,79,0.06), transparent)}
.cta__actions{display:flex;gap:0.75rem}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,0.03);padding:1rem 0;margin-top:2rem}
.footer__inner{display:grid;gap:1rem}
.footer__col{display:flex;flex-direction:column;gap:0.5rem}
.footer__nav{list-style:none;padding:0;margin:0;display:flex;gap:0.6rem}

/* FAB */
.fab{position:fixed;right:18px;bottom:18px;background:var(--color-accent);color:#fff;border:0;padding:0.6rem 0.8rem;border-radius:999px;box-shadow:var(--shadow-1);display:none;z-index:70}

/* small helpers */
.muted{color:var(--color-muted)}
.small{font-size:0.85rem}

/* ========== Reveal animations (fix) ========== */
/* initial hidden state for elements we want to animate in */
.will-reveal{opacity:0;transform:translateY(10px);transition:opacity 420ms cubic-bezier(.22,.9,.3,1),transform 420ms cubic-bezier(.22,.9,.3,1)}
/* visible state: IntersectionObserver adds this class */
.is-visible{opacity:1 !important;transform:none !important}

/* ========== Responsive tweaks ========== */
@media(min-width:680px){
  .hero__title{font-size:2.25rem}
  .grid--features{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
  .container{padding:1.75rem}
  .hero{padding:3rem 0}
}

/* focus outlines */
a:focus, button:focus, input:focus{outline:3px solid rgba(255,77,79,0.18);outline-offset:3px}


.nav__logo-img {
  height: 40px;   /* adjust as needed */
  width: auto;
}

.socials {
  display: flex;
  gap: 1rem;
}

.social {
  font-size: 1.5rem;
  color: #ff0000;
  transition: color 0.2s ease-in-out;
}

.social:hover {
  color: #ff4d4f; /* your accent red */
}

/* Accordion */
.accordion__item{margin-bottom:0.5rem}
button.accordion__button{width:100%;text-align:left;padding:0.85rem;border-radius:10px;border:0;background:var(--color-surface);font-weight:600;cursor:pointer;color:var(--color-accordion-text)!important;}
button.accordion__button:hover,button.accordion__button:focus{background:rgba(255,255,255,0.06)}
.accordion__panel{padding:0.75rem;background:rgba(255,255,255,0.04);border-radius:8px;margin-top:0.5rem}

/* Email form */
.email-form{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-top:0.5rem}
.email-form label{font-weight:600;color:var(--color-text);display:inline-block;cursor:text}
.input{padding:0.6rem 0.8rem;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:var(--color-text);min-width:180px}
.email-form__msg{font-size:0.9rem;color:var(--color-muted);margin-top:0.5rem}

/* FIX: ensure decorative hero background never steals clicks */
.hero{position:relative}
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__inner{position:relative;z-index:1}

.waitlist-wrapper {
  border: 2px solid red;   /* red outline */
  border-radius: 16px;     /* curved corners */
  padding: 1rem;           /* space inside */
  display: inline-block;   /* shrink to fit form */
  margin-top: 1rem;        /* add spacing from text above */
}

.email-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.email-form .input {
  flex: 1;   /* input expands */
}

.email-form button {
  white-space: nowrap;
}

.phone-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
  border: 0px solid #444;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 10px;
  width: 300px;
  height: 450px;
  margin: 0 auto;
  position: relative;
}

.phone-frame .mock-img {
  border-radius: 50px;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}


.nav__link {
  font-size: 1.15rem;      /* Make text larger */
  padding: 0.75em 1.5em;   /* Make buttons taller and wider */
  min-height: 48px;        /* Optional: ensure minimum height */
  color: var(--color-nav-link-text);
}