/* ============================================================
   SOURCE CODE LIBRARY — PREMIUM CSS v3
   Palette  : Deep Navy · Gold · Amber · Orange · Lavender
   Body     : Dark navy #0a0d2e (image 2 inspired)
   Accents  : Gold #f59e0b + Orange #f97316 (image 1 inspired)
   Type     : Ultra-bold Syne + readable Outfit — "Build Real" energy
   All class/ID names UNCHANGED — drop-in replacement
   ============================================================ */

/* ── Google Fonts — ultra-bold display stack ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap');

/* ============================================================
   CSS VARIABLES — warm gold / deep navy world
   ============================================================ */
:root {
    /* Core accents */
    --accent:        #f59e0b;
    --accent-2:      #fbbf24;
    --accent-3:      #fcd34d;
    --accent-glow:   rgba(245, 158, 11, 0.50);
    --accent-soft:   rgba(245, 158, 11, 0.13);
    --accent-soft-2: rgba(245, 158, 11, 0.07);

    /* Orange secondary */
    --orange:        #f97316;
    --orange-soft:   rgba(249, 115, 22, 0.14);

    /* Lavender / purple (image 1 background) */
    --purple:        #a78bfa;
    --purple-soft:   rgba(167, 139, 250, 0.12);

    /* Cyan kept as orange-warm alias for download btns */
    --cyan:          #fb923c;
    --cyan-soft:     rgba(251, 146, 60, 0.14);

    /* Status */
    --success:       #10b981;
    --success-soft:  rgba(16, 185, 129, 0.18);
    --rose:          #f43f5e;

    /* Warm dark purple backgrounds — image 1 inspired */
    --bg-base:       #0e0916;
    --bg-1:          #120c1e;
    --bg-2:          #160e26;
    --bg-3:          #1a102e;
    --bg-card:       rgba(16, 10, 28, 0.90);
    --bg-card-hover: rgba(22, 14, 38, 0.97);

    /* Borders */
    --border:        rgba(245, 158, 11, 0.18);
    --border-hover:  rgba(245, 158, 11, 0.52);
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-card:   rgba(255, 255, 255, 0.07);

    /* Text — pure, high contrast (image 2 readability) */
    --text-1:      #ffffff;
    --text-2:      #d4c8e8;
    --text-3:      #9988bb;
    --text-accent: #fcd34d;
    --text-dim:    #3d4a6b;

    /* Fonts */
    --font-head: 'Syne',    sans-serif;
    --font-body: 'Outfit',  sans-serif;
    --font-mono: 'DM Mono', monospace;

    /* Radii */
    --radius-card:  20px;
    --radius-btn:   50px;
    --radius-modal: 26px;

    /* Shadows */
    --shadow-card:  0 2px 14px rgba(0,0,0,0.55),
                    0 8px 36px rgba(0,0,0,0.30),
                    inset 0 1px 0 rgba(255,255,255,0.055);
    --shadow-hover: 0 0 0 1px var(--border-hover),
                    0 20px 60px rgba(0,0,0,0.70),
                    0 0 52px rgba(245,158,11,0.28);
    --shadow-modal: 0 0 0 1px rgba(255,255,255,0.07),
                    0 48px 120px rgba(0,0,0,0.85),
                    0 0 80px rgba(245,158,11,0.10);
    --shadow-btn:   0 4px 24px rgba(245,158,11,0.55);

    /* Transitions */
    --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --spring:     all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    --fast:       all 0.16s ease;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

/* ============================================================
   BODY — deep navy, warm gold glow, grid mesh
   ============================================================ */
body {
    font-family: var(--font-body);
    color: var(--text-1);
    line-height: 1.65;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background:
        /* Bright gold glow — top left */
        radial-gradient(ellipse at 6%  8%,  rgba(245,158,11,0.30) 0%, transparent 36%),
        /* Orange glow — top right */
        radial-gradient(ellipse at 94% 12%, rgba(249,115,22,0.20) 0%, transparent 32%),
        /* Lavender — bottom centre (image 1 background hue) */
        radial-gradient(ellipse at 50% 96%, rgba(192,132,252,0.22) 0%, transparent 40%),
        /* Purple warm — bottom right */
        radial-gradient(ellipse at 90% 85%, rgba(167,139,250,0.16) 0%, transparent 34%),
        /* Amber shimmer — mid left */
        radial-gradient(ellipse at 12% 62%, rgba(245,158,11,0.12) 0%, transparent 28%),
        /* Warm dark purple base — image 1 inspired, NO blue */
        linear-gradient(
            165deg,
            #0e0916 0%,
            #120c1e 20%,
            #160e26 45%,
            #120c1e 68%,
            #0b0714 100%
        );
    background-attachment: scroll;
}

/* Animated ambient glow — gold + lavender */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(ellipse at 16% 16%, rgba(245,158,11,0.20) 0%, transparent 44%),
        radial-gradient(ellipse at 84% 80%, rgba(192,132,252,0.16), transparent 42%),
        radial-gradient(ellipse at 50% 50%, rgba(249,115,22,0.05),  transparent 58%);
    filter: blur(55px);
    opacity: 0.95;
    animation: scBodyGlow 22s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* Grid mesh — subtle blueprint lines (image 2 has grid) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse at 50% 0%, black 15%, transparent 72%);
}

