:root{
  --primary:#0b79d0;
  --primary-dark:#085aa3;
  --accent:#ffc107;
  --bg:#000000;
  --surface:#0a0a0a;
  --border:#1a1a1a;
  --text-primary:#f8fafc;
  --text-secondary:#cbd5e1;
  --text-muted:#94a3b8;
  --success:#10b981;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0;height:100%}

body{
  font-family:'Inter',system-ui,'Segoe UI',Arial,sans-serif;
  background:var(--bg);
  color:var(--text-primary);
  line-height:1.6;
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* Header & Navigation */
.site-header{
  background:rgba(0,0,0,0.98);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:1000;
}

.header-container{
  max-width:1200px;
  margin:0 auto;
  padding:12px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.logo-section{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{height:48px;width:auto}

.logo-text{font-size:20px;font-weight:bold;color:var(--text-primary)}

nav{display:flex;gap:32px;align-items:center}

nav a{
  color:var(--text-secondary);
  font-size:16px;
  font-weight:600;
  transition:color 0.2s;
}

nav a:hover,nav a.active{
  color:var(--accent);
  text-decoration:none;
}

.nav-divider{
  width:1px;
  height:24px;
  background:var(--border);
}

.contact-quick{
  display:flex;
  gap:16px;
  align-items:center;
}

.contact-quick a{
  font-size:16px;
  font-weight:600;
  color:var(--text-secondary);
  transition:color 0.2s;
}

.contact-quick a:hover{color:var(--accent);text-decoration:none}

/* Container */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 28px;
}

/* Hero Section */
.hero{
  min-height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(11,121,208,0.15) 0%, rgba(16,185,129,0.08) 100%);
  border-bottom:1px solid var(--border);
  padding:60px 28px;
  text-align:center;
}

.hero-content h1{
  font-size:56px;
  margin:0 0 16px 0;
  color:var(--text-primary);
  line-height:1.2;
}

.hero-content .tagline{
  font-size:20px;
  color:var(--text-secondary);
  margin-bottom:24px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}

.cta-button{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:14px 32px;
  border-radius:8px;
  font-weight:600;
  transition:all 0.2s;
  margin-top:16px;
}

.cta-button:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(11,121,208,0.3);
  text-decoration:none;
}

/* Page Sections */
.page-section{
  padding:60px 28px;
  border-bottom:1px solid var(--border);
}

.page-section h2{
  font-size:36px;
  margin-top:0;
  margin-bottom:32px;
  color:var(--text-primary);
}

.section-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
  margin-top:24px;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  transition:all 0.2s;
}

.card:hover{
  border-color:var(--primary);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(11,121,208,0.15);
}

.card h3{
  font-size:18px;
  margin-top:0;
  margin-bottom:12px;
  color:var(--text-primary);
}

.card p{
  color:var(--text-muted);
  margin:0;
}

/* Form Styles */
form{
  max-width:600px;
  margin:0 auto;
}

.form-group{
  margin-bottom:24px;
}

label{
  display:block;
  margin-bottom:8px;
  font-weight:500;
  color:var(--text-primary);
}

input,textarea,select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-primary);
  font-size:14px;
  font-family:inherit;
  transition:border-color 0.2s;
}

input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(11,121,208,0.1);
}

textarea{
  resize:vertical;
  min-height:120px;
}

button{
  background:var(--primary);
  color:#fff;
  padding:14px 32px;
  border:none;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:all 0.2s;
  width:100%;
}

button:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

button:active{
  transform:translateY(0);
}

.form-message{
  margin-top:16px;
  padding:12px 16px;
  border-radius:8px;
  text-align:center;
  font-size:14px;
  display:none;
}

.form-message.show{display:block}
.form-message.success{background:rgba(16,185,129,0.1);color:var(--success)}
.form-message.error{background:rgba(239,68,68,0.1);color:#ef4444}

/* Info Section */
.info-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  margin-bottom:24px;
}

.info-box h3{
  margin-top:0;
  color:var(--text-primary);
}

.info-box p{
  color:var(--text-secondary);
  margin:8px 0;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  margin-top:24px;
}

.info-item{
  display:flex;
  gap:16px;
}

.info-item-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  background:rgba(11,121,208,0.1);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}

.info-item-content h4{
  margin:0 0 4px 0;
  color:var(--text-primary);
}

.info-item-content p{
  margin:0;
  color:var(--text-muted);
}

/* Footer */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:40px 28px 20px;
  margin-top:60px;
}

.footer-content{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
  margin-bottom:24px;
}

.footer-column h4{
  color:var(--text-primary);
  margin-top:0;
}

.footer-column p{
  color:var(--text-muted);
  font-size:14px;
}

.footer-column ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-column li{
  margin-bottom:8px;
}

.footer-column a{
  color:var(--text-muted);
  font-size:14px;
  transition:color 0.2s;
}

.footer-column a:hover{
  color:var(--accent);
}

.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:16px;
  text-align:center;
  color:var(--text-muted);
  font-size:13px;
}

/* Responsive */
@media(max-width:768px){
  .header-container{flex-direction:column;gap:12px;padding:10px 20px}
  nav{gap:16px;flex-wrap:wrap;justify-content:center}
  .contact-quick{flex-direction:column;gap:6px}
  .hero{min-height:350px;padding:30px 20px}
  .hero-content h1{font-size:32px;margin-bottom:12px}
  .hero-content .tagline{font-size:16px;margin-bottom:20px}
  .page-section{padding:30px 20px}
  .page-section h2{font-size:24px;margin-bottom:24px}
  .section-grid{gap:16px}
}