:root{
    --bg: #0F1223;
    --surface: #14172B;
    --muted: #9aa3b2;
    --text: #E9ECF5;
    --accent: #63FFD0;
    --accent-2: #7A8BFF;
    --border: rgba(255,255,255,0.12);
    --radius: 14px;
    --maxw: 1080px;
    --shadow: 0 10px 30px rgba(0,0,0,0.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background: radial-gradient(1200px 600px at 70% -10%, rgba(99,255,208,0.15), rgba(0,0,0,0)) , var(--bg);
    color:var(--text);
    line-height:1.55;
}

.container{ width: min(100% - 32px, var(--maxw)); margin-inline:auto; }

header{
    position:sticky; top:0; z-index:10;
    backdrop-filter: blur(10px);
    background: rgba(15,18,35,0.6);
    border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.logo{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#0A0C18; font-weight:800; font-size:24px; letter-spacing:1px;
    box-shadow: var(--shadow);
    user-select:none;
}
.brand{
    display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
}
.brand-name{ font-weight:700; letter-spacing:0.4px; }
.brand-tag{ color:var(--muted); font-size:14px; }

nav ul{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
nav a{
    color:var(--text); text-decoration:none; padding:10px 12px; border-radius:10px;
    border:1px solid transparent;
}
nav a:hover{ border-color:var(--border); background:rgba(255,255,255,0.04); }

.hero{ padding:72px 0 40px; }
.badge{
    display:inline-block; padding:6px 10px; border:1px solid var(--border);
    border-radius:999px; color:var(--muted); font-size:12px; letter-spacing:0.3px;
}
.hero h1{ font-size: clamp(28px, 4vw, 44px); line-height:1.15; margin:14px 0 10px; }
.hero p.lead{ color:var(--muted); font-size: clamp(16px, 2.2vw, 18px); max-width:780px; }

.actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.btn{
    display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none;
    border:1px solid var(--border); color:var(--text);
}
.btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0A0C18; border-color:transparent; font-weight:700; }
.btn.secondary{ background:rgba(255,255,255,0.04); }
.btn:hover{ transform: translateY(-1px); }

section{ padding:56px 0; border-top:1px solid var(--border); }
section:first-of-type{ border-top:none; }
section h2{ font-size: clamp(22px, 3.2vw, 30px); margin:0 0 12px; }
section p{ margin:0; }
.section-lead{ color:var(--muted); margin-bottom:22px; }

.grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap:16px;
}
.grid > .card{ grid-column: span 6; }
@media (max-width: 800px){
    .grid > .card{ grid-column: span 12; }
}
.card{
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:18px;
    box-shadow: var(--shadow);
}
.card h3{ margin:0 0 6px; font-size:18px; }
.card p{ color:var(--muted); }

.partner-list{ display:flex; flex-direction:column; gap:14px; }
.partner-item{ padding:16px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.03); }
.partner-header{ display:flex; gap:10px; align-items:center; margin-bottom:6px; }
.partner-header .tag{
    padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px;
}

.contact-wrap{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap:20px; align-items:start; }
@media (max-width: 900px){ .contact-wrap{ grid-template-columns: 1fr; } }
.contact-card{ padding:20px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.03); }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.contact-list a{ color:var(--text); text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }

form .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
input, textarea{
    width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:rgba(255,255,255,0.04); color:var(--text); font: inherit;
}
textarea{ min-height:120px; resize:vertical; }
button[type="submit"]{ cursor:pointer; }

footer{ padding:34px 0; border-top:1px solid var(--border); color:var(--muted); }
footer .row{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
footer a{ color:var(--muted); text-decoration:none; }
footer a:hover{ text-decoration:underline; }

@media (max-width: 700px){
    .header-inner{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
    }
    nav ul{
        flex-wrap: wrap;
        gap: 8px;
    }
    nav a{
        padding: 8px 10px;
        font-size: 14px;
    }

    .hero{
        padding: 50px 0 30px;
        text-align: center;
    }
    .hero p.lead{ margin-inline:auto; }
    .actions{ justify-content:center; }

    section{ padding:40px 0; }
    section h2{ font-size:20px; }
    .card{ padding:14px; }
    .partner-item{ padding:12px; }
    .contact-wrap{ grid-template-columns: 1fr; }
    .contact-card{ padding:16px; }
    form .field input, form .field textarea{ font-size:15px; }
    footer .row{ flex-direction: column; align-items:flex-start; gap:8px; }
}