@keyframes scBodyGlow {
    from { transform: scale(1)     translate(0,  0);    opacity: 0.80; }
    to   { transform: scale(1.10)  translate(8px, -6px); opacity: 1;    }
}

/* ── Custom scrollbar — gold ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
    background: linear-gradient(180deg, var(--accent), #d97706);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
}

/* ── Text selection ── */
::selection {
    background: rgba(245,158,11,0.35);
    color: #ffffff;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.sc-container {
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 32px;
}

.sc-main-section {
    padding: 72px 0 100px;
    position: relative;
    overflow: hidden;
}

.sc-main-section::before {
    content: '';
    position: absolute;
    top: -70%; left: -40%;
    width: 200%; height: 200%;
    background: radial-gradient(circle,
        rgba(245,158,11,0.055) 0%, transparent 62%);
    pointer-events: none;
}

/* GPU layer */
.sc-project-card,
.sc-filter-btn,
.sc-submit-section {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scPulse {
    0%,100% { opacity:1;  transform:scale(1);   box-shadow: 0 0 8px var(--accent);   }
    50%      { opacity:.5; transform:scale(.76); box-shadow: 0 0 18px var(--accent);  }
}

@keyframes scSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes scSlideIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes scSlideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(110%); opacity: 0; }
}

@keyframes scFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scModalSlide {
    from { transform: translateY(40px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ============================================================
   HERO — "Build Real" energy: massive bold, ultra clear
   ============================================================ */
.sc-hero { margin-bottom: 0; }

/* Live status badge */
.sc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 22px;
    border-radius: 50px;
    border: 1px solid rgba(245,158,11,0.35);
    background: linear-gradient(135deg,
        rgba(245,158,11,0.16),
        rgba(245,158,11,0.06)
    );
    backdrop-filter: blur(14px);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--accent-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
    animation: fadeInUp 0.55s ease;
    box-shadow: 0 2px 18px rgba(245,158,11,0.20),
                inset 0 1px 0 rgba(255,255,255,0.07);
}

.sc-badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80, 0 0 22px rgba(74,222,128,0.5);
    animation: scPulse 2.2s ease infinite;
    flex-shrink: 0;
}

/* ─── Main heading — "Build Real" inspired ───
   Massive · Ultra-bold · Gold shimmer · Image 2 energy */
.sc-main-heading {
    font-family: var(--font-head);
    font-size: 72px;
    font-weight: 800;
    line-height: 1.06;
    margin-bottom: 22px;
    letter-spacing: -0.035em;

    /* Gold-to-white shimmer gradient — image 1 gold + image 2 white */
    background: linear-gradient(
        125deg,
        #ffffff   0%,
        #fef3c7  18%,
        #fbbf24  38%,
        #f59e0b  55%,
        #ffffff  75%,
        #fbbf24 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: fadeInUp 0.55s ease, shimmer 7s linear 1.2s infinite;
    filter: drop-shadow(0 0 48px rgba(245,158,11,0.28));
}

.sc-main-heading i {
    background: none;
    -webkit-text-fill-color: var(--accent);
    color: var(--accent);
    margin-right: 18px;
    font-size: 0.84em;
    filter: drop-shadow(0 0 14px rgba(245,158,11,0.70));
}

/* Subtitle — clean, very readable, image 2 clarity */
.sc-sub-heading {
    font-size: 18.5px;
    color: #8a9ac0;
    font-weight: 400;
    max-width: 700px;
    margin-bottom: 12px;
    animation: fadeInUp 0.55s ease 0.08s backwards;
    line-height: 1.72;
    letter-spacing: 0.005em;
}

.sc-sub-heading strong {
    color: var(--text-1);
    font-weight: 700;
}

/* Inline mono pill */
.sc-mono {
    font-family: var(--font-mono);
    font-size: 0.84em;
    background: linear-gradient(135deg,
        rgba(245,158,11,0.18),
        rgba(245,158,11,0.08)
    );
    border: 1px solid rgba(245,158,11,0.30);
    color: var(--accent-2);
    padding: 2px 10px;
    border-radius: 7px;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Live count */
.sc-prompt-count {
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 36px;
    animation: fadeInUp 0.55s ease 0.13s backwards;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ============================================================
   3-STEP HOW IT WORKS BAR — warm glass
   ============================================================ */
.sc-steps-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.04),
        rgba(245,158,11,0.04)
    );
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 22px;
    padding: 22px 38px;
    margin-bottom: 30px;
    backdrop-filter: blur(20px);
    animation: fadeInUp 0.55s ease 0.18s backwards;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 700px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.30),
                inset 0 1px 0 rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

/* Gold top line */
.sc-steps-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(245,158,11,0.60),
        rgba(249,115,22,0.45),
        transparent
    );
}

