/* ==========================================================
   Strexx's Custom Solutions - one stylesheet for every page
   (index.html, faq.html, checkout.html, 404.html)
   Change a colour or a button style here and it updates everywhere.
   When you edit this file, bump the number in ?v=2 on the pages' links.
   ========================================================== */


:root {
    --bg-color: #fafaf5;
    --card-bg: #ffffff;
    --text-main: #18181b;
    --text-muted: #71717a;
    --primary: #eab308; /* Rich Mustard Yellow */
    --primary-hover: #ca8a04;
    --primary-light: #fef08a;
    --border-color: #e4e4e7;
    --nav-bg: rgba(255, 255, 255, 0.75);
    --transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

[data-theme="dark"] {
    --bg-color: #0f172a; /* Deep Midnight Navy */
    --card-bg: #1e293b; /* Slate Midnight Container */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --primary: #eab308;
    --primary-hover: #facc15;
    --primary-light: rgba(234, 179, 8, 0.15);
    --border-color: #334155;
    --nav-bg: rgba(30, 41, 59, 0.85);
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Scroll Reveal Animation Styles */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Reactive Interactive Background Canvas */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

/* Main Container wrapper */
.wrapper {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 80px 20px;
    flex: 1;
    width: 100%;
}

/* Fixed Navigation Header */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    margin-bottom: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    position: sticky;
    top: 20px;
    z-index: 100;
    height: 70px;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.logo span {
    color: var(--primary);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Custom Website Style Dropdown Selector */
.currency-dropdown-wrap {
    position: relative;
}

.currency-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.currency-btn:hover,
.currency-btn.open {
    border-color: var(--primary);
    color: var(--primary);
}

.currency-btn i.fa-chevron-down {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.currency-btn.open i.fa-chevron-down {
    transform: rotate(180deg);
}

.currency-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.25s;
    z-index: 200;
}

.currency-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.currency-option {
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: 8px;
    text-align: left;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.currency-option:hover,
.currency-option.active {
    background: rgba(234, 179, 8, 0.15);
    color: var(--primary);
}

.currency-option.active {
    font-weight: 800;
}

/* Navigation Links are now hidden by default behind the hamburger menu on all screen sizes */
.nav-links {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top center;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
    list-style: none;
}

.nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.nav-links a {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    background: rgba(234, 179, 8, 0.12);
    color: var(--text-main);
}

.nav-links a.active {
    box-shadow: inset 3px 0 0 var(--primary);
}

/* "Back to Services" link (checkout page) */
.back-link {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: var(--primary);
}

/* Cart Icon Trigger */
.cart-nav-btn {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: var(--transition);
}

.cart-nav-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.cart-badge {
    background: var(--primary);
    color: #18181b;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
}

/* Fixed Theme Toggle Button */
.theme-toggle {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, color 0.4s ease;
}

.theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.1);
}

.theme-toggle i {
    display: inline-block;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.theme-toggle:hover i {
    transform: rotate(1080deg);
}

/* Hamburger menu button - visible on all screen sizes now */
.menu-toggle {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
}

.menu-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Buttons */
@keyframes btnFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
}

.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 26px;
    background: var(--primary);
    color: #18181b;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px;
    border: 1px solid var(--primary);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.25);
    animation: btnFloat 4s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: none;
    animation-delay: 2s;
}

.btn:hover {
    transform: scale(1.06);
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #18181b;
    box-shadow: 0 8px 24px rgba(234, 179, 8, 0.4);
    animation-play-state: paused;
}

.btn-secondary:hover {
    background: var(--card-bg);
    color: var(--text-main);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.18), 0 8px 24px rgba(234, 179, 8, 0.22);
}

.btn:active {
    transform: scale(0.98);
}

.btn-lg {
    padding: 14px 28px;
    font-weight: 800;
}

.btn-static {
    animation: none;
}

/* Sweep Shine Effect */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(234, 179, 8, 0.22) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    pointer-events: none;
    transition: none;
}

.shine-effect:hover::after {
    transform: translateX(200%);
    transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hero Section */
.hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 70px;
}

@keyframes badgePulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(234, 179, 8, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}

.custom-solutions-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #18181b;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.3);
    animation: badgePulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    cursor: default;
}

.custom-solutions-badge i {
    font-size: 0.85rem;
}

.hero-content h1 {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.hero-content h1 span {
    color: var(--primary);
}

.hero-content p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-actions {
    display: flex;
    gap: 15px;
}

/* Profile & General Cards */
.solid-card {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 35px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.solid-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(234, 179, 8, 0.12);
}

.profile-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.avatar-container {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    border: 3px solid var(--primary);
    box-shadow: 0 10px 25px rgba(234, 179, 8, 0.3);
}

.avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.profile-role-primary {
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.3;
}

.profile-role-secondary {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 4px;
    margin-bottom: 16px;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 16px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.social-icons a:hover {
    background: var(--primary);
    color: #18181b;
    border-color: var(--primary);
    transform: scale(1.18);
    box-shadow: 0 8px 20px rgba(234, 179, 8, 0.35);
}

/* Projects Section Styling */
.section-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 35px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.project-card {
    padding: 30px;
}

.project-icon {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: #18181b;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 20px;
    box-shadow: 0 6px 16px rgba(234, 179, 8, 0.3);
}

.project-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.project-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Full-width project card (Aquaflow) */
.project-card-wide {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.project-card-wide .project-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.project-card-wide .project-card-body {
    flex: 1 1 260px;
}

.project-card-wide .project-card-body p {
    margin-bottom: 0;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}

.project-link:hover {
    gap: 10px;
}

/* How It Works */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.step-card {
    padding: 30px;
}

.step-number {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--primary);
    color: #18181b;
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px rgba(234, 179, 8, 0.3);
}

.step-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.step-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 64px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: none;
    background: var(--primary);
    color: #18181b;
    font-size: 1.05rem;
    cursor: pointer;
    z-index: 90;
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-hover);
}

/* Playground Container Styling */
.playground-section {
    margin-bottom: 70px;
    scroll-margin-top: 110px;
}

.discord-terminal {
    background: #2b2d31;
    border-radius: 20px;
    border: 1px solid #1e1f22;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    position: relative;
}

.discord-header {
    background: #1e1f22;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #111214;
    gap: 15px;
    flex-wrap: wrap;
}

.discord-channel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f2f3f5;
    font-weight: 700;
    font-size: 0.95rem;
}

.discord-channel-title i {
    color: #80848e;
    font-size: 1.1rem;
}

.discord-quick-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.discord-quick-btn {
    background: #313338;
    border: 1px solid #3f4147;
    color: #dbdee1;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.discord-quick-btn:hover {
    background: var(--primary);
    color: #18181b;
    border-color: var(--primary);
}

.discord-chat-body {
    padding: 20px;
    min-height: 320px;
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #313338;
}

.discord-msg {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.discord-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
}

