/* reset magique */
*,*::before, *::after {
    margin: 0px; 
    padding : 0px; 
    box-sizing: border-box; 
}

:root{
--colorprimary-1000: #030712; 
--colorprimary-900:hsla(223, 20%, 14%, 1); 
--colorprimary-800: #353941; 
--colorprimary-700:#4F5159; 
--text-1000: #030712;
--text-900: #1C202A;
--text-800: #353941;
--text-700: #4F5159;
--text-600: #6A6E78;
--text-500: #858A92;
--text-400: #A0A4AB;
--text-300: #BBC0C5;
--text-200: #D6D9DD;
--text-100: #F1F2F4;
--text-50: #F8F9FA;
--button-stroke: hsla(217, 90%, 84%, 1);
--bg-color: hsla(218, 33%, 94%, 1);
--white-bg: #FFFDFD;
--blue-Linear-1000: #3b82f6;
--green-Linear-1000: #10B981;
--main-blackmode-gradient: linear-gradient(154deg, (var(--colorprimary-900)) -2.56%, var(--colorprimary-700) 100%);
--secondary-blackmode: var(--colorprimary-900); 
--blackmode-writting: hsla(0, 0%, 100%, 1);
--primary-font: "Manrope", sans-serif;
--secondary-font:"Inter", Helvetica;
--title-font: var(--primary-font);
--body-font: var(--secondary-font);
font-size: 1rem; 

/* 
-------------------------------------------------------------
BORDER-RADIUS 
--------------------------------------------------------------
 */
 
--radius-full: 999px;
--button-header-radius: 12px; 

}

html, body {
    height: 100%;
    overflow-x: hidden;
}

body{
font-family: var(--body-font);
}

/* Scroll reveal (see script.js) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



/* 
-------------------------------------------------------------
0. Global Sections 
--------------------------------------------------------------
 */

 .hero{
display: flex;
 }

 .header-global{
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 1rem clamp(24px, 3rem, 60px);
    max-width: 100%;
    width : 100%; 
    gap : 4rem; 
    gap: auto; 
    flex-wrap: wrap;
 }

 .nav-links{
    display : flex; 
    gap : 2rem; 
    list-style: none;
    width: 100%;
    justify-content: center;

 }

 .button-header{
    display : flex; 
    gap: 8px;

 }

 .header--cta--def{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-decoration: none;
    padding: 10px 18px;
    border: solid 1px var(--text-200);
    border-radius : 10px;
    background-color: var(--text-50);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    width: 100%;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing : 0.4px;
    /* No color was ever set here, so it fell back to the browser's default
       link color (blue, purple once visited) instead of the intended
       neutral text color. */
    color: var(--text-900);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;


 }

 .header--cta--def:visited{
    color: var(--text-900);
 }

 .header--cta--def:hover{
    background-color: var(--text-100);
    border-color: var(--text-300);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    color: var(--blue-Linear-1000);
 }

 .header--cta--sec{
    display: inline-flex;
    justify-content: center;
    border-radius: 10px;
    padding: 10px 18px;
    background-color: var(--secondary-blackmode);
    color : var(--blackmode-writting);
    cursor: pointer;
    white-space: nowrap;
    align-items: center;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing : 0.4px;
    gap: 8px;


 }



 .header-menu{
display: flex;
width: 100%; 
justify-content: center;
align-items: flex-start;
gap: 20px;
flex: 1 1 0;
padding: 0rem 1rem;
flex-wrap: wrap; 
overflow: hidden; 
 }

 .header-title{
    font-size: 1rem;

 }

 .logo-wrapper{
    display : inline-flex; 
    padding : 2rem; 
    flex-wrap: wrap;
 }

 .logo-header{
    height: 2.5rem;

 }

 .nav-item{
    display: flex;
    gap: 0.5rem; 
    align-items: center;
    font-size: 0.75rem;

 }

 .item-description{
    font-weight: 500;
    font-size: 1rem;
    font-family: var(--title-font);
 }

 /* Current-page indicator (Header.astro's activePage prop) */
 .nav-item-wrap.is-current > .nav-item .item-description {
    color: var(--blue-Linear-1000);
 }

 .nav-item-wrap.is-current > .nav-item {
    position: relative;
 }

 .nav-item-wrap.is-current > .nav-item::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -6px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue-Linear-1000);
 }

 .burger-menu{
    display: none;
    
 }

 .overlay-mobile-content{
display : flex;
justify-content: space-evenly;
align-items: center;
max-width: 100%;
width: 100%; 

}

.burger-menu i{
font-size: 2rem;
color: var(--text-1000);
}

.logo-navigation{
    display: flex;
    max-width: 100%;
    width: 100%;
}

@media (min-width: 769px) {
    .logo-navigation {
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: rgba(255, 253, 253, 0.72);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--text-100);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
}


.button--info{
    padding : 14px 24px;
    border-radius: var(--button-header-radius);
    border-color: var(--button-stroke);
    background-color: var(--text-50); 
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 1.05px;
}


/*
-------------------------------------------------------------
MEGAMENU — desktop--submenu-Tab (nodes 289:162209 · 339:4191 · 339:4190 · 289:162208)
--------------------------------------------------------------
*/

/* Positioning context for the absolute dropdown */
.header-global {
    position: relative;
}

.nav-item{
    cursor : pointer;
    /* padding + negative margin: bigger focus/hit target without shifting the
       visible layout (gap between items stays exactly as designed) */
    padding: 8px 12px;
    margin: -8px -12px;
    /* Without an explicit color, a real <a href> nav item falls back to the
       browser's default link color (blue, purple once visited) — this beats
       a plain class selector on specificity, so it has to be set here AND
       reasserted against :visited explicitly. Same story for the default
       underline, which no <a> in this file gets for free. */
    color: var(--text-900);
    text-decoration: none;
}

.nav-item:visited {
    color: var(--text-900);
}

/* Keyboard focus — soft rounded glow instead of the browser's default blue
   outline, only shown for keyboard navigation (:focus-visible), never on click */
.nav-item:focus-visible,
.megamenu-tem:focus-visible,
.header--cta--def:focus-visible,
.header--cta--sec:focus-visible,
#burgerBtn:focus-visible {
    outline: none;
    border-radius: 3rem;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
}


/* ── Panel ──
   Shown via .nav-item-wrap-is-open (toggled on click by script.js), the same
   way on mobile and desktop — no :hover dependency, so the panel never closes
   while the pointer travels from the trigger into it. */
.desktop--submenu-Tab {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: min(1140px, 95vw);
    background-color: var(--white-bg);
    border: 1px solid var(--text-100);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 7, 18, 0.1);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-item-wrap-is-open .desktop--submenu-Tab {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-item .ph-caret-down {
    transition: transform 0.15s ease;
}

.nav-item-wrap-is-open .nav-item .ph-caret-down {
    transform: rotate(180deg);
}

/* ── Inner container ── */
.desktop--submenu-Tab > .Container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 60px;
    padding: 24px 16px;
    align-items: center;
}

/* ── Each item ── */
.megamenu-tem {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 160px;
    padding: 4px;
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

.megamenu-tem:hover {
    background-color: var(--text-50);
}

/* ── Badge Icon — neutral by default; only the icon glyph turns accent-blue on hover ── */
.megamenu-tem .Badge-Icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--text-50);
    border: 1px solid var(--text-100);
}

.megamenu-tem .Badge-Icon i {
    font-size: 1.25rem;
    color: var(--text-600);
    transition: color 0.15s ease, font-size 0.15s ease;
}

.megamenu-tem:hover .Badge-Icon i {
    color: var(--blue-Linear-1000);
    font-size: 1.5rem;
}

/* ── Board UI ── */
.Board-UI {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.Frame-214 {
    font-family: var(--primary-font);
    font-size: 1.125rem;
    font-weight: 700;
    color: #000107;
    line-height: 1.33;
    white-space: nowrap;
}

.megamenu-desc {
    font-family: var(--secondary-font);
    font-size: 0.75rem;
    font-weight: 400;
    color: #4F5159;
    line-height: 1.5;
}

/* ── Mobile (node 340:4500) ── */
@media (max-width: 768px) {
    .nav-item-wrap-is-open .desktop--submenu-Tab {
        position: static;
        transform: none;
        width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .desktop--submenu-Tab > .Container {
        flex-direction: column;
        gap: 16px;
        padding: 24px 0;
    }

    .megamenu-tem {
        display: flex;
        padding : 12px;
        width: 100%;
        min-width: 0;
        background-color: var(--text-50);
        border: 1px solid var(--text-100);
        border-radius: 12px;

    }

    /* No :hover on touch — the icon accent stays visible at rest instead of
       waiting for a hover state that mobile can't produce. */
    .megamenu-tem .Badge-Icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        background: #EFF6FF;
        border-color: rgba(59, 130, 246, 0.25);
    }

    .megamenu-tem .Badge-Icon i {
        font-size: 1.0625rem;
        color: var(--blue-Linear-1000);
    }

    .Frame-214 {
        white-space: normal;
    }

    .Frame-214 p{
        font-size: 1.08rem;
    }

    .megamenu-desc{
        font-size: 0.925rem;
        color: var(--text-500);
    }

}



/* ----------------------------------------------
MEDIA QUERIES
-------------------------------------------------- */
@media(min-width: 768px){

}


@media(max-width: 768px){

    /* Real height of the fixed logo bar (padding-top incl. safe-area + logo +
       padding-bottom: ~16px + 40px + 16px, +4px buffer). Used to pin the
       scrollable menu body right below it, so it can never scroll up
       underneath it — not just visually padded to avoid it. */
    :root {
        --mobile-topbar-h: calc(76px + env(safe-area-inset-top));
    }

    .content-left{
        width: 100%;
    }

    /* .logo-navigation itself stays position:static on mobile — its children
       (.logo-wrapper / .header-global) are already position:fixed with a very
       high z-index, which is the only thing that needs to stay on top.
       Nesting them inside a position:sticky ancestor was doing nothing useful
       (fixed positioning already escapes it) and is a known source of
       repaint/stacking glitches on scroll in some engines — removed. */

    .burger-menu{
        display : block; 
        background: none;
        border: none;
        cursor: pointer;
    }

    .header-global{
        display : flex;
        flex-direction: column;
        padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)) 1rem;
        gap : 0;
        width: 100%;
        max-width: 100%;
        /* top+bottom (not height) so the box is physically confined to the
           space under the logo bar — scrolled content can't reach behind it,
           it isn't just visually padded to avoid it. */
        position : fixed;
        top: var(--mobile-topbar-h);
        right: 0;
        bottom: 0;
        left: 0;
        justify-content: flex-start;
        /* Frosted-glass panel (Linear-style): translucent instead of flat, so
           the page blurs through behind it rather than being fully hidden. */
        background: rgba(248, 249, 250, 0.75);
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform : translateX(100%);
        transition : transform 0.3s ease-in-out;
        /* Forces its own GPU compositing layer so it can't get re-sorted
           behind in-flow content mid-scroll (a known iOS Safari quirk with
           fixed + overflow-scrolling elements "flickering" below page content). */
        will-change: transform;
        isolation: isolate;
        z-index: 999;



    }

     .header-global-isopen{
    transform : translateX(0%);
    z-index: 999;
    }

    .logo-wrapper{
        display : inline-flex;
        display: flex;
        align-items: center;
        max-width: 100%;
        justify-content: space-between;
        width : 100%;
        padding : 1rem;
        padding-top: calc(1rem + env(safe-area-inset-top));
        position : fixed;
        z-index: 1000;
        will-change: transform;
        isolation: isolate;
        background-color: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        border-bottom: 1px solid rgba(3, 7, 18, 0.06);
        top : 0;


    }

    /* Locks background scroll while the full-screen mobile overlay is open */
    body.nav-open {
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
    }

    #burgerBtn{
        position : relative;
        z-index: 1000;
        cursor: pointer;
    }

    .nav-links{
        display: flex; 
        flex-direction: column;
        max-width: 100%;
        width : 100%; 
        padding : 1rem;
         
    }

    .overlay-mobile-content{
        display: flex;
        max-width: 100%;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        z-index: 10;
        height: 100%;
        /* .header-global now starts right below the logo bar (see --mobile-topbar-h),
           so no extra top offset is needed here anymore. */
    }


    .nav-item{
        display: flex;
        align-items: center;
        max-width : 100%;
        width: 100%;
        min-height: 44px;
        padding: 12px 16px;
        margin: 0;
    }

    /* On the taller mobile cards (megamenu-tem ≈60-70px tall), 3rem exceeds
       half the box height and gets clamped to a full pill by the browser —
       a smaller radius here actually renders as a distinct, softer rounded
       rect instead, closer to the item's own resting radius (10-12px). */
    .nav-item:focus-visible,
    .megamenu-tem:focus-visible,
    .header--cta--def:focus-visible,
    .header--cta--sec:focus-visible,
    #burgerBtn:focus-visible {
        border-radius: 1.75rem;
    }

    .nav-item-wrap{
        max-width : 100%; 
        width: 100%;

    }

    .item-description{
        font-size : 1.25rem; 
        font-weight:600
    }

    .button-header{
        display : flex; 
        justify-content: center;
        width : 100%; 
        gap : 1rem; 
    }

    
    .button-section{
        display: flex;
        flex-direction: column;
        gap : 8px;
        width : 100%; 
        padding : 0rem; 
    }

    .button-section button{
        font-size: 1.25rem;
        font-family: var(--secondary-font), sans-serif;
        font-weight: 600;
        padding: 24px 14px;
    }
    
        



    .header--cta--def{
        color: var(--primary-font);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
        border : solid 1px var(--text-200);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing : 0.4px;
        flex-wrap: nowrap;
        cursor: pointer;
        border-radius: 10px;
        white-space: nowrap;
        font-family: var(--secondary-font), sans-serif;
        height: auto;
        width : auto;
        padding: 14px 20px;

    }


    .header--cta--sec{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        padding: 14px 20px;
        gap: 8px;
    }

}

/* -----------------------------------------------
Bodymargin 
---------------------------------------------------
 */
.landing-main-section {
    background-color: var(--text-50);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(40px, 5vw, 80px);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 90px;
    min-height: 85vh;
}


/* LANDING PAGE */

/* ----------------------------------------------
LEFT SECTION
---------------------------------------------------
 */

 
/* ── Hero left column ── */
.hero--section--content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 0 0 460px;
    min-width: 280px;
}

.hero--title--main {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    color: rgba(0, 1, 7, 0.96);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.text-blue-primary {
    color: var(--blue-Linear-1000);
}

.hero--Paragraph--main {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    color: rgba(0, 1, 7, 0.96);
    line-height: 1.6;
    margin: 0;
}

.Group--button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.Btn-hero--black {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(3, 7, 18, 1);
    border-radius: 12px;
    padding: 18px 28px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(238, 238, 238, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Btn-hero--white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(238, 238, 238, 1);
    border: 1px solid rgb(177, 205, 251);
    border-radius: 12px;
    padding: 18px 28px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Keep old classes for backwards compat (other sections use them) */
.h1-website {
    font-family: var(--primary-font);
    font-size: 2.5rem;
    font-weight: 700;
}

.landing-header__subtitle {
    font-size: 1.25rem;
    font-family: var(--secondary-font);
    font-weight: 400;
}

.content-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1 1 280px;
    max-width: 100%;
}

.button-section {
    display: flex;
    gap: 8px;
    width: 100%;
}






 /*
----------------------------------------------------
RIGHT SECTION — terminal (node 15:5893)
---------------------------------------------------
 */
/* ── Hero right column: terminal card ── */
.terminal {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
}

.Frame-257 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 576px;
}

/* Deploy option buttons */
.hero--deploy-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button__cli,
.button__docker,
.button__git-deploy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    background-color: rgba(28, 32, 42, 1);
    border: 1px solid rgb(71, 84, 102);
    border-radius: 8px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: rgba(238, 238, 238, 1);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.button__cli i,
.button__docker i,
.button__git-deploy i {
    font-size: 1.25rem;
    color: rgba(238, 238, 238, 1);
}

.button__cli:hover,
.button__docker:hover,
.button__git-deploy:hover {
    border-color: rgb(177, 205, 251);
}

/* CommandPalette */
.CommandPalette {
    background-color: rgba(3, 7, 18, 1);
    border: 1px solid rgb(177, 205, 251);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}

.Frame-227 {
    padding: 12px;
}

.Frame-230 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    padding: 6px 4px;
    gap: 10px;
}

.Bconnect {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 0 4px;
}

.Bconnect i {
    font-size: 1rem;
    color: rgba(230, 230, 231, 1);
    flex-shrink: 0;
}

.Bconnect span {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: rgba(230, 230, 231, 1);
}

.Cmd-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgb(177, 205, 251);
    border-radius: 8px;
    padding: 2px 8px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.625rem;
    color: rgba(238, 238, 238, 1);
    white-space: nowrap;
    flex-shrink: 0;
}

.Blocs {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.Suggestions-Bloc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.Suggestions-label {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.625rem;
    color: rgba(230, 230, 231, 1);
    padding-left: 4px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.Suggestions-Line {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.Suggestion-Item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    background-color: rgba(3, 7, 18, 1);
    padding: 0 2px 0 4px;
    min-height: 20px;
}

.Title-Landing {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: rgba(230, 230, 231, 1);
}

.Title-Landing i {
    font-size: 1.25rem;
    color: rgba(230, 230, 231, 1);
}

.Title-Landing--blue,
.Title-Landing--blue i {
    color: rgba(137, 180, 250, 1);
}

/* Keep for legacy (other sections may use hero--global-window) */
.hero--global-window {
    display: flex;
    padding: 40px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    background-color: var(--secondary-blackmode);
    border-radius: 20px;
}

/* ── Landing hero responsive ── */
@media (max-width: 1280px) {
    .landing-main-section {
        gap: 80px;
        padding: 60px 60px;
    }
}

@media (max-width: 960px) {
    .landing-main-section {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 48px;
        padding: 60px 40px;
        min-height: unset;
    }
    .hero--section--content {
        flex: none;
        width: 100%;
    }
    .terminal {
        flex: none;
        width: 100%;
        justify-content: flex-start;
    }
    .Frame-257 {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .landing-main-section {
        padding: 40px 20px;
        /* More breathing room between the hero text block and the terminal
           mockup once they stack — was cramped at 40px. */
        gap: 64px;
    }
    .hero--title--main {
        font-size: 1.75rem;
    }
    .hero--Paragraph--main {
        font-size: 1rem;
    }
    .hero--deploy-options {
        flex-wrap: wrap;
        gap: 10px;
    }
    .button__cli,
    .button__docker,
    .button__git-deploy {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        padding: 10px;
        font-size: 0.8125rem;
    }
    .Group--button {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    .Btn-hero--black,
    .Btn-hero--white {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 140px;
        font-size: 0.9375rem;
        padding: 12px;
    }
}

/* Placed after the base .landing-main-section rule (margin: 0 auto above) on
   purpose — same specificity, so source order decides, and this one needs to
   win. .logo-wrapper is position:fixed and reserves no space in the normal
   flow, so without this the hero starts at y:0, partly behind the fixed bar. */
@media (max-width: 768px) {
    .landing-main-section {
        margin-top: var(--mobile-topbar-h);
    }
}

 /* select-options dots */
 .select-options {
    display: flex;
    gap: 8px;
    align-items: center;

 }

 .dot__red,
 .dot__yellow,
 .dot__green {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--secondary-blackmode);
 }

 .dot__red   { background-color: #FF5F56; }
 .dot__yellow { background-color: #FFBD2E; }
 .dot__green  { background-color: #27C93F; }

 /* terminal text content */
 .hero--global-window .terminal-content {
    display: block;
    white-space: pre-wrap;
    text-align: left;
    padding: 1rem;
    font-family: "Menlo", "Courier New", monospace;
    font-size: 1rem;
    font-weight: 400;
    color: var(--blackmode-writting);
    flex: 1;
    width: 100%; 
    word-break: break-all; 
    
 }

 /* frame-181 + Button-CTA */
 .terminal-card-button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
 }

 .terminal-card-button .button-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: var(--colorprimary-1000);
    color: #EEEEEE;
    border: var(--button-stroke) solid 0.5px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
 }

 .button-cta .ph-arrow-right {
    font-size: 1rem;
    font-weight: 700;
    color: #EEEEEE;
 }

 /*----------------------------------------------------------
 LANDING MAIN SECTION - MOBILE 
 ------------------------------------------------------------ */


/*
-------------------------------------------------------------
BILLING ENGINE SECTION 
--------------------------------------------------------------
*/

.billing-engine {

    width: 100%;
    flex-wrap: wrap;
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px clamp(20px, 6vw, 120px);


}

.billing-engine--content {
    max-width: 100%;
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
    justify-content: center;
    min-height: 85vh; 



    
}

/* bento--payments */
.bento--payments {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 320px; 
    padding: 0rem clamp(24px, 2vw, 120px);
    max-width : clamp(280px, 100%, 400px); 
    
 
}

.wallet-balance-content {
    background-color: var(--white-bg);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--text-100);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.wallet-balance-content:hover {
    border-color: var(--text-200);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.wallet-balance--box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.icone-name {
    display: flex;
    align-items: center;
    gap: 14px;

}

.badge-icon {
    width: 44px;
    height: 44px;
    background-color: var(--colorprimary-1000);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-icon i {
    color: #EEEEEE;
    font-size: 1.25rem;
}

.board-ui {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wallet-title {
    font-family: var(--primary-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--colorprimary-1000);
}

.wallet-subtitle {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-700);
}

.amount {
    display: flex;
    align-items: center;
    align-self: center;
}

.amount-value {
    font-family: var(--primary-font);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-800);
}

.button-cta-top-up {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background-color: var(--white-bg);
    border: 1px solid var(--button-stroke);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--colorprimary-1000);
    width: 100%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.button-cta-top-up:hover {
    background-color: var(--colorprimary-1000);
    color: #EEEEEE;
    border-color: var(--colorprimary-1000);
}

/* bento-logo */
.bento-logo {
    background-color: var(--white-bg);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--text-100);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bento-logo:hover {
    border-color: var(--text-200);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.box-wrapper-logo {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.logo-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.logo-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    height: 45px; 
    align-items: center;
}

.payment-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    box-sizing : border-box;
    flex: 1;
    object-fit: contain;
    min-width: 0; 
    box-sizing : border-box; 
    border-radius: 8px;
    background-color: transparent;
    padding: 6px 12px;
    border: 1px solid var(--text-200);
}

.orange-logo{
   filter: brightness(0);
    border-radius: 8px;
    
}

.visa-logo {
    filter: brightness(0);
    width : 100%; 
    height: 45px; 
    box-sizing: border-box;
    padding: 6px; 
}

.usdt-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: white;
    background-color: #26A17B;
    border-color: #26A17B;
}

.slogan-logo {
    display: inline-block;
    align-items: center;
    gap: 8px;
    font-family: var(--secondary-font);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-900);
    width : 100%;  
    text-align: center;
}


.slogan-logo i {
    color: var(--blue-Linear-1000);
    font-size: 1rem;
}


    

/* hero--section--content */
.hero--section--content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width : 100%; 
    max-width : clamp(320px, 100%, 720px); 
    padding: 0 2rem;




}


.hero--title {
    font-family: var(--title-font);
    font-size: 2.5rem;
    font-weight: 500;
    color: #000107;
    line-height: 1.25;
    letter-spacing: -0.02em;


}

.hero--paragraph {
    font-family: var(--secondary-font);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-900);
    line-height: 1.6;
}

.group--button {
    display: flex;
    gap: 16px;
    width: 100%; 

}

.button-cta--black--default {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    background-color: var(--colorprimary-1000);
    color: #EEEEEE;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 1.09375rem;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

/* Dark, low-key focus ring instead of the browser's default bright blue
   outline — fits a solid dark button better than a glowing accent color. */
.button-cta--black--default:focus-visible,
.button-explore:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--colorprimary-700);
}

.button-cta--black--default:hover {
    background-color: var(--colorprimary-800);
}

@media (max-width: 768px) {
    .billing-engine--content [class^="button"] {
        padding : 24px; 
    }
}

    



/*
-------------------------------------------------------------
COMMUNITY SECTION (node 118:10881 — Spacing-section)
--------------------------------------------------------------
*/

.community-section {
    width: 100%;
    min-height: 700px;
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh; 
}

.community-container {
    width: 1200px;
    max-width: 100%;
    padding: 0 2rem;
    display: flex;
    align-items: center;
}

.community-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 26px;
    width: 100%;
    max-width: 100%;
    padding : 0rem 2rem; 
    
}

.community-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width : 100%;  
    
}

.community-title {
    font-family: var(--title-font);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 49px;
    letter-spacing: -0.02em;
    color: var(--colorprimary-1000);
    max-width: 420px;
    display: flex;
    text-align: center;
    
}

.community-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(0, 1, 7, 0.96);
}

.community-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.social-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--button-stroke);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    text-decoration: none;
    background: transparent;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.social-icon-btn:hover {
    background-color: #EBF2FE;
    border-color: var(--blue-Linear-1000);
}















/* SIGN IN PAGE */

/* 
-------------------------------------------------------------
1. Les sections de la section left
--------------------------------------------------------------
 */

 .landing-header{
    background: linear-gradient(154deg, var(--colorprimary-1000) -2.56%, var(--colorprimary-900) 44.89%, #373B43 74.11%, var(--colorprimary-800) 79.27%, var(--colorprimary-700) 100%);
    width: 50%;
    display: flex;
    padding: 40px 48px;
    flex-direction: column;
    justify-content: space-between ;
    color: var(--blackmode-writting);
    gap:200px;
    flex: 1 0 0;
    min-height: 100vh;
    font-family: var(--title-font);

       
 }

 .landing-header__group{
    display: flex; 
    flex-direction: column;
    align-items: flex-start;
    gap:1rem;
    align-self: stretch;
 }

 .landing-header__group a{
    cursor: pointer;
 }

 .landing-header__title{
    font-size: 3rem;
 }

 .landing-header__subtitle{
    font-family: var(--secondary-font);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-900);
    line-height: 1.6;
    
 }


/* 
-------------------------------------------------------------
2. Testimonials
--------------------------------------------------------------
 */

 .testimonial{
    display: flex;
    flex-direction: column;
    gap: 50px; 
    align-items: flex-start;

 }

 .testimonial__group{
    display: flex;
    align-self: stretch;
    flex-direction: column;
    gap: 16px; 
    align-items: center;

 }

 .testimonial__image_identity{
    display: flex;
    gap: 24px; 
    align-items: center;
    align-self: stretch;


 }

 .testimonial__image-speaker{
    font-family: var(--title-font);
    font-size: 1rem;
    border-radius: var(--radius-full);
    height: 60px;
    width: 60px;
 }

 .testimonial__job, .testimonial__speaker-name{
    font-size: 1rem;
    font-weight: 400;

 }

 .testimonial__carroussel-dots_group{
    display: flex;  
    justify-content: center;
    list-style: none;
     border: solid var(--blackmode-writting) 0;
     gap: 16px;
     cursor: pointer; 

 }


 .testimonial__carroussel-dots__item{
    width: 12px; 
    height: 12px;
    background-color: var(--blackmode-writting); 
    border-radius: var(--radius-full) ;
 }

.landing-payments{
font-size: 18px; 
color: var(--blackmode-writting); 
font-style: normal; 
line-height: 24px; 
}


.payments{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; 
    align-self: stretch;
    width: 100%;
}


.landing-header_logo{
    list-style: none;
    display: flex; 
    gap: 16px; 
    align-items: flex-start;
    align-self: stretch;
}

.landing-header_logo li{
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 30px;
    align-self: stretch;
    padding: 0px; 
}

.landing-header_logo li img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* 
-------------------------------------------------------------
2. Rights Sections : Sign-In
--------------------------------------------------------------
 */

 .sign-in-header{
    background-color: var(--secondary-blackmode);
    width: 50%;
    display: flex;
    padding: 80px 100px;
    flex-direction: column;
    color: var(--blackmode-writting);
    gap:200px;
    flex: 1 0 0;
    min-height: 100vh;
    font-family: var(--title-font);
 }

.sign-in-middle{
    display: flex; 
    flex-direction: column;
    min-height : 60vh;
    gap: 40px;
    justify-content: space-between;
}


