:root{--primary:#8E0202; --secondary:#6a0101; --accent:#ff9900; --light:#f8fafc; --dark:#1e293b; --gray:#64748b; --success:#10b981; --available:#10b981; --admin-moderator:#f59e0b; --admin-only:#ef4444}*{margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}body{line-height:1.6; color:var(--dark); background-color:var(--light); overflow-x:hidden}.container{width:90%; max-width:1200px; margin:0 auto; padding:0 20px}header{background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color:white; position:sticky; top:0; z-index:100; box-shadow:0 4px 20px rgba(0, 0, 0, 0.15)}.navbar{display:flex; justify-content:space-between; align-items:center; padding:15px 0}.logo{display:flex; align-items:center; gap:12px}.logo-img{width:50px; height:50px; display:flex; align-items:center; justify-content:center; overflow:hidden}.logo-img img{width:100%; height:100%; object-fit:contain}.logo-text{font-size:24px; font-weight:700; color:white}.nav-links{display:flex; gap:30px}.nav-links a{text-decoration:none; color:rgba(255, 255, 255, 0.85); font-weight:500; transition:all 0.3s; position:relative}.nav-links a:hover{color:white}.nav-links a::after{content:''; position:absolute; width:0; height:2px; bottom:-5px; left:0; background-color:var(--accent); transition:width 0.3s}.nav-links a:hover::after{width:100%}.download-btn{background-color:var(--accent); color:white; padding:12px 24px; border-radius:8px; text-decoration:none; font-weight:600; transition:all 0.3s; box-shadow:0 4px 12px rgba(255, 153, 0, 0.3)}.download-btn:hover{background-color:#e68a00; transform:translateY(-2px); box-shadow:0 6px 15px rgba(255, 153, 0, 0.4)}.hero{padding:100px 0; background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color:white; position:relative; overflow:hidden}.hero::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); background-size:cover; background-position:center}.hero-content{max-width:800px; margin:0 auto; text-align:center; position:relative; z-index:1}.hero h1{font-size:3.2rem; margin-bottom:20px; line-height:1.2}.hero p{font-size:1.3rem; margin-bottom:40px; opacity:0.9}.features{padding:100px 0; background-color:white}.section-title{text-align:center; margin-bottom:60px}.section-title h2{font-size:2.5rem; color:var(--dark); margin-bottom:15px; position:relative; display:inline-block}.section-title h2::after{content:''; position:absolute; width:80px; height:4px; background:linear-gradient(to right, var(--primary), var(--accent)); bottom:-10px; left:50%; transform:translateX(-50%); border-radius:2px}.section-title p{color:var(--gray); max-width:600px; margin:20px auto 0; font-size:1.1rem}.features-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:30px}.feature-card{background-color:white; border-radius:16px; padding:35px 30px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.08); transition:all 0.3s ease; border:1px solid rgba(0, 0, 0, 0.05); position:relative; overflow:hidden}.feature-card::before{content:''; position:absolute; top:0; left:0; width:5px; height:100%; background:linear-gradient(to bottom, var(--primary), var(--accent))}.feature-card:hover{transform:translateY(-10px); box-shadow:0 15px 40px rgba(0, 0, 0, 0.12)}.feature-icon{background:linear-gradient(135deg, var(--primary), var(--secondary)); color:white; width:70px; height:70px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:25px; box-shadow:0 8px 20px rgba(142, 2, 2, 0.25); transition:all 0.3s ease}.feature-card:hover .feature-icon{transform:scale(1.05); box-shadow:0 12px 25px rgba(142, 2, 2, 0.35)}.feature-card h3{font-size:1.5rem; margin-bottom:15px; color:var(--dark)}.feature-card p{color:var(--gray); margin-bottom:20px}.permission-badge{display:inline-block; color:white; padding:5px 12px; border-radius:20px; font-size:0.8rem; font-weight:600; margin-top:10px}.badge-available{background-color:var(--available)}.badge-admin-moderator{background-color:var(--admin-moderator)}.badge-admin-only{background-color:var(--admin-only)}.more-features{text-align:center; margin-top:60px; padding:30px; background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius:16px; border:2px dashed var(--primary)}.more-features h3{color:var(--primary); font-size:1.8rem; margin-bottom:15px}.e-attendance-highlight{padding:100px 0; background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); position:relative}.highlight-content{display:flex; align-items:center; gap:60px}.highlight-text{flex:1}.highlight-text h2{font-size:2.5rem; color:var(--dark); margin-bottom:20px; line-height:1.2}.highlight-text p{font-size:1.1rem; color:var(--gray); margin-bottom:30px}.highlight-visual{flex:1; text-align:center}.qr-visual{background-color:white; padding:40px; border-radius:20px; box-shadow:0 15px 40px rgba(0, 0, 0, 0.1); display:inline-block; transform:perspective(1000px) rotateY(-5deg); transition:transform 0.5s}.qr-visual:hover{transform:perspective(1000px) rotateY(0)}.qr-code{width:220px; height:220px; margin:0 auto; display:flex; align-items:center; justify-content:center; border-radius:12px; box-shadow:0 10px 25px rgba(0, 0, 0, 0.15); overflow:hidden; cursor:default}.qr-code img{width:100%; height:100%; object-fit:cover}.tech-features{margin-top:40px}.tech-feature{display:flex; align-items:center; gap:20px; margin-bottom:25px; padding:15px; background:white; border-radius:12px; box-shadow:0 5px 15px rgba(0, 0, 0, 0.05); transition:transform 0.3s}.tech-feature:hover{transform:translateX(10px)}.tech-icon{background:linear-gradient(135deg, var(--success), #0d9665); color:white; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0}.how-to-access{padding:100px 0; background-color:white}.steps-container{display:flex; flex-direction:column; align-items:center; gap:40px; margin-top:50px}.steps-row{display:flex; flex-wrap:wrap; justify-content:center; gap:30px; width:100%}.step{flex:1; min-width:250px; max-width:300px; text-align:center; padding:40px 25px; background-color:white; border-radius:16px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.08); transition:transform 0.3s; position:relative}.step:hover{transform:translateY(-10px)}.step-number{width:60px; height:60px; background:linear-gradient(135deg, var(--primary), var(--secondary)); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:bold; margin:0 auto 25px; box-shadow:0 8px 20px rgba(142, 2, 2, 0.25)}.step h3{font-size:1.4rem; margin-bottom:15px; color:var(--dark)}.step p{color:var(--gray)}.step-center{flex:1; min-width:280px; max-width:400px; text-align:center; padding:40px 30px; background-color:white; border-radius:16px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.08); transition:transform 0.3s; position:relative; border-top:4px solid var(--primary)}.step-center:hover{transform:translateY(-10px)}.step-center h3{color:var(--primary); margin-bottom:20px; font-size:1.5rem}.account-check{text-align:center; margin:30px 0; padding:20px; background:#f1f5f9; border-radius:12px; max-width:600px; margin-left:auto; margin-right:auto}.account-check h4{color:var(--primary); margin-bottom:10px; font-size:1.2rem}.registration-methods{display:flex; justify-content:center; gap:30px; margin-top:40px; flex-wrap:wrap}.method{flex:1; min-width:280px; max-width:400px; padding:35px 30px; background:white; border-radius:16px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.08); transition:transform 0.3s; border-top:4px solid var(--primary)}.method:hover{transform:translateY(-10px)}.method h3{color:var(--primary); margin-bottom:20px; font-size:1.5rem}.exclusive-access{text-align:center; margin-top:60px; padding:30px; background:linear-gradient(135deg, var(--primary), var(--secondary)); color:white; border-radius:16px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.15)}.exclusive-access h3{font-size:1.6rem; margin-bottom:10px}.school-website{text-align:center; margin-top:40px; padding:25px; background:#f1f5f9; border-radius:12px}.school-website a{color:var(--primary); font-weight:600; text-decoration:none}.school-website a:hover{text-decoration:underline}.download{padding:100px 0; background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color:white; text-align:center; position:relative; overflow:hidden}.download::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); background-size:cover; background-position:center}.download-content{position:relative; z-index:1}.download h2{font-size:2.5rem; margin-bottom:20px}.download p{font-size:1.2rem; max-width:600px; margin:0 auto 40px; opacity:0.9}.store-buttons{display:flex; justify-content:center; gap:20px; flex-wrap:wrap}.store-btn{display:flex; align-items:center; gap:12px; background-color:white; color:var(--dark); padding:15px 30px; border-radius:12px; text-decoration:none; font-weight:600; transition:all 0.3s; box-shadow:0 8px 20px rgba(0, 0, 0, 0.15)}.store-btn:hover{transform:translateY(-5px); box-shadow:0 12px 25px rgba(0, 0, 0, 0.2)}.store-icon{font-size:28px}.download-note{margin-top:30px; font-size:0.95rem; opacity:0.8}footer{background:linear-gradient(135deg, #000000 0%, #333333 100%); color:white; padding:80px 0 30px}.footer-content{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:40px; margin-bottom:50px}.footer-column h3{font-size:1.4rem; margin-bottom:25px; position:relative; padding-bottom:12px}.footer-column h3::after{content:''; position:absolute; left:0; bottom:0; width:50px; height:3px; background-color:var(--accent); border-radius:2px}.footer-links{list-style:none}.footer-links li{margin-bottom:12px}.footer-links a{color:#cbd5e1; text-decoration:none; transition:all 0.3s; display:flex; align-items:center; gap:8px}.footer-links a:hover{color:white; transform:translateX(5px)}.social-links{display:flex; gap:15px; margin-top:25px}.social-links a{display:flex; align-items:center; justify-content:center; width:40px; height:40px; background-color:rgba(255, 255, 255, 0.1); border-radius:10px; color:white; text-decoration:none; transition:all 0.3s}.social-links a:hover{background-color:var(--accent); transform:translateY(-3px)}.copyright{text-align:center; padding-top:30px; border-top:1px solid rgba(255, 255, 255, 0.1); color:#94a3b8; font-size:0.95rem}@media (max-width:1024px){.highlight-content{flex-direction:column; gap:40px}.highlight-visual{order:-1}}@media (max-width:888px){.nav-links{display:none}.download-btn{display:none}.hero h1{font-size:2.5rem}.hero p{font-size:1.1rem}.section-title h2{font-size:2.2rem}.features-grid{grid-template-columns:1fr}.qr-visual{display:none}.step-center{min-width:100%}}@media (max-width:576px){.hero{padding:80px 0}.hero h1{font-size:2rem}.section-title h2{font-size:1.8rem}.step, .method{min-width:100%}.registration-methods{flex-direction:column}}body{-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}body{-webkit-touch-callout:none}