.sc-step {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 150px;
}

.sc-step-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(245,158,11,0.22),
        rgba(245,158,11,0.08)
    );
    border: 1px solid rgba(245,158,11,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 14px rgba(245,158,11,0.22),
                inset 0 1px 0 rgba(255,255,255,0.08);
    transition: var(--spring);
}

.sc-step:hover .sc-step-icon {
    transform: translateY(-3px) scale(1.07);
    box-shadow: 0 8px 24px rgba(245,158,11,0.40);
    border-color: var(--accent);
}

.sc-step-icon i {
    font-size: 18px;
    color: var(--accent);
}

.sc-step-text { display: flex; flex-direction: column; gap: 3px; }

.sc-step-text strong {
    font-size: 13.5px;
    color: var(--text-1);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.sc-step-text span {
    font-size: 11.5px;
    color: var(--text-3);
}

.sc-step-arrow {
    color: rgba(245,158,11,0.32);
    font-size: 11px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ============================================================
   LANGUAGE BADGES ROW
   ============================================================ */
.sc-tools-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
    animation: fadeInUp 0.55s ease 0.23s backwards;
}

.sc-tools-label {
    font-size: 11.5px;
    color: var(--text-3);
    font-weight: 700;
    margin-right: 3px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sc-tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(135deg,
        rgba(245,158,11,0.15),
        rgba(245,158,11,0.06)
    );
    border: 1px solid rgba(245,158,11,0.24);
    color: var(--accent-2);
    letter-spacing: 0.03em;
    transition: var(--transition);
    cursor: default;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.sc-tool-badge:hover {
    background: linear-gradient(135deg,
        rgba(245,158,11,0.30),
        rgba(245,158,11,0.14)
    );
    border-color: rgba(245,158,11,0.52);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(245,158,11,0.30);
}

.sc-tool-badge i, .sc-tool-badge svg { font-size: 12px; opacity: 0.95; }

/* ============================================================
   FILTER SECTION
   ============================================================ */
.sc-filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 38px;
    animation: fadeInUp 0.55s ease 0.28s backwards;
    position: relative;
    z-index: 10;
}

.sc-filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.sc-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-btn);
    border: 1.5px solid rgba(245,158,11,0.20);
    background: rgba(20, 12, 34, 0.80);
    backdrop-filter: blur(16px);
    color: #e8dff5;                         /* clear warm white — fully readable */
    cursor: pointer;
    transition: var(--transition);
    font-weight: 700;                        /* bold so text is never faint */
    font-size: 13px;
    font-family: var(--font-body);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.sc-filter-btn i { font-size: 12px; opacity: 1; color: #e8dff5; }

.sc-filter-btn span {
    font-size: 10.5px;
    opacity: 0.70;                           /* was 0.50 — much more readable */
    font-family: var(--font-mono);
    font-weight: 600;
    color: #c9b8e8;
}

/* Ripple */
.sc-filter-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(245,158,11,0.20);
    transform: translate(-50%, -50%);
    transition: width 0.55s ease, height 0.55s ease;
}

.sc-filter-btn:hover::before { width: 300px; height: 300px; }

.sc-filter-btn:hover {
    border-color: rgba(245,158,11,0.55);
    color: #ffffff;
    transform: translateY(-2px);
    background: rgba(245,158,11,0.12);
    box-shadow: 0 4px 20px rgba(245,158,11,0.20);
}