.sign-in-titles{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    align-self: stretch;
}


 .sign-in-header__title{
font-family: var(--title-font);
font-size: 2.25rem;
 }

 .sign-in-header__subtitle{
    font-family: var(--title-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600; 
 }

 .button-google-connexion{
    display: flex; 
    align-items: center;
    align-self: stretch; 
    width: 100%;
    gap: 1rem; 
    background-color: transparent;
    color: var(--blackmode-writting);
    justify-content: center;
    cursor: pointer;
    padding: 10px; 
    border-radius: 12px;
    border: color-mix(in srgb, var(--blackmode-writting) 20%, transparent) solid 2px;
  
 }

 .sign-in-middle__title{
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 400; 

 }
/* 
 ---------------------------------------------------------
 The form
 ---------------------------------------------------------- */

.sign-in__form{
    display:  flex; 
    flex-direction: column;
    gap: 40px; 
}

.sign-in__form__identity{
    display: flex;
    gap: 8px; 
}


.sign-in__form__identity input{
    background-color: transparent;
    color: var(--blackmode-writting);
    font-size: 0.8rem;
    font-weight: 400;
    justify-content: flex-start;
    padding: 8px; 
    border-radius: 12px;
    border: solid var(--blackmode-writting) 0.25px;
    align-self: stretch;
    width: 50%; 

}

.sign-in__form__identity input::placeholder {
    opacity: 1; 
    color: var(--blackmode-writting);
}
    


.sign-in__form__button{
    display: flex; 
    justify-content: flex-start;
    width: 50%;
    align-self: stretch;
}


.sign-in__form__email input{
    background-color: transparent;
    color: var(--blackmode-writting);
    font-size: 0.8rem;
    font-weight: 400;
    justify-content: flex-start;
    padding: 8px; 
    border-radius: 12px;
    border: solid var(--blackmode-writting) 0.25px;
    align-self: stretch;
    width: 100%;
}


.sign-in__form__email input::placeholder{
     opacity: 1; 
    color: var(--blackmode-writting);
}
    
.sign-in__form-security-confirmation{
    display: flex; 
    justify-content: flex-start;
    padding: 24px 8px;
    border-radius: 8px;
    gap: 0.8rem;
    /* 1. On crée une image de bordure en pointillés */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23ffffff' stroke-width='1' stroke-dasharray='8%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    align-items: center;
    display : flex; 
    justify-content: flex-start;
    padding: 24px 8px;
    border-radius: 8px;
    gap: 0.8rem; 
}

.sign-in__form-security-confirmation input{
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border : 1px solid var(--blackmode-writting);
    border-radius: 4px;

}

.sign-in__form-security-confirmation label{
    display: flex; 
    align-items: center;
    opacity: 90%;
}

.sign-in__form-security-confirmation label::after{
    content: "";
    display: inline-block;
    width: 96px;
    height: 30px;
    background-image: url(./images/cloudflare@2x.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

.sign-in__form__validation-button{
    background-color: transparent;
    color: var(--blackmode-writting);
    font-size: 0.8rem;
    font-weight: 400;
    justify-content: flex-start;
    padding: 8px; 
    border-radius: 12px;
    border: solid var(--blackmode-writting) 0.25px;
    align-self: stretch;
    width: 100%;
}

.sign-in-middle p:last-of-type{
font-size:1rem; 
font-weight: 400;
display: flexbox; 
justify-content: center;
align-self: center;
}

.sign-in-middle__link{
color: var(--blue-Linear-1000);
font-weight: 700;
cursor: pointer;
}

.sign-in__form-error {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--blackmode-writting);
    font-size: 0.8125rem;
    font-weight: 600;
}


/*
-------------------------------------------------------------
MARKETPLACE SECTION (node 57:550)
--------------------------------------------------------------
*/

.marketplace-page {
    background-color: var(--bg-color);
    padding: 80px 24px;
    display: flex;
    justify-content: center;
}

.--marketplace {
    width: 100%;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.marketplace-page .heading-zone {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.marketplace-page .hero--title {
    font-family: var(--title-font);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 500;
    
}

.marketplace-page .hero--paragraph {
    font-family: var(--secondary-font);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-900);
}

.marketplace-page .content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cards-group {
    display: flex;
    flex-direction: column;
    gap: 48px;
    font-size: 1.125rem;
}

.framework-group,
.database-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.heading__framework,
.heading__database {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--primary-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-1000);
}

.heading__framework i,
.heading__database i {
    font-size: 1.5rem;
    color: var(--text-1000);
}

.mktp--framework,
.--dtbase {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
   
}

/* Service Cards */
[class^="service-card__"] {
    background-color: var(--white-bg);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex: 1;
    min-width: 280px;
    max-width: 340px;
    cursor: pointer;
    border: 1px solid var(--text-100);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    font-size: 1.125rem;
    width : 100%;
}

[class^="service-card__"]:hover {
    border-color: var(--text-200);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.mktp--container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

/* Override billing .badge-icon in marketplace context */
.marketplace-page .badge-icon {
    width: 52px;
    height: 52px;
    background-color: #FFFFFF;
    border-radius: 12px;
    border: 1px solid var(--text-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.marketplace-page .badge-icon--service {
    background-color: var(--white-bg);
}

.service-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.frame-218 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frame-223 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.h3-service-name {
    font-family: var(--primary-font);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-1000);
}

.frame-223 i {
    font-size: 1rem;
    color: var(--text-700);
}

.span--description {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-900);
    line-height: 1.5;
}

.marketplace-page .group--button {
    display: flex;
    justify-content: center;
}

/* ------------------------------------------
Marketplace - Mobile Section - Media Queries 
---------------------------------------------*/

@media (max-width: 768px) {


[class^="service-card__"] {
    width: 100%;
    max-width: 100%;

}

.marketplace-page .group--button [class^="button"] {
    padding : 24px;
}


}

/*
-------------------------------------------------------------
PROPOSE DESIGN VARIATIONS SECTION (node 311:3547)
--------------------------------------------------------------
*/

.App {
    background-color: var(--bg-color);
    padding: 80px 80px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
}

.App > .Container {
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.App .Heading-1 h2 {
    font-family: var(--title-font);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 500;
    
}

.App > .Container > .Paragraph p {
    font-family: var(--secondary-font);
    font-size: 1.25rem;
    font-weight: 400;
    color: #000207;
    line-height: 1.6;
}

.Container--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* ── Terminal ── */
.TerminalBlock {
    grid-row: span 2;
    background-color: #F4F7FB;
    border-radius: 12px;
    border: 1px solid var(--text-100);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.Container--bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #EDF2F9;
    flex-shrink: 0;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot--red    { background-color: #CF312D; }
.dot--yellow { background-color: #D4AF37; }
.dot--green  { background-color: #377604; }

.terminal--name {
    padding-left: 12px;
    font-family: var(--secondary-font);
    font-size: 0.6875rem;
    font-weight: 400;
    color: #8AA3C0;
}

.Container--body {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.terminal--row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    min-height: 20px;
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 400;
}

.terminal--empty { min-height: 20px; }

.t-prompt   { color: #5D7A9A; flex-shrink: 0; }
.t-command  { color: #000207; }
.t-chevron  { color: #9AACCA; flex-shrink: 0; }
.t-pending  { color: #8AA3C0; }
.t-check    { color: #377604; flex-shrink: 0; }
.t-output   { color: #5D7A9A; }
.t-time     { margin-left: auto; color: #B1CDFB; font-size: 0.6875rem; flex-shrink: 0; }
.t-hex      { color: #5D8FDA; flex-shrink: 0; }
.t-ready    { color: #000207; }
.t-cursor   {
    display: inline-block;
    width: 7px;
    height: 14px;
    background-color: #5D7A9A;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.Container--footer {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0 24px 20px 24px;
    flex-shrink: 0;
}

.badge--deploy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--white-bg);
    border-radius: 6px;
    font-family: var(--primary-font);
    font-size: 0.6875rem;
    font-weight: 700;
    color: #000207;
}

.badge--deploy i { font-size: 0.6875rem; }

/* ── Service Cards ── */
.ServiceCard {
    background-color: var(--white-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--text-100);
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ServiceCard:hover {
    border-color: var(--text-200);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.ServiceCard > .Icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    padding-top: 2px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.ServiceCard > .Icon i {
    font-size: 1.25rem;
    color: #000207;
}

.Container--text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.Paragraph--title h3 {
    font-family: var(--primary-font);
    font-size: 1.125rem;
    font-weight: 700;
    color: #000207;
    line-height: 1.47;
}

.Paragraph--desc p {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 400;
    color: #5D6B82;
    padding-top: 2px;
    line-height: 1.5;
}

/* ── Dark Card ── */
.Container--dark {
    background-color: #030712;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 146px;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.Container--dark:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.Paragraph--dark {
    font-family: var(--primary-font);
    font-size: 1.125rem;
    font-weight: 700;
    color: #EEEEEE;
    line-height: 1.44;
}

.Icon--arrow {
    display: flex;
    justify-content: flex-end;
}

.Icon--arrow i {
    color: #EEEEEE;
    font-size: 1.125rem;
}

/* ── Responsive ── */

@media (max-width: 960px) {
    .App {
        padding: 48px 24px;
        gap: 32px;
    }

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

    .TerminalBlock {
        grid-row: auto;
        grid-column: 1 / -1;
    }
}

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


/*
-------------------------------------------------------------
MADE FOR BUILDERS SECTION (node 90:2477)
--------------------------------------------------------------
*/

.builders-page {
    width: 100%;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    padding: 80px clamp(24px, 6vw, 96px);
}

.full-content {
    width: 100%;
    max-width: 1248px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.section-made-for-builders {
    width: 816px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.--title {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
}

.--description {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
}

.builders-page .hero--title {
     font-family: var(--title-font);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 500;
    
}

.hero--Paragraph {
    font-family: var(--secondary-font);
    font-size: 1.25rem;
    font-weight: 400;
    color: #000107;
    text-align: center;
    line-height: 1.4;
}

.button-explore {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    background-color: var(--colorprimary-1000);
    color: #EEEEEE;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 1.09375rem;
    font-weight: 700;
}

.builders-page .content {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    align-items: center;
}

.left-column,
.right-column {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 8.75rem;
}

.Service-Card--instant-launch,
.Service-Card--zerodt,
.Service-Card---total-flexibility,
.Service-Card---global-network{
    width: 100%;
    min-height: 230px;
    background-color: var(--white-bg);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 1px solid var(--text-100);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.Service-Card--instant-launch:hover,
.Service-Card--zerodt:hover,
.Service-Card---total-flexibility:hover,
.Service-Card---global-network:hover {
    border-color: var(--text-200);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.builders-page .Container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    overflow: visible;
}

.builders-page .Badge-Icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background-color: #FFFFFF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--text-200);
}

.builders-page .Badge-Icon i {
    font-size: 1.25rem;
    color: var(--text-900);
}

.builders-page .Frame-218 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.builders-page .Frame-223 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.h3-Service-Name {
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 700;
    color: #000107;
}

.builders-page .Frame-223 i {
    font-size: 1rem;
    color: var(--text-700);
}

.middle-dashboard--screenshot {
    flex: 1;
    min-width: 0;
    background-color: var(--white-bg);
    border-radius: 20px;
    padding: 1.08rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.middle-dashboard--screenshot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}


/*
-------------------------------------------------------------
MADE FOR BUILDERS — RESPONSIVE
--------------------------------------------------------------
*/

@media (max-width: 960px) {


    .builders-page {
        padding: 48px 16px;
    }

    .section-made-for-builders {
        width: 100%;
    }

     .section-made-for-builders [class^="button"] {
        text-align: center;
        /* Same height as the header's "Get started" button (.header--cta--sec
           mobile: padding 14px 20px, font-size 1rem) — was 24px all round. */
        padding : 14px 20px;
        font-size: 1rem;

     }



    .builders-page .content {
        flex-direction: column;
        gap: 24px;
    }

    .left-column,
    .right-column {
        flex: none;
        width: 100%;
        flex-direction: column;
        gap: 16px;
    }

    .Service-Card--instant-launch,
    .Service-Card--zerodt,
    .Service-Card---total-flexibility {
        width: 100%;
        padding: 28px 24px;
    }

    .middle-dashboard--screenshot {
        width: 100%;
    }
}



/*
-------------------------------------------------------------
READY BANNER SECTION (node 99:2465)
--------------------------------------------------------------
*/

.Ready-Banner {
    width: 100%;
    min-height: 50vh;
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;

}
 

.Ready--banner-wrapper {
    width: 1200px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius : 12px;
    padding : 4rem;
    background-color: var(--secondary-blackmode);
}

.Ready-Banner .content {
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 474px;
    width: 100%;
    align-items: flex-start;
}

.Ready--banner-wrapper .hero--Paragraph{
    color : var(--blackmode-writting)
}

.Title-plus-subtitle {
    display: flex;
    flex-direction: column;
    gap: 19px;
    width: 100%;
}

.Ready-Banner .hero--title {
    font-weight: 700;
    font-size: 2.25rem;
    text-align: left;
    color: var(--blackmode-writting); 
}

.Ready-Banner .hero--Paragraph {
    text-align: center;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.button-cta-explore {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background-color: var(--colorprimary-1000);
    color: #EEEEEE;
    border : solid var(--button-stroke) 0.5px;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 1.09375rem;
    font-weight: 700;
}

.button-cta--white--default {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background-color: #EEEEEE;
    color: var(--colorprimary-1000);
    border: 0.5px solid var(--button-stroke);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 1.09375rem;
    font-weight: 700;

}

@media (max-width: 768px) {
    .Ready-Banner {
        padding: 16px;
    
    }

    .Ready--banner-wrapper {
        display: flex; 
        flex-direction: column;
        gap: 32px;
        max-width: 100%;
        width: 100%;
        border-radius: 20px;
        padding: 24px 0; 
        
    }

    .Ready-Banner .content {
        display: flex; 
        max-width: 100%;
        width : 100%;
        align-items: center;
       
    
    }

    .Ready--banner-wrapper .hero--title{
        text-align: center;
        padding : 24px; 
     
    }

    .button-group {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        max-width: 100%;
        width: 100%;
    }

    /* Same size as the marketplace section's reference button (padding,
       font-size, radius) instead of stretching full-width — was much wider
       than every other CTA on the page. */
    .Ready-Banner [class^="button-"] {
        display : flex;
        justify-content: center;
        padding : 14px 24px;
        font-size: 1.09375rem;
        font-weight: 700;
        border-radius: 12px;
    }

    .Ready-Banner .button-cta--white--default{
        border-color: var(--button-stroke);
    }
}


/*
-------------------------------------------------------------
FOOTER (nodes 350:4559 desktop · 352:4662 mobile)
--------------------------------------------------------------
*/

.FooterB {
    background-color: #030712;
    width: 100%;
}

.FooterB > .Container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Top section: logo col + nav columns */
.FooterB .Container--top {
    display: flex;
    flex-direction: row;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgb(177, 205, 251);
    align-items: flex-start;
}

/* Logo + tagline + social */
.FooterB .Logo--Title--Subtitle {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 0 0 auto;
    max-width: 320px;

}

.FooterB .Logo--Container {
    display: flex;
    align-items: flex-start;
    

}

.FooterB .Logo-Qeda {
    display: flex;
    align-items: center;
   
}

.FooterB .logo-footer {
    max-width : 120px; 
    object-fit: contain;
}

.FooterB .logo-name {
    font-family: var(--primary-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: #EEEEEE;
}

.FooterB .Container--desc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.FooterB .tagline {
    font-family: var(--primary-font);
    font-size: 1.125rem;
    font-weight: 700;
    color: #EEEEEE;
    line-height: 1.4;
}

.FooterB .desc {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    font-weight: 400;
    color: #CDCDD0;
    line-height: 1.6;
}

/* Social buttons */
.FooterB .Button--Container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
}

.FooterB .X-Button,
.FooterB .Discord-Button,
.FooterB .Link-Button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgb(123, 148, 188);
    border-radius: 10px;
    color: #CDCDD0;
    text-decoration: none;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    font-weight: 400;
    transition: background-color 0.15s ease;
}

.FooterB .X-Button:hover,
.FooterB .Discord-Button:hover,
.FooterB .Link-Button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.FooterB .X-Button i,
.FooterB .Discord-Button i,
.FooterB .Link-Button i {
    font-size: 1rem;
}

/* Nav columns */
.FooterB .Product--Container,
.FooterB .Framework--Container,
.FooterB .Database--Container,
.FooterB .Community--Container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;
    min-width: 120px;
}

.FooterB .Paragraph--label {
    font-family: var(--primary-font);
    font-size: 0.75rem;
    font-weight: 700;
    color: #707A88;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.FooterB .Product--Container .Link,
.FooterB .Framework--Container .Link,
.FooterB .Database--Container .Link,
.FooterB .Community--Container .Link {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    font-weight: 400;
    color: #CDCDD0;
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.15s ease;
}

.FooterB .Product--Container .Link:hover,
.FooterB .Framework--Container .Link:hover,
.FooterB .Database--Container .Link:hover,
.FooterB .Community--Container .Link:hover {
    color: #EEEEEE;
}

/* Legal bar */
.FooterB .Legal--Container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.FooterB .Legal--Container > .Paragraph {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    font-weight: 400;
    color: #B3B5B8;
}

.FooterB .Container--links {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.FooterB .Container--links .Link {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    font-weight: 400;
    color: #B3B5B8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.FooterB .Container--links .Link:hover {
    color: #EEEEEE;
}

/* FOOTER RESPONSIVE — mobile (node 352:4662) */
@media (max-width: 768px) {
    .FooterB > .Container {
        padding: 64px 32px 32px;
    }

    .FooterB .Container--top {
        flex-direction: column;
        gap: 40px;
    }

    .FooterB .Logo--Title--Subtitle {
        max-width: 100%;
    }

    /* Nav columns: stack into a bordered block */
    .FooterB .Product--Container,
    .FooterB .Framework--Container,
    .FooterB .Database--Container,
    .FooterB .Community--Container {
        flex: none;
        width: 100%;
        padding: 16px 0;
        border-top: 1px solid rgb(177, 205, 251);
        gap: 10px;
    }

    .FooterB .Community--Container {
        border-bottom: 1px solid rgb(177, 205, 251);
    }

    /* Remove the top-level border-bottom on Container--top on mobile,
       the nav columns have their own borders */
    .FooterB .Container--top {
        border-bottom: none;
        padding-bottom: 0;
    }

    .FooterB .Legal--Container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-top: 16px;
    }

    .FooterB .Container--links {
        flex-direction: column;
        gap: 8px;
    }
}

/* ---------------------------------------
---------------------------------------------
-----------------------------------------

NEW PAGE : */

/* ============================================================
   FEATURES PAGE — HeroSection 
   ============================================================ */

.HeroSection {
    background-color: #E9EDF4;
    width: 100%;
    padding: 80px 24px;
}

.HeroSection .Container--margin {
    max-width: 1288px;
    margin: 0 auto;
}

.HeroSection .Container--margin > .Container {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: center;
}

/* ── Left column ── */
.Title--Subtitle--Buttons {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.Features--Headlines {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.Features--Headlines i {
    font-size: 0.875rem;
    color: var(--blue-Linear-1000);
}

.Features--Headlines .features-label {
    font-family: var(--secondary-font);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--blue-Linear-1000);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.HeroSection .Title h1 {
    font-family: var(--primary-font);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: #000107;
    line-height: 1.17;
}

.HeroSection .--Subtitle-A p {
    font-family: var(--secondary-font);
    font-size: 1.25rem;
    font-weight: 400;
    color: #4F5159;
    line-height: 1.5;
}

.HeroSection .--Subtitle-B p,
.HeroSection .--Subtitle-C p {
    font-family: var(--secondary-font);
    font-size: 1.25rem;
    font-weight: 400;
    color: #686A71;
    line-height: 1.5;
}

.HeroSection .--button-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* .header--cta--sec is shared with the site header (sized smaller to match
   "Log in" there) — here it sits next to .Button-CTA-Read-Docs, so match
   that button's size instead rather than the header's. */
.HeroSection .--button-group .header--cta--sec {
    padding: 14px 24px;
    font-size: 1rem;
}

.Button-CTA-Read-Docs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #000107;
    border: 1px solid var(--button-stroke);
    border-radius: var(--button-header-radius);
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.Button-CTA-Read-Docs:hover {
    background-color: var(--text-50);
}

/* ── Right column — Card Collection ── */
.Card-Collection {
    flex: 0 0 auto;
    width: min(612px, 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.Card-Action--CLI,
.Card-Action--GIT,
.Card-Action--Docker,
.Card-Action--Marketplace {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.Card-Action--CLI:hover,
.Card-Action--GIT:hover,
.Card-Action--Docker:hover,
.Card-Action--Marketplace:hover {
    box-shadow: 0 4px 16px rgba(0, 7, 18, 0.08);
}

.Card-Action--CLI .Span,
.Card-Action--GIT .Span2,
.Card-Action--Docker .Span4 {
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: #F8FAFD;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Card-Action--Marketplace .Span6 {
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: #EEEEEE;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Card-Action--CLI .Span i,
.Card-Action--GIT .Span2 i,
.Card-Action--Docker .Span4 i {
    font-size: 1.25rem;
    color: var(--blue-Linear-1000);
}

.Card-Action--Marketplace .Span6 i {
    font-size: 1.25rem;
    color: #377604;
}

.HeroSection .Div5,
.HeroSection .Div8,
.HeroSection .Div11,
.HeroSection .Div14 {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.HeroSection .Div6,
.HeroSection .Div9,
.HeroSection .Div12,
.HeroSection .Div15 {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 700;
    color: #000107;
}

.HeroSection .Div7,
.HeroSection .Div10,
.HeroSection .Div13,
.HeroSection .Div16 {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 400;
    color: #686A71;
}

.card-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 400;
    color: #9A9CA0;
    white-space: nowrap;
}

.card-arrow {
    font-size: 1.125rem;
    color: var(--blue-Linear-1000);
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .HeroSection .Container--margin > .Container {
        flex-direction: column;
    }

    .Card-Collection {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .HeroSection {
        padding: 48px 16px;
    }

    .HeroSection .--Subtitle-A p,
    .HeroSection .--Subtitle-B p,
    .HeroSection .--Subtitle-C p {
        font-size: 1rem;
    }

    .HeroSection .--button-group {
        flex-direction: column;
        align-items: stretch;
    }

    .HeroSection .--button-group button {
        width: 100%;
        justify-content: center;
    }
}



/* ============================================================
   FEATURE PAGE — Section CLI (node 402:11086)
   ============================================================ */

.SectionCli {
    background-color: #FFFFFF;
    width: 100%;
    padding: 80px 24px;
}

.SectionCli .Content {
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* ── SubSection 1 ── */
.SubSectionterminal-grid-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Title row */
.Title--CLI {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

.SectionNumber span {
    font-family: var(--primary-font);
    font-size: 2rem;
    font-weight: 700;
    color: var(--blue-Linear-1000);
    line-height: 1.1;
}

.Container--Title-CLI {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.Container--Title-CLI .Heading-2 h2 {
    font-family: var(--primary-font);
    font-size: 2rem;
    font-weight: 700;
    color: #000107;
    line-height: 1.17;
}

.Container--Title-CLI .Paragraph-CLI p {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 400;
    color: #686A71;
    line-height: 1.6;
    max-width: 600px;
}

/* ── Terminal Window (shared) ── */
.Terminal-Windows {
    background-color: var(--secondary-blackmode);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.Title---options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.select-options {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

.Dot--red,
.Dot--yellow,
.Dot--green-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.Dot--red    { background-color: #CF312D; }
.Dot--yellow { background-color: #D4AF37; }
.Dot--green-dot  { background-color: #29A031; }

.Terminal-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--primary-font);
    font-size: 0.75rem;
    font-weight: 700;
    color: #E6E6E7;
    width: 100%;
    justify-content: center;

}

.Terminal-label i {
    font-size: 0.875rem;
    color: #E6E6E7;
}

/* Code lines */
.Frame-243 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.Frame-243 code {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 400;
    color: #EEEEEE;
    line-height: 1.25;
    display: block;
    white-space: pre-wrap;
}

.Frame-243 .line--green { color: #10B981; }
.Frame-243 .line--blue  { color: #629BF8; }
.Frame-243 .line--dim   { color: #B3B5B8; }

/* CTA inside terminal */
.Icon-Bloc {
    display: flex;
    justify-content: flex-end;
}

.Button-CTA--terminal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: #EEEEEE;
    color: #030712;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 0.875rem;
    font-weight: 700;
    transition: background-color 0.15s ease;
}

.Button-CTA--terminal:hover {
    background-color: #FFFFFF;
}

/* ── Frame 244: Card grid + link ── */
.Frame-244 {
    display: flex;
    flex-direction: column; 
    gap: 20px; 
    padding: 0 1rem; 
}

.Grid-card-var {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

}

/* Command cards — base */
.Card-var--deploy,
.Card-var-log,
.Card-var-env,
.Card-var--rollback,
.Card-var--status,
.Card-var--yaml {
    background: #FFFFFF;
    border: 1px solid var(--text-100);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.Card-var--deploy:hover,
.Card-var-log:hover,
.Card-var-env:hover,
.Card-var--rollback:hover,
.Card-var--status:hover {
    box-shadow: 0 2px 12px rgba(0, 7, 18, 0.06);
    border-color: var(--button-stroke);
}

/* Dark highlight card */
.Card-var--yaml {
    background-color: var(--secondary-blackmode);
    border-color: var(--secondary-blackmode);
}

.Card-var--yaml:hover {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
    border-color: var(--blue-Linear-1000);
}

/* Card inner layout */
.Frame-218 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.Frame-223 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.h3-Service-Name {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #030712;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.h3-highlight {
    font-family: var(--primary-font);
    font-size: 0.875rem;
    font-weight: 700;
    color: #EBF2FE;
    white-space: normal;
}

.Frame-223 i {
    font-size: 0.875rem;
    color: var(--text-400);
    flex-shrink: 0;
}

.Card-var--yaml .Frame-223 i {
    color: #EBF2FE;
}

.span---description {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 400;
    color: #334155;
    line-height: 1.4;
}

.span---description--on-dark {
    color: #FFFFFF;
}

/* CLI reference link */
.Button-CTA-CLI-reference {
    display: flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    background: none;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--blue-Linear-1000);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.Button-CTA-CLI-reference:hover {
    opacity: 0.7;
}

/* ── SubSection B: Text + Terminal ── */
.SubSectionB---Terminal {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: center;
    padding: 32px;
    background-color: #E9EDF4;
    border-radius: 20px;
}

.Heading-paragr-badges {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Badge pill */
.Badge-Terminal-native {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: #EBF2FE;
    border-radius: 7px;
    width: fit-content;
}

.Badge-Terminal-native i {
    font-size: 0.8125rem;
    color: var(--blue-Linear-1000);
}

.Badge-Terminal-native span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--blue-Linear-1000);
}

/* Heading 3 */
.Heading-3 h3 {
    font-family: var(--primary-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: #000107;
    line-height: 1.33;
}

/* Paragraph B */
.Paragraph-B p {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 400;
    color: #686A71;
    line-height: 1.6;
}

/* Feature pills */
.Container--pills {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: #EBF2FE;
    border-radius: 12px;
    font-family: var(--primary-font);
    font-size: 0.75rem;
    font-weight: 700;
    color: #686A71;
}

.pill-badge i {
    font-size: 0.875rem;
    color: var(--blue-Linear-1000);
}

/* Terminal Container (right column) */
.Terminal-Container {
    flex: 0 0 auto;
    width: min(542px, 100%);
}

.Terminal-Windows--sm .Frame-243 code {
    font-size: 0.875rem;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .Grid-card-var {
        grid-template-columns: repeat(2, 1fr);
    }

    .SubSectionB---Terminal {
        flex-direction: column;
        gap: 32px;
    }

    .Terminal-Container {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .SectionCli {
        padding: 48px 16px;
    }

    .SubSectionB---Terminal {
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }

    .Title--CLI {
        flex-direction: column;
        gap: 8px;
    }

    .Grid-card-var {
        grid-template-columns: 1fr;
    }

    .Frame-243 code {
        font-size: 0.8125rem;
    }

    .SectionCli .Content {
        gap: 48px;
    }
}


/* ============================================================
   FEATURE PAGE — Section Deploy with Git (node 387:13349)
   ============================================================ */

.SectionGit {
    background-color: var(--bg-color);
    width: 100%;
    padding: 96px 24px;
    
}

.SectionGit > .Container {
    max-width: 1288px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 120px;
    align-items: flex-start;
     
}

/* ── Left column ── */
.Container--col-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Title row */
.Container--heading {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.SectionGit .SectionNumber span {
    font-family: var(--primary-font);
    font-size: 2.125rem;
    font-weight: 800;
    color: var(--blue-Linear-1000);
    line-height: 1.1;
}

.Container--title {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.Container--title .Heading-2 h2 {
    font-family: var(--primary-font);
    font-size: 2.125rem;
    font-weight: 800;
    color: #030712;
    line-height: 1.17;
}

.Container--title .Paragraph p {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 400;
    color: #686A71;
    line-height: 1.6;
}

/* Inline git push badge + text */
.Paragraph--git-push {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.SectionGit .Code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 400;
    color: #030712;
    background-color: #F4F7FB;
    border-radius: 5px;
    padding: 3px 7px;
    display: inline-block;
}

.Paragraph--git-push span {
    font-family: var(--secondary-font);
    font-size: 0.9375rem;
    font-weight: 400;
    color: #686A71;
}

/* Stack detection */
.Container--stacks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.Paragraph--detected span {
    font-family: var(--secondary-font);
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9A9CA0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.Container-margin {
    padding: 6px 0;
}

.Container--tech {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}

.Container--tech .Text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78125rem;
    font-weight: 400;
    color: #353941;
    background-color: #FFFFFF;
    border: 1px solid var(--text-100);
    border-radius: 7px;
    padding: 5px 8px;
    display: inline-block;
}

/* Auto-deploy toggle banner */
.Container--auto-deploy {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background-color: #F0F7F1;
    border-radius: 12px;
    padding: 12px 16px;
}

.Container--dot-outer {
    width: 34px;
    height: 20px;
    background-color: hsla(160, 84%, 39%, 1);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 2px;
    flex-shrink: 0;
}

.Container--dot-inner {
    width: 16px;
    height: 16px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.Paragraph--auto-deploy {
    font-family: var(--primary-font);
    font-size: 0.875rem;
    font-weight: 700;
    color: #030712;
}

/* Branch previews row */
.Container--branch-preview {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background-color: #FFFFFF;
    border: 1px solid var(--text-100);
    border-radius: 12px;
    padding: 12px 16px;
}

.Icon--git {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.Icon--git i {
    font-size: 1.125rem;
    color: var(--blue-Linear-1000);
}

.Container--branch-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.Text--branch-title {
    font-family: var(--primary-font);
    font-size: 0.875rem;
    font-weight: 700;
    color: #030712;
    white-space: nowrap;
}

.Text--branch-desc {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 400;
    color: #4F5159;
}

.Text--coming-soon {
    font-family: var(--secondary-font);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--blue-Linear-1000);
    background-color: #EBF2FE;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* CTA button */
.ButtonOutlineBlue {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 14px 20px;
    background-color: transparent;
    color: var(--blue-Linear-1000);
    border: 1px solid var(--button-stroke);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ButtonOutlineBlue:hover {
    background-color: #EBF2FE;
    border-color: var(--blue-Linear-1000);
}

/* ── Right column: pipeline card ── */
.Container--col-right {
    flex: 0 0 auto;
    width: min(509px, 100%);
    background-color: #FFFFFF;
    border: 1px solid var(--text-100);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 2px 20px rgba(0, 7, 18, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.Paragraph--how-it-works {
    font-family: var(--secondary-font);
    font-size: 0.6875rem;
    font-weight: 600;
    color: #686A71;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Pipeline */
.--Headlines--git {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* git push dark pill */
.headline--git-push {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background-color: var(--secondary-blackmode);
    border-radius: 11px;
    padding: 11px 14px;
}

.headline--git-push .Icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.headline--git-push .Icon i {
    font-size: 1rem;
    color: #7EE0A0;
}

.headline--git-push code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #D7DCE6;
}

/* Arrow connector */
.arrow-title {
    display: flex;
    flex-direction: column;
}

.arrow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
}

.arrow-wrapper i {
    font-size: 0.875rem;
    color: var(--text-300);
}

/* Step tiles (light bg) */
.title--DeployStep,
.title--stack-identified,
.title-build,
.title--rolling-deploy {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background-color: #F8FAFD;
    border-radius: 11px;
    padding: 12px 14px;
}

.title--DeployStep span,
.title--stack-identified span,
.title-build span,
.title--rolling-deploy span {
    font-family: var(--secondary-font);
    font-size: 0.84375rem;
    font-weight: 400;
    color: #353941;
}

.title--stack-identified i,
.title-build i,
.title--rolling-deploy i {
    font-size: 1rem;
    color: var(--blue-Linear-1000);
    flex-shrink: 0;
    width: 18px;
}

/* Final step (green bg) */
.title--app-updated {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background-color: #F0F7F1;
    border-radius: 11px;
    padding: 12px 14px;
}

.title--app-updated i {
    font-size: 1rem;
    color: var(--green-Linear-1000);
    flex-shrink: 0;
    width: 18px;
}

.title--app-updated code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #030712;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .SectionGit > .Container {
        flex-direction: column;
        gap: 40px;
    }

    .Container--col-right {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .SectionGit {
        padding: 48px 16px;
    }

    .Container--branch-preview {
        flex-wrap: wrap;
    }

    .Container--branch-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}


/* ============================================================
   FEATURE PAGE — Section Deploy with Docker (node 409:11548)
   ============================================================ */

.Deploy-with-Docker {
    background-color: #FFFFFF;
    width: 100%;
    padding: 120px 24px;
}

.Deploy-with-Docker .Subsection-Title---Terminal {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.Deploy-with-Docker .SectionNumber span {
    font-family: var(--primary-font);
    font-size: 2rem;
    font-weight: 700;
    color: var(--blue-Linear-1000);
    line-height: 1.1;
}

/* Quote below terminal */
.Container--docker-quote {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1180px;
}

.Container--docker-quote .Heading-3 h3 {
    font-family: var(--primary-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: #030712;
    line-height: 1.33;
}

.Container--docker-quote .Paragraph-margin p {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 400;
    color: #686A71;
    line-height: 1.6;
    max-width: 560px;
}

/* Cards section */
.Subsection--Subtitle-Cards {
    max-width: 1240px;
    margin: 64px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Paragraph--label-docker {
    font-family: var(--primary-font);
    font-size: 0.875rem;
    font-weight: 700;
    color: #4F5159;
    letter-spacing: 0.06em;
}

.Gris-Card-Button {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

.Grid-Card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Standard service cards */
.Service---Card,
.Card--SSL,
.Card--Isolation,
.Card--Scalling,
.Card--Monitoring {
    background: #FFFFFF;
    border: 1px solid var(--text-100);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.Service---Card:hover,
.Card--SSL:hover,
.Card--Isolation:hover,
.Card--Scalling:hover,
.Card--Monitoring:hover {
    box-shadow: 0 2px 12px rgba(0, 7, 18, 0.06);
    border-color: var(--button-stroke);
}

/* Card icon badge */
.Badge-Icon--card {
    width: 52px;
    height: 52px;
    background-color: var(--text-50);
    border: 1px solid var(--text-100);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.Badge-Icon--card i {
    font-size: 1.5rem;
    color: var(--blue-Linear-1000);
}

/* Card text area */
.Frame-218--docker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.Frame-223--docker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.h3-Service-Name-docker {
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 700;
    color: #030712;
}

.Frame-223--docker > i {
    font-size: 0.875rem;
    color: var(--text-400);
    flex-shrink: 0;
}

.span---description--docker {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    font-weight: 400;
    color: #334155;
    line-height: 1.4;
}

/* Dark "No lock-in" card */
.Deploy-with-Docker .div {
    background-color: var(--secondary-blackmode);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.span--no-lockin {
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 800;
    color: #FFFFFF;
}

.span--docker-desc {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 400;
    color: #E6E6E7;
    line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .Grid-Card {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .Deploy-with-Docker {
        padding: 48px 16px;
    }

    .Grid-Card {
        grid-template-columns: 1fr;
    }

    .Subsection--Subtitle-Cards {
        margin-top: 40px;
    }
}

/* ══════════════════════════════════════════════════════════
   FEATURE PAGE — Deploy via Marketplace (node 425:7698)
   ══════════════════════════════════════════════════════════ */

.Deploy-via-marketplace {
    background-color: #E9EDF4;
    padding: 120px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

/* ── Content wrapper ── */
.Deploy-via-marketplace > .Content {
    width: 100%;
    max-width: 1290px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Intro paragraph (different color from .Paragraph-CLI) */
.Deploy-via-marketplace .Paragraph--intro p {
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 400;
    color: rgba(53, 57, 65, 1);
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

/* ── Middle-Content ── */
.Deploy-via-marketplace .Middle-Content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Two-column layout ── */
.Deploy-via-marketplace .Deploy-Services {
    display: flex;
    flex-direction: row;
    gap: 86px;
    padding: 24px;
    align-items: flex-start;
}

/* ── Left: services table ── */
.Deploy-via-marketplace .Subsection-Left {
    flex: 0 0 683px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    border-radius : 12px; 

}

.Deploy-via-marketplace .Table-Row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 24px 0 16px 16px;
    background-color: #FFFFFF;
    border-radius: 12px;

}

.Deploy-via-marketplace .Table-Row--header {
    padding: 20px 0 20px 22px;
    border-bottom: 1px solid rgb(235, 238, 243);
}

.Deploy-via-marketplace .Table-Row--border {
    border-bottom: 1px solid rgb(235, 242, 254);
}

/* Column widths */
.Deploy-via-marketplace .Col-Service {
    width: 200px;
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.Deploy-via-marketplace .Col-Type {
    width: 120px;
    flex-shrink: 0;
    font-family: var(--secondary-font);
    font-size: 0.84375rem;
    font-weight: 400;
    color: rgba(79, 81, 89, 1);
}

.Deploy-via-marketplace .Col-Usecase {
    flex: 1;
    font-family: var(--secondary-font);
    font-size: 0.84375rem;
    font-weight: 400;
    color: rgba(104, 106, 113, 1);
}

/* Header labels */
.Deploy-via-marketplace .Table-Row--header .Col-Service span,
.Deploy-via-marketplace .Table-Row--header .Col-Type span,
.Deploy-via-marketplace .Table-Row--header .Col-Usecase span {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.6875rem;
    color: rgba(104, 106, 113, 1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Service icon badge */
.Deploy-via-marketplace .Service-Icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.Deploy-via-marketplace .Service-Icon--blue   { background-color: rgba(240, 245, 254, 1); color: rgba(79, 143, 247, 1); }
.Deploy-via-marketplace .Service-Icon--green  { background-color: rgba(248, 251, 248, 1); color: rgba(16, 185, 129, 1); }
.Deploy-via-marketplace .Service-Icon--red    { background-color: rgba(252, 251, 243, 1); color: rgba(207, 49, 45, 1); }
.Deploy-via-marketplace .Service-Icon--purple { background-color: rgba(251, 236, 250, 1); color: rgba(104, 106, 113, 1); }

.Deploy-via-marketplace .Service-Name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: rgba(0, 1, 7, 0.96);
}

/* ── Right column ── */
.Deploy-via-marketplace .Subsection--Right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 38px;
    min-width: 0;
}

/* How it works card */
.Deploy-via-marketplace .Container--How-it-works--mkt {
    background-color: #FFFFFF;
    border: 1px solid rgb(177, 205, 251);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.Deploy-via-marketplace .How-it-works--label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.75rem;
    color: rgba(104, 106, 113, 1);
    margin: 0;
    letter-spacing: 0.06em;
}

.Deploy-via-marketplace .Steps-Container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.Deploy-via-marketplace .Step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.Deploy-via-marketplace .Step-Number {
    width: 24px;
    height: 24px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.8125rem;
    color: #FFFFFF;
    flex-shrink: 0;
}

.Deploy-via-marketplace .Step-Number--blue  { background-color: rgba(59, 130, 246, 1); }
.Deploy-via-marketplace .Step-Number--green { background-color: rgba(16, 185, 129, 1); }

.Deploy-via-marketplace .Step span {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: rgba(53, 57, 65, 1);
    line-height: 1.4;
}

/* Mini .env terminal */
.Deploy-via-marketplace .Container--mini-terminal {
    background-color: var(--secondary-blackmode);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.Deploy-via-marketplace .Title--env {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(104, 106, 113, 0.5);
}

.Deploy-via-marketplace .Title--env i {
    font-size: 0.875rem;
    color: rgba(230, 230, 231, 1);
}

.Deploy-via-marketplace .Title--env span {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.75rem;
    color: rgba(230, 230, 231, 1);
}

.Deploy-via-marketplace .Paragraph--env {
    padding: 13px 16px;
}

.Deploy-via-marketplace .Paragraph--env code {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.75rem;
    color: rgba(118, 167, 249, 1);
    word-break: break-all;
}

/* Managed note */
.Deploy-via-marketplace .Managed-Note {
    background-color: rgba(240, 245, 236, 1);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.Deploy-via-marketplace .Managed-Note--icon {
    font-size: 1.25rem;
    color: rgba(64, 199, 154, 1);
    flex-shrink: 0;
    margin-top: 1px;
}

.Deploy-via-marketplace .Managed-Note p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.75rem;
    color: rgba(0, 1, 7, 0.96);
    margin: 0;
    line-height: 1.6;
}

/* ── Coming soon bar ── */
.Deploy-via-marketplace .Coming-Soon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-left: 24px;
    flex-wrap: wrap;
}

.Deploy-via-marketplace .Coming-Soon--label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.8125rem;
    color: rgba(104, 106, 113, 1);
    white-space: nowrap;
}

.Deploy-via-marketplace .Coming-Soon--tag {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    color: rgba(79, 81, 89, 1);
    background-color: #FFFFFF;
    border-radius: 7px;
    padding: 5px 11px;
    white-space: nowrap;
}

.Deploy-via-marketplace .Coming-Soon--actions {
    margin-left: auto;
}

.ButtonPrimary--marketplace {
    display: inline-flex;
    align-items: center;
    background-color: var(--secondary-blackmode);
    color: #FFFFFF;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: 12px;
    padding: 16px 24px;
    text-decoration: none;
    white-space: nowrap;
}

/* ── CTA Block ── */
.Deploy-via-marketplace .CtaBlock {
    width: 100%;
    max-width: 1280px;
    background-color: var(--secondary-blackmode);
    border-radius: 24px;
    padding: 40px 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}

.Deploy-via-marketplace .CtaBlock--text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.Deploy-via-marketplace .CtaBlock--text h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: 1.875rem;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.25;
}

.Deploy-via-marketplace .CtaBlock--text p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.9375rem;
    color: rgba(154, 156, 160, 1);
    margin: 0;
    max-width: 480px;
}

.Deploy-via-marketplace .CtaBlock--actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.Btn-StartNow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #FFFFFF;
    border: 1px solid var(--button-stroke);
    border-radius: 8px;
    padding: 16px 24px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
}

.Btn-TalkToUs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(3, 7, 18, 1);
    border: 1px solid rgba(53, 57, 65, 1);
    border-radius: 9px;
    padding: 16px 24px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(238, 238, 238, 1);
    text-decoration: none;
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .Deploy-via-marketplace {
        padding: 80px 40px;
        gap: 40px;
    }

    .Deploy-via-marketplace .Deploy-Services {
        flex-direction: column;
        gap: 40px;
    }

    .Deploy-via-marketplace .Subsection-Left {
        flex: none;
        width: 100%;
    }

    .Deploy-via-marketplace .CtaBlock {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .Deploy-via-marketplace .Coming-Soon--actions {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .Deploy-via-marketplace {
        padding: 48px 16px;
        gap: 32px;
    }

    .Deploy-via-marketplace .Deploy-Services {
        padding: 12px 0;
    }

    .Deploy-via-marketplace .Table-Row {
        flex-wrap: wrap;
        gap: 4px;
        padding-left: 0;
    }

    .Deploy-via-marketplace .Col-Service,
    .Deploy-via-marketplace .Col-Type,
    .Deploy-via-marketplace .Col-Usecase {
        width: 100%;
        flex: none;
    }

    .Deploy-via-marketplace .CtaBlock {
        padding: 28px 24px;
        border-radius: 16px;
    }

    .Deploy-via-marketplace .CtaBlock--actions {
        flex-direction: column;
        width: 100%;
    }

    .Btn-StartNow,
    .Btn-TalkToUs {
        width: 100%;
        justify-content: center;
    }

    .Deploy-via-marketplace .Coming-Soon {
        padding-left: 0;
    }

    .ButtonPrimary--marketplace {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════
   SOLUTIONS FOR DEVELOPERS — Hero Section (node 216:2831)
   ══════════════════════════════════════════════════════════ */

.Hero-section {
    background-color: #FFFFFF;
    padding: 80px 80px 0;
    display: flex;
    justify-content: flex-start;
    min-height: 85vh;
    align-items: center;
    margin-bottom: 4rem; 
}

.Hero-section .h1, .hero-bloc--subtitle{
    display : flex; 
    justify-content: center;
}

.Hero-section .hero-bloc--subtitle{
    text-align: center;
}

.Hero-section .hero-content {
    width: 100%;
    max-width: 693px;
    display: flex;
    flex-direction: column;
    gap: 49px;
    margin : 0 auto; 
}

/* Status badge */
.Hero-section .div--margin {
    padding-bottom: 20px;
    
    display: flex; 
    justify-content: center;;
}

.Hero-section .Status-Badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(239, 246, 255, 0.8);
    border: 1px solid rgba(147, 197, 253, 0.5);
    border-radius: 8px;
    padding: 4px 10px;
}

.Hero-section .Status-Badge--dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 1);
    border: 1.5px solid rgba(226, 232, 240, 1);
    flex-shrink: 0;
}

.Hero-section .Status-Badge i {
    font-size: 0.75rem;
    color: rgba(59, 130, 246, 1);
}

.Hero-section .Status-Badge--label {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.05em;
}

/* H1 */
.Hero-section .h1 h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 3.5rem;
    color: rgba(0, 1, 7, 0.96);
    line-height: 1.1;
    margin: 0;
}

/* Subtitle */
.Hero-section .hero-bloc--subtitle {
    padding-top: 22px;
    margin-top: -49px;
}

.Hero-section .hero-bloc--subtitle .p p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    color: rgba(53, 57, 65, 1);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
}

/* Terminal card */
.Hero-section .terminal-card--margin {
    padding-top: 40px;
    margin-top: -49px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.Hero-section .TerminalV0 {
    width: 100%;
}

/* Hero terminal overrides (different gap from features.html shared .Terminal-Windows) */
.Hero-section .Terminal-Windows {
    background-color: var(--secondary-blackmode);
    border-radius: 20px;
    padding: 16px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
}

.Hero-section .Terminal-Windows .Title---options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.Hero-section .Terminal-Windows .Terminal-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.Hero-section .Terminal-Windows .Terminal-label i {
    font-size: 0.875rem;
    color: rgba(205, 205, 208, 1);
}

.Hero-section .Terminal-Windows .Terminal-label span {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: rgba(205, 205, 208, 1);
}

.Hero-section .Frame-243--hero {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.Hero-section .Frame-243--hero code {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 1rem;
    color: rgba(238, 238, 238, 1);
    display: block;
    line-height: 1.25;
}

/* Get Started CTA inside terminal */
.Hero-section .Icon-Bloc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.Hero-section .Btn-terminal-CTA {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(238, 238, 238, 1);
    border-radius: 12px;
    padding: 12px 20px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    width: fit-content;
    align-self: flex-start;
}

.Hero-section .Btn-terminal-CTA i {
    font-size: 1rem;
}

/* Deployed badge — positioned absolutely at the last code line level */
.Hero-section .badge--deployed {
    position: absolute;
    bottom: 32px;
    right: 32px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: rgba(231, 248, 242, 1);
    border-radius: 999px;
    padding: 4px 10px;
    width: fit-content;
}

.Hero-section .badge--deployed i {
    font-size: 0.8125rem;
    color: rgba(16, 185, 129, 1);
}

.Hero-section .badge--deployed span {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.71875rem;
    color: rgba(16, 185, 129, 1);
}

/* CTA buttons */
.Hero-section .div--button--margin {
    padding-top: 34px;
    margin-top: -49px;
}

.Hero-section .CTA-below-band {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.Hero-section .Btn-cta--black {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(3, 7, 18, 1);
    border-radius: 10px;
    padding: 15px 20px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.09375rem;
    color: rgba(238, 238, 238, 1);
    text-decoration: none;
    white-space: nowrap;
}

.Hero-section .Btn-cta--white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: 1px solid rgb(177, 205, 251);
    border-radius: 10px;
    padding: 15px 20px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.09375rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
}

/* ── Responsive Hero ── */
@media (max-width: 960px) {
    .Hero-section {
        padding: 60px 40px;
        min-height: auto;
    }

    .Hero-section .h1 h1 {
        font-size: 2.75rem;
    }
}

@media (max-width: 600px) {
    .Hero-section {
        padding: 48px 16px;
    }

    .Hero-section .h1 h1 {
        font-size: 2.25rem;
    }

    .Hero-section .hero-bloc--subtitle .p p {
        font-size: 1rem;
    }

    .Hero-section .Terminal-Windows {
        padding: 16px 16px 24px;
        gap: 32px;
    }

    .Hero-section .Frame-243--hero code {
        font-size: 0.8125rem;
    }

    .Hero-section .CTA-below-band {
        flex-direction: column;
        align-items: stretch;
    }

    .Hero-section .Btn-cta--black,
    .Hero-section .Btn-cta--white {
        justify-content: center;
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════
   SOLUTIONS FOR DEVELOPERS — Section What Qeda Removes (node 379:4899)
   ══════════════════════════════════════════════════════════════ */

.Section-What-qeda-removes {
    background-color: #E9EDF4;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Cards block ── */
.Section-What-qeda-removes .what-qeda-removes {
    padding: 95px 200px 96px;
}

.Section-What-qeda-removes .what-qeda-removes--content {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.Section-What-qeda-removes .h2 h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.75rem;
    color: rgba(3, 7, 18, 1);
    margin: 0;
    line-height: 1.2;
}

.Section-What-qeda-removes .p--subtitle p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: rgba(104, 106, 113, 1);
    margin: 0;
    line-height: 1.5;
}

/* 2×2 card grid */
.Section-What-qeda-removes .Cards-Grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 33px;
}

/* Cards shared */
.Section-What-qeda-removes .Card--Infrastructure-Setup,
.Section-What-qeda-removes .Card--Certificate,
.Section-What-qeda-removes .Card--Billing,
.Section-What-qeda-removes .Card--Devops {
    background-color: #FFFFFF;
    border: 1px solid rgb(177, 205, 251);
    border-radius: 12px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Icon badges row */
.Section-What-qeda-removes .Card--icons-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.Section-What-qeda-removes .Badge-Icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid rgb(177, 205, 251);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.Section-What-qeda-removes .Badge-Icon i {
    font-size: 1.375rem;
}

.Section-What-qeda-removes .Badge-Icon--primary {
    background-color: rgba(235, 242, 254, 1);
}

.Section-What-qeda-removes .Badge-Icon--primary i {
    color: rgba(59, 130, 246, 1);
}

.Section-What-qeda-removes .Badge-Icon--secondary {
    background-color: #FFFFFF;
}

.Section-What-qeda-removes .Badge-Icon--secondary i {
    color: rgba(100, 116, 139, 1);
    font-size: 1.1rem;
}

/* Card body */
.Section-What-qeda-removes .Card--body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.Section-What-qeda-removes .Card--title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.Section-What-qeda-removes .Card--h3 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(3, 7, 18, 1);
    line-height: 1.25;
}

.Section-What-qeda-removes .card--caret {
    color: rgba(59, 130, 246, 1);
    font-size: 1rem;
    flex-shrink: 0;
}

.Section-What-qeda-removes .Card--description {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: rgba(51, 65, 85, 1);
    margin: 0;
    line-height: 1.6;
}

/* ── Bottom CTA ── */
.Section-What-qeda-removes .Section-CTA {
    padding: 10px 80px 80px;
    display: flex;
    justify-content: center;
}

.Section-What-qeda-removes .CtaBlock--dev {
    width: 100%;
    max-width: 1040px;
    background-color: var(--secondary-blackmode);
    border-radius: 24px;
    padding: 40px 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}

.Section-What-qeda-removes .CtaBlock--dev--text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.Section-What-qeda-removes .CtaBlock--dev--text h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: 2.5rem;
    color: rgba(238, 238, 238, 1);
    margin: 0;
    line-height: 1.15;
}

.Section-What-qeda-removes .CtaBlock--dev--text p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    color: rgba(230, 230, 231, 1);
    margin: 0;
}

.Section-What-qeda-removes .CtaBlock--dev--actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.Btn-CTA-GetStarted {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background-color: rgba(3, 7, 18, 1);
    border: 1px solid rgba(53, 57, 65, 1);
    border-radius: 9px;
    padding: 16px 24px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(238, 238, 238, 1);
    text-decoration: none;
    white-space: nowrap;
}

.Btn-CTA-ReadDocs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #FFFFFF;
    border: 1px solid rgb(177, 205, 251);
    border-radius: 8px;
    padding: 16px 24px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
}

/* ── Responsive Section-What-qeda-removes ── */
@media (max-width: 1280px) {
    .Section-What-qeda-removes .what-qeda-removes {
        padding: 80px 80px;
    }
}

@media (max-width: 960px) {
    .Section-What-qeda-removes .what-qeda-removes {
        padding: 64px 40px;
    }

    .Section-What-qeda-removes .h2 h2 {
        font-size: 2.25rem;
    }

    .Section-What-qeda-removes .CtaBlock--dev {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .Section-What-qeda-removes .Section-CTA {
        padding: 10px 40px 60px;
    }
}

@media (max-width: 720px) {
    .Section-What-qeda-removes .Cards-Grid {
        grid-template-columns: 1fr;
    }

    .Section-What-qeda-removes .CtaBlock--dev--actions {
        flex-direction: column;
        width: 100%;
    }

    .Btn-CTA-GetStarted,
    .Btn-CTA-ReadDocs {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .Section-What-qeda-removes .what-qeda-removes {
        padding: 48px 16px;
    }

    .Section-What-qeda-removes .h2 h2 {
        font-size: 1.875rem;
    }

    .Section-What-qeda-removes .Section-CTA {
        padding: 10px 16px 48px;
    }

    .Section-What-qeda-removes .CtaBlock--dev {
        padding: 28px 24px;
        border-radius: 16px;
    }

    .Section-What-qeda-removes .CtaBlock--dev--text h2 {
        font-size: 1.75rem;
    }
}


/* ============================================================
   Hero-Section-You-Code (node 457:4932) — solution-for-agencies
   ============================================================ */

.Hero-Section-You-Code {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 42px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px 279px;
    box-sizing: border-box;
}

/* ── Heading block ── */
.agencies-heading-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
    text-align: center;
}

.agencies-badge-margin {
    padding-bottom: 20px;
}

.Status-Badge--agencies {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(239, 246, 255, 1);
    border-radius: 8px;
    padding: 2px 8px;
}

.Status-Badge--dot--agencies {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 1);
    border: 1px solid rgba(226, 232, 240, 1);
    flex-shrink: 0;
}

.Status-Badge--label--agencies {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.04em;
}

.agencies-h1 h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 3.75rem;
    color: rgba(0, 1, 7, 1);
    line-height: 1.15;
    margin: 0;
}

.agencies-p-margin {
    padding-top: 22px;
}

.agencies-subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    color: rgba(104, 106, 113, 1);
    line-height: 1.6;
    margin: 0;
}

/* ── Dashboard + CTA content block ── */
.agencies-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.agencies-dashboard-margin {
    padding-top: 42px;
}

.agencies-dashboard-mock {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(238, 238, 238, 1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 24px 0 rgba(0, 1, 7, 0.06);
}

/* Dashboard top bar */
.dashboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(248, 249, 250, 1);
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    padding: 14px 18px;
    gap: 10px;
}

.dashboard-topbar--left {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dashboard-dot--green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(16, 185, 129, 1);
    flex-shrink: 0;
}

.dashboard-clients-label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.8125rem;
    color: rgba(0, 1, 7, 1);
}

.dashboard-btn--new-project {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(0, 1, 7, 1);
    border: none;
    border-radius: 9px;
    padding: 6px 14px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.8125rem;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
}

.dashboard-btn--new-project i {
    font-size: 0.875rem;
    color: #ffffff;
}

/* Dashboard 2×2 project grid */
.dashboard-projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 18px;
}

.dashboard-project-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background-color: #ffffff;
    border: 1px solid rgba(238, 239, 241, 1);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 1px 4px 0 rgba(0, 1, 7, 0.04);
}

.project-card--header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
}

.project-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.project-dot--green  { background-color: rgba(16, 185, 129, 1); }
.project-dot--blue   { background-color: rgba(59, 130, 246, 1); }
.project-dot--gold   { background-color: rgba(212, 175, 55, 1); }

.project-name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: rgba(0, 1, 7, 1);
    flex: 1;
}

.project-status {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 0.6875rem;
}

.project-status--live      { color: rgba(16, 185, 129, 1); }
.project-status--deploying { color: rgba(59, 130, 246, 1); }
.project-status--build     { color: rgba(168, 135, 38, 1); }

.project-bar {
    height: 7px;
    background-color: rgba(238, 239, 241, 1);
    border-radius: 99px;
}

.project-bar--long   { width: 75%; }
.project-bar--medium { width: 56%; }

/* ── CTA buttons ── */
.agencies-cta-margin {
    padding-top: 34px;
}

.agencies-cta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.Btn-agencies--black {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(3, 7, 18, 1);
    border-radius: 10px;
    padding: 15px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.09375rem;
    color: rgba(238, 238, 238, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Btn-agencies--black:hover {
    background-color: rgba(28, 32, 42, 1);
}

.Btn-agencies--white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: 1px solid rgba(177, 205, 251, 1);
    border-radius: 10px;
    padding: 15px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.09375rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Btn-agencies--white:hover {
    background-color: rgba(239, 246, 255, 1);
}

/* ── Responsive ── */
@media (max-width: 1280px) {
    .Hero-Section-You-Code {
        padding: 80px 120px;
    }
}

@media (max-width: 960px) {
    .Hero-Section-You-Code {
        padding: 60px 40px;
        gap: 32px;
    }
    .agencies-h1 h1 {
        font-size: 2.75rem;
    }
    .dashboard-projects-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px;
    }
}

@media (max-width: 600px) {
    .Hero-Section-You-Code {
        padding: 48px 20px;
    }
    .agencies-h1 h1 {
        font-size: 2rem;
    }
    .dashboard-projects-grid {
        grid-template-columns: 1fr;
    }
    .agencies-cta-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .Btn-agencies--black,
    .Btn-agencies--white {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   Everything-4-up (node 464:4841) — solution-for-agencies
   ============================================================ */

.Everything-4-up {
    background-color: rgba(243, 245, 248, 1);
    width: 100%;
    padding: 192px 180px;
    box-sizing: border-box;
}

.Everything-4-up--content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1080px;
    margin: 0 auto;
}

/* ── Heading ── */
.Everything-4-up--h2 h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.25rem;
    color: rgba(0, 1, 7, 1);
    line-height: 1.2;
    margin: 0;
}

/* ── 2×2 feature cards ── */
.Features-4-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.Feature-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 6px 0 rgba(0, 1, 7, 0.05);
}

.Feature-card--icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: rgba(235, 242, 254, 1);
    border-radius: 11px;
    flex-shrink: 0;
    margin-bottom: 3px;
}

.Feature-card--icon-badge i {
    font-size: 1.3125rem;
    color: rgba(59, 130, 246, 1);
}

.Feature-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.125rem;
    color: rgba(0, 1, 7, 1);
    padding-top: 8px;
    line-height: 1.3;
}

.Feature-card--description {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.90625rem;
    color: rgba(104, 106, 113, 1);
    line-height: 1.55;
    margin: 0;
}

/* ── Workflow card ── */
.Agency-workflow-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    background-color: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 1px 6px 0 rgba(0, 1, 7, 0.05);
}

.Agency-workflow--label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.75rem;
    color: rgba(104, 106, 113, 1);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.Agency-workflow--steps {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.Workflow-step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.Workflow-step--number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.Workflow-step--number--active {
    background-color: rgba(59, 130, 246, 1);
    color: #ffffff;
}

.Workflow-step--number--default {
    background-color: rgba(235, 242, 254, 1);
    color: rgba(59, 130, 246, 1);
}

.Workflow-step--number--done {
    background-color: rgba(231, 248, 242, 1);
    color: rgba(16, 185, 129, 1);
    font-size: 0.9375rem;
}

.Workflow-step--number--done i {
    font-size: 0.9375rem;
    color: rgba(16, 185, 129, 1);
}

.Workflow-step--text {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.90625rem;
    color: rgba(53, 57, 65, 1);
    line-height: 1.5;
    margin: 0;
    padding-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 1280px) {
    .Everything-4-up {
        padding: 120px 80px;
    }
}

@media (max-width: 960px) {
    .Everything-4-up {
        padding: 80px 40px;
    }
    .Agency-workflow--steps {
        flex-wrap: wrap;
        gap: 16px;
    }
    .Workflow-step {
        flex: 0 0 calc(50% - 8px);
    }
}

@media (max-width: 600px) {
    .Everything-4-up {
        padding: 60px 20px;
    }
    .Features-4-grid {
        grid-template-columns: 1fr;
    }
    .Everything-4-up--h2 h2 {
        font-size: 1.75rem;
    }
    .Workflow-step {
        flex: 0 0 100%;
    }
}


/* ============================================================
   Marketplace-Page — Marketplace--Hero-Section (node 474:5209)
   ============================================================ */

.Marketplace--Hero-Section {
    background-color: rgba(232, 236, 243, 1);
    width: 100%;
}

.MarketplaceHeroB {
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 128px 76px 80px;
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Hero row: left text + right cards ── */
.Container--hero-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
}

/* Left column */
.Marketplace-hero--left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 0 0 703px;
    max-width: 703px;
}

.Features--Headlines {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.75rem;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.06em;
}

.Features--Headlines i {
    font-size: 1rem;
    color: rgba(59, 130, 246, 1);
}

.Heading-1 h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 3.75rem;
    color: rgba(3, 7, 18, 1);
    line-height: 1.15;
    margin: 0;
}

.Hero--Subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    color: rgba(79, 81, 89, 1);
    margin: 0;
    line-height: 1.5;
}

.Button--Container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

.Button-Browse-Catalog {
    display: inline-flex;
    align-items: center;
    background-color: rgba(3, 7, 18, 1);
    border-radius: 12px;
    padding: 18px 28px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(255, 253, 253, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Button-Browse-Catalog:hover {
    background-color: rgba(28, 32, 42, 1);
}

.Button-Read-Doc {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 253, 253, 1);
    border: 1px solid rgba(205, 205, 208, 1);
    border-radius: 12px;
    padding: 18px 28px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Button-Read-Doc:hover {
    background-color: rgba(243, 245, 248, 1);
}

/* Right column: 2×2 cards grid */
.CategoryCards--Grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1;
}

.CategoryPreviewCard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: rgba(255, 253, 253, 1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 4px 0 rgba(0, 1, 7, 0.05);
}

.CategoryPreviewCard--dark {
    background-color: rgba(3, 7, 18, 1);
}

.CategoryCard--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}

.CategoryCard--icon i {
    font-size: 1.125rem;
    color: #ffffff;
}

.CategoryCard--icon--dark {
    background-color: rgba(28, 32, 42, 1);
}

.CategoryCard--icon--dark i {
    color: rgba(59, 130, 246, 1);
}

.CategoryCard--name {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.9375rem;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.CategoryCard--name--white {
    color: #ffffff;
}

.CategoryCard--list {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.8125rem;
    color: rgba(79, 81, 89, 1);
    margin: 0;
    line-height: 1.4;
}

.CategoryCard--list--muted {
    color: rgba(205, 205, 208, 1);
    font-size: 0.75rem;
}

/* ── Search bar ── */
.Research--Bar-Container {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 254, 254, 1);
    border: 1px solid rgba(118, 167, 249, 1);
    border-radius: 12px;
    padding: 14px 16px;
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.Research--Bar-Container:focus-within {
    border-color: rgba(59, 130, 246, 1);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.Research-Bar--icon {
    font-size: 1.25rem;
    color: rgba(129, 131, 136, 1);
    flex-shrink: 0;
}

.Research-Bar {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(3, 7, 18, 1);
}

.Research-Bar::placeholder {
    color: rgba(129, 131, 136, 1);
    font-weight: 700;
}


/* ── Responsive ── */
@media (max-width: 1280px) {
    .MarketplaceHeroB {
        padding: 96px 48px 64px;
        gap: 64px;
    }
    .Marketplace-hero--left {
        flex: 1 1 400px;
        max-width: none;
    }
}

@media (max-width: 960px) {
    .MarketplaceHeroB {
        padding: 72px 40px 56px;
        gap: 48px;
    }
    .Container--hero-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    .Marketplace-hero--left {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .CategoryCards--Grid {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
    .Heading-1 h1 {
        font-size: 2.75rem;
    }
    .Research-Bar {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .MarketplaceHeroB {
        padding: 56px 20px 40px;
        gap: 36px;
    }
    .Heading-1 h1 {
        font-size: 2rem;
    }
    .CategoryCards--Grid {
        grid-template-columns: 1fr;
    }
    .Button--Container {
        flex-direction: column;
        align-items: flex-start;
    }
    .Button-Browse-Catalog,
    .Button-Read-Doc {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   Marketplace-Page — catalog section (node 69:768)
   ============================================================ */

.Marketplace-Page {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding: 120px 80px;
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
}

.Marketplace-Page--content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Group headings ── */
.framework-group,
.database-group,
.apps-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.apps-group { gap: 19px; }

.mktp-group--heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 1);
}

.mktp-group--heading i {
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 1);
}

/* ── Card rows ── */
.mktp--framework,
.mktp--dtbase,
.mktp--apps {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

/* ── Service Card ── */
.Service-Card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    background-color: rgba(255, 253, 253, 1);
    border: 1px solid rgba(177, 205, 251, 1);
    border-radius: 12px;
    padding: 32px 24px;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.Service-Card:hover {
    box-shadow: 0 4px 16px 0 rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.5);
}

.Service-Card--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.Service-Card--badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: rgba(255, 253, 253, 1);
    border: 1px solid rgba(177, 205, 251, 1);
    border-radius: 10px;
    flex-shrink: 0;
}

/* Service logo — vector image from Figma */
.service-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* Service card body */
.Service-Card--body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.Service-Card--name-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.h3-Service-Name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(0, 1, 7, 1);
}

.Service-Card--name-row i {
    font-size: 1rem;
    color: rgba(28, 32, 42, 1);
}

.span--description {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: rgba(28, 32, 42, 1);
    line-height: 1.55;
    margin: 0;
}

/* ── CTA Block ── */
.CtaBlock--marketplace {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background-color: rgba(28, 32, 42, 1);
    border-radius: 24px;
    padding: 40px 48px;
}

.CtaBlock--marketplace--text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.CtaBlock--marketplace--text h2 {
    font-family: var(--secondary-font);
    font-weight: 800;
    font-size: 1.875rem;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.CtaBlock--marketplace--text p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.9375rem;
    color: rgba(205, 205, 208, 1);
    margin: 0;
}

.CtaBlock--marketplace--actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.Btn-StartNow--marketplace {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    border: 1px solid rgba(177, 205, 251, 1);
    border-radius: 8px;
    padding: 16px 24px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Btn-StartNow--marketplace:hover {
    background-color: rgba(239, 246, 255, 1);
}

.Btn-TalkToUs--marketplace {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(3, 7, 18, 1);
    border: 1px solid rgba(53, 57, 65, 1);
    border-radius: 9px;
    padding: 16px 24px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(238, 238, 238, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Btn-TalkToUs--marketplace:hover {
    border-color: rgba(177, 205, 251, 1);
}

/* ── Responsive ── */
@media (max-width: 1280px) {
    .Marketplace-Page {
        padding: 80px 48px;
        gap: 80px;
    }
}

@media (max-width: 960px) {
    .Marketplace-Page {
        padding: 60px 40px;
        gap: 60px;
    }
    .mktp--framework {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .mktp--dtbase {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .CtaBlock--marketplace {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 28px;
    }
}

@media (max-width: 600px) {
    .Marketplace-Page {
        padding: 48px 20px;
        gap: 48px;
    }
    .mktp--framework,
    .mktp--dtbase {
        grid-template-columns: 1fr;
    }
    .CtaBlock--marketplace--actions {
        flex-direction: column;
        width: 100%;
    }
    .Btn-StartNow--marketplace,
    .Btn-TalkToUs--marketplace {
        width: 100%;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════
   Help Center
   Nodes: 505-5307 · 506-5812 · 505-5450 · 505-5360
══════════════════════════════════════════════ */

/* ── Hero-Section (505-5307) ── */

.help-hero-section {
    background-color: #ffffff;
    width: 100%;
    height: 70vh;

}

.help-hero--wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 90px;
    display: flex;
    justify-content: center;
    height: 100%; 
}

.help-message-hero {
    max-width: 760px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;

}

.Status-Badge--help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.Status-Badge--dot--help {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 1);
    flex-shrink: 0;
}

.Status-Badge--label--help {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.08em;
}

.help-h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.help-subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    color: rgba(79, 81, 89, 1);
    line-height: 1.5;
    margin: 0;
}

/* Search bar */
.Search-Bar-Wrap--help {
    width: 100%;
    max-width: 620px;
}

.Search-Bar--help {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s;
}

.Search-Bar--help:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.help-search-icon {
    font-size: 20px;
    color: rgba(129, 131, 136, 1);
    flex-shrink: 0;
}

.help-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--secondary-font);
    font-size: 0.9375rem;
    color: rgba(53, 57, 65, 1);
    min-width: 0;
}

.help-search-input::placeholder {
    color: rgba(129, 131, 136, 1);
}

.help-kbd-hint {
    flex-shrink: 0;
    background-color: rgba(245, 247, 249, 1);
    border-radius: 4px;
    padding: 3px 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(129, 131, 136, 1);
}

/* Popular suggestion chips */
.box-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.box-tag--label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13.5px;
    color: rgba(129, 131, 136, 1);
}

.sugg-chip {
    background-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 5px 12px;
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 13.5px;
    color: rgba(53, 57, 65, 1);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.sugg-chip:hover {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4), 0 2px 6px rgba(0, 0, 0, 0.08);
}


/* ── Still-need-help (506-5812) ── */

.still-need-help {
    background-color: rgba(233, 237, 244, 1);
    width: 100%;
}

.still-need-help--content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 90px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.still-need-help--heading h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: rgba(0, 1, 7, 1);
    margin: 0 0 16px;
}

.still-need-help--heading p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    color: rgba(79, 81, 89, 1);
    line-height: 1.5;
    margin: 0;
}

.chan-cards-wrap {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.chan-card {
    flex: 1 1 260px;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chan-card--icon-badge {
    width: 56px;
    height: 56px;
    background-color: rgba(248, 250, 253, 1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    font-size: 28px;
    color: rgba(3, 7, 18, 1);
    flex-shrink: 0;
}

.chan-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 18px;
    color: rgba(0, 1, 7, 1);
    margin: 0;
}

.chan-card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14px;
    color: rgba(79, 81, 89, 1);
    line-height: 1.5;
    margin: 0;
}

.chan-card--email {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: rgba(53, 57, 65, 1);
}

.chan-card--link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(59, 130, 246, 1);
    text-decoration: none;
    margin-top: auto;
}

.chan-card--link:hover {
    text-decoration: underline;
}


/* ── most-asked-this-week (505-5450) ── */

.most-asked-this-week {
    background-color: rgba(233, 237, 244, 1);
    width: 100%;
}

.most-asked--content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 90px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.most-asked--title-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.most-asked--trending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
}

.most-asked--trending i {
    font-size: 15px;
}

.most-asked--title-block h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.q-row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.q-row {
    background-color: rgba(255, 253, 253, 1);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
}

.q-row--meta {
    display: flex;
    align-items: center;
}

.q-tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
}

.q-tag--deployments {
    background-color: rgba(235, 242, 254, 1);
    color: rgba(59, 130, 246, 1);
}

.q-tag--billing {
    background-color: rgba(231, 248, 242, 1);
    color: rgba(16, 185, 129, 1);
}

.q-tag--account {
    background-color: rgba(230, 230, 231, 1);
    color: rgba(79, 81, 89, 1);
}

.q-row--question {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 18px;
    color: rgba(3, 7, 18, 1);
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

.q-row--link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(59, 130, 246, 1);
    text-decoration: none;
}

/* Dark "Browse all" card */
.q-row--dark {
    background-color: rgba(28, 32, 42, 1);
}

.q-row--dark-badge {
    width: 40px;
    height: 40px;
    background-color: rgba(137, 180, 250, 1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(28, 32, 42, 1);
    flex-shrink: 0;
}

.q-row--dark-title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 18px;
    color: rgba(230, 230, 231, 1);
    margin: 0;
    flex: 1;
}

.q-row--dark-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(137, 180, 250, 1);
}


/* ── Find-right-guide (505-5360) ── */

.find-right-guide {
    background-color: rgba(233, 237, 244, 1);
    width: 100%;
}

.find-right-guide--content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 90px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.find-right-guide--title-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.find-right-guide--eyebrow {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
}

.find-right-guide--title-block h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    color: rgba(0, 1, 7, 1);
    margin: 0;
}

.cat-row-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cat-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: rgba(255, 253, 253, 1);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    transition: box-shadow 0.15s;
}

.cat-row:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
}

.cat-row--icon-badge {
    width: 54px;
    height: 54px;
    background-color: rgba(255, 253, 253, 1);
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    color: rgba(59, 130, 246, 1);
}

.cat-row--icon-badge--billing {
    background-color: rgba(248, 251, 248, 1);
    color: rgba(16, 185, 129, 1);
}

.cat-row--icon-badge--account {
    background-color: rgba(248, 249, 250, 1);
    color: rgba(53, 57, 65, 1);
}

.cat-row--body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cat-row--header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cat-row--header h3 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 20px;
    color: rgba(0, 1, 7, 1);
    margin: 0;
}

.cat-row--count {
    background-color: rgba(245, 247, 249, 1);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(79, 81, 89, 1);
    white-space: nowrap;
}

.cat-row--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14.5px;
    color: rgba(79, 81, 89, 1);
    margin: 0;
}

.cat-row--arrow {
    font-size: 22px;
    color: rgba(104, 106, 113, 1);
    flex-shrink: 0;
}


/* ── Help Center Responsive ── */

@media (max-width: 1024px) {
    .help-hero--wrap,
    .still-need-help--content,
    .most-asked--content,
    .find-right-guide--content {
        padding: 80px 48px;
    }
    .q-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .help-hero--wrap,
    .still-need-help--content,
    .most-asked--content,
    .find-right-guide--content {
        padding: 64px 32px;
    }
    .chan-cards-wrap {
        flex-direction: column;
    }
    .q-row-grid {
        grid-template-columns: 1fr;
    }
    .cat-row--icon-badge {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .help-hero--wrap,
    .still-need-help--content,
    .most-asked--content,
    .find-right-guide--content {
        padding: 48px 20px;
    }
    .box-tag {
        justify-content: flex-start;
    }
    .Search-Bar-Wrap--help {
        max-width: 100%;
    }
}


/* ══════════════════════════════════════════════
   Templates
   Nodes: 516-7470 · 513-6102 · 518-7684 · 518-7737
══════════════════════════════════════════════ */

/* ── hero-section (516-7470) ── */

.templates-hero-section {
    background-color: #ffffff;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.templates-hero--inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 90px 90px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    
}

.templates-hero--h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1;
    color: rgba(3, 7, 18, 1);
    margin: 0;
    text-align: center;
}

.templates-hero--accent {
    color: rgba(59, 130, 246, 1);
}

.templates-hero--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    color: rgba(79, 81, 89, 1);
    line-height: 1.55;
    max-width: 540px;
    margin: 0;
    text-align: center;
}

.templates-search-wrap {
    max-width: 820px;
    width: 100%; 
}

.templates-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s;
}

.templates-search-bar:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.templates-search-icon {
    font-size: 20px;
    color: rgba(59, 130, 246, 1);
    flex-shrink: 0;
}

.templates-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--secondary-font);
    font-size: 1.03125rem;
    color: rgba(53, 57, 65, 1);
    min-width: 0;
}

.templates-search-input::placeholder {
    color: rgba(117, 117, 117, 1);
}


/* ── section--template (513-6102) ── */

.section--template {
    background-color: rgba(233, 237, 244, 1);
    width: 100%;
}

.section--template--content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 90px 100px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Header block */
.Container-Popular-Template-Subtitles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.Popular-Template--eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
}

.Popular-Template--h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.125rem);
    color: rgba(0, 1, 7, 1);
    margin: 0;
}

.Popular-Template--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: rgba(79, 81, 89, 1);
    max-width: 565px;
    margin: 0;
    line-height: 1.5;
}

/* Filter row */
.template-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.Sort-Container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-card {
    background-color: rgba(255, 253, 253, 1);
    border: 1px solid rgba(220, 225, 233, 1);
    border-radius: 8px;
    padding: 4px 16px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.9375rem;
    color: rgba(79, 81, 89, 1);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.filter-card:hover,
.filter-card--active {
    border-color: rgba(59, 130, 246, 0.5);
    color: rgba(59, 130, 246, 1);
}

.all-templates-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 14px;
    color: rgba(53, 57, 65, 1);
    text-decoration: none;
    white-space: nowrap;
}

.all-templates-link:hover {
    color: rgba(59, 130, 246, 1);
}

/* Cards grid */
.Container-Card-Grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.template-card {
    background-color: rgba(255, 253, 253, 1);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s, transform 0.15s;
    cursor: pointer;
}

.template-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.template-card--banner {
    width: 100%;
    aspect-ratio: 500 / 210;
    overflow: hidden;
    background-color: rgba(233, 237, 244, 1);
}

.template-card--banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.insights-Container {
    padding: 14px 16px;
}

.Infos-Template {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.Title-Details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.template-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 13px;
    color: rgba(0, 0, 0, 1);
}

.template-card--tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.template-tag {
    background-color: rgba(235, 242, 254, 1);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 12px;
    color: rgba(53, 57, 65, 1);
}

.template-card--author {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 1);
    margin: 0;
}

.template-card--author span {
    font-weight: 500;
}

.Insights {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.insight-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 12px;
    color: rgba(53, 57, 65, 1);
}

.insight-item i {
    font-size: 13px;
}


/* ── section--How-it-works (518-7684) ── */

.section--How-it-works {
    background-color: rgba(233, 237, 244, 1);
    width: 100%;
}

.HowItWorksSection {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 90px;
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.how-it-works--header {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.how-it-works--header h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.125rem);
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.how-it-works--header p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: rgba(104, 106, 113, 1);
    margin: 0;
}

.step-cards-row {
    flex: 1;
    display: flex;
    gap: 0;
}

.StepCard {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 28px 0 0;
}

.StepCard:last-child {
    padding-right: 0;
}

.step-number-badge {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: 17px;
    color: #ffffff;
    flex-shrink: 0;
}

.step-number-badge--blue {
    background-color: rgba(59, 130, 246, 1);
}

.step-number-badge--green {
    background-color: rgba(16, 185, 129, 1);
}

.step-icon-container {
    width: 40px;
    height: 40px;
    background-color: rgba(233, 237, 244, 1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(53, 57, 65, 1);
}

.step-title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 19px;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.step-desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14.5px;
    color: rgba(104, 106, 113, 1);
    line-height: 1.5;
    margin: 0;
}

.step-divider {
    width: 102px;
    height: 2px;
    background-color: rgba(220, 225, 233, 1);
    margin-top: auto;
}


/* ── section--add-your-stone (518-7737) ── */

.section--add-your-stone {
    background-color: rgba(233, 237, 244, 1);
    width: 100%;
    padding: 60px 90px 80px;
    display: flex;
    justify-content: center;
}

.add-your-stone--card {
    max-width: 1140px;
    width: 100%;
    background-color: rgba(255, 253, 253, 1);
    border-radius: 20px;
    padding: 56px 80px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

.PyramidCTAContent {
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Avatars */
.Avatars-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.Avatars-Container {
    display: flex;
    gap: 0;
}

.Avatars-Container img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 253, 253, 1);
    object-fit: cover;
    display: block;
    margin-left: -14px;
    flex-shrink: 0;
}

.Avatars-Container img:first-child {
    margin-left: 0;
}

.avatars-label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13.5px;
    color: rgba(79, 81, 89, 1);
    margin: 0;
}

/* Message */
.pyramid-message {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pyramid-message--h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.pyramid-message--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: rgba(79, 81, 89, 1);
    line-height: 1.55;
    max-width: 500px;
    margin: 0;
}

.CTA-Container--pyramid {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.submit-template-btn {
    display: inline-flex;
    align-items: center;
    background-color: rgba(3, 7, 18, 1);
    border-radius: 12px;
    padding: 18px 28px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(255, 253, 253, 1);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.submit-template-btn:hover {
    opacity: 0.88;
}

.contribution-link {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 14.5px;
    color: rgba(59, 130, 246, 1);
    text-decoration: none;
}

.contribution-link:hover {
    text-decoration: underline;
}

.pyramid-review-note {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 12px;
    color: rgba(79, 81, 89, 1);
    margin: 0;
}


/* ── Templates Responsive ── */

@media (max-width: 1024px) {
    .templates-hero--inner,
    .section--template--content,
    .section--add-your-stone {
        padding-left: 48px;
        padding-right: 48px;
    }
    .HowItWorksSection {
        padding: 80px 48px;
        flex-direction: column;
        gap: 48px;
    }
    .how-it-works--header {
        flex: none;
    }
    .add-your-stone--card {
        padding: 48px;
    }
}

@media (max-width: 768px) {
    .templates-hero--inner,
    .section--template--content,
    .section--add-your-stone {
        padding-left: 32px;
        padding-right: 32px;
    }
    .Container-Card-Grid {
        grid-template-columns: 1fr;
    }
    .step-cards-row {
        flex-direction: column;
        gap: 32px;
    }
    .StepCard {
        padding-right: 0;
    }
    .HowItWorksSection {
        padding: 64px 32px;
    }
    .add-your-stone--card {
        padding: 36px 28px;
    }
    .template-filter-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .templates-hero--inner,
    .section--template--content,
    .section--add-your-stone {
        padding-left: 20px;
        padding-right: 20px;
    }
    .HowItWorksSection {
        padding: 48px 20px;
    }
    .templates-search-wrap {
        max-width: 100%;
    }
    .CTA-Container--pyramid {
        flex-direction: column;
        align-items: flex-start;
    }
    .submit-template-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════
   About Us  —  node 535-7803
══════════════════════════════════════════════ */

/* ── HeroSection (535:7839) ── */

.about-hero-section {
    background-color: rgba(232, 236, 243, 1);
    width: 100%;
}

.about-hero--inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 90px 90px 80px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-hero--left {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.about-hero--eyebrow {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.06em;
}

.about-hero--h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.about-hero--accent {
    color: rgba(59, 130, 246, 1);
}

.about-hero--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    color: rgba(79, 81, 89, 1);
    line-height: 1.55;
    max-width: 518px;
    margin: 0;
}

.about-hero--quote {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    align-self: flex-start;
}

.about-hero--quote p {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(59, 130, 246, 1);
    margin: 0;
}

.about-hero--cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.about-hero--btn-docs {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid rgba(205, 205, 208, 1);
    border-radius: 12px;
    padding: 18px 28px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s;
}

.about-hero--btn-docs:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

/* Right: terminal */
.about-hero--right {
    flex: 0 0 325px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.TerminalDecor {
    background-color: rgba(13, 17, 23, 1);
    border-radius: 12px;
    overflow: hidden;
}

.terminal-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot--red    { background-color: rgba(239, 68, 68, 1); }
.dot--yellow { background-color: rgba(245, 158, 11, 1); }
.dot--green  { background-color: rgba(16, 185, 129, 1); }

.terminal-title {
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(79, 81, 89, 1);
}

.terminal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.terminal-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.6;
}

.t-comment { color: rgba(79, 81, 89, 1); }
.t-success { color: rgba(16, 185, 129, 1); }
.t-arrow   { color: rgba(59, 130, 246, 1); }
.t-text    { color: rgba(200, 202, 207, 1); }
.t-muted   { color: rgba(154, 156, 160, 1); }
.t-prompt  { color: rgba(59, 130, 246, 1); }

.terminal-cursor {
    display: inline-block;
    width: 7px;
    height: 14px;
    background-color: rgba(59, 130, 246, 1);
    vertical-align: middle;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Stat badges below terminal */
.about-hero--stat-badges {
    display: flex;
    gap: 8px;
}

.stat-badge {
    flex: 1;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-badge--value {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 18px;
}

.stat-badge--value--green  { color: rgba(16, 185, 129, 1); }
.stat-badge--value--blue   { color: rgba(59, 130, 246, 1); }
.stat-badge--value--purple { color: rgba(139, 92, 246, 1); }

.stat-badge--label {
    font-family: var(--secondary-font);
    font-size: 11.5px;
    color: rgba(154, 156, 160, 1);
}


/* ── StatsBar (535:7907) ── */

.StatsBar {
    background-color: var(--secondary-blackmode);
    width: 100%;
}

.StatsBar--inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 114px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 28px 0;
}

.stat-item--value {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: 28px;
    color: #ffffff;
    line-height: 1;
}

.stat-item--label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 12px;
    color: rgba(205, 205, 208, 1);
}


/* ── PillarsSection (535:7929) ── */

.PillarsSection {
    background-color: #ffffff;
    width: 100%;
}

.PillarsSection--inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 90px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.pillars-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.pillars-header--number {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: 26px;
    color: rgba(59, 130, 246, 1);
    flex-shrink: 0;
    line-height: 1.2;
    padding-top: 4px;
}

.pillars-header--text h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    color: rgba(0, 1, 7, 1);
    margin: 0 0 6px;
}

.pillars-header--text p {
    font-family: var(--secondary-font);
    font-size: 14.5px;
    color: rgba(79, 81, 89, 1);
    margin: 0;
}

.pillars-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pillar-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 0;
    border-top: 1px solid rgba(230, 230, 231, 1);
}

.pillar-row:last-child {
    border-bottom: 1px solid rgba(230, 230, 231, 1);
}

.pillar-row--index {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: rgba(0, 1, 7, 1);
    flex-shrink: 0;
    width: 28px;
}

.pillar-row--icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

.pillar-row--icon--blue   { background-color: rgba(59, 130, 246, 1); }
.pillar-row--icon--green  { background-color: rgba(16, 185, 129, 1); }
.pillar-row--icon--purple { background-color: rgba(139, 92, 246, 1); }

.pillar-row--body {
    flex: 1;
    min-width: 0;
}

.pillar-row--body h3 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 18px;
    color: rgba(0, 1, 7, 1);
    margin: 0 0 6px;
}

.pillar-row--body p {
    font-family: var(--secondary-font);
    font-size: 13.5px;
    color: rgba(79, 81, 89, 1);
    margin: 0;
    max-width: 506px;
    line-height: 1.5;
}

.pillar-row--tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(248, 249, 250, 1);
    border-radius: 6px;
    padding: 4px 10px;
    flex-shrink: 0;
}

.pillar-row--tag span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(0, 1, 7, 1);
}

.pillar-row--tag i {
    font-size: 12px;
    color: rgba(0, 1, 7, 1);
}


/* ── MissionStrip (535:7993) ── */

.MissionStrip {
    background-color: rgba(232, 236, 243, 1);
    width: 100%;
}

.MissionStrip--inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 90px;
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.mission-text {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mission-eyebrow {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mission-text h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    color: rgba(3, 7, 18, 1);
    margin: 0;
    line-height: 1.15;
}

.mission-text p {
    font-family: var(--secondary-font);
    font-size: 1rem;
    color: rgba(79, 81, 89, 1);
    margin: 0;
    line-height: 1.6;
}

.mission-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mission-chip {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 6px 14px;
    font-family: var(--secondary-font);
    font-size: 13px;
    color: rgba(53, 57, 65, 1);
}

/* Timeline */
.mission-timeline-col {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mission-timeline-card {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 4px 0;
    overflow: hidden;
}

.timeline-entry {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(244, 247, 251, 1);
}

.timeline-entry:last-child {
    border-bottom: none;
}

.timeline-year {
    background-color: rgba(244, 247, 251, 1);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(79, 81, 89, 1);
    white-space: nowrap;
    flex-shrink: 0;
}

.timeline-entry p {
    font-family: var(--secondary-font);
    font-size: 13.5px;
    color: rgba(79, 81, 89, 1);
    margin: 0;
    line-height: 1.45;
}

.mission-regions-card {
    background-color: rgba(0, 1, 7, 1);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mission-regions-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(59, 130, 246, 1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    flex-shrink: 0;
}

.mission-regions-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mission-regions--value {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
}

.mission-regions--sub {
    font-family: var(--secondary-font);
    font-size: 12px;
    color: rgba(205, 205, 208, 1);
}


/* ── FaqSection (535:8053) ── */

.FaqSection {
    background-color: rgba(255, 253, 253, 1);
    width: 100%;
}

.FaqSection--inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 90px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.faq-heading {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    color: rgba(0, 1, 7, 1);
    margin: 0;
}

.faq-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Left nav */
.faq-nav {
    flex: 0 0 324px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 14px;
    color: rgba(79, 81, 89, 1);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.faq-nav-btn i {
    flex-shrink: 0;
    font-size: 13px;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.faq-nav-btn:hover {
    background-color: rgba(235, 242, 254, 0.5);
    color: rgba(0, 1, 7, 1);
}

.faq-nav-btn--active {
    background-color: rgba(59, 130, 246, 1) !important;
    color: #ffffff !important;
    font-weight: 600;
}

.faq-nav-btn--active i {
    opacity: 0.7;
    color: #ffffff;
}

/* Right panels */
.faq-panels {
    flex: 1;
    min-width: 0;
}

.faq-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.faq-panel--active {
    display: flex;
}

.faq-panel h3 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 19px;
    color: rgba(0, 1, 7, 1);
    margin: 0;
}

.faq-panel p {
    font-family: var(--secondary-font);
    font-size: 14.5px;
    color: rgba(79, 81, 89, 1);
    line-height: 1.6;
    margin: 0;
    max-width: 684px;
}

.faq-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 14px;
    color: rgba(59, 130, 246, 1);
    text-decoration: none;
}

.faq-learn-more:hover {
    text-decoration: underline;
}

.faq-footer {
    font-family: var(--secondary-font);
    font-size: 14px;
    color: rgba(79, 81, 89, 1);
    margin: 0;
}

.faq-footer a {
    color: inherit;
    text-decoration: none;
}

.faq-footer a:hover {
    color: rgba(59, 130, 246, 1);
}


/* ── CtaSection (535:8109) ── */

.about-CtaSection {
    background-color: rgba(232, 236, 243, 1);
    width: 100%;
    padding: 60px 90px 80px;
    display: flex;
    justify-content: center;
}

.about-CtaSection--inner {
    max-width: 1200px;
    width: 100%;
}

.about-cta-card {
    background-color: var(--secondary-blackmode);
    border-radius: 20px;
    padding: 48px 60px;
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.about-cta-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    flex-shrink: 0;
}

.about-cta-text {
    flex: 1;
    min-width: 200px;
}

.about-cta-text h2 {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.375rem);
    color: #ffffff;
    margin: 0 0 8px;
}

.about-cta-text p {
    font-family: var(--secondary-font);
    font-size: 14.5px;
    color: rgba(154, 156, 160, 1);
    margin: 0;
    line-height: 1.5;
    max-width: 399px;
}

.about-cta-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.about-cta-btn--primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 14px 24px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 14.5px;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.about-cta-btn--primary:hover {
    opacity: 0.88;
}

.about-cta-btn--ghost {
    font-family: var(--secondary-font);
    font-size: 14.5px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.8;
}

.about-cta-btn--ghost:hover {
    opacity: 1;
}


/* ── About Us Responsive ── */

@media (max-width: 1024px) {
    .about-hero--inner,
    .StatsBar--inner,
    .PillarsSection--inner,
    .MissionStrip--inner,
    .FaqSection--inner,
    .about-CtaSection {
        padding-left: 48px;
        padding-right: 48px;
    }
    .MissionStrip--inner {
        flex-direction: column;
        gap: 48px;
    }
    .mission-timeline-col {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .about-hero--inner {
        flex-direction: column;
        padding: 60px 32px;
    }
    .about-hero--right {
        flex: none;
        width: 100%;
    }
    .StatsBar--inner {
        padding: 0 32px;
        flex-wrap: wrap;
        gap: 0;
    }
    .stat-item {
        flex: 1 1 33%;
        padding: 20px 0;
    }
    .PillarsSection--inner,
    .FaqSection--inner,
    .about-CtaSection {
        padding-left: 32px;
        padding-right: 32px;
    }
    .MissionStrip--inner {
        padding: 60px 32px;
    }
    .faq-layout {
        flex-direction: column;
    }
    .faq-nav {
        flex: none;
        width: 100%;
    }
    .about-cta-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 28px;
        gap: 28px;
    }
    .about-cta-icon {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 480px) {
    .about-hero--inner,
    .StatsBar--inner,
    .PillarsSection--inner,
    .MissionStrip--inner,
    .FaqSection--inner,
    .about-CtaSection {
        padding-left: 20px;
        padding-right: 20px;
    }
    .stat-item {
        flex: 1 1 50%;
    }
    .about-hero--cta {
        flex-direction: column;
        align-items: stretch;
    }
    .submit-template-btn,
    .about-hero--btn-docs {
        justify-content: center;
        text-align: center;
    }
    .about-cta-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .about-cta-btn--primary {
        justify-content: center;
    }
}


/* ==============================================
   INTEGRATIONS
   ============================================== */

/* ── hero-integration (547:12092) ── */

.integ-hero-section {
    background-color: var(--bg-color);
    width: 100%;
}

.integ-hero--inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 90px 72px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.integ-hero--eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.integ-hero--eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 1);
    flex-shrink: 0;
}

.integ-hero--eyebrow-text {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.06em;
}

.integ-hero--h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    line-height: 1.08;
    color: rgba(0, 1, 7, 1);
    margin: 0;
}

.integ-hero--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    color: rgba(53, 57, 65, 1);
    line-height: 1.55;
    margin: 0;
    max-width: 580px;
}

/* ── Card-Grid-Content (559:12701) ── */

.integ-grid-section {
    background-color: var(--bg-color);
    width: 100%;
}

.integ-grid--inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 90px 80px;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* ── integ-group ── */

.integ-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.integ-group--header {
    display: flex;
    align-items: center;
}

.integ-group--label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 14px 20px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.9375rem;
    color: rgba(53, 57, 65, 1);
    cursor: default;
}

.integ-group--label i {
    font-size: 1.1rem;
    color: rgba(53, 57, 65, 1);
}

.integ-group--label-arrow {
    font-size: 0.875rem;
    margin-left: 4px;
}

/* ── Card-Grid-Payments (556:12687) ── */

.integ-cards-grid--payments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Payment integration cards ── */

.integ-card--payment {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.integ-card--logo-area {
    height: 48px;
    display: flex;
    align-items: center;
}

.integ-card--logo {
    max-height: 40px;
    max-width: 128px;
    width: auto;
    object-fit: contain;
}

.integ-card--logo--compact {
    max-height: 28px;
    max-width: 80px;
}

.integ-card--divider {
    height: 1px;
    background-color: rgba(243, 244, 246, 1);
    width: 100%;
}

.integ-card--body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.integ-card--body-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.integ-card--name {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 14px;
    color: rgba(17, 24, 39, 1);
}

.integ-card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13px;
    color: rgba(107, 114, 128, 1);
    margin: 0;
    line-height: 1.5;
}

/* Badges */

.integ-card--badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 12px;
}

.integ-card--badge--blue {
    background-color: rgba(235, 242, 254, 1);
    color: rgba(59, 130, 246, 1);
}

.integ-card--badge--purple {
    background-color: rgba(239, 236, 254, 1);
    color: rgba(124, 58, 237, 1);
}

/* ── Developer Tools cards (LightIntegrationCard 555:12561) ── */

.integ-cards-row--devtools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.integ-card--dev {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.integ-card--dev-top {
    height: 52px;
    display: flex;
    align-items: center;
}

.integ-card--dev-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.integ-card--dev-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.integ-card--dev-logo-name {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 16px;
    color: rgba(23, 19, 33, 1);
}

/* ── Card-Suggest (555:12621) ── */

.integ-card--suggest {
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.integ-card--suggest:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.integ-card--suggest-icon {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(53, 57, 65, 1);
    font-size: 1.125rem;
}

.integ-card--suggest-text {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 13.5px;
    color: rgba(53, 57, 65, 1);
}

/* ── Container--integration-ready (556:12640) ── */

.integ-cta-bar {
    background-color: var(--bg-color);
    width: 100%;
    padding: 0 90px 80px;
    display: flex;
    justify-content: center;
}

.integ-cta-bar--inner {
    max-width: 1280px;
    width: 100%;
    background-color: var(--secondary-blackmode);
    border-radius: 20px;
    padding: 40px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.integ-cta-bar--text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.integ-cta-bar--title {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: 1.25rem;
    color: rgba(238, 238, 238, 1);
    margin: 0;
}

.integ-cta-bar--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13.5px;
    color: rgba(230, 230, 231, 1);
    margin: 0;
}

.integ-cta-bar--actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.integ-cta-btn--suggest {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: rgba(0, 1, 7, 1);
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 13.5px;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.integ-cta-btn--suggest:hover {
    opacity: 0.9;
}

.integ-cta-btn--discord {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(3, 7, 18, 1);
    color: rgba(238, 238, 238, 1);
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 13.5px;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.integ-cta-btn--discord:hover {
    opacity: 0.85;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .integ-hero--inner,
    .integ-grid--inner {
        padding-left: 48px;
        padding-right: 48px;
    }
    .integ-cta-bar {
        padding-left: 48px;
        padding-right: 48px;
    }
    .integ-cards-grid--payments {
        grid-template-columns: repeat(2, 1fr);
    }
    .integ-cards-row--devtools {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .integ-hero--inner {
        padding: 64px 32px 48px;
    }
    .integ-grid--inner {
        padding-left: 32px;
        padding-right: 32px;
    }
    .integ-cta-bar {
        padding-left: 32px;
        padding-right: 32px;
    }
    .integ-cards-grid--payments {
        grid-template-columns: 1fr;
    }
    .integ-cards-row--devtools {
        grid-template-columns: 1fr;
    }
    .integ-cta-bar--inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 32px 36px;
    }
}

@media (max-width: 480px) {
    .integ-hero--inner,
    .integ-grid--inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .integ-cta-bar {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 56px;
    }
    .integ-hero--inner {
        padding-top: 48px;
    }
    .integ-cta-bar--actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .integ-cta-btn--suggest,
    .integ-cta-btn--discord {
        justify-content: center;
    }
}


/* ==============================================
   Customer Story — Story 1 — Koffi
   ============================================== */

/* ── Hero (599:5782) ── */

.cs-hero {
    background-color: #ffffff;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cs-hero--inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 90px 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Star-Builder eyebrow */
.Star-Builder {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cs-hero--star-icon {
    font-size: 14px;
    color: rgba(59, 130, 246, 1);
}

.cs-hero--eyebrow-text {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.06em;
}

.cs-hero--h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.08;
    color: rgba(3, 7, 18, 1);
    margin: 0;
    max-width: 900px;
}

.cs-hero--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    color: rgba(79, 81, 89, 1);
    line-height: 1.55;
    margin: 0;
    max-width: 780px;
}

/* Contact-Wrap / Contact */
.Contact-Wrap {
    margin-top: 8px;
}

.Contact {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cs-contact--photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 1);
    flex-shrink: 0;
}

.cs-contact--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-contact--identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-contact--name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 16px;
    color: rgba(28, 32, 42, 1);
}

.cs-contact--position {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14px;
    color: rgba(79, 81, 89, 1);
}

/* ── Guide / Tutorial / Step-by-step layout (sidebar + article + reading progress) ── */

.article-with-sidebar-section {
    width: 100%;
    padding: 0 90px;
    background-color: #ffffff;
}

.article-with-sidebar {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 32px;
    gap: 48px;
}

.article-with-sidebar--main {
    min-width: 0;
}

/* The outer section/grid already provides the horizontal gutter and the
   column width, so the body's own gutter + max-width would just fight it. */
.article-with-sidebar--main .cs-body--inner {
    padding-left: 0;
    padding-right: 0;
}

/* On this page — left sidebar */
.article-toc {
    align-self: start;
    position: sticky;
    top: 32px;
    padding-top: 56px;
}

.article-toc--label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-500);
    margin: 0 0 12px 14px;
}

.article-toc--list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}

.article-toc--link {
    display: block;
    padding: 6px 12px;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    font-family: var(--secondary-font);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-600);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.article-toc--link:hover {
    color: var(--text-900);
    background-color: var(--text-50);
}

.article-toc--link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
}

.article-toc--link.is-active {
    color: var(--blue-Linear-1000);
    font-weight: 600;
    border-left-color: var(--blue-Linear-1000);
    background-color: rgba(59, 130, 246, 0.06);
}

/* Reading progress — right rail */
.article-progress {
    align-self: start;
    position: sticky;
    top: 32px;
    height: calc(100vh - 64px);
    display: flex;
    justify-content: center;
}

.article-progress--track {
    position: relative;
    width: 2px;
    height: 100%;
    background-color: var(--text-100);
    border-radius: var(--radius-full);
}

.article-progress--thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 64px;
    background-color: var(--blue-Linear-1000);
    border-radius: var(--radius-full);
    will-change: transform;
}

@media (max-width: 1024px) {
    .article-with-sidebar {
        display: block;
        max-width: 100%;
    }
    .article-toc,
    .article-progress {
        display: none;
    }
}

/* ── Body (604:5572) ── */

.cs-body {
    background-color: #ffffff;
    width: 100%;
}

.cs-body--inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 90px 72px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cs-body--infos,
.Body-Text {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* Infos row */
.cs-body--infos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cs-body--tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cs-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background-color: rgba(244, 247, 251, 1);
    border-radius: 7px;
    font-family: var(--mono-font, 'JetBrains Mono'), monospace;
    font-weight: 400;
    font-size: 11.5px;
    color: rgba(53, 57, 65, 1);
}

.cs-body--read-time {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cs-read-time--icon {
    font-size: 16px;
    color: rgba(53, 57, 65, 1);
}

.cs-read-time--label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 11.5px;
    color: rgba(53, 57, 65, 1);
}

/* Body-Text */
.Body-Text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-paragraph {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(53, 57, 65, 1);
    margin: 0;
}

.cs-paragraph--lead {
    font-weight: 600;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(28, 32, 42, 1);
}

.cs-inline-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    color: rgba(53, 57, 65, 1);
    background-color: rgba(248, 249, 250, 1);
    border-radius: 5px;
    padding: 2px 6px;
}

.cs-blockquote {
    background-color: rgba(248, 249, 250, 1);
    border-left: 3px solid rgba(59, 130, 246, 1);
    border-radius: 0 10px 10px 0;
    padding: 24px 32px;
    margin: 8px 0;
}

.cs-blockquote p {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 21.5px;
    line-height: 1.5;
    color: rgba(59, 130, 246, 1);
    margin: 0;
}

.cs-fun-fact {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: rgba(248, 249, 250, 1);
    border-radius: 14px;
    padding: 20px 24px;
    margin-top: 8px;
}

.cs-fun-fact--emoji {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.cs-fun-fact--text {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(79, 81, 89, 1);
    margin: 0;
}

/* ── Body-Text extras: headings, lists, code blocks, figures, mockups ── */

.cs-body-heading {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: rgba(28, 32, 42, 1);
    margin-top: 12px;
}

.cs-body-heading--h3 {
    font-size: 19px;
}

.cs-body-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 22px;
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(53, 57, 65, 1);
}

.cs-body-list li {
    padding-left: 4px;
}

.cs-body-list--ordered {
    counter-reset: cs-list;
}

.cs-code-block {
    background-color: rgba(248, 249, 250, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-code-block--caption {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(133, 138, 146, 1);
}

.cs-code-block--pre {
    margin: 0;
    overflow-x: auto;
}

.cs-code-block--pre code {
    font-family: 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(53, 57, 65, 1);
    white-space: pre;
}

.cs-body-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}

.cs-body-figure--caption {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(133, 138, 146, 1);
    text-align: center;
    max-width: 460px;
}

/* Dashboard mockups (status / network / compare) */
.cs-mockup-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(28, 40, 72, 0.06);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 380px;
}

.cs-mockup-card--status {
    max-width: 300px;
}

.cs-mockup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.cs-mockup-app {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 14px;
    color: rgba(28, 32, 42, 1);
}

.cs-mockup-app i {
    font-size: 16px;
    color: var(--blue-Linear-1000);
}

.cs-mockup-status-arrow {
    font-size: 14px;
    color: rgba(133, 138, 146, 1);
}

.cs-mockup-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--mono-font, 'JetBrains Mono'), monospace;
    font-size: 11.5px;
    font-weight: 500;
}

.cs-mockup-status--dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.cs-mockup-status--building {
    background-color: rgba(212, 175, 55, 0.12);
    color: #9A7B14;
}

.cs-mockup-status--building .cs-mockup-status--dot {
    background-color: #D4AF37;
    animation: cs-mockup-pulse 1.1s ease-in-out infinite;
}

.cs-mockup-status--running {
    background-color: rgba(16, 185, 129, 0.12);
    color: #0E8F63;
}

.cs-mockup-status--running .cs-mockup-status--dot {
    background-color: var(--green-Linear-1000);
}

.cs-mockup-status--ssl {
    background-color: rgba(16, 185, 129, 0.12);
    color: #0E8F63;
    font-family: var(--secondary-font);
}

.cs-mockup-status--ssl i {
    font-size: 12px;
}

@keyframes cs-mockup-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.cs-mockup-card--network {
    max-width: 420px;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.cs-mockup-network--url {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    color: rgba(28, 32, 42, 1);
}

.cs-mockup-network--url i {
    font-size: 15px;
    color: var(--blue-Linear-1000);
}

.cs-mockup-compare {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    max-width: 560px;
    flex-wrap: wrap;
    justify-content: center;
}

.cs-mockup-card--sm {
    flex: 1;
    min-width: 220px;
    align-items: stretch;
    gap: 12px;
}

.cs-mockup-tag {
    align-self: flex-start;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(133, 138, 146, 1);
}

.cs-mockup-card--check {
    max-width: 340px;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.cs-mockup-status--detected {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--blue-Linear-1000);
}

/* Repo connect picker */
.cs-mockup-card--connect {
    max-width: 380px;
    align-items: stretch;
    gap: 12px;
}

.cs-mockup-connect--tabs {
    display: flex;
    align-self: flex-start;
    gap: 4px;
    padding: 3px;
    background-color: var(--text-50);
    border-radius: 8px;
}

.cs-mockup-connect--tab {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11.5px;
    color: var(--text-500);
}

.cs-mockup-connect--tab.is-active {
    background-color: #ffffff;
    color: rgba(28, 32, 42, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.cs-mockup-connect--repo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--text-50);
    border-radius: 10px;
    width: 100%;
}

.cs-mockup-connect--repo i {
    font-size: 16px;
    color: var(--text-700);
}

.cs-mockup-connect--repo-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: rgba(28, 32, 42, 1);
    flex: 1;
}

.cs-mockup-connect--advanced {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--secondary-font);
    font-size: 12px;
    color: var(--text-500);
}

.cs-mockup-connect--advanced i {
    font-size: 11px;
}

/* Environment variables */
.cs-mockup-card--env {
    max-width: 360px;
    align-items: stretch;
    gap: 10px;
}

.cs-mockup-env--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background-color: var(--text-50);
    border-radius: 8px;
}

.cs-mockup-env--key {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: rgba(28, 32, 42, 1);
}

.cs-mockup-env--value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-500);
    letter-spacing: 1px;
}

.cs-mockup-env--value i {
    font-size: 13px;
    color: var(--text-400);
}

.cs-mockup-env--add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: 1px dashed var(--text-200);
    border-radius: 8px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-500);
}

.cs-mockup-env--add i {
    font-size: 12px;
}

/* Wallet balance / usage */
.cs-mockup-card--balance {
    max-width: 380px;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.cs-mockup-balance--col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
}

.cs-mockup-balance--col:first-child {
    border-right: 1px solid var(--text-100);
}

.cs-mockup-balance--label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-500);
}

