#quicksoft {
    /* =========================================================
       Foundation: Layout
       ========================================================= */

    --container: 1120px;

    /* =========================================================
       Foundation: Radius
       ========================================================= */

    --radius-sm: 0.75rem;
    --radius-md: 1.25rem;
    --radius-lg: 1.75rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    /* =========================================================
       Foundation: Shadows
       ========================================================= */

    --shadow-soft: 0 18px 50px rgba(52, 77, 87, 0.08);
    --shadow-card: 0 22px 70px rgba(52, 77, 87, 0.1);
    --shadow-hero: 0 32px 90px rgba(20, 39, 48, 0.28);

    /* =========================================================
       Foundation: Colors
       ========================================================= */

    --color-bg: #ffffff;
    --color-surface: #f5f8f7;
    --color-surface-strong: #e9f1ef;
    --color-panel: #344d57;
    --color-panel-dark: #263a42;
    --color-text: #344d57;
    --color-muted: #6c7f87;
    --color-soft: #9badb4;
    --color-border: rgba(52, 77, 87, 0.12);
    --color-accent: #4ca99a;
    --color-accent-dark: #357f74;
    --color-accent-soft: rgba(76, 169, 154, 0.14);

    --color-white: #ffffff;
    --color-black: #101820;

    /* =========================================================
       Foundation: Typography
       ========================================================= */

    --font-heading: Ubuntu, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* =========================================================
       Foundation: Motion
       ========================================================= */

    --transition-fast: 160ms ease;

    /* =========================================================
       Global Elements: Header
       ========================================================= */

    --color-header-bg: rgba(255, 255, 255, 0.92);
    --color-header-border: var(--color-border);
    --color-header-logo: var(--color-text);
    --color-header-logo-hover: var(--color-accent);
    --color-header-link: var(--color-text);
    --color-header-link-hover: var(--color-accent);

    /* =========================================================
       Global Elements: Footer
       ========================================================= */

    --color-footer-bg: var(--color-panel);
    --color-footer-text: var(--color-white);
    --color-footer-muted: rgba(255, 255, 255, 0.78);
    --color-footer-link: var(--color-white);
    --color-footer-link-hover: var(--color-accent);

    /* =========================================================
       Components: Buttons
       ========================================================= */

    --color-button-focus: var(--color-accent-soft);

    --color-button-primary-bg: var(--color-panel);
    --color-button-primary-bg-hover: var(--color-panel-dark);
    --color-button-primary-text: var(--color-white);
    --color-button-primary-text-hover: var(--color-white);

    --color-button-secondary-bg: var(--color-white);
    --color-button-secondary-bg-hover: var(--color-white);
    --color-button-secondary-text: var(--color-panel);
    --color-button-secondary-text-hover: var(--color-panel);
    --color-button-secondary-border: rgba(52, 77, 87, 0.2);
    --color-button-secondary-border-hover: rgba(52, 77, 87, 0.36);

    --color-button-accent-bg: var(--color-accent);
    --color-button-accent-bg-hover: var(--color-accent-dark);
    --color-button-accent-text: var(--color-white);
    --color-button-accent-text-hover: var(--color-white);

    --shadow-button-primary: 0 14px 30px rgba(52, 77, 87, 0.22);
    --shadow-button-secondary-hover: var(--shadow-soft);

    /* =========================================================
       Components: Section Label
       ========================================================= */

    --color-section-label-text: var(--color-accent);
    --color-section-label-line: currentColor;

    /* =========================================================
       Components: Cards
       ========================================================= */

    --card-border: 1px solid var(--color-border);
    --card-radius: var(--radius-lg);
    --card-bg: var(--color-white);
    --card-shadow: var(--shadow-soft);

    /* =========================================================
       Components: Section Heading
       ========================================================= */

    --section-heading-max-width: 760px;
    --section-heading-margin-bottom: 2.25rem;
    --section-heading-title-margin: 0;
    --section-heading-text-margin: 1rem 0 0;
    --section-heading-text-color: var(--color-muted);
    --section-heading-text-size: 1.1rem;
    --section-heading-text-line-height: 1.75;

    /* =========================================================
       Components: Rich Text
       ========================================================= */

    --rich-text-color: var(--color-muted);
    --rich-text-size: 1.05rem;
    --rich-text-line-height: 1.8;
    --rich-text-flow-spacing: 1.2rem;

    --rich-text-paragraph-margin-bottom: 0;

    --rich-text-heading-color: var(--color-text);
    --rich-text-heading-margin-top: 2rem;
    --rich-text-heading-margin-bottom: 0.75rem;

    --rich-text-list-padding-left: 1.4rem;
    --rich-text-list-item-spacing: 0.45rem;

    --rich-text-strong-color: var(--color-text);

    --rich-text-link-color: var(--color-accent);
    --rich-text-link-weight: 800;
    --rich-text-link-decoration-thickness: 0.08em;
    --rich-text-link-underline-offset: 0.18em;

    --rich-text-blockquote-margin: 2rem 0;
    --rich-text-blockquote-padding: 1.25rem 1.5rem;
    --rich-text-blockquote-border-left: 4px solid var(--color-accent);
    --rich-text-blockquote-radius: var(--radius-sm);
    --rich-text-blockquote-bg: var(--color-surface);
    --rich-text-blockquote-color: var(--color-text);

    /* =========================================================
       Pages: Home Hero
       ========================================================= */

    --hero-heading-max-width: 760px;
    --hero-heading-size: clamp(2.25rem, 1.7vw, 3rem);
    --hero-heading-line-height: 1.02;
    --hero-heading-letter-spacing: -0.05em;
    
    
    /* =========================================================
       Blocks: Text Section Block
       ========================================================= */

    --text-section-block-padding: clamp(4rem, 7vw, 6.5rem) 0;
    --text-section-block-bg: var(--color-bg);
    --text-section-block-color: var(--color-text);
    --text-section-block-inner-max-width: 860px;

    --text-section-block-heading-margin: 0 0 1.25rem;
    --text-section-block-heading-color: var(--color-text);
    --text-section-block-heading-size: clamp(2.25rem, 4.5vw, 4.5rem);
    --text-section-block-heading-line-height: 1;
    --text-section-block-heading-letter-spacing: -0.055em;

    --text-section-block-rich-text-max-width: 820px;
    --text-section-block-consecutive-padding-top: 0;

    --text-section-block-panel-rich-text-color: rgba(255, 255, 255, 0.78);
    --text-section-block-panel-rich-text-strong-color: var(--color-white);
    --text-section-block-panel-rich-text-heading-color: var(--color-white);
    --text-section-block-panel-rich-text-link-color: var(--color-accent);
}

/* =========================================================
   Pages: Home Hero
   ========================================================= */

#quicksoft.page-home .content-block[data-variant="hero"]
{
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);
    background:
            radial-gradient(circle at 88% 82%, rgba(255, 255, 255, 0.28) 0 0, transparent 14rem),
            linear-gradient(105deg, #ffffff 0 62%, var(--color-accent) 62% 100%); !important;

    .hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
        gap: clamp(2rem, 6vw, 5rem);
        align-items: center;
    }

    .hero-content {
        max-width: 680px;
    }

    h1 {
        margin: 0;
        max-width: var(--hero-heading-max-width);
        color: var(--color-text);
        font-size: var(--hero-heading-size);
        line-height: var(--hero-heading-line-height);
        letter-spacing: var(--hero-heading-letter-spacing);
    }

    .content-block-media {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-xl);
        background: var(--color-black);
        box-shadow: var(--shadow-hero);
        transform: translateY(1.5rem);

        img {
            width: 100%;
            aspect-ratio: 16 / 10;
            object-fit: cover;
        }
    }

    .content-block-media:after {
        content: "";
        position: absolute;
        inset: 0;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
        pointer-events: none;
    }

    
}