.intro-page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    color: #eaf4ff;
    background:
        radial-gradient(circle at 12% 20%, rgba(20, 148, 211, 0.45) 0%, rgba(20, 148, 211, 0) 35%),
        radial-gradient(circle at 90% 10%, rgba(86, 115, 255, 0.2) 0%, rgba(86, 115, 255, 0) 40%),
        linear-gradient(145deg, #0a1024 0%, #111b3d 44%, #142757 100%);
}

.intro-grid {
    position: relative;
    max-width: 1360px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 3rem;
    padding: 4rem 0;
}

.intro-copy h1 {
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 1rem 0;
}

.intro-copy p {
    max-width: 560px;
    font-size: 1.25rem;
    color: rgba(231, 241, 255, 0.82);
}

.intro-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(132, 177, 255, 0.4);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    color: #cde6ff;
    background: rgba(27, 45, 90, 0.4);
}

.intro-actions {
    display: flex;
    gap: 14px;
    margin-top: 2rem;
}

.intro-actions .btn-outline {
    border-color: rgba(174, 212, 255, 0.5);
    color: #eaf4ff;
    background: rgba(27, 45, 90, 0.34);
}

.intro-visual {
    padding: 28px;
    border: 1px solid rgba(132, 177, 255, 0.3);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(33, 55, 109, 0.75), rgba(17, 30, 62, 0.5));
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
}

.intro-logo {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    padding: 6px;
    background: rgba(240, 248, 255, 0.12);
    margin-bottom: 20px;
}

.code-window {
    border: 1px solid rgba(184, 213, 255, 0.28);
    background: rgba(7, 14, 30, 0.56);
    border-radius: 16px;
    overflow: hidden;
}

.code-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(184, 213, 255, 0.2);
}

.code-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fd5f57;
}
.code-dot:nth-child(2) { background: #fdbb2d; }
.code-dot:nth-child(3) { background: #29c841; }

.code-body {
    padding: 16px;
    font-family: var(--font-mono);
    color: #b8ceff;
    line-height: 1.8;
    font-size: 0.8rem;
    overflow-x: auto;
}

.code-body > div {
    min-width: max-content;
}

@media (max-width: 960px) {
    .intro-grid { grid-template-columns: 1fr; padding: 2.5rem 0; }
    .intro-visual { order: -1; }
}

@media (max-width: 640px) {
    .intro-actions { flex-direction: column; }
}