.sc-filter-btn:hover i    { color: #ffffff; }
.sc-filter-btn:hover span { opacity: 0.85; color: #fef3c7; }

/* Active — gold gradient, deep black text — zero ambiguity */
.sc-filter-btn.active {
    background: linear-gradient(135deg, var(--accent) 0%, #d97706 100%);
    border-color: transparent;
    color: #1a0800;                          /* near-black on gold — maximum contrast */
    font-weight: 800;
    box-shadow: var(--shadow-btn);
    letter-spacing: 0.02em;
}

.sc-filter-btn.active i    { opacity: 1; color: #1a0800; }
.sc-filter-btn.active span { opacity: 0.75; color: rgba(26,8,0,0.85); }

/* ============================================================
   SEARCH BOX
   ============================================================ */
.sc-search-wrapper { position: relative; min-width: 330px; }
.sc-search-box     { position: relative; display: flex; align-items: center; }

.sc-search-box > i.fa-search {
    position: absolute;
    left: 17px;
    color: var(--text-3);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.sc-search-box:focus-within > i.fa-search { color: var(--accent); }

.sc-search-input {
    width: 100%;
    padding: 12px 44px 12px 44px;
    border-radius: var(--radius-btn);
    border: 1.5px solid rgba(245,158,11,0.20);
    background: rgba(8, 9, 28, 0.90);
    backdrop-filter: blur(16px);
    color: var(--text-1);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    transition: var(--transition);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
                0 2px 14px rgba(0,0,0,0.25);
}

.sc-search-input:focus {
    border-color: rgba(245,158,11,0.58);
    background: rgba(8, 9, 30, 0.97);
    box-shadow: 0 0 0 4px rgba(245,158,11,0.14),
                inset 0 1px 0 rgba(255,255,255,0.05),
                0 4px 22px rgba(0,0,0,0.30);
}

.sc-search-input::placeholder { color: var(--text-dim); font-size: 13px; }

.sc-search-clear {
    position: absolute; right: 12px;
    background: none; border: none;
    color: var(--text-3); cursor: pointer;
    font-size: 12px; padding: 6px 8px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: var(--fast);
}

.sc-search-clear:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

/* Suggestions dropdown */
.sc-search-suggestions {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    background: rgba(8, 9, 28, 0.99);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    border: 1px solid rgba(245,158,11,0.22);
    z-index: 200;
    display: none;
    overflow: hidden;
    box-shadow: 0 16px 52px rgba(0,0,0,0.65),
                0 0 0 1px rgba(255,255,255,0.04);
}

.sc-search-suggestions.show { display: block; }

.sc-suggestion-item {
    padding: 12px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-2);
    font-size: 13.5px;
    transition: background 0.14s ease;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.sc-suggestion-item:last-child { border-bottom: none; }
.sc-suggestion-item i { color: var(--accent); width: 18px; text-align: center; font-size: 12px; }
.sc-suggestion-item:hover { background: rgba(245,158,11,0.09); color: var(--text-1); }

/* ============================================================
   PROJECTS GRID
   ============================================================ */
.sc-projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 72px;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.55s ease 0.32s backwards;
}

/* ============================================================
   PROJECT CARD — dark navy glass, gold accent
   ============================================================ */
.sc-project-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1),
                box-shadow  0.32s ease,
                border-color 0.28s ease,
                background   0.28s ease;
    box-shadow: var(--shadow-card);
    animation: fadeInUp 0.45s ease backwards;
    backdrop-filter: blur(16px);
}

/* Gold accent top line on hover */
.sc-project-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245,158,11,0.65) 30%,
        rgba(249,115,22,0.60) 70%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.sc-project-card:hover::before { opacity: 1; }

.sc-project-card:hover {
    transform: translateY(-9px);
    border-color: rgba(245,158,11,0.38);
    box-shadow: var(--shadow-hover);
    background: var(--bg-card-hover);
}

/* Category badge — gold */
.sc-project-badge {
    position: absolute;
    top: 12px; right: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 3;
    background: linear-gradient(135deg, var(--accent) 0%, #d97706 100%);
    color: #0a0d28;
    box-shadow: 0 2px 14px rgba(245,158,11,0.55),
                inset 0 1px 0 rgba(255,255,255,0.18);
}

.sc-project-badge i { margin-right: 5px; font-size: 9px; }

/* Thumbnail */
.sc-project-thumb {
    width: 100%;
    height: 162px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: var(--bg-3);
    cursor: pointer;
}

.sc-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.sc-project-card:hover .sc-thumb-img { transform: scale(1.08); }

.sc-project-thumb::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(10,12,36,0.98), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Preview overlay */
.sc-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: rgba(0,0,0,0.08);
    transition: background 0.28s ease;
}

.sc-project-thumb:hover .sc-preview-overlay { background: rgba(0,0,0,0.52); }

.sc-preview-btn-circle {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--spring);
    box-shadow: 0 4px 24px rgba(245,158,11,0.75),
                0 0 0 6px rgba(245,158,11,0.20),
                inset 0 1px 0 rgba(255,255,255,0.22);
    opacity: 0;
    transform: scale(0.8);
}

.sc-project-thumb:hover .sc-preview-btn-circle {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 10px 34px rgba(245,158,11,0.85),
                0 0 0 8px rgba(245,158,11,0.22),
                inset 0 1px 0 rgba(255,255,255,0.22);
}

.sc-preview-btn-circle i { font-size: 18px; color: #0a0d28; font-weight: 900; }

/* Language chip — amber */
.sc-lang-badge {
    position: absolute;
    bottom: 10px; left: 10px;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(8px);
    color: var(--accent-2);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 7px;
    z-index: 3;
    letter-spacing: 0.06em;
    border: 1px solid rgba(245,158,11,0.28);
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.40);
}

/* Fallback placeholder */
.sc-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 10px;
    background: linear-gradient(135deg, #0d1030, #070816);
}

.sc-thumb-placeholder i {
    font-size: 42px;
    color: var(--accent);
    opacity: 0.38;
    filter: drop-shadow(0 0 12px rgba(245,158,11,0.40));
}

/* ── Card body ── */
.sc-project-content {
    padding: 18px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sc-project-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 7px;
    line-height: 1.42;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    letter-spacing: 0.05em;
}

.sc-project-title i {
    color: var(--accent);
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 3px;
    opacity: 0.85;
}

/* Description */
.sc-project-desc {
    font-size: 12px;
    color: #5a6d8a;
    line-height: 1.65;
    margin-bottom: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
}

