/* =========================================================
   classr — Global Styles
   ========================================================= */

/* ---------- Theme ---------- */
:root{
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;

  --brand:#111;
  --brand-cta:#111;
  --brand-cta-hover:#000;

  --grad: linear-gradient(135deg,#c7d2fe 0%, #f5d0fe 50%, #fecdd3 100%);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}
img, svg{ max-width:100%; height:auto; }
.nowrap{ white-space:nowrap; }

/* =========================================================
   Top Navigation
   ========================================================= */
.topbar{ position:sticky; top:0; z-index:50; background:#fff; }
.topbar-inner{
  max-width:1100px; margin:0 auto; padding:18px 20px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
}
.topbar-rule{ height:2px; background:#e5e7eb; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo{ width:30px; height:30px; max-width:30px; max-height:30px; border-radius:6px; object-fit:contain; flex-shrink:0; }
.brand-text{ font-weight:600; letter-spacing:.2px; color:#111827; font-size:20px; }
.topnav{ display:flex; align-items:center; gap:24px; }
.topnav a{ color:#111827; text-decoration:none; font-size:14px; }
.topnav a:hover{ text-decoration:underline; }
.topnav .active{ font-weight:600; }

@media (max-width:720px){
  .topbar-inner{ grid-template-columns:1fr; }
  .topnav{ justify-content:center; padding-bottom:10px; }
}

.topnav .btn.small.signin{ margin-left:8px; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-block; border:1px solid var(--line); border-radius:12px;
  padding:10px 16px; text-decoration:none; color:var(--text); background:#fff;
  transition:all .15s ease;
}
.btn.small{ padding:8px 12px; border-radius:10px; }
.btn.primary{ background:var(--brand-cta); color:#fff; border-color:var(--brand-cta); }
.btn.primary:hover{ background:var(--brand-cta-hover); }
.btn.ghost{ background:#fff; color:#111; }
.btn.outline{ background:#fff; border-color:#d1d5db; color:#111; }
.btn.outline:hover{ background:#f3f4f6; }
.btn.full{ width:100%; text-align:center; }
.btn.large{ padding:14px 24px; font-size:16px; }

/* =========================================================
   HERO (AI-first: "course-aware database that compounds")
   ========================================================= */
.hero{
  background: var(--grad);
  min-height: calc(100vh - 60px);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 32px 16px;
}
.hero-wrap{ max-width: 1100px; margin: 0 auto; }

/* Eyebrow pill for positioning statement */
.eyebrow{
  display:inline-block; padding:6px 10px; margin-bottom:12px;
  font-size:12px; letter-spacing:.3px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px; background:rgba(255,255,255,.75); color:#111827;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.hero h1{
  margin:0; font-size:44px; line-height:1.15; letter-spacing:-.01em;
}
@media (max-width:720px){ .hero h1{ font-size:34px; } }

/* Slightly deeper color to pop against the gradient */
.hero .sub{
  color:#5b21b6; margin:12px auto 0; max-width:760px;
}
.cta-row{ margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center; }
.cta-note{ margin:12px 0 0; font-size:13px; color:#6b7280; }

/* Inline features inside hero (refined cards) */
.features-inline{
  margin:24px auto 0;
  display:grid; gap:10px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  text-align: left;
}
@media (max-width:980px){ .features-inline{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .features-inline{ grid-template-columns:1fr; } }

.fi{
  background:rgba(255,255,255,.95);
  border:1px solid #e6e6f0;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.fi:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  border-color:#e0def5;
}
.fi-head{
  display:flex; align-items:center; gap:10px;
  margin:0 0 6px 0;
}
.fi-ico{
  width:36px; height:36px; flex:0 0 36px;
  border-radius:12px;
  background:#fff;
  box-shadow:inset 0 0 0 1px #ececf3;
  display:grid; place-items:center;
}
.fi-ico img{ width:18px; height:18px; max-width:18px; max-height:18px; display:block; object-fit:contain; flex-shrink:0; }
.fi h3{ margin:0; font-size:15px; font-weight:700; color:#0f172a; }
.fi-sub{
  margin:4px 0 0; font-size:13px; line-height:1.45; color:#4b5563; text-align:left;
}

/* =========================================================
   WHY Section — "What makes classr different…"
   ========================================================= */
.why{ background:#fff; position:relative; }
.why-inner{
  max-width:1100px; margin:0 auto; padding:44px 16px;
  display:grid; gap:22px;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:start;
}
@media (max-width:960px){ .why-inner{ grid-template-columns:1fr; } }

.why-copy h2{
  margin:0 0 8px; font-size:26px; line-height:1.2; color:#0f172a; letter-spacing:-.01em;
}
@media (max-width:720px){ .why-copy h2{ font-size:22px; } }

.why-copy h2::after{
  content:""; display:block; width:64px; height:3px; margin-top:10px;
  background:linear-gradient(90deg,#6366f1 0%, #f472b6 50%, #fb7185 100%);
  border-radius:999px;
}
.why-copy p{
  margin:14px 0 0; color:#374151; font-size:15px; line-height:1.55;
}

.why-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Reuse checks with a tighter layout in WHY */
.checks{
  margin:8px 0 0; padding-left:0; list-style:none; display:grid; gap:8px;
}
.checks li{
  display:flex; gap:8px; align-items:flex-start; color:#374151; font-size:14px;
  padding-left:20px; position:relative;
}
.checks li::before{
  content:""; position:absolute; left:0; top:5px;
  width:6px; height:6px;
  border-radius:50%; background:#111;
}
.checks.tight{ gap:10px; margin:0; }
.checks.tight li{ font-size:14px; padding-left:20px; }
.checks.tight li::before{
  background:#111;
  border-radius:50%;
  width:6px; height:6px;
  top:5px;
}

/* Optional subtle divider after WHY to separate from showcase */
.why::after{
  content:""; display:block; height:1px; background:#eef2f7; margin-top:28px;
}

/* =========================================================
   Section titles (shared)
   ========================================================= */
.section-title{
  text-align:center; margin:0 0 12px; font-size:32px; color:#0f172a; letter-spacing:-.01em;
}
@media (max-width:720px){ .section-title{ font-size:26px; } }
.section-sub{
  text-align:center; margin:0 0 32px; font-size:16px; color:#6b7280;
}

/* =========================================================
   SHOWCASE / HOW IT WORKS
   ========================================================= */
.showcase{
  background: var(--grad);
  padding: 80px 0;
}
.showcase-inner{
  width:100%; max-width:1100px; margin:0 auto; padding:0 16px;
}

.steps-grid{
  display:grid; gap:20px; grid-template-columns:repeat(3,1fr);
  margin-bottom:40px;
}
@media (max-width:960px){ .steps-grid{ grid-template-columns:1fr; } }

.step-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:28px 24px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  text-align:center;
  transition:transform .12s ease, box-shadow .12s ease;
  position:relative;
}
.step-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); }

.step-number{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,#c7d2fe 0%, #f5d0fe 100%);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; color:#0f172a;
}

.step-icon{
  width:56px; height:56px;
  margin:0 auto 16px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center;
}
.step-icon img{ width:28px; height:28px; max-width:28px; max-height:28px; object-fit:contain; flex-shrink:0; }

.step-card h3{
  margin:0 0 12px; font-size:20px; font-weight:700; color:#0f172a;
}
.step-card p{
  margin:0; font-size:14px; line-height:1.6; color:#6b7280;
}

.how-screenshot{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.10);
}
.how-screenshot img{
  display:block; width:100%; height:auto;
}

/* =========================================================
   PRICING
   ========================================================= */
.pricing{
  background: var(--grad); padding:60px 16px;
}
.pricing-inner{
  max-width:1100px; margin:0 auto;
}
.pricing-grid{
  display:grid; gap:20px; grid-template-columns:repeat(3,1fr);
  margin-top:32px;
}
@media (max-width:960px){ .pricing-grid{ grid-template-columns:1fr; } }

.price-card{
  position:relative;
  background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  transition:transform .12s ease, box-shadow .12s ease;
  display:flex; flex-direction:column;
}
.price-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); }

.price-card.featured{
  border-color:#6366f1; border-width:2px;
  box-shadow:0 12px 32px rgba(99,102,241,.15);
}
.price-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,#6366f1 0%, #f472b6 100%);
  color:#fff; padding:4px 12px; border-radius:999px;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.3px;
}

.price-label{
  font-size:14px; font-weight:600; text-transform:uppercase; color:#6b7280;
  letter-spacing:.5px; margin-bottom:8px;
}
.price-amount{
  font-size:48px; font-weight:700; color:#0f172a; margin-bottom:16px;
}
.price-period{
  font-size:18px; font-weight:400; color:#6b7280;
}

.price-features{
  list-style:none; padding:0; margin:0 0 20px;
  display:grid; gap:0;
  flex:1;
}
.price-features li{
  font-size:14px; color:#374151; padding:10px 0 10px 16px;
  border-bottom:1px solid #f3f4f6;
  position:relative;
}
.price-features li::before{
  content:""; position:absolute; left:0; top:16px;
  width:6px; height:6px;
  background:#111;
  border-radius:50%;
}
.price-features li.spacer{
  visibility:hidden;
}
.price-features li:last-child{ border-bottom:none; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  background:#f9fafb; padding:60px 16px;
}
.faq-inner{
  max-width:1100px; margin:0 auto;
}
.faq-grid{
  display:grid; gap:16px; grid-template-columns:repeat(2,1fr);
  margin-top:32px;
}
@media (max-width:760px){ .faq-grid{ grid-template-columns:1fr; } }

.faq-item{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.03);
}
.faq-item h3{
  margin:0 0 10px; font-size:16px; color:#0f172a;
}
.faq-item p{
  margin:0; font-size:14px; color:#6b7280; line-height:1.6;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{
  background: var(--grad);
  padding:80px 16px;
  text-align:center;
}
.final-cta-inner{
  max-width:700px; margin:0 auto;
}
.final-cta h2{
  margin:0 0 12px; font-size:38px; color:#0f172a; letter-spacing:-.01em;
}
@media (max-width:720px){ .final-cta h2{ font-size:28px; } }
.final-cta p{
  margin:0 0 24px; font-size:18px; color:#5b21b6;
}
.final-cta .btn{
  margin-bottom:16px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:#fff; border-top:1px solid #e5e7eb;
  padding:40px 16px 24px;
}
.footer-content{
  max-width:1100px; margin:0 auto;
  display:grid; gap:32px;
  grid-template-columns:1.5fr 2fr;
}
@media (max-width:760px){ .footer-content{ grid-template-columns:1fr; } }

.footer-brand{
  display:flex; flex-direction:column; gap:8px;
}
.footer-logo{
  width:32px; height:32px; max-width:32px; max-height:32px; border-radius:6px; object-fit:contain; flex-shrink:0;
}
.footer-tagline{
  margin:0; font-size:13px; color:#6b7280;
}

.footer-links{
  display:grid; gap:24px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:560px){ .footer-links{ grid-template-columns:1fr; } }

.footer-col h4{
  margin:0 0 12px; font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; color:#374151;
}
.footer-col a{
  display:block; padding:6px 0; font-size:14px; color:#6b7280;
  text-decoration:none; transition:color .15s ease;
}
.footer-col a:hover{ color:#111827; }

.footer-bottom{
  max-width:1100px; margin:24px auto 0;
  padding-top:20px; border-top:1px solid #e5e7eb;
  text-align:center;
}
.footer-bottom p{
  margin:0; font-size:13px; color:#9ca3af;
}

/* =========================================================
   CONTACT MODAL
   ========================================================= */
.modal{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.5); z-index:9999;
  align-items:center; justify-content:center; padding:20px;
}
.modal-content{
  background:#fff; border-radius:18px; max-width:500px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:modalSlideIn 0.2s ease;
}
@keyframes modalSlideIn{
  from{ transform:translateY(-20px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 24px 16px; border-bottom:1px solid #e5e7eb;
}
.modal-header h2{
  margin:0; font-size:22px; color:#0f172a;
}
.modal-close{
  background:none; border:none; font-size:28px; color:#6b7280;
  cursor:pointer; padding:0; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; transition:background 0.15s ease;
}
.modal-close:hover{ background:#f3f4f6; }
.modal form{
  padding:24px;
}
.form-group{
  margin-bottom:16px;
}
.form-group label{
  display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:#374151;
}
.form-group input,
.form-group textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px;
  font-size:14px; font-family:inherit; color:#111827; background:#fff;
  transition:border-color 0.15s ease;
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none; border-color:#6366f1;
}
.form-group textarea{
  resize:vertical; min-height:100px;
}
.contact-status{
  margin-bottom:16px; min-height:20px;
}
.contact-status .success{
  color:#059669; background:#d1fae5; padding:10px 12px; border-radius:8px;
  font-size:14px;
}
.contact-status .error{
  color:#dc2626; background:#fee2e2; padding:10px 12px; border-radius:8px;
  font-size:14px;
}
.form-actions{
  display:flex; gap:12px; justify-content:flex-end;
}
.form-actions .btn{
  padding:10px 20px;
}

/* =========================================================
   COMING SOON SECTION
   ========================================================= */
.coming-soon{
  background:#fff; padding:80px 16px; position:relative;
}
.coming-soon-inner{
  max-width:1100px; margin:0 auto; position:relative;
}
.coming-soon-badge{
  display:inline-block;
  background:linear-gradient(90deg,#6366f1 0%, #f472b6 100%);
  color:#fff; padding:6px 16px; border-radius:999px;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:16px;
}

.product-showcase{
  margin-top:40px;
}
.product-description{
  max-width:900px; margin:0 auto;
}
.product-description h3{
  text-align:center; margin:0 0 16px; font-size:24px; color:#0f172a;
}
.product-description > p{
  text-align:center; margin:0 0 40px; font-size:16px; line-height:1.6;
  color:#374151; max-width:700px; margin-left:auto; margin-right:auto;
}

.product-features{
  display:grid; gap:16px; grid-template-columns:repeat(2,1fr);
  margin-bottom:40px;
}
@media (max-width:760px){ .product-features{ grid-template-columns:1fr; } }

.pf-item{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:20px; box-shadow:0 4px 16px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease;
  display:flex; gap:14px; align-items:flex-start;
}
.pf-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.pf-icon{
  font-size:28px; flex-shrink:0;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#c7d2fe 0%, #f5d0fe 50%, #fecdd3 100%);
  border-radius:12px;
}
.pf-text h4{
  margin:0 0 6px; font-size:16px; font-weight:700; color:#0f172a;
}
.pf-text p{
  margin:0; font-size:14px; line-height:1.5; color:#6b7280;
}

.coming-soon-cta{
  text-align:center; padding-top:24px; border-top:1px solid #e5e7eb;
}
.coming-soon-cta .cta-text{
  margin:0 0 16px; font-size:15px; color:#374151; font-weight:500;
}
.coming-soon-cta .btn{
  min-width:200px;
}