/* Premium dark theme */
:root{
  --bg:#0b111b;
  --card:#0f1726;
  --text:#e9eef7;
  --muted: #ffffff;
  --brand:#00BFA5;
  --border:#20304a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.6}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 1.2rem}
.site-header{position:sticky;top:0;z-index:50;background: #282732}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo a{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--text)}
.logo img{height:36px}
.site-nav{display:flex;gap:1rem}
.site-nav a{padding:.55rem .8rem;border-radius:.6rem;color:var(--muted)}
.site-nav a.active,.site-nav a:hover{background:var(--card);color:var(--text);border:1px solid var(--border)}
.hamburger{display:none;flex-direction:column;gap:4px;background:transparent;border:0}
.hamburger span{width:22px;height:2px;background:var(--text);display:block}

.hero{background:radial-gradient(60% 80% at 70% 10%, rgba(0,191,165,.15), transparent 60%),linear-gradient(180deg,#0b111b 0%, #0f1726 100%);padding:5rem 0 3rem;border-bottom:1px solid var(--border)}
.hero h1{font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:2.2rem;margin:.2rem 0 1rem}
.hero p{color:var(--muted);max-width:700px}
.cta{display:flex;gap:.8rem;margin-top:1.2rem}
.btn{display:inline-block;background:var(--brand);color:#04121a;padding:.8rem 1.1rem;border-radius:.8rem;font-weight:700}
.btn.outline{background:transparent;border:1px solid var(--brand);color:var(--brand)}

.section{padding:2.6rem 0}
.section h2{font-family:Poppins,Inter,sans-serif;font-size:1.6rem;margin:.2rem 0 1rem}
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem;transition:transform .2s ease}
.card:hover{transform:translateY(-2px)}
.card h3{margin:.2rem 0 .6rem;font-size:1.1rem}

.features-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:.35rem .6rem;color:var(--muted);margin:.25rem .35rem 0 0}

.form input,.form textarea{width:100%;padding:.8rem;background:#0b1422;border:1px solid var(--border);border-radius:.6rem;color:var(--text)}
.form label{display:block;margin:.6rem 0 .25rem;color:var(--muted)}
.form button{margin-top:.8rem}

.site-footer{border-top:1px solid var(--border);background:#0b111b;padding:2rem 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.footer-nav{display:flex;flex-direction:column;gap:.4rem}
.footer-note{grid-column:1/-1;margin-top:.6rem;color:var(--muted)}

@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .site-nav{display:none;position:absolute;top:64px;right:16px;background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:.6rem;flex-direction:column}
  .hamburger{display:flex}
}
/* Page Header */
/* Page Header */
.page-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    padding: 5rem 0 4rem;
    text-align: center;
}

.page-header h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* References Section */
.section-references {
    padding: 4rem 0;
    background: #f8fafc;
}

.references-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

/* Reference Card */
.reference-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.reference-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.reference-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.reference-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.reference-card:hover .reference-image img {
    transform: scale(1.05);
}

.reference-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.reference-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #1a202c;
    line-height: 1.3;
}

.reference-content p {
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* CTA Section */
.section-cta {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    padding: 5rem 0;
}

.cta-box {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-box h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-box p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background: white;
    color: #667eea;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.btn-lg {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem;
    }

    .page-header {
        padding: 3rem 0 2rem;
    }

    .references-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .section-references {
        padding: 2rem 0;
    }

    .reference-content {
        padding: 1.5rem;
    }

    .cta-box h2 {
        font-size: 1.75rem;
    }

    .section-cta {
        padding: 3rem 0;
    }
}

@media (max-width: 480px) {
    .reference-image {
        height: 200px;
    }

    .reference-content h3 {
        font-size: 1.25rem;
    }
}