.discord-msg-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.discord-msg-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.discord-author-name {
    color: #f2f3f5;
    font-weight: 700;
    font-size: 0.95rem;
}

.discord-bot-tag {
    background: var(--primary);
    color: #18181b;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
}

.discord-timestamp {
    color: #949ba4;
    font-size: 0.75rem;
    font-weight: 500;
}

.discord-command-used {
    color: #949ba4;
    font-size: 0.82rem;
    margin-bottom: 2px;
}

.discord-command-used span {
    color: #00a8fc;
    font-weight: 600;
}

/* Discord Embed Component with Mustard Accent Line */
.discord-embed {
    background: #2b2d31;
    border-left: 4px solid #eab308;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 520px;
}

.discord-embed-title {
    color: #f2f3f5;
    font-size: 0.98rem;
    font-weight: 700;
}

.discord-embed-desc {
    color: #dbdee1;
    font-size: 0.88rem;
    line-height: 1.45;
}

.discord-embed-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.discord-embed-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-name {
    color: #949ba4;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.field-value {
    color: #dbdee1;
    font-size: 0.85rem;
    font-weight: 600;
}

.discord-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    object-fit: cover;
    margin-top: 4px;
}

.discord-buttons-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.discord-interactive-btn {
    background: #4e5058;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease;
}

.discord-interactive-btn:hover {
    background: #6d6f78;
}

.discord-interactive-btn.primary {
    background: #5865f2;
}

.discord-interactive-btn.primary:hover {
    background: #4752c4;
}

.discord-interactive-btn.mustard {
    background: var(--primary);
    color: #18181b;
}

.discord-interactive-btn.mustard:hover {
    background: var(--primary-hover);
    color: #18181b;
}

/* Poll vote buttons */
.poll-count {
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
}

.discord-interactive-btn.voted {
    background: var(--primary);
    color: #18181b;
}

.discord-interactive-btn.voted:hover {
    background: var(--primary-hover);
    color: #18181b;
}

.poll-hint {
    color: #949ba4;
    font-size: 0.75rem;
    margin-top: 2px;
}

.discord-user-text {
    color: #dbdee1;
    font-size: 0.92rem;
    line-height: 1.4;
    word-break: break-word;
}

/* Rank card demo (/rank) */
.rank-xp-label {
    display: flex;
    justify-content: space-between;
    color: #949ba4;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 4px;
}

.rank-bar {
    width: 100%;
    height: 12px;
    background: #1e1f22;
    border-radius: 10px;
    overflow: hidden;
}

.rank-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 10px;
}

/* Custom request card */
.custom-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.custom-card-text {
    flex: 1 1 320px;
}

.custom-card-text h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.custom-card-text p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.custom-card-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Slash Command Autocomplete Popup Box */
.slash-autocomplete-box {
    position: absolute;
    bottom: 70px;
    left: 20px;
    right: 20px;
    background: #2b2d31;
    border: 1px solid #1f2023;
    border-radius: 12px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    z-index: 50;
    padding: 6px;
}

.slash-autocomplete-box.active {
    display: flex;
}

.slash-command-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #f2f3f5;
}

.slash-command-item:hover, .slash-command-item.selected {
    background: #35373c;
}

.slash-cmd-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slash-cmd-icon {
    width: 28px;
    height: 28px;
    background: #383a40;
    color: var(--primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.slash-cmd-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #f2f3f5;
}

.slash-cmd-desc {
    font-size: 0.78rem;
    color: #949ba4;
}

.discord-input-bar {
    background: #383a40;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #2b2d31;
    position: relative;
}

.discord-input-field {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f2f3f5;
    font-family: inherit;
    font-size: 0.9rem;
}

.discord-input-field::placeholder {
    color: #80848e;
}

.discord-send-btn {
    background: var(--primary);
    color: #18181b;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: transform 0.2s ease, background 0.2s ease;
}

.discord-send-btn:hover {
    transform: scale(1.08);
    background: var(--primary-hover);
    color: #18181b;
}

.pricing-section,
#work,
#about,
#playground {
    scroll-margin-top: 110px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}

.pricing-card.featured {
    border: 2px solid var(--primary);
}

.pricing-badge {
    position: absolute;
    top: 36px;
    right: 35px;
    background: var(--primary);
    color: #18181b;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-header {
    margin-bottom: 20px;
}

/* Keep long titles clear of the corner badge */
.pricing-card.featured .pricing-title {
    padding-right: 110px;
    font-size: 1.2rem;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .pricing-card.featured .pricing-title { white-space: normal; }
}

.pricing-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 15px;
}

.pricing-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 25px;
    min-height: 72px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    justify-content: flex-start;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-main);
    text-align: left;
}

.pricing-features li i {
    color: var(--primary);
    font-size: 0.9rem;
    margin-top: 3px;
}

/* Cart Drawer / Modal */
.cart-modal {
    position: fixed;
    top: 0;
    right: -450px;
    width: 420px;
    height: 100vh;
    background: var(--card-bg);
    border-left: 1px solid var(--border-color);
    z-index: 1000;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-modal.open {
    right: 0;
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.cart-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.cart-header h3 {
    font-size: 1.4rem;
    font-weight: 800;
}

.cart-close {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 1.2rem;
    cursor: pointer;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    padding-right: 4px;
}

.cart-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.cart-item-price {
    color: var(--primary);
    font-weight: 800;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1rem;
}

.cart-item-desc-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 40px;
}

.cart-item-desc-input:focus {
    outline: none;
    border-color: var(--primary);
}

.provisional-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.2;
}

.cart-total {
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-family: inherit;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.form-group input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--border-color);
}

/* Checkbox styling */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -4px;
    margin-bottom: 4px;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.checkbox-group label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

/* Payment notice bar */
.payment-notice {
    background: #eab308;
    color: #0f172a;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    margin-top: 5px;
    border: 1px solid #ca8a04;
}

[data-theme="dark"] .payment-notice {
    background: #eab308;
    color: #0f172a;
    border-color: #facc15;
}

/* Footer Styles & Contact Elements */
footer {
    position: relative;
    z-index: 10;
    border-top: 1px solid var(--border-color);
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    padding: 40px 20px;
    text-align: center;
    margin-top: auto;
    scroll-margin-top: 110px;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-links-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.footer-contact-item:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(234, 179, 8, 0.15);
}

.footer-contact-item i.fa-envelope,
.footer-contact-item i.fa-discord {
    color: var(--primary);
}

.contact-text {
    display: inline-flex;
    position: relative;
    z-index: 2;
}

.footer-contact-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(234, 179, 8, 0.25) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 1;
    transition: none;
}