.cs-mockup-balance--value {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 18px;
    color: rgba(28, 32, 42, 1);
}

.cs-mockup-balance--value-sm {
    font-size: 15px;
    color: var(--text-700);
}

.cs-mockup-balance--add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11.5px;
    color: var(--blue-Linear-1000);
    align-self: flex-start;
}

.cs-mockup-balance--add i {
    font-size: 11px;
}

/* Payment method picker */
.cs-mockup-card--paymethods {
    max-width: 380px;
    align-items: stretch;
    gap: 8px;
}

.cs-mockup-paymethods--label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-500);
}

.cs-mockup-paymethods--grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cs-mockup-paymethods--chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--text-50);
    border-radius: 999px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: rgba(28, 32, 42, 1);
}

.cs-mockup-paymethods--chip i {
    font-size: 12px;
    color: var(--text-500);
}

/* Wallet top-up amount */
.cs-mockup-card--topup {
    max-width: 320px;
    align-items: flex-start;
    gap: 14px;
}

.cs-mockup-topup--amount {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Custom domain input / connected row */
.cs-mockup-card--domaininput {
    max-width: 380px;
    align-items: stretch;
    gap: 12px;
}

.cs-mockup-card--domainconnected {
    max-width: 400px;
}

.cs-mockup-domain--row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--text-50);
    border-radius: 10px;
}

