@import url('https://fonts.googleapis.com/css?family=Karla');
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --c-white: #ffffff;
    --c-black: #000000;
    --c-amber: #ffb928;
    --c-gray-12: rgb(8,8,12);
    --c-gray-120: rgb(14,14,18);
    --c-gray-64: rgb(24,24,28);
    --c-gray-74: rgb(28,28,32);
    --c-gray-50: rgb(20,20,24);
    --c-tab-active-bg: rgb(38,38,42);
    --c-btn-hover-bg: rgb(50,50,54);
    --c-gray-60: rgb(62,62,66);
    --c-gray-54: rgb(42,42,46);
    --c-gray-94: rgb(90,90,94);
    --c-amber-focus: rgba(233,178,74,.48);
    --c-gray-name: rgb(126,126,130);
    --c-gray-150: rgb(150,150,150);
    --c-gray-aaa: rgb(170,170,174);
    --c-gray-180: rgb(180,180,184);
    --c-gray-placeholder: rgb(192,192,192);
    --c-white-012: rgba(255,255,255,.15);
    --c-gray-eee-016: rgba(220,220,220,.16);
    --c-scrollbar-thumb: var(--c-gray-94);
    --c-scrollbar-thumb-hover: rgb(120,120,124);
    --c-white-006: rgba(255,255,255,0.06);
    --c-gray-ddd: rgb(221,221,221);
    --c-gray-eee: rgb(238,238,238);
    --c-text-white: #fff;
    --c-text-light: rgb(204,204,204);
    --c-brown-3a2c15: #3a2c15;
    --c-cream-ffeedd: #ffeedd;
    --c-amber-e9b24a: #e9b24a;
    --c-amber-080: rgba(255,185,40,.8);
    --c-black-050: rgba(0,0,0,0.5);
    --c-black-040: rgba(0,0,0,.40);
    --c-black-018: rgba(0,0,0,0.18);
    --c-black-010: rgba(0,0,0,.10);
    --c-black-025: rgba(0,0,0,0.25);
    --c-white-050: rgba(255,255,255,.5);
    --c-white-010: rgba(255,255,255,0.10);
    --glow-amber-020: rgba(255,185,40,.20);
    --glow-amber-010: rgba(255,185,40,.10);
    --glow-amber-016: rgba(255,185,40,.16);
    --glow-amber-008: rgba(255,185,40,.08);
    --c-amber-ffc107-050: rgba(255,193,7,.50);
    --c-amber-045: rgba(255,185,40,.45);
    --c-amber-ffd54f: #ffd54f;
    --c-amber-ffc85a: #ffc85a;
    --c-amber-ffc107: #ffc107;
    --c-amber-f59e0b: #f59e0b;
    --c-purple-7f38ec: #7f38ec;
    --c-purple-7f38ec-028: rgba(127,56,236,.28);
    --c-orange-ff8528: #ff8528;
    --c-red-ff073a: rgb(255,7,58);
    --c-red-f44336: #f44336;
    --c-red-f44336-045: rgba(244,67,54,.45);
    --c-red-f44336-012: rgba(244,67,54,.12);
    --c-red-3b0f0f: #3b0f0f;
    --c-red-e74c3c: #e74c3c;
    --c-yellow-010: rgba(255,208,0,.10);
    --c-yellow-040: rgba(255,208,0,.40);
    --c-yellow-028: rgba(255,208,0,.28);
    --c-yellow-e6c400: #e6c400;
    --c-green-2ecc71-045: rgba(46,204,113,.45);
    --c-green-2ecc71: #2ecc71;
    --c-green-002b1f: #002b1f;
    --c-green-10b981: #10b981;
    --c-green-0f3b1a: #0f3b1a;
    --c-blue-2c3e50: #2c3e50;
    --c-blue-3498db: #3498db;
    --max-shell: 1180px;
    --nav-height: 74px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    color: var(--c-gray-eee);
    background: radial-gradient(circle at top left, var(--glow-amber-010), transparent 26%), radial-gradient(circle at top right, var(--c-purple-7f38ec-028), transparent 18%), linear-gradient(180deg, var(--c-gray-120) 0%, var(--c-gray-12) 100%);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

main {
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--c-white-006);
}

::-webkit-scrollbar-thumb {
    background: var(--c-scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--c-scrollbar-thumb-hover);
        background-clip: padding-box;
    }

/* 1. Branding */
.cv-logo .frame {
    stroke: var(--c-white-012);
}

.cv-logo .spine {
    stroke: var(--c-gray-placeholder);
}

