@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--primary-red: #f34b56;--primary-red-hover: #d93d47;--bg-blue-light: #f4f8fc;--bg-yellow-light: #fffcf2;--text-dark: #1f2937;--text-light: #6b7280;--white: #ffffff;--card-green: #10b981;--card-orange: #f59e0b;--card-purple: #8b5cf6;--card-blue: #3b82f6}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;color:var(--text-dark);background-color:var(--white);line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 24px}h1,h2,h3,h4{font-weight:700;line-height:1.2}h1{font-size:3.5rem;margin-bottom:1rem;color:#112a46}h1 span{color:var(--primary-red)}h2{font-size:2.5rem;margin-bottom:3rem;text-align:center;color:#112a46}h3{font-size:1.25rem;margin-bottom:.5rem}p{color:var(--text-light)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:50px;font-weight:600;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none;font-family:inherit;font-size:1rem;gap:8px}.btn-primary{background-color:var(--primary-red);color:var(--white);box-shadow:0 4px 14px #f34b5666}.btn-primary:hover{background-color:var(--primary-red-hover);transform:translateY(-2px)}.btn-outline{background-color:transparent;border:2px solid #e5e7eb;color:var(--text-dark)}.btn-outline:hover{border-color:var(--text-dark)}section{padding:80px 0}.bg-light{background-color:var(--bg-blue-light)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}@media (max-width: 992px){.grid-4{grid-template-columns:repeat(2,1fr)}h1{font-size:2.5rem}}@media (max-width: 768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}section{padding:40px 0}}.header{padding:20px 0;background-color:var(--white);box-shadow:0 2px 10px #0000000d;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;flex-direction:column;line-height:1}.smile-logo{font-size:1.8rem;font-weight:800;color:var(--primary-red)}.digital-learning{font-size:1rem;font-weight:700;color:var(--text-dark)}.by-publisher{font-size:.7rem;color:var(--text-light)}.nav-links{display:flex;gap:24px}.nav-links a{text-decoration:none;color:var(--text-dark);font-weight:500;font-size:.95rem;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:var(--primary-red)}@media (max-width: 992px){.nav-links{display:none}}.hero{padding:100px 0;overflow:hidden}.hero p{font-size:1.25rem;margin-bottom:2rem;max-width:450px}.hero-btns{display:flex;gap:16px}.mock-illustration{position:relative;width:100%;height:400px;background:linear-gradient(135deg,#e0f2fe,#bae6fd);border-radius:30px;display:flex;align-items:center;justify-content:center}.tablet-mockup{width:320px;height:240px;background:#112a46;border-radius:20px;padding:10px;box-shadow:0 20px 40px #0000001a}.tablet-inner{width:100%;height:100%;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-light);font-weight:600}.floating-icons .icon{position:absolute;background:#fff;padding:12px 20px;border-radius:50px;box-shadow:0 10px 20px #0000000d;font-weight:600;color:var(--text-dark)}.floating-icons .icon:nth-child(1){top:40px;left:-20px}.floating-icons .icon:nth-child(2){bottom:40px;right:-20px}.features{text-align:center}.feature-card{padding:30px 20px;border-radius:16px;background:var(--white);border:1px solid #f1f5f9;box-shadow:0 4px 6px -1px #0000000d;transition:transform .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 15px -3px #0000001a}.icon-box{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}.bg-green{background-color:var(--card-green)}.bg-orange{background-color:var(--card-orange)}.bg-purple{background-color:var(--card-purple)}.bg-blue{background-color:var(--card-blue)}.feature-card h3{font-size:1.1rem;color:var(--text-dark);margin-bottom:10px}.feature-card p{font-size:.9rem;color:var(--text-light)}.how-it-works .hiw-header{margin-bottom:40px}.hiw-header h2{text-align:left;margin-bottom:.5rem}.hiw-header p{font-size:1.2rem;margin-bottom:1.5rem}.steps-container{display:flex;justify-content:space-between;align-items:flex-start;position:relative;flex-wrap:wrap;gap:20px}.step-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:120px;position:relative}.step-icon-wrapper{width:80px;height:80px;border-radius:20px;background:#fff;border:2px solid;display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;z-index:2}.step-icon svg{width:32px;height:32px}.step-number{position:absolute;top:-10px;left:-10px;width:24px;height:24px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.step-item h4{font-size:.9rem;color:var(--text-dark);max-width:100px}.step-connector{position:absolute;top:40px;right:-50%;width:100%;height:2px;background-color:#cbd5e1;z-index:1}@media (max-width: 992px){.step-connector{display:none}}.audiences{padding-top:0}.audience-card{padding:30px 20px;border-radius:20px;background-color:#f8fafc;display:flex;flex-direction:column;position:relative;overflow:hidden}.audience-card h3{font-size:1.4rem;margin-bottom:20px}.audience-card ul{list-style:none;margin-bottom:30px;flex-grow:1}.audience-card li{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.95rem;color:var(--text-dark)}.audience-card.student h3{color:var(--card-green)}.audience-card.student li svg{color:var(--card-green)}.audience-card.student .btn{background-color:var(--card-green);color:#fff;align-self:flex-start;padding:8px 20px}.audience-card.teacher h3{color:var(--card-orange)}.audience-card.teacher li svg{color:var(--card-orange)}.audience-card.teacher .btn{background-color:var(--card-orange);color:#fff;align-self:flex-start;padding:8px 20px}.audience-card.school h3{color:var(--card-blue)}.audience-card.school li svg{color:var(--card-blue)}.audience-card.school .btn{background-color:var(--card-blue);color:#fff;align-self:flex-start;padding:8px 20px}.audience-card.parent h3{color:var(--card-purple)}.audience-card.parent li svg{color:var(--card-purple)}.audience-card.parent .btn{background-color:var(--card-purple);color:#fff;align-self:flex-start;padding:8px 20px}

.header-actions{display:flex;align-items:center;gap:12px}
.btn-login{background-color:transparent;border:2px solid var(--primary-red);color:var(--primary-red);font-weight:600;padding:10px 22px;font-size:0.95rem;border-radius:50px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .3s ease}
.btn-login:hover{background-color:var(--primary-red);color:#ffffff;transform:translateY(-2px);box-shadow:0 4px 14px #f34b5655}
@media (max-width: 992px){
  .header-actions{gap:10px}
  .btn-login{padding:8px 16px;font-size:0.9rem}
  .header .btn-primary{padding:8px 16px;font-size:0.9rem}
}
@media (max-width: 600px){
  .header-actions{gap:6px}
  .btn-login{padding:6px 12px;font-size:0.82rem;gap:4px}
  .header .btn-primary{padding:6px 12px;font-size:0.82rem}
  .smile-logo{font-size:1.5rem}
  .digital-learning{font-size:0.85rem}
  .by-publisher{display:none}
}