.cs-mockup-domain--row i {
    font-size: 15px;
    color: var(--text-500);
    flex-shrink: 0;
}

.cs-mockup-domain--name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: rgba(28, 32, 42, 1);
    flex: 1;
}

.cs-mockup-domain--row .cs-mockup-domain--edit {
    font-size: 13px;
    color: var(--text-400);
}

.cs-mockup-domain--input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px dashed var(--text-200);
    border-radius: 10px;
}

.cs-mockup-domain--placeholder {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--text-400);
}

.cs-mockup-domain--add-btn {
    padding: 5px 10px;
    background-color: var(--blue-Linear-1000);
    color: #ffffff;
    border-radius: 6px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11.5px;
}

.cs-mockup-domain--row-connected {
    gap: 10px;
}

.cs-mockup-domain--row .cs-mockup-domain--action {
    font-size: 14px;
    color: var(--text-400);
}

/* Unapplied resource changes bar */
.cs-mockup-card--unapplied {
    max-width: 360px;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.cs-mockup-unapplied--actions {
    display: flex;
    gap: 8px;
}

.cs-mockup-unapplied--discard {
    padding: 5px 10px;
    border: 1px solid var(--text-200);
    border-radius: 6px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11.5px;
    color: var(--text-600);
}

.cs-mockup-unapplied--deploy {
    padding: 5px 10px;
    background-color: var(--blue-Linear-1000);
    color: #ffffff;
    border-radius: 6px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11.5px;
}

/* Flow / pipeline stepper */
.cs-mockup-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(28, 40, 72, 0.06);
    border-radius: 14px;
    padding: 20px 24px;
    width: 100%;
    max-width: 560px;
}