.cv-logo .bar {
    stroke: var(--c-amber);
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .brand .cv-logo {
        display: block;
        filter: drop-shadow(0 0 18px var(--glow-amber-020)) drop-shadow(0 0 10px var(--glow-amber-016)) drop-shadow(0 0 4px var(--glow-amber-008));
        transition: transform .18s ease, filter .18s ease;
    }

    .brand:hover .cv-logo {
        transform: scale(1.04);
        filter: drop-shadow(0 0 22px var(--glow-amber-020)) drop-shadow(0 0 10px var(--glow-amber-016)) drop-shadow(0 0 6px var(--glow-amber-010));
        cursor: pointer;
    }

#navimgcont {
    display: flex;
    align-items: center;
    justify-content: center;
}

    #navimgcont .nav-logo {
        width: 40px;
        height: 40px;
    }

/* 2. Header */
.mainheader {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: rgba(14,14,18,.78);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--c-white-012);
    box-shadow: 0 10px 34px var(--c-black-018);
}

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

.nav-tab a {
    display: inline-block;
    padding: 11px 14px;
    color: var(--c-text-light);
    border-radius: 12px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

    .nav-tab a:hover {
        background: var(--c-tab-active-bg);
        color: var(--c-white);
        transform: translateY(-1px);
    }

/* 3. Buttons */
.strt-code,
.strt-code-main,
.hero-link {
    border-radius: 14px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.strt-code {
    padding: 11px 16px;
    color: var(--c-gray-120);
    background: linear-gradient(135deg, var(--c-amber), var(--c-amber-ffc107));
    box-shadow: 0 10px 26px var(--glow-amber-020);
    font-weight: bold;
}

    .strt-code:hover,
    .strt-code-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px var(--glow-amber-020);
    }

.strt-code-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    padding: 15px 22px;
    color: var(--c-gray-120);
    background: linear-gradient(135deg, var(--c-amber), var(--c-amber-ffc85a));
    font-size: 17px;
    font-weight: bold;
    box-shadow: 0 14px 36px var(--glow-amber-020);
}

.hero-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    padding: 14px 20px;
    background: var(--c-gray-54);
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-eee);
    font-weight: bold;
}

    .hero-link:hover {
        background: var(--c-btn-hover-bg);
        border-color: var(--c-amber-045);
        transform: translateY(-2px);
    }

/* 4. Hero shell */
.featured {
    position: relative;
    padding: 56px 24px 30px;
}

.featured-ai {
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: center;
}

.general#picture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.background {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 18%, var(--glow-amber-020), transparent 22%), radial-gradient(circle at 84% 10%, var(--c-purple-7f38ec-028), transparent 18%), radial-gradient(circle at 75% 60%, var(--glow-amber-010), transparent 20%);
    opacity: .9;
}

.featured_elem,
.section-shell,
.trust-strip {
    width: 100%;
    max-width: var(--max-shell);
    margin: 0 auto;
}

.featured_elem {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 46px;
    align-items: center;
}

.featured_elem_left {
    max-width: 620px;
}

.featured_elem_right {
    position: relative;
}

.mobile-featured_elem {
    display: none;
}

/* 5. Typography */
.hero-kicker,
.section-kicker,
.hero-editor-tab,
.hero-pane-title,
.hero-folder-title,
.hero-app-menu,
.hero-app-project,
.hero-tool,
.hero-footer-badge,
.preview-flow-badge,
.preview-panel-title,
.ai-input-step-label {
    font-family: Consolas, Monaco, 'Courier New', monospace;
}

.hero-kicker,
.section-kicker {
    margin: 0 0 14px;
    color: var(--c-amber-080);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 12px;
    font-weight: bold;
}

.featured_elem h1,
.mobile-featured_elem h1 {
    margin: 0;
    color: var(--c-white);
    font-size: 60px;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.featured_elem h2 {
    margin: 22px 0 0;
    color: var(--c-text-light);
    font-size: 21px;
    line-height: 1.7;
    font-weight: normal;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

/* 6. Hero highlights */
.hero-highlights {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

    .hero-highlights li {
        position: relative;
        padding: 14px 16px 14px 38px;
        min-height: 70px;
        display: flex;
        align-items: center;
        background: linear-gradient(180deg, var(--c-gray-74), var(--c-gray-64));
        border: 1px solid var(--c-white-012);
        border-radius: 16px;
        color: var(--c-gray-ddd);
        box-shadow: 0 10px 28px var(--c-black-018);
    }

        .hero-highlights li:before,
        .feature-bullets li:before,
        .feature-bullets-centered li:before {
            content: "";
            position: absolute;
            left: 16px;
            top: 50%;
            width: 10px;
            height: 10px;
            margin-top: -5px;
            border-radius: 50%;
            background: var(--c-amber);
            box-shadow: 0 0 0 6px var(--glow-amber-010);
        }

/* 7. Hero studio mockup */
.hero-studio {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    padding: 18px 0;
}

.hero-studio-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    pointer-events: none;
}

.hero-studio-glow-left {
    width: 180px;
    height: 180px;
    left: -22px;
    top: 80px;
    background: var(--glow-amber-016);
}

.hero-studio-glow-right {
    width: 220px;
    height: 220px;
    right: -18px;
    top: -8px;
    background: var(--c-purple-7f38ec-028);
}

.hero-app-frame {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid var(--c-white-012);
    background: linear-gradient(180deg, rgba(20,20,24,.98), rgba(8,8,12,.98));
    box-shadow: 0 28px 70px var(--c-black-040);
}

.hero-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-white-012);
    background: rgba(24,24,28,.92);
}

