/* OctaLearn landing styles */
:root{
  --bg:#0f1724;
  --muted:#94a3b8;
  --accent:#004aad;
  --accent-2:#00b4ff;
  --card:#0b1220;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --max-width:1100px;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#071028 0%, #081123 40%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.logo{width:44px;height:44px;border-radius:8px}
.site-name{font-weight:700;font-size:1.1rem}
.main-nav a{color:var(--muted);text-decoration:none;margin-left:1rem}
.btn{display:inline-block;padding:.6rem .9rem;border-radius:10px;border:1px solid transparent;text-decoration:none;color:inherit}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;font-weight:600}
.btn-ghost{border:1px solid rgba(255,255,255,0.06);background:transparent}
.site-header{backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(10,14,25,0.6), rgba(10,14,25,0.2));position:sticky;top:0;z-index:40}
.hero{padding:3.5rem 0}
.slider{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));padding:1rem}
.slides{display:flex;transition:transform 600ms cubic-bezier(.2,.9,.2,1);gap:1rem}
.slide{min-width:100%;display:flex;align-items:center;gap:2rem;padding:2rem}
.slide-content{max-width:52%}
.slide h1{font-size:2.1rem;margin:0 0 .6rem}
.slide h2{font-size:1.6rem;margin:0 0 .6rem}
.slide p{color:var(--muted);line-height:1.5}
.slide-visual{flex:1;min-height:220px;border-radius:12px;background:linear-gradient(135deg, rgba(0,74,173,0.2), rgba(0,180,255,0.08));box-shadow:0 8px 30px rgba(2,6,23,0.6);position:relative}
.visual-1{background-image:radial-gradient(circle at 20% 20%, rgba(0,180,255,0.12), transparent 15%), linear-gradient(135deg,#004aad 0%, #00b4ff 100%)}
.visual-2{background-image:linear-gradient(135deg,#072c56 0%, #003e7a 100%)}
.visual-3{background-image:linear-gradient(135deg,#0a2b20 0%, #076a4d 100%)}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.4);border:none;color:var(--muted);width:44px;height:44px;border-radius:10px;cursor:pointer}
.slider-btn:focus{outline:3px solid rgba(0,180,255,0.12)}
.slider-btn.prev{left:14px}
.slider-btn.next{right:14px}
.indicators{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:.6rem}
.dot{width:12px;height:12px;border-radius:99px;border:none;background:rgba(255,255,255,0.06);cursor:pointer}
.dot[aria-selected="true"]{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.features{padding:3rem 0}
.features h3{margin:0 0 1rem}
.cards{display:flex;gap:1rem}
.card{flex:1;background:var(--glass);padding:1rem;border-radius:12px}
.pricing{padding:2rem 0}
.contact{padding:2rem 0}
.site-footer{padding:1.2rem 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:2rem}

/* Features & trust */
.lead{color:var(--muted);margin-bottom:1rem}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));padding:1.2rem;border-radius:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 24px rgba(2,6,23,0.6);transition:transform .18s,box-shadow .18s}
.card .icon{font-size:28px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;margin-bottom:.6rem}
.card h4{margin:0 0 .4rem}
.card ul{margin:0;padding-left:1.1rem;color:var(--muted)}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 50px rgba(2,6,23,0.7)}
.card:focus{outline:3px solid rgba(0,180,255,0.09);transform:translateY(-8px)}

.card ul li{margin-bottom:.4rem}
.card ul li:before{content:'•';color:var(--accent-2);display:inline-block;width:1em;margin-left:-1em;margin-right:.4rem}

/* Modal content styling */
#feature-body ul{padding-left:1.1rem;color:var(--muted)}
#feature-body li{margin-bottom:.45rem}

/* small animation for cards entrance */
.card{opacity:0;transform:translateY(10px);animation:cardIn .5s forwards}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
.trust-and-cta{display:flex;gap:1rem;align-items:center;margin-top:1.2rem}
.trust-logos{display:flex;gap:.8rem;align-items:center}
.trust-logos img{height:40px;opacity:.95}
.cta-banner{flex:1;padding:1rem;border-radius:12px;background:linear-gradient(90deg, rgba(0,74,173,0.12), rgba(0,180,255,0.06));}
.cta-banner h4{margin:.1rem 0 .4rem}

/* testimonials */
.testimonials{margin-top:2rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1rem;border-radius:12px}
.test-quote{display:flex;gap:1rem;align-items:center}
.test-quote img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 6px 18px rgba(5,10,20,0.6)}
.test-quote .text{max-width:76%}
.test-quote p{margin:0;color:var(--muted)}
.test-controls{display:flex;gap:.6rem;margin-top:.6rem}
.test-controls button{border:none;background:transparent;color:var(--muted);cursor:pointer}

.faq details{background:var(--glass);padding:.8rem;border-radius:8px;margin-bottom:.6rem}
.team-grid{display:flex;gap:1rem;margin-top:1rem}
.member{background:var(--glass);padding: .8rem;border-radius:8px;flex:1;text-align:center}
.member img{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:.4rem}

/* modal focus trap visible state */
.modal-backdrop.open .modal{transform:translateY(0);opacity:1}
.modal{transform:translateY(8px);opacity:0;transition:transform .18s,opacity .18s}

/* Responsive */
@media (max-width:900px){
  .slide{flex-direction:column;text-align:center}
  .slide-content{max-width:100%}
  .cards{flex-direction:column}
  .main-nav{display:none}
}
  .feature-grid{grid-template-columns:1fr}
  .trust-and-cta{flex-direction:column;align-items:stretch}

/* subtle animation */
.slide.active .slide-visual{transform:translateY(0);opacity:1}
.slide-visual{transform:translateY(12px);opacity:0.95;transition:transform .8s cubic-bezier(.2,.9,.2,1),opacity .6s}

/* Modal styles */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:flex;align-items:center;justify-content:center;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal{background:linear-gradient(180deg,#071029,#081428);padding:1.2rem;border-radius:12px;max-width:520px;width:96%;box-shadow:0 14px 40px rgba(2,6,23,0.6)}
.modal h3{margin-top:0}
.form-row{display:flex;gap:.6rem}
.form-row input{flex:1;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.modal .btn{margin-top:.6rem}

/* Pricing & calculator */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.plan{background:var(--glass);padding:1rem;border-radius:10px}
.revenue-calc{background:rgba(255,255,255,0.02);padding:1rem;border-radius:10px;margin-top:1rem}
.calc-row{display:flex;gap:.6rem;align-items:center;margin-bottom:.6rem}
.calc-row input{flex:1;padding:.5rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.calc-result{font-weight:700;color:var(--accent-2)}

@media (max-width:900px){
  .pricing-grid{grid-template-columns:1fr}
}