.footer-contact-item:hover::after {
    transform: translateX(200%);
    transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes extendedSweepShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.footer-contact-item.animate-shine::after {
    animation: extendedSweepShine 4.5s cubic-bezier(0.25, 1, 0.5, 1) 0.12s forwards;
}

.footer-copy {
    color: var(--text-muted);
    font-size: 0.9rem;
}


/* ================= Home page extras ================= */

/* Badges row at the top of the hero */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.hero-badges .custom-solutions-badge {
    margin-bottom: 0;
}

/* Availability badge. Add the class "busy" to the element to turn the dot red. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: default;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    animation: dotPulse 2s ease-out infinite;
}

.status-pill.busy .status-dot {
    background: #ef4444;
    animation: none;
}

@keyframes dotPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Small inline code in section subtitles */
.section-subtitle code {
    background: rgba(234, 179, 8, 0.15);
    color: var(--text-main);
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.95em;
}

/* Message in the cart drawer (replaces the old browser popup) */
.cart-error {
    display: none;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.cart-error.show {
    display: block;
}

/* ================= Checkout page ================= */

.page-checkout .checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.page-checkout .solid-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.page-checkout .checkout-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.page-checkout .checkout-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.page-checkout .order-summary-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.page-checkout .order-item-box {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-checkout .order-item-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

.page-checkout .order-item-price {
    color: var(--primary);
}

.page-checkout .order-item-desc-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
    min-height: 50px;
}

.page-checkout .order-item-desc-input:focus {
    outline: none;
    border-color: var(--primary);
}

.page-checkout .order-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: 800;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.page-checkout .checkout-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-checkout .form-group label {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
}

.page-checkout .form-group input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
}

.page-checkout .checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-checkout .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.page-checkout .checkbox-group label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.page-checkout .payment-notice {
    background: #eab308;
    color: #0f172a;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid #ca8a04;
}

.page-checkout .reply-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: -4px;
}

.page-checkout .reply-note i {
    color: var(--primary);
    margin-right: 4px;
}

.page-checkout .terms-note {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.page-checkout .terms-note-title {
    color: var(--text-main);
    font-weight: 800;
    margin-bottom: 6px;
}

.page-checkout .terms-note-title i {
    color: var(--primary);
    margin-right: 4px;
}

.page-checkout .terms-note ul {
    padding-left: 18px;
}

.page-checkout .terms-note li {
    margin: 4px 0;
}

.page-checkout .confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-checkout .confirm-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.page-checkout .confirm-modal-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 35px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-checkout .confirm-modal-overlay.open .confirm-modal-card {
    transform: scale(1) translateY(0);
}

.page-checkout .confirm-modal-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px auto;
}

.page-checkout .confirm-modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.page-checkout .confirm-modal-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.page-checkout .confirm-summary {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 25px;
    text-align: left;
    max-height: 220px;
    overflow-y: auto;
}

.page-checkout .confirm-summary-heading {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.page-checkout .confirm-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 5px 0;
}

.page-checkout .confirm-summary-row span:last-child {
    color: var(--primary);
    font-weight: 800;
    white-space: nowrap;
}

.page-checkout .confirm-summary-total {
    border-top: 1px solid var(--border-color);
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 800;
}

.page-checkout .solid-card:hover {
    transform: none;
}

.page-checkout .terms-note a {
    color: var(--text-main);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--primary);
}

/* ================= FAQ page ================= */

.faq-content {
    max-width: 900px;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 45px;
}

.faq-header h1 {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.faq-header h1 span {
    color: var(--primary);
}

.faq-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item.solid-card {
    padding: 0;
    border-radius: 20px;
}

.faq-item.solid-card:hover {
    transform: translateY(-2px);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
    padding: 22px 26px;
    cursor: pointer;
    border-radius: 20px;
}

.faq-q:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.faq-q-icon {
    color: var(--primary);
    font-size: 1rem;
}

.faq-q-text {
    flex: 1;
}

.faq-chevron {
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
    color: var(--primary);
}

/* Smooth open/close: the row grows from 0 to its natural height */
.faq-a-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-a-wrap {
    grid-template-rows: 1fr;
}

.faq-a {
    overflow: hidden;
    min-height: 0;
}

.faq-a p {
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.65;
    padding: 0 26px 22px 56px;
}

.faq-cta-box {
    text-align: center;
    margin-top: 50px;
    padding: 35px;
    border-radius: 24px;
}

.faq-cta-box h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.faq-cta-box p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* ================= 404 page ================= */

.page-404 .wrapper {
    display: flex;
    flex-direction: column;
}

.page-404 .not-found-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-404 .solid-card {
    padding: 50px 35px;
    max-width: 520px;
    width: 100%;
    text-align: center;
}

.page-404 .solid-card:hover {
    transform: none;
}

.page-404 .error-code {
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--primary);
    margin-bottom: 14px;
}

.page-404 .error-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.page-404 .error-text {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 28px;
}

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

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .cart-modal {
        width: 100%;
        right: -100%;
    }

    .page-checkout .checkout-grid {
        grid-template-columns: 1fr;
    }

    .faq-header h1 {
        font-size: 2.1rem;
    }

    .faq-q {
        padding: 18px 20px;
        font-size: 1rem;
    }

    .faq-a p {
        padding: 0 20px 18px 20px;
    }
}

/* ==========================================================
   Interactive demos: Build Your Bot, Website Styles,
   Watch a bot get built, Quick jump, order celebration
   ========================================================== */

