/* AI-slöjd — Premium 46elks × Craft theme
   "Someone paid way too much for this frontend"
   Based on 46elks.se design system + Swedish craft warmth */

:root {
    /* 46elks palette */
    --elk-50: #f5f5fc;
    --elk-100: #efeefc;
    --elk-200: #cfcbf6;
    --elk-500: #4C54DF;
    --elk-600: #4148dd;
    --elk-700: #2426c7;
    --elk-900: #161265;
    --elk-950: #110D45;

    /* Craft warmth */
    --warm: #e8a44a;
    --warm-soft: #fdf4e7;
    --warm-dim: #c4893a;

    /* Functional */
    --green: #50C49E;
    --green-soft: #edf9f4;
    --red: #fb728c;
    --red-soft: #fef2f4;

    /* Surfaces */
    --bg: #fafafd;
    --bg-white: #ffffff;
    --bg-subtle: #f3f2fa;
    --bg-code: #1e1e2e;

    /* Text */
    --text: #242424;
    --text-secondary: #5c5c6d;
    --text-tertiary: #9898a8;
    --text-inverse: #ffffff;

    /* Borders */
    --border: #e8e8f0;
    --border-strong: #cfcbf6;
    --border-hover: var(--elk-500);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(17, 13, 69, 0.04);
    --shadow-md: 0 4px 12px rgba(17, 13, 69, 0.06), 0 1px 3px rgba(17, 13, 69, 0.04);
    --shadow-lg: 0 12px 40px rgba(17, 13, 69, 0.08), 0 4px 12px rgba(17, 13, 69, 0.04);
    --shadow-xl: 0 24px 64px rgba(17, 13, 69, 0.1), 0 8px 20px rgba(17, 13, 69, 0.05);
    --shadow-glow: 0 0 0 1px rgba(76, 84, 223, 0.1), 0 4px 16px rgba(76, 84, 223, 0.12);

    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Lato', 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
    color: var(--elk-950);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

code, pre {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

a {
    color: var(--elk-500);
    text-decoration: none;
    transition: color .15s;
}
a:hover {
    color: var(--elk-700);
    text-decoration: underline;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ═══════════════════════════════════════
   NAV — Floating glass bar
   ═══════════════════════════════════════ */
.nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    padding: .75rem 2rem;
}
.nav-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(207, 203, 246, 0.4);
    border-radius: 100px;
    padding: 0 1.5rem;
    box-shadow: 0 2px 20px rgba(17, 13, 69, 0.06);
    transition: box-shadow .3s;
}
.logo {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--elk-950);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.logo:hover { text-decoration: none; color: var(--elk-950); }
.logo-dot { color: var(--elk-500); }
.nav-links { display: flex; gap: 1.25rem; font-size: .82rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 400;
    transition: color .15s;
    padding: .25rem 0;
}
.nav-links a:hover { color: var(--elk-500); text-decoration: none; }

/* ═══════════════════════════════════════
   HERO — Big, bold, expensive-looking
   ═══════════════════════════════════════ */
.hero {
    padding: 11rem 2rem 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, var(--elk-50) 100%);
}
/* Decorative gradient orbs */
.hero::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(76, 84, 223, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -10%; left: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(232, 164, 74, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1.1rem .4rem .8rem;
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--elk-500);
    margin-bottom: 2rem;
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
    letter-spacing: .01em;
}
.badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px rgba(80, 196, 158, 0.5);
    flex-shrink: 0;
}

.hero h1 {
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}
.highlight {
    background: linear-gradient(135deg, var(--elk-500) 0%, #7c6aed 50%, var(--warm) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    min-width: 5.5ch;
}
.hero-sub {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
.hero-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════
   BUTTONS — Polished, satisfying clicks
   ═══════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    font-family: inherit;
    letter-spacing: -0.01em;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--elk-500);
    color: var(--text-inverse);
    border-color: var(--elk-500);
    box-shadow: 0 2px 8px rgba(76, 84, 223, 0.25), 0 1px 2px rgba(76, 84, 223, 0.15);
}
.btn-primary:hover {
    background: var(--elk-600);
    border-color: var(--elk-600);
    box-shadow: 0 4px 16px rgba(76, 84, 223, 0.3), 0 2px 4px rgba(76, 84, 223, 0.15);
    color: var(--text-inverse);
}

.btn-outline {
    background: var(--bg-white);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.btn-outline:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    color: var(--elk-500);
}

.btn-full { width: 100%; }
.btn-sm { padding: .45rem 1rem; font-size: .8rem; border-radius: 8px; }
.btn-link { background:none; border:none; color:var(--elk-500); font-size:inherit; cursor:pointer; text-decoration:underline; padding:0; }
.btn-link:hover { color:var(--elk-700); }