.cs-mockup-flow--step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 64px;
}

.cs-mockup-flow--icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
}

.cs-mockup-flow--icon i {
    font-size: 18px;
    color: var(--blue-Linear-1000);
}

.cs-mockup-flow--label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11.5px;
    color: rgba(53, 57, 65, 1);
    text-align: center;
    white-space: nowrap;
}

.cs-mockup-flow--connector {
    font-size: 14px;
    color: rgba(133, 138, 146, 1);
    flex-shrink: 0;
    margin-bottom: 22px;
}

/* Before / after comparison */
.cs-mockup-baf {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    max-width: 560px;
    flex-wrap: wrap;
}

.cs-mockup-baf--col {
    flex: 1;
    min-width: 220px;
    background-color: #ffffff;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(28, 40, 72, 0.06);
}

.cs-mockup-baf--col-bad {
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.cs-mockup-baf--col-good {
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.cs-mockup-baf--title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 13px;
}

.cs-mockup-baf--col-bad .cs-mockup-baf--title {
    color: #DC2626;
}

.cs-mockup-baf--col-good .cs-mockup-baf--title {
    color: #0E8F63;
}

.cs-mockup-baf--steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--secondary-font);
    font-size: 13px;
    color: rgba(53, 57, 65, 1);
    padding-left: 4px;
    border-left: 2px solid rgba(0, 0, 0, 0.08);
}

.cs-mockup-baf--steps span {
    padding-left: 12px;
}

.cs-mockup-baf--end {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.cs-mockup-baf--end-bad { color: #DC2626; }
.cs-mockup-baf--end-good { color: #0E8F63; }

@media (max-width: 640px) {
    .cs-mockup-card--network {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cs-mockup-flow {
        justify-content: flex-start;
    }
}

/* ── Testimonial-Section (605:5657) ── */

.cs-testimonial-section {
    background-color: #ffffff;
    width: 100%;
    padding: 0 90px 80px;
    display: flex;
    justify-content: center;
}

.cs-testimonial-section--inner {
    max-width: 1200px;
    width: 100%;
}

.cs-testimonial-card {
    background-color: rgba(28, 32, 42, 1);
    border-radius: 16px;
    padding: 56px 64px;
}

.cs-testimonial--layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.cs-quote-mark {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    color: rgba(59, 130, 246, 1);
    flex-shrink: 0;
    user-select: none;
}

.cs-quote-mark--open {
    margin-top: -8px;
}

.cs-quote-mark--close {
    align-self: flex-start;
    margin-top: -8px;
}

.cs-testimonial--body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
}

.cs-testimonial--quote {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 1.575rem;
    line-height: 1.55;
    color: #ffffff;
    margin: 0;
}

.cs-testimonial--attribution {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cs-testimonial--photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 1);
    flex-shrink: 0;
}

.cs-testimonial--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-testimonial--author {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13.5px;
    color: rgba(205, 205, 208, 1);
}

/* ── Section-Stacks-Stats (608:5723) ── */

.cs-stacks-stats-section {
    background-color: var(--bg-color);
    width: 100%;
}

/* Section-Stack */
.cs-section-stack {
    width: 100%;
    padding: 72px 90px 48px;
}

.cs-section-stack--inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.Deployment-card {
    background-color: rgba(255, 253, 253, 1);
    border-radius: 20px;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 640px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
}

.cs-deploy-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 18px;
    color: rgba(28, 32, 42, 1);
    margin: 0 0 24px;
}

.cs-deploy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    gap: 16px;
}

.cs-deploy-row:last-of-type {
    border-bottom: none;
}

.cs-deploy-row--label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13.5px;
    color: rgba(79, 81, 89, 1);
    flex-shrink: 0;
}

.cs-deploy-row--value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: rgba(28, 32, 42, 1);
    text-align: right;
}

.cs-deploy-card--cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(3, 7, 18, 1);
    color: rgba(238, 238, 238, 1);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 24px;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 24px;
    align-self: flex-start;
    transition: opacity 0.15s ease;
}

.cs-deploy-card--cta:hover {
    opacity: 0.88;
}

/* Stats row */
.cs-stats {
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    width: 100%;
    min-height: 40vh;
    padding: 60px 90px;
    display: flex;
    align-items: center;
}

.cs-stats--inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 72px;
}

.cs-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.cs-stat-item--value {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.75rem;
    color: rgba(59, 130, 246, 1);
    line-height: 1;
}

.cs-stat-item--label {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 16px;
    color: rgba(3, 7, 18, 1);
}

.cs-stat-item--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 12px;
    color: rgba(104, 106, 113, 1);
    line-height: 1.5;
}

/* ── More Stories + CTA (608:5765) ── */

.cs-more-cta-section {
    background-color: var(--bg-color);
    width: 100%;
    padding: 72px 90px 80px;
}

.cs-more-cta--inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* More-stories */
.More-stories {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-more-stories--heading {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    color: rgba(0, 0, 0, 1);
    margin: 0;
}

/* Stories-Cards grid */
.Stories-Cards {
    display: grid;
    grid-template-columns: repeat(2, 360px);
    gap: 24px;
}

/* Builder-Story-Card */
.Builder-Story-Card {
    background-color: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    min-height: 220px;
}

.Builder-Story-Card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.cs-story-card--content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-story-card--category {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.04em;
}

.cs-story-card--titles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-story-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 16px;
    color: rgba(3, 7, 18, 1);
    margin: 0;
    line-height: 1.4;
}

.cs-story-card--author {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 12px;
    color: rgba(79, 81, 89, 1);
}

.cs-story-card--tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cs-story-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background-color: rgba(235, 242, 254, 1);
    border-radius: 6px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 12px;
    color: rgba(79, 81, 89, 1);
}

.cs-story-card--cta {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(59, 130, 246, 1);
    display: block;
}

/* CtaBlock */
.cs-cta-block {
    background-color: rgba(28, 32, 42, 1);
    border-radius: 24px;
    padding: 48px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cs-cta-block--text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.cs-cta-block--heading {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: rgba(238, 238, 238, 1);
    margin: 0;
    line-height: 1.2;
}

.cs-cta-block--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    color: rgba(230, 230, 231, 1);
    margin: 0;
}