.hero-app-menu {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--c-gray-180);
    font-size: 12px;
}

.hero-app-project {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--c-gray-placeholder);
    font-size: 12px;
}

.hero-app-project-label {
    color: var(--c-gray-150);
}

.hero-app-project-value {
    color: var(--c-amber);
    white-space: nowrap;
}

.hero-app-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-ai-pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--c-yellow-010);
    border: 1px solid var(--c-amber-045);
    color: var(--c-amber-ffd54f);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .08em;
}

.hero-app-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-white-012);
    background: rgba(14,14,18,.88);
}

.hero-tool-ai {
    background: var(--c-yellow-010);
    border-color: var(--c-amber-045);
    color: var(--c-amber);
}

.hero-tool-ai:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--c-amber);
    box-shadow: 0 0 0 4px var(--glow-amber-010);
    vertical-align: middle;
}
.hero-tool {
    padding: 7px 11px;
    border-radius: 10px;
    background: transparent;
    color: var(--c-gray-placeholder);
    font-size: 12px;
    border: 1px solid transparent;
}

    .hero-tool.active {
        background: var(--c-yellow-010);
        border-color: var(--c-amber-045);
        color: var(--c-amber);
    }

.hero-app-body {
    display: grid;
    grid-template-columns: 180px 1fr 280px;
    min-height: 430px;
}

.hero-files-pane {
    padding: 14px 12px;
    border-right: 1px solid var(--c-white-012);
    background: linear-gradient(180deg, var(--c-gray-74), var(--c-gray-64));
}

.hero-pane-title {
    margin-bottom: 14px;
    color: var(--c-white);
    font-size: 13px;
    font-weight: bold;
}

.hero-folder {
    margin-bottom: 15px;
}

.hero-folder-title {
    margin-bottom: 8px;
    color: var(--c-gray-placeholder);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.hero-file-item {
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    color: var(--c-gray-ddd);
    font-size: 13px;
    border: 1px solid transparent;
}

    .hero-file-item.active {
        background: var(--c-tab-active-bg);
        border-color: var(--c-white-012);
        color: var(--c-white);
    }

.hero-editor-pane {
    min-width: 0;
    border-right: 1px solid var(--c-white-012);
    background: linear-gradient(180deg, var(--c-gray-120), var(--c-gray-12));
}

.hero-editor-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--c-white-012);
    background: rgba(20,20,24,.94);
}

.hero-editor-tab {
    min-width: 90px;
    padding: 12px 14px;
    text-align: center;
    color: var(--c-gray-placeholder);
    font-size: 12px;
    border-right: 1px solid var(--c-white-012);
}

    .hero-editor-tab.active {
        color: var(--c-white);
        box-shadow: inset 0 -2px 0 var(--c-amber);
    }

.hero-editor-surface {
    padding: 18px 16px 20px;
    font-family: 'Source Code Pro', Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.9;
    color: var(--c-gray-eee);
}