/* ═══════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════ */
.section {
    padding: 5rem 2rem;
    position: relative;
}
.section-dark {
    background: var(--elk-50);
}
.section h2 {
    font-size: 2rem;
    margin-bottom: .5rem;
}
.section-sub {
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 560px;
    font-size: 1.05rem;
}

/* ═══════════════════════════════════════
   GRID
   ═══════════════════════════════════════ */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* ═══════════════════════════════════════
   CARDS — Elevated, interactive
   ═══════════════════════════════════════ */
.card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    position: relative;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-sm);
}
.card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--elk-100);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--elk-500);
    margin-bottom: 1rem;
}
.card h3 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
}
.card p {
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: .75rem;
}
.card-install code {
    display: block;
    background: var(--bg-code);
    padding: .6rem .85rem;
    border-radius: 8px;
    font-size: .75rem;
    color: var(--green);
    overflow-x: auto;
}
.card-tag {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--elk-500);
    background: var(--elk-100);
    padding: .2rem .6rem;
    border-radius: 6px;
}

/* ═══════════════════════════════════════
   TIP BOX
   ═══════════════════════════════════════ */
.tip-box {
    background: var(--warm-soft);
    border: 1px solid rgba(232, 164, 74, 0.2);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    font-size: .9rem;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
}
.tip-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--warm);
}
.tip-box strong { color: var(--warm-dim); }
.tip-box code {
    background: rgba(232, 164, 74, 0.12);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: .8rem;
    color: var(--warm-dim);
}

/* ═══════════════════════════════════════
   PROVISION BOX — The star of the show
   ═══════════════════════════════════════ */
.provision-box {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    max-width: 520px;
    margin: 0 auto 3rem;
    position: relative;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.provision-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--elk-500), #7c6aed, var(--warm), var(--green));
}

.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--elk-950);
}
.form-group input,
.form-group textarea {
    width: 100%;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: .75rem 1rem;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
    outline: none;
    transition: all .2s;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--elk-500);
    box-shadow: 0 0 0 4px rgba(76, 84, 223, 0.08);
    background: var(--bg-white);
}
.form-group small {
    display: block;
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--text-tertiary);
}
.form-group small code {
    background: var(--elk-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .7rem;
    color: var(--elk-500);
}

.error-msg {
    margin-top: .75rem;
    padding: .65rem 1rem;
    background: var(--red-soft);
    border: 1px solid rgba(251, 114, 140, 0.25);
    border-radius: 10px;
    color: var(--red);
    font-size: .85rem;
    font-weight: 500;
}

/* ═══════════════════════════════════════
   VERIFY
   ═══════════════════════════════════════ */
.verify-info { text-align: center; margin-bottom: 1.5rem; }
.verify-info p { color: var(--text-secondary); font-size: .9rem; margin-bottom: .75rem; }
.code-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--elk-500);
    letter-spacing: .35em;
    margin: 1.5rem 0;
}

/* ═══════════════════════════════════════
   STATUS & SPINNER
   ═══════════════════════════════════════ */
.status-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem 0;
    color: var(--text-secondary);
    font-size: .9rem;
}
.spinner {
    width: 20px; height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--elk-500);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   PROVISIONING TIMELINE
   ═══════════════════════════════════════ */
.prov-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}
.prov-header h3 {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--elk-950);
}
.prov-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
    font-weight: 600;
    color: var(--elk-500);
    background: var(--elk-100);
    padding: .3rem .75rem;
    border-radius: 8px;
    letter-spacing: .04em;
}

.timeline {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}
/* Vertical connector line */
.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--border);
}

.tl-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.5rem;
}
.tl-step:last-child { padding-bottom: 0; }

.tl-icon {
    position: absolute;
    left: -2rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.tl-icon.tl-done {
    background: var(--green);
    color: white;
    box-shadow: 0 0 0 4px var(--green-soft), 0 2px 8px rgba(80, 196, 158, 0.3);
}
.tl-icon.tl-active {
    background: var(--elk-500);
    box-shadow: 0 0 0 4px var(--elk-100), 0 2px 8px rgba(76, 84, 223, 0.3);
    animation: pulse-icon 2s ease-in-out infinite;
}
.tl-icon.tl-pending {
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--text-tertiary);
    font-size: .7rem;
    font-weight: 700;
}

@keyframes pulse-icon {
    0%, 100% { box-shadow: 0 0 0 4px var(--elk-100), 0 2px 8px rgba(76, 84, 223, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(76, 84, 223, 0.08), 0 2px 12px rgba(76, 84, 223, 0.4); }
}

.tl-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.tl-body { padding-top: .25rem; }
.tl-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--elk-950);
    margin-bottom: .15rem;
}
.tl-step.done .tl-title { color: var(--green); }
.tl-step.active .tl-title { color: var(--elk-500); }
.tl-step:not(.done):not(.active) .tl-title { color: var(--text-tertiary); }

