:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --off:#F7FBF8;
  --line:#E4EFE8;
  --line-strong:#D2E5D9;
  --gray-500:#6F7B74;
  --gray-700:#3F4A44;
  --green:#1DBF73;
  --green-dark:#149359;
  --green-tint:#E9F9F1;
  --green-soft:#B8EBD2;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --radius:18px;
  --shadow:0 18px 50px rgba(20,147,89,.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--black);
  background:var(--off);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.skip{
  position:absolute; left:-999px; top:8px;
  background:var(--black); color:#fff; padding:8px 12px; border-radius:8px; z-index:80;
}
.skip:focus{left:8px;}
.wrap{width:min(1120px, calc(100% - 32px)); margin:0 auto;}

.site-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 8% -10%, rgba(29,191,115,.22), transparent 58%),
    radial-gradient(ellipse 60% 45% at 100% 8%, rgba(29,191,115,.10), transparent 52%),
    linear-gradient(180deg, #F4FCF8 0%, #EEF8F2 38%, #F7FBF8 100%);
}

.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:rgba(247,251,248,.82);
  border-bottom:1px solid rgba(210,229,217,.7);
}
.site-header .wrap{
  height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:9px; text-decoration:none;
}
.brand img{width:30px; height:30px; border-radius:8px;}
.brand-word{
  font-family:var(--font-display);
  font-style:italic; font-weight:500; font-size:20px;
}
.brand-word b{font-style:normal; font-weight:600;}
.nav{display:flex; align-items:center; gap:18px;}
.nav a{
  font-size:14px; font-weight:500; color:var(--gray-700); text-decoration:none;
}
.nav a:hover{color:var(--black);}
.nav .btn-dark{color:#fff;}
.nav .btn-dark:hover{color:#fff; background:var(--green-dark);}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 16px; border-radius:12px;
  font-size:14px; font-weight:600; text-decoration:none; border:none; cursor:pointer;
  font-family:var(--font-body);
}
.btn-dark{background:var(--black); color:#fff;}
.btn-dark:hover{background:var(--green-dark);}
.btn-green{background:var(--green); color:#fff;}
.btn-green:hover{background:var(--green-dark);}
.btn-ghost{
  background:transparent; color:var(--gray-700);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{background:#fff;}

.hero{
  padding:56px 0 28px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--green-dark); background:var(--green-tint);
  border:1px solid var(--green-soft); border-radius:999px; padding:6px 10px;
  margin-bottom:16px;
}
h1{
  font-family:var(--font-display);
  font-weight:500; font-size:clamp(34px, 5vw, 56px);
  letter-spacing:-.03em; line-height:1.08; margin-bottom:16px;
}
.lead{font-size:18px; color:var(--gray-700); max-width:34em; margin-bottom:24px;}
.am-line{margin-top:8px; font-size:15px; color:var(--gray-500);}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.proof{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  font-size:12px; font-weight:600; color:var(--gray-700);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 10px;
}

.chat-card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(29,191,115,.16);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.chat-card header{
  display:flex; align-items:center; gap:8px;
  padding:14px 16px; border-bottom:1px solid var(--line);
  font-size:13px; font-weight:600;
}
.chat-card header span.dot{
  width:8px; height:8px; border-radius:50%; background:var(--green);
}
.chat-body{padding:16px; display:flex; flex-direction:column; gap:12px;}
.bubble{max-width:92%; padding:12px 14px; border-radius:14px; font-size:14px; line-height:1.5;}
.bubble.user{align-self:flex-end; background:var(--black); color:#fff; border-bottom-right-radius:6px;}
.bubble.ai{align-self:flex-start; background:var(--green-tint); border-bottom-left-radius:6px;}
.source{
  margin-top:8px; font-size:12px; font-weight:600; color:var(--green-dark);
}

.section{padding:64px 0;}
.section h2{
  font-family:var(--font-display);
  font-weight:500; font-size:clamp(26px, 3.4vw, 36px);
  letter-spacing:-.02em; margin-bottom:10px;
}
.section-lead{color:var(--gray-700); max-width:40em; margin-bottom:28px;}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.grid-4{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px;
}
.card h3{font-size:16px; margin:10px 0 8px;}
.card p{font-size:14px; color:var(--gray-700);}
.step-num{
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--green-tint); color:var(--green-dark); font-weight:700; font-size:13px;
}

.course-grid{display:flex; flex-wrap:wrap; gap:8px;}
.course{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 12px; font-size:13px; font-weight:600; color:var(--gray-700);
}

.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.compare .card strong{display:block; margin-bottom:8px;}
ul.plain{margin:0; padding-left:18px; color:var(--gray-700); font-size:14px;}
ul.plain li{margin:6px 0;}

.faq details{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-bottom:10px;
}
.faq summary{
  cursor:pointer; font-weight:600; font-size:15px; list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq details p{margin-top:10px; color:var(--gray-700); font-size:14px;}

.cta-band{
  background:var(--black); color:#fff; border-radius:24px; padding:36px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.cta-band h2{color:#fff; margin:0 0 8px;}
.cta-band p{color:rgba(255,255,255,.72); margin:0;}

.site-footer{
  padding:28px 0 40px; color:var(--gray-500); font-size:13px;
}
.site-footer .wrap{
  display:flex; flex-wrap:wrap; gap:12px 24px;
  align-items:center; justify-content:space-between;
  border-top:1px solid var(--line); padding-top:22px;
}
.site-footer nav{display:flex; flex-wrap:wrap; gap:14px;}
.site-footer a{color:var(--gray-700); text-decoration:none;}
.site-footer a:hover{color:var(--black);}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr; padding-top:36px; gap:28px;}
  .grid-3,.grid-4,.compare{grid-template-columns:1fr 1fr;}
  .cta-band{flex-direction:column; align-items:flex-start;}
  .nav .hide-sm{display:none;}
}
@media (max-width: 620px){
  .grid-3,.grid-4,.compare{grid-template-columns:1fr;}
  .hero-actions .btn{flex:1;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