.hero-code-row {
    color: var(--c-gray-eee);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .hero-code-row.amber {
        color: var(--c-amber-ffd54f);
    }

    .hero-code-row.purple {
        color: var(--c-purple-7f38ec);
    }

    .hero-code-row.row-num {
        color: var(--c-blue-3498db);
    }

.indent-1 {
    padding-left: 16px;
}

.indent-2 {
    padding-left: 32px;
}

.indent-3 {
    padding-left: 48px;
}

.hero-preview-pane {
    background: linear-gradient(180deg, #f3f4f7, #eceef3);
}

.hero-preview-header {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    color: #253046;
    font-size: 12px;
    font-weight: bold;
    background: rgba(240,240,242,.85);
}

.hero-preview-canvas {
    padding: 16px 18px;
    color: #1f2a44;
}

.hero-preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
}

.hero-preview-logo {
    font-size: 14px;
    font-weight: bold;
    color: #1c2740;
}

    .hero-preview-logo span {
        color: #4b7cff;
    }

.hero-preview-burger {
    width: 18px;
}

    .hero-preview-burger span {
        display: block;
        height: 2px;
        margin-bottom: 4px;
        background: #1c2740;
        border-radius: 999px;
    }

.hero-preview-hero {
    text-align: center;
    padding: 26px 8px 0;
}

.hero-preview-title {
    margin-bottom: 18px;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
    color: #1f2a44;
}

.hero-preview-text {
    width: 88%;
    height: 10px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: rgba(80,92,120,.28);
}

    .hero-preview-text.short {
        width: 60%;
    }

.hero-preview-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.hero-preview-btn {
    width: 102px;
    height: 36px;
    border-radius: 10px;
}

    .hero-preview-btn.primary {
        background: #4b7cff;
    }

    .hero-preview-btn.secondary {
        border: 2px solid #4b7cff;
        background: transparent;
    }

.hero-app-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--c-white-012);
    background: rgba(14,14,18,.88);
}

.hero-footer-badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--c-tab-active-bg);
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-ddd);
    font-size: 12px;
}








.hero-ai-overlay {
    position: absolute;
    right: -18px;
    bottom: 88px;
    z-index: 3;
    width: 260px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(28,28,32,.98), rgba(20,20,24,.98));
    border: 1px solid var(--c-white-012);
    box-shadow: 0 20px 44px var(--c-black-040), 0 0 0 1px var(--glow-amber-008);
}

.hero-ai-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.hero-ai-overlay-title {
    color: var(--c-white);
    font-size: 12px;
    font-weight: bold;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero-ai-overlay-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--c-yellow-010);
    border: 1px solid var(--c-amber-045);
    color: var(--c-amber);
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}

.hero-ai-chat-bubble {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 10px;
}

.hero-ai-chat-bubble-user {
    background: var(--c-brown-3a2c15);
    border: 1px solid var(--c-amber-045);
    color: var(--c-cream-ffeedd);
    box-shadow: 0 8px 20px var(--c-black-018);
}

.hero-ai-chat-bubble-ai {
    background: linear-gradient(180deg, var(--c-gray-64), var(--c-gray-74));
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-ddd);
}

.hero-ai-overlay-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.hero-ai-action {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--c-tab-active-bg);
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-ddd);
    font-size: 11px;
    font-weight: 600;
}

.hero-ai-action-primary {
    background: linear-gradient(135deg, var(--c-amber), var(--c-amber-ffc85a));
    border-color: transparent;
    color: var(--c-gray-120);
}




/* 8. Trust strip */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
    padding: 0 24px 44px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    text-align: left;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--c-gray-64), var(--c-gray-74));
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-ddd);
    font-weight: bold;
    box-shadow: 0 12px 26px var(--c-black-018);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .trust-item:hover {
        transform: translateY(-2px);
        border-color: var(--c-amber-045);
        box-shadow: 0 18px 34px var(--c-black-018), 0 0 0 1px var(--glow-amber-008);
    }

.trust-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--c-tab-active-bg), var(--c-gray-54));
    border: 1px solid var(--c-white-012);
    flex: 0 0 auto;
}

    .trust-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: var(--c-amber);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.trust-text {
    line-height: 1.45;
}

/* 9. Generic sections */
.content-section {
    position: relative;
    padding: 34px 24px 38px;
}

    .content-section + .content-section {
        padding-top: 18px;
    }

.section-shell {
    padding: 42px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(28,28,32,.96), rgba(20,20,24,.96));
    border: 1px solid var(--c-white-012);
    box-shadow: 0 22px 48px var(--c-black-018);
}

    .section-shell h3 {
        margin: 0;
        color: var(--c-white);
        font-size: 40px;
        line-height: 1.15;
        letter-spacing: -0.03em;
    }

    .section-shell p {
        margin: 18px 0 0;
        max-width: 860px;
        color: var(--c-text-light);
        font-size: 18px;
        line-height: 1.8;
    }

.feature-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.feature-inline-item {
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--c-tab-active-bg);
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-ddd);
}

.feature-grid,
.pricing-grid,
.usecase-grid {
    display: grid;
    gap: 18px;
    margin-top: 30px;
}

.feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.usecase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card,
.pricing-card,
.usecase-item,
.callout-box {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--c-gray-74), var(--c-gray-64));
    border: 1px solid var(--c-white-012);
    box-shadow: 0 16px 34px var(--c-black-018);
}