.tl-desc {
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.tl-step:not(.done):not(.active) .tl-desc { color: var(--text-tertiary); }

/* Live log */
.prov-log {
    background: var(--bg-code);
    border-radius: 10px;
    padding: .85rem 1.1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    line-height: 1.7;
    max-height: 120px;
    overflow-y: auto;
}
.log-line {
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.log-line.done { color: var(--green); }
.log-line.done::before { content: '✓ '; }
.log-line.active { color: var(--elk-200); }
.log-line.active::before { content: '● '; color: var(--elk-500); }
.log-line.error { color: var(--red); }
.log-line.error::before { content: '✗ '; }

/* ═══════════════════════════════════════
   READY
   ═══════════════════════════════════════ */
.ready-box { text-align: center; }
.ready-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 0 0 8px rgba(80, 196, 158, 0.08);
}
.server-info {
    background: var(--bg);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    border: 1px solid var(--border);
}
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem 0;
}
.info-row span { color: var(--text-secondary); font-size: .85rem; }
.info-row code {
    color: var(--elk-500);
    font-size: .85rem;
    font-weight: 700;
    user-select: all;
}

/* SSH command box */
.ssh-command-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-code);
    border-radius: 10px;
    padding: .9rem 1.25rem;
    margin: 1rem 0;
    cursor: pointer;
    transition: all .2s;
    box-shadow: var(--shadow-sm);
}
.ssh-command-box:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.ssh-command-box code {
    color: var(--green);
    font-size: 1rem;
    font-weight: 700;
    user-select: all;
}
.ssh-copy-hint {
    font-size: .72rem;
    font-family: inherit;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
    padding: .25rem .65rem;
    border-radius: 6px;
    transition: all .15s;
    flex-shrink: 0;
    margin-left: 1rem;
}
.ssh-command-box:hover .ssh-copy-hint {
    color: var(--green);
    background: rgba(80, 196, 158, 0.1);
}

.next-step { font-size: .9rem; color: var(--text-secondary); margin-top: 1.25rem; }

/* ═══════════════════════════════════════
   ERROR
   ═══════════════════════════════════════ */
.error-box { text-align: center; }
.error-box h3 { color: var(--red); margin-bottom: .75rem; }
.error-box p { color: var(--text-secondary); font-size: .9rem; margin-bottom: 1rem; }

/* ═══════════════════════════════════════
   SERVER SPECS
   ═══════════════════════════════════════ */
.server-specs {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    max-width: 520px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm);
}
.server-specs h4 {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1rem;
}
.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.specs-grid div {
    font-size: .82rem;
    color: var(--text-secondary);
    padding: .5rem .7rem;
    background: var(--bg);
    border-radius: 8px;
}
.specs-grid div strong {
    color: var(--elk-950);
}

/* ═══════════════════════════════════════
   STEPS — Numbered guide
   ═══════════════════════════════════════ */
.steps { display: flex; flex-direction: column; gap: 2rem; }
.step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.step-num {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--elk-500);
    font-weight: 900;
    font-size: .9rem;
    color: var(--text-inverse);
    box-shadow: 0 2px 8px rgba(76, 84, 223, 0.2);
}
.step-content { flex: 1; min-width: 0; }
.step-content h4 {
    font-size: 1rem;
    margin-bottom: .6rem;
}
.step-content p {
    font-size: .88rem;
    color: var(--text-secondary);
    margin-top: .5rem;
}
.step-content pre {
    background: var(--bg-code);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--green);
    box-shadow: var(--shadow-sm);
}
.step-content pre code {
    color: inherit;
}

/* Prompt bubbles — "say this to your LLM" */
.prompt-bubble {
    background: var(--elk-100);
    border: 1px solid var(--border-strong);
    border-radius: 14px 14px 14px 4px;
    padding: 1rem 1.25rem;
    margin: .75rem 0;
    font-size: .88rem;
    font-style: italic;
    color: var(--elk-950);
    line-height: 1.6;
    position: relative;
}
.section-dark .prompt-bubble {
    background: rgba(76, 84, 223, 0.08);
    border-color: rgba(76, 84, 223, 0.2);
    color: var(--elk-950);
}

/* ═══════════════════════════════════════
   DASHBOARD (inline on main page)
   ═══════════════════════════════════════ */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    align-items: start;
}
.dash-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}
.dash-card-wide { grid-column: span 1; }
.dash-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--elk-950);
    margin-bottom: 1rem;
}
.status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-dot.green { background: var(--green); box-shadow: 0 0 6px rgba(80, 196, 158, .4); }
.info-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: .4rem .75rem;
    font-size: .85rem;
    margin-bottom: .75rem;
}
.info-grid .label { color: var(--text-secondary); }
.info-grid .value { color: var(--elk-950); font-family: 'JetBrains Mono', monospace; font-size: .8rem; }

