:root {
  /* Brand colors */
  --hp-purple: #33007E;        /* exact match to logo */
  --hp-purple-dark: #220058;   /* companion shade */
  --hp-purple-soft: #f1ecff;
  --hp-yellow: #ffcf3b;
  --hp-yellow-dark: #e5b51f;
  --hp-bg: #f5f3ff;
  --hp-text: #1f1338;
  --hp-muted: #7a7197;
  --hp-border: #e0ddf4;
  --hp-danger: #d7263d;

  /* Header sizing */
  --hp-header-h: 192px;     /* desktop header height */
  --hp-header-h-sm: 68px;   /* mobile header height */
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--hp-text);
  background: radial-gradient(circle at top left, #ffffff 0, var(--hp-bg) 60%, #ffffff 100%);
  line-height: 1.5;
}

a { color: var(--hp-purple); text-decoration: none; }
a:hover { text-decoration: underline; }

.hp-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */

.hp-header {
  background: var(--hp-purple); /* solid exact match */
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}

.hp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--hp-header-h);
  padding: 0;
}

/* Logo full-height */
.hp-logo { display: flex; align-items: center; height: var(--hp-header-h); }
.hp-logo img { height: 100%; width: auto; display: block; }

/* Desktop nav */
.hp-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hp-nav a {
  color: #fff;
  font-weight: 500;
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.hp-nav a:hover { border-bottom-color: rgba(255,255,255,0.8); text-decoration: none; }

/* Navbar FREE TRIAL pill: purple text */
.hp-nav a.hp-nav-cta,
.hp-nav-cta {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: none;
  background: var(--hp-yellow);
  color: var(--hp-purple);
  font-weight: 600;
}
.hp-nav a.hp-nav-cta:hover,
.hp-nav-cta:hover {
  background: var(--hp-yellow-dark);
  color: var(--hp-purple);
  border-bottom-color: transparent;
}

/* Burger button */
.hp-burger{display:none;background:transparent;border:0;padding:.5rem;margin-left:auto;cursor:pointer}
.hp-burger-box{display:inline-block;width:28px;height:20px;position:relative}
.hp-burger-inner,
.hp-burger-inner::before,
.hp-burger-inner::after{
  position:absolute;left:0;right:0;height:3px;background:#fff;content:"";border-radius:2px;transition:transform .2s ease,opacity .2s ease
}
.hp-burger-inner{top:50%;transform:translateY(-50%)}
.hp-burger-inner::before{top:-8px}
.hp-burger-inner::after{top:8px}
.hp-burger.is-open .hp-burger-inner{transform:rotate(45deg)}
.hp-burger.is-open .hp-burger-inner::before{transform:rotate(-90deg) translateX(-8px)}
.hp-burger.is-open .hp-burger-inner::after{opacity:0}

/* Mobile drawer */
.hp-nav-drawer{
  position:fixed; inset:0; background:var(--hp-purple);
  transform:translateY(-100%); transition:transform .22s ease;
  padding-top:calc(var(--hp-header-h-sm) + 8px); z-index:45;
}
.hp-nav-drawer.open{transform:translateY(0)}
.hp-nav-drawer .hp-container{display:flex;flex-direction:column;gap:.25rem}
.hp-nav-drawer a{
  color:#fff; text-decoration:none; font-weight:600; padding:.9rem .25rem; font-size:1rem;
  border-bottom:1px solid rgba(255,255,255,.12)
}
.hp-nav-drawer a.hp-nav-cta{align-self:flex-start;margin-top:.25rem}
body.no-scroll{overflow:hidden}

/* Main layout */
.hp-main { padding: 2.5rem 0 3.5rem; }

/* Flash messages */
.hp-flash-wrapper { margin-bottom: 1.5rem; }
.hp-flash {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  border: 1px solid transparent;
}
.hp-flash-success { background:#e5fbef; border-color:#b1f0cf; color:#126b3f; }
.hp-flash-error   { background:#ffe7eb; border-color:#f6b2c0; color:#8b1127; }

/* Hero */
.hp-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3rem;
}
.hp-hero-text h1 { font-size: clamp(2.4rem, 3vw + 1.4rem, 3.1rem); margin: 0 0 0.75rem; }
.hp-hero-text p { margin: 0 0 1.25rem; color: var(--hp-muted); }
.hp-hero-actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:.75rem; }
.hp-hero-small { font-size: .85rem; color: var(--hp-muted); }
.hp-hero-card {
  background: #fff; padding: 1.5rem 1.75rem; border-radius: 1.5rem;
  box-shadow: 0 18px 35px rgba(23,14,62,.18); border: 1px solid rgba(255,255,255,.5);
}
.hp-hero-card h3 { margin-top:0; margin-bottom:.75rem; }
.hp-hero-card ul { padding-left:1.1rem; margin:0; color:var(--hp-muted); font-size:.95rem; }

/* Buttons */
.hp-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem 1.4rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; text-decoration:none;
}
.hp-btn-primary { background:var(--hp-yellow); color:var(--hp-purple-dark); border-color:var(--hp-yellow); }
.hp-btn-primary:hover { background:var(--hp-yellow-dark); border-color:var(--hp-yellow-dark); text-decoration:none; }