.feature-card,
.pricing-card {
    padding: 24px;
}

    .feature-card:before,
    .pricing-card:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 20px 20px 0 0;
        background: linear-gradient(90deg, var(--c-amber), transparent);
        opacity: .9;
    }

    .feature-card h4,
    .pricing-card h4 {
        margin: 0;
        color: var(--c-white);
        font-size: 21px;
    }

    .feature-card p,
    .pricing-card p {
        margin: 14px 0 0;
        color: var(--c-text-light);
        font-size: 16px;
        line-height: 1.75;
    }

/* 10. Two-column sections */
.two-col-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 38px;
    align-items: center;
}

.two-col-text,
.two-col-media {
    min-width: 0;
}

.two-col-media {
    width: 100%;
}

    .two-col-media img {
        border-radius: 24px;
        border: 1px solid var(--c-white-012);
        background: linear-gradient(180deg, var(--c-gray-74), var(--c-gray-64));
        box-shadow: 0 28px 60px var(--c-black-040), 0 0 0 1px var(--glow-amber-008);
    }

/* 11. Bullets and callouts */
.feature-bullets,
.feature-bullets-centered {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
}

    .feature-bullets li,
    .feature-bullets-centered li {
        position: relative;
        padding: 10px 0 10px 28px;
        color: var(--c-gray-ddd);
    }

.callout-shell {
    text-align: center;
}

    .callout-shell p {
        margin-left: auto;
        margin-right: auto;
    }

.callout-box {
    margin: 28px auto 0;
    padding: 24px 26px;
    max-width: 860px;
    color: var(--c-white);
    font-size: 22px;
    line-height: 1.6;
    background: linear-gradient(135deg, var(--c-brown-3a2c15), var(--c-gray-64));
    border: 1px solid var(--c-amber-045);
    box-shadow: 0 0 0 1px var(--glow-amber-008), 0 18px 40px var(--c-black-025);
}

.seo-support {
    color: var(--c-gray-placeholder);
    font-size: 15px;
}

.section-support-line {
    margin-top: 22px !important;
    color: var(--c-amber-080) !important;
    font-size: 17px !important;
    font-weight: bold;
}

.feature-bullets-centered {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 24px;
}

    .feature-bullets-centered li {
        margin: 0;
    }

.usecase-item {
    padding: 18px 20px;
    text-align: center;
    color: var(--c-gray-ddd);
    font-weight: bold;
}

.final-cta-shell {
    text-align: center;
    background: radial-gradient(circle at top center, var(--glow-amber-016), transparent 28%), linear-gradient(180deg, rgba(28,28,32,.98), rgba(14,14,18,.98));
    border: 1px solid var(--c-amber-045);
    box-shadow: 0 0 0 1px var(--glow-amber-008), 0 24px 50px var(--c-black-025);
}

    .final-cta-shell p {
        margin-left: auto;
        margin-right: auto;
    }

.hero-actions-centered {
    justify-content: center;
}

/* 12. Preview workflow visual */
.preview-flow-visual,
.ai-input-visual {
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(28,28,32,.96), rgba(20,20,24,.96));
    border: 1px solid var(--c-white-012);
    box-shadow: 0 24px 48px var(--c-black-018);
}

.preview-flow-top {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.preview-flow-badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--c-yellow-010);
    border: 1px solid var(--c-amber-045);
    color: var(--c-amber);
    font-size: 12px;
    font-weight: bold;
}

    .preview-flow-badge.muted {
        background: var(--c-tab-active-bg);
        color: var(--c-gray-ddd);
        border-color: var(--c-white-012);
    }

.preview-flow-panels {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 16px;
    align-items: stretch;
}

.preview-code-panel,
.preview-live-panel {
    border-radius: 18px;
    overflow: hidden;
}

.preview-code-panel {
    padding: 16px;
    background: linear-gradient(180deg, var(--c-gray-120), var(--c-gray-12));
    border: 1px solid var(--c-white-012);
}

.preview-live-panel {
    padding: 16px;
    background: #f5f5f7;
    border: 1px solid rgba(0,0,0,.08);
}

.preview-panel-title {
    margin-bottom: 14px;
    color: var(--c-gray-ddd);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .08em;
}

    .preview-panel-title.dark {
        color: #1f2a44;
    }

.preview-code-line {
    height: 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-blue-3498db), rgba(52,152,219,.12));
}

    .preview-code-line.amber {
        background: linear-gradient(90deg, var(--c-amber-ffd54f), rgba(255,207,108,.10));
    }

    .preview-code-line.purple {
        background: linear-gradient(90deg, var(--c-purple-7f38ec), rgba(127,56,236,.10));
    }

    .preview-code-line.cyan {
        background: linear-gradient(90deg, var(--c-blue-3498db), rgba(0,248,255,.10));
    }

    .preview-code-line.w-86 {
        width: 86%;
    }

    .preview-code-line.w-78 {
        width: 78%;
    }

    .preview-code-line.w-72 {
        width: 72%;
    }

    .preview-code-line.w-68 {
        width: 68%;
    }

    .preview-code-line.w-52 {
        width: 52%;
    }

    .preview-code-line.w-44 {
        width: 44%;
    }

