/* =========================
   GLOBAL THEME (LIGHT GLASS)
   ========================= */

:root{
  --bg:#fbf7ff;
  --ink:#0b1020;
  --muted:rgba(11,16,32,.65);
  --border:rgba(11,16,32,.10);
  --glass:rgba(255,255,255,.65);
  --glass-strong:rgba(255,255,255,.82);

  --accent1:#7c3aed;
  --accent2:#ec4899;

  --card-radius:1.25rem;
}

/* Page background */
body{
  color:var(--ink);
  background:
    radial-gradient(900px 620px at 18% 8%, rgba(236,72,153,.22), transparent 60%),
    radial-gradient(820px 540px at 86% 14%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(920px 640px at 55% 95%, rgba(59,130,246,.14), transparent 60%),
    linear-gradient(180deg,#ffffff 0%,var(--bg) 55%,#ffffff 100%);
}

/* =========================
   CARDS
   ========================= */

.card{
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(12,18,40,.10);
}

/* detail page */
.detail-card{
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  border:1px solid var(--border);
}

/* =========================
   NAVBAR + FOOTER
   ========================= */

.navbar{
  background:rgba(255,255,255,.65) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}

footer{
  background:rgba(255,255,255,.55);
  border-top:1px solid var(--border);
  color:var(--muted);
}

/* =========================
   LINKS
   ========================= */

a{ color:var(--accent1); }
a:hover{ color:var(--accent2); }

/* =========================
   HERO
   ========================= */

.hero{
  background:linear-gradient(180deg,rgba(124,58,237,.08),transparent);
  border-radius:1.25rem;
}

/* =========================
   BUTTONS
   ========================= */

.btn-dark{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border:none;
  color:white;
}

.btn-dark:hover{
  filter:brightness(1.05);
}

.btn-outline-light{
  border:1px solid var(--border);
  color:var(--ink);
  background:rgba(255,255,255,.4);
}

.btn-outline-light:hover{
  background:rgba(255,255,255,.85);
  border-color:var(--accent1);
  color:var(--accent1);
}

/* =========================
   TAGS (project/igcse cards)
   ========================= */

.project-tag{
  background:rgba(124,58,237,.12);
  color:#5b21b6;
  border:1px solid rgba(124,58,237,.25);
  padding:6px 12px;
  border-radius:10px;
  font-size:.8rem;
}

.igcse-tag{
  background:rgba(20,184,166,.12);
  color:#0f766e;
  border:1px solid rgba(20,184,166,.25);
  padding:6px 12px;
  border-radius:10px;
  font-size:.8rem;
}

/* =========================
   HERO SKILLS (IMPORTANT PART)
   ========================= */

.skills-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

/* floating chips */
.skill-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 16px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:500;
  line-height:1;

  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.65));
  border:1px solid rgba(11,16,32,.12);
  color:#1f2937;

  backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(0,0,0,.06);

  transition:all .18s ease;
}

.skill-pill:hover{
  transform:translateY(-2px);
  border-color:var(--accent1);
  color:var(--accent1);
  box-shadow:0 10px 24px rgba(124,58,237,.18);
}

/* =========================
   SKILL SECTION (separate cards section if used later)
   ========================= */

.skill-card{
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  border:1px solid var(--border);
}

.skill-title{ color:var(--ink); }

.skill-badge{
  background:rgba(255,255,255,.7);
  border:1px solid var(--border);
  color:var(--ink);
}

.skill-badge:hover{
  border-color:var(--accent1);
  color:var(--accent1);
}

/* =========================
   PAPERS PAGE
   ========================= */

.paper-card{
  transition:all .18s ease;
}

.paper-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(124,58,237,.18);
}

.paper-link{
  color:#4f46e5;
}

.paper-link:hover{
  color:#7c3aed;
}

/* =========================
   TUTORING PLANS
   ========================= */

.plan-card{
  position:relative;
  transition:all .2s ease;
}

.plan-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(124,58,237,.18);
}

.plan-featured{
  border:1px solid rgba(124,58,237,.45);
  box-shadow:0 0 0 1px rgba(124,58,237,.15);
}

