@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --sky: #1a6fb5;
  --sky-light: #3a8fd6;
  --sky-pale: #e8f4fd;
  --orange: #f47c20;
  --orange-light: #ffa04d;
  --navy: #0d3158;
  --navy-mid: #1a4b7a;
  --white: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f0f4f8;
  --gray-200: #e2e8f0;
  --gray-500: #64748b;
  --gray-700: #334155;
  --green: #22c55e;
  --teal: #0ea5e9;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 4px 24px rgba(26,111,181,0.10);
  --shadow-lg: 0 8px 40px rgba(26,111,181,0.18);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--gray-50);
  color: var(--gray-700);
  scroll-behavior: smooth;
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1.5px solid var(--gray-200);
  padding: 0 2rem;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 16px rgba(26,111,181,0.08);
}

.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo img { height:44px; border-radius:8px; }
.nav-logo-text { display:flex; flex-direction:column; }
.nav-logo-text .brand { font-family:'Outfit',sans-serif; font-weight:800; font-size:1.15rem; color:var(--navy); letter-spacing:0.5px; }
.nav-logo-text .sub { font-size:0.7rem; color:var(--sky); font-weight:600; letter-spacing:1px; text-transform:uppercase; }

.nav-links { display:flex; gap:0.25rem; align-items:center; }
.nav-links a {
  padding: 8px 16px; border-radius: 30px;
  text-decoration: none; font-weight: 600; font-size: 0.88rem;
  color: var(--gray-700); transition: all 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  background: var(--sky); color: white;
}
.nav-links a.live-btn {
  background: linear-gradient(135deg,var(--orange),var(--orange-light));
  color: white; display:flex; align-items:center; gap:6px;
}
.nav-links a.live-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(244,124,32,0.35); }

.live-dot {
  width:8px; height:8px; border-radius:50%;
  background:white; animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.4)} }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:24px; height:2.5px; background:var(--navy); border-radius:2px; transition:all 0.3s; }