/* Type chip */
.sc-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--accent-2);
    background: linear-gradient(135deg,
        rgba(245,158,11,0.16),
        rgba(245,158,11,0.06)
    );
    border: 1px solid rgba(245,158,11,0.24);
    border-radius: 50px;
    padding: 3px 10px;
    margin-bottom: 11px;
    width: fit-content;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sc-type-chip i { font-size: 9px; }

.sc-type-chip--multi {
    color: #fdba74;
    background: linear-gradient(135deg,
        rgba(249,115,22,0.16),
        rgba(249,115,22,0.06)
    );
    border-color: rgba(249,115,22,0.26);
}

/* ── Card action buttons ── */
.sc-project-actions {
    display: flex;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Preview */
.sc-btn-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    border: 1.5px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.04);
    color: var(--text-3);
    font-family: var(--font-body);
    flex: 1;
    letter-spacing: 0.01em;
}

.sc-btn-preview:hover {
    border-color: rgba(245,158,11,0.45);
    color: var(--accent-2);
    background: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(245,158,11,0.20);
}

/* Copy — gold solid */
.sc-btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    background: linear-gradient(135deg, var(--accent) 0%, #d97706 100%);
    color: #0a0d28;
    font-family: var(--font-body);
    flex: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 14px rgba(245,158,11,0.42);
}

.sc-btn-copy:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(245,158,11,0.60);
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
}

.sc-btn-copy.copied {
    background: linear-gradient(135deg, var(--success), #059669);
    box-shadow: 0 6px 20px rgba(16,185,129,0.40);
    color: #ffffff;
}

/* Download */
.sc-btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    border: 1.5px solid rgba(249,115,22,0.28);
    background: linear-gradient(135deg,
        rgba(249,115,22,0.14),
        rgba(249,115,22,0.06)
    );
    color: #fdba74;
    font-family: var(--font-body);
}

.sc-btn-download:hover {
    transform: translateY(-2px);
    border-color: var(--orange);
    box-shadow: 0 6px 24px rgba(249,115,22,0.35);
    color: #fff7ed;
    background: rgba(249,115,22,0.22);
}

/* Search highlight */
.sc-highlight {
    background: rgba(245,158,11,0.42);
    color: #0a0d28;
    padding: 0 3px;
    border-radius: 4px;
    font-weight: 900;
}

/* ============================================================
   LOADING / EMPTY / ERROR STATES
   ============================================================ */
.sc-loading {
    text-align: center;
    padding: 100px 60px;
    color: var(--text-3);
    grid-column: 1 / -1;
}

.sc-loading i {
    font-size: 40px;
    margin-bottom: 18px;
    display: block;
    color: var(--accent);
    animation: scSpin 1s linear infinite;
    filter: drop-shadow(0 0 14px var(--accent));
}

.sc-loading p { font-size: 15px; font-weight: 600; color: var(--text-3); }

.sc-no-results {
    text-align: center;
    padding: 90px 60px;
    color: var(--text-3);
    grid-column: 1 / -1;
}

.sc-no-results i {
    font-size: 56px;
    margin-bottom: 20px;
    display: block;
    color: var(--accent);
    opacity: 0.42;
    filter: drop-shadow(0 0 18px rgba(245,158,11,0.45));
}

.sc-no-results p     { font-size: 17px; margin-bottom: 8px; color: var(--text-2); font-weight: 700; }
.sc-no-results small { font-size: 13px; color: var(--text-3); }

.sc-error {
    text-align: center;
    padding: 90px 60px;
    color: #f87171;
    grid-column: 1 / -1;
}

.sc-error i { font-size: 54px; margin-bottom: 20px; display: block; }

.sc-retry-btn {
    margin-top: 22px;
    padding: 11px 30px;
    background: linear-gradient(135deg, var(--accent), #d97706);
    border: none;
    border-radius: 40px;
    color: #0a0d28;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    box-shadow: var(--shadow-btn);
    letter-spacing: 0.02em;
}

.sc-retry-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(245,158,11,0.60);
}

/* ============================================================
   TOAST
   ============================================================ */
.sc-toast {
    position: fixed;
    bottom: 30px; right: 30px;
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    padding: 13px 24px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 700;
    z-index: 99999;
    animation: scSlideIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 12px 38px rgba(0,0,0,0.42),
                0 0 0 1px rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    letter-spacing: 0.01em;
}

.sc-toast-icon { font-size: 16px; }

/* ============================================================
   SUBMIT SECTION
   ============================================================ */
.sc-submit-section {
    margin-top: 90px;
    padding: 70px 60px;
    background: linear-gradient(135deg,
        rgba(245,158,11,0.09) 0%,
        rgba(245,158,11,0.04) 50%,
        rgba(249,115,22,0.04) 100%
    );
    border-radius: 36px;
    text-align: center;
    border: 1px solid rgba(245,158,11,0.18);
    backdrop-filter: blur(16px);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),
                0 4px 44px rgba(0,0,0,0.28);
}

/* Gold top line */
.sc-submit-section::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(245,158,11,0.70) 30%,
        rgba(249,115,22,0.60) 70%,
        transparent
    );
}