.preview-split-line {
    background: linear-gradient(180deg, transparent, var(--c-white-012), transparent);
    border-radius: 999px;
}

.preview-live-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.preview-live-logo {
    width: 78px;
    height: 14px;
    border-radius: 999px;
    background: rgba(31,42,68,.85);
}

.preview-live-menu {
    width: 22px;
    height: 14px;
    border-radius: 6px;
    background: rgba(31,42,68,.18);
}

.preview-live-title {
    width: 72%;
    height: 16px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(31,42,68,.86);
}

.preview-live-text {
    width: 90%;
    height: 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(80,92,120,.28);
}

    .preview-live-text.short {
        width: 62%;
    }

.preview-live-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.preview-live-btn {
    width: 96px;
    height: 34px;
    border-radius: 10px;
}

    .preview-live-btn.primary {
        background: #4b7cff;
    }

    .preview-live-btn.secondary {
        border: 2px solid #4b7cff;
        background: transparent;
    }

/* 13. AI input visual */
.ai-input-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.ai-input-step {
    flex: 1 1 0;
    min-width: 0;
}

.ai-input-step-label {
    margin-bottom: 10px;
    color: var(--c-amber-080);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ai-input-card {
    min-height: 160px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--c-white-012);
    box-shadow: 0 16px 30px var(--c-black-018);
}

    .ai-input-card.dark {
        background: linear-gradient(180deg, var(--c-gray-120), var(--c-gray-12));
    }

    .ai-input-card.visual {
        background: linear-gradient(180deg, var(--c-gray-74), var(--c-gray-64));
    }

    .ai-input-card.project {
        display: flex;
        gap: 10px;
        align-items: stretch;
        background: linear-gradient(180deg, var(--c-gray-120), var(--c-gray-12));
    }

.ai-input-line {
    height: 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-amber-ffd54f), rgba(255,207,108,.10));
}

    .ai-input-line.w-88 {
        width: 88%;
    }

    .ai-input-line.w-72 {
        width: 72%;
    }

    .ai-input-line.w-60 {
        width: 60%;
    }

.ai-visual-box {
    height: 100%;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid var(--c-white-012);
    padding: 12px;
}

.ai-visual-header {
    width: 64%;
    height: 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--c-amber-045);
}

.ai-visual-content {
    height: 92px;
    border-radius: 12px;
    background: radial-gradient(circle at 24% 28%, var(--glow-amber-020), transparent 24%), linear-gradient(135deg, var(--c-purple-7f38ec-028), var(--c-gray-54));
}

.ai-project-files {
    width: 34%;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--c-gray-74), var(--c-gray-54));
    border: 1px solid var(--c-white-012);
}

.ai-project-preview {
    flex: 1;
    border-radius: 12px;
    background: #f5f5f7;
    border: 1px solid rgba(0,0,0,.08);
}

.ai-input-arrow {
    color: var(--c-amber);
    font-size: 30px;
    font-weight: bold;
    opacity: .9;
}


.billing-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.billing-top-text {
    min-width: 0;
}

.billing-top-action {
    flex: 0 0 auto;
    padding-top: 38px;
}

.billing-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--c-gray-54);
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-eee);
    font-weight: 600;
    box-shadow: 0 12px 24px var(--c-black-018);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

    .billing-page-link:hover {
        transform: translateY(-2px);
        background: var(--c-btn-hover-bg);
        border-color: var(--c-amber-045);
        box-shadow: 0 18px 30px var(--c-black-018), 0 0 0 1px var(--glow-amber-008);
    }

.dashboard-visual {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(28,28,32,.96), rgba(20,20,24,.96));
    border: 1px solid var(--c-white-012);
    box-shadow: 0 20px 40px var(--c-black-018);
}

.dashboard-row {
    display: grid;
    gap: 14px;
}

.dashboard-row-top {
    grid-template-columns: 1.18fr .82fr;
}

.dashboard-row-mid {
    grid-template-columns: 1.05fr .95fr;
}

.dashboard-card {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--c-gray-74), var(--c-gray-64));
    border: 1px solid var(--c-white-012);
    box-shadow: 0 10px 22px var(--c-black-018);
}

.dashboard-card-kicker {
    margin-bottom: 6px;
    color: var(--c-gray-placeholder);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-family: Consolas, Monaco, 'Courier New', monospace;
}

