/* style.css - Light Futuristic Theme, Responsive, Optimized for Core Web Vitals */

/* Reset & Base */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#f5f7fa; color:#111; line-height:1.6;}
a {text-decoration:none; color:#00aaff;}
img {max-width:100%; height:auto; display:block;}

/* Header */
.site-header {display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:rgba(255,255,255,0.9); box-shadow:0 2px 10px rgba(0,0,0,0.05); position:sticky; top:0; z-index:1000;}
.site-header h1 {font-size:1.8rem; color:#00aaff;}
.nav-list {list-style:none; display:flex; gap:1.5rem;}
.nav-list li a {font-weight:500; transition:0.3s;}
.nav-list li a:hover {color:#0077cc;}

/* Hero */
.hero {padding:4rem 2rem; display:flex; justify-content:center; align-items:center; background:linear-gradient(135deg, #e0f7ff, #ffffff);}
.hero-grid {display:flex; flex-wrap:wrap; gap:2rem; align-items:center;}
.hero-text {flex:1 1 400px;}
.hero-text h2 {font-size:2rem; margin-bottom:1rem; color:#0077cc;}
.hero-text .meta {font-size:0.9rem; color:#555; margin-bottom:1rem;}
.btn-primary {display:inline-block; background:#00aaff; color:#fff; padding:0.8rem 1.5rem; border-radius:0.5rem; transition:0.3s;}
.btn-primary:hover {background:#0077cc;}
.hero-image {flex:1 1 400px;}
.glass-card {background:rgba(255,255,255,0.6); border-radius:1rem; padding:1rem; box-shadow:0 4px 20px rgba(0,0,0,0.1); backdrop-filter:blur(8px);}

/* Cards & Sections */
.card {background:#ffffff; padding:2rem; margin:2rem auto; border-radius:1rem; box-shadow:0 4px 15px rgba(0,0,0,0.05); max-width:1200px;}
.futuristic-section h2 {color:#00aaff; margin-bottom:1rem;}
.features-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem;}
.feature-card {background:rgba(240,248,255,0.8); border-radius:1rem; padding:1.5rem; box-shadow:0 2px 10px rgba(0,0,0,0.05); transition:0.3s;}
.feature-card:hover {transform:translateY(-5px); box-shadow:0 6px 20px rgba(0,0,0,0.1);}
.feature-card h4 {color:#0077cc; margin-bottom:0.5rem;}
.feature-card p {font-size:0.95rem; color:#333;}

/* Tables */
.table {width:100%; border-collapse:collapse; margin-top:1rem;}
.table th, .table td {padding:0.8rem; text-align:left; border-bottom:1px solid #e0e0e0;}
.table th {color:#0077cc;}

/* Roadmap */
.phase {margin-bottom:1.5rem; padding:1rem; border-left:4px solid #00aaff; background:rgba(224,247,255,0.3); border-radius:0.5rem;}
.phase h3 {margin-bottom:0.5rem; color:#0077cc;}

/* Forms */
form {display:flex; flex-direction:column; gap:1rem; max-width:600px;}
input, textarea {padding:0.8rem 1rem; border-radius:0.5rem; border:1px solid #ccc;}
input:focus, textarea:focus {outline:none; border-color:#00aaff; box-shadow:0 0 5px rgba(0,170,255,0.3);}
button {background:#00aaff; color:#fff; border:none; padding:0.8rem 1.5rem; border-radius:0.5rem; cursor:pointer; transition:0.3s;}
button:hover {background:#0077cc;}

/* Footer */
.futuristic-footer {text-align:center; padding:2rem; margin-top:2rem; background:linear-gradient(135deg, #e0f7ff, #ffffff); color:#333;}

/* Responsive */
@media(max-width:1024px) {.hero-grid {flex-direction:column; text-align:center;}.hero-text {order:2;} .hero-image {order:1;}} 
@media(max-width:600px) {.site-header {flex-direction:column; gap:1rem;} .nav-list {flex-direction:column; gap:1rem;}}