/* ---------- shared bits ---------- */
#studio,#styles,#build-story{scroll-margin-top:90px;margin-bottom:48px}
.studio>*,.styles-wrap>*,.story>*{min-width:0}
.md-cmd{color:#00a8fc;font-weight:600;background:rgba(0,168,252,.12);padding:0 4px;border-radius:4px}
.md-mention{color:#c9cdfb;background:rgba(88,101,242,.3);padding:0 3px;border-radius:4px;font-weight:500}

/* ---------- Build Your Bot ---------- */
.studio{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:26px;align-items:start}
.studio-panel{padding:28px;display:flex;flex-direction:column;gap:22px}
.studio-field{display:flex;flex-direction:column;gap:9px}
.studio-field label,.studio-label{font-size:.82rem;font-weight:700;color:var(--text-muted)}
.studio-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.studio-field input[type=text]{font:inherit;font-weight:600;padding:12px 14px;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-main);outline:none;width:100%;transition:border-color .3s ease,box-shadow .3s ease}
.studio-field input[type=text]:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--card-bg);background:var(--c);cursor:pointer;box-shadow:0 0 0 1px var(--border-color);position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.swatch:hover{transform:scale(1.14)}
.swatch.on{box-shadow:0 0 0 2px var(--c,var(--primary)),0 6px 16px -4px var(--c,rgba(0,0,0,.3))}
.swatch.custom{display:grid;place-items:center;background:conic-gradient(#ef4444,#eab308,#22c55e,#3b82f6,#8b5cf6,#ef4444);overflow:hidden;color:#fff;font-size:.7rem}
.swatch.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.feat{min-width:0;display:flex;align-items:center;gap:9px;text-align:left;font:inherit;font-weight:600;font-size:.84rem;color:var(--text-main);padding:11px 12px;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-color);cursor:pointer;position:relative;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s ease,background-color .25s ease}
.feat:hover{transform:scale(1.03);border-color:var(--primary)}
.feat>i{color:var(--text-muted);width:18px;text-align:center;transition:color .25s ease}
.feat span{flex:1;line-height:1.25}
.feat em{font-style:normal;font-size:.62rem;font-weight:800;color:var(--text-muted);border:1px solid var(--border-color);border-radius:6px;padding:1px 5px}
.feat-tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-color);display:grid;place-items:center;font-size:.6rem;color:transparent;flex-shrink:0;transition:all .25s ease}
.feat.on{border-color:var(--primary);background:var(--primary-light)}
.feat.on>i{color:var(--primary-hover)}
.feat.on .feat-tick{background:var(--primary);border-color:var(--primary);color:#18181b}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;font-size:.92rem;cursor:pointer}
.switch-row input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:20px;background:var(--border-color);position:relative;cursor:pointer;transition:background-color .3s ease;flex-shrink:0}
.switch-row input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.switch-row input:checked{background:var(--primary)}
.switch-row input:checked::after{transform:translateX(20px)}
.site-opts{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}
.site-opts.open{grid-template-rows:1fr}
.site-opts>div{overflow:hidden;display:flex;flex-direction:column;gap:12px}
.site-opts.open>div{padding-top:14px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{font:inherit;font-weight:700;font-size:.8rem;padding:10px 6px;border-radius:11px;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-main);cursor:pointer;line-height:1.25;transition:all .25s ease}
.seg button small{display:block;font-weight:600;color:var(--text-muted);font-size:.72rem}
.seg button:hover{border-color:var(--primary)}
.seg button.on{border-color:var(--primary);background:var(--primary-light)}
.style-line{font-size:.84rem;color:var(--text-muted);font-weight:600}
.style-line b{color:var(--text-main)}
.style-line a{color:var(--primary-hover);font-weight:700;text-decoration:none}
.style-line a:hover{text-decoration:underline}

