:root {
            --brand: #ff8c1a;
            --brand-2: #ffb347;
            --ink: #f2f2f2;
            --paper: #0e0d0d;
            --card: #1a1614;
            --muted: #c9c9c9;
            --good: #39d353;
            --bad: #ff4d4f;
            --accent: #ffd166;
        }
        * { box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        }
        .nav {
            position: fixed;
            inset-inline: 0;
            top: 0;
            z-index: 50;
            backdrop-filter: saturate(140%) blur(8px);
            background: rgba(14, 13, 13, .75);
            border-bottom: 1px solid #2a2522;
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .nav-row { display: flex; align-items: center; gap: 18px; padding: 14px 0; }
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Chakra Petch', monospace;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
        }
        .logo-mark { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #ff7a18, #af002d 60%); box-shadow: 0 0 0 2px #000 inset; }
        .spacer { flex: 1; }
        .nav a { color: var(--ink); text-decoration: none; opacity: .9; }
        .nav a:hover { opacity: 1; }
        .btn { cursor: pointer; border: 0; padding: 10px 16px; border-radius: 12px; font-weight: 600; }
        .btn-ghost { background: #00000040; color: #fff; border: 1px solid #2a2522; }
        .btn-cta { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #2d1600; box-shadow: 0 8px 24px #00000060; }
        /* HERO */
        .hero {
            position: relative;
            min-height: 92vh;
            display: grid;
            place-items: center;
            text-align: center;
            overflow: hidden;
        }
        .hero-bg {
            position: absolute;
            inset: 0;
            background: radial-gradient(1200px 600px at 70% 20%, #ffffff10, transparent 60%), linear-gradient(180deg, #1f170f 0%, #0e0d0d 55%);
        }
        .hero-img {
            position: absolute;
            inset: 0;
            background: url('https://images.unsplash.com/photo-1610544559709-74bb5f4a94f4?q=80&w=1880&auto=format&fit=crop') center/cover no-repeat;
            filter: brightness(.6);
        }
        .hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, #0e0d0d88, #0e0d0d 70%); }
        .hero-content { position: relative; padding: 120px 20px 60px; }
        h1.title { font-family: 'Chakra Petch', monospace; font-size: clamp(36px, 6vw, 64px); margin: 10px 0 6px; }
        .subtitle { opacity: .9; max-width: 720px; margin: 0 auto; }
        .ip-box { margin: 28px auto 0; background: var(--card); border: 1px solid #2a2522; border-radius: 16px; padding: 14px; max-width: 560px; display: flex; gap: 10px; align-items: center; }
        .ip { flex: 1; padding: 12px 14px; background: #0a0908; border-radius: 10px; border: 1px dashed #3a322e; font-family: 'Chakra Petch', monospace; }
        /* STATS */
        .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px auto 0; max-width: 720px; }
        .stat { background: #00000045; border: 1px solid #312824; padding: 14px; border-radius: 12px; font-family: 'Chakra Petch', monospace; }
        .kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .8; }
        .big { font-size: 28px; font-weight: 700; }
        /* WHY / CARDS */
        section { padding: 72px 20px; }
        .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
        .card { background: var(--card); border: 1px solid #2a2522; border-radius: 16px; padding: 18px; }
        .card h3 { margin: 8px 0 6px; font-family: 'Chakra Petch', monospace; }
        .muted { color: var(--muted); }
        /* QADIRDONLAR */
        .grid-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
        .person { background: #120f0e; border: 1px solid #2a2522; border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease; }
        .person:hover { transform: translateY(-5px); }
        .person img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
        .person .meta { padding: 12px 14px; }
        .badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #00000050; border: 1px solid #2a2522; font-size: 12px; }
        /* FORM */
        .form-wrap { max-width: 900px; margin: 0 auto; }
        form { background: var(--card); border: 1px solid #2a2522; border-radius: 20px; padding: 22px; }
        .row { display: grid; gap: 14px; }
        @media (min-width: 720px) { .row.two { grid-template-columns: 1fr 1fr; } }
        label { display: block; font-weight: 600; margin: 8px 0 6px; }
        input[type="text"], input[type="date"], input[type="tel"], textarea, input[type="url"], input[type="file"] {
            width: 100%;
            padding: 12px 14px;
            border-radius: 12px;
            background: #0a0908;
            border: 1px solid #3a322e;
            color: var(--ink);
        }
        textarea { min-height: 110px; resize: vertical; }
        input::placeholder, textarea::placeholder { color: #8d817a; }
        input[type="file"] { color: #b9b0aa; }
        .hint { font-size: 12px; color: #b9b0aa; }
        .danger { color: var(--bad); }
        .success { color: var(--good); }
        .footer { padding: 40px 20px; border-top: 1px solid #2a2522; background: #0b0a0a; color: #b9b0aa; }
        .center { text-align: center; }
        /* Modal */
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 100; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; }
        .modal-content { background: var(--card); border-radius: 16px; padding: 20px; max-width: 600px; width: 90%; animation: slideIn 0.3s ease; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .modal-title { font-family: 'Chakra Petch', monospace; font-size: 24px; }
        .modal-close { cursor: pointer; font-size: 24px; }
        .modal-links { display: flex; gap: 10px; margin-top: 16px; }
        .modal-links a { color: var(--brand); text-decoration: none; font-weight: 600; }
        .modal-links a:hover { text-decoration: underline; }
        /* Animatsiya */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .fade-in { animation: fadeIn 0.5s ease-in-out; }
        /* Rollar modal */
        .roles-modal { max-height: 70vh; cursor: pointer; overflow-y: auto; padding-right: 10px; }
        .roles-modal::-webkit-scrollbar { width: 6px; cursor: pointer; }
        .roles-modal::-webkit-scrollbar-thumb { background: var(--brand); cursor: pointer; border-radius: 3px; }
        .role-item { margin-bottom: 16px; cursor: pointer; padding-bottom: 16px; border-bottom: 1px solid #2a2522; }
        .role-title { font-family: 'Chakra Petch', monospace; cursor: pointer; font-weight: 700; color: var(--brand); }
        .role-desc { margin-top: 8px; color: var(--muted); cursor: pointer; }