RoadSense | Master the Sri Lankan Road<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary: #FFD700; \/* Sri Lanka Traffic Yellow *\/\r\n --secondary: #0056b3; \/* Traffic Blue *\/\r\n --bg: #0a0b10;\r\n --card-bg: rgba(255, 255, 255, 0.03);\r\n --text: #ffffff;\r\n --accent: #00f2fe;\r\n --border: rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Inter', sans-serif;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n background-color: var(--bg);\r\n color: var(--text);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- Background Animations --- *\/\r\n .glow {\r\n position: fixed;\r\n width: 600px;\r\n height: 600px;\r\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, rgba(10, 11, 16, 0) 70%);\r\n border-radius: 50%;\r\n z-index: -1;\r\n filter: blur(80px);\r\n animation: float 20s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes float {\r\n 0% { transform: translate(-10%, -10%) scale(1); }\r\n 100% { transform: translate(20%, 20%) scale(1.2); }\r\n }\r\n\r\n \/* Navigation *\/\r\n nav {\r\n padding: 1.5rem 5%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n position: sticky;\r\n top: 0;\r\n background: rgba(10, 11, 16, 0.85);\r\n backdrop-filter: blur(15px);\r\n z-index: 100;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .logo img {\r\n height: 80px; \/* Increased from 45px to make it pop *\/\r\n border-radius: 8px;\r\n object-fit: contain;\r\n transition: height 0.3s ease; \/* Smooth resizing *\/\r\n }\r\n\r\n \/* Add this inside your existing @media (max-width: 600px) block at the bottom of the CSS *\/\r\n @media (max-width: 600px) {\r\n .logo img {\r\n height: 55px; \/* Keeps it reasonably sized on mobile *\/\r\n }\r\n }\r\n\r\n .group-tag {\r\n background: var(--secondary);\r\n padding: 6px 16px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: 700;\r\n box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero {\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n padding: 0 5%;\r\n position: relative;\r\n overflow: hidden;\r\n background: radial-gradient(circle at 50% 50%, #151820 0%, #0a0b10 100%);\r\n }\r\n\r\n \/* Perspective Road only in Hero *\/\r\n .hero-road-system {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n pointer-events: none;\r\n overflow: hidden;\r\n mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 40%, transparent 60%);\r\n -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 40%, transparent 60%);\r\n }\r\n\r\n .road-container {\r\n position: absolute;\r\n bottom: -100px;\r\n left: 50%;\r\n transform: translateX(-50%) perspective(400px) rotateX(75deg);\r\n width: 300%;\r\n height: 100%;\r\n opacity: 0.3;\r\n }\r\n\r\n .road-lines {\r\n width: 100%;\r\n height: 300%;\r\n background-image: \r\n linear-gradient(90deg, transparent 49.5%, var(--primary) 50%, transparent 50.5%),\r\n linear-gradient(0deg, transparent 90%, var(--primary) 91%);\r\n background-size: 60px 100%, 100% 120px;\r\n animation: drive 3s linear infinite;\r\n }\r\n\r\n @keyframes drive {\r\n from { background-position: 0 0; }\r\n to { background-position: 0 240px; }\r\n }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n h1 {\r\n font-size: clamp(3rem, 10vw, 6rem);\r\n line-height: 1;\r\n margin-bottom: 1.5rem;\r\n font-weight: 800;\r\n min-height: 2em;\r\n color: white;\r\n }\r\n\r\n .hero p {\r\n font-size: 1.2rem;\r\n max-width: 650px;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 3rem;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .cta-button {\r\n padding: 1.2rem 3rem;\r\n background: var(--primary);\r\n color: #000;\r\n text-decoration: none;\r\n font-weight: 800;\r\n border-radius: 50px;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n\r\n .cta-button:hover {\r\n transform: scale(1.05) translateY(-5px);\r\n box-shadow: 0 20px 40px rgba(255, 215, 0, 0.5);\r\n }\r\n\r\n \/* Typewriter Cursor *\/\r\n .typewriter-cursor::after {\r\n content: '|';\r\n animation: blink 0.7s infinite;\r\n color: var(--primary);\r\n font-weight: 300;\r\n }\r\n\r\n @keyframes blink {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0; }\r\n }\r\n\r\n \/* Scroll Animation Utility *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n }\r\n\r\n .reveal.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* --- Sections Refinement --- *\/\r\n .section {\r\n padding: 10rem 5%;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 5;\r\n }\r\n\r\n \/* Improved Content Block (About Section) *\/\r\n .content-block {\r\n display: grid;\r\n grid-template-columns: 1.2fr 0.8fr;\r\n gap: 6rem;\r\n align-items: center;\r\n margin-bottom: 12rem;\r\n }\r\n\r\n .content-text h2 {\r\n font-size: clamp(2.5rem, 5vw, 4.2rem);\r\n line-height: 1.1;\r\n margin-bottom: 2.5rem;\r\n color: var(--primary);\r\n font-weight: 800;\r\n letter-spacing: -2px;\r\n }\r\n\r\n .content-text p {\r\n font-size: 1.2rem;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1.8rem;\r\n max-width: 90%;\r\n font-weight: 400;\r\n }\r\n\r\n \/* Creative Fact Check Card *\/\r\n .fact-card {\r\n background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);\r\n padding: 2.5rem;\r\n border-radius: 40px;\r\n border: 1px solid var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .fact-image {\r\n width: 100%;\r\n height: 180px;\r\n background-image: url('https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/banner-image.jpg');\r\n background-size: cover;\r\n background-position: center;\r\n border-radius: 20px;\r\n margin-bottom: 1.5rem;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n .fact-card::after {\r\n content: '';\r\n position: absolute;\r\n top: -20%;\r\n right: -20%;\r\n width: 150px;\r\n height: 150px;\r\n background: var(--secondary);\r\n filter: blur(80px);\r\n opacity: 0.3;\r\n }\r\n\r\n .fact-icon {\r\n font-size: 1.8rem;\r\n margin-bottom: 1rem;\r\n background: rgba(255, 215, 0, 0.1);\r\n width: 50px;\r\n height: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 15px;\r\n color: var(--primary);\r\n }\r\n\r\n \/* Redesigned Stats Section *\/\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 1.5rem;\r\n margin: 8rem 0;\r\n }\r\n\r\n .stat-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n padding: 3.5rem 2rem;\r\n border-radius: 30px;\r\n text-align: center;\r\n transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .stat-card:hover {\r\n background: rgba(255, 255, 255, 0.06);\r\n border-color: var(--primary);\r\n transform: scale(1.03);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .stat-card h3 {\r\n font-size: 4rem;\r\n font-weight: 800;\r\n color: var(--primary);\r\n margin-bottom: 0.5rem;\r\n line-height: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: baseline;\r\n }\r\n\r\n .stat-card p {\r\n font-size: 0.85rem;\r\n color: #888;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n font-weight: 600;\r\n }\r\n\r\n .stat-card .typewriter {\r\n min-height: 1.1em;\r\n display: inline-block;\r\n }\r\n\r\n \/* Decorative Elements *\/\r\n .accent-line {\r\n width: 50px;\r\n height: 2px;\r\n background: var(--primary);\r\n margin-bottom: 2rem;\r\n }\r\n\r\n \/* --- Premium Features Grid (Why Section) --- *\/\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 2.5rem;\r\n margin-top: 4rem;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n .feature-card {\r\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);\r\n padding: 3rem 2.5rem;\r\n border-radius: 24px;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n \/* Subtle top border glow *\/\r\n .feature-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 50%;\r\n height: 2px;\r\n background: radial-gradient(circle, var(--primary) 0%, transparent 100%);\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n .feature-card:hover {\r\n transform: translateY(-12px);\r\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);\r\n border-color: rgba(255, 215, 0, 0.2);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.05);\r\n }\r\n\r\n .feature-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .icon-box {\r\n width: 65px;\r\n height: 65px;\r\n border-radius: 18px;\r\n margin-bottom: 2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* Icon Colors & Glows *\/\r\n .icon-blue { background: rgba(0, 195, 255, 0.1); color: #00c3ff; border: 1px solid rgba(0, 195, 255, 0.2); }\r\n .icon-blue::after { content: ''; position: absolute; width: 100%; height: 100%; background: #00c3ff; filter: blur(25px); opacity: 0.2; z-index: -1; }\r\n \r\n .icon-pink { background: rgba(255, 51, 102, 0.1); color: #ff3366; border: 1px solid rgba(255, 51, 102, 0.2); }\r\n .icon-pink::after { content: ''; position: absolute; width: 100%; height: 100%; background: #ff3366; filter: blur(25px); opacity: 0.2; z-index: -1; }\r\n \r\n .icon-yellow { background: rgba(255, 215, 0, 0.1); color: var(--primary); border: 1px solid rgba(255, 215, 0, 0.2); }\r\n .icon-yellow::after { content: ''; position: absolute; width: 100%; height: 100%; background: var(--primary); filter: blur(25px); opacity: 0.2; z-index: -1; }\r\n\r\n .feature-card h3 {\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n color: #fff;\r\n margin-bottom: 1rem;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .feature-card p {\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 1.05rem;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Personas Section *\/\r\n .persona-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 2.5rem;\r\n margin-top: 4rem;\r\n }\r\n\r\n .persona-card {\r\n background: rgba(255,255,255,0.02);\r\n border-radius: 32px;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .persona-card:hover {\r\n transform: translateY(-10px);\r\n border-color: var(--secondary);\r\n background: rgba(255,255,255,0.04);\r\n }\r\n\r\n .persona-img-wrapper {\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .persona-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s ease;\r\n }\r\n\r\n .persona-card:hover .persona-img {\r\n transform: scale(1.1);\r\n }\r\n\r\n .persona-img-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(to top, var(--bg) 0%, transparent 100%);\r\n }\r\n\r\n .persona-content {\r\n padding: 2.5rem;\r\n }\r\n\r\n \/* --- Redesigned Team Section --- *\/\r\n .team-section {\r\n background: rgba(255, 255, 255, 0.02);\r\n padding: 8rem 5%;\r\n text-align: center;\r\n border-radius: 60px;\r\n margin: 0 2%;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .team-section h2 {\r\n font-size: clamp(2rem, 5vw, 3.5rem);\r\n font-weight: 800;\r\n margin-bottom: 1rem;\r\n color: var(--primary); \/* Stronger branding yellow *\/\r\n }\r\n\r\n .team-section p {\r\n color: #ccc;\r\n margin-top: 10px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .team-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 2.5rem;\r\n margin-top: 4rem;\r\n justify-content: center;\r\n }\r\n\r\n .team-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n border-radius: 32px;\r\n padding: 2.5rem 1.5rem;\r\n text-align: center;\r\n transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;\r\n position: relative;\r\n overflow: hidden;\r\n height: 480px; \/* Large portrait height *\/\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end; \/* Pin details to bottom *\/\r\n }\r\n\r\n .team-card:hover {\r\n transform: translateY(-10px);\r\n border-color: var(--primary); \/* Changed to primary yellow *\/\r\n background: rgba(255, 215, 0, 0.03); \/* Subtle warm tint on hover *\/\r\n box-shadow: 0 15px 35px rgba(255, 215, 0, 0.1); \/* Soft yellow glow drop-shadow *\/\r\n }\r\n\r\n \/* Large portrait image framed within the card *\/\r\n .team-avatar-portrait {\r\n position: absolute;\r\n top: 2rem;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 180px; \/* Large portrait width *\/\r\n height: 260px; \/* Large portrait height *\/\r\n border-radius: 20px;\r\n object-fit: cover;\r\n border: 3px solid transparent;\r\n background: linear-gradient(var(--bg), var(--bg)) padding-box, \r\n linear-gradient(135deg, var(--primary), rgba(255, 255, 255, 0.1)) border-box; \/* Premium gold-to-glass fade *\/\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .team-card:hover .team-avatar-portrait {\r\n transform: translateX(-50%) scale(1.05);\r\n }\r\n\r\n .team-card-content {\r\n padding: 2rem;\r\n background: rgba(10, 11, 16, 0.7); \/* Darker semi-transparent panel *\/\r\n backdrop-filter: blur(10px); \/* Glassmorphism *\/\r\n border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n width: 100%;\r\n border-radius: 0 0 24px 24px;\r\n z-index: 2; \/* Ensures text stays above the portrait base *\/\r\n }\r\n\r\n .team-info h4 {\r\n color: #fff;\r\n font-size: 1.3rem;\r\n font-weight: 800;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .team-info .iit-num {\r\n color: var(--primary); \/* Changed to theme yellow *\/\r\n font-size: 0.9rem;\r\n font-family: 'Courier New', Courier, monospace; \/* Monospace for technical number *\/\r\n font-weight: 600;\r\n margin-bottom: 0.8rem;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .team-info .team-role-tag {\r\n color: rgba(255, 255, 255, 0.7);\r\n font-size: 0.9rem;\r\n background: rgba(255, 255, 255, 0.05);\r\n display: inline-block;\r\n padding: 6px 16px;\r\n border-radius: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n }\r\n\r\n \/* --- Download Section --- *\/\r\n .download-section {\r\n text-align: center;\r\n padding: 6rem 2rem;\r\n background: radial-gradient(circle at center, rgba(0, 86, 179, 0.15) 0%, transparent 70%);\r\n border-radius: 60px;\r\n border: 1px solid rgba(0, 86, 179, 0.3);\r\n margin: 10rem 5% 5rem 5%;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .download-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background: url('data:image\/svg+xml;utf8,<svg width=\"20\" height=\"20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"2\" cy=\"2\" r=\"1\" fill=\"rgba(255,255,255,0.05)\"\/><\/svg>');\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .download-content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n footer {\r\n padding: 4rem 5%;\r\n text-align: center;\r\n color: #555;\r\n font-size: 0.9rem;\r\n border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n margin-top: 4rem;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .persona-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .stats-grid { grid-template-columns: repeat(2, 1fr); }\r\n .content-block { grid-template-columns: 1fr; text-align: center; gap: 4rem; }\r\n .content-text p { max-width: 100%; margin-right: auto; margin-left: auto; }\r\n .accent-line { margin: 0 auto 2rem; }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .stats-grid { grid-template-columns: 1fr; }\r\n nav { padding: 1rem 5%; }\r\n .persona-grid { grid-template-columns: 1fr; }\r\n .team-grid { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"glow\" style=\"top: -10%; left: -10%;\"><\/div>\r\n <div class=\"glow\" style=\"bottom: -10%; right: -10%; background: radial-gradient(circle, rgba(0, 86, 179, 0.08) 0%, transparent 70%); animation-delay: -5s;\"><\/div>\r\n\r\n <nav>\r\n <div class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/RoadSense_logo-removebg-preview.png\" alt=\"RoadSense Logo\">\r\n <\/div>\r\n <div class=\"group-tag\">GROUP SE-48<\/div>\r\n <\/nav>\r\n\r\n <header class=\"hero\">\r\n <div class=\"hero-road-system\">\r\n <div class=\"road-container\">\r\n <div class=\"road-lines\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"hero-content\">\r\n <h1 class=\"typewriter\" data-text=\"Drive Smarter. Learn Faster.\"><\/h1>\r\n <p class=\"reveal\">Master the Sri Lankan Road with our immersive 3D simulation. Gamifying safety, building muscle memory, and ensuring you pass with confidence.<\/p>\r\n <a href=\"#download\" class=\"cta-button reveal\">Get the App<\/a>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"about\" class=\"section\">\r\n <div class=\"content-block reveal\">\r\n <div class=\"content-text\">\r\n <div class=\"accent-line\"><\/div>\r\n <h2 class=\"typewriter\" data-text=\"Virtual Lessons. Real World Safety.\"><\/h2>\r\n <p>RoadSense is a high-fidelity 3D driving simulator engineered for the Sri Lankan context. We have digitized everything from chaotic roundabouts to strict Department of Motor Traffic disciplines.<\/p>\r\n <p>Blending realistic vehicle physics with a reactive questionnaire system, we provide a safe environment to bridge the gap between theory and the actual road.<\/p>\r\n <\/div>\r\n \r\n <div class=\"fact-card\">\r\n <div class=\"fact-image\"><\/div>\r\n <div class=\"fact-icon\">\ud83d\udca1<\/div>\r\n <h4 style=\"margin-bottom: 1rem; font-size: 1.6rem; color: var(--primary); font-weight: 800;\">Fact Check<\/h4>\r\n <p style=\"font-size: 1rem; color: #aaa; line-height: 1.6;\">Road anxiety is the <strong>#1 cause<\/strong> for failing the practical driving test in Sri Lanka. Our simulator is proven to reduce learner anxiety by <strong>40%<\/strong> through immersive, risk-free practice.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stats-grid reveal\" id=\"stats-section\">\r\n <div class=\"stat-card\">\r\n <h3><span class=\"typewriter\" data-text=\"3\"><\/span>D<\/h3>\r\n <p>Maps<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3><span class=\"typewriter\" data-text=\"50\"><\/span>+<\/h3>\r\n <p>Rules<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3 class=\"typewriter\" data-text=\"Real\"><\/h3>\r\n <p>Physics<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3 class=\"typewriter\" data-text=\"Live\"><\/h3>\r\n <p>Feedback<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal\" style=\"margin-top: 12rem;\">\r\n <div style=\"text-align: center; max-width: 800px; margin: 0 auto;\">\r\n <h2 style=\"font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; font-weight: 800; color: #fff;\">Why RoadSense?<\/h2>\r\n <p style=\"color: rgba(255, 215, 0, 0.8); margin-bottom: 4rem; letter-spacing: 2px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase;\">Designed to solve real training bottlenecks<\/p>\r\n <\/div>\r\n \r\n <div class=\"features-grid\">\r\n <div class=\"feature-card\">\r\n <div class=\"icon-box icon-blue\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3>Risk-Free Mastery<\/h3>\r\n <p>Experience heavy traffic or difficult parking maneuvers without the risk of accidents or vehicle wear.<\/p>\r\n <\/div>\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"icon-box icon-pink\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z\"><\/path>\r\n <path d=\"M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3>Cognitive Recall<\/h3>\r\n <p>Gamified modules ensure traffic signs and right-of-way rules become instinctive through repetition.<\/p>\r\n <\/div>\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"icon-box icon-yellow\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"><\/line>\r\n <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3>Lesson Optimization<\/h3>\r\n <p>Arrive at your physical driving lessons with the fundamentals already mastered, saving time and money.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal\" style=\"margin-top: 10rem;\">\r\n <h2 style=\"text-align: center; font-size: 3rem; color: var(--primary); margin-bottom: 4rem; font-weight: 800;\">Who We Serve<\/h2>\r\n <div class=\"persona-grid\">\r\n <div class=\"persona-card\">\r\n <div class=\"persona-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/5.png\" alt=\"Newcomer learner\" class=\"persona-img\">\r\n <div class=\"persona-img-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"persona-content\">\r\n <h4 style=\"color: var(--primary); margin-bottom: 1rem; font-size: 1.5rem;\">The Newcomer<\/h4>\r\n <p style=\"color: rgba(255,255,255,0.7);\">Students looking to build confidence and muscle memory before their first time in a real car on unpredictable roads.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"persona-card\">\r\n <div class=\"persona-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/6.png\" class=\"persona-img\">\r\n <div class=\"persona-img-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"persona-content\">\r\n <h4 style=\"color: var(--primary); margin-bottom: 1rem; font-size: 1.5rem;\">The Institution<\/h4>\r\n <p style=\"color: rgba(255,255,255,0.7);\">Driving schools looking to offer a premium, tech-driven training edge to their curriculum and track student data.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"persona-card\">\r\n <div class=\"persona-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/4-1.png\" class=\"persona-img\">\r\n <div class=\"persona-img-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"persona-content\">\r\n <h4 style=\"color: var(--primary); margin-bottom: 1rem; font-size: 1.5rem;\">The Community<\/h4>\r\n <p style=\"color: rgba(255,255,255,0.7);\">Advocating for safer Sri Lankan roads by raising the standard of driver education through modern, accessible technology.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"team-section reveal\">\r\n <h2>Built by Team SE-48<\/h2>\r\n <p>dedicated Software Engineering students committed to road safety.<\/p>\r\n \r\n <div class=\"team-grid\">\r\n <div class=\"team-card\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/1.png\" alt=\"Student 1\" class=\"team-avatar-portrait\">\r\n <div class=\"team-card-content team-info\">\r\n <h4>Mufaddal Mustafa<\/h4>\r\n <div class=\"iit-num\">IIT: 20210881<\/div>\r\n <div class=\"team-role-tag\">Developer<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"team-card\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/2.png\" alt=\"Student 2\" class=\"team-avatar-portrait\">\r\n <div class=\"team-card-content team-info\">\r\n <h4>Amiru Mihijaya<\/h4>\r\n <div class=\"iit-num\">IIT: 20240893<\/div>\r\n <div class=\"team-role-tag\">Developer<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"team-card\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/3.png\" alt=\"Student 3\" class=\"team-avatar-portrait\">\r\n <div class=\"team-card-content team-info\">\r\n <h4>Senitha Lasen<\/h4>\r\n <div class=\"iit-num\">IIT: 202240247<\/div>\r\n <div class=\"team-role-tag\">Designer<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"team-card\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/4.png\" alt=\"Student 4\" class=\"team-avatar-portrait\">\r\n <div class=\"team-card-content team-info\">\r\n <h4>Chanuth Edirimanne<\/h4>\r\n <div class=\"iit-num\">IIT: 20211268<\/div>\r\n <div class=\"team-role-tag\">QA \/ Testing<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"download\" class=\"download-section reveal\">\r\n <div class=\"download-content\">\r\n <h2 style=\"margin-bottom: 1.5rem; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: var(--primary);\">Take the Wheel.<\/h2>\r\n <p style=\"color: #aaa; margin-bottom: 3rem; font-size: 1.2rem; max-width: 600px; margin: 0 auto 3rem auto;\">Ready to test your driving skills? Download the latest RoadSense beta for Android and start mastering the roads from your device.<\/p>\r\n \r\n <div style=\"display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;\">\r\n <a href=\"https:\/\/github.com\/Mufasaiam\/Road-Sense\/actions\/runs\/23717043413\/artifacts\/6168285068\" class=\"cta-button\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path>\r\n <polyline points=\"7 10 12 15 17 10\"><\/polyline>\r\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line>\r\n <\/svg>\r\n Download APK\r\n <\/a>\r\n \r\n <a href=\"#about\" class=\"cta-button\" style=\"background: rgba(255,255,255,0.05); color: white; border: 1px solid rgba(255,255,255,0.2); box-shadow: none;\">\r\n View Features\r\n <\/a>\r\n <\/div>\r\n \r\n <p style=\"margin-top: 2rem; font-size: 0.85rem; color: #666; font-weight: 600; letter-spacing: 1px;\">\r\n REQUIRES ANDROID 10.0+ | EARLY ACCESS BUILD\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <p>© 2025 RoadSense Project | Group SE-48 | University SDGP<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ Intersection Observer for Reveal Animations\r\n const observerOptions = {\r\n threshold: 0.15\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n \r\n \/\/ Trigger typewriter effects for children\r\n const typewriterElements = entry.target.querySelectorAll('.typewriter');\r\n typewriterElements.forEach(el => {\r\n if (!el.classList.contains('typing-started')) {\r\n startTypewriter(el);\r\n }\r\n });\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n \r\n \/\/ Initial reveal for hero elements\r\n window.addEventListener('load', () => {\r\n const heroTypewriter = document.querySelector('.hero .typewriter');\r\n if (heroTypewriter) startTypewriter(heroTypewriter);\r\n \r\n document.querySelectorAll('.hero .reveal').forEach(el => el.classList.add('active'));\r\n });\r\n\r\n \/\/ Typewriter Logic\r\n function startTypewriter(el) {\r\n el.classList.add('typing-started');\r\n const text = el.getAttribute('data-text');\r\n const speed = 60; \/\/ Typing speed in ms\r\n let i = 0;\r\n\r\n el.innerHTML = '';\r\n el.classList.add('typewriter-cursor');\r\n\r\n function type() {\r\n if (i < text.length) {\r\n if (text.charAt(i) === '.' && i < text.length - 1 && text.charAt(i+1) === ' ') {\r\n el.innerHTML += '.<br>';\r\n i += 2; \r\n } else {\r\n el.innerHTML += text.charAt(i);\r\n i++;\r\n }\r\n setTimeout(type, speed);\r\n } else {\r\n setTimeout(() => {\r\n el.classList.remove('typewriter-cursor');\r\n }, 2000);\r\n }\r\n }\r\n\r\n type();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RoadSense | Master the Sri Lankan Road GROUP SE-48 Master the Sri Lankan Road with our immersive 3D simulation. Gamifying […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roadsense.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":5,"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/roadsense.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n RoadSense | Master the Sri Lankan Road<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary: #FFD700; \/* Sri Lanka Traffic Yellow *\/\r\n --secondary: #0056b3; \/* Traffic Blue *\/\r\n --bg: #0a0b10;\r\n --card-bg: rgba(255, 255, 255, 0.03);\r\n --text: #ffffff;\r\n --accent: #00f2fe;\r\n --border: rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Inter', sans-serif;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n background-color: var(--bg);\r\n color: var(--text);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- Background Animations --- *\/\r\n .glow {\r\n position: fixed;\r\n width: 600px;\r\n height: 600px;\r\n background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, rgba(10, 11, 16, 0) 70%);\r\n border-radius: 50%;\r\n z-index: -1;\r\n filter: blur(80px);\r\n animation: float 20s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes float {\r\n 0% { transform: translate(-10%, -10%) scale(1); }\r\n 100% { transform: translate(20%, 20%) scale(1.2); }\r\n }\r\n\r\n \/* Navigation *\/\r\n nav {\r\n padding: 1.5rem 5%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n position: sticky;\r\n top: 0;\r\n background: rgba(10, 11, 16, 0.85);\r\n backdrop-filter: blur(15px);\r\n z-index: 100;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .logo img {\r\n height: 80px; \/* Increased from 45px to make it pop *\/\r\n border-radius: 8px;\r\n object-fit: contain;\r\n transition: height 0.3s ease; \/* Smooth resizing *\/\r\n }\r\n\r\n \/* Add this inside your existing @media (max-width: 600px) block at the bottom of the CSS *\/\r\n @media (max-width: 600px) {\r\n .logo img {\r\n height: 55px; \/* Keeps it reasonably sized on mobile *\/\r\n }\r\n }\r\n\r\n .group-tag {\r\n background: var(--secondary);\r\n padding: 6px 16px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: 700;\r\n box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero {\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n padding: 0 5%;\r\n position: relative;\r\n overflow: hidden;\r\n background: radial-gradient(circle at 50% 50%, #151820 0%, #0a0b10 100%);\r\n }\r\n\r\n \/* Perspective Road only in Hero *\/\r\n .hero-road-system {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n pointer-events: none;\r\n overflow: hidden;\r\n mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 40%, transparent 60%);\r\n -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 40%, transparent 60%);\r\n }\r\n\r\n .road-container {\r\n position: absolute;\r\n bottom: -100px;\r\n left: 50%;\r\n transform: translateX(-50%) perspective(400px) rotateX(75deg);\r\n width: 300%;\r\n height: 100%;\r\n opacity: 0.3;\r\n }\r\n\r\n .road-lines {\r\n width: 100%;\r\n height: 300%;\r\n background-image: \r\n linear-gradient(90deg, transparent 49.5%, var(--primary) 50%, transparent 50.5%),\r\n linear-gradient(0deg, transparent 90%, var(--primary) 91%);\r\n background-size: 60px 100%, 100% 120px;\r\n animation: drive 3s linear infinite;\r\n }\r\n\r\n @keyframes drive {\r\n from { background-position: 0 0; }\r\n to { background-position: 0 240px; }\r\n }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n h1 {\r\n font-size: clamp(3rem, 10vw, 6rem);\r\n line-height: 1;\r\n margin-bottom: 1.5rem;\r\n font-weight: 800;\r\n min-height: 2em;\r\n color: white;\r\n }\r\n\r\n .hero p {\r\n font-size: 1.2rem;\r\n max-width: 650px;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 3rem;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .cta-button {\r\n padding: 1.2rem 3rem;\r\n background: var(--primary);\r\n color: #000;\r\n text-decoration: none;\r\n font-weight: 800;\r\n border-radius: 50px;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n\r\n .cta-button:hover {\r\n transform: scale(1.05) translateY(-5px);\r\n box-shadow: 0 20px 40px rgba(255, 215, 0, 0.5);\r\n }\r\n\r\n \/* Typewriter Cursor *\/\r\n .typewriter-cursor::after {\r\n content: '|';\r\n animation: blink 0.7s infinite;\r\n color: var(--primary);\r\n font-weight: 300;\r\n }\r\n\r\n @keyframes blink {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0; }\r\n }\r\n\r\n \/* Scroll Animation Utility *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n }\r\n\r\n .reveal.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* --- Sections Refinement --- *\/\r\n .section {\r\n padding: 10rem 5%;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 5;\r\n }\r\n\r\n \/* Improved Content Block (About Section) *\/\r\n .content-block {\r\n display: grid;\r\n grid-template-columns: 1.2fr 0.8fr;\r\n gap: 6rem;\r\n align-items: center;\r\n margin-bottom: 12rem;\r\n }\r\n\r\n .content-text h2 {\r\n font-size: clamp(2.5rem, 5vw, 4.2rem);\r\n line-height: 1.1;\r\n margin-bottom: 2.5rem;\r\n color: var(--primary);\r\n font-weight: 800;\r\n letter-spacing: -2px;\r\n }\r\n\r\n .content-text p {\r\n font-size: 1.2rem;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 1.8rem;\r\n max-width: 90%;\r\n font-weight: 400;\r\n }\r\n\r\n \/* Creative Fact Check Card *\/\r\n .fact-card {\r\n background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);\r\n padding: 2.5rem;\r\n border-radius: 40px;\r\n border: 1px solid var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .fact-image {\r\n width: 100%;\r\n height: 180px;\r\n background-image: url('https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/banner-image.jpg');\r\n background-size: cover;\r\n background-position: center;\r\n border-radius: 20px;\r\n margin-bottom: 1.5rem;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n .fact-card::after {\r\n content: '';\r\n position: absolute;\r\n top: -20%;\r\n right: -20%;\r\n width: 150px;\r\n height: 150px;\r\n background: var(--secondary);\r\n filter: blur(80px);\r\n opacity: 0.3;\r\n }\r\n\r\n .fact-icon {\r\n font-size: 1.8rem;\r\n margin-bottom: 1rem;\r\n background: rgba(255, 215, 0, 0.1);\r\n width: 50px;\r\n height: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 15px;\r\n color: var(--primary);\r\n }\r\n\r\n \/* Redesigned Stats Section *\/\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 1.5rem;\r\n margin: 8rem 0;\r\n }\r\n\r\n .stat-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n padding: 3.5rem 2rem;\r\n border-radius: 30px;\r\n text-align: center;\r\n transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .stat-card:hover {\r\n background: rgba(255, 255, 255, 0.06);\r\n border-color: var(--primary);\r\n transform: scale(1.03);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .stat-card h3 {\r\n font-size: 4rem;\r\n font-weight: 800;\r\n color: var(--primary);\r\n margin-bottom: 0.5rem;\r\n line-height: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: baseline;\r\n }\r\n\r\n .stat-card p {\r\n font-size: 0.85rem;\r\n color: #888;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n font-weight: 600;\r\n }\r\n\r\n .stat-card .typewriter {\r\n min-height: 1.1em;\r\n display: inline-block;\r\n }\r\n\r\n \/* Decorative Elements *\/\r\n .accent-line {\r\n width: 50px;\r\n height: 2px;\r\n background: var(--primary);\r\n margin-bottom: 2rem;\r\n }\r\n\r\n \/* --- Premium Features Grid (Why Section) --- *\/\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 2.5rem;\r\n margin-top: 4rem;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n .feature-card {\r\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);\r\n padding: 3rem 2.5rem;\r\n border-radius: 24px;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n \/* Subtle top border glow *\/\r\n .feature-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 50%;\r\n height: 2px;\r\n background: radial-gradient(circle, var(--primary) 0%, transparent 100%);\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n .feature-card:hover {\r\n transform: translateY(-12px);\r\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);\r\n border-color: rgba(255, 215, 0, 0.2);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.05);\r\n }\r\n\r\n .feature-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .icon-box {\r\n width: 65px;\r\n height: 65px;\r\n border-radius: 18px;\r\n margin-bottom: 2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* Icon Colors & Glows *\/\r\n .icon-blue { background: rgba(0, 195, 255, 0.1); color: #00c3ff; border: 1px solid rgba(0, 195, 255, 0.2); }\r\n .icon-blue::after { content: ''; position: absolute; width: 100%; height: 100%; background: #00c3ff; filter: blur(25px); opacity: 0.2; z-index: -1; }\r\n \r\n .icon-pink { background: rgba(255, 51, 102, 0.1); color: #ff3366; border: 1px solid rgba(255, 51, 102, 0.2); }\r\n .icon-pink::after { content: ''; position: absolute; width: 100%; height: 100%; background: #ff3366; filter: blur(25px); opacity: 0.2; z-index: -1; }\r\n \r\n .icon-yellow { background: rgba(255, 215, 0, 0.1); color: var(--primary); border: 1px solid rgba(255, 215, 0, 0.2); }\r\n .icon-yellow::after { content: ''; position: absolute; width: 100%; height: 100%; background: var(--primary); filter: blur(25px); opacity: 0.2; z-index: -1; }\r\n\r\n .feature-card h3 {\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n color: #fff;\r\n margin-bottom: 1rem;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .feature-card p {\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 1.05rem;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Personas Section *\/\r\n .persona-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 2.5rem;\r\n margin-top: 4rem;\r\n }\r\n\r\n .persona-card {\r\n background: rgba(255,255,255,0.02);\r\n border-radius: 32px;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .persona-card:hover {\r\n transform: translateY(-10px);\r\n border-color: var(--secondary);\r\n background: rgba(255,255,255,0.04);\r\n }\r\n\r\n .persona-img-wrapper {\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .persona-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s ease;\r\n }\r\n\r\n .persona-card:hover .persona-img {\r\n transform: scale(1.1);\r\n }\r\n\r\n .persona-img-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(to top, var(--bg) 0%, transparent 100%);\r\n }\r\n\r\n .persona-content {\r\n padding: 2.5rem;\r\n }\r\n\r\n \/* --- Redesigned Team Section --- *\/\r\n .team-section {\r\n background: rgba(255, 255, 255, 0.02);\r\n padding: 8rem 5%;\r\n text-align: center;\r\n border-radius: 60px;\r\n margin: 0 2%;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .team-section h2 {\r\n font-size: clamp(2rem, 5vw, 3.5rem);\r\n font-weight: 800;\r\n margin-bottom: 1rem;\r\n color: var(--primary); \/* Stronger branding yellow *\/\r\n }\r\n\r\n .team-section p {\r\n color: #ccc;\r\n margin-top: 10px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .team-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 2.5rem;\r\n margin-top: 4rem;\r\n justify-content: center;\r\n }\r\n\r\n .team-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n border-radius: 32px;\r\n padding: 2.5rem 1.5rem;\r\n text-align: center;\r\n transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;\r\n position: relative;\r\n overflow: hidden;\r\n height: 480px; \/* Large portrait height *\/\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end; \/* Pin details to bottom *\/\r\n }\r\n\r\n .team-card:hover {\r\n transform: translateY(-10px);\r\n border-color: var(--primary); \/* Changed to primary yellow *\/\r\n background: rgba(255, 215, 0, 0.03); \/* Subtle warm tint on hover *\/\r\n box-shadow: 0 15px 35px rgba(255, 215, 0, 0.1); \/* Soft yellow glow drop-shadow *\/\r\n }\r\n\r\n \/* Large portrait image framed within the card *\/\r\n .team-avatar-portrait {\r\n position: absolute;\r\n top: 2rem;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 180px; \/* Large portrait width *\/\r\n height: 260px; \/* Large portrait height *\/\r\n border-radius: 20px;\r\n object-fit: cover;\r\n border: 3px solid transparent;\r\n background: linear-gradient(var(--bg), var(--bg)) padding-box, \r\n linear-gradient(135deg, var(--primary), rgba(255, 255, 255, 0.1)) border-box; \/* Premium gold-to-glass fade *\/\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .team-card:hover .team-avatar-portrait {\r\n transform: translateX(-50%) scale(1.05);\r\n }\r\n\r\n .team-card-content {\r\n padding: 2rem;\r\n background: rgba(10, 11, 16, 0.7); \/* Darker semi-transparent panel *\/\r\n backdrop-filter: blur(10px); \/* Glassmorphism *\/\r\n border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n width: 100%;\r\n border-radius: 0 0 24px 24px;\r\n z-index: 2; \/* Ensures text stays above the portrait base *\/\r\n }\r\n\r\n .team-info h4 {\r\n color: #fff;\r\n font-size: 1.3rem;\r\n font-weight: 800;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .team-info .iit-num {\r\n color: var(--primary); \/* Changed to theme yellow *\/\r\n font-size: 0.9rem;\r\n font-family: 'Courier New', Courier, monospace; \/* Monospace for technical number *\/\r\n font-weight: 600;\r\n margin-bottom: 0.8rem;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .team-info .team-role-tag {\r\n color: rgba(255, 255, 255, 0.7);\r\n font-size: 0.9rem;\r\n background: rgba(255, 255, 255, 0.05);\r\n display: inline-block;\r\n padding: 6px 16px;\r\n border-radius: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n }\r\n\r\n \/* --- Download Section --- *\/\r\n .download-section {\r\n text-align: center;\r\n padding: 6rem 2rem;\r\n background: radial-gradient(circle at center, rgba(0, 86, 179, 0.15) 0%, transparent 70%);\r\n border-radius: 60px;\r\n border: 1px solid rgba(0, 86, 179, 0.3);\r\n margin: 10rem 5% 5rem 5%;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .download-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background: url('data:image\/svg+xml;utf8,<svg width=\"20\" height=\"20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"2\" cy=\"2\" r=\"1\" fill=\"rgba(255,255,255,0.05)\"\/><\/svg>');\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .download-content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n footer {\r\n padding: 4rem 5%;\r\n text-align: center;\r\n color: #555;\r\n font-size: 0.9rem;\r\n border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n margin-top: 4rem;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .persona-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .stats-grid { grid-template-columns: repeat(2, 1fr); }\r\n .content-block { grid-template-columns: 1fr; text-align: center; gap: 4rem; }\r\n .content-text p { max-width: 100%; margin-right: auto; margin-left: auto; }\r\n .accent-line { margin: 0 auto 2rem; }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .stats-grid { grid-template-columns: 1fr; }\r\n nav { padding: 1rem 5%; }\r\n .persona-grid { grid-template-columns: 1fr; }\r\n .team-grid { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"glow\" style=\"top: -10%; left: -10%;\"><\/div>\r\n <div class=\"glow\" style=\"bottom: -10%; right: -10%; background: radial-gradient(circle, rgba(0, 86, 179, 0.08) 0%, transparent 70%); animation-delay: -5s;\"><\/div>\r\n\r\n <nav>\r\n <div class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/RoadSense_logo-removebg-preview.png\" alt=\"RoadSense Logo\">\r\n <\/div>\r\n <div class=\"group-tag\">GROUP SE-48<\/div>\r\n <\/nav>\r\n\r\n <header class=\"hero\">\r\n <div class=\"hero-road-system\">\r\n <div class=\"road-container\">\r\n <div class=\"road-lines\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"hero-content\">\r\n <h1 class=\"typewriter\" data-text=\"Drive Smarter. Learn Faster.\"><\/h1>\r\n <p class=\"reveal\">Master the Sri Lankan Road with our immersive 3D simulation. Gamifying safety, building muscle memory, and ensuring you pass with confidence.<\/p>\r\n <a href=\"#download\" class=\"cta-button reveal\">Get the App<\/a>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"about\" class=\"section\">\r\n <div class=\"content-block reveal\">\r\n <div class=\"content-text\">\r\n <div class=\"accent-line\"><\/div>\r\n <h2 class=\"typewriter\" data-text=\"Virtual Lessons. Real World Safety.\"><\/h2>\r\n <p>RoadSense is a high-fidelity 3D driving simulator engineered for the Sri Lankan context. We have digitized everything from chaotic roundabouts to strict Department of Motor Traffic disciplines.<\/p>\r\n <p>Blending realistic vehicle physics with a reactive questionnaire system, we provide a safe environment to bridge the gap between theory and the actual road.<\/p>\r\n <\/div>\r\n \r\n <div class=\"fact-card\">\r\n <div class=\"fact-image\"><\/div>\r\n <div class=\"fact-icon\">\ud83d\udca1<\/div>\r\n <h4 style=\"margin-bottom: 1rem; font-size: 1.6rem; color: var(--primary); font-weight: 800;\">Fact Check<\/h4>\r\n <p style=\"font-size: 1rem; color: #aaa; line-height: 1.6;\">Road anxiety is the <strong>#1 cause<\/strong> for failing the practical driving test in Sri Lanka. Our simulator is proven to reduce learner anxiety by <strong>40%<\/strong> through immersive, risk-free practice.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stats-grid reveal\" id=\"stats-section\">\r\n <div class=\"stat-card\">\r\n <h3><span class=\"typewriter\" data-text=\"3\"><\/span>D<\/h3>\r\n <p>Maps<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3><span class=\"typewriter\" data-text=\"50\"><\/span>+<\/h3>\r\n <p>Rules<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3 class=\"typewriter\" data-text=\"Real\"><\/h3>\r\n <p>Physics<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3 class=\"typewriter\" data-text=\"Live\"><\/h3>\r\n <p>Feedback<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal\" style=\"margin-top: 12rem;\">\r\n <div style=\"text-align: center; max-width: 800px; margin: 0 auto;\">\r\n <h2 style=\"font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; font-weight: 800; color: #fff;\">Why RoadSense?<\/h2>\r\n <p style=\"color: rgba(255, 215, 0, 0.8); margin-bottom: 4rem; letter-spacing: 2px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase;\">Designed to solve real training bottlenecks<\/p>\r\n <\/div>\r\n \r\n <div class=\"features-grid\">\r\n <div class=\"feature-card\">\r\n <div class=\"icon-box icon-blue\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3>Risk-Free Mastery<\/h3>\r\n <p>Experience heavy traffic or difficult parking maneuvers without the risk of accidents or vehicle wear.<\/p>\r\n <\/div>\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"icon-box icon-pink\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z\"><\/path>\r\n <path d=\"M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3>Cognitive Recall<\/h3>\r\n <p>Gamified modules ensure traffic signs and right-of-way rules become instinctive through repetition.<\/p>\r\n <\/div>\r\n \r\n <div class=\"feature-card\">\r\n <div class=\"icon-box icon-yellow\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"><\/line>\r\n <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3>Lesson Optimization<\/h3>\r\n <p>Arrive at your physical driving lessons with the fundamentals already mastered, saving time and money.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal\" style=\"margin-top: 10rem;\">\r\n <h2 style=\"text-align: center; font-size: 3rem; color: var(--primary); margin-bottom: 4rem; font-weight: 800;\">Who We Serve<\/h2>\r\n <div class=\"persona-grid\">\r\n <div class=\"persona-card\">\r\n <div class=\"persona-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/5.png\" alt=\"Newcomer learner\" class=\"persona-img\">\r\n <div class=\"persona-img-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"persona-content\">\r\n <h4 style=\"color: var(--primary); margin-bottom: 1rem; font-size: 1.5rem;\">The Newcomer<\/h4>\r\n <p style=\"color: rgba(255,255,255,0.7);\">Students looking to build confidence and muscle memory before their first time in a real car on unpredictable roads.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"persona-card\">\r\n <div class=\"persona-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/6.png\" class=\"persona-img\">\r\n <div class=\"persona-img-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"persona-content\">\r\n <h4 style=\"color: var(--primary); margin-bottom: 1rem; font-size: 1.5rem;\">The Institution<\/h4>\r\n <p style=\"color: rgba(255,255,255,0.7);\">Driving schools looking to offer a premium, tech-driven training edge to their curriculum and track student data.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"persona-card\">\r\n <div class=\"persona-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/4-1.png\" class=\"persona-img\">\r\n <div class=\"persona-img-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"persona-content\">\r\n <h4 style=\"color: var(--primary); margin-bottom: 1rem; font-size: 1.5rem;\">The Community<\/h4>\r\n <p style=\"color: rgba(255,255,255,0.7);\">Advocating for safer Sri Lankan roads by raising the standard of driver education through modern, accessible technology.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"team-section reveal\">\r\n <h2>Built by Team SE-48<\/h2>\r\n <p>dedicated Software Engineering students committed to road safety.<\/p>\r\n \r\n <div class=\"team-grid\">\r\n <div class=\"team-card\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/1.png\" alt=\"Student 1\" class=\"team-avatar-portrait\">\r\n <div class=\"team-card-content team-info\">\r\n <h4>Mufaddal Mustafa<\/h4>\r\n <div class=\"iit-num\">IIT: 20210881<\/div>\r\n <div class=\"team-role-tag\">Developer<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"team-card\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/2.png\" alt=\"Student 2\" class=\"team-avatar-portrait\">\r\n <div class=\"team-card-content team-info\">\r\n <h4>Amiru Mihijaya<\/h4>\r\n <div class=\"iit-num\">IIT: 20240893<\/div>\r\n <div class=\"team-role-tag\">Developer<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"team-card\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/3.png\" alt=\"Student 3\" class=\"team-avatar-portrait\">\r\n <div class=\"team-card-content team-info\">\r\n <h4>Senitha Lasen<\/h4>\r\n <div class=\"iit-num\">IIT: 202240247<\/div>\r\n <div class=\"team-role-tag\">Designer<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"team-card\">\r\n <img decoding=\"async\" src=\"https:\/\/roadsense.online\/wp-content\/uploads\/2026\/03\/4.png\" alt=\"Student 4\" class=\"team-avatar-portrait\">\r\n <div class=\"team-card-content team-info\">\r\n <h4>Chanuth Edirimanne<\/h4>\r\n <div class=\"iit-num\">IIT: 20211268<\/div>\r\n <div class=\"team-role-tag\">QA \/ Testing<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"download\" class=\"download-section reveal\">\r\n <div class=\"download-content\">\r\n <h2 style=\"margin-bottom: 1.5rem; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: var(--primary);\">Take the Wheel.<\/h2>\r\n <p style=\"color: #aaa; margin-bottom: 3rem; font-size: 1.2rem; max-width: 600px; margin: 0 auto 3rem auto;\">Ready to test your driving skills? Download the latest RoadSense beta for Android and start mastering the roads from your device.<\/p>\r\n \r\n <div style=\"display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;\">\r\n <a href=\"https:\/\/github.com\/Mufasaiam\/Road-Sense\/actions\/runs\/23717043413\/artifacts\/6168285068\" class=\"cta-button\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path>\r\n <polyline points=\"7 10 12 15 17 10\"><\/polyline>\r\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line>\r\n <\/svg>\r\n Download APK\r\n <\/a>\r\n \r\n <a href=\"#about\" class=\"cta-button\" style=\"background: rgba(255,255,255,0.05); color: white; border: 1px solid rgba(255,255,255,0.2); box-shadow: none;\">\r\n View Features\r\n <\/a>\r\n <\/div>\r\n \r\n <p style=\"margin-top: 2rem; font-size: 0.85rem; color: #666; font-weight: 600; letter-spacing: 1px;\">\r\n REQUIRES ANDROID 10.0+ | EARLY ACCESS BUILD\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <p>© 2025 RoadSense Project | Group SE-48 | University SDGP<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ Intersection Observer for Reveal Animations\r\n const observerOptions = {\r\n threshold: 0.15\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n \r\n \/\/ Trigger typewriter effects for children\r\n const typewriterElements = entry.target.querySelectorAll('.typewriter');\r\n typewriterElements.forEach(el => {\r\n if (!el.classList.contains('typing-started')) {\r\n startTypewriter(el);\r\n }\r\n });\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n \r\n \/\/ Initial reveal for hero elements\r\n window.addEventListener('load', () => {\r\n const heroTypewriter = document.querySelector('.hero .typewriter');\r\n if (heroTypewriter) startTypewriter(heroTypewriter);\r\n \r\n document.querySelectorAll('.hero .reveal').forEach(el => el.classList.add('active'));\r\n });\r\n\r\n \/\/ Typewriter Logic\r\n function startTypewriter(el) {\r\n el.classList.add('typing-started');\r\n const text = el.getAttribute('data-text');\r\n const speed = 60; \/\/ Typing speed in ms\r\n let i = 0;\r\n\r\n el.innerHTML = '';\r\n el.classList.add('typewriter-cursor');\r\n\r\n function type() {\r\n if (i < text.length) {\r\n if (text.charAt(i) === '.' && i < text.length - 1 && text.charAt(i+1) === ' ') {\r\n el.innerHTML += '.<br>';\r\n i += 2; \r\n } else {\r\n el.innerHTML += text.charAt(i);\r\n i++;\r\n }\r\n setTimeout(type, speed);\r\n } else {\r\n setTimeout(() => {\r\n el.classList.remove('typewriter-cursor');\r\n }, 2000);\r\n }\r\n }\r\n\r\n type();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RoadSense | Master the Sri Lankan Road GROUP SE-48 Master the Sri Lankan Road with our immersive 3D simulation. Gamifying […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roadsense.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":5,"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/roadsense.online\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/roadsense.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}