.plan-badge-centered{
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  top:0;
  background:linear-gradient(90deg,#7c3aed,#ec4899);
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:white;
  box-shadow:0 8px 18px rgba(124,58,237,.35);
}

.price-highlight{
  font-size:32px;
  background:linear-gradient(90deg,#7c3aed,#ec4899);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.features-list li{
  margin-bottom:6px;
  color:rgba(11,16,32,.75);
}

/* =========================
   FAQ GLASS ACCORDION
   ========================= */

.faq-wrap{
  background:linear-gradient(180deg,rgba(124,58,237,.06),transparent);
  border-radius:20px;
  padding:24px;
}

.glass-accordion .accordion-item{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  border:1px solid rgba(11,16,32,.10);
  border-radius:14px;
  margin-bottom:10px;
}

.glass-accordion .accordion-button{
  background:transparent;
  color:#111827;
  font-weight:500;
}

.glass-accordion .accordion-button:not(.collapsed){
  color:#7c3aed;
  box-shadow:none;
}

.glass-accordion .accordion-body{
  color:rgba(11,16,32,.75);
}

/* =========================
   CONTACT FORM
   ========================= */

.contact-card{
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(124,58,237,.12);
}

/* glass inputs */
.glass-input{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(11,16,32,.12);
  color:#111827;
}

.glass-input:focus{
  background:white;
  border-color:#7c3aed;
  box-shadow:0 0 0 .15rem rgba(124,58,237,.15);
}

/* textarea resize nicer */
textarea.glass-input{
  resize:vertical;
}

/* =========================
   PREMIUM CONTACT FORM
   ========================= */

/* glass card stronger depth */
.contact-card{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.65));
  border:1px solid rgba(124,58,237,.18);
  box-shadow:
    0 30px 80px rgba(124,58,237,.15),
    inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(18px);
  transition:.25s;
}

.contact-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 40px 100px rgba(124,58,237,.22),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* floating labels */
.floating{
  position:relative;
}

.floating label{
  position:absolute;
  left:14px;
  top:12px;
  color:rgba(11,16,32,.55);
  font-size:.92rem;
  pointer-events:none;
  transition:.18s ease;
  background:transparent;
}

.floating .form-control{
  padding:20px 14px 10px 14px;
}

.floating .form-control:focus + label,
.floating .form-control:not(:placeholder-shown) + label{
  top:-8px;
  left:10px;
  font-size:.75rem;
  color:#7c3aed;
  background:white;
  padding:0 6px;
  border-radius:6px;
}

/* inputs */
.glass-input{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(11,16,32,.12);
  border-radius:12px;
  transition:.18s;
}

.glass-input:hover{
  background:white;
}

.glass-input:focus{
  background:white;
  border-color:#7c3aed;
  box-shadow:
    0 0 0 .2rem rgba(124,58,237,.12),
    0 10px 25px rgba(124,58,237,.12);
}

/* gradient send button */
.btn-send-gradient{
  background:linear-gradient(90deg,#7c3aed,#ec4899);
  border:none;
  color:white;
  font-weight:600;
  padding:10px 18px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(124,58,237,.35);
  transition:.18s ease;
}

.btn-send-gradient:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(124,58,237,.45);
}

/* subtle call link */
.contact-card small a{
  color:#7c3aed;
  font-weight:500;
}

.contact-card small a:hover{
  color:#ec4899;
}

/* =========================
   PROJECT ARTICLE PAGE
   ========================= */

.project-hero{
  background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(255,255,255,.4));
  border:1px solid rgba(11,16,32,.08);
}

/* main reading container */
.article-card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(11,16,32,.10);
  backdrop-filter:blur(14px);
}

/* readable typography */
.article-content{
  font-size:1.05rem;
  line-height:1.75;
  color:#0b1020;
  max-width:720px;
}

/* headings */
.article-content h1,
.article-content h2,
.article-content h3{
  margin-top:1.8rem;
  margin-bottom:.7rem;
  font-weight:600;
}

/* paragraphs spacing */
.article-content p{
  margin-bottom:1rem;
}

/* lists */
.article-content ul,
.article-content ol{
  padding-left:1.4rem;
  margin-bottom:1rem;
}

/* bold highlight */
.article-content strong{
  color:#111827;
}

/* inline code */
.article-content code{
  background:rgba(124,58,237,.10);
  padding:3px 6px;
  border-radius:6px;
  font-size:.9em;
}

/* code blocks */
.article-content pre{
  background:#0f172a;
  color:#e5e7eb;
  padding:16px;
  border-radius:12px;
  overflow:auto;
  margin:1.2rem 0;
}

/* links */
.article-content a{
  color:#7c3aed;
  text-decoration:none;
  font-weight:500;
}

.article-content a:hover{
  color:#ec4899;
}

/* IGCSE tags (light version) */
.igcse-tag{
  background:rgba(20,184,166,.12);
  color:#0f766e;
  border:1px solid rgba(20,184,166,.25);
  padding:6px 12px;
  border-radius:10px;
  font-size:.8rem;
}

/* =========================
   PRIMARY CTA BUTTON (Stripe)
   ========================= */

.btn-violet-primary{
  background:linear-gradient(90deg,#7c3aed,#ec4899);
  color:white !important;
  border:none;
  border-radius:12px;
  padding:12px 16px;
  font-weight:600;
  letter-spacing:.2px;

  box-shadow:0 12px 28px rgba(124,58,237,.35);
  transition:all .18s ease;
}

/* hover */
.btn-violet-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 45px rgba(124,58,237,.45);
  filter:brightness(1.05);
}

/* click */
.btn-violet-primary:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(124,58,237,.35);
}

/* focus accessibility */
.btn-violet-primary:focus{
  box-shadow:
    0 0 0 3px rgba(124,58,237,.25),
    0 12px 28px rgba(124,58,237,.35);
}