/* Ambient glow */
.sc-submit-section::after {
    content: '';
    position: absolute;
    top: -60%; left: 50%;
    transform: translateX(-50%);
    width: 80%; height: 100%;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(245,158,11,0.14), transparent 65%);
    pointer-events: none;
}

.sc-submit-section:hover {
    border-color: rgba(245,158,11,0.32);
    box-shadow: 0 16px 56px rgba(245,158,11,0.16),
                inset 0 1px 0 rgba(255,255,255,0.07);
}

.sc-submit-section h3 {
    font-family: var(--font-head);
    font-size: 34px;
    font-weight: 800;
    background: linear-gradient(135deg,
        #ffffff 0%, #fef3c7 35%, #fbbf24 65%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    letter-spacing: -0.025em;
    position: relative;
    z-index: 1;
}

.sc-submit-section h3 i {
    -webkit-text-fill-color: var(--accent);
    color: var(--accent);
    margin-right: 12px;
}

.sc-submit-desc {
    color: #7080a0;
    margin-bottom: 36px;
    max-width: 520px;
    margin-left: auto; margin-right: auto;
    font-size: 15.5px;
    line-height: 1.70;
    position: relative; z-index: 1;
}

/* Gold CTA button */
.sc-premium-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 42px;
    background: linear-gradient(135deg, var(--accent) 0%, #d97706 100%);
    border-radius: 60px;
    color: #0a0d28;
    text-decoration: none;
    font-weight: 800;
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 0.03em;
    transition: var(--transition);
    box-shadow: var(--shadow-btn);
    position: relative; z-index: 1;
}

.sc-premium-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(245,158,11,0.65);
    gap: 17px;
}

.sc-credit-text {
    margin-top: 22px;
    font-size: 12px;
    color: var(--text-3);
    position: relative; z-index: 1;
    letter-spacing: 0.03em;
}

.sc-credit-text i { margin-right: 6px; }

/* ============================================================
   FAQ SECTION — ultra-bold headings like image 2
   ============================================================ */
.sc-faq-section {
    margin-top: 92px;
    padding: 72px 0 24px;
    position: relative;
}

/* Gold divider */
.sc-faq-section::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245,158,11,0.22) 10%,
        rgba(245,158,11,0.65) 30%,
        rgba(249,115,22,0.60) 50%,
        rgba(245,158,11,0.65) 70%,
        rgba(245,158,11,0.22) 90%,
        transparent 100%
    );
    margin-bottom: 72px;
    filter: blur(0.5px);
}

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

.sc-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 22px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-2);
    background: linear-gradient(135deg,
        rgba(245,158,11,0.18),
        rgba(245,158,11,0.07)
    );
    border: 1px solid rgba(245,158,11,0.28);
    margin-bottom: 22px;
    box-shadow: 0 2px 16px rgba(245,158,11,0.18),
                inset 0 1px 0 rgba(255,255,255,0.06);
}

/* FAQ heading — "Build Real" energy */
.sc-faq-heading {
    font-family: var(--font-head);
    font-size: 46px;
    font-weight: 800;
    background: linear-gradient(135deg,
        #ffffff    0%,
        #fef3c7   25%,
        #fbbf24   50%,
        #f59e0b   75%,
        #ffffff  100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.sc-faq-subheading {
    font-size: 16px;
    color: #6a7d9e;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.72;
    font-weight: 400;
}

/* 2-column FAQ grid */
.sc-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 1260px;
    margin: 0 auto;
}

.sc-faq-item {
    background: linear-gradient(150deg,
        rgba(10, 11, 30, 0.85),
        rgba(8,  9,  24, 0.75)
    );
    border: 1.5px solid rgba(245,158,11,0.11);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.25s ease,
                box-shadow    0.25s ease,
                background    0.25s ease;
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 18px rgba(0,0,0,0.28);
}

.sc-faq-item:hover {
    border-color: rgba(245,158,11,0.30);
    box-shadow: 0 6px 30px rgba(245,158,11,0.10);
}

.sc-faq-item.sc-faq--open {
    border-color: rgba(245,158,11,0.52);
    box-shadow: 0 8px 38px rgba(245,158,11,0.18);
    background: linear-gradient(150deg,
        rgba(14, 14, 36, 0.96),
        rgba(10, 11, 30, 0.92)
    );
}

.sc-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    /* Bold, readable — image 2 inspired */
    color: #d0daf5;
    font-size: 14.5px;
    font-weight: 700;
    font-family: var(--font-body);
    line-height: 1.48;
    transition: color 0.2s ease;
    letter-spacing: -0.01em;
}

.sc-faq-question:hover { color: #f0f4ff; }
.sc-faq-item.sc-faq--open .sc-faq-question { color: var(--accent-2); }

.sc-faq-icon {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--accent);
    transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1),
                color 0.2s ease;
    opacity: 0.70;
}

.sc-faq-item:hover .sc-faq-icon { opacity: 1; }
.sc-faq-item.sc-faq--open .sc-faq-icon {
    transform: rotate(180deg);
    color: var(--accent-2);
    opacity: 1;
}

