*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
 --primary-color:#0066cc;
 --secondary-color:#00b8d4;
 --accent-color:#ff6b6b;
 --dark:#0b1b2b;
 --text-primary:#1f2937;
 --text-secondary:#6b7280;
 --gray-light:#e5e7eb;
 --gray-lighter:#f3f4f6;
 --shadow-md:0 10px 25px rgba(0,0,0,.08)
}
body{
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
 color:var(--text-primary);
 background:#fff;
 line-height:1.6;
}
.landing-hero{
 position:relative;
 min-height:90vh;
 padding:140px 0 80px;
 background:linear-gradient(120deg,rgba(1,6,17,.4),rgba(0,102,204,.25)),url('../images/welcome-bg.png') center/cover no-repeat;
 color:#fff;
 overflow:hidden;
}
.landing-overlay{
 position:absolute;
 inset:0;
 background:rgba(0,0,0,.12);
}
.landing-grid{
 position:relative;
 z-index:1;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:flex-start;
 min-height:70vh;
 gap:32px;
}
.landing-content{
 text-align:center;
 margin-top:auto;
 padding-bottom:80px;
 max-width:560px;
}
.landing-content h1{
 font-size:1.75rem;
 font-weight:800;
 line-height:1.1;
 margin-bottom:20px;
}
.landing-content h1 span{
 color:#4dd9ff;
}
.landing-content .lead{
 font-size:0.95rem;
 color:rgba(255,255,255,.8);
 margin-bottom:20px;
}
.landing-visual{
 display:flex;
 justify-content:center;
 margin-top:10px;
 margin-bottom:auto;
}
.landing-logo{
 max-width:360px;
 width:100%;
 filter:drop-shadow(0 20px 45px rgba(0,0,0,.35));
}
.scroll-indicator{
 margin-top:-2px;
 color:#fff;
 text-decoration:none;
 font-weight:600;
 display:inline-flex;
 flex-direction:column;
 align-items:center;
 gap:6px;
 opacity:.9;
}
.scroll-indicator svg{
 width:22px;
 height:22px;
 animation:scrollSoft 3s ease-in-out infinite;
}
@keyframes scrollSoft{
 0%{transform:translateY(0);opacity:.8}
 50%{transform:translateY(8px);opacity:1}
 100%{transform:translateY(0);opacity:.85}
}
.eyebrow{
 letter-spacing:.3rem;
 font-size:.8rem;
 font-weight:700;
 color:#7dd3fc;
 margin-bottom:12px;
 display:block;
}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.header{background:rgba(255,255,255,.95);position:sticky;top:0;z-index:1000;backdrop-filter:blur(12px);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.logo-image-header{height:48px;width:auto}
.navbar-menu{display:flex;list-style:none;gap:32px}
.nav-link{text-decoration:none;color:var(--text-primary);font-weight:500;position:relative}
.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--primary-color);transition:.3s}
.nav-link:hover::after{width:100%}
.navbar-actions{display:flex;align-items:center;gap:16px}
.language-selector{display:flex;align-items:center;gap:6px;background:#f3f4f6;padding:6px 12px;border-radius:999px}
.lang-link{text-decoration:none;color:var(--text-primary);font-weight:600;font-size:.9rem;padding:4px 8px;border-radius:6px;transition:all .3s}
.lang-link:hover{background:rgba(0,102,204,.1);color:var(--primary-color)}
.lang-link.active{background:var(--primary-color);color:#fff}
.flag-icon{width:20px;height:15px;display:inline-block;vertical-align:middle;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1);object-fit:cover}
.lang-separator{color:var(--text-secondary);font-weight:600;padding:0 4px}
.mobile-menu-toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px;z-index:1001;position:relative}
.mobile-menu-toggle span{width:24px;height:3px;background:var(--text-primary);border-radius:3px;transition:all .3s;display:block}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}
.hero-section{padding:90px 0 70px;background:linear-gradient(135deg,#f5f7fa,#dce7ff)}
.hero-section .container{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
 gap:48px;
 align-items:center;
}
.hero-content{max-width:540px}
.hero-title{font-size:3rem;font-weight:800;margin-bottom:16px}
.text-gradient{background:linear-gradient(135deg,#0066cc,#00b8d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-description{color:var(--text-secondary);margin-bottom:24px;font-size:1.15rem}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.btn{padding:14px 28px;border-radius:999px;font-weight:600;text-decoration:none;display:inline-block}
.btn-primary{background:linear-gradient(135deg,#0066cc,#00b8d4);color:#fff;box-shadow:var(--shadow-md)}
.btn-secondary{border:2px solid var(--primary-color);color:var(--primary-color)}
.hero-image{display:flex;align-items:center;justify-content:center}
.pool-visualization{width:320px;height:240px;border-radius:24px;background:linear-gradient(180deg,rgba(0,102,204,.8),rgba(0,184,212,.6));position:relative;box-shadow:var(--shadow-md)}
.ai-indicator{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;background:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}
.features-section{padding:60px 0 80px}
.section-header{text-align:center;margin-bottom:48px}
.section-title{font-size:2.3rem;font-weight:700;margin-bottom:12px}
.section-description{color:var(--text-secondary)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.feature-card{background:#fff;border:1px solid var(--gray-light);border-radius:16px;padding:24px;box-shadow:var(--shadow-md)}
.feature-title{font-size:1.25rem;font-weight:700;margin-bottom:12px}
.how-it-works-section{padding:80px 0;background:var(--gray-lighter)}
.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.step-item{background:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow-md);display:flex;gap:16px}
.step-number{width:44px;height:44px;border-radius:12px;background:var(--primary-color);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.stats-section{padding:60px 0;background:var(--dark);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.stat-number{font-size:2.5rem;font-weight:800}
.cta-section{padding:80px 0;background:#05101d;color:#fff;text-align:center}
.cta-content{max-width:600px;margin:0 auto}
.dashboard-section{padding:60px 0}
.dashboard-intro{background:linear-gradient(135deg,#f5f7fa,#dce7ff);border-radius:20px;padding:48px;margin-top:48px}
.intro-content{text-align:center;max-width:800px;margin:0 auto 40px}
.intro-subtitle{color:var(--primary-color);font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.intro-title{font-size:2.5rem;font-weight:800;margin-bottom:20px;color:var(--text-primary)}
.intro-text{font-size:1.15rem;color:var(--text-secondary);line-height:1.8;max-width:700px;margin:0 auto}
.intro-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:40px}
.intro-feature-item{background:#fff;border-radius:16px;padding:28px;box-shadow:var(--shadow-md);text-align:center;transition:transform .3s,box-shadow .3s}
.intro-feature-item:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(0,0,0,.12)}
.feature-icon{width:56px;height:56px;background:linear-gradient(135deg,#0066cc,#00b8d4);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff}
.feature-icon svg{width:28px;height:28px}
.feature-title{font-size:1.25rem;font-weight:700;margin-bottom:12px;color:var(--text-primary)}
.feature-desc{color:var(--text-secondary);font-size:.95rem;line-height:1.6}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.dashboard-card{background:#fff;border-radius:18px;padding:24px;box-shadow:var(--shadow-md);border:1px solid var(--gray-light)}
.camera-feed{background:#0f172a;height:220px;border-radius:16px;color:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.ai-badge{position:absolute;top:12px;right:12px;background:#10b981;padding:4px 12px;border-radius:999px;font-size:.8rem}
.detection-stats,.alerts-list{display:flex;gap:16px;flex-wrap:wrap}
.stat-box{flex:1;min-width:120px;background:var(--gray-lighter);border-radius:12px;padding:16px;text-align:center}
.alert-item{flex:1;min-width:200px;border-radius:12px;padding:16px;background:rgba(0,102,204,.08)}
.alert-medium{background:rgba(245,158,11,.12)}
.alert-high{background:rgba(239,68,68,.12)}
.security-hero{padding:70px 0;background:linear-gradient(135deg,#00142b,#023e6b);color:#fff;text-align:center}
.security-features{padding:70px 0}
.security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.security-card{background:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow-md)}
.contact-section{padding:70px 0}
.contact-header{text-align:center;margin-bottom:48px}
.contact-title{font-size:2.5rem;font-weight:700;margin-bottom:16px;color:var(--text-primary)}
.contact-description{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto}
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1200px;margin:0 auto}
.contact-form-container{background:#fff;border-radius:16px;padding:32px;box-shadow:var(--shadow-md);border:1px solid var(--gray-light)}
.contact-form{display:flex;flex-direction:column;gap:20px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-label{font-weight:600;color:var(--text-primary);font-size:.9rem}
.form-input,.form-textarea{padding:14px;border-radius:10px;border:2px solid var(--gray-light);font:inherit;font-size:1rem;transition:border-color .3s;width:100%}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--primary-color)}
.form-textarea{resize:vertical;min-height:120px;font-family:inherit}
.btn-large{padding:16px 32px;font-size:1.1rem}
.alert{display:flex;align-items:center;padding:14px 16px;border-radius:10px;margin-bottom:20px;gap:10px}
.alert-success{background:rgba(16,185,129,.1);border:1px solid #10b981;color:#065f46}
.alert-error{background:rgba(239,68,68,.1);border:1px solid #ef4444;color:#991b1b}
.contact-info{display:flex;flex-direction:column;gap:20px}
.info-card{background:#fff;border-radius:16px;padding:28px;box-shadow:var(--shadow-md);border:1px solid var(--gray-light);text-align:center;transition:transform .3s,box-shadow .3s}
.info-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(0,0,0,.12)}
.info-icon{width:56px;height:56px;background:linear-gradient(135deg,#0066cc,#00b8d4);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff}
.info-icon svg{width:28px;height:28px}
.info-title{font-size:1.25rem;font-weight:700;margin-bottom:12px;color:var(--text-primary)}
.info-text{color:var(--text-secondary);margin-bottom:6px;font-size:.95rem}
.footer{background:#030912;color:#fff;padding:60px 0 24px;margin-top:60px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:24px}
.footer-links{list-style:none}
.footer-links a{color:#fff;text-decoration:none;opacity:.8}
.footer-bottom{text-align:center;opacity:.7}
@media(max-width:768px){
 .landing-content{padding-bottom:70px}
 .landing-content h1{font-size:1.4rem}
 .landing-logo{max-width:280px}
 .navbar{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap}
 .navbar-brand{flex-shrink:0;order:1}
 .navbar-menu{position:fixed;top:80px;left:0;right:0;background:#fff;flex-direction:column;padding:24px;box-shadow:0 4px 6px rgba(0,0,0,.1);transform:translateX(-100%);transition:transform .3s;z-index:1000;gap:0;display:flex;max-height:calc(100vh - 80px);overflow-y:auto}
 .navbar-menu.active{transform:translateX(0)}
 .navbar-menu li{width:100%;border-bottom:1px solid var(--gray-light)}
 .navbar-menu li:last-child{border-bottom:none}
 .nav-link{display:block;padding:16px;width:100%}
 .nav-link::after{display:none}
 .navbar-actions{order:2;flex-shrink:0;margin-left:auto;margin-right:12px;display:flex;align-items:center}
 .navbar-actions .language-selector{background:#fff;border:1px solid var(--gray-light);box-shadow:0 2px 4px rgba(0,0,0,.1);white-space:nowrap}
 .language-selector{padding:6px 10px;gap:4px;display:flex;align-items:center}
 .flag-icon{width:16px;height:12px;flex-shrink:0}
 .lang-link{font-size:.75rem;padding:2px 4px;white-space:nowrap}
 .lang-separator{font-size:.75rem;padding:0 2px}
 .mobile-menu-toggle{display:flex;order:3;flex-shrink:0;margin-left:0}
 .hero-section{padding:60px 0;text-align:center}
 .hero-section .container{grid-template-columns:1fr;gap:32px}
 .hero-content{margin:0 auto}
 .hero-buttons{justify-content:center}
 .contact-content{grid-template-columns:1fr}
 .dashboard-intro{padding:32px 24px}
 .intro-title{font-size:1.8rem}
 .intro-text{font-size:1rem}
 .intro-features{grid-template-columns:1fr;gap:20px}
}
@media(max-width:480px){
 .navbar-actions{margin-right:8px}
 .language-selector{padding:4px 8px;gap:3px}
 .lang-link{font-size:.7rem;padding:2px 3px}
 .flag-icon{width:14px;height:10px}
 .mobile-menu-toggle{padding:6px}
 .mobile-menu-toggle span{width:20px;height:2px}
}