/* =========================
   TutorSource — styles.css
   Bright, student-friendly theme
   ========================= */

/* --------- Design tokens --------- */
:root{
  --bg:#ffffff;
  --text:#0f172a;     /* slate-900 */
  --muted:#6b7280;    /* gray-500 */
  --border:#e5e7eb;   /* gray-200 */

  /* Brand palette */
  --brand:#6d28d9;    /* Electric purple (main) */
  --brand2:#0ea5e9;   /* Sky blue (secondary) */
  --brand3:#f59e0b;   /* Campus gold (accent) */

  /* Keep existing usages pointing at brand */
  --accent:var(--brand);

  --shadow:0 10px 30px rgba(109,40,217,.12);
  --radius:20px;
}

/* --------- Base --------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text); background:var(--bg); line-height:1.5;
}

.container{max-width:1120px;margin:0 auto;padding:0 16px}
.grid{display:grid;gap:24px}
.grid.two{grid-template-columns:repeat(1,1fr)}
.grid.three{grid-template-columns:repeat(1,1fr)}
.grid.four{grid-template-columns:repeat(1,1fr)}
@media(min-width:800px){
  .grid.two{grid-template-columns:repeat(2,1fr)}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  .grid.four{grid-template-columns:repeat(4,1fr)}
}

a{color:var(--brand);text-decoration:none}
a:hover{opacity:.92}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px}

/* --------- Header / Nav --------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px}
.brand-name{font-weight:600;font-size:18px}
.nav{display:none;gap:18px;align-items:center}
@media(min-width:900px){.nav{display:flex}}
.nav a{color:#374151;position:relative}
.nav a:hover{color:var(--text)}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav a:hover::after{transform:scaleX(1)}

/* --------- Hero --------- */
.hero{padding:56px 0 24px; position:relative; overflow:hidden}
.hero::before,
.hero::after{
  content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none;
}
.hero::before{
  width:520px; height:520px; top:-160px; left:-140px;
  background:radial-gradient(closest-side, var(--brand) 0%, transparent 70%);
}
.hero::after{
  width:580px; height:580px; top:-120px; right:-160px;
  background:radial-gradient(closest-side, var(--brand2) 0%, transparent 70%);
}
h1{font-size:40px;line-height:1.1;margin:0}
@media(min-width:900px){h1{font-size:54px}}
.hero h1{
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand2) 60%, var(--brand3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{color:var(--muted);font-size:18px;margin-top:12px}

/* --------- Buttons --------- */
.actions{display:flex;gap:12px;margin-top:20px}
.btn{
  display:inline-block; border-radius:16px; padding:12px 18px;
  text-decoration:none; font-weight:600; border:1px solid var(--border);
  color:var(--text); background:#fff; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  border-color:transparent; color:#fff;
  box-shadow:0 10px 24px rgba(14,165,233,.25);
}
.btn-primary:hover{transform:translateY(-1px) scale(1.01); filter:saturate(1.05)}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--brand)}
.btn-outline:hover{background:rgba(109,40,217,.06)}
.btn-small{padding:8px 12px;border-radius:999px}

/* --------- Lists / text helpers --------- */
.bullets{margin:16px 0 0;padding-left:18px;color:var(--muted)}
.bullets li{margin:4px 0}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* --------- Cards & Pricing --------- */
.card{
  border:1px solid var(--border); border-radius:var(--radius); padding:18px;
  background:#fff; box-shadow:var(--shadow);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover{
  border-color:rgba(109,40,217,.35);
  box-shadow:0 16px 40px rgba(17,24,39,.08);
  transform:translateY(-2px);
}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.eyebrow{font-size:12px;color:rgba(109,40,217,.8)}
.card-title{font-weight:600;margin-top:4px}
.price{font-size:28px;font-weight:800;margin-top:10px}
.price.big{
  font-size:36px;
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pill{border-radius:18px}
.featured{outline:2px solid rgba(109,40,217,.85); box-shadow:0 8px 40px rgba(109,40,217,.15)}

/* --------- Sections --------- */
.section{padding:56px 0}
.section.alt{
  background:linear-gradient(180deg, #f9fafb, rgba(14,165,233,.06));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
h2{font-size:28px;margin:0}
.tall{display:flex;flex-direction:column;gap:12px}
.checklist{margin:8px 0 0;padding-left:18px}
.checklist li{margin:4px 0}

/* --------- Forms --------- */
.form input,.form textarea{
  border:1px solid var(--border); border-radius:14px; padding:12px; width:100%
}
.form .full{grid-column:1/-1}

/* --------- Trust bar --------- */
.trustbar{
  background:#f9fafb; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:20px 0
}
.trustbar .pill{
  background:linear-gradient(180deg, #fff, rgba(14,165,233,.08));
}

/* --------- Footer --------- */
.site-footer{border-top:1px solid var(--border);margin-top:24px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.footer-inner .links a{color:#6b7280}
.footer-inner .links a:hover{color:var(--text)}

/* --------- FAQ --------- */
.faq{border:1px solid var(--border);border-radius:14px;padding:14px;background:#fff}
.faq summary{font-weight:600;cursor:pointer}