.studio-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.mini-discord{--md-accent:#3b82f6;display:grid;grid-template-columns:64px 200px minmax(0,1fr);height:470px;border-radius:20px;overflow:hidden;background:#313338;border:1px solid #1e1f22;box-shadow:0 15px 35px rgba(0,0,0,.25);color:#dbdee1}
.md-rail{background:#1e1f22;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0}
.md-srv{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;background:var(--md-accent);transition:background-color .5s ease,border-radius .3s ease}
.md-srv.dim{background:#313338;color:#23a55a;font-size:.9rem;border-radius:50%}
.md-side{background:#2b2d31;display:flex;flex-direction:column;min-width:0}
.md-name{padding:14px 14px;font-weight:800;font-size:.92rem;color:#f2f3f5;border-bottom:1px solid #1e1f22;display:flex;justify-content:space-between;align-items:center;gap:8px}
.md-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-name i{font-size:.7rem;color:#949ba4}
.md-channels{padding:10px 8px;flex:1;overflow:hidden}
.md-cat{font-size:.68rem;font-weight:800;text-transform:uppercase;color:#949ba4;padding:10px 8px 4px;letter-spacing:.04em}
.md-ch{display:flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;color:#949ba4;padding:6px 8px;border-radius:6px;white-space:nowrap}
.md-ch i{font-size:.8rem;width:16px;text-align:center;opacity:.8}
.md-ch.active{background:#404249;color:#f2f3f5}
.md-ch.new{color:#f2f3f5;animation:mdIn .5s cubic-bezier(.16,1,.3,1) both}
.md-botcard{background:#232428;padding:10px;display:flex;align-items:center;gap:9px}
.md-botcard .md-av{width:32px;height:32px;font-size:.8rem}
.md-botcard b{display:block;font-size:.82rem;color:#f2f3f5;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.md-botcard small{display:block;font-size:.7rem;color:#949ba4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.md-main{display:flex;flex-direction:column;min-width:0;background:#313338}
.md-top{display:flex;align-items:center;gap:8px;padding:13px 16px;font-weight:800;font-size:.92rem;color:#f2f3f5;border-bottom:1px solid #26272b}
.md-top>i{color:#80848e}
.md-replay{margin-left:auto;font:inherit;font-size:.72rem;font-weight:700;color:#dbdee1;background:#404249;border:0;border-radius:7px;padding:5px 11px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.md-replay:hover{background:var(--md-accent);color:#fff}
.md-chat{flex:1;overflow:hidden;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.md-msg{display:flex;gap:12px;align-items:flex-start;animation:mdIn .5s cubic-bezier(.16,1,.3,1) both;transition:opacity .4s ease,transform .4s ease}
.md-msg.md-removed{opacity:.15;transform:scale(.97)}
@keyframes mdIn{from{opacity:0;transform:translateY(12px)}}
.md-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex-shrink:0;font-size:.95rem}
.md-av.bot{background:var(--md-accent);transition:background-color .5s ease}
.md-body{min-width:0;flex:1}
.md-who{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.md-who b{color:#f2f3f5;font-size:.92rem}
.md-who u{text-decoration:none;font-size:.6rem;font-weight:800;background:var(--md-accent);color:#fff;padding:1px 5px;border-radius:4px;transition:background-color .5s ease}
.md-who span{font-size:.7rem;color:#949ba4}
.md-text{font-size:.9rem;line-height:1.4}
.md-join{display:flex;align-items:center;gap:10px;font-size:.88rem;color:#949ba4;padding-left:6px}
.md-join i{color:#23a55a}
.md-join b{color:#f2f3f5}
.md-embed{margin-top:5px;background:#2b2d31;border-left:4px solid var(--md-accent);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-width:420px;transition:border-color .5s ease}
.md-et{color:#f2f3f5;font-size:.92rem}
.md-ed{font-size:.84rem;line-height:1.45}
.md-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:.84rem;font-weight:600;color:#f2f3f5}
.md-fields small{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;color:#949ba4}
.md-xp,.md-bar i{height:9px;border-radius:9px;background:#1e1f22;overflow:hidden;display:block}
.md-xp i{display:block;height:100%;background:var(--md-accent);border-radius:9px;transition:width 1.2s cubic-bezier(.16,1,.3,1),background-color .5s ease}
.md-xpt{display:flex;justify-content:space-between;font-size:.72rem;color:#949ba4;font-weight:700}
.md-bar div{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;margin-bottom:4px;color:#f2f3f5}
.md-bar{margin-top:2px}
.md-bar u{display:block;height:100%;background:var(--md-accent);border-radius:9px;transition:width 1.2s cubic-bezier(.16,1,.3,1),background-color .5s ease;text-decoration:none}
.md-react{display:flex;gap:8px;flex-wrap:wrap}
.md-react span{background:#383a40;border-radius:8px;padding:4px 10px;font-size:.8rem;font-weight:600;color:#f2f3f5}
.md-react b{color:var(--md-accent);margin-left:3px}
.md-btns{display:flex;gap:7px;flex-wrap:wrap}
.md-btn{background:#4e5058;color:#fff;font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:5px;transition:background-color .25s ease,transform .25s ease}
.md-btn.primary,.md-btn.pressed{background:var(--md-accent)}
.md-btn.pressed{transform:scale(.94)}
.md-gif{height:70px;border-radius:8px;background:linear-gradient(110deg,var(--md-accent),#1e1f22,var(--md-accent));background-size:300% 100%;animation:mdGif 3s linear infinite}
@keyframes mdGif{to{background-position:-300% 0}}
.md-eph{font-size:.72rem;color:#949ba4;margin-bottom:3px;display:flex;align-items:center;gap:6px}

.studio-quote{padding:24px 26px;display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center}
.quote-label{font-size:.78rem;font-weight:800;color:var(--text-muted);grid-column:1/-1}
.quote-plan b{display:block;font-size:1.25rem;line-height:1.2}
.quote-plan small{display:block;color:var(--text-muted);font-size:.85rem;margin-top:3px}
.quote-price{font-size:2.2rem;font-weight:800;color:var(--primary-hover);font-variant-numeric:tabular-nums;text-align:right;line-height:1}
[data-theme="dark"] .quote-price{color:var(--primary)}
.quote-line{grid-column:1/-1;font-size:.86rem;color:var(--text-muted);display:none;align-items:center;gap:8px}
.quote-line.show{display:flex}
.quote-line i{color:var(--primary-hover)}
.quote-line b{color:var(--text-main)}
.studio-quote .btn{grid-column:1/-1;margin-top:10px;width:100%}
.quote-note{grid-column:1/-1;font-size:.78rem;color:var(--text-muted);text-align:center}

/* ---------- Website styles ---------- */
.styles-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:start}
.style-picks{display:flex;flex-direction:column;gap:9px}
.style-pick{display:flex;align-items:center;gap:12px;font:inherit;font-weight:700;font-size:.9rem;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-main);cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s ease,background-color .25s ease}
.style-pick:hover{transform:scale(1.03);border-color:var(--primary)}
.style-pick i{width:26px;height:26px;border-radius:8px;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}
.style-pick.on{border-color:var(--primary);background:var(--primary-light)}
.style-pick[data-s=clean] i{background:linear-gradient(135deg,#fff,#dbeafe)}
.style-pick[data-s=midnight] i{background:linear-gradient(135deg,#0f172a,#eab308)}
.style-pick[data-s=glass] i{background:linear-gradient(135deg,#38bdf8,#2563eb)}
.style-pick[data-s=sunset] i{background:linear-gradient(135deg,#fb923c,#ec4899)}
.style-pick[data-s=editorial] i{background:linear-gradient(135deg,#fff 50%,#000 50%)}
.style-side{display:flex;flex-direction:column;gap:14px}
.style-desc{font-size:.86rem;color:var(--text-muted);font-weight:600;line-height:1.5;padding:2px 4px}
#style-note{font-size:.82rem;color:var(--text-muted);font-weight:600;min-height:1.2em}
#style-note a{color:var(--primary-hover);font-weight:700}

.browser{--s-bg:#f8fafc;--s-nav:#fff;--s-text:#0f172a;--s-muted:#64748b;--s-accent:#2563eb;--s-on:#fff;--s-card:#fff;--s-border:#e2e8f0;--s-radius:14px;--s-hero:linear-gradient(180deg,#eff6ff,#f8fafc);--s-font:'Plus Jakarta Sans',sans-serif;--s-shadow:0 8px 24px -12px rgba(15,23,42,.25);
  border-radius:18px;overflow:hidden;border:1px solid var(--border-color);box-shadow:0 20px 45px -22px rgba(0,0,0,.35);background:var(--s-bg);font-family:var(--s-font)}
.browser[data-style=midnight]{--s-bg:#0b1020;--s-nav:#111833;--s-text:#f1f5f9;--s-muted:#94a3b8;--s-accent:#eab308;--s-on:#18181b;--s-card:#141b3a;--s-border:#26305a;--s-hero:radial-gradient(circle at 70% 0%,#1e2a5e,#0b1020 65%);--s-shadow:0 10px 30px -14px #000}
.browser[data-style=glass]{--s-bg:#0ea5e9;--s-nav:rgba(255,255,255,.18);--s-text:#fff;--s-muted:rgba(255,255,255,.78);--s-accent:#fff;--s-on:#0369a1;--s-card:rgba(255,255,255,.2);--s-border:rgba(255,255,255,.35);--s-radius:20px;--s-hero:linear-gradient(135deg,#38bdf8,#2563eb 70%);--s-shadow:0 10px 30px -14px rgba(3,40,100,.6)}
.browser[data-style=sunset]{--s-bg:#fff7ed;--s-nav:#fff;--s-text:#431407;--s-muted:#9a5b3a;--s-accent:#ea580c;--s-on:#fff;--s-card:#fff;--s-border:#fed7aa;--s-radius:26px;--s-hero:linear-gradient(135deg,#fed7aa,#fbcfe8);--s-shadow:0 12px 28px -14px rgba(234,88,12,.45)}
.browser[data-style=editorial]{--s-bg:#fff;--s-nav:#fff;--s-text:#000;--s-muted:#555;--s-accent:#000;--s-on:#fff;--s-card:#fff;--s-border:#000;--s-radius:0px;--s-hero:#fff;--s-font:Georgia,'Times New Roman',serif;--s-shadow:none}
.browser-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#e5e7eb}
[data-theme="dark"] .browser-bar{background:#2b3446}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#f87171}
.browser-bar i:nth-child(2){background:#fbbf24}.browser-bar i:nth-child(3){background:#34d399}
.browser-url{margin-left:10px;flex:1;background:rgba(255,255,255,.7);border-radius:8px;padding:3px 12px;font-size:.75rem;color:#555;font-family:'Plus Jakarta Sans',sans-serif}
[data-theme="dark"] .browser-url{background:rgba(0,0,0,.3);color:#cbd5e1}
.site{color:var(--s-text);background:var(--s-hero);transition:background .6s ease,color .5s ease;min-height:380px;display:flex;flex-direction:column}
.browser[data-style=glass] .site{background:var(--s-hero)}
.site-nav{display:flex;align-items:center;gap:18px;padding:14px 22px;background:var(--s-nav);border-bottom:1px solid var(--s-border);font-size:.82rem;font-weight:600;transition:all .5s ease}
.browser[data-style=glass] .site-nav{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-logo{margin-right:auto;font-size:1.05rem;font-weight:800}
.site-nav span{color:var(--s-muted)}
.site-btn{font-style:normal;font-weight:700;font-size:.8rem;background:var(--s-accent);color:var(--s-on);padding:8px 16px;border-radius:calc(var(--s-radius) * .7);border:1px solid var(--s-accent);transition:all .5s ease;display:inline-block}
.site-btn.ghost{background:transparent;color:var(--s-text);border-color:var(--s-border)}
.browser[data-style=editorial] .site-btn{text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}
.site-hero{padding:46px 26px 30px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.site-hero h3{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.03em;max-width:15ch;font-weight:800}
.browser[data-style=editorial] .site-hero h3{font-weight:400;font-style:italic;letter-spacing:-.01em;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.site-hero p{color:var(--s-muted);font-size:.9rem;max-width:36ch;line-height:1.5}
.site-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:6px 26px 30px;margin-top:auto}
.site-cards div{background:var(--s-card);border:1px solid var(--s-border);border-radius:var(--s-radius);padding:16px;box-shadow:var(--s-shadow);display:flex;flex-direction:column;gap:4px;transition:all .5s ease}
.browser[data-style=glass] .site-cards div{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-cards i{color:var(--s-accent);font-size:1.1rem;margin-bottom:4px;transition:color .5s ease}
.browser[data-style=glass] .site-cards i{color:#fff}
.site-cards b{font-size:.88rem}
.site-cards small{color:var(--s-muted);font-size:.74rem;line-height:1.4}
.style-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ---------- Watch a bot get built ---------- */
.story{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:28px;align-items:stretch}
.story-steps{list-style:none;display:flex;flex-direction:column;gap:12px}
.story-step{position:relative;border-radius:16px;border:1px solid var(--border-color);background:var(--card-bg);overflow:hidden;transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.story-step button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;background:none;border:0;color:var(--text-main);padding:16px 18px 18px;cursor:pointer}
.story-step b{display:block;font-size:1rem}
.story-step small{display:block;color:var(--text-muted);font-size:.84rem;margin-top:1px}
.story-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--bg-color);border:1px solid var(--border-color);flex-shrink:0;transition:all .3s ease}
.story-step.active{border-color:var(--primary);transform:scale(1.02)}
.story-step.active .story-num,.story-step.done .story-num{background:var(--primary);border-color:var(--primary);color:#18181b}
.story-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:transparent}
.story-bar u{display:block;height:100%;width:0;background:var(--primary);text-decoration:none}
.story-stage{background:#1e1f22;border-radius:20px;border:1px solid #111214;overflow:hidden;box-shadow:0 15px 35px rgba(0,0,0,.25);display:flex;flex-direction:column;color:#dbdee1;min-height:420px}
.story-top{display:flex;align-items:center;gap:12px;padding:13px 18px;background:#111214;font-size:.8rem;font-weight:700;color:#949ba4}
.stage-dots{display:flex;gap:6px}.stage-dots i{width:10px;height:10px;border-radius:50%;background:#f87171}.stage-dots i:nth-child(2){background:#fbbf24}.stage-dots i:nth-child(3){background:#34d399}
.stage-title{flex:1;text-align:center;font-family:ui-monospace,Consolas,monospace}
.bot-status{display:flex;align-items:center;gap:7px;font-size:.74rem;color:#dbdee1;min-width:84px;justify-content:flex-end}
.bot-status i{width:9px;height:9px;border-radius:50%;background:#6b7280;transition:background-color .4s ease,box-shadow .4s ease}
.bot-status[data-state=build] i{background:#eab308;box-shadow:0 0 0 4px rgba(234,179,8,.2)}
.bot-status[data-state=on] i{background:#23a55a;box-shadow:0 0 0 4px rgba(35,165,90,.25)}
.bot-status em{font-style:normal}
.story-screen{flex:1;padding:22px;display:flex;flex-direction:column;justify-content:center;min-height:340px}
.sc-chat{display:flex;flex-direction:column;gap:12px}
.bub{max-width:82%;padding:11px 15px;border-radius:16px;font-size:.9rem;line-height:1.45;animation:mdIn .5s cubic-bezier(.16,1,.3,1) both}
.bub small{display:block;font-size:.68rem;font-weight:800;opacity:.7;margin-bottom:2px}
.bub.you{background:#2b2d31;align-self:flex-start;border-bottom-left-radius:4px}
.bub.me{background:#eab308;color:#18181b;align-self:flex-end;border-bottom-right-radius:4px}
.sc-code{margin:0;font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.82rem;line-height:1.7;overflow:hidden}
.sc-code .ln{display:flex;gap:16px;white-space:pre}
.sc-code .no{color:#4e5058;width:16px;text-align:right;flex-shrink:0;user-select:none}
.sc-code k{color:#c678dd;font-style:normal}.sc-code s{color:#98c379;text-decoration:none}.sc-code f{color:#61afef;font-style:normal}
.sc-code .caret{display:inline-block;width:8px;height:1.1em;background:#eab308;vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sc-tests{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.9rem;margin-bottom:20px}
.sc-tests li{display:flex;align-items:center;gap:11px;animation:mdIn .4s ease both}
.sc-tests li i{color:#949ba4;width:18px;text-align:center}
.sc-tests li.ok i{color:#23a55a}
.sc-prog{height:8px;background:#2b2d31;border-radius:8px;overflow:hidden}
.sc-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#eab308,#23a55a);border-radius:8px;transition:width .6s ease}
.sc-progt{margin-top:9px;font-size:.78rem;color:#949ba4;font-weight:700}
.sc-live{display:flex;flex-direction:column;gap:22px}
.live-msg{display:flex;gap:12px;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.live-msg.in{opacity:1;transform:none}
.live-msg .md-av.bot{background:#eab308;color:#18181b}
.live-msg b{color:#f2f3f5}.live-msg u{text-decoration:none;font-size:.6rem;font-weight:800;background:#eab308;color:#18181b;padding:1px 5px;border-radius:4px;margin-left:5px}
.live-msg .md-embed{border-left-color:#eab308}
.delivered{align-self:center;font-weight:800;color:#23a55a;background:rgba(35,165,90,.12);border:1px solid rgba(35,165,90,.35);padding:10px 20px;border-radius:30px;opacity:0;transform:scale(.9);transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.delivered.in{opacity:1;transform:none}

/* ---------- Quick jump ---------- */
.palette-btn:hover i{transform:none!important}
.pal-overlay{position:fixed;inset:0;z-index:100000;display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:rgba(15,23,42,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.pal-overlay.open{opacity:1;visibility:visible}
.pal-box{width:100%;max-width:560px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);overflow:hidden;transform:translateY(-14px) scale(.97);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.pal-overlay.open .pal-box{transform:none}
.pal-input{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border-color)}
.pal-input i{color:var(--text-muted)}
.pal-input input{flex:1;font:inherit;font-size:1rem;font-weight:600;background:none;border:0;outline:none;color:var(--text-main)}
.pal-box kbd{font:inherit;font-size:.68rem;font-weight:700;color:var(--text-muted);border:1px solid var(--border-color);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--bg-color)}
.pal-list{list-style:none;max-height:min(52vh,400px);overflow-y:auto;padding:8px}
.pal-group{font-size:.7rem;font-weight:800;color:var(--text-muted);padding:10px 12px 4px}
.pal-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:12px;cursor:pointer;font-weight:600;font-size:.94rem}
.pal-item i{width:20px;text-align:center;color:var(--text-muted)}
.pal-item span{flex:1}
.pal-item em{font-style:normal;font-size:.8rem;color:var(--text-muted);font-weight:700}
.pal-item.on{background:var(--primary-light)}
.pal-item.on i{color:var(--primary-hover)}
.pal-empty{padding:28px 14px;text-align:center;color:var(--text-muted);font-size:.9rem}
.pal-foot{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--border-color);font-size:.74rem;color:var(--text-muted);font-weight:600}
.pal-foot span{display:flex;align-items:center;gap:5px}

/* ---------- Order celebration ---------- */
.confetti-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:200000}
.check-svg{width:34px;height:34px}
.check-svg circle{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151}
.check-svg path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.confirm-modal-overlay.open .check-svg circle{animation:drawC .7s .25s cubic-bezier(.65,0,.35,1) forwards}
.confirm-modal-overlay.open .check-svg path{animation:drawC .4s .85s ease-out forwards}
.confirm-modal-overlay.open .confirm-modal-icon{animation:popIcon .6s .2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes drawC{to{stroke-dashoffset:0}}
@keyframes popIcon{from{transform:scale(.4);opacity:0}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .studio{grid-template-columns:1fr}
  .studio-side{position:static}
  .story{grid-template-columns:1fr}
  .styles-wrap{grid-template-columns:1fr}
  .style-picks{flex-direction:row;flex-wrap:wrap}
  .style-pick{flex:1 1 auto}
}
@media (max-width:760px){
  .mini-discord{grid-template-columns:56px minmax(0,1fr);height:440px}
  .md-side{display:none}
  .studio-panel{padding:20px}
  .studio-row{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .studio-quote{padding:20px}
  .site-cards{grid-template-columns:1fr}
  .site-nav span{display:none}
  .quote-price{font-size:1.8rem}
}
@media (max-width:760px){.palette-btn{display:none!important}}

/* ---------- Polish: currency menu + accessibility ---------- */
.currency-btn { white-space: nowrap; }
.currency-btn:focus-visible,
.currency-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 480px) {
    .currency-btn { padding: 8px 10px; font-size: 0.8rem; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Fix: feature rows (Customise your bot) stay aligned, words never split ---------- */
.feat { gap: 7px; padding: 11px 10px; }
.feat > i { flex: none; width: 16px; overflow: visible; font-size: 0.85rem; }
.feat span { flex: 1 1 auto; min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.2; }
.feat em { flex: none; font-size: 0.58rem; padding: 1px 4px; }
.feat .feat-tick { flex: none; width: 17px; height: 17px; }
/* long labels get slightly smaller text so they fit on two clean lines */
.feat[data-id="api"] span { font-size: 0.78rem; }

/* ---------- Smooth page transitions (home <-> FAQ <-> checkout) ----------
   Works in every browser: the page content fades in on load, and fades out when
   you click an internal link (main.js adds .page-leaving). The top bar and the
   dot background stay still. */
.wrapper > *:not(nav),
footer {
    animation: pageIn 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes pageIn {
    from { opacity: 0; transform: translateY(16px); }
}
.wrapper > *:not(nav),
footer {
    transition: opacity 0.5s ease, transform 0.5s ease;
}
body.page-leaving .wrapper > *:not(nav),
body.page-leaving footer {
    opacity: 0;
    transform: translateY(-10px);
}

/* ==========================================================
   Dark mode: futuristic glow (borrowed from the Aquaflow look)
   Only applies when the dark theme is on.
   ========================================================== */
[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 34% at 18% 14%, rgba(234,179,8,.20), transparent 70%),
        radial-gradient(34% 30% at 86% 22%, rgba(59,130,246,.22), transparent 70%),
        radial-gradient(44% 38% at 62% 92%, rgba(234,179,8,.13), transparent 70%),
        radial-gradient(30% 26% at 6% 78%, rgba(59,130,246,.18), transparent 70%);
    filter: blur(50px);
    animation: darkAurora 30s ease-in-out infinite alternate;
}
@keyframes darkAurora { to { transform: translate3d(4%,3%,0) scale(1.1) rotate(4deg); } }

/* glowing gradient-edged cards */
[data-theme="dark"] .solid-card,
[data-theme="dark"] .page-checkout .solid-card {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(234,179,8,.10), transparent 60%) padding-box,
        linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
        linear-gradient(145deg, rgba(250,204,21,.65), rgba(234,179,8,.06) 40%, rgba(59,130,246,.45)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 42px -14px rgba(234,179,8,.35), 0 24px 60px -24px rgba(0,0,0,.7);
}
[data-theme="dark"] .solid-card:hover,
[data-theme="dark"] .page-checkout .solid-card:hover {
    box-shadow: 0 0 70px -10px rgba(234,179,8,.55), 0 30px 60px -20px rgba(0,0,0,.7);
}
[data-theme="dark"] .pricing-card.featured {
    border-width: 2px;
    box-shadow: 0 0 60px -12px rgba(234,179,8,.5), 0 24px 60px -24px rgba(0,0,0,.7);
}

/* soft gold orb in the corner of cards */
[data-theme="dark"] .pricing-card::before,
[data-theme="dark"] .project-card::before,
[data-theme="dark"] .step-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(234,179,8,.28), transparent 70%);
    filter: blur(12px);
}

/* hero: ripple rings + shimmering gold headline */
[data-theme="dark"] .hero::before {
    content: "";
    position: absolute;
    right: -6%;
    top: 50%;
    width: 1100px;
    height: 1100px;
    transform: translateY(-50%);
    pointer-events: none;
    background: repeating-radial-gradient(circle, transparent 0 70px, rgba(234,179,8,.14) 71px 72px);
    -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 66%);
    mask-image: radial-gradient(circle, #000 8%, transparent 66%);
}
[data-theme="dark"] .hero-content h1 span {
    background: linear-gradient(95deg, #facc15, #fef08a 35%, #eab308 65%, #facc15);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: darkShimmer 8s linear infinite;
    filter: drop-shadow(0 0 24px rgba(234,179,8,.4));
}
@keyframes darkShimmer { to { background-position: 200% center; } }

/* buttons with a light-up glow */
[data-theme="dark"] .btn {
    background: linear-gradient(135deg, #fde047, #eab308 50%, #ca8a04);
    color: #18181b;
    box-shadow: 0 0 0 1px rgba(253,224,71,.4), 0 0 28px -4px rgba(234,179,8,.65), inset 0 1px 0 rgba(255,255,255,.45);
}
[data-theme="dark"] .btn:hover {
    background: linear-gradient(135deg, #fef08a, #facc15 50%, #eab308);
    box-shadow: 0 0 0 1px rgba(253,224,71,.6), 0 0 44px -2px rgba(234,179,8,.85), inset 0 1px 0 rgba(255,255,255,.5);
}
[data-theme="dark"] .btn-secondary {
    background: rgba(234,179,8,.06);
    color: var(--text-main);
    border: 1px solid rgba(234,179,8,.45);
    box-shadow: 0 0 22px -8px rgba(234,179,8,.5);
}
[data-theme="dark"] .btn-secondary:hover {
    background: rgba(234,179,8,.14);
    color: var(--text-main);
}

/* glass nav with a gold edge */
[data-theme="dark"] nav {
    background:
        linear-gradient(rgba(30,41,59,.88), rgba(30,41,59,.88)) padding-box,
        linear-gradient(90deg, rgba(234,179,8,.55), rgba(59,130,246,.35), rgba(234,179,8,.55)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 40px -12px rgba(234,179,8,.3);
}

/* glowing icons and section titles */
[data-theme="dark"] .project-icon,
[data-theme="dark"] .step-number {
    box-shadow: 0 0 26px -2px rgba(234,179,8,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
[data-theme="dark"] .section-title i {
    text-shadow: 0 0 18px rgba(234,179,8,.7);
}

/* glowing frames for the demos */
[data-theme="dark"] .discord-terminal,
[data-theme="dark"] .story-stage,
[data-theme="dark"] .mini-discord {
    box-shadow: 0 0 0 1px rgba(234,179,8,.25), 0 0 60px -12px rgba(234,179,8,.35);
}

/* footer: a glowing top edge */
[data-theme="dark"] footer {
    box-shadow: 0 -1px 0 rgba(234,179,8,.5), 0 -20px 60px -30px rgba(234,179,8,.35);
}


/* ==========================================================
   Light mode: the same futuristic feel, softer and brighter
   Only applies when the dark theme is off.
   ========================================================== */
:root:not([data-theme="dark"]) body::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 34% at 18% 14%, rgba(234,179,8,.22), transparent 70%),
        radial-gradient(34% 30% at 86% 22%, rgba(96,165,250,.26), transparent 70%),
        radial-gradient(44% 38% at 62% 92%, rgba(250,204,21,.18), transparent 70%),
        radial-gradient(30% 26% at 6% 78%, rgba(59,130,246,.16), transparent 70%);
    filter: blur(50px);
    animation: lightAurora 30s ease-in-out infinite alternate;
}
@keyframes lightAurora { to { transform: translate3d(4%,3%,0) scale(1.1) rotate(4deg); } }

/* gradient-edged cards with a soft gold glow */
:root:not([data-theme="dark"]) .solid-card,
:root:not([data-theme="dark"]) .page-checkout .solid-card {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(250,204,21,.12), transparent 60%) padding-box,
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(145deg, rgba(234,179,8,.7), rgba(234,179,8,.08) 40%, rgba(59,130,246,.45)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 36px -14px rgba(234,179,8,.45), 0 20px 46px -24px rgba(15,23,42,.22);
}
:root:not([data-theme="dark"]) .solid-card:hover,
:root:not([data-theme="dark"]) .page-checkout .solid-card:hover {
    box-shadow: 0 0 60px -10px rgba(234,179,8,.6), 0 28px 50px -22px rgba(15,23,42,.25);
}
:root:not([data-theme="dark"]) .pricing-card.featured {
    border-width: 2px;
    box-shadow: 0 0 50px -12px rgba(234,179,8,.55), 0 20px 46px -24px rgba(15,23,42,.22);
}

/* soft gold orb in the corner of cards */
:root:not([data-theme="dark"]) .pricing-card::before,
:root:not([data-theme="dark"]) .project-card::before,
:root:not([data-theme="dark"]) .step-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(250,204,21,.32), transparent 70%);
    filter: blur(12px);
}

/* hero: ripple rings + gold headline (darker gold so it reads on white) */
:root:not([data-theme="dark"]) .hero::before {
    content: "";
    position: absolute;
    right: -6%;
    top: 50%;
    width: 1100px;
    height: 1100px;
    transform: translateY(-50%);
    pointer-events: none;
    background: repeating-radial-gradient(circle, transparent 0 70px, rgba(234,179,8,.16) 71px 72px);
    -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 66%);
    mask-image: radial-gradient(circle, #000 8%, transparent 66%);
}
:root:not([data-theme="dark"]) .hero-content h1 span {
    background: linear-gradient(95deg, #a16207, #eab308 35%, #ca8a04 65%, #a16207);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lightShimmer 8s linear infinite;
    filter: drop-shadow(0 0 18px rgba(234,179,8,.35));
}
@keyframes lightShimmer { to { background-position: 200% center; } }

/* buttons with a soft glow */
:root:not([data-theme="dark"]) .btn {
    box-shadow: 0 0 0 1px rgba(234,179,8,.35), 0 0 26px -4px rgba(234,179,8,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
:root:not([data-theme="dark"]) .btn:hover {
    box-shadow: 0 0 0 1px rgba(234,179,8,.55), 0 0 40px -2px rgba(234,179,8,.7), inset 0 1px 0 rgba(255,255,255,.6);
}
:root:not([data-theme="dark"]) .btn-secondary {
    background: rgba(234,179,8,.06);
    border: 1px solid rgba(234,179,8,.45);
    box-shadow: 0 0 20px -8px rgba(234,179,8,.45);
}
:root:not([data-theme="dark"]) .btn-secondary:hover {
    background: rgba(234,179,8,.14);
}

/* glass nav with a gold edge */
:root:not([data-theme="dark"]) nav {
    background:
        linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) padding-box,
        linear-gradient(90deg, rgba(234,179,8,.55), rgba(59,130,246,.35), rgba(234,179,8,.55)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 36px -12px rgba(234,179,8,.35);
}

/* glowing icons and section titles */
:root:not([data-theme="dark"]) .project-icon,
:root:not([data-theme="dark"]) .step-number {
    box-shadow: 0 0 22px -2px rgba(234,179,8,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
:root:not([data-theme="dark"]) .section-title i {
    text-shadow: 0 0 14px rgba(234,179,8,.45);
}

/* glowing frames for the demos */
:root:not([data-theme="dark"]) .discord-terminal,
:root:not([data-theme="dark"]) .story-stage,
:root:not([data-theme="dark"]) .mini-discord {
    box-shadow: 0 0 0 1px rgba(234,179,8,.3), 0 0 50px -12px rgba(234,179,8,.35);
}

/* footer: a glowing top edge */
:root:not([data-theme="dark"]) footer {
    box-shadow: 0 -1px 0 rgba(234,179,8,.5), 0 -20px 50px -30px rgba(234,179,8,.35);
}