.cs-cta-block--actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cs-cta-btn--start {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(3, 7, 18, 1);
    color: rgba(238, 238, 238, 1);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 22px;
    border-radius: 9px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.cs-cta-btn--start:hover { opacity: 0.85; }

.cs-cta-btn--submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: rgba(3, 7, 18, 1);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 22px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.cs-cta-btn--submit:hover { opacity: 0.9; }

/* ── Builder-Story-Card__koffi-yao (622:5537) ── */

.cs-story-preview-section {
    background-color: var(--bg-color);
    width: 100%;
    padding: 48px 90px 72px;
    display: flex;
    justify-content: center;
}

.cs-story-preview--inner {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.Builder-Story-Card--koffi {
    max-width: 360px;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .cs-hero--inner,
    .cs-section-stack,
    .cs-stats,
    .cs-more-cta-section,
    .cs-testimonial-section,
    .article-with-sidebar-section {
        padding-left: 48px;
        padding-right: 48px;
    }
}


@media (max-width: 768px) {
    .cs-hero--inner {
        padding: 56px 32px 48px;
    }
    .cs-body--inner,
    .cs-section-stack,
    .cs-more-cta-section,
    .cs-testimonial-section,
    .article-with-sidebar-section {
        padding-left: 32px;
        padding-right: 32px;
    }
    .cs-body--infos,
    .Body-Text {
        max-width: 100%;
    }
    .cs-testimonial-card {
        padding: 36px 32px;
    }
    .cs-testimonial--layout {
        flex-direction: column;
        gap: 16px;
    }
    .cs-quote-mark--close {
        align-self: flex-start;
    }
    .Stories-Cards {
        grid-template-columns: 1fr;
    }
    .cs-stats {
        min-height: unset;
        padding: 48px 32px;
        align-items: flex-start;
    }
    .cs-stats--inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
    .cs-cta-block {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 28px;
        gap: 24px;
    }
    .cs-body--infos {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .cs-hero--inner,
    .cs-body--inner,
    .cs-section-stack,
    .cs-stats,
    .cs-more-cta-section,
    .cs-testimonial-section,
    .article-with-sidebar-section {
        padding-left: 20px;
        padding-right: 20px;
    }
    .cs-hero--inner {
        padding-top: 40px;
    }
    .cs-stats {
        padding: 40px 20px;
    }
    .cs-stats--inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cs-cta-block--actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .cs-cta-btn--start,
    .cs-cta-btn--submit {
        justify-content: center;
    }
}

/* =============================================
   Customer Story — Story 2 — Fatou
   ============================================== */

/* Builder-Story-Card__fatou — standalone variant for use in other pages */
.Builder-Story-Card--fatou {
    max-width: 360px;
}

/* The "6→1" stat value is slightly wider — ensure it wraps gracefully */
@media (max-width: 480px) {
    .cs-stat-item--value {
        font-size: 2.25rem;
    }
}

/* =============================================
   Customer Story — Story 3 — Chinedu
   ============================================== */

/* Builder-Story-Card__chinedu — standalone variant for use in other pages */
.Builder-Story-Card--chinedu {
    max-width: 360px;
}

/* =============================================
   Customer Story — Story 4 — Mireille
   ============================================== */

/* Builder-Story-Card__mireille — standalone variant for use in other pages */
.Builder-Story-Card--mireille {
    max-width: 360px;
}

/* 3-column More Stories grid (used across Builder Stories pages).
   Deliberately no 2-column step: with exactly 3 cards, a 2-column grid
   always strands the third card alone on its own row. Stay 3-across on
   desktop and tablet, then drop straight to a single column. */
.Stories-Cards--three {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

@media (max-width: 900px) {
    .Stories-Cards--three {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   Customer Story — Story 5 — Brian
   ============================================== */

/* Builder-Story-Card__brian — standalone variant for use in other pages */
.Builder-Story-Card--brian {
    max-width: 360px;
}

/* =============================================
   Customer Story — Story 6 — Kwame
   ============================================== */

/* Builder-Story-Card__kwame — standalone variant for use in other pages */
.Builder-Story-Card--kwame {
    max-width: 360px;
}

/* =============================================
   Customer Story — Story 7 — Amadou
   ============================================== */

/* Builder-Story-Card__amadou — standalone variant for use in other pages */
.Builder-Story-Card--amadou {
    max-width: 360px;
}

/* =============================================
   Customer Story — Story 8 — Salma
   ============================================== */

/* Builder-Story-Card__salma — standalone variant for use in other pages */
.Builder-Story-Card--salma {
    max-width: 360px;
}

/* ==============================================
   Blog-Menu Page (node 686:6489)
   ============================================== */

/* ── Blog-Hero (686:6533) ── */

.blog-hero {
    background-color: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    width: 100%;
    display: flex;
    justify-content: center;
}

.blog-hero--inner {
    max-width: 1216px;
    width: 100%;
    margin: 0 auto;
    padding: 64px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

.blog-hero--intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 600px;
    flex: 1 1 420px;
}

.blog-hero--eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-hero--eyebrow i {
    font-size: 16px;
    color: rgba(59, 130, 246, 1);
}

.blog-hero--eyebrow span {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-hero--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.blog-hero--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(79, 81, 89, 1);
    margin: 0;
    max-width: 600px;
}

.blog-hero--author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 4px;
}

.blog-hero--author-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(177, 205, 251, 1);
    flex-shrink: 0;
}

.blog-hero--author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-hero--author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.blog-hero--author-name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 15px;
    color: rgba(28, 32, 42, 1);
}

.blog-hero--author-role {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13px;
    color: rgba(79, 81, 89, 1);
}

/* FeaturedCard */
.blog-featured-card {
    background-color: rgba(248, 249, 250, 1);
    border: 1px solid rgba(177, 205, 251, 1);
    border-radius: 20px;
    box-shadow: 0 6px 13px rgba(28, 40, 72, 0.06);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 460px;
    flex: 1 1 380px;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blog-featured-card:hover {
    box-shadow: 0 10px 24px rgba(28, 40, 72, 0.1);
    transform: translateY(-2px);
}

.blog-featured-card--image {
    height: 140px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.blog-featured-card--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-featured-card--badge {
    display: inline-flex;
    align-self: flex-start;
    background-color: rgba(235, 242, 254, 1);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: rgba(79, 81, 89, 1);
    text-transform: uppercase;
}

.blog-featured-card--quote {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(28, 32, 42, 1);
    margin: 0;
}

.blog-featured-card--stats {
    display: flex;
    align-items: stretch;
    border-top: 1px solid rgba(220, 225, 233, 1);
    padding-top: 16px;
}

.blog-featured-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.blog-featured-stat--value {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 22px;
    color: rgba(79, 143, 247, 1);
    line-height: 1.5;
}

.blog-featured-stat--label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 11px;
    color: rgba(104, 106, 113, 1);
}

.blog-featured-card--cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(3, 7, 18, 1);
    color: rgba(238, 238, 238, 1);
    border-radius: 10px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

/* ── Blog-Catalog (686:6596) ── */

.blog-catalog {
    background-color: var(--bg-color);
    width: 100%;
    display: flex;
    justify-content: center;
}

.blog-catalog--inner {
    max-width: 1216px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.blog-catalog--controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* FilterTabs */
.blog-filter-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: rgba(241, 242, 244, 1);
    border-radius: 10px;
}

.blog-filter-tab {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 13px;
    color: rgba(53, 57, 65, 1);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.blog-filter-tab.is-active {
    background-color: #ffffff;
    color: rgba(59, 130, 246, 1);
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}

.blog-filter-tab:not(.is-active):hover {
    color: rgba(28, 32, 42, 1);
}

/* Search bar */
.blog-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(248, 249, 250, 1);
    border: 1px solid rgba(177, 205, 251, 1);
    border-radius: 10px;
    padding: 8px 12px;
    width: 220px;
    transition: box-shadow 0.15s;
}

.blog-search-bar:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.blog-search-bar--icon {
    font-size: 16px;
    color: rgba(28, 32, 42, 1);
    flex-shrink: 0;
}

.blog-search-bar--input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--secondary-font);
    font-size: 13px;
    color: rgba(28, 32, 42, 1);
    min-width: 0;
}

.blog-search-bar--input::placeholder {
    color: rgba(104, 106, 113, 1);
}

/* BuilderCards row */
.blog-builder-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.blog-builder-card {
    background-color: #ffffff;
    border: 1px solid rgba(177, 205, 251, 1);
    border-radius: 16px;
    box-shadow: 0 6px 13px rgba(28, 40, 72, 0.06);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-height: 220px;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blog-builder-card:hover {
    box-shadow: 0 10px 24px rgba(28, 40, 72, 0.1);
    transform: translateY(-2px);
}

.blog-builder-card--top {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.blog-builder-card--category {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(79, 81, 89, 1);
}

.blog-builder-card--titles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blog-builder-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.blog-builder-card--author {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 12px;
    color: rgba(79, 81, 89, 1);
}

.blog-builder-card--tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.blog-tag {
    display: inline-flex;
    align-items: center;
    background-color: rgba(248, 249, 250, 1);
    border-radius: 6px;
    padding: 3px 6px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 11px;
    color: rgba(79, 81, 89, 1);
}

.blog-builder-card--cta {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(59, 130, 246, 1);
}

/* ArticleCards grid */
.blog-article-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.blog-article-card {
    background-color: #ffffff;
    border: 1px solid #ebeef3;
    border-radius: 16px;
    box-shadow: 0 6px 26px rgba(28, 40, 72, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blog-article-card:hover {
    box-shadow: 0 12px 30px rgba(28, 40, 72, 0.1);
    transform: translateY(-2px);
}

.blog-article-card--image {
    height: 160px;
    width: 100%;
}

.blog-article-card--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-article-card--body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.blog-article-card--meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-article-card--category {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 12px;
    color: rgba(59, 130, 246, 1);
}

.blog-article-card--info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-article-card--read-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 11.5px;
    color: rgba(79, 81, 89, 1);
}

.blog-article-card--read-time i {
    font-size: 12px;
}

.blog-article-card--date {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    color: rgba(104, 106, 113, 1);
}

.blog-article-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: rgba(0, 2, 7, 0.96);
    margin: 0;
}

.blog-article-card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(104, 106, 113, 1);
    margin: 0;
}

.blog-article-card--footer {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #ebeef3;
    padding-top: 8px;
}

.blog-article-card--avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-article-card--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-article-card--avatar-initial {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 9px;
    color: #ffffff;
}

.blog-article-card--author {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 12.5px;
    color: rgba(53, 57, 65, 1);
}

.blog-catalog--empty {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14px;
    color: rgba(104, 106, 113, 1);
    text-align: center;
    padding: 24px 0;
}

/* Load more */
.blog-load-more {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.blog-load-more--btn {
    background-color: rgba(238, 238, 238, 1);
    color: rgba(3, 7, 18, 1);
    border: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 12px 32px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 14px;
    transition: background-color 0.15s ease;
}

.blog-load-more--btn:hover {
    background-color: rgba(225, 225, 225, 1);
}

/* CTA section spacing (visual style reused from .cs-cta-block) */
.blog-cta-section {
    padding-top: 0;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .blog-hero--inner,
    .blog-catalog--inner {
        padding-left: 32px;
        padding-right: 32px;
    }
    .blog-builder-cards,
    .blog-article-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-hero--inner {
        padding: 48px 24px;
        gap: 32px;
    }
    .blog-catalog--inner {
        padding: 40px 24px;
    }
    .blog-featured-card {
        max-width: 100%;
    }
    .blog-catalog--controls {
        flex-direction: column;
        align-items: stretch;
    }
    .blog-filter-tabs {
        overflow-x: auto;
    }
    .blog-search-bar {
        width: 100%;
    }
    .blog-builder-cards,
    .blog-article-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .blog-hero--inner,
    .blog-catalog--inner {
        padding-left: 16px;
        padding-right: 16px;
    }
    .blog-hero--title {
        font-size: 2rem;
    }
}

/* ==============================================
   qeda.connect (node 697:7389)
   ============================================== */

.connect-page {
    background-color: var(--text-50);
    width: 100%;
}

/* ── Hero (697:7438) ── */

.connect-hero {
    width: 100%;
    display: flex;
    justify-content: center;
}

.connect-hero--inner {
    max-width: 1152px;
    width: 100%;
    margin: 0 auto;
    padding: 52px 32px 48px;
}

.connect-hero--badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: rgba(59, 130, 246, 1);
    margin-bottom: 16px;
}

.connect-hero--badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 1);
    flex-shrink: 0;
}

.connect-hero--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    line-height: 1.05;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.connect-hero--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.35;
    letter-spacing: 0.2px;
    color: rgba(79, 81, 89, 1);
    margin: 20px 0 0;
    max-width: 580px;
}

/* ── Community (697:7452) ── */

.connect-community {
    width: 100%;
    display: flex;
    justify-content: center;
}

.connect-community--inner {
    max-width: 1152px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px 64px;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
    align-items: start;
}

/* CommunityFeed */
.connect-feed--header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
}

.connect-feed--heading {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.3px;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.connect-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    background-color: #ef4444;
    border-radius: 999px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 11.5px;
    color: #ffffff;
}

.connect-live-badge--dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffffff;
}

.connect-feed--card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(28, 40, 72, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.connect-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(235, 242, 254, 1);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.connect-feed-item--last {
    border-bottom: none;
}

a.connect-feed-item:hover {
    background-color: rgba(248, 249, 250, 1);
}

.connect-feed-item--avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 1);
    flex-shrink: 0;
}

.connect-feed-item--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.connect-feed-item--body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.connect-feed-item--name-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.connect-feed-item--name {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 14px;
    color: rgba(3, 7, 18, 1);
}

.connect-feed-item--flag {
    font-size: 13px;
}

.connect-feed-item--badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 11px;
}

.connect-feed-item--badge-blue {
    background-color: rgba(216, 230, 253, 1);
    color: rgba(59, 130, 246, 1);
}

.connect-feed-item--badge-pink {
    background-color: rgba(251, 236, 250, 1);
    color: rgba(220, 107, 218, 1);
}

.connect-feed-item--message {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13.5px;
    color: rgba(79, 81, 89, 1);
    margin: 0;
}

.connect-feed-item--meta {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: rgba(154, 156, 160, 1);
}

.connect-feed-item--cta {
    flex-shrink: 0;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 13px;
    color: rgba(59, 130, 246, 1);
    padding-top: 2px;
}

.connect-feed-item--announcement {
    align-items: center;
    gap: 12px;
}

.connect-feed-item--emoji {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.connect-feed-item--announcement-text {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 15px;
    color: rgba(3, 7, 18, 1);
}

/* EntryPoint */
.connect-entry {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.connect-entry--heading {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.3px;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.connect-entry--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14px;
    color: rgba(104, 106, 113, 1);
    margin: 4px 0 0;
}

.connect-entry-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background-color: #ffffff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    width: fit-content;
}

.connect-entry-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 14px;
    color: rgba(104, 106, 113, 1);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.connect-entry-tab img {
    opacity: 0.7;
}

.connect-entry-tab.is-active {
    background-color: rgba(3, 7, 18, 1);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.connect-entry-tab.is-active img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* Discord promo card */
.connect-discord-card {
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 4px 10px rgba(28, 40, 72, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.connect-discord-card--icon {
    display: block;
}

.connect-discord-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.2px;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.connect-discord-card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(104, 106, 113, 1);
    margin: 8px 0 0;
}

.connect-discord-card--cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 100%;
    background-color: rgba(3, 7, 18, 1);
    color: #ffffff;
    border-radius: 12px;
    text-decoration: none;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 15px;
    transition: background-color 0.15s ease;
}

.connect-discord-card--cta:hover {
    background-color: rgba(28, 32, 42, 1);
}

/* ── Why-Join (697:7588) ── */

.connect-why {
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    padding: 64px 0;
    display: flex;
    justify-content: center;
}

.connect-why--inner {
    max-width: 1152px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
}

.connect-why--intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.connect-why--heading {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.8px;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.connect-why--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: rgba(104, 106, 113, 1);
    margin: 10px 0 0;
}

.connect-why--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 40px;
}

.connect-why-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(28, 40, 72, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Icon badge — same recipe as .Feature-card--icon-badge on /solution-for-agencies */
.connect-why-card--icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
}

.connect-why-card--icon-badge-blue  { background-color: rgba(235, 242, 254, 1); }
.connect-why-card--icon-badge-green { background-color: rgba(231, 248, 242, 1); }
.connect-why-card--icon-badge-gold  { background-color: rgba(253, 244, 224, 1); }

.connect-why-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.18px;
    color: rgba(3, 7, 18, 1);
    margin: 0;
}

.connect-why-card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(104, 106, 113, 1);
    margin: 0;
}

/* ── Final CTA (697:7634) ── */

.connect-final-cta-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 48px 32px;
}

.connect-final-cta {
    position: relative;
    max-width: 1152px;
    width: 100%;
    overflow: hidden;
    background-color: rgba(0, 2, 7, 0.96);
    border-radius: 24px;
    padding: 56px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.connect-final-cta--watermark {
    position: absolute;
    top: -20px;
    right: -40px;
    opacity: 0.06;
    pointer-events: none;
}

.connect-final-cta--heading {
    font-family: var(--primary-font);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 2.75rem);
    letter-spacing: -0.88px;
    color: #ffffff;
    margin: 0;
    position: relative;
}

.connect-final-cta--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    color: #9ca3af;
    max-width: 500px;
    margin: 14px 0 0;
    position: relative;
}

.connect-final-cta--button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: rgba(3, 7, 18, 1);
    border: 1px solid rgba(177, 205, 251, 1);
    border-radius: 10px;
    padding: 14px 24px;
    margin-top: 36px;
    text-decoration: none;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 13px;
    position: relative;
    transition: background-color 0.15s ease;
}

.connect-final-cta--button:hover {
    background-color: rgba(239, 246, 255, 1);
}

.connect-final-cta--proof {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 13.5px;
    color: rgba(79, 81, 89, 1);
    position: relative;
}

.connect-final-cta--proof img {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .connect-community--inner {
        grid-template-columns: 1fr;
    }
    .connect-why--grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .connect-hero--inner {
        padding: 40px 24px 32px;
    }
    .connect-community--inner {
        padding: 0 24px 48px;
    }
    .connect-why--inner {
        padding: 0 24px;
    }
    .connect-final-cta-section {
        padding: 32px 24px;
    }
    .connect-final-cta {
        padding: 40px 24px;
    }
    .connect-feed-item {
        flex-wrap: wrap;
    }
    .connect-entry-tabs {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .connect-hero--inner,
    .connect-community--inner,
    .connect-why--inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===================================================================
   solutions-enterprise (nodes 163:7491 · 172:2342 · 176:3414 · 176:3848)
   =================================================================== */

/* Shared: Status-Badge (blue dot + label, reused across all 4 sections) */
.Status-Badge--enterprise {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: 8px;
}

.Status-Badge--dot--enterprise {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--blue-Linear-1000);
    border: 1px solid rgba(226, 232, 240, 1);
    flex-shrink: 0;
}

.Status-Badge--label--enterprise {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--blue-Linear-1000);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Shared: primary/secondary CTA buttons (Figma "Button-cta--*--default"),
   sized/colored to match .Btn-agencies--black/--white already used elsewhere. */
.Button-cta--black--default {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(3, 7, 18, 1);
    border-radius: 10px;
    padding: 15px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.09375rem;
    color: rgba(238, 238, 238, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

.Button-cta--black--default:hover {
    background-color: rgba(28, 32, 42, 1);
}

.Button-cta--white--default {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(238, 238, 238, 1);
    border: 1.25px solid var(--button-stroke);
    border-radius: 10px;
    padding: 15px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.09375rem;
    color: rgba(3, 7, 18, 1);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Button-cta--white--default:hover {
    background-color: rgba(239, 246, 255, 1);
}

/* ── 01 · LE BUILDER (hero) ── */
.Section-Builder {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 89px 90px;
}

.Section-Builder--inner {
    max-width: 1202px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
}

.Builder-heading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    max-width: 620px;
}

.Builder-h1 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 1;
    text-align: center;
    color: rgba(0, 2, 7, 0.96);
    margin: 0;
}

.Builder-subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.35;
    text-align: center;
    color: var(--colorprimary-800);
    max-width: 670px;
    margin: 0;
}

.Stack-Detection-Band {
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 45px 0 rgba(230, 230, 231, 1), inset 0 0 0 1px rgba(230, 230, 231, 1);
    overflow: hidden;
}

.Stack-Detection-Band--topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
}

.Stack-Detection-Band--topbar code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--text-900);
    white-space: nowrap;
}

.Stack-Detection-Band--marquee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 24px;
    background-color: #fffefe;
}

.Stack-Badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background-color: #ffffff;
    border-radius: 8px;
    flex-shrink: 0;
}

.Stack-Badge i {
    font-size: 16px;
    color: var(--text-800);
}

.Stack-Badge span {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-900);
    white-space: nowrap;
}

.Stack-Detection-Band--statusbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}

.Stack-Detection-Band--detected-file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 14px;
    background-color: #ffffff;
    border: 1px solid var(--blue-Linear-400, #9dc1fb);
    border-radius: 12px;
    box-shadow: 0 0 0 3px #ebf2fe;
}

.Stack-Detection-Band--detected-file i {
    font-size: 14px;
    color: var(--blue-Linear-1000);
}

.Stack-Detection-Band--detected-file span {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-700);
}

.Stack-Detection-Band--detected-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 11px;
    background-color: rgba(231, 248, 242, 1);
    border-radius: var(--radius-full);
}

.Stack-Detection-Band--detected-pill i {
    font-size: 13px;
    color: var(--green-Linear-1000);
}

.Stack-Detection-Band--detected-pill span {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--green-Linear-1000);
}

.Stack-Detection-Band--timing {
    margin-left: auto;
    font-family: 'Menlo', monospace;
    font-size: 0.75rem;
    color: var(--text-800);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.Builder-cta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── 02 · INFRASTRUCTURE ── */
.Section-Infrastructure {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 92px 100px;
}

.Section-Infrastructure--inner {
    max-width: 1218px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.Infrastructure-content {
    display: flex;
    gap: 80px;
    align-items: center;
    width: 100%;
}

.Infrastructure-text-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
}

.Infrastructure-h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.17;
    color: rgba(0, 2, 7, 0.96);
    margin: 0;
}

.Infrastructure-subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--text-900);
    max-width: 500px;
    margin: 0;
    padding-top: 2px;
}

.Infrastructure-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    padding-top: 13px;
}

.Infrastructure-feature {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.Infrastructure-feature--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-color: var(--blue-Linear-200, #d8e6fd);
    border-radius: 10px;
}

.Infrastructure-feature--icon i {
    font-size: 20px;
    color: var(--blue-Linear-1000);
}

.Infrastructure-feature--body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.Infrastructure-feature--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(0, 2, 7, 0.96);
}

.Infrastructure-feature--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text-800);
}

.Infrastructure-cta-margin {
    padding-top: 20px;
}

.Infrastructure-control-plane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.Control-Plane-Label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-800);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.Control-Plane-Connector {
    width: 1px;
    height: 28px;
    background-color: var(--text-800);
}

.Control-Plane-Pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 16px;
    border: 1px solid var(--button-stroke);
    width: 200px;
}

.Control-Plane-Pill--kubernetes {
    background-color: var(--blue-Linear-900, #4f8ff7);
    border-color: var(--blue-Linear-200, #d8e6fd);
}

.Control-Plane-Pill--docker {
    background-color: var(--text-900);
}

.Control-Plane-Pill--terraform {
    background-color: rgba(3, 7, 18, 1);
    width: 300px;
    justify-content: space-between;
}

.Control-Plane-Pill--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.Control-Plane-Pill--icon i {
    font-size: 22px;
    color: #eeeeee;
}

.Control-Plane-Pill--name-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.Control-Plane-Pill--body {
    display: flex;
    flex-direction: column;
}

.Control-Plane-Pill--name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: #eeeeee;
}

.Control-Plane-Pill--role {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.625rem;
    color: #eeeeee;
    letter-spacing: 0.05em;
}

.Control-Plane-Pill--stable-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 8px;
    filter: drop-shadow(0 4px 10px rgba(36, 94, 218, 0.25));
}

.Control-Plane-Pill--stable-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: linear-gradient(148deg, rgba(55, 118, 4, 1) 18%, rgba(16, 185, 129, 1) 61%);
}

.Control-Plane-Pill--stable-badge span {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.625rem;
    color: var(--green-Linear-1000);
}

/* ── 03 · SÉCURITÉ ── */
.Section-Security {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 92px 64px;
}

.Section-Security--inner {
    max-width: 1024px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Security-heading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.Security-h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1.27;
    text-align: center;
    color: rgba(0, 2, 7, 0.96);
    margin: 0;
}

.Security-subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    text-align: center;
    color: var(--text-800);
    max-width: 624px;
    margin: 0;
}

.Security-content {
    display: flex;
    gap: 56px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 980px;
    padding-top: 50px;
}

.Security-features--left,
.Security-features--right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.Security-features--left {
    align-items: flex-end;
}

.Security-feature {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 230px;
}

.Security-features--left .Security-feature {
    align-items: flex-end;
    text-align: right;
}

.Security-feature--header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.Security-features--left .Security-feature--header {
    flex-direction: row-reverse;
}

.Security-feature--header i {
    font-size: 20px;
    color: var(--blue-Linear-1000);
}

.Security-feature--header span {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(0, 2, 7, 0.96);
    white-space: nowrap;
}

.Security-feature--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--text-800);
    margin: 0;
}

.Security-diagram {
    position: relative;
    flex-shrink: 0;
    width: 260px;
    height: 260px;
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Security-diagram::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px dashed #cdcdd0;
    border-radius: 26px;
}

.Security-diagram--dns-tab {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 7px;
    background-color: var(--text-100);
    border-radius: 4px;
    font-family: 'Menlo', monospace;
    font-size: 0.75rem;
    color: var(--text-500);
    letter-spacing: 0.06em;
}

.Security-diagram--ring-network {
    position: absolute;
    inset: 13%;
    background-color: var(--blue-Linear-50, #f8f9fa);
    border: 1px solid var(--button-stroke);
    border-radius: 20px;
}

.Security-diagram--ring-network span {
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Menlo', monospace;
    font-size: 0.625rem;
    color: var(--text-800);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.Security-diagram--ring-container {
    position: absolute;
    inset: 26%;
    background-color: var(--blue-Linear-100, #ebf2fe);
    border: 1px solid var(--blue-Linear-1000);
    border-radius: 14px;
}

.Security-diagram--ring-container span {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: var(--text-800);
    white-space: nowrap;
}

.Security-diagram--core {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 62px;
    height: 62px;
    background-color: var(--blue-Linear-1000);
    border-radius: 14px;
    box-shadow: 0 10px 15px rgba(59, 130, 246, 0.35);
}

.Security-diagram--core i {
    font-size: 20px;
    color: #eeeeee;
}

.Security-diagram--core span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: #eeeeee;
}

.Security-cta-margin {
    padding-top: 48px;
}

/* ── 04 · RÉSEAU & DNS ── */
.Section-Network-DNS {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 103px 112px;
}

.Section-Network-DNS--inner {
    max-width: 1215px;
    width: 100%;
    display: flex;
    gap: 80px;
    align-items: center;
}

.Network-visual {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
}

.Network-h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.17;
    color: rgba(0, 2, 7, 0.96);
    margin: 0;
}

.Network-subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.09;
    color: var(--text-800);
    max-width: 620px;
    margin: 0;
}

.Latency-Card {
    width: 100%;
    background-color: #ffffff;
    border-radius: 22px;
    box-shadow: 0 4px 45px 0 rgba(230, 230, 231, 1), inset 0 0 0 1px rgba(230, 230, 231, 1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Latency-Card--url-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 19px;
    background-color: var(--text-50);
    border: 1px solid #cdcdd0;
    border-radius: 999px;
}

.Latency-Card--url-row i {
    font-size: 15px;
    color: var(--text-700);
    flex-shrink: 0;
}

.Latency-Card--url-row code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: rgba(0, 2, 7, 0.96);
}

.Latency-Card--ping-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 0 12px;
    height: 27px;
    background-color: rgba(231, 248, 242, 1);
    border-radius: 999px;
    white-space: nowrap;
}

.Latency-Card--ping-pill i {
    font-size: 13px;
    color: var(--green-Linear-1000);
}

.Latency-Card--ping-pill span {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.84375rem;
    color: var(--green-Linear-1000);
}

.Latency-Card--rows {
    display: flex;
    flex-direction: column;
}

.Latency-Card--row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--button-stroke);
}

.Latency-Card--row:last-child {
    border-bottom: none;
}

.Latency-Card--row .dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--green-Linear-1000);
    flex-shrink: 0;
}

.Latency-Card--row.is-secondary .dot {
    background-color: var(--blue-Linear-600, #89b4fa);
}

.Latency-Card--row--city {
    flex: 1;
    font-family: var(--secondary-font);
    font-size: 0.98rem;
    color: var(--text-900);
}

.Latency-Card--row--ms {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9125rem;
    color: var(--green-Linear-1000);
}

.Latency-Card--row.is-secondary .Latency-Card--row--ms {
    color: var(--text-800);
}

.Network-checklist {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.Network-checklist--label {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: #818388;
    letter-spacing: 0.02em;
}

.Network-checklist--items {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.Network-checklist--item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}

.Network-checklist--check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    background-color: rgba(183, 234, 217, 1);
    border-radius: var(--radius-full);
}

.Network-checklist--check i {
    font-size: 16px;
    color: var(--green-Linear-1000);
}

.Network-checklist--body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.Network-checklist--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.125rem;
    color: rgba(0, 2, 7, 0.96);
}

.Network-checklist--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-800);
    margin: 0;
}

.Network-cta-margin {
    padding-top: 13px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .Section-Builder {
        padding: 64px 48px;
    }
    .Section-Infrastructure {
        padding: 64px 48px;
    }
    .Infrastructure-content {
        flex-direction: column;
        gap: 40px;
    }
    .Infrastructure-h2 {
        font-size: 2.5rem;
    }
    .Section-Security {
        padding: 64px 48px;
    }
    .Security-content {
        flex-direction: column;
        gap: 32px;
    }
    .Security-features--left,
    .Security-features--right {
        align-items: center;
        width: 100%;
    }
    .Security-features--left .Security-feature {
        align-items: center;
        text-align: center;
    }
    .Security-features--left .Security-feature--header {
        flex-direction: row;
    }
    .Section-Network-DNS {
        padding: 64px 48px;
    }
    .Section-Network-DNS--inner {
        flex-direction: column;
        gap: 40px;
    }
    .Network-h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .Builder-h1 {
        font-size: 2.5rem;
    }
    .Stack-Detection-Band--marquee {
        padding: 18px;
    }
    .Stack-Detection-Band--statusbar {
        flex-wrap: wrap;
    }
    .Stack-Detection-Band--timing {
        margin-left: 0;
    }
    .Infrastructure-feature--desc {
        max-width: 260px;
    }
    .Control-Plane-Pill,
    .Control-Plane-Pill--terraform {
        width: 100%;
        max-width: 300px;
    }
    .Security-h2,
    .Network-h2,
    .Infrastructure-h2 {
        font-size: 2.125rem;
    }
    .Security-subtitle {
        font-size: 1.0625rem;
    }
    .Latency-Card--url-row {
        flex-wrap: wrap;
        border-radius: 20px;
    }
    .Latency-Card--ping-pill {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .Section-Builder,
    .Section-Infrastructure,
    .Section-Security,
    .Section-Network-DNS {
        padding-left: 20px;
        padding-right: 20px;
    }
    .Builder-cta-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .Section-Infrastructure .Button-cta--white--default,
    .Section-Security .Button-cta--black--default,
    .Section-Network-DNS .Button-cta--black--default,
    .Builder-cta-row .Button-cta--black--default,
    .Builder-cta-row .Button-cta--white--default {
        justify-content: center;
        width: 100%;
    }
    .Stack-Badge {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ===================================================================
   join-our-beta (nodes 715:8248 · 718:6781 · 719:8543 · 719:8577)
   Note: node 718:6786 ("Card--container") is an earlier, bare-bones
   exploration of the exact same 4 cards reproduced — with a heading
   and refined icon badges — in 718:6781, so it isn't duplicated here.
   =================================================================== */

/* ── Hero + beta command palette (715:8248) ── */
.Section-JoinBeta-Hero {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 72px 80px;
}

.JoinBeta-Hero--inner {
    max-width: 1280px;
    width: 100%;
    display: flex;
    gap: 48px;
    align-items: center;
}

.JoinBeta-Hero--content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.JoinBeta-Hero--title-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.JoinBeta-Hero--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.14;
    color: #030712;
    margin: 0;
    max-width: 560px;
}

.JoinBeta-Hero--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--text-700);
    margin: 0;
    max-width: 560px;
}

.JoinBeta-Hero--spots {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-600);
    margin: 0;
}

.JoinBeta-Hero--trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

.JoinBeta-Hero--trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.JoinBeta-Hero--trust-item i {
    font-size: 16px;
    color: var(--text-700);
    flex-shrink: 0;
}

.JoinBeta-Hero--trust-item span {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-700);
    white-space: nowrap;
}

