/* assets/css/online.css */
.hero-online { background:var(--navy); padding:120px 0; position:relative; overflow:hidden; }
.hero-online::before { content:''; position:absolute; inset:0; background:var(--hero-bg) center/cover no-repeat; opacity:.2; }
.hero-online-content { position:relative; z-index:2; text-align:center; max-width:800px; margin:0 auto; }
.hero-online h1 { color:var(--white); font-size:clamp(2.2rem,4vw,3.5rem); margin-bottom:16px; line-height:1.15; }
.hero-online .sub { color:var(--gold2); font-family:'Playfair Display',serif; font-style:italic; font-size:1.1rem; margin-bottom:24px; }
.hero-online p.hero-p { color:rgba(255,255,255,.75); margin:0 auto 32px; font-size:1.05rem; max-width:600px; }
.hero-online-stats { display:flex; justify-content:center; gap:24px; margin-top:40px; border-top:1px solid rgba(255,255,255,.1); padding-top:24px; flex-wrap:wrap; }
.o-stat { color:var(--white); font-weight:700; font-size:.9rem; }
.o-stat::before { content:'•'; color:var(--gold); margin-right:8px; }

.diff-section { padding:96px 0; background:var(--cream); }
.diff-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:24px; margin-top:40px; }
.diff-card { background:var(--white); padding:32px; border-radius:12px; border:1px solid rgba(11,31,58,.08); text-align:center; transition:transform .3s; }
.diff-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.diff-card h3 { color:var(--navy); margin-bottom:12px; font-size:1.1rem; }
.diff-card p { color:var(--muted); font-size:.9rem; }

.how-section { padding:96px 0; background:var(--white); }
.how-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:40px; }
.how-step { text-align:center; position:relative; }
.how-step:not(:last-child)::after { content:'→'; position:absolute; right:-20px; top:25px; color:var(--gold); font-size:1.5rem; font-weight:bold; }
.step-num { width:60px; height:60px; background:var(--cream); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:800; color:var(--gold); margin:0 auto 20px; border:2px solid var(--gold); }
.how-step h4 { color:var(--navy); margin-bottom:8px; font-size:1rem; }
.how-step p { color:var(--muted); font-size:.85rem; }

.tutor-section { padding:96px 0; background:var(--navy); color:var(--white); }
.tutor-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.tutor-list { list-style:none; padding:0; margin:32px 0; }
.tutor-list li { margin-bottom:16px; display:flex; gap:12px; align-items:center; font-size:1.05rem; }
.tutor-list li::before { content:'✓'; color:var(--gold2); font-weight:bold; }

@media(max-width:992px) {
  .how-grid { grid-template-columns:repeat(2, 1fr); gap:40px; }
  .how-step:nth-child(2)::after { display:none; }
  .tutor-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .how-grid { grid-template-columns:1fr; }
  .how-step::after { display:none; }
}