/* =========================================================================
   EduOne · Greenie — Landing page styles
   ========================================================================= */

.lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); }
.lp-brand { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); }
.lp-brand b { color: var(--c-primary-600); }
.lp-logo { width: 38px; height: 38px; border-radius: 11px; background: var(--grad-primary); color: #fff; display: grid; place-items: center; font-size: 1.2rem; box-shadow: var(--sh-primary); }
.lp-logo.sm { width: 30px; height: 30px; font-size: 1rem; }
.lp-links { display: flex; }
.lp-links a { color: var(--c-text-2); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.lp-links a:hover { color: var(--c-text); }

/* HERO */
.lp-hero { background: var(--grad-hero); color: #fff; padding: var(--s-20) 0 var(--s-24); position: relative; overflow: hidden; }
.lp-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 45%); pointer-events: none; }
.lp-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-12); align-items: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 6px 14px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.lp-title { color: #fff; font-size: var(--fs-5xl); margin: var(--s-5) 0; letter-spacing: -0.02em; }
.hl-green { color: var(--c-primary-300); }
.hl-tech { color: var(--c-tech-300); }
.lp-lede { color: rgba(255,255,255,.9); font-size: var(--fs-lg); max-width: 560px; margin-bottom: var(--s-6); }
.lp-stats { margin-top: var(--s-8); }
.lp-stats > div { display: flex; flex-direction: column; }
.lp-stats b { font-size: var(--fs-2xl); color: #fff; }
.lp-stats span { font-size: var(--fs-xs); color: rgba(255,255,255,.75); }

.lp-hero-art { position: relative; height: 360px; }
.ha-card { position: absolute; background: rgba(255,255,255,.96); color: var(--c-text); border-radius: var(--r-lg); padding: 14px 18px; font-weight: var(--fw-semibold); font-size: var(--fs-sm); box-shadow: var(--sh-lg); display: flex; align-items: center; gap: 10px; animation: floaty 5s ease-in-out infinite; }
.ha-card i { font-size: 1.3rem; }
.ha-1 { top: 6%; left: 4%; color: var(--c-primary-700); animation-delay: 0s; }
.ha-2 { top: 30%; right: 0; color: var(--c-energy-600); animation-delay: .8s; }
.ha-3 { bottom: 26%; left: 0; color: var(--c-tech-700); animation-delay: 1.6s; }
.ha-4 { bottom: 2%; right: 8%; color: var(--c-primary-700); animation-delay: 2.4s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* STEPS */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.lp-step { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-6); position: relative; }
.lp-step-n { font-size: var(--fs-2xl); font-weight: var(--fw-extra); color: var(--c-primary-200); margin-bottom: var(--s-2); }

/* FEATURES */
.lp-feat-head { margin-bottom: var(--s-6); }
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.feat-ic { width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: var(--s-4); }
.feat-ic.ic-green { background: var(--c-primary-50); color: var(--c-primary-600); }
.feat-ic.ic-tech { background: var(--c-tech-100); color: var(--c-tech-600); }

/* CTA */
.lp-cta { background: var(--grad-hero); color: #fff; border-radius: var(--r-xl); padding: var(--s-16) var(--s-8); text-align: center; box-shadow: var(--sh-lg); }
.lp-cta h2 { color: #fff; }
.lp-cta p { color: rgba(255,255,255,.9); margin: var(--s-3) 0 var(--s-6); }

.lp-footer { border-top: 1px solid var(--c-border); padding: var(--s-8) 0; margin-top: var(--s-12); font-size: var(--fs-sm); }

/* RESPONSIVE */
@media (max-width: 900px) {
    .lp-hero-grid { grid-template-columns: 1fr; }
    .lp-hero-art { height: 300px; margin-top: var(--s-6); }
    .lp-steps { grid-template-columns: repeat(2, 1fr); }
    .lp-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .lp-links a:not(.btn) { display: none; }
    .lp-title { font-size: var(--fs-3xl); }
    .lp-steps { grid-template-columns: 1fr; }
}