/* Beta-Palette — light command palette mock (Command-Pallet / CommandPalette) */
.Beta-Palette {
    flex: 1;
    min-width: 0;
    max-width: 500px;
    width: 100%;
    background-color: var(--white-bg);
    border: 1px solid var(--text-200);
    border-radius: 12px;
    box-shadow: 14px 16px 30px 2px rgba(0, 0, 0, 0.2);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
}

.Beta-Palette--search-row {
    padding: 0 12px 12px;
}

.Beta-Palette--search-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 36px;
    padding: 0 4px 0 10px;
    border: 1px solid var(--text-200);
    border-radius: 12px;
}

.Beta-Palette--search-input i {
    font-size: 1.125rem;
    color: var(--text-500);
    flex-shrink: 0;
}

.Beta-Palette--search-placeholder {
    flex: 1;
    min-width: 0;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--blue-Space-1000, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Beta-Palette--cursor {
    display: inline-block;
    width: 2px;
    height: 14px;
    margin-left: 2px;
    vertical-align: -3px;
    background-color: var(--blue-Space-1000, #334155);
    animation: blink 1s step-end infinite;
}

.Beta-Palette--kbd {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--text-200);
    border-radius: 8px;
    padding: 2px 8px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.625rem;
    color: var(--text-800);
    white-space: nowrap;
    flex-shrink: 0;
}

.Beta-Palette--body {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Beta-Palette--group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.Beta-Palette--group-label {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.625rem;
    color: var(--text-500);
    padding-left: 4px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.Beta-Palette--item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 12px;
    padding: 4px 4px 4px 4px;
    min-height: 20px;
}

.Beta-Palette--item-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.Beta-Palette--item-main i {
    font-size: 1.125rem;
    color: var(--text-600);
    flex-shrink: 0;
}

.Beta-Palette--item-main span {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-800);
    white-space: nowrap;
}

.Beta-Palette--item-time {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.625rem;
    color: var(--text-500);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── What is Qeda? (718:6781) ── */
.Section-WhatIsQeda {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background-color: var(--bg-color);
    padding: 64px 80px 80px;
}

.WhatIsQeda--heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    max-width: 680px;
}

.WhatIsQeda--heading h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #030712;
    margin: 0;
}

.WhatIsQeda--heading p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-700);
    margin: 0;
}

.WhatIsQeda--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 900px;
    width: 100%;
}

.WhatIsQeda-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-height: 300px;
}

.WhatIsQeda-card--icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: var(--text-50);
    border-radius: 10px;
    flex-shrink: 0;
}

.WhatIsQeda-card--icon-badge i {
    font-size: 1.375rem;
    color: var(--text-900);
}

.WhatIsQeda-card--body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.WhatIsQeda-card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(0, 2, 7, 0.96);
    margin: 0;
}

.WhatIsQeda-card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.925rem;
    line-height: 1.29;
    color: var(--text-700);
    margin: 0;
}

.WhatIsQeda-card--footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.WhatIsQeda-card--tags {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-500);
}

.WhatIsQeda-card--pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: var(--blue-Linear-100, #ebf2fe);
    border-radius: 999px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--blue-Linear-1000);
    white-space: nowrap;
}

/* ── How it works (719:8543) ── */
.Section-HowItWorks {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 64px 80px 96px;
}

.HowItWorks--inner {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.HowItWorks--heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.HowItWorks--heading h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1.27;
    color: rgba(0, 2, 7, 0.96);
    margin: 0;
}

.HowItWorks--heading p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--text-600);
    margin: 0;
}

.HowItWorks--steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.HowItWorks-step {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.HowItWorks-step--number {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.75rem;
    color: var(--blue-Linear-1000);
    flex-shrink: 0;
}

.HowItWorks-step--body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.HowItWorks-step--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: #030712;
    margin: 0;
}

.HowItWorks-step--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-700);
    margin: 0;
}

/* ── FAQ (719:8577) ── */
.Section-FAQ {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 64px 80px 96px;
}

.FAQ--inner {
    max-width: 1080px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* White card wrapping heading + tabs/answer (node 750:12444) */
.FAQ-Card {
    background-color: var(--white-bg);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.FAQ--heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 20px 0;
}

.FAQ--heading h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1.27;
    color: #030712;
    margin: 0;
}

.FAQ--heading p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--text-600);
    margin: 0;
}

.FAQ--layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

.FAQ-tabs {
    flex-shrink: 0;
    width: 320px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--text-100);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}

.FAQ-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 11px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-800);
    letter-spacing: 0.0168px;
}

.FAQ-tab.is-active {
    background-color: var(--blue-Linear-900, #4f8ff7);
    color: #ffffff;
}

.FAQ-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
}

.FAQ-answer {
    flex: 1;
    min-width: 0;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--text-100);
    border-radius: 18px;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.FAQ-answer--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.25rem;
    color: #030712;
    margin: 0;
}

.FAQ-answer--desc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--text-700);
}

.FAQ-answer--desc p {
    margin: 0;
}

.FAQ-answer--desc ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}

.FAQ-answer--desc strong {
    color: #030712;
}

.FAQ-cta-banner {
    background-color: #030712;
    border-radius: 20px;
    padding: 32px 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.FAQ-cta-banner--text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 484px;
}

.FAQ-cta-banner--label {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.71875rem;
    color: var(--text-100);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.FAQ-cta-banner--quote {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 1.125rem;
    color: #ffffff;
    margin: 0;
}

.FAQ-cta-banner--btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #ffffff;
    border: 1px solid #030712;
    border-radius: 8px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: #030712;
    letter-spacing: 0.84px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.FAQ-cta-banner--btn i {
    font-size: 16px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .Section-JoinBeta-Hero,
    .Section-WhatIsQeda,
    .Section-HowItWorks,
    .Section-FAQ {
        padding-left: 48px;
        padding-right: 48px;
    }
    .JoinBeta-Hero--inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }
    .JoinBeta-Hero--title,
    .JoinBeta-Hero--subtitle {
        max-width: 100%;
    }
    .Beta-Palette {
        max-width: 100%;
    }
    .FAQ--layout {
        flex-direction: column;
    }
    .FAQ-tabs {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .FAQ-tab {
        flex: 1 1 auto;
        min-width: 160px;
    }
}

@media (max-width: 768px) {
    .JoinBeta-Hero--title {
        font-size: 2.25rem;
    }
    .WhatIsQeda--grid {
        grid-template-columns: 1fr;
    }
    .HowItWorks--heading h2,
    .FAQ--heading h2 {
        font-size: 2.125rem;
    }
    .HowItWorks-step {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 20px 24px;
    }
    .FAQ-cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .Section-JoinBeta-Hero,
    .Section-WhatIsQeda,
    .Section-HowItWorks,
    .Section-FAQ {
        padding-left: 20px;
        padding-right: 20px;
    }
    .Button-cta--black--default {
        width: 100%;
        justify-content: center;
    }
    .FAQ-answer {
        padding: 20px;
    }
}

/* ===================================================================
   Pricing (nodes 729:9722 · 728:9708 · 742:12090 · 747:12291 · 744:12238 · 732:10625)
   =================================================================== */

/* Shared: RAM/vCPU/Instances/Currency pill tabs */
.Pricing-Tablist {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.Pricing-Tablist--instances {
    width: auto;
}

.Pricing-Tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 8px;
    background-color: var(--text-50);
    border: none;
    cursor: pointer;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--text-700);
    white-space: nowrap;
}

.Pricing-Tablist--instances .Pricing-Tab {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    padding: 7px 16px;
}

.Pricing-Tab.is-active {
    background-color: var(--text-900);
    color: #ffffff;
}

.Pricing-Tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
}

/* ── 01 · Pricing Calculator (hero · node 729:9722) ── */
.Section-PricingCalculator {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 96px 90px 72px;
}

.PricingCalculator--inner {
    max-width: 1024px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.PricingCalculator--title-subtitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.PricingCalculator--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1.27;
    text-align: center;
    color: #030712;
    max-width: 701px;
    margin: 0;
}

.PricingCalculator--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.12px;
    color: var(--text-600);
    max-width: 560px;
    margin: 0;
}

/* Country / currency selector */
.Flag-Currency {
    position: relative;
}

.Flag-Currency--trigger {
    display: flex;
    align-items: center;
    gap: 12.5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.Flag-Currency--flag {
    width: 40px;
    height: 30px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.Flag-Currency--code-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.Flag-Currency--code {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-800);
}

.Flag-Currency--trigger i {
    font-size: 18px;
    color: var(--text-800);
    transition: transform 0.2s ease;
}

.Flag-Currency.is-open .Flag-Currency--trigger i {
    transform: rotate(180deg);
}

.Flag-Currency--dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(3, 7, 18, 0.14), inset 0 0 0 1px var(--text-100);
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 230px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 20;
}

.Flag-Currency.is-open .Flag-Currency--dropdown {
    display: flex;
}

.Flag-Currency--option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.Flag-Currency--option:hover {
    background-color: var(--text-50);
}

.Flag-Currency--option.is-selected {
    background-color: #ebf2fe;
}

.Flag-Currency--option img {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    flex-shrink: 0;
    object-fit: cover;
}

.Flag-Currency--option-name {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-800);
    flex: 1;
}

.Flag-Currency--option-code {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-500);
}

/* Calculator card */
.Calculator-Card {
    width: 100%;
    background-color: var(--text-50);
    box-shadow: 8px 6px 15px var(--text-100);
    border-radius: 20px;
    padding: 32px;
}

.Calculator-Card--row {
    display: flex;
    gap: 60px;
    align-items: center;
    width: 100%;
}

.Calculator--panel-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    min-width: 0;
}

.Calculator-Group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.Calculator-Group--label {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--text-700);
    margin: 0;
}

/* QCU slider (node 753:12494) — the only clickable control in this block;
   RAM/vCPU below it are read-only and follow the slider position. */
.QCU-Slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.QCU-Slider--label {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-700);
    margin: 0;
}

.QCU-Slider--control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.QCU-Slider--input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full);
    background: linear-gradient(to right, var(--button-stroke) 0%, var(--button-stroke) 0%, var(--text-100) 0%, var(--text-100) 100%);
    cursor: pointer;
    outline: none;
}

.QCU-Slider--input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--blue-Linear-1000);
    border: none;
    cursor: pointer;
}

.QCU-Slider--input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--blue-Linear-1000);
    border: none;
    cursor: pointer;
}

.QCU-Slider--input::-moz-range-track {
    height: 8px;
    border-radius: var(--radius-full);
    background: transparent;
}

.QCU-Slider--input:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

.QCU-Slider--ticks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 2px;
}

.QCU-Slider--ticks span {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-600);
}

/* Read-only RAM/vCPU display, mirrors the QCU slider position */
.RAM-CPU-Display {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    border: 1px solid var(--text-300);
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25);
}

.Pricing-Tab--readonly {
    cursor: default;
}

.Calculator--panel-right {
    background-color: var(--text-900);
    border-radius: 18px;
    padding: 26px;
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.Calculator--pod-name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-50);
    margin: 0;
}

.Calculator--pricing-details {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

.Calculator--spec-line {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text-200);
    letter-spacing: 0.12px;
    margin: 0;
}

.Calculator--divider {
    height: 1px;
    width: 100%;
    background-color: var(--text-200);
}

.Calculator--pricing-label {
    font-family: var(--secondary-font);
    font-size: 0.75rem;
    letter-spacing: 0.72px;
    color: var(--text-200);
    margin: 0 0 4px;
}

.Calculator--price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.Calculator--price {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.25rem;
    color: #ffffff;
    margin: 0;
}

.Calculator--price-unit {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: #9a9ca0;
}

.Calculator--price-hourly {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--text-100);
    margin: 6px 0 0;
}

.Calculator--cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.Calculator--deploy-btn {
    background-color: var(--text-50);
    border: 1px solid var(--text-200);
    border-radius: 12px;
    padding: 12px 56px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-900);
    letter-spacing: 0.15px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.Calculator--disclaimer {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.72px;
    color: var(--text-100);
    text-align: center;
    margin: 10px 0 0;
}

/* ── 02 · Pricing Plans (currency hero + cards · node 728:9708) ── */
.Section-PricingPlans {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 72px 90px 96px;
}

.PricingPlans--inner {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
}

.PricingPlans--heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 800px;
    width: 100%;
}

.PricingPlans--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1.27;
    text-align: center;
    color: #030712;
    margin: 0;
}

.PricingPlans--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 20px;
    text-align: center;
    color: #4f5159;
    margin: 0;
}

.PricingPlans--cards {
    display: flex;
    gap: 44px;
    align-items: stretch;
    width: 100%;
    /* 3 × 380px cards + 2 × 44px gaps = 1228px: force a single row on
       desktop instead of wrapping; on the narrower end of "desktop"
       widths where that doesn't fit, scroll horizontally rather than
       break the row — still one line, never a stray orphan card. */
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    padding-bottom: 4px;
}

.Plan-Card {
    background-color: #ffffff;
    border: 1px solid var(--button-stroke);
    border-radius: 20px;
    width: 380px;
    flex-shrink: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    transition: box-shadow 0.25s ease;
}

.Plan-Card:hover {
    box-shadow: 2px 2px 10px #d8e6fd, inset 2px 4px 4px #c4d9fc;
}

.Plan-Card--discovery {
    padding: 31px 27px;
}

.Plan-Card .Button-cta--white--default {
    background-color: #ffffff;
    border: 1px solid var(--button-stroke);
}

.Plan-Card--label-row {
    display: flex;
    align-items: center;
    gap: 11px;
}

.Plan-Card--label {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-600);
    margin: 0;
}

.Plan-Card--badge {
    background-color: var(--blue-Linear-1000);
    color: #ffffff;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.6875rem;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.Plan-Card--price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.Plan-Card--price {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
    color: #030712;
    margin: 0;
}

.Plan-Card--price-unit {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1;
    color: #818388;
}

.Plan-Card--price-note {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text-700);
    margin: 0;
}

.Plan-Card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--text-700);
    margin: 0;
}

.Plan-Card--features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.Plan-Card--feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text-700);
}

.Plan-Card--feature i {
    color: var(--blue-Linear-1000);
    font-size: 14px;
    flex-shrink: 0;
}

.Plan-Card .Button-cta--white--default {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* ── 03 · Wallet & Payments (node 742:12090) ── */
.Section-PricingWallet {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 0 90px 96px;
}

.PricingWallet--inner {
    max-width: 1080px;
    width: 100%;
    display: flex;
    gap: 44px;
    align-items: stretch;
    flex-wrap: wrap;
}

.TopUp-Card {
    background-color: #ffffff;
    border: 1px solid var(--button-stroke);
    box-shadow: 12px 8px 12px var(--text-100);
    border-radius: 20px;
    padding: 40px 24px;
    flex: 1 1 380px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    justify-content: center;
}

.TopUp-Card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.25rem;
    color: #030712;
    margin: 0 0 16px;
}

.TopUp-Card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 24px;
    color: var(--text-700);
    margin: 0 0 16px;
}

.TopUp-Card--pill {
    display: inline-flex;
    align-items: center;
    background-color: #ebf2fe;
    color: var(--blue-Linear-1000);
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 7px 14px;
    border-radius: 999px;
}

.TopUp-Card--methods {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    /* 5 × 80px icons + 4 × 14px gaps = 456px: the exact width needed to
       keep all 5 methods on one row before flex-wrap kicks in. */
    min-width: 456px;
}

.TopUp-Method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 80px;
}

.TopUp-Method--icon {
    background-color: #f4f7fb;
    border-radius: 14px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.TopUp-Method--icon img {
    max-width: 36px;
    max-height: 30px;
}

.TopUp-Method--label {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-600);
    text-align: center;
}

.OneWallet-Card {
    background-color: var(--text-900);
    border-radius: 24px;
    padding: 32px;
    flex: 1 1 480px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    justify-content: center;
}

.OneWallet-Card--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2rem;
    color: #ffffff;
    margin: 0 0 8px;
}

.OneWallet-Card--desc {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.12px;
    color: #9a9ca0;
    margin: 0;
}

.OneWallet-Card--models {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.OneWallet-Model-Pill {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.8125rem;
    padding: 8px 15px;
    border-radius: 999px;
    white-space: nowrap;
}

.OneWallet-Card--cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--text-50);
    border: 1px solid var(--text-200);
    border-radius: 12px;
    padding: 16px 24px;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-900);
    letter-spacing: 0.15px;
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
}

.OneWallet-Card--cta i {
    font-size: 16px;
}

/* ── 04 · Feature Comparison Table (node 747:12291) ── */
.Section-PricingComparison {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 0 80px 120px;
}

.PricingComparison--inner {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PricingComparison--tag {
    display: inline-flex;
    background-color: #ebf2fe;
    border: 1px solid #d8e6fd;
    color: var(--blue-Linear-1000);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.PricingComparison--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.25rem;
    color: rgba(0, 2, 7, 0.96);
    text-align: center;
    margin: 0 0 16px;
}

.PricingComparison--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: var(--text-700);
    text-align: center;
    max-width: 600px;
    margin: 0 0 60px;
}

.Comparison-Table {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--text-200);
}

.Comparison-Table--header,
.Comparison-Table--row,
.Comparison-Table--footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid var(--text-200);
}

.Comparison-Table--row:nth-child(even) {
    background-color: #fcfcfd;
}

.Comparison-Table--footer {
    background-color: #f5f7f9;
    border-bottom: none;
    padding: 24px 20px;
}

.Comparison-Table--feature {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-800);
    letter-spacing: 0.0168px;
}

.Comparison-Table--header .Comparison-Table--feature {
    font-family: var(--primary-font);
    font-size: 1.25rem;
    color: rgba(0, 2, 7, 0.96);
}

.Comparison-Col--plan-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-900);
    letter-spacing: 0.0288px;
}

.Comparison-Col--plan-name.is-business {
    color: var(--blue-Linear-1000);
}

.Comparison-Col--badge {
    background-color: #ebf2fe;
    color: var(--blue-Linear-1000);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.625rem;
    padding: 2px 6px;
    border-radius: 6px;
}

.Comparison-Col--price {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.75rem;
    color: rgba(0, 2, 7, 0.96);
    margin: 4px 0 0;
}

.Comparison-Col--price span {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: #686a71;
}

.Comparison-Table--cell {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text-700);
}

.Comparison-CTA {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.84px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.Comparison-CTA--ghost {
    background-color: #ffffff;
    color: #030712;
    border: none;
}

.Comparison-CTA--filled {
    background-color: #030712;
    color: #eeeeee;
    border: none;
}

.Comparison-CTA--filled:active {
    background-color: rgba(239, 246, 255, 1);
    color: #030712;
}

.Comparison-CTA--link {
    background: none;
    color: #030712;
    text-decoration: underline;
    padding: 12px 0;
    border: none;
}

.Comparison-CTA--link:hover {
    background-color: rgba(239, 246, 255, 1);
}

/* ── 05 · FAQ (node 744:12238) — reuses .FAQ-tab / .FAQ-answer from join-our-beta ── */
.Section-PricingFAQ {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 64px 80px 96px;
}

/* Scoped overrides: pricing FAQ (node 744:12238) uses Inter + blue/1000
   accent, distinct from join-our-beta's Manrope + blue/900 FAQ-tab. */
.Section-PricingFAQ .FAQ-tab {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
}

.Section-PricingFAQ .FAQ-tab.is-active {
    background-color: var(--blue-Linear-1000);
    font-weight: 700;
}

.Section-PricingFAQ .FAQ-answer--desc {
    font-size: 0.9375rem;
}

.PricingFAQ--inner {
    max-width: 1080px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.PricingFAQ--heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.PricingFAQ--heading h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2rem;
    color: #030712;
    margin: 0;
}

.PricingFAQ--heading p {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-600);
    margin: 0;
}

.FAQ-answer--link {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--blue-Linear-1000);
    text-decoration: none;
    margin-top: auto;
    align-self: flex-start;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .Section-PricingCalculator,
    .Section-PricingPlans,
    .Section-PricingWallet {
        padding-left: 48px;
        padding-right: 48px;
    }
    .Section-PricingComparison {
        padding-left: 40px;
        padding-right: 40px;
    }
    .Calculator-Card--row {
        flex-direction: column;
        gap: 32px;
    }
    .Calculator--panel-right {
        width: 100%;
    }
    .QCU-Slider--control {
        gap: 4px;
    }
    .PricingPlans--cards {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .Comparison-Table {
        overflow-x: auto;
    }
    .Comparison-Table--header,
    .Comparison-Table--row,
    .Comparison-Table--footer {
        min-width: 720px;
    }
}

@media (max-width: 768px) {
    .PricingCalculator--title,
    .PricingPlans--title {
        font-size: 2.125rem;
    }
    .TopUp-Card--title,
    .OneWallet-Card--title {
        font-size: 1.75rem;
    }
    .PricingComparison--title {
        font-size: 1.875rem;
    }
    .PricingFAQ--heading h2 {
        font-size: 1.625rem;
    }
    .Comparison-Table {
        width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 600px) {
    .Section-PricingCalculator,
    .Section-PricingPlans,
    .Section-PricingWallet,
    .Section-PricingComparison,
    .Section-PricingFAQ {
        padding-left: 20px;
        padding-right: 20px;
    }
    .Pricing-Tablist {
        flex-wrap: wrap;
    }
    .Plan-Card {
        width: 100%;
    }
    .Calculator--deploy-btn {
        padding: 12px 24px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .PricingCalculator--title,
    .PricingPlans--title {
        font-size: 1.75rem;
    }
    .Flag-Currency--dropdown {
        left: 0;
        transform: none;
        right: 0;
        min-width: 0;
    }
    .PricingWallet--inner {
        flex-direction: column;
    }
    .TopUp-Card--methods {
        min-width: 0;
    }
}

/* ===================================================================
   build-with-qeda (nodes 780:12995 · 780:13031)
   =================================================================== */

/* ── Title--Section ── */
.Section-CommunityTitle {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 96px 90px calc(48px + 0.75rem);
}

.CommunityTitle--inner {
    max-width: 760px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
    text-align: center;
}

.CommunityTitle--heading {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.17;
    color: var(--text-1000);
    margin: 0;
}

.CommunityTitle--subtitle {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.06em;
    color: var(--text-1000);
    margin: 0;
}

/* ── Gallery-Section ── */
.Section-CommunityGallery {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 0 90px 120px;
}

.CommunityGallery--inner {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Icons-trend-recents */
.Community-Filter {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: fit-content;
}

.Community-Filter--btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 24px;
    padding: 10px;
    background: none;
    border: 1px solid var(--text-400);
    border-radius: 4px;
    margin-left: -1px;
    cursor: pointer;
    color: var(--text-700);
    font-size: 14px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.Community-Filter--btn:first-child {
    margin-left: 0;
}

.Community-Filter--btn.is-active {
    background-color: var(--text-800);
    border-color: var(--text-800);
    color: #ffffff;
}

.Community-Filter--btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
    position: relative;
    z-index: 1;
}

/* big-group → real masonry: CSS multi-column, so a newly added card just
   drops into the shortest column instead of needing a hand-placed spot. */
.Community-Masonry {
    column-count: 4;
    column-gap: 24px;
    width: 100%;
}

.Community-Card {
    display: inline-flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 0 0 24px;
    break-inside: avoid;
    text-decoration: none;
    border-radius: 20px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.Community-Card:hover {
    box-shadow: 0 8px 24px rgba(28, 32, 42, 0.12);
    transform: translateY(-2px);
}

.Community-Card--thumb {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--text-200);
}

.Community-Card--thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.Community-Card--meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.Community-Card--title {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 18px;
    color: var(--text-900);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.Community-Card--detail-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.Community-Card--author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.Community-Card--photo {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.Community-Card--name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Community-Card--likes {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.Community-Card--likes i {
    font-size: 14px;
    color: var(--text-800);
}

.Community-Card--likes-count {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-800);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .Community-Masonry {
        column-count: 3;
    }
}

@media (max-width: 1024px) {
    .Section-CommunityTitle,
    .Section-CommunityGallery {
        padding-left: 48px;
        padding-right: 48px;
    }
    .CommunityTitle--heading {
        font-size: 2rem;
    }
    .Community-Masonry {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .Section-CommunityTitle,
    .Section-CommunityGallery {
        padding-left: 20px;
        padding-right: 20px;
    }
    .Section-CommunityTitle {
        padding-top: 64px;
    }
    .CommunityTitle--heading {
        font-size: 1.75rem;
    }
    .CommunityTitle--subtitle {
        font-size: 0.9375rem;
    }
    .Community-Masonry {
        column-count: 1;
    }
}

/* user-profile (node 804:6744) */
.Section-UserProfile {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 48px 90px 120px;
}

.UserProfile--split {
    max-width: 1280px;
    width: 100%;
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: start;
    gap: 24px;
}

/* ── sidebar-left ── */
.UserProfile-Sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background-color: var(--white-bg);
    border: 1px solid var(--text-100);
    border-radius: 16px;
    padding: 32px 24px;
    position: sticky;
    top: 24px;
}

.UserProfile-Sidebar--avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.UserProfile-Avatar--dashed {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    background-color: var(--text-50);
    border: 1.5px dashed var(--text-300);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-400);
    font-size: 1.75rem;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.UserProfile-Avatar--dashed:hover {
    border-color: var(--blue-Linear-1000);
    color: var(--blue-Linear-1000);
}

.UserProfile-Avatar--dashed.has-photo {
    border-style: solid;
    border-color: var(--blue-Linear-1000);
}

.UserProfile-Avatar--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.UserProfile-Avatar--upload-label {
    background: none;
    border: none;
    color: var(--blue-Linear-1000);
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.UserProfile-Sidebar--identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.UserProfile-Sidebar--name {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-1000);
    margin: 0;
}

.UserProfile-Sidebar--username {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-500);
    margin: 0;
}

.UserProfile-Sidebar--metadata {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.UserProfile-Metadata--row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-400);
    font-size: 1rem;
}

.UserProfile-Metadata--link {
    background: none;
    border: none;
    color: var(--text-500);
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.UserProfile-Metadata--link:hover {
    color: var(--blue-Linear-1000);
}

.UserProfile-Metadata--link.is-filled {
    color: var(--text-800);
    font-weight: 600;
}

.UserProfile-Metadata--link.is-filled:hover {
    color: var(--blue-Linear-1000);
}

.UserProfile-Bio--placeholder {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 10px;
    background-color: var(--text-50);
    border: 1px solid var(--text-100);
}

.UserProfile-Bio--text {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-800);
    margin: 0;
    line-height: 1.5;
}

.UserProfile-Bio--text.is-placeholder {
    font-style: italic;
    color: var(--text-500);
}

.UserProfile-Bio--edit-link {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--blue-Linear-1000);
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
}

.UserProfile-Bio--edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.UserProfile-Bio--textarea {
    width: 100%;
    border: 1px solid var(--text-200);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    background-color: var(--white-bg);
    outline: none;
    resize: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.UserProfile-Bio--textarea::placeholder {
    color: var(--text-400);
}

.UserProfile-Bio--textarea:focus {
    border-color: var(--blue-Linear-1000);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.UserProfile-Bio--edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.UserProfile-Bio--cancel,
.UserProfile-Bio--save {
    border-radius: 8px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.UserProfile-Bio--cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.UserProfile-Bio--cancel:hover {
    background-color: var(--text-100);
}

.UserProfile-Bio--save {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.UserProfile-Bio--save:hover {
    background-color: var(--text-800);
}

.UserProfile-Stats--row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.UserProfile-Stat--box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    border-radius: 10px;
    background-color: var(--text-50);
}

.UserProfile-Stat--value {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-1000);
    margin: 0;
}

.UserProfile-Stat--label {
    font-family: var(--secondary-font);
    font-size: 0.75rem;
    color: var(--text-500);
    margin: 0;
}

.UserProfile-Actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.UserProfile-Action--btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.84px;
    cursor: not-allowed;
    opacity: 0.5;
}

.UserProfile-Action--follow {
    background-color: #030712;
    color: #eeeeee;
    border: none;
}

.UserProfile-Action--touch {
    background: none;
    color: var(--text-800);
    border: 1px solid var(--text-200);
}

.UserProfile-Networks {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--text-100);
}

.UserProfile-Networks--label {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-600);
    margin: 0;
}

.UserProfile-Networks--icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.UserProfile-Network--box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--text-50);
    border: 1px solid var(--text-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-600);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.UserProfile-Network--box:hover {
    background-color: var(--colorprimary-1000);
    color: #ffffff;
}

.UserProfile-Network--box.is-connected {
    background-color: var(--colorprimary-1000);
    border-color: var(--colorprimary-1000);
    color: #ffffff;
}

.UserProfile-Networks--connect-link {
    background: none;
    border: none;
    color: var(--blue-Linear-1000);
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* ── content-right ── */
.UserProfile-Content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.UserProfile-CompletionBanner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background-color: var(--white-bg);
    border: 1px solid var(--text-100);
    border-radius: 16px;
    padding: 24px;
}

.UserProfile-CompletionBanner--header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.UserProfile-CompletionBanner--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-1000);
    margin: 0;
}

.UserProfile-CompletionBanner--percent {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--blue-Linear-1000);
    margin: 0;
}

.UserProfile-CompletionBanner--track {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    overflow: hidden;
}

.UserProfile-CompletionBanner--fill {
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--blue-Linear-1000);
}

.UserProfile-CompletionBanner--checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.UserProfile-CompletionBanner--check-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 0;
}

.UserProfile-CompletionBanner--check-item i {
    font-size: 1rem;
    color: var(--text-300);
}

.UserProfile-CompletionBanner--check-item.is-done {
    color: var(--text-800);
}

.UserProfile-CompletionBanner--check-item.is-done i {
    color: var(--text-800);
}

.UserProfile-CompletionBanner--cta {
    align-self: flex-start;
    background-color: #030712;
    color: #eeeeee;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.84px;
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.UserProfile-CompletionBanner--cta:hover {
    opacity: 0.85;
}

.UserProfile-Section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.UserProfile-Section--heading {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--text-1000);
    margin: 0;
}