.sc-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.40s cubic-bezier(0.4, 0, 0.2, 1);
}

.sc-faq-answer > div {
    padding: 0 26px 26px;
    font-size: 14px;
    color: #6e809e;
    line-height: 1.84;
    border-top: 1px solid rgba(245,158,11,0.10);
    padding-top: 18px;
    font-weight: 400;
}

.sc-faq-answer strong { color: #fcd34d; font-weight: 700; }
.sc-faq-answer em     { color: var(--accent-2); font-style: normal; font-weight: 600; }
.sc-faq-answer code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: linear-gradient(135deg,
        rgba(245,158,11,0.16),
        rgba(245,158,11,0.07)
    );
    border: 1px solid rgba(245,158,11,0.24);
    color: var(--accent-2);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.03em;
}

/* ============================================================
   PREVIEW MODAL
   ============================================================ */
.sc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4,5,18,0.92);
    backdrop-filter: blur(14px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: scFadeIn 0.22s ease;
}

.sc-modal-overlay.active { display: flex; }

.sc-modal {
    background: linear-gradient(158deg, #0c0e26, #080918, #0a0c22);
    border: 1px solid rgba(245,158,11,0.26);
    border-radius: var(--radius-modal);
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal);
    animation: scModalSlide 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

/* Modal header */
.sc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    border-bottom: 1px solid rgba(245,158,11,0.10);
    flex-shrink: 0;
    background: linear-gradient(90deg,
        rgba(245,158,11,0.05), transparent);
}

.sc-modal-header-left { display: flex; align-items: center; gap: 10px; }

/* Traffic-light dots */
.sc-dot {
    width: 13px; height: 13px;
    border-radius: 50%; cursor: default;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.sc-dot:hover { transform: scale(1.15); filter: brightness(1.3); }
.sc-dot--red    { background: #ff5f57; box-shadow: 0 0 7px rgba(255,95,87,0.70);  }
.sc-dot--yellow { background: #febc2e; box-shadow: 0 0 7px rgba(254,188,46,0.70); }
.sc-dot--green  { background: #28c840; box-shadow: 0 0 7px rgba(40,200,64,0.65);  }

.sc-modal-title {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    margin-left: 5px;
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: -0.015em;
}

.sc-modal-title::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent), 0 0 22px rgba(245,158,11,0.45);
    animation: scPulse 1.8s ease infinite;
}

.sc-modal-header-right { display: flex; align-items: center; gap: 10px; }

.sc-modal-lang-badge {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent-2);
    background: linear-gradient(135deg,
        rgba(245,158,11,0.18),
        rgba(245,158,11,0.07)
    );
    border: 1px solid rgba(245,158,11,0.28);
    padding: 3px 12px;
    border-radius: 7px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sc-modal-close {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-3);
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}

.sc-modal-close:hover {
    background: rgba(244,63,94,0.20);
    border-color: rgba(244,63,94,0.40);
    color: #fca5a5;
    transform: rotate(90deg);
}

/* Modal tabs */
.sc-modal-tabs {
    display: flex;
    gap: 2px;
    padding: 10px 24px 0;
    border-bottom: 1px solid rgba(245,158,11,0.10);
    flex-shrink: 0;
}

.sc-modal-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-3);
    transition: var(--transition);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    letter-spacing: 0.01em;
}

.sc-modal-tab:hover { color: var(--text-2); background: rgba(245,158,11,0.07); }
.sc-modal-tab.active {
    color: var(--accent);
    background: rgba(245,158,11,0.09);
    border-bottom-color: var(--accent);
    font-weight: 800;
}

/* Preview pane */
.sc-modal-preview-wrap {
    width: 100%; height: 490px;
    position: relative; background: #ffffff; flex-shrink: 0;
}

.sc-modal-loader {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: #08091e; z-index: 2;
}

.sc-modal-loader i {
    font-size: 34px;
    color: var(--accent);
    animation: scSpin 1s linear infinite;
    filter: drop-shadow(0 0 14px var(--accent));
}

.sc-modal-iframe { width: 100%; height: 100%; border: none; display: block; }

/* Code pane */
.sc-modal-code-wrap {
    display: flex; flex-direction: column;
    max-height: 490px; background: #060717;
}

.sc-code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    border-bottom: 1px solid rgba(245,158,11,0.10);
    background: rgba(245,158,11,0.04);
    flex-shrink: 0;
}

.sc-code-filename {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-2);
    font-weight: 500;
}

.sc-code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid rgba(245,158,11,0.28);
    background: rgba(245,158,11,0.12);
    color: var(--accent-2);
    font-family: var(--font-body);
    transition: var(--transition);
    letter-spacing: 0.02em;
}