.dashboard-card-title {
    color: var(--c-white);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 14px;
}

.dashboard-pill {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--c-tab-active-bg);
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-ddd);
}

    .dashboard-pill.active {
        background: var(--c-yellow-010);
        border-color: var(--c-amber-045);
        color: var(--c-amber);
    }

    .dashboard-pill.muted {
        color: var(--c-gray-placeholder);
    }

.dashboard-meter {
    margin-top: 12px;
}

    .dashboard-meter.compact {
        margin-top: 16px;
    }

.dashboard-meter-label {
    color: var(--c-gray-placeholder);
    font-size: 12px;
    margin-bottom: 4px;
}

.dashboard-meter-value {
    color: var(--c-white);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.dashboard-bar {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: var(--c-gray-54);
    overflow: hidden;
}

.dashboard-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-amber), var(--c-amber-ffc85a));
    box-shadow: 0 0 14px var(--glow-amber-020);
}

    .dashboard-bar-fill.w-97 {
        width: 97%;
    }

    .dashboard-bar-fill.w-92 {
        width: 92%;
    }

    .dashboard-bar-fill.w-100 {
        width: 100%;
    }

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.dashboard-stat-label {
    color: var(--c-gray-placeholder);
    font-size: 11px;
    margin-bottom: 4px;
}

.dashboard-stat-value {
    color: var(--c-white);
    font-size: 16px;
    font-weight: 700;
}

.dashboard-line-chart {
    position: relative;
    height: 150px;
    margin-top: 14px;
    border-radius: 12px;
    background: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    background-size: 34px 34px, 34px 34px, auto;
    overflow: hidden;
}

    .dashboard-line-chart span {
        position: absolute;
        bottom: 20px;
        width: 6px;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--c-gray-ddd), var(--c-white));
        box-shadow: 0 0 12px rgba(255,255,255,.18);
    }

    .dashboard-line-chart .p1 {
        left: 8%;
        height: 34px;
    }

    .dashboard-line-chart .p2 {
        left: 18%;
        height: 12px;
    }

    .dashboard-line-chart .p3 {
        left: 30%;
        height: 18px;
    }

    .dashboard-line-chart .p4 {
        left: 42%;
        height: 10px;
    }

    .dashboard-line-chart .p5 {
        left: 56%;
        height: 82px;
    }

    .dashboard-line-chart .p6 {
        left: 68%;
        height: 54px;
    }

    .dashboard-line-chart .p7 {
        left: 80%;
        height: 38px;
    }

    .dashboard-line-chart .p8 {
        left: 90%;
        height: 48px;
    }

.dashboard-donut-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0 2px;
}

.dashboard-donut {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient( var(--c-amber) 0 56%, #59ff2a 56% 94%, var(--c-blue-3498db) 94% 100% );
    position: relative;
    box-shadow: 0 0 0 1px var(--c-white-012);
}

    .dashboard-donut:after {
        content: "";
        position: absolute;
        inset: 22px;
        border-radius: 50%;
        background: linear-gradient(180deg, var(--c-gray-74), var(--c-gray-64));
        box-shadow: inset 0 0 0 1px var(--c-white-012);
    }



    /* Chat Visual Mockup*/
.ai-chat-visual {
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(28,28,32,.96), rgba(20,20,24,.96));
    border: 1px solid var(--c-white-012);
    box-shadow: 0 24px 48px var(--c-black-018);
}

.ai-chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.ai-chat-title {
    color: var(--c-white);
    font-size: 12px;
    font-weight: bold;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai-chat-chip {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--c-yellow-010);
    border: 1px solid var(--c-amber-045);
    color: var(--c-amber);
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}

.ai-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-chat-msg {
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--c-white-012);
}

.ai-chat-msg-user {
    background: var(--c-brown-3a2c15);
    border-color: var(--c-amber-045);
    color: var(--c-cream-ffeedd);
}

.ai-chat-msg-ai {
    background: linear-gradient(180deg, var(--c-gray-64), var(--c-gray-74));
    color: var(--c-gray-ddd);
}

.ai-chat-msg-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 88px;
    padding-top: 14px;
    padding-bottom: 14px;
}

    .ai-chat-msg-typing span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--c-amber);
        opacity: .45;
        animation: aiTypingPulse 1.2s infinite ease-in-out;
    }

        .ai-chat-msg-typing span:nth-child(2) {
            animation-delay: .15s;
        }

        .ai-chat-msg-typing span:nth-child(3) {
            animation-delay: .3s;
        }