/* Default outline button */
.hp-btn-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.hp-btn-outline:hover { background:rgba(255,255,255,.12); text-decoration:none; }

/* Hero-specific: make "Explore lessons" solid purple */
.hp-hero .hp-btn-outline {
  background: var(--hp-purple);
  color: #fff;
  border-color: var(--hp-purple);
}
.hp-hero .hp-btn-outline:hover { background: var(--hp-purple-dark); border-color: var(--hp-purple-dark); }

/* Sections and cards */
.hp-section-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.75rem; }
.hp-card { background:#fff; border-radius:1.4rem; padding:1.4rem 1.5rem; box-shadow:0 12px 28px rgba(23,14,62,.14); border:1px solid var(--hp-border); }
.hp-card h2 { margin-top:0; margin-bottom:.4rem; }
.hp-card p { margin:0; color:var(--hp-muted); font-size:.95rem; }

/* Forms */
form { background:#fff; border-radius:1.5rem; padding:1.75rem 1.8rem 1.8rem; box-shadow:0 12px 26px rgba(23,14,62,.12); border:1px solid var(--hp-border); }
form h2 { margin-top:0; margin-bottom:1rem; }
.field-row { margin-bottom:1rem; display:flex; flex-direction:column; gap:.35rem; }
.field-row label { font-weight:500; font-size:.9rem; }
input[type="text"],input[type="email"],input[type="password"],select,textarea{
  font:inherit; padding:.55rem .7rem; border-radius:.75rem; border:1px solid var(--hp-border); background:#faf9ff;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--hp-purple); box-shadow:0 0 0 2px rgba(51,0,126,.15); background:#fff; }
textarea{ min-height:110px; resize:vertical; }
.options{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; font-size:.9rem; }
.options input[type="radio"],.options input[type="checkbox"]{ margin-right:.25rem; }
.error{ font-size:.8rem; color:var(--hp-danger); }

/* Footer */
.hp-footer { background: var(--hp-purple); color: rgba(255,255,255,.92); padding: 2.5rem 0 2rem; }
.hp-footer-inner { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1.8fr); gap:2rem; align-items:flex-start; font-size:.9rem; }
.hp-footer-brand img { height:56px; display:block; margin-bottom:.75rem; }
.hp-footer-brand p { margin:0; max-width:320px; }
.hp-footer-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1.25rem; }
.hp-footer-columns h4 { margin:0 0 .5rem; font-size:.95rem; }
.hp-footer-columns a { display:block; color:rgba(255,255,255,.85); margin-bottom:.35rem; text-decoration:none; }
.hp-footer-columns a:hover { color:#fff; }
.hp-footer-meta { grid-column:1 / -1; margin:1.5rem 0 0; font-size:.8rem; color:rgba(255,255,255,.7); }

/* Responsive */
@media (max-width: 992px) {
  .hp-header-inner {
    min-height: var(--hp-header-h-sm);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .hp-logo { height: var(--hp-header-h-sm); }
  .hp-burger { display:inline-flex; align-items:center; height:var(--hp-header-h-sm); padding:0 .75rem; margin-left:auto; }
  .hp-nav{display:none}
}
@media (max-width: 768px) {
  /* keep header in one line on small screens */
  .hp-header-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; }
  .hp-hero { grid-template-columns: minmax(0, 1fr); }
  form { padding: 1.2rem 1.2rem 1.4rem; border-radius: 1.1rem; }
  .hp-footer-inner { grid-template-columns: 1fr; }
}