/* Reset and Base Styles */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --accent:#d63031;
  --ink:#0f172a;
  --slate:#334155;
  --muted:#64748b;
  --bg:#f5f7fb;
  --card:#ffffff;
  --navy1:#0b1f3b;
  --navy2:#163a5f;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  line-height:1.6;
  color:var(--ink);
  background-color:var(--bg);
}

/* Navigation */
.navbar{
  background-color:var(--card);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  position:sticky;
  top:0;
  z-index:1000;
}

.nav-container{
  max-width:1200px;
  margin:0 auto;
  padding:1rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
}

.logo img{height:60px;width:auto}

.nav-links{display:flex;list-style:none;gap:.75rem;flex-wrap:wrap}

.nav-links a{
  text-decoration:none;
  color:var(--slate);
  font-weight:600;
  font-size:1.05rem;
  transition:all .25s ease;
  padding:.55rem .9rem;
  border-radius:10px;
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--ink);
  background-color:#eef2ff;
}

/* Hero Section */
.hero-section{
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem 1.5rem;
  background:linear-gradient(135deg,var(--navy1) 0%, var(--navy2) 100%);
  position:relative;
}

.hero-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('data:image/svg+xml,<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"><rect width="120" height="120" fill="none"/><path d="M0 60H120M60 0V120" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></svg>');
  opacity:.55;
}

.content-container{
  text-align:center;
  color:#fff;
  max-width:860px;
  position:relative;
  z-index:1;
}

.coming-soon-title{
  font-size:3.6rem;
  font-weight:800;
  margin-bottom:.75rem;
  letter-spacing:-.02em;
  animation:fadeInUp 1s ease;
}

.subtitle{
  font-size:1.35rem;
  margin-bottom:1rem;
  opacity:.95;
  animation:fadeInUp 1.15s ease;
}

.description{
  font-size:1.1rem;
  margin:0 auto 2rem;
  opacity:.92;
  line-height:1.85;
  max-width:780px;
  animation:fadeInUp 1.3s ease;
}

.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeInUp 1.45s ease}

.btn{
  display:inline-block;
  padding:.95rem 2.15rem;
  border-radius:999px;
  font-size:1.05rem;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-primary{background-color:var(--accent);color:#fff;box-shadow:0 10px 25px rgba(214,48,49,.32)}
.btn-primary:hover{background-color:#c0232a;transform:translateY(-2px);box-shadow:0 14px 30px rgba(214,48,49,.42)}

.btn-secondary{background-color:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
.btn-secondary:hover{border-color:rgba(255,255,255,.65);transform:translateY(-2px)}

@keyframes fadeInUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* Page Container */
.page-container{max-width:980px;margin:0 auto;padding:3rem 1.5rem;min-height:calc(100vh - 120px)}

.page-header{text-align:center;margin-bottom:2rem}
.page-header h1{font-size:2.6rem;margin-bottom:.35rem;color:var(--ink)}
.page-header p{color:var(--muted);font-size:1.15rem}

/* Blog */
.blog-articles{display:flex;flex-direction:column;gap:2.25rem}

.blog-card{
  background:var(--card);
  border-radius:16px;
  padding:2.25rem;
  box-shadow:0 8px 28px rgba(2,6,23,.08);
  border:1px solid rgba(15,23,42,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}

.blog-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(2,6,23,.12)}

.article-header{border-bottom:1px solid rgba(15,23,42,.08);padding-bottom:1rem;margin-bottom:1.25rem}
.article-header h2{font-size:1.75rem;line-height:1.25;margin-bottom:.35rem}
.date{color:var(--muted);font-size:.92rem;font-style:italic}
.article-content h3{color:var(--accent);font-size:1.22rem;margin-top:1.4rem;margin-bottom:.65rem}
.article-content p{margin-bottom:1.1rem;color:#475569;font-size:1.04rem;line-height:1.85}

/* Contact */
.card{background:var(--card);border-radius:16px;padding:2rem;box-shadow:0 10px 30px rgba(2,6,23,.08);border:1px solid rgba(15,23,42,.06)}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.form-grid .full{grid-column:1/-1}

label{display:block;font-weight:700;color:#1f2937;margin-bottom:.35rem}

input,textarea,select{width:100%;border:1px solid rgba(15,23,42,.14);border-radius:12px;padding:.85rem .95rem;font-size:1rem;outline:none;background:#fff;transition:border-color .2s ease, box-shadow .2s ease}

input:focus,textarea:focus,select:focus{border-color:rgba(214,48,49,.7);box-shadow:0 0 0 4px rgba(214,48,49,.14)}
textarea{min-height:160px;resize:vertical}
.help-text{color:var(--muted);font-size:.95rem;margin-top:.75rem}

/* Footer */
footer{background-color:#0b1220;color:#e2e8f0;text-align:center;padding:2rem 1.5rem;margin-top:3rem}
footer p{margin:0;opacity:.95}

/* Responsive */
@media (max-width:768px){
  .nav-container{flex-direction:column;align-items:center}
  .logo img{height:54px}
  .coming-soon-title{font-size:2.6rem}
  .subtitle{font-size:1.15rem}
  .description{font-size:1rem}
  .page-header h1{font-size:2rem}
  .blog-card{padding:1.5rem}
  .article-header h2{font-size:1.35rem}
  .form-grid{grid-template-columns:1fr}
}