.ssh-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-code);
    border-radius: 10px;
    padding: .75rem 1rem;
    cursor: pointer;
    transition: all .2s;
    box-shadow: var(--shadow-sm);
}
.ssh-box:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.ssh-box code { color: var(--green); font-size: .85rem; font-weight: 700; }
.ssh-box .copy-btn {
    font-size: .7rem;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
    padding: .2rem .6rem;
    border-radius: 5px;
    flex-shrink: 0;
    margin-left: .5rem;
}

/* Chat bubbles */
.chat-bubble {
    padding: .8rem 1.1rem;
    border-radius: 12px;
    margin-bottom: .5rem;
    font-size: .85rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.chat-bubble.user {
    background: var(--elk-500);
    color: #fff;
    margin-left: 2rem;
    border-bottom-right-radius: 4px;
}
.chat-bubble.assistant {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    margin-right: 2rem;
    border-bottom-left-radius: 4px;
}
.chat-bubble.tool-call {
    background: var(--elk-100);
    border: 1px solid var(--border-strong);
    margin: .25rem 2rem .25rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    color: var(--elk-500);
}
.chat-bubble.tool-result {
    background: var(--bg-code);
    margin: .25rem 2rem .5rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    color: var(--green);
    max-height: 200px;
    overflow-y: auto;
}
.chat-loading {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-secondary);
    font-size: .8rem;
    padding: .5rem 0;
}
.chat-input {
    flex: 1;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .65rem .85rem;
    color: var(--text);
    font-family: inherit;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s;
}
.chat-input:focus { border-color: var(--elk-500); }

@media (max-width: 768px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   PROMPT CARDS
   ═══════════════════════════════════════ */
.prompt-list { display: flex; flex-direction: column; gap: 1.25rem; }
.prompt-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all .2s;
    box-shadow: var(--shadow-sm);
}
.prompt-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.prompt-card h4 {
    font-size: .95rem;
    margin-bottom: .25rem;
    color: var(--elk-950);
}
.prompt-link {
    display: inline-block;
    font-size: .75rem;
    color: var(--elk-500);
    margin-bottom: .75rem;
    font-weight: 600;
}
.prompt-link:hover { color: var(--elk-700); }
.prompt-card h4 + .prompt-text { margin-top: .75rem; }
.prompt-text {
    position: relative;
    cursor: pointer;
}
.prompt-text pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-size: .8rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.55;
    transition: all .2s;
}
.prompt-text:hover pre {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-glow);
}
.copy-hint {
    position: absolute;
    top: .6rem;
    right: .85rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-white);
    padding: .15rem .5rem;
    border-radius: 5px;
    border: 1px solid var(--border);
    opacity: 0;
    transition: all .2s;
}
.prompt-text:hover .copy-hint {
    opacity: 1;
    color: var(--elk-500);
    border-color: var(--border-strong);
}

/* ═══════════════════════════════════════
   LLM BLOCK
   ═══════════════════════════════════════ */
.llm-block {
    position: relative;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.llm-block .btn-sm {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
}
.llm-block pre {
    font-size: .78rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ═══════════════════════════════════════
   FAQ — Elegant accordion
   ═══════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .2s;
    box-shadow: var(--shadow-sm);
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item summary {
    padding: 1.1rem 1.5rem;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--elk-950);
    transition: color .15s;
}
.faq-item summary:hover { color: var(--elk-500); }
.faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--text-tertiary);
    transition: transform .25s, color .25s;
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
    color: var(--elk-500);
}
.faq-item p {
    padding: 0 1.5rem 1.25rem;
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.faq-item code {
    background: var(--elk-100);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: .8rem;
    color: var(--elk-500);
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer {
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid var(--border);
    font-size: .85rem;
    color: var(--text-tertiary);
    background: var(--bg-white);
}
.footer a { color: var(--elk-500); font-weight: 700; }

/* ═══════════════════════════════════════
   SCROLL REVEAL — Smooth entrance
   ═══════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════
   MOBILE — Still premium on small screens
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
    .nav { padding: .5rem 1rem; }
    .nav-links { display: none; }
    .nav-inner { padding: 0 1rem; }
    .hero { padding: 8rem 1.25rem 3.5rem; }
    .hero h1 { font-size: 2rem; white-space: normal; }
    .hero-sub { font-size: 1rem; }
    .section { padding: 3.5rem 1.25rem; }
    .section h2 { font-size: 1.5rem; }
    .grid-3 { grid-template-columns: 1fr; }
    .step { flex-direction: column; gap: .75rem; }
    .provision-box { padding: 1.5rem; border-radius: var(--radius-lg); }
    .code-display { font-size: 2rem; }
    .specs-grid { grid-template-columns: 1fr; }
    .llm-block pre { font-size: .72rem; }
    .container { padding: 0 1.25rem; }
}