/* HERO */
.hero {
  padding: 120px 2rem 80px;
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 50%, var(--sky) 100%);
  color: white; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; position:relative; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.25); border-radius:30px;
  padding:6px 16px; font-size:0.8rem; font-weight:700; letter-spacing:1px;
  color:rgba(255,255,255,0.9); text-transform:uppercase; margin-bottom:1.5rem;
}
.hero h1 {
  font-family:'Outfit',sans-serif; font-size:2.8rem; font-weight:800;
  line-height:1.15; margin-bottom:1rem;
}
.hero h1 span { color:var(--orange-light); }
.hero p { font-size:1.08rem; line-height:1.7; opacity:0.88; margin-bottom:2rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-primary {
  background: var(--orange); color:white; border:none; padding:13px 28px;
  border-radius:30px; font-weight:700; font-size:0.95rem; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:all 0.25s; font-family:'Nunito',sans-serif;
}
.btn-primary:hover { background:var(--orange-light); transform:translateY(-2px); box-shadow:0 6px 20px rgba(244,124,32,0.4); }
.btn-outline {
  background:transparent; color:white; border:2px solid rgba(255,255,255,0.6);
  padding:12px 28px; border-radius:30px; font-weight:700; font-size:0.95rem;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:all 0.25s; font-family:'Nunito',sans-serif;
}
.btn-outline:hover { background:rgba(255,255,255,0.12); border-color:white; }

.hero-visual {
  display:flex; flex-direction:column; gap:1rem;
}
.weather-cards-mini { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.mini-card {
  background:rgba(255,255,255,0.12); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius-sm);
  padding:1rem 1.2rem; text-align:center;
  animation: floatUp 0.6s ease forwards; opacity:0;
}
.mini-card:nth-child(1){animation-delay:0.1s}
.mini-card:nth-child(2){animation-delay:0.2s}
.mini-card:nth-child(3){animation-delay:0.3s}
.mini-card:nth-child(4){animation-delay:0.4s}
@keyframes floatUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.mini-card .value { font-family:'Outfit',sans-serif; font-size:1.6rem; font-weight:800; color:white; }
.mini-card .label { font-size:0.72rem; color:rgba(255,255,255,0.7); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.mini-card .icon { font-size:1.4rem; margin-bottom:4px; }

/* SECTIONS */
.section { padding:80px 2rem; }
.section-inner { max-width:1100px; margin:0 auto; }
.section-tag {
  display:inline-block; background:var(--sky-pale); color:var(--sky);
  font-weight:800; font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:5px 14px; border-radius:20px; margin-bottom:1rem;
}
.section-title {
  font-family:'Outfit',sans-serif; font-size:2.1rem; font-weight:800;
  color:var(--navy); margin-bottom:0.75rem; line-height:1.2;
}
.section-sub { color:var(--gray-500); font-size:1rem; line-height:1.7; max-width:600px; }

/* HIGHLIGHTS */
.highlights { background:white; }
.highlights-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.hl-card {
  background:var(--gray-50); border:1.5px solid var(--gray-200);
  border-radius:var(--radius); padding:2rem 1.5rem;
  text-align:center; transition:all 0.3s;
}
.hl-card:hover { border-color:var(--sky-light); transform:translateY(-4px); box-shadow:var(--shadow-lg); background:white; }
.hl-icon {
  width:64px; height:64px; border-radius:18px; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.hl-icon.blue { background:linear-gradient(135deg,var(--sky-pale),#bde0fc); }
.hl-icon.orange { background:linear-gradient(135deg,#fef3e2,#fdd9b0); }
.hl-icon.teal { background:linear-gradient(135deg,#e0f7fa,#b2ebf2); }
.hl-icon.green { background:linear-gradient(135deg,#f0fdf4,#bbf7d0); }
.hl-card h3 { font-family:'Outfit',sans-serif; font-weight:700; color:var(--navy); margin-bottom:0.5rem; }
.hl-card p { font-size:0.875rem; color:var(--gray-500); line-height:1.6; }

/* ABOUT CARDS */
.about-cards { background:var(--gray-50); }
.cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; margin-top:3rem; }
.a-card {
  background:white; border-radius:var(--radius); padding:2.5rem;
  box-shadow:var(--shadow); border:1.5px solid var(--gray-200); transition:all 0.3s;
}
.a-card:hover { box-shadow:var(--shadow-lg); border-color:var(--sky-light); }
.a-card-icon { font-size:2rem; margin-bottom:1rem; }
.a-card h3 { font-family:'Outfit',sans-serif; font-weight:800; font-size:1.2rem; color:var(--navy); margin-bottom:0.75rem; }
.a-card p { color:var(--gray-500); line-height:1.7; font-size:0.92rem; }

/* AWS FLOW */
.aws-flow { background:white; }
.flow-steps { display:flex; align-items:center; justify-content:center; gap:0; margin-top:3rem; flex-wrap:wrap; }
.flow-step {
  text-align:center; padding:1.5rem 1.2rem; flex:1; min-width:130px;
  background:var(--sky-pale); border-radius:var(--radius); margin:0.5rem;
  border:2px solid var(--sky-light); transition:all 0.3s;
}
.flow-step:hover { background:var(--sky); color:white; }
.flow-step:hover .step-num { background:var(--orange); }
.flow-step:hover p { color:rgba(255,255,255,0.8); }
.step-num {
  width:36px; height:36px; border-radius:50%; background:var(--sky);
  color:white; font-weight:800; font-size:0.9rem; display:flex; align-items:center; justify-content:center;
  margin:0 auto 0.75rem;
}
.flow-step h4 { font-family:'Outfit',sans-serif; font-weight:700; font-size:0.95rem; color:var(--navy); margin-bottom:0.25rem; }
.flow-step p { font-size:0.78rem; color:var(--gray-500); }
.flow-arrow { font-size:1.5rem; color:var(--sky-light); margin:0 -0.5rem; }

/* PARAMS */
.params-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.param-card {
  background:white; border-radius:var(--radius); padding:1.75rem;
  border:1.5px solid var(--gray-200); transition:all 0.3s; text-align:center;
}
.param-card:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow); }
.param-card .param-icon { font-size:2.2rem; margin-bottom:0.75rem; }
.param-card h3 { font-family:'Outfit',sans-serif; font-weight:700; color:var(--navy); font-size:1rem; margin-bottom:0.4rem; }
.param-card p { font-size:0.83rem; color:var(--gray-500); }

/* CONTACT */
.contact { background:var(--gray-50); }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; margin-top:3rem; }
.contact-info h3 { font-family:'Outfit',sans-serif; font-weight:800; color:var(--navy); margin-bottom:1.5rem; }
.contact-item { display:flex; gap:1rem; margin-bottom:1.25rem; align-items:flex-start; }
.ci-icon {
  width:42px; height:42px; min-width:42px; border-radius:12px;
  background:var(--sky-pale); color:var(--sky); display:flex; align-items:center;
  justify-content:center; font-size:1.1rem;
}
.ci-text { font-size:0.9rem; color:var(--gray-700); line-height:1.6; }
.ci-text strong { display:block; font-weight:700; color:var(--navy); font-size:0.85rem; }

.contact-form { background:white; border-radius:var(--radius); padding:2.5rem; box-shadow:var(--shadow); }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-weight:700; font-size:0.85rem; color:var(--navy); margin-bottom:0.5rem; }
.form-group input, .form-group textarea {
  width:100%; padding:12px 16px; border-radius:var(--radius-sm);
  border:1.5px solid var(--gray-200); font-family:'Nunito',sans-serif;
  font-size:0.92rem; color:var(--gray-700); transition:border-color 0.2s;
  background:var(--gray-50);
}
.form-group input:focus, .form-group textarea:focus {
  outline:none; border-color:var(--sky); background:white;
}
.form-group textarea { height:120px; resize:vertical; }

/* FOOTER */
footer {
  background:var(--navy); color:rgba(255,255,255,0.85); padding:3rem 2rem 1.5rem;
}
.footer-inner { max-width:1100px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }
.footer-brand .brand-name { font-family:'Outfit',sans-serif; font-weight:800; font-size:1.3rem; color:white; margin-bottom:0.5rem; }
.footer-brand p { font-size:0.85rem; line-height:1.7; color:rgba(255,255,255,0.65); margin-top:0.75rem; }
.footer-col h4 { font-weight:800; font-size:0.9rem; color:white; margin-bottom:1rem; letter-spacing:0.5px; }
.footer-col a { display:block; color:rgba(255,255,255,0.65); text-decoration:none; font-size:0.85rem; margin-bottom:0.5rem; transition:color 0.2s; }
.footer-col a:hover { color:var(--orange-light); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.12); padding-top:1.5rem; text-align:center; font-size:0.82rem; color:rgba(255,255,255,0.45); }
.imd-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  border-radius:20px; padding:4px 12px; font-size:0.78rem; color:rgba(255,255,255,0.7);
  margin-top:0.75rem;
}

/* RESPONSIVE */
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; gap:2rem; }
  .highlights-grid { grid-template-columns:repeat(2,1fr); }
  .cards-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .params-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; flex-direction:column; position:fixed; top:68px; left:0; right:0; background:white; padding:1rem; box-shadow:var(--shadow-lg); }
  .nav-links.open { display:flex; }
  .hamburger { display:flex; }
}
@media(max-width:600px) {
  .highlights-grid { grid-template-columns:1fr 1fr; }
  .params-grid { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:2rem; }
  .section { padding:60px 1.25rem; }
  .flow-steps { flex-direction:column; }
  .flow-arrow { transform:rotate(90deg); }
}