@keyframes aiTypingPulse {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .35;
    }

    40% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.ai-chat-context-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ai-chat-context-chip {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--c-tab-active-bg);
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-ddd);
    font-size: 11px;
    font-weight: 600;
}

    .ai-chat-context-chip.active {
        background: var(--c-yellow-010);
        border-color: var(--c-amber-045);
        color: var(--c-amber);
    }

.ai-chat-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.ai-chat-action {
    padding: 9px 12px;
    border-radius: 999px;
    background: var(--c-tab-active-bg);
    border: 1px solid var(--c-white-012);
    color: var(--c-gray-ddd);
    font-size: 12px;
    font-weight: 600;
}

.ai-chat-action-primary {
    background: linear-gradient(135deg, var(--c-amber), var(--c-amber-ffc85a));
    border-color: transparent;
    color: var(--c-gray-120);
}

.ai-chat-code-preview {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--c-white-012);
}

.ai-chat-code-title {
    margin-bottom: 10px;
    color: var(--c-gray-placeholder);
    font-size: 11px;
    font-weight: bold;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai-chat-code-line {
    font-family: 'Source Code Pro', Consolas, Monaco, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .92;
}

    .ai-chat-code-line.blue {
        color: var(--c-blue-3498db);
    }

    .ai-chat-code-line.amber {
        color: var(--c-amber-ffd54f);
    }

    .ai-chat-code-line.gray {
        color: var(--c-gray-ddd);
    }

    .ai-chat-code-line.purple {
        color: var(--c-purple-7f38ec);
    }
@media (max-width: 1080px) {
    .dashboard-row-top,
    .dashboard-row-mid {
        grid-template-columns: 1fr;
    }
}

/* 14. Responsive */
@media (max-width: 1180px) {
    .hero-app-body {
        grid-template-columns: 160px 1fr 240px;
    }
    .hero-ai-overlay {
        right: 8px;
        bottom: 82px;
        width: 240px;
    }
}

@media (max-width: 1080px) {
    .featured_elem {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .featured_elem_left {
        max-width: 760px;
    }

    .featured_elem_right {
        max-width: 760px;
    }

    .hero-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-col-layout {
        grid-template-columns: 1fr;
    }

    .trust-strip,
    .pricing-grid,
    .usecase-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .hero-studio {
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-app-body {
        grid-template-columns: 160px 1fr;
    }

    .hero-preview-pane {
        display: none;
    }

    .ai-input-visual {
        display:none;
    }

    .ai-input-arrow {
        transform: rotate(90deg);
    }

    .ai-input-step {
        width: 100%;
    }

    .hero-ai-overlay {
        display: none;
    }
}


@media (max-width: 900px) {
    .nav-tab {
        display: none;
    }

    .mainheader {
        padding: 0 18px;
    }
}

@media (max-width: 780px) {
    .mainheader {
        height: auto;
        padding: 16px 18px;
        flex-wrap: wrap;
        gap: 12px;
    }


    .nav {
        flex-wrap: wrap;
    }

    .featured {
        padding: 34px 16px 22px;
    }

    .content-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .featured_elem h1,
    .mobile-featured_elem h1 {
        font-size: 42px;
    }

    .featured_elem h2 {
        font-size: 18px;
    }

    .section-shell {
        padding: 28px 22px;
        border-radius: 22px;
    }

        .section-shell h3 {
            font-size: 30px;
        }

        .section-shell p {
            font-size: 16px;
        }

    .hero-highlights,
    .trust-strip,
    .pricing-grid,
    .usecase-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .hero-highlights {
        gap: 10px;
    }

    #hero .featured_elem_right {
        display: none;
    }

    #preview .two-col-media,
    #visual .two-col-media {
        display: none;
    }

    .two-col-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hero-app-topbar {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .hero-app-menu {
        display: none;
    }

    .hero-app-body {
        grid-template-columns: 1fr;
    }

    .hero-files-pane {
        display: none;
    }

    .hero-app-footer {
        gap: 8px;
    }

    .preview-flow-panels {
        grid-template-columns: 1fr;
    }

    .preview-split-line {
        display: none;
    }

    .callout-box {
        font-size: 18px;
    }


    .billing-top-row {
        flex-direction: column;
        align-items: stretch;
    }

    .billing-top-action {
        padding-top: 0;
    }

    .billing-page-link {
        width: 100%;
    }

    .ai-chat-visual {
        padding: 16px;
        border-radius: 20px;
    }

    .ai-chat-msg {
        font-size: 13px;
    }
}

@media (max-width: 560px) {

    .featured_elem h1,
    .mobile-featured_elem h1 {
        font-size: 36px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .strt-code-main,
    .hero-link {
        width: 100%;
    }
}