.sc-code-copy-btn:hover {
    background: linear-gradient(135deg, var(--accent), #d97706);
    color: #0a0d28;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245,158,11,0.45);
}

.sc-code-block {
    overflow: auto; flex: 1;
    margin: 0; padding: 20px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.72;
    color: #b8c4d8;
    background: transparent;
    white-space: pre;
}

.sc-code-block code { font-family: inherit; color: inherit; }

/* Modal footer */
.sc-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid rgba(245,158,11,0.10);
    flex-shrink: 0;
    background: rgba(245,158,11,0.02);
}

.sc-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 40px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-body);
    text-decoration: none;
    letter-spacing: 0.025em;
}

/* Copy — gold */
.sc-modal-action--copy {
    background: linear-gradient(135deg, var(--accent), #d97706);
    border: none;
    color: #0a0d28;
    flex: 1;
    box-shadow: var(--shadow-btn);
}

.sc-modal-action--copy:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(245,158,11,0.60);
}

/* Download — orange */
.sc-modal-action--download {
    background: linear-gradient(135deg,
        rgba(249,115,22,0.18),
        rgba(249,115,22,0.08)
    );
    border: 1.5px solid rgba(249,115,22,0.30);
    color: #fdba74;
    flex: 1;
}

.sc-modal-action--download:hover {
    transform: translateY(-2px);
    border-color: var(--orange);
    box-shadow: 0 8px 26px rgba(249,115,22,0.32);
    color: #fff7ed;
    background: rgba(249,115,22,0.24);
}

/* Open external */
.sc-modal-action--external {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.09);
    color: var(--text-3);
    padding: 12px 20px;
}

.sc-modal-action--external:hover {
    border-color: rgba(245,158,11,0.38);
    color: var(--text-1);
    background: var(--accent-soft);
    transform: translateY(-2px);
}

/* ============================================================
   CARD STAGGER ANIMATION DELAYS
   ============================================================ */
.sc-project-card:nth-child(1)  { animation-delay: 0.04s; }
.sc-project-card:nth-child(2)  { animation-delay: 0.08s; }
.sc-project-card:nth-child(3)  { animation-delay: 0.12s; }
.sc-project-card:nth-child(4)  { animation-delay: 0.16s; }
.sc-project-card:nth-child(5)  { animation-delay: 0.20s; }
.sc-project-card:nth-child(6)  { animation-delay: 0.24s; }
.sc-project-card:nth-child(7)  { animation-delay: 0.28s; }
.sc-project-card:nth-child(8)  { animation-delay: 0.32s; }
.sc-project-card:nth-child(9)  { animation-delay: 0.36s; }
.sc-project-card:nth-child(10) { animation-delay: 0.40s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1500px) {
    .sc-projects-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1200px) and (max-width: 1499px) {
    .sc-projects-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .sc-projects-grid { grid-template-columns: repeat(3, 1fr); }
    .sc-main-heading  { font-size: 52px; }
}

@media (min-width: 640px) and (max-width: 991px) {
    .sc-projects-grid { grid-template-columns: repeat(2, 1fr); }
    .sc-main-heading  { font-size: 40px; }
    .sc-faq-grid      { grid-template-columns: 1fr; }
    .sc-modal-preview-wrap { height: 360px; }
}

@media (max-width: 639px) {
    .sc-container        { padding: 0 16px; }
    .sc-main-heading     { font-size: 32px; letter-spacing: -0.02em; }
    .sc-sub-heading      { font-size: 15.5px; }
    .sc-steps-bar        { padding: 18px 20px; gap: 14px; }
    .sc-step-arrow       { display: none; }
    .sc-filter-section   { flex-direction: column; align-items: stretch; }
    .sc-filter-buttons   { justify-content: center; }
    .sc-filter-btn       { padding: 9px 14px; font-size: 12px; }
    .sc-search-wrapper   { width: 100%; min-width: unset; }
    .sc-projects-grid    { grid-template-columns: 1fr; gap: 16px; }
    .sc-faq-grid         { grid-template-columns: 1fr; }
    .sc-faq-heading      { font-size: 28px; }
    .sc-faq-subheading   { font-size: 14.5px; }
    .sc-faq-question     { font-size: 14px; padding: 18px 20px; }
    .sc-faq-answer > div { padding: 12px 20px 20px; font-size: 13.5px; }
    .sc-submit-section   { padding: 44px 24px; }
    .sc-submit-section h3{ font-size: 24px; }
    .sc-modal            { border-radius: 18px; }
    .sc-modal-header     { padding: 14px 16px 10px; }
    .sc-modal-footer     { flex-direction: column; padding: 14px 16px; }
    .sc-modal-preview-wrap  { height: 290px; }
    .sc-modal-code-wrap     { max-height: 330px; }
    .sc-modal-tabs          { padding: 8px 14px 0; }
    .sc-project-actions     { flex-wrap: wrap; }
}

@media (max-width: 420px) {
    .sc-main-heading  { font-size: 26px; }
    .sc-project-thumb { height: 142px; }
    .sc-faq-heading   { font-size: 24px; }
    .sc-tools-bar     { gap: 7px; }
    .sc-tool-badge    { padding: 5px 11px; font-size: 11px; }
    .sc-steps-bar     { max-width: 100%; }
}