.UserProfile-Section--heading--projects {
    margin-top: 0;
}

.UserProfile-EmptyCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    background-color: var(--white-bg);
    border: 2px dashed var(--text-200);
    border-radius: 20px;
    padding: 40px;
}

.UserProfile-EmptyCard i {
    width: 48px;
    height: 48px;
    color: var(--text-800);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.UserProfile-EmptyCard--text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.UserProfile-EmptyCard--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-900);
    margin: 0;
}

.UserProfile-EmptyCard--desc {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-500);
    margin: 0;
}

.UserProfile-EmptyCard--cta {
    background-color: #030712;
    color: #eeeeee;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.84px;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.UserProfile-EmptyCard--cta:hover {
    opacity: 0.85;
}

.UserProfile-AboutGrid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.UserProfile-AboutGrid--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.UserProfile-AboutCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background-color: var(--white-bg);
    border: 1px solid var(--text-100);
    border-radius: 14px;
    padding: 20px;
}

.UserProfile-AboutCard--header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-600);
}

.UserProfile-AboutCard--header i {
    font-size: 1.125rem;
}

.UserProfile-AboutCard--title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-900);
    margin: 0;
}

.UserProfile-AboutCard--desc {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 0;
    line-height: 1.5;
}

.UserProfile-AboutCard--placeholders {
    display: flex;
    gap: 6px;
}

.UserProfile-AboutCard--placeholder-circle {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
}

.UserProfile-AboutCard--tool-logo {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--white-bg);
    border: 1px solid var(--text-100);
    object-fit: contain;
    padding: 4px;
}

.UserProfile-AboutCard--tool-extra {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    color: var(--text-600);
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.UserProfile-AboutCard--link {
    background: none;
    border: none;
    color: var(--blue-Linear-1000);
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
}

.UserProfile-AboutCard--link:hover {
    text-decoration: underline;
}

.UserProfile-AboutCard--full {
    width: 100%;
}

@media (max-width: 1024px) {
    .Section-UserProfile {
        padding-left: 48px;
        padding-right: 48px;
    }
    .UserProfile--split {
        grid-template-columns: 1fr;
    }
    .UserProfile-Sidebar {
        position: static;
    }
}

@media (min-width: 1025px) {
    .UserProfile-Section + .UserProfile-Section {
        margin-top: 8px;
    }
}

@media (max-width: 600px) {
    .Section-UserProfile {
        padding: 32px 20px 64px;
    }
    .UserProfile-AboutGrid--row {
        grid-template-columns: 1fr;
    }
    .UserProfile-CompletionBanner--header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .UserProfile-EmptyCard {
        padding: 28px 20px;
    }
    .UserProfile-EmptyCard--cta {
        align-self: stretch;
        text-align: center;
        white-space: normal;
    }
}

/* AddEntryOverlay */
.no-scroll {
    overflow: hidden;
}

.AddEntryOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.AddEntryOverlay.is-open {
    display: flex;
}

.AddEntryOverlay-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.AddEntryOverlay-Panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: var(--white-bg);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(3, 7, 18, 0.25);
}

.AddEntryOverlay-Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.AddEntryOverlay-Title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-900);
    margin: 0;
}

.AddEntryOverlay-Close {
    background: none;
    border: none;
    color: var(--text-500);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.AddEntryOverlay-Close:hover {
    color: var(--text-900);
}

.AddEntryOverlay-Form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.AddEntryOverlay-Field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.AddEntryOverlay-Label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-800);
}

.AddEntryOverlay-Label--optional {
    font-weight: 400;
    color: var(--text-500);
}

.AddEntryOverlay-Input,
.AddEntryOverlay-Textarea {
    border: 1px solid var(--text-200);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    background-color: var(--white-bg);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.AddEntryOverlay-Input::placeholder,
.AddEntryOverlay-Textarea::placeholder {
    color: var(--text-400);
}

.AddEntryOverlay-Input:focus,
.AddEntryOverlay-Textarea:focus,
.AddEntryOverlay-Select:focus {
    border-color: var(--blue-Linear-1000);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.AddEntryOverlay-Textarea {
    resize: none;
    font-family: var(--secondary-font);
}

.AddEntryOverlay-TimePeriod {
    display: flex;
    align-items: center;
    gap: 12px;
}

.AddEntryOverlay-TimeGroup {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.AddEntryOverlay-TimeGroup--label {
    font-family: var(--secondary-font);
    font-size: 0.75rem;
    color: var(--text-500);
}

.AddEntryOverlay-TimeGroup--row {
    display: flex;
    gap: 8px;
}

.AddEntryOverlay-Select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--text-200);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    background-color: var(--white-bg);
    outline: none;
    transition: border-color 0.15s ease;
}

.AddEntryOverlay-Select--year {
    flex: 0 0 88px;
}

.AddEntryOverlay-Select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.AddEntryOverlay-TimeArrow {
    flex-shrink: 0;
    color: var(--text-500);
    font-size: 0.875rem;
    margin-top: 20px;
    display: flex;
}

.AddEntryOverlay-Current {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-top: 4px;
}

.AddEntryOverlay-Current--input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.AddEntryOverlay-Current--box {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--text-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.AddEntryOverlay-Current--box i {
    font-size: 10px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.AddEntryOverlay-Current--input:checked + .AddEntryOverlay-Current--box {
    background-color: var(--blue-Linear-1000);
    border-color: var(--blue-Linear-1000);
}

.AddEntryOverlay-Current--input:checked + .AddEntryOverlay-Current--box i {
    opacity: 1;
}

.AddEntryOverlay-Current--input:focus-visible + .AddEntryOverlay-Current--box {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

.AddEntryOverlay-Current--label {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
}

.AddEntryOverlay-Actions {
    display: flex;
    gap: 12px;
    padding-top: 4px;
}

.AddEntryOverlay-Cancel,
.AddEntryOverlay-Submit {
    flex: 1;
    border-radius: 8px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.AddEntryOverlay-Cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.AddEntryOverlay-Cancel:hover {
    background-color: var(--text-100);
}

.AddEntryOverlay-Submit {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.AddEntryOverlay-Submit:hover:not(:disabled) {
    background-color: var(--text-800);
}

.AddEntryOverlay-Submit:disabled {
    background-color: var(--text-200);
    color: var(--text-400);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .AddEntryOverlay-Panel {
        padding: 24px 20px;
        border-radius: 18px;
        gap: 20px;
    }
    .AddEntryOverlay-TimePeriod {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .AddEntryOverlay-TimeArrow {
        display: none;
    }
    .AddEntryOverlay-Actions {
        flex-direction: column-reverse;
    }
}

/* AddPhotoOverlay */
.AddPhotoOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.AddPhotoOverlay.is-open {
    display: flex;
}

.AddPhotoOverlay-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.AddPhotoOverlay-Panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: var(--white-bg);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(3, 7, 18, 0.25);
}

.AddPhotoOverlay-Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.AddPhotoOverlay-Title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-900);
    margin: 0;
}

.AddPhotoOverlay-Close {
    background: none;
    border: none;
    color: var(--text-500);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.AddPhotoOverlay-Close:hover {
    color: var(--text-900);
}

.AddPhotoOverlay-Dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 2px dashed var(--text-200);
    border-radius: 16px;
    background-color: var(--text-50);
    cursor: pointer;
    padding: 40px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.AddPhotoOverlay-Dropzone:hover,
.AddPhotoOverlay-Dropzone:focus-visible {
    border-color: var(--blue-Linear-1000);
}

.AddPhotoOverlay-Dropzone.is-dragging {
    border-color: var(--blue-Linear-1000);
    background-color: #ebf2fe;
}

.AddPhotoOverlay-Dropzone--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.AddPhotoOverlay-Dropzone--empty[hidden] {
    display: none;
}

.AddPhotoOverlay-Dropzone--icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    border: 2px dashed var(--text-900);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-500);
    font-size: 1.75rem;
}

.AddPhotoOverlay-Dropzone--text {
    text-align: center;
}

.AddPhotoOverlay-Dropzone--title {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-900);
    margin: 0;
}

.AddPhotoOverlay-Dropzone--hint {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 4px 0 0;
}

.AddPhotoOverlay-Preview {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--blue-Linear-1000);
}

.AddPhotoOverlay-FileInput {
    display: none;
}

.AddPhotoOverlay-Actions {
    display: flex;
    gap: 12px;
}

.AddPhotoOverlay-Cancel,
.AddPhotoOverlay-Save {
    flex: 1;
    border-radius: 8px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddPhotoOverlay-Cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.AddPhotoOverlay-Cancel:hover {
    background-color: var(--text-100);
}

.AddPhotoOverlay-Save {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.AddPhotoOverlay-Save:hover:not(:disabled) {
    background-color: var(--text-800);
}

.AddPhotoOverlay-Save:disabled {
    background-color: var(--text-200);
    color: var(--text-400);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .AddPhotoOverlay-Panel {
        padding: 24px 20px;
        border-radius: 18px;
        gap: 20px;
    }
    .AddPhotoOverlay-Dropzone {
        min-height: 180px;
        padding: 24px;
    }
}

/* AddLinkOverlay */
.AddLinkOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.AddLinkOverlay.is-open {
    display: flex;
}

.AddLinkOverlay-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.AddLinkOverlay-Panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--white-bg);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(3, 7, 18, 0.25);
}

.AddLinkOverlay-Header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 32px 32px 20px;
}

.AddLinkOverlay-Title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--text-900);
    margin: 0;
}

.AddLinkOverlay-Subtitle {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 4px 0 0;
}

.AddLinkOverlay-Close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    border: none;
    color: var(--text-500);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddLinkOverlay-Close:hover {
    background-color: var(--text-200);
    color: var(--text-900);
}

.AddLinkOverlay-Body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 32px 24px;
}

.AddLinkOverlay-Field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.AddLinkOverlay-Label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-800);
}

.AddLinkOverlay-Label--optional {
    font-weight: 400;
    color: var(--text-400);
}

.AddLinkOverlay-TypeGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.AddLinkOverlay-TypeChip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 12px;
    border: 1px solid var(--text-200);
    background: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.AddLinkOverlay-TypeChip i {
    font-size: 1.25rem;
    color: var(--text-700);
}

.AddLinkOverlay-TypeChip span {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.6875rem;
    color: var(--text-800);
    text-align: center;
    line-height: 1.2;
}

.AddLinkOverlay-TypeChip:hover {
    border-color: var(--blue-Linear-1000);
    background-color: #f5f8ff;
}

.AddLinkOverlay-TypeChip.is-active {
    border-color: var(--blue-Linear-1000);
    background-color: #ebf2fe;
}

.AddLinkOverlay-UrlBox {
    display: flex;
    align-items: center;
    border: 1px solid var(--text-200);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.AddLinkOverlay-UrlBox:focus-within {
    border-color: var(--blue-Linear-1000);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.AddLinkOverlay-UrlIcon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    align-self: stretch;
    border-right: 1px solid var(--text-100);
    color: var(--text-700);
    font-size: 1.125rem;
}

.AddLinkOverlay-UrlInput {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 12px;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    outline: none;
}

.AddLinkOverlay-UrlInput::placeholder {
    color: var(--text-300);
}

.AddLinkOverlay-Input {
    border: 1px solid var(--text-200);
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    background-color: var(--white-bg);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.AddLinkOverlay-Input::placeholder {
    color: var(--text-300);
}

.AddLinkOverlay-Input:focus {
    border-color: var(--blue-Linear-1000);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.AddLinkOverlay-Preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--text-50);
    border: 1px solid var(--text-200);
    border-radius: 12px;
    padding: 12px 16px;
}

.AddLinkOverlay-Preview i {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: var(--text-700);
}

.AddLinkOverlay-Preview--text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.AddLinkOverlay-Preview--label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-800);
    margin: 0;
}

.AddLinkOverlay-Preview--url {
    font-family: var(--secondary-font);
    font-size: 0.6875rem;
    color: var(--text-400);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.AddLinkOverlay-Actions {
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--text-100);
    padding: 20px 32px;
}

.AddLinkOverlay-Cancel,
.AddLinkOverlay-Submit {
    flex: 1;
    border-radius: 10px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddLinkOverlay-Cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.AddLinkOverlay-Cancel:hover {
    background-color: var(--text-100);
}

.AddLinkOverlay-Submit {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.AddLinkOverlay-Submit:hover:not(:disabled) {
    background-color: var(--text-800);
}

.AddLinkOverlay-Submit:disabled {
    background-color: var(--text-200);
    color: var(--text-400);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .AddLinkOverlay-Header {
        padding: 24px 20px 16px;
    }
    .AddLinkOverlay-Body {
        padding: 0 20px 20px;
    }
    .AddLinkOverlay-Actions {
        padding: 16px 20px;
    }
    .AddLinkOverlay-TypeChip span {
        font-size: 0.625rem;
    }
}

/* AddMetadataOverlay */
.AddMetadataOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.AddMetadataOverlay.is-open {
    display: flex;
}

.AddMetadataOverlay-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.AddMetadataOverlay-Panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: var(--white-bg);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(3, 7, 18, 0.25);
}

.AddMetadataOverlay-Header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.AddMetadataOverlay-Icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--text-50);
    border: 1px solid var(--text-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-700);
    font-size: 1.25rem;
}

.AddMetadataOverlay-HeaderText {
    flex: 1;
    min-width: 0;
}

.AddMetadataOverlay-Title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-900);
    margin: 0;
}

.AddMetadataOverlay-Subtitle {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 4px 0 0;
}

.AddMetadataOverlay-Close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    border: none;
    color: var(--text-500);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddMetadataOverlay-Close:hover {
    background-color: var(--text-200);
    color: var(--text-900);
}

.AddMetadataOverlay-Field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.AddMetadataOverlay-Label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-800);
}

.AddMetadataOverlay-Input {
    border: 1px solid var(--text-200);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    background-color: var(--white-bg);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.AddMetadataOverlay-Input::placeholder {
    color: var(--text-400);
}

.AddMetadataOverlay-Input:focus {
    border-color: var(--blue-Linear-1000);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.AddMetadataOverlay-Actions {
    display: flex;
    gap: 12px;
}

.AddMetadataOverlay-Cancel,
.AddMetadataOverlay-Submit {
    flex: 1;
    border-radius: 8px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddMetadataOverlay-Cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.AddMetadataOverlay-Cancel:hover {
    background-color: var(--text-100);
}

.AddMetadataOverlay-Submit {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.AddMetadataOverlay-Submit:hover:not(:disabled) {
    background-color: var(--text-800);
}

.AddMetadataOverlay-Submit:disabled {
    background-color: var(--text-200);
    color: var(--text-400);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .AddMetadataOverlay-Panel {
        padding: 22px 20px;
        border-radius: 18px;
    }
}

/* AddProjectOverlay */
.AddProjectOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.AddProjectOverlay.is-open {
    display: flex;
}

.AddProjectOverlay-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.AddProjectOverlay-Panel {
    position: relative;
    width: 100%;
    max-width: 580px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background-color: var(--white-bg);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(3, 7, 18, 0.25);
    overflow: hidden;
}

.AddProjectOverlay-Header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 32px 32px 16px;
}

.AddProjectOverlay-Title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--text-900);
    margin: 0;
}

.AddProjectOverlay-Subtitle {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 4px 0 0;
}

.AddProjectOverlay-Close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    border: none;
    color: var(--text-500);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddProjectOverlay-Close:hover {
    background-color: var(--text-200);
    color: var(--text-900);
}

.AddProjectOverlay-Body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 32px 24px;
}

.AddProjectOverlay-Field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.AddProjectOverlay-Eyebrow {
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-400);
    margin: 0 0 4px;
}

.AddProjectOverlay-Label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-800);
}

.AddProjectOverlay-Label-Row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.AddProjectOverlay-Label--count {
    font-family: var(--secondary-font);
    font-size: 0.75rem;
    color: var(--text-400);
}

.AddProjectOverlay-ImageGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.AddProjectOverlay-ImageSlot {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    background-color: var(--text-50);
    border: 1px solid var(--text-200);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.AddProjectOverlay-ImageSlot:hover {
    border-color: var(--blue-Linear-1000);
}

.AddProjectOverlay-ImageSlot--empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

.AddProjectOverlay-ImageSlot--empty i {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--white-bg);
    border: 1px solid var(--text-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-400);
    font-size: 0.8125rem;
}

.AddProjectOverlay-ImageSlot--empty span {
    font-family: var(--secondary-font);
    font-size: 0.6875rem;
    color: var(--text-400);
}

.AddProjectOverlay-ImageSlot.has-image .AddProjectOverlay-ImageSlot--empty {
    display: none;
}

.AddProjectOverlay-ImageSlot--preview {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.AddProjectOverlay-ImageSlot.has-image .AddProjectOverlay-ImageSlot--preview {
    display: block;
}

.AddProjectOverlay-ImageSlot--edit {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(3, 7, 18, 0.3);
    color: #ffffff;
    font-size: 1.125rem;
    pointer-events: none;
}

.AddProjectOverlay-ImageSlot.has-image:hover .AddProjectOverlay-ImageSlot--edit {
    display: flex;
}

.AddProjectOverlay-ImageSlot--input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.AddProjectOverlay-Input,
.AddProjectOverlay-Textarea {
    border: 1px solid var(--text-200);
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    background-color: var(--white-bg);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.AddProjectOverlay-Input::placeholder,
.AddProjectOverlay-Textarea::placeholder {
    color: var(--text-300);
}

.AddProjectOverlay-Input:focus,
.AddProjectOverlay-Textarea:focus,
.AddProjectOverlay-StackBox:focus-within {
    border-color: var(--blue-Linear-1000);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.AddProjectOverlay-Textarea {
    resize: none;
}

.AddProjectOverlay-StackBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    border: 1px solid var(--text-200);
    border-radius: 12px;
    padding: 8px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.AddProjectOverlay-StackChip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #ebf2fe;
    color: var(--blue-Linear-1000);
    border-radius: var(--radius-full);
    padding: 5px 10px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.75rem;
}

.AddProjectOverlay-StackChip--remove {
    background: none;
    border: none;
    color: var(--blue-Linear-1000);
    opacity: 0.6;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0;
    font-size: 0.625rem;
}

.AddProjectOverlay-StackChip--remove:hover {
    opacity: 1;
}

.AddProjectOverlay-StackInput {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    background: none;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    padding: 4px 0;
}

.AddProjectOverlay-StackInput::placeholder {
    color: var(--text-300);
}

.AddProjectOverlay-Suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: var(--white-bg);
    border: 1px solid var(--text-200);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(3, 7, 18, 0.12);
    overflow: hidden;
    z-index: 10;
}

.AddProjectOverlay-Suggestions.is-open {
    display: flex;
    flex-direction: column;
}

.AddProjectOverlay-Suggestion {
    text-align: left;
    background: none;
    border: none;
    padding: 10px 16px;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.AddProjectOverlay-Suggestion:hover {
    background-color: #f5f8ff;
}

.AddProjectOverlay-Notice {
    display: none;
    align-items: flex-start;
    gap: 10px;
    background-color: var(--text-200);
    border-radius: 14px;
    padding: 14px 16px;
}

.AddProjectOverlay-Notice.is-visible {
    display: flex;
}

.AddProjectOverlay-Notice i {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--text-800);
    font-size: 1rem;
}

.AddProjectOverlay-Notice p {
    font-family: var(--secondary-font);
    font-size: 0.75rem;
    color: var(--text-900);
    line-height: 1.5;
    margin: 0;
}

.AddProjectOverlay-Actions {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--text-100);
    padding: 20px 32px;
}

.AddProjectOverlay-Cancel,
.AddProjectOverlay-Submit {
    flex: 1;
    border-radius: 10px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddProjectOverlay-Cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.AddProjectOverlay-Cancel:hover {
    background-color: var(--text-100);
}

.AddProjectOverlay-Submit {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.AddProjectOverlay-Submit:hover:not(:disabled) {
    background-color: var(--text-800);
}

.AddProjectOverlay-Submit:disabled {
    background-color: var(--text-200);
    color: var(--text-400);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .AddProjectOverlay-Header {
        padding: 24px 20px 12px;
    }
    .AddProjectOverlay-Body {
        padding: 0 20px 20px;
        gap: 20px;
    }
    .AddProjectOverlay-Actions {
        padding: 16px 20px;
    }
    .AddProjectOverlay-ImageSlot--empty span {
        display: none;
    }
}

/* AddToolboxOverlay */
.AddToolboxOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.AddToolboxOverlay.is-open {
    display: flex;
}

.AddToolboxOverlay-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.AddToolboxOverlay-Panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: var(--white-bg);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(3, 7, 18, 0.25);
    overflow: hidden;
}

.AddToolboxOverlay-Header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 32px 32px 16px;
}

.AddToolboxOverlay-Title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--text-900);
    margin: 0;
}

.AddToolboxOverlay-Subtitle {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 4px 0 0;
}

.AddToolboxOverlay-Close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    border: none;
    color: var(--text-500);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddToolboxOverlay-Close:hover {
    background-color: var(--text-200);
    color: var(--text-900);
}

.AddToolboxOverlay-SearchRow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 32px 16px;
    padding: 10px 14px;
    border: 1px solid var(--text-200);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.AddToolboxOverlay-SearchRow:focus-within {
    border-color: var(--blue-Linear-1000);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.AddToolboxOverlay-SearchRow i {
    color: var(--text-400);
    font-size: 1rem;
}

.AddToolboxOverlay-SearchInput {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
}

.AddToolboxOverlay-SearchInput::placeholder {
    color: var(--text-300);
}

.AddToolboxOverlay-Body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 32px 24px;
}

.AddToolboxOverlay-Grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.AddToolboxOverlay-Item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--text-200);
    border-radius: 14px;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.AddToolboxOverlay-Item.is-hidden {
    display: none;
}

.AddToolboxOverlay-Item:hover {
    border-color: var(--blue-Linear-1000);
}

.AddToolboxOverlay-Item.is-selected {
    border-color: var(--blue-Linear-1000);
    background-color: #ebf2fe;
}

.AddToolboxOverlay-Item--check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background-color: var(--blue-Linear-1000);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.AddToolboxOverlay-Item.is-selected .AddToolboxOverlay-Item--check {
    opacity: 1;
    transform: scale(1);
}

.AddToolboxOverlay-Item--logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.AddToolboxOverlay-Item--name {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.6875rem;
    color: var(--text-700);
    text-align: center;
    line-height: 1.2;
}

.AddToolboxOverlay-Empty {
    display: none;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-400);
    text-align: center;
    padding: 32px 0;
    margin: 0;
}

.AddToolboxOverlay-Empty.is-visible {
    display: block;
}

.AddToolboxOverlay-Actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--text-100);
    padding: 20px 32px;
}

.AddToolboxOverlay-Count {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    white-space: nowrap;
}

.AddToolboxOverlay-ActionButtons {
    display: flex;
    gap: 12px;
}

.AddToolboxOverlay-Cancel,
.AddToolboxOverlay-Submit {
    border-radius: 10px;
    padding: 12px 20px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.AddToolboxOverlay-Cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.AddToolboxOverlay-Cancel:hover {
    background-color: var(--text-100);
}

.AddToolboxOverlay-Submit {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.AddToolboxOverlay-Submit:hover:not(:disabled) {
    background-color: var(--text-800);
}

.AddToolboxOverlay-Submit:disabled {
    background-color: var(--text-200);
    color: var(--text-400);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .AddToolboxOverlay-Header {
        padding: 24px 20px 12px;
    }
    .AddToolboxOverlay-SearchRow {
        margin: 0 20px 12px;
    }
    .AddToolboxOverlay-Body {
        padding: 0 20px 20px;
    }
    .AddToolboxOverlay-Grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .AddToolboxOverlay-Actions {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
    }
    .AddToolboxOverlay-ActionButtons {
        justify-content: stretch;
    }
    .AddToolboxOverlay-Cancel,
    .AddToolboxOverlay-Submit {
        flex: 1;
    }
}
/* AddStacksOverlay */
.AddStacksOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.AddStacksOverlay.is-open {
    display: flex;
}

.AddStacksOverlay-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.AddStacksOverlay-Panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: var(--white-bg);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(3, 7, 18, 0.25);
    overflow: hidden;
}

.AddStacksOverlay-Header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 32px 32px 16px;
}

.AddStacksOverlay-Title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--text-900);
    margin: 0;
}

.AddStacksOverlay-Subtitle {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 4px 0 0;
}

.AddStacksOverlay-Close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    border: none;
    color: var(--text-500);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddStacksOverlay-Close:hover {
    background-color: var(--text-200);
    color: var(--text-900);
}

.AddStacksOverlay-SearchRow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 32px 16px;
    padding: 10px 14px;
    border: 1px solid var(--text-200);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.AddStacksOverlay-SearchRow:focus-within {
    border-color: var(--blue-Linear-1000);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.AddStacksOverlay-SearchRow i {
    color: var(--text-400);
    font-size: 1rem;
}

.AddStacksOverlay-SearchInput {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-900);
}

.AddStacksOverlay-SearchInput::placeholder {
    color: var(--text-300);
}

.AddStacksOverlay-Body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 32px 24px;
}

.AddStacksOverlay-Grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.AddStacksOverlay-Item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--text-200);
    border-radius: 14px;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.AddStacksOverlay-Item.is-hidden {
    display: none;
}

.AddStacksOverlay-Item:hover {
    border-color: var(--blue-Linear-1000);
}

.AddStacksOverlay-Item.is-selected {
    border-color: var(--blue-Linear-1000);
    background-color: #ebf2fe;
}

.AddStacksOverlay-Item--check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background-color: var(--blue-Linear-1000);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.AddStacksOverlay-Item.is-selected .AddStacksOverlay-Item--check {
    opacity: 1;
    transform: scale(1);
}

.AddStacksOverlay-Item--logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.AddStacksOverlay-Item--name {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.6875rem;
    color: var(--text-700);
    text-align: center;
    line-height: 1.2;
}

.AddStacksOverlay-Empty {
    display: none;
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    color: var(--text-400);
    text-align: center;
    padding: 32px 0;
    margin: 0;
}

.AddStacksOverlay-Empty.is-visible {
    display: block;
}

.AddStacksOverlay-Actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--text-100);
    padding: 20px 32px;
}

.AddStacksOverlay-Count {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    white-space: nowrap;
}

.AddStacksOverlay-ActionButtons {
    display: flex;
    gap: 12px;
}

.AddStacksOverlay-Cancel,
.AddStacksOverlay-Submit {
    border-radius: 10px;
    padding: 12px 20px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.AddStacksOverlay-Cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.AddStacksOverlay-Cancel:hover {
    background-color: var(--text-100);
}

.AddStacksOverlay-Submit {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.AddStacksOverlay-Submit:hover:not(:disabled) {
    background-color: var(--text-800);
}

.AddStacksOverlay-Submit:disabled {
    background-color: var(--text-200);
    color: var(--text-400);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .AddStacksOverlay-Header {
        padding: 24px 20px 12px;
    }
    .AddStacksOverlay-SearchRow {
        margin: 0 20px 12px;
    }
    .AddStacksOverlay-Body {
        padding: 0 20px 20px;
    }
    .AddStacksOverlay-Grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .AddStacksOverlay-Actions {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
    }
    .AddStacksOverlay-ActionButtons {
        justify-content: stretch;
    }
    .AddStacksOverlay-Cancel,
    .AddStacksOverlay-Submit {
        flex: 1;
    }
}

/* AddNetworksOverlay */
.AddNetworksOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.AddNetworksOverlay.is-open {
    display: flex;
}

.AddNetworksOverlay-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.AddNetworksOverlay-Panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: var(--white-bg);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(3, 7, 18, 0.25);
    overflow: hidden;
}

.AddNetworksOverlay-Header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 32px 32px 16px;
}

.AddNetworksOverlay-Title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--text-900);
    margin: 0;
}

.AddNetworksOverlay-Subtitle {
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-500);
    margin: 4px 0 0;
}

.AddNetworksOverlay-Close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--text-100);
    border: none;
    color: var(--text-500);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddNetworksOverlay-Close:hover {
    background-color: var(--text-200);
    color: var(--text-900);
}

.AddNetworksOverlay-Body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 32px 24px;
}

.AddNetworksOverlay-List {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.AddNetworksOverlay-Row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--text-100);
    border-radius: 12px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.AddNetworksOverlay-Row.is-filled {
    border-color: var(--blue-Linear-1000);
    background-color: #ebf2fe;
}

.AddNetworksOverlay-Row--icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--text-50);
    border: 1px solid var(--text-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-600);
    font-size: 1.125rem;
}

.AddNetworksOverlay-Row--field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.AddNetworksOverlay-Row--label {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-800);
}

.AddNetworksOverlay-Row--input {
    width: 100%;
    border: none;
    outline: none;
    background: none;
    font-family: var(--secondary-font);
    font-size: 0.8125rem;
    color: var(--text-900);
    padding: 0;
}

.AddNetworksOverlay-Row--input::placeholder {
    color: var(--text-300);
}

.AddNetworksOverlay-Actions {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--text-100);
    padding: 20px 32px;
}

.AddNetworksOverlay-Cancel,
.AddNetworksOverlay-Submit {
    flex: 1;
    border-radius: 10px;
    padding: 12px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.AddNetworksOverlay-Cancel {
    background: none;
    border: 1px solid var(--text-200);
    color: var(--text-500);
}

.AddNetworksOverlay-Cancel:hover {
    background-color: var(--text-100);
}

.AddNetworksOverlay-Submit {
    border: none;
    background-color: var(--text-900);
    color: #ffffff;
}

.AddNetworksOverlay-Submit:hover:not(:disabled) {
    background-color: var(--text-800);
}

.AddNetworksOverlay-Submit:disabled {
    background-color: var(--text-200);
    color: var(--text-400);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .AddNetworksOverlay-Header {
        padding: 24px 20px 12px;
    }
    .AddNetworksOverlay-Body {
        padding: 0 20px 20px;
    }
    .AddNetworksOverlay-Actions {
        padding: 16px 20px;
    }
}