/* ==========================================
   Novice Digital
   File: style-production.css
   Version: 1.1.0
   Production CSS Bundle
   Last Updated: 2026-08-12

   BELANGRIJK:
   Dit bestand bevat alle CSS voor productie.
   De volgorde hieronder moet behouden blijven.
========================================== */

/* ==========================================
   SOURCE: variables.css
========================================== */

:root {

    /* ==========================
       Colors
    ========================== */

    --color-primary: #2563EB;
    --color-secondary: #22C55E;

    --color-background: #0F172A;
    --color-surface: #111827;
    --color-card: #1F2937;

    --color-text: #FFFFFF;
    --color-text-light: #CBD5E1;
    --color-text-muted: #94A3B8;

    --color-border: #374151;

    /* ==========================
       Typography
    ========================== */

    --font-family: "Inter", Arial, sans-serif;

    --font-size-xs: .875rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 3rem;
    --font-size-3xl: 4rem;

    /* ==========================
       Font Weights
    ========================== */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ==========================
       Spacing
    ========================== */

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 5rem;
    --space-xxl: 8rem;

    /* ==========================
       Border Radius
    ========================== */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ==========================
       Shadows
    ========================== */

    --shadow-sm: 0 2px 8px rgba(0,0,0,.15);
    --shadow-md: 0 10px 30px rgba(0,0,0,.18);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.25);

    /* ==========================
       Container
    ========================== */

    --container-width: 1280px;

    /* ==========================
       Transition
    ========================== */

    --transition: all .3s ease;
}

/* ==========================================
   SOURCE: reset.css
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

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

ul,
ol{
    list-style:none;
}

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

button,
input,
textarea,
select{
    font:inherit;
    border:none;
    outline:none;
    background:none;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

/* ==========================================
   SOURCE: typography.css
========================================== */

body{

    font-family:var(--font-family);

    background:var(--color-background);

    color:var(--color-text);

    font-size:var(--font-size-sm);

    line-height:1.6;

}

h1,h2,h3,h4,h5,h6{

    line-height:1.2;

    font-weight:700;

    margin-bottom:var(--space-md);

}

h1{

    font-size:var(--font-size-2xl);

}

h2{

    font-size:var(--font-size-xl);

}

h3{

    font-size:var(--font-size-lg);

}

p{

    color:var(--color-text-light);

    margin-bottom:var(--space-md);

}

/* ==========================================
   SOURCE: layout.css
========================================== */
/* ==========================================
   Container
========================================== */

.container {
    width: min(100% - 2rem, var(--container-width));
    margin-inline: auto;
}

/* ==========================================
   Main
========================================== */

main {
    overflow: hidden;
}

/*
 * Geen globale section-padding.
 *
 * Iedere sectie bepaalt voortaan zelf zijn
 * verticale ruimte in het eigen CSS-bestand.
 *
 * Hiermee voorkomen we dat bijvoorbeeld
 * Hero, Why Us en Process allemaal automatisch
 * 8rem padding krijgen.
 */
 
 /* ==========================================
   SOURCE: utilities.css
========================================== */

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

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

.hidden{
    display:none;
}

.flex{
    display:flex;
}

.grid{
    display:grid;
}

/* ==========================================
   SOURCE: buttons.css
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.5rem;

    padding:16px 32px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

.btn-primary{

    background:var(--color-primary);

    color:white;

}

.btn-primary:hover{

    transform:translateY(-2px);

}

.btn-secondary{

    background:transparent;

    border:1px solid var(--color-border);

    color:white;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.05);

}

/* ==========================================
   SOURCE: header.css
========================================== */

.site-header {
    position: sticky;

    top: 0;
    z-index: 1000;

    background: rgba(15, 23, 42, .94);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(255,255,255,.08);
}


/* ==========================================
   Navbar
========================================== */

.navbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 96px;

    gap: 2rem;
}


/* ==========================================
   Logo
========================================== */

.logo {
    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    gap: .8rem;

    text-decoration: none;
}


/* ==========================================
   Logo Mark
========================================== */

.logo__mark {
    display: block;

    width: 48px;
    height: 48px;

    max-width: 48px;
    max-height: 48px;

    flex: 0 0 48px;

    object-fit: contain;
}


/* ==========================================
   Divider
========================================== */

.logo__divider {
    display: block;

    width: 1px;
    height: 42px;

    background: rgba(255,255,255,.25);
}


/* ==========================================
   Wordmark
========================================== */

.logo__wordmark {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: .25rem;
}

.logo__novice {
    display: block;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .20em;
}

.logo__digital {
    display: block;

    color: #2f6fec;

    font-size: .62rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .40em;
}


/* ==========================================
   Navigation
========================================== */

.nav-menu {
    display: flex;

    align-items: center;

    gap: 2rem;

    margin-left: auto;
}

.nav-menu a {
    position: relative;

    color: var(--color-text-light);

    transition: var(--transition);
}

.nav-menu a:hover {
    color: #ffffff;
}


/* ==========================================
   Mobile Toggle
========================================== */

.nav-toggle {
    display: none;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;

    background: rgba(255,255,255,.04);

    cursor: pointer;

    transition: var(--transition);
}

.nav-toggle__line {
    display: block;

    width: 20px;
    height: 2px;

    border-radius: 999px;

    background: var(--color-text);

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* ==========================================
   Toggle Open State
========================================== */

.nav-toggle.is-open .nav-toggle__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__line:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open .nav-toggle__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================
   SOURCE: browser-frame.css
========================================== */

/**
 * ==========================================
 * Novice Digital
 * File: browser-frame.css
 * Location: assets/css/
 * Version: 1.1.0
 * Last Updated: 2026-08-17
 * ==========================================
 */


/* ==========================================
   Browser Frame
========================================== */


.browser-frame{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

    border:1px solid rgba(255,255,255,.08);

}


.browser-frame__top{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:14px 18px;

    background:#F5F5F5;

    border-bottom:1px solid #E5E7EB;

}


.browser-frame__dots{

    display:flex;

    gap:.5rem;

}


.browser-frame__dots span{

    width:12px;

    height:12px;

    border-radius:50%;

}


.browser-frame__dots span:nth-child(1){

    background:#FF5F57;

}


.browser-frame__dots span:nth-child(2){

    background:#FEBC2E;

}


.browser-frame__dots span:nth-child(3){

    background:#28C840;

}


.browser-frame__address{

    flex:1;

    text-align:center;

    color:#6B7280;

    font-size:.9rem;

}


.browser-frame__content{

    min-height:520px;

    background:#ffffff;

}


/* ==========================================
   Browser Preview
========================================== */

.preview{

    min-height:520px;

    padding:2rem;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(34,197,94,.08),
            transparent 32%
        ),
        #ffffff;

}


/* ==========================================
   Preview Header
========================================== */

.preview__header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1.5rem;

    padding-bottom:1.6rem;

    margin-bottom:2.4rem;

    border-bottom:1px solid #F1F5F9;

}


.preview__brand{

    display:flex;

    align-items:center;

    gap:.24rem;

    font-size:.92rem;

    font-weight:800;

    letter-spacing:-.02em;

    white-space:nowrap;

}


.preview__brand-main{

    color:#111827;

}


.preview__brand-accent{

    color:var(--color-primary);

}


.preview__nav{

    display:flex;

    align-items:center;

    gap:1.15rem;

    color:#6B7280;

    font-size:.76rem;

    font-weight:500;

}


.preview__nav span:last-child{

    padding:.45rem .75rem;

    border-radius:8px;

    background:#111827;

    color:#ffffff;

}


/* ==========================================
   Preview Hero
========================================== */

.preview__hero{

    max-width:470px;

}


.preview__eyebrow{

    display:inline-flex;

    align-items:center;

    margin-bottom:1rem;

    color:#22C55E;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.preview__eyebrow::before{

    content:"";

    width:18px;

    height:2px;

    margin-right:.55rem;

    border-radius:999px;

    background:#22C55E;

}


.preview__hero h3{

    max-width:430px;

    margin:0 0 1rem;

    color:#111827;

    font-size:1.75rem;

    line-height:1.15;

    letter-spacing:-.04em;

}


.preview__hero p{

    max-width:390px;

    margin:0 0 1.5rem;

    color:#6B7280;

    font-size:.9rem;

    line-height:1.65;

}


/* ==========================================
   Preview Buttons
========================================== */

.preview__actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:.75rem;

    margin-bottom:2.5rem;

}


.preview__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.7rem 1.05rem;

    border-radius:9px;

    font-size:.75rem;

    font-weight:700;

    line-height:1;

}


.preview__button--primary{

    background:var(--color-primary);

    color:#ffffff;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}


.preview__button--secondary{

    background:#ffffff;

    color:#111827;

    border:1px solid #E5E7EB;

}


/* ==========================================
   Preview Benefits
========================================== */

.preview__benefits{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:.8rem;

}


.preview__benefit{

    display:flex;

    flex-direction:column;

    min-width:0;

    padding:1rem;

    border:1px solid #E5E7EB;

    border-radius:12px;

    background:rgba(255,255,255,.9);

    box-shadow:0 8px 24px rgba(15,23,42,.04);

}


.preview__benefit strong{

    margin-bottom:.25rem;

    color:#111827;

    font-size:.8rem;

    font-weight:700;

}


.preview__benefit span{

    color:#6B7280;

    font-size:.68rem;

    line-height:1.4;

}


/* ==========================================
   Responsive
========================================== */

@media (max-width:700px){

    .browser-frame__content{

        min-height:auto;

    }


    .preview{

        min-height:auto;

        padding:1.4rem;

    }


    .preview__header{

        margin-bottom:1.8rem;

    }


    .preview__nav{

        gap:.7rem;

        font-size:.68rem;

    }


    .preview__nav span:nth-child(2){

        display:none;

    }


    .preview__hero h3{

        font-size:1.45rem;

    }


    .preview__benefits{

        grid-template-columns:1fr;

    }


    .preview__benefit:nth-child(3){

        display:none;

    }

}


@media (max-width:480px){

    .browser-frame__top{

        padding:11px 13px;

    }


    .browser-frame__dots{

        gap:.35rem;

    }


    .browser-frame__dots span{

        width:9px;

        height:9px;

    }


    .browser-frame__address{

        font-size:.72rem;

    }


    .preview{

        padding:1.1rem;

    }


    .preview__brand{

        font-size:.9rem;

    }


    .preview__nav span:not(:last-child){

        display:none;

    }


    .preview__hero h3{

        font-size:1.3rem;

    }


    .preview__hero p{

        font-size:.8rem;

    }


    .preview__actions{

        margin-bottom:1.8rem;

    }


    .preview__button{

        padding:.65rem .85rem;

        font-size:.7rem;

    }

}

/* ==========================================
   SOURCE: hero.css
========================================== */

.hero {
    position: relative;
    overflow: hidden;

    padding-top: 3rem;
    padding-bottom: 4rem;
}

/* ==========================================
   Hero Layout
========================================== */

.hero .container {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;

    /*
     * Belangrijk:
     * voorheen stond hier align-items:center.
     *
     * Daardoor werd de tekst verticaal gecentreerd
     * ten opzichte van het hoge browser-frame.
     *
     * Nu beginnen beide kolommen bovenaan gelijk.
     */
    align-items: start;
}

/* ==========================================
   Hero Content
========================================== */

.hero__content {
    padding-top: 1rem;
}

.hero__eyebrow {
    display: inline-block;

    margin-bottom: var(--space-md);

    color: var(--color-secondary);

    font-size: .9rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero h1 {
    max-width: 700px;
}

.hero p {
    max-width: 650px;

    margin-bottom: 2rem;

    font-size: 1.2rem;
}

/* ==========================================
   Hero Buttons
========================================== */

.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ==========================================
   Hero Trust Points
========================================== */

.hero__trust {
    display: grid;
    grid-template-columns: repeat(2, max-content);

    gap: 1rem 2rem;

    margin-top: 2rem;

    color: var(--color-text-muted);

    font-size: .95rem;
}

/* ==========================================
   Hero Visual
========================================== */

.hero__visual {
    width: 100%;
}

/* ==========================================
   Legacy Placeholder
   Kan later verwijderd worden zodra we hem
   nergens meer gebruiken.
========================================== */

.hero-placeholder {
    display: flex;

    justify-content: center;
    align-items: center;

    min-height: 500px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    background: var(--color-card);

    color: var(--color-text-muted);

    font-size: 1.3rem;
}

/* ==========================================
   Background Glow
========================================== */

.hero::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -180px;
    right: -200px;

    z-index: 0;

    background: rgba(37, 99, 235, .18);

    filter: blur(140px);

    pointer-events: none;
}

/* ==========================================
   SOURCE: why-us.css
========================================== */

.why-us{
    padding: 3rem 0;
}

.section-heading{

    max-width: 760px;

    margin: 0 auto 4rem;

    text-align: center;

}

.section-eyebrow{

    display: inline-block;

    margin-bottom: 1rem;

    font-size: .90rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--color-secondary);

}

.section-heading h2{

    margin-bottom: 1.5rem;

}

.section-heading p{

    max-width: 650px;

    margin: 0 auto;

    color: var(--color-text-muted);

}

/* ==========================================
   Feature Grid
========================================== */

.feature-grid{

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 2rem;

}

.feature-card{

    padding: 2rem;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    transition: .3s;

}

.feature-card:hover{

    transform: translateY(-6px);

    box-shadow: var(--shadow-md);

}

.feature-icon{

    font-size: 2rem;

    margin-bottom: 1rem;

}

.feature-card h3{

    margin-bottom: 1rem;

}

.feature-card p{

    color: var(--color-text-muted);

}

/* ==========================================
   SOURCE: process.css
========================================== */

.process{
    padding: 3rem 0;
    position: relative;
}

.process-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;

    margin-top:4rem;

}

.process-item{

    position:relative;

    padding:2rem;

    background:var(--color-card);

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    transition:all .3s ease;

    overflow:hidden;

}

.process-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

    border-color:var(--color-primary);

}

.process-number{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:2rem;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    font-size:1.2rem;
    font-weight:700;

}

.process-item h3{

    margin-bottom:1rem;

}

.process-item p{

    margin:0;

    color:var(--color-text-muted);

    line-height:1.7;

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:992px){

    .process-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .process{

        padding:4rem 0;

    }

    .process-grid{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

    .process-item{

        padding:1.75rem;

    }

}

/* ==========================================
   SOURCE: portfolio.css
========================================== */

/* ==========================================
   Portfolio Preview
========================================== */

.portfolio-preview {
    padding: 5rem 0;
}

/* ==========================================
   Portfolio List
========================================== */

.portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 5rem;

    margin-top: 4rem;
}

/* ==========================================
   Portfolio Item
========================================== */

.portfolio-item {
    display: grid;
    grid-template-columns: 1.2fr .8fr;

    gap: 4rem;

    align-items: center;
}

.portfolio-item--reverse .portfolio-item__visual {
    order: 2;
}

.portfolio-item--reverse .portfolio-item__content {
    order: 1;
}

/* ==========================================
   Portfolio Visual
========================================== */

.portfolio-item__visual {
    position: relative;

    min-height: 360px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2.5rem;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background: var(--color-card);
}

.portfolio-item__visual::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -80px;
    right: -70px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .18);

    filter: blur(70px);

    pointer-events: none;
}

.portfolio-item__visual--camping::before {
    background: rgba(34, 197, 94, .16);
}

.portfolio-item__visual--tires::before {
    background: rgba(37, 99, 235, .14);
}

/* ==========================================
   Browser Mockup
========================================== */

.portfolio-browser {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 620px;

    overflow: hidden;

    border-radius: 18px;

    background: #ffffff;

    box-shadow: var(--shadow-lg);
}

.portfolio-browser__top {
    display: flex;
    align-items: center;

    gap: .45rem;

    padding: .85rem 1rem;

    background: #f3f4f6;

    border-bottom: 1px solid #e5e7eb;
}

.portfolio-browser__top span {
    width: 10px;
    height: 10px;

    border-radius: 50%;
}

.portfolio-browser__top span:nth-child(1) {
    background: #ff5f57;
}

.portfolio-browser__top span:nth-child(2) {
    background: #febc2e;
}

.portfolio-browser__top span:nth-child(3) {
    background: #28c840;
}

.portfolio-browser__screen {
    min-height: 260px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2rem;

    color: #111827;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    font-size: 1rem;
    font-weight: 600;
}

/* ==========================================
   Portfolio Content
========================================== */

.portfolio-item__content {
    max-width: 520px;
}

.portfolio-item__type {
    display: inline-block;

    margin-bottom: 1rem;

    color: var(--color-secondary);

    font-size: .85rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.portfolio-item__content h3 {
    margin-bottom: 1rem;

    font-size: 2rem;
}

.portfolio-item__content p {
    margin-bottom: 1.5rem;

    color: var(--color-text-muted);

    line-height: 1.8;
}

/* ==========================================
   Tags
========================================== */

.portfolio-item__tags {
    display: flex;
    flex-wrap: wrap;

    gap: .75rem;

    margin-bottom: 1.75rem;
}

.portfolio-item__tags span {
    padding: .55rem .85rem;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    color: var(--color-text-light);

    background: rgba(255, 255, 255, .025);

    font-size: .8rem;
}

/* ==========================================
   Project Link
========================================== */

.portfolio-link {
    display: inline-flex;
    align-items: center;

    color: var(--color-text);

    font-weight: 600;

    transition: var(--transition);
}

.portfolio-link:hover {
    color: var(--color-secondary);

    transform: translateX(4px);
}

/* ==========================================
   Portfolio Footer
========================================== */

.portfolio-preview__footer {
    display: flex;
    justify-content: center;

    margin-top: 4rem;
}

/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .portfolio-item {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .portfolio-item--reverse .portfolio-item__visual,
    .portfolio-item--reverse .portfolio-item__content {
        order: initial;
    }

    .portfolio-item__content {
        max-width: none;
    }

}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .portfolio-preview {
        padding: 4rem 0;
    }

    .portfolio-list {
        gap: 4rem;

        margin-top: 3rem;
    }

    .portfolio-item__visual {
        min-height: 280px;

        padding: 1.25rem;
    }

    .portfolio-browser__screen {
        min-height: 200px;
    }

    .portfolio-item__content h3 {
        font-size: 1.65rem;
    }

}

/* ==========================================
   SOURCE: cta.css
========================================== */

/* ==========================================
   Novice Digital
   File: cta.css
   Version: 1.2.0
   Last Updated: 2026-08-11
========================================== */


/* ==========================================
   CTA Section
========================================== */

.cta {
    padding: 5rem 0;
}


/* ==========================================
   CTA Box
========================================== */

.cta-box {
    position: relative;
    overflow: hidden;

    padding: 5rem 5rem 4.5rem;

    border-radius: 28px;

    background: linear-gradient(
        135deg,
        #2563EB 0%,
        #4F46E5 100%
    );

    text-align: center;
}


/* ==========================================
   CTA Decorative Glow
========================================== */

.cta-box::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -120px;
    top: -150px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .08);

    pointer-events: none;
}

.cta-box > * {
    position: relative;
    z-index: 1;
}


/* ==========================================
   CTA Content
========================================== */

.cta-box .section-eyebrow {
    color: #A7F3D0;
}

.cta-box h2 {
    max-width: 700px;

    margin: 1rem auto 1.5rem;

    color: #fff;
}

.cta-box p {
    max-width: 720px;

    margin: 0 auto 2.5rem;

    color: rgba(255, 255, 255, .88);

    font-size: 1.15rem;
}


/* ==========================================
   CTA Buttons
========================================== */

.cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 2rem;
}


/* ==========================================
   Primary CTA Button
========================================== */

.cta-buttons .btn-primary {
    position: relative;

    background: linear-gradient(
        135deg,
        #22C55E 0%,
        #16A34A 100%
    );

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, .18);

    box-shadow:
        0 10px 30px rgba(34, 197, 94, .25),
        0 0 0 1px rgba(255, 255, 255, .04);

    font-weight: 700;
}

.cta-buttons .btn-primary:hover {
    transform: translateY(-3px);

    background: linear-gradient(
        135deg,
        #2BD66A 0%,
        #22C55E 100%
    );

    box-shadow:
        0 14px 36px rgba(34, 197, 94, .35),
        0 0 0 1px rgba(255, 255, 255, .08);
}

.cta-buttons .btn-primary:active {
    transform: translateY(-1px);
}


/* ==========================================
   Secondary CTA Button
========================================== */

.cta-buttons .btn-secondary {
    border-color: rgba(255, 255, 255, .65);

    color: #fff;
}

.cta-buttons .btn-secondary:hover {
    background: #fff;

    color: #1E3A8A;
}


/* ==========================================
   CTA Benefits
========================================== */

.cta-benefits {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 1rem 2rem;

    margin-top: .5rem;

    color: #fff;

    font-size: .95rem;
    line-height: 1.5;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .cta-box {
        padding: 4rem 3rem;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .cta {
        padding: 4rem 0;
    }

    .cta-box {
        padding: 3.5rem 1.5rem;

        border-radius: 22px;
    }

    .cta-box p {
        font-size: 1rem;
    }

    .cta-benefits {
        flex-direction: column;

        gap: .75rem;
    }

}

/* ==========================================
   SOURCE: diensten.css
========================================== */

/* ==========================================
   Services Hero
========================================== */

.services-hero {
    position: relative;

    overflow: hidden;

    padding: 4.5rem 0 5rem;
}

.services-hero::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -180px;
    right: -160px;

    border-radius: 50%;

    background: rgba(79, 70, 229, .16);

    filter: blur(120px);

    pointer-events: none;
}

.services-hero__layout {
    position: relative;

    z-index: 1;

    display: grid;
    grid-template-columns: 1fr .85fr;

    gap: 5rem;

    align-items: center;
}

.services-hero__content {
    max-width: 760px;
}

.services-hero h1 {
    max-width: 760px;

    margin-bottom: 1.5rem;
}

.services-hero p {
    max-width: 700px;

    margin-bottom: 2rem;

    color: var(--color-text-muted);

    font-size: 1.2rem;
    line-height: 1.8;
}

.services-hero__buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;
}


/* ==========================================
   Growth Stack
========================================== */

.services-hero__visual {
    width: 100%;
}

.growth-stack {
    position: relative;

    padding: 1.25rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(31, 41, 55, .96),
            rgba(17, 24, 39, .96)
        );

    box-shadow: var(--shadow-lg);
}

.growth-stack__header {
    display: flex;
    align-items: center;

    gap: .75rem;

    padding: .65rem .75rem 1.25rem;

    color: var(--color-text-muted);

    font-size: .8rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.growth-stack__status {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--color-secondary);

    box-shadow: 0 0 12px rgba(34, 197, 94, .7);
}

.growth-stack__flow {
    padding: 1rem;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-lg);

    background: rgba(15, 23, 42, .7);
}

.growth-stack__item {
    display: flex;
    align-items: center;

    gap: 1rem;

    padding: 1rem 1.15rem;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, .025);
}

.growth-stack__number {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(79, 70, 229, .18);

    color: #a5b4fc;

    font-size: .8rem;
    font-weight: 700;
}

.growth-stack__item span {
    display: block;

    margin-bottom: .2rem;

    color: var(--color-text-muted);

    font-size: .72rem;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.growth-stack__item strong {
    display: block;

    color: var(--color-text);

    font-size: 1rem;
}

.growth-stack__connector {
    width: 1px;
    height: 18px;

    margin-left: 2.45rem;

    background: linear-gradient(
        to bottom,
        var(--color-primary),
        rgba(79, 70, 229, .15)
    );
}

.growth-stack__result {
    margin-top: 1rem;

    padding: 1.35rem;

    border: 1px solid rgba(34, 197, 94, .25);
    border-radius: var(--radius-md);

    background:
        linear-gradient(
            135deg,
            rgba(34, 197, 94, .08),
            rgba(79, 70, 229, .12)
        );
}

.growth-stack__result span {
    display: block;

    margin-bottom: .35rem;

    color: var(--color-secondary);

    font-size: .75rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.growth-stack__result strong {
    display: block;

    margin-bottom: .3rem;

    color: var(--color-text);

    font-size: 1.2rem;
}

.growth-stack__result p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .85rem;
    line-height: 1.5;
}


/* ==========================================
   Services Overview
========================================== */

.services-overview {
    padding: 5rem 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 2rem;

    margin-top: 4rem;
}

.service-card {
    padding: 2.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    background: var(--color-card);

    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(79, 70, 229, .65);

    box-shadow: var(--shadow-md);
}

.service-card__icon {
    margin-bottom: 1.25rem;

    font-size: 2rem;
}

.service-card h3 {
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--color-text-muted);

    line-height: 1.7;
}

.service-card__list {
    display: flex;
    flex-direction: column;

    gap: .75rem;

    margin-top: 1.5rem;

    color: var(--color-text-light);

    font-size: .95rem;
}

.service-card__list li {
    display: flex;
    align-items: flex-start;

    gap: .6rem;
}

.service-card__list li > span {
    color: var(--color-secondary);
}


/* ==========================================
   Pricing
========================================== */

.pricing-section {
    padding: 5rem 0;
}

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

    gap: 2rem;

    margin-top: 4rem;

    align-items: stretch;
}

.pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 2.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background: var(--color-card);
}

.pricing-card--featured {
    border-color: var(--color-primary);

    box-shadow: var(--shadow-md);

    transform: translateY(-10px);
}

.pricing-card__badge {
    position: absolute;

    top: 1.25rem;
    right: 1.25rem;

    padding: .45rem .75rem;

    border-radius: 999px;

    background: var(--color-primary);

    color: #fff;

    font-size: .75rem;
    font-weight: 700;
}

.pricing-card__label {
    display: inline-block;

    margin-bottom: 1rem;

    color: var(--color-secondary);

    font-size: .85rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pricing-card__header h3 {
    min-height: 74px;

    margin-bottom: 1.5rem;
}

.pricing-card__price {
    display: flex;
    flex-direction: column;

    margin-bottom: 2rem;
}

.pricing-card__price span {
    color: var(--color-text-muted);

    font-size: .85rem;
}

.pricing-card__price strong {
    color: var(--color-text);

    font-size: 2.25rem;
}

.pricing-card__features {
    display: flex;
    flex-direction: column;

    gap: .85rem;

    margin-bottom: 2.5rem;

    color: var(--color-text-light);
}

.pricing-card__features li {
    display: flex;
    align-items: flex-start;

    gap: .6rem;
}

.pricing-card__features li > span {
    color: var(--color-secondary);
}

.pricing-card .btn {
    margin-top: auto;
}


/* ==========================================
   Pricing Notes
========================================== */

.pricing-notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: .75rem 2rem;

    margin-top: 2.5rem;

    padding: 1.25rem 1.5rem;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-lg);

    background: rgba(255, 255, 255, .025);

    text-align: center;
}

.pricing-notes p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .9rem;
}

.pricing-notes strong {
    color: var(--color-text);
}


/* ==========================================
   Shop
========================================== */

.shop-section {
    padding: 1rem 0 5rem;
}

.shop-banner {
    display: grid;
    grid-template-columns: 1.35fr .65fr;

    gap: 4rem;

    align-items: center;

    padding: 3.5rem;

    border: 1px solid rgba(79, 70, 229, .35);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            rgba(79, 70, 229, .12),
            rgba(34, 197, 94, .05)
        );

    box-shadow: var(--shadow-md);
}

.shop-banner__content {
    max-width: 760px;
}

.shop-banner h2 {
    margin-bottom: 1rem;
}

.shop-banner__lead {
    margin-bottom: 1rem;

    color: var(--color-text);

    font-size: 1.15rem;
    font-weight: 600;
}

.shop-banner__content > p {
    color: var(--color-text-muted);

    line-height: 1.8;
}

.shop-banner__note {
    display: flex;
    align-items: flex-start;

    gap: .75rem;

    margin-top: 1.5rem;

    padding: 1rem 1.15rem;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-md);

    background: rgba(15, 23, 42, .35);
}

.shop-banner__note > span {
    flex-shrink: 0;

    color: var(--color-secondary);

    font-weight: 700;
}

.shop-banner__note p {
    margin: 0;

    color: var(--color-text-light);

    font-size: .9rem;
    line-height: 1.6;
}

.shop-banner__side {
    padding: 2rem;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-lg);

    background: rgba(15, 23, 42, .55);
}

.shop-banner__label {
    display: block;

    margin-bottom: .35rem;

    color: var(--color-text-muted);

    font-size: .8rem;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.shop-banner__price {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-text);

    font-size: 2.5rem;
    line-height: 1;
}

.shop-banner__side p {
    margin-bottom: 1.5rem;

    color: var(--color-text-muted);

    font-size: .9rem;
    line-height: 1.6;
}

.shop-banner__side .btn {
    width: 100%;
}


/* ==========================================
   Maintenance
========================================== */

.maintenance-section {
    padding: 5rem 0;
}

.maintenance-plans {
    display: grid;

    gap: 1rem;
}

.maintenance-plans--pricing {
    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    margin-top: 4rem;
}

.maintenance-plan {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 2rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    background: var(--color-card);
}

.maintenance-plan--featured {
    border-color: var(--color-primary);

    box-shadow: var(--shadow-md);
}

.maintenance-plan__label {
    display: block;

    margin-bottom: .75rem;

    color: var(--color-secondary);

    font-size: .85rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.maintenance-plan__price {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-text);

    font-size: 1.75rem;
}

.maintenance-plan p {
    margin-bottom: 1.5rem;

    color: var(--color-text-muted);

    font-size: .95rem;
    line-height: 1.7;
}

.maintenance-plan__features {
    display: flex;
    flex-direction: column;

    gap: .75rem;

    margin-top: auto;

    color: var(--color-text-light);

    font-size: .9rem;
}

.maintenance-plan__features li {
    display: flex;
    align-items: flex-start;

    gap: .6rem;
}

.maintenance-plan__features li > span {
    color: var(--color-secondary);
}

.maintenance-plan .btn {
    width: 100%;

    margin-top: 2rem;
}


/* ==========================================
   Maintenance Notes
========================================== */

.maintenance-notes {
    margin-top: 2rem;

    padding: 1.25rem 1.5rem;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-lg);

    background: rgba(255, 255, 255, .025);
}

.maintenance-notes p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .88rem;
    line-height: 1.6;
}

.maintenance-notes p + p {
    margin-top: .5rem;
}


/* ==========================================
   Optimize
========================================== */

.optimize-section {
    padding: 1rem 0 5rem;
}

.optimize-box {
    display: grid;
    grid-template-columns: 1.3fr .7fr;

    gap: 4rem;

    align-items: center;

    padding: 3.5rem;

    border: 1px solid rgba(34, 197, 94, .25);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            rgba(34, 197, 94, .07),
            rgba(79, 70, 229, .09)
        );

    box-shadow: var(--shadow-md);
}

.optimize-box__content {
    max-width: 760px;
}

.optimize-box h2 {
    margin-bottom: 1rem;
}

.optimize-box__lead {
    color: var(--color-text);

    font-size: 1.15rem;
    font-weight: 600;
}

.optimize-box__content > p {
    color: var(--color-text-muted);

    line-height: 1.8;
}

.optimize-box__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: .85rem 1.5rem;

    margin-top: 2rem;

    color: var(--color-text-light);

    font-size: .92rem;
}

.optimize-box__features li {
    display: flex;
    align-items: flex-start;

    gap: .6rem;
}

.optimize-box__features li > span {
    color: var(--color-secondary);
}

.optimize-box__side {
    padding: 2rem;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-lg);

    background: rgba(15, 23, 42, .55);
}

.optimize-box__label {
    display: block;

    margin-bottom: .35rem;

    color: var(--color-text-muted);

    font-size: .8rem;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.optimize-box__price {
    display: block;

    margin-bottom: .7rem;

    color: var(--color-text);

    font-size: 2.35rem;
    line-height: 1;
}

.optimize-box__hours {
    display: block;

    margin-bottom: 1.25rem;

    color: var(--color-secondary);

    font-size: .9rem;
    font-weight: 600;
}

.optimize-box__side p {
    margin-bottom: 1.5rem;

    color: var(--color-text-muted);

    font-size: .9rem;
    line-height: 1.6;
}

.optimize-box__side .btn {
    width: 100%;
}


/* ==========================================
   Transparency
========================================== */

.services-transparency {
    padding: 1rem 0 5rem;
}

.services-transparency__box {
    max-width: 960px;

    margin: 0 auto;

    padding: 2.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background: var(--color-card);

    text-align: center;
}

.services-transparency__box h2 {
    margin-bottom: 1.25rem;
}

.services-transparency__box p {
    max-width: 800px;

    margin: 0 auto;

    color: var(--color-text-muted);

    line-height: 1.8;
}

.services-transparency__box p + p {
    margin-top: 1rem;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .services-hero__layout {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .services-hero__visual {
        max-width: 680px;
    }

    .pricing-grid,
    .maintenance-plans--pricing {
        grid-template-columns: 1fr;
    }

    .pricing-card--featured {
        transform: none;
    }

    .shop-banner,
    .optimize-box {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .shop-banner__side,
    .optimize-box__side {
        max-width: 520px;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .services-hero,
    .services-overview,
    .pricing-section,
    .maintenance-section,
    .shop-section,
    .optimize-section,
    .services-transparency {
        padding: 4rem 0;
    }

    .services-hero__layout {
        gap: 2.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;

        margin-top: 3rem;
    }

    .service-card,
    .pricing-card {
        padding: 2rem;
    }

    .pricing-card__header h3 {
        min-height: 0;
    }

    .growth-stack {
        padding: .85rem;
    }

    .growth-stack__flow {
        padding: .75rem;
    }

    .pricing-notes {
        flex-direction: column;

        align-items: center;
    }

    .shop-banner,
    .optimize-box {
        padding: 2rem;
    }

    .maintenance-plans--pricing {
        margin-top: 3rem;
    }

    .optimize-box__features {
        grid-template-columns: 1fr;
    }

    .services-transparency__box {
        padding: 2rem;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .services-hero__buttons {
        flex-direction: column;
    }

    .services-hero__buttons .btn {
        width: 100%;
    }

    .growth-stack__item {
        padding: .9rem;
    }

    .growth-stack__number {
        width: 38px;
        height: 38px;
    }

    .shop-banner,
    .optimize-box {
        padding: 1.5rem;
    }

    .shop-banner__side,
    .optimize-box__side {
        padding: 1.5rem;
    }

    .shop-banner__price {
        font-size: 2.15rem;
    }

    .optimize-box__price {
        font-size: 2rem;
    }

    .maintenance-plan {
        padding: 1.75rem;
    }

    .services-transparency__box {
        padding: 1.5rem;
    }

}
/* ==========================================
   SOURCE: portfolio-page.css
========================================== */

.portfolio-page-hero {
    position: relative;

    overflow: hidden;

    padding: 4.5rem 0 5rem;
}

.portfolio-page-hero::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -220px;
    right: -200px;

    border-radius: 50%;

    background: rgba(79, 70, 229, .17);

    filter: blur(130px);

    pointer-events: none;
}

.portfolio-page-hero__layout {
    position: relative;

    z-index: 1;

    display: grid;
    grid-template-columns: 1fr .85fr;

    gap: 5rem;

    align-items: center;
}

.portfolio-page-hero__content {
    max-width: 760px;
}

.portfolio-page-hero h1 {
    margin-bottom: 1.5rem;
}

.portfolio-page-hero__content > p {
    max-width: 700px;

    margin-bottom: 2.5rem;

    color: var(--color-text-muted);

    font-size: 1.2rem;
    line-height: 1.8;
}


/* ==========================================
   Hero Stats
========================================== */

.portfolio-page-hero__stats {
    display: flex;
    flex-wrap: wrap;

    gap: 2.5rem;
}

.portfolio-page-hero__stats div {
    display: flex;
    flex-direction: column;

    gap: .25rem;
}

.portfolio-page-hero__stats strong {
    color: var(--color-text);

    font-size: 1.35rem;
}

.portfolio-page-hero__stats span {
    color: var(--color-text-muted);

    font-size: .8rem;
}


/* ==========================================
   Showcase Stack
========================================== */

.portfolio-page-hero__visual {
    display: flex;
    justify-content: center;
}

.portfolio-showcase-stack {
    position: relative;

    width: 100%;
    max-width: 520px;

    min-height: 360px;
}

.portfolio-showcase-card {
    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    width: 78%;
    height: 250px;

    padding: 2rem;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-lg);
}

.portfolio-showcase-card--back {
    top: 0;
    right: 0;

    background: rgba(34, 197, 94, .14);

    transform: rotate(7deg);
}

.portfolio-showcase-card--middle {
    top: 45px;
    left: 5%;

    background: rgba(37, 99, 235, .18);

    transform: rotate(-5deg);
}

.portfolio-showcase-card--front {
    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    background:
        linear-gradient(
            135deg,
            #312e81,
            #4f46e5
        );
}

.portfolio-showcase-card > span {
    color: var(--color-text-muted);

    font-size: .85rem;
}

.portfolio-showcase-card__label {
    margin-bottom: .75rem;

    color: #a7f3d0 !important;

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.portfolio-showcase-card strong {
    color: #fff;

    font-size: 1.7rem;
    line-height: 1.25;
}


/* ==========================================
   Project Section
========================================== */

.portfolio-projects {
    padding: 5rem 0;
}

.portfolio-project-list {
    display: flex;
    flex-direction: column;

    gap: 7rem;

    margin-top: 5rem;
}


/* ==========================================
   Project
========================================== */

.portfolio-project {
    display: grid;
    grid-template-columns: 1.15fr .85fr;

    gap: 5rem;

    align-items: center;
}

.portfolio-project--reverse .portfolio-project__visual {
    order: 2;
}

.portfolio-project--reverse .portfolio-project__content {
    order: 1;
}


/* ==========================================
   Project Visual
========================================== */

.portfolio-project__visual {
    padding: 2.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background: var(--color-card);
}

.portfolio-project-browser {
    overflow: hidden;

    border-radius: 18px;

    background: #fff;

    box-shadow: var(--shadow-lg);
}

.portfolio-project-browser__top {
    display: grid;
    grid-template-columns: auto 1fr auto;

    align-items: center;

    padding: .8rem 1rem;

    border-bottom: 1px solid #e5e7eb;

    background: #f3f4f6;
}

.portfolio-project-browser__dots {
    display: flex;

    gap: .4rem;
}

.portfolio-project-browser__dots span {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.portfolio-project-browser__dots span:nth-child(1) {
    background: #ff5f57;
}

.portfolio-project-browser__dots span:nth-child(2) {
    background: #febc2e;
}

.portfolio-project-browser__dots span:nth-child(3) {
    background: #28c840;
}

.portfolio-project-browser__url {
    justify-self: center;

    color: #6b7280;

    font-size: .72rem;
}

.portfolio-project-browser__screen {
    min-height: 330px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 3rem;

    color: #111827;
}

/* ==========================================
   Live Website Preview
========================================== */

.portfolio-project-browser__screen--live {
    position: relative;

    display: block;

    height: 330px;
    min-height: 330px;

    padding: 0;

    overflow: hidden;

    background: #ffffff;
}

.portfolio-project-browser__screen--live iframe {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: 250%;
    height: 825px;

    margin: 0;
    padding: 0;

    border: 0;

    background: #ffffff;

    transform: scale(.4);
    transform-origin: top left;

    pointer-events: none;
}


.portfolio-project-browser__screen--piano {
    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #e2e8f0
        );
}

.portfolio-project-browser__screen--camping {
    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #d1fae5
        );
}

.portfolio-project-browser__screen--tires {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #111827,
            #334155
        );
}

.portfolio-project-browser__category {
    margin-bottom: .75rem;

    color: #4f46e5;

    font-size: .75rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.portfolio-project-browser__screen--tires
.portfolio-project-browser__category {
    color: #86efac;
}

.portfolio-project-browser__screen strong {
    max-width: 420px;

    margin-bottom: 1.5rem;

    font-size: 2rem;
    line-height: 1.15;
}

.portfolio-project-browser__button {
    align-self: flex-start;

    padding: .65rem 1rem;

    border-radius: 8px;

    background: #4f46e5;

    color: #fff;

    font-size: .75rem;
    font-weight: 600;
}


/* ==========================================
   Project Content
========================================== */

.portfolio-project__content {
    max-width: 520px;
}

.portfolio-project__type {
    display: inline-block;

    margin-bottom: .75rem;

    color: var(--color-secondary);

    font-size: .8rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.portfolio-project__content h3 {
    margin-bottom: 1.25rem;

    font-size: var(--font-size-xl);
}

.portfolio-project__content > p {
    margin-bottom: 2rem;

    color: var(--color-text-muted);

    line-height: 1.8;
}


/* ==========================================
   Project Details
========================================== */

.portfolio-project__details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

    margin-bottom: 1.5rem;
}

.portfolio-project__details div {
    padding: 1rem;

    border-left: 2px solid var(--color-primary);

    background: rgba(255, 255, 255, .025);
}

.portfolio-project__details span {
    display: block;

    margin-bottom: .3rem;

    color: var(--color-text-muted);

    font-size: .7rem;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.portfolio-project__details strong {
    color: var(--color-text);

    font-size: .9rem;
}


/* ==========================================
   Tags
========================================== */

.portfolio-project__tags {
    display: flex;
    flex-wrap: wrap;

    gap: .65rem;

    margin-bottom: 2rem;
}

.portfolio-project__tags span {
    padding: .45rem .75rem;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    color: var(--color-text-light);

    font-size: .75rem;
}


/* ==========================================
   More Work
========================================== */

.portfolio-more {
    padding: 4rem 0 5rem;
}

.portfolio-more__box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 3rem;

    padding: 3rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background: var(--color-card);
}

.portfolio-more__box > div {
    max-width: 720px;
}

.portfolio-more__box h2 {
    margin-bottom: 1rem;
}

.portfolio-more__box p {
    margin: 0;

    color: var(--color-text-muted);
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .portfolio-page-hero__layout,
    .portfolio-project {
        grid-template-columns: 1fr;
    }

    .portfolio-page-hero__visual {
        justify-content: flex-start;
    }

    .portfolio-project--reverse .portfolio-project__visual,
    .portfolio-project--reverse .portfolio-project__content {
        order: initial;
    }

    .portfolio-project__content {
        max-width: none;
    }

    .portfolio-more__box {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .portfolio-page-hero,
    .portfolio-projects {
        padding: 4rem 0;
    }

    .portfolio-page-hero__stats {
        gap: 1.5rem;
    }

    .portfolio-showcase-stack {
        min-height: 300px;
    }

    .portfolio-showcase-card {
        height: 210px;
    }

    .portfolio-project-list {
        gap: 5rem;

        margin-top: 3rem;
    }

    .portfolio-project__visual {
        padding: 1.25rem;
    }

    .portfolio-project-browser__screen {
        min-height: 260px;

        padding: 2rem;
    }

    .portfolio-project-browser__screen strong {
        font-size: 1.6rem;
    }

    .portfolio-project__details {
        grid-template-columns: 1fr;
    }

    .portfolio-more__box {
        padding: 2rem;
    }

    .portfolio-project-browser__screen--live {
        height: 260px;
        min-height: 260px;

        padding: 0;
    }

    .portfolio-project-browser__screen--live iframe {
        width: 360%;
        height: 936px;

        transform: scale(.2777778);
        transform-origin: top left;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .portfolio-page-hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .portfolio-showcase-card {
        width: 85%;
    }

    .portfolio-project-browser__screen--live {
        height: 230px;
        min-height: 230px;

        padding: 0;
    }

    .portfolio-project-browser__screen--live iframe {
        width: 400%;
        height: 920px;

        transform: scale(.25);
        transform-origin: top left;
    }

}

/* ==========================================
   SOURCE: over-ons.css
========================================== */

.about-hero {
    position: relative;

    overflow: hidden;

    padding: 4.5rem 0 5rem;
}

.about-hero::before {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    top: -220px;
    right: -180px;

    border-radius: 50%;

    background: rgba(79, 70, 229, .17);

    filter: blur(130px);

    pointer-events: none;
}

.about-hero__layout {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr .85fr;

    gap: 5rem;

    align-items: center;
}

.about-hero__content {
    max-width: 760px;
}

.about-hero h1 {
    margin-bottom: 1.5rem;
}

.about-hero__content > p {
    max-width: 700px;

    margin-bottom: 2rem;

    color: var(--color-text-muted);

    font-size: 1.2rem;
    line-height: 1.8;
}

.about-hero__buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;
}


/* ==========================================
   Hero Story Card
========================================== */

.about-story-card {
    position: relative;

    overflow: hidden;

    padding: 3rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(31, 41, 55, .96),
            rgba(17, 24, 39, .96)
        );

    box-shadow: var(--shadow-lg);
}

.about-story-card::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -80px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .12);

    filter: blur(70px);

    pointer-events: none;
}

.about-story-card > * {
    position: relative;
    z-index: 1;
}

.about-story-card__label {
    display: inline-block;

    margin-bottom: 1.25rem;

    color: var(--color-secondary);

    font-size: .8rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.about-story-card > strong {
    display: block;

    margin-bottom: 1.25rem;

    color: var(--color-text);

    font-size: 2rem;
    line-height: 1.25;
}

.about-story-card > p {
    margin-bottom: 2.5rem;

    color: var(--color-text-muted);

    line-height: 1.7;
}

.about-story-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1rem;
}

.about-story-card__stats div {
    padding-top: 1rem;

    border-top: 1px solid rgba(255, 255, 255, .08);
}

.about-story-card__stats strong {
    display: block;

    margin-bottom: .25rem;

    color: var(--color-text);

    font-size: 1.15rem;
}

.about-story-card__stats span {
    color: var(--color-text-muted);

    font-size: .72rem;
}


/* ==========================================
   Story
========================================== */

.about-story {
    padding: 5rem 0;
}

.about-story__layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;

    gap: 5rem;

    align-items: start;
}

.about-story__intro {
    max-width: 520px;
}

.about-story__content {
    max-width: 760px;
}

.about-story__content p {
    margin-bottom: 1.5rem;

    color: var(--color-text-muted);

    font-size: 1.05rem;
    line-height: 1.9;
}


/* ==========================================
   Philosophy
========================================== */

.about-philosophy {
    padding: 5rem 0;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

    margin-top: 4rem;
}

.about-value {
    padding: 2rem;

    border-top: 1px solid var(--color-border);
}

.about-value__number {
    display: block;

    margin-bottom: 1.5rem;

    color: var(--color-secondary);

    font-size: .8rem;
    font-weight: 700;

    letter-spacing: 1px;
}

.about-value h3 {
    margin-bottom: 1rem;
}

.about-value p {
    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.7;
}


/* ==========================================
   Personal Approach
========================================== */

.about-personal {
    padding: 5rem 0;
}

.about-personal__box {
    display: grid;
    grid-template-columns: 1fr .8fr;

    gap: 5rem;

    padding: 4rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background: var(--color-card);
}

.about-personal__content {
    max-width: 680px;
}

.about-personal__content h2 {
    margin-bottom: 1.5rem;
}

.about-personal__content p {
    color: var(--color-text-muted);

    line-height: 1.8;
}

.about-personal__points {
    display: grid;

    gap: 1rem;

    align-content: center;
}

.about-personal__points div {
    display: flex;
    align-items: center;

    gap: 1rem;

    padding: 1rem 1.25rem;

    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, .025);
}

.about-personal__points span {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(34, 197, 94, .12);

    color: var(--color-secondary);

    font-weight: 700;
}

.about-personal__points p {
    margin: 0;

    color: var(--color-text-light);
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .about-hero__layout,
    .about-story__layout,
    .about-personal__box {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

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

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .about-hero,
    .about-story,
    .about-philosophy,
    .about-personal {
        padding: 4rem 0;
    }

    .about-story-card {
        padding: 2rem;
    }

    .about-story-card__stats {
        grid-template-columns: 1fr;
    }

    .about-values {
        grid-template-columns: 1fr;

        margin-top: 3rem;
    }

    .about-personal__box {
        padding: 2rem;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .about-hero__buttons {
        flex-direction: column;
    }

    .about-hero__buttons .btn {
        width: 100%;
    }

    .about-story-card > strong {
        font-size: 1.65rem;
    }

}

/* ==========================================
   SOURCE: contact.css
========================================== */


/* ==========================================
   Contact Hero
========================================== */

.contact-hero {
    position: relative;
    overflow: hidden;

    padding: 4.5rem 0 5rem;
}

.contact-hero::before {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    top: -220px;
    right: -180px;

    border-radius: 50%;

    background: rgba(79, 70, 229, .17);

    filter: blur(130px);

    pointer-events: none;
}

.contact-hero__layout {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr .75fr;

    gap: 5rem;

    align-items: center;
}

.contact-hero__content {
    max-width: 760px;
}

.contact-hero h1 {
    margin-bottom: 1.5rem;
}

.contact-hero__content > p {
    max-width: 700px;

    margin-bottom: 2rem;

    color: var(--color-text-muted);

    font-size: 1.2rem;
    line-height: 1.8;
}


/* ==========================================
   Contact Hero Points
========================================== */

.contact-hero__points {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem 2rem;
}

.contact-hero__points div {
    display: flex;
    align-items: center;

    gap: .6rem;
}

.contact-hero__points span {
    color: var(--color-secondary);

    font-weight: 700;
}

.contact-hero__points p {
    margin: 0;

    color: var(--color-text-light);

    font-size: .9rem;
}


/* ==========================================
   Contact Card
========================================== */

.contact-card {
    position: relative;

    overflow: hidden;

    padding: 3rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(31, 41, 55, .96),
            rgba(17, 24, 39, .96)
        );

    box-shadow: var(--shadow-lg);
}

.contact-card::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -80px;
    bottom: -90px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .1);

    filter: blur(60px);
}

.contact-card > * {
    position: relative;
    z-index: 1;
}

.contact-card__label {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-secondary);

    font-size: .8rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.contact-card > strong {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-text);

    font-size: 1.7rem;
    line-height: 1.3;
}

.contact-card p {
    margin-bottom: 1.5rem;

    color: var(--color-text-muted);

    line-height: 1.7;
}

.contact-card__mail {
    color: var(--color-text);

    font-weight: 600;

    transition: var(--transition);
}

.contact-card__mail:hover {
    color: var(--color-secondary);
}


/* ==========================================
   Contact Section
========================================== */

.contact-section {
    padding: 5rem 0;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1.25fr .75fr;

    gap: 5rem;

    align-items: start;
}

.contact-form-wrap h2 {
    margin-bottom: 2rem;
}


/* ==========================================
   Form Notice
========================================== */

.form-notice {
    margin-bottom: 2rem;

    padding: 1.25rem 1.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-card);
}

.form-notice strong {
    display: block;

    margin-bottom: .35rem;

    color: var(--color-text);

    font-size: 1rem;
}

.form-notice p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .95rem;
    line-height: 1.6;
}

.form-notice--error {
    border-color: rgba(239, 68, 68, .45);

    background: rgba(239, 68, 68, .08);
}


/* ==========================================
   Form
========================================== */

.contact-form {
    display: flex;
    flex-direction: column;

    gap: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;
}

.form-field {
    display: flex;
    flex-direction: column;

    gap: .6rem;
}

.form-field label {
    color: var(--color-text-light);

    font-size: .9rem;
    font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    padding: 1rem 1.1rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-card);

    color: var(--color-text);

    transition: var(--transition);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-primary);

    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.form-field textarea {
    resize: vertical;
}

.form-field select {
    cursor: pointer;
}

.form-consent {
    display: flex;
    align-items: flex-start;

    gap: .8rem;
}

.form-consent input {
    margin-top: .25rem;
}

.form-consent label {
    color: var(--color-text-muted);

    font-size: .85rem;
    line-height: 1.6;
}


/* ==========================================
   Contact Info - Open Layout
========================================== */

.contact-info {
    padding-top: .25rem;
}

.contact-info .section-eyebrow {
    margin-bottom: 1.5rem;
}

.contact-steps {
    display: flex;
    flex-direction: column;

    gap: 0;

    margin-top: 1.25rem;
}

.contact-step {
    position: relative;

    display: grid;
    grid-template-columns: auto 1fr;

    gap: 1rem;

    align-items: start;

    padding: 1.5rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.contact-step:first-child {
    padding-top: 0;
}

.contact-step:last-child {
    border-bottom: 0;
}

.contact-step > span {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(79, 70, 229, .16);

    color: #a5b4fc;

    font-size: .8rem;
    font-weight: 700;
}

.contact-step h3 {
    display: block;

    margin: 0 0 .35rem;

    color: var(--color-text);

    font-size: 1rem;
    line-height: 1.4;
}

.contact-step p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .9rem;
    line-height: 1.6;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .contact-hero__layout,
    .contact-layout {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .contact-info {
        max-width: 680px;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .contact-hero,
    .contact-section {
        padding: 4rem 0;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 2rem;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .contact-hero__points {
        flex-direction: column;
    }

}


/* ==========================================
   Honeypot
========================================== */

.form-honeypot {
    position: absolute !important;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
}

/* ==========================================
   SOURCE: legal.css
========================================== */

.legal-hero {
    position: relative;

    overflow: hidden;

    padding: 4.5rem 0 4rem;
}

.legal-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -220px;
    right: -180px;

    border-radius: 50%;

    background: rgba(79, 70, 229, .13);

    filter: blur(120px);

    pointer-events: none;
}

.legal-hero__content {
    position: relative;

    z-index: 1;

    max-width: 780px;
}

.legal-hero h1 {
    margin-bottom: 1.5rem;
}

.legal-hero p {
    max-width: 720px;

    margin-bottom: 1.5rem;

    color: var(--color-text-muted);

    font-size: 1.1rem;
    line-height: 1.8;
}

.legal-updated {
    color: var(--color-text-muted);

    font-size: .8rem;
}


/* ==========================================
   Legal Content
========================================== */

.legal-content {
    padding: 3rem 0 6rem;
}

.legal-layout {
    display: grid;
    grid-template-columns: 280px 1fr;

    gap: 5rem;

    align-items: start;
}


/* ==========================================
   Legal Navigation
========================================== */

.legal-nav {
    position: sticky;

    top: 120px;

    padding: 1.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    background: var(--color-card);
}

.legal-nav > span {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-secondary);

    font-size: .75rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.legal-nav nav {
    display: flex;
    flex-direction: column;

    gap: .25rem;
}

.legal-nav a {
    display: block;

    padding: .65rem .75rem;

    border-radius: 8px;

    color: var(--color-text-muted);

    font-size: .82rem;
    line-height: 1.4;

    transition: var(--transition);
}

.legal-nav a:hover {
    background: rgba(255, 255, 255, .04);

    color: var(--color-text);
}


/* ==========================================
   Article
========================================== */

.legal-article {
    max-width: 840px;
}

.legal-article section {
    padding: 0;

    margin-bottom: 4rem;

    scroll-margin-top: 130px;
}

.legal-article h2 {
    margin-bottom: 1.25rem;

    font-size: 1.6rem;
}

.legal-article p {
    margin-bottom: 1.25rem;

    color: var(--color-text-muted);

    line-height: 1.85;
}

.legal-article ul {
    display: flex;
    flex-direction: column;

    gap: .65rem;

    margin: 1rem 0 1.5rem;
    padding-left: 1.25rem;

    list-style: disc;
}

.legal-article li {
    color: var(--color-text-muted);

    line-height: 1.7;
}

.legal-article a {
    color: var(--color-secondary);

    text-decoration: underline;

    text-decoration-color: rgba(34, 197, 94, .35);
    text-underline-offset: 4px;
}

.legal-article a:hover {
    text-decoration-color: var(--color-secondary);
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .legal-layout {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .legal-nav {
        position: static;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .legal-hero {
        padding: 4rem 0 3rem;
    }

    .legal-content {
        padding: 2rem 0 4rem;
    }

    .legal-article section {
        margin-bottom: 3rem;
    }

    .legal-article h2 {
        font-size: 1.4rem;
    }

}

/* ==========================================
   SOURCE: bedankt.css
========================================== */

.thanks-page {
    position: relative;

    overflow: hidden;

    min-height: calc(100vh - 88px);

    display: flex;
    align-items: center;

    padding: 6rem 0;
}

.thanks-page::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -220px;
    right: -180px;

    border-radius: 50%;

    background: rgba(79, 70, 229, .17);

    filter: blur(130px);

    pointer-events: none;
}

.thanks-page::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -180px;
    bottom: -200px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .08);

    filter: blur(110px);

    pointer-events: none;
}

.thanks-page__layout {
    position: relative;

    z-index: 1;

    display: grid;
    grid-template-columns: 1fr .8fr;

    gap: 6rem;

    align-items: center;
}


/* ==========================================
   Content
========================================== */

.thanks-page__content {
    max-width: 720px;
}

.thanks-page__icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(34, 197, 94, .25);
    border-radius: 18px;

    background: rgba(34, 197, 94, .1);

    color: var(--color-secondary);

    font-size: 1.5rem;
    font-weight: 700;
}

.thanks-page h1 {
    margin-bottom: 1.5rem;
}

.thanks-page__intro {
    max-width: 650px;

    margin-bottom: 2rem;

    color: var(--color-text-muted);

    font-size: 1.15rem;
    line-height: 1.8;
}


/* ==========================================
   Status
========================================== */

.thanks-page__status {
    display: flex;
    align-items: center;

    gap: 1rem;

    max-width: 560px;

    margin-bottom: 2.5rem;
    padding: 1rem 1.25rem;

    border: 1px solid rgba(34, 197, 94, .15);
    border-radius: var(--radius-md);

    background: rgba(34, 197, 94, .05);
}

.thanks-page__status-dot {
    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--color-secondary);

    box-shadow: 0 0 18px rgba(34, 197, 94, .45);
}

.thanks-page__status strong {
    display: block;

    margin-bottom: .2rem;

    color: var(--color-text);

    font-size: .9rem;
}

.thanks-page__status span {
    display: block;

    color: var(--color-text-muted);

    font-size: .8rem;
}


/* ==========================================
   Buttons
========================================== */

.thanks-page__buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;
}


/* ==========================================
   Flow Visual
========================================== */

.thanks-flow {
    position: relative;

    overflow: hidden;

    padding: 2.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(31, 41, 55, .96),
            rgba(17, 24, 39, .96)
        );

    box-shadow: var(--shadow-lg);
}

.thanks-flow::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    bottom: -120px;

    border-radius: 50%;

    background: rgba(79, 70, 229, .14);

    filter: blur(70px);

    pointer-events: none;
}

.thanks-flow > * {
    position: relative;

    z-index: 1;
}


/* ==========================================
   Flow Header
========================================== */

.thanks-flow__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;

    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.thanks-flow__label {
    color: var(--color-text);

    font-size: .9rem;
    font-weight: 700;
}

.thanks-flow__live {
    padding: .4rem .7rem;

    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 999px;

    background: rgba(34, 197, 94, .08);

    color: var(--color-secondary);

    font-size: .7rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .8px;
}


/* ==========================================
   Flow Steps
========================================== */

.thanks-flow__step {
    display: grid;
    grid-template-columns: auto 1fr;

    gap: 1rem;

    align-items: start;
}

.thanks-flow__number {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;

    background: rgba(255, 255, 255, .035);

    color: var(--color-text-muted);

    font-size: .75rem;
    font-weight: 700;
}

.thanks-flow__step.is-complete .thanks-flow__number {
    border-color: rgba(34, 197, 94, .2);

    background: rgba(34, 197, 94, .1);

    color: var(--color-secondary);
}

.thanks-flow__step strong {
    display: block;

    margin-bottom: .35rem;

    color: var(--color-text);

    font-size: .95rem;
}

.thanks-flow__step p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .82rem;
    line-height: 1.6;
}

.thanks-flow__line {
    width: 1px;
    height: 32px;

    margin: .4rem 0 .4rem 21px;

    background: rgba(255, 255, 255, .1);
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .thanks-page__layout {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .thanks-flow {
        max-width: 650px;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .thanks-page {
        min-height: auto;

        padding: 4rem 0;
    }

    .thanks-page__layout {
        gap: 3rem;
    }

    .thanks-flow {
        padding: 2rem;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .thanks-page__buttons {
        flex-direction: column;
    }

    .thanks-page__buttons .btn {
        width: 100%;
    }

    .thanks-page__status {
        align-items: flex-start;
    }

}

/* ==========================================
   SOURCE: 404.css
========================================== */

.error-page {
    position: relative;

    overflow: hidden;

    min-height: calc(100vh - 88px);

    display: flex;
    align-items: center;

    padding: 6rem 0;
}

.error-page::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    top: -240px;
    right: -200px;

    border-radius: 50%;

    background: rgba(79, 70, 229, .17);

    filter: blur(135px);

    pointer-events: none;
}

.error-page__layout {
    position: relative;

    z-index: 1;

    display: grid;
    grid-template-columns: 1fr .8fr;

    gap: 6rem;

    align-items: center;
}

.error-page__content {
    max-width: 700px;
}

.error-page h1 {
    margin-bottom: 1.5rem;
}

.error-page__content > p {
    max-width: 620px;

    margin-bottom: 2.5rem;

    color: var(--color-text-muted);

    font-size: 1.15rem;
    line-height: 1.8;
}

.error-page__buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;
}


/* ==========================================
   Error Card
========================================== */

.error-card {
    position: relative;

    overflow: hidden;

    padding: 3rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(31, 41, 55, .96),
            rgba(17, 24, 39, .96)
        );

    box-shadow: var(--shadow-lg);
}

.error-card::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -90px;
    bottom: -110px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .1);

    filter: blur(70px);

    pointer-events: none;
}

.error-card > * {
    position: relative;
    z-index: 1;
}

.error-card__code {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-secondary);

    font-size: 4rem;
    font-weight: 700;

    line-height: 1;
}

.error-card > strong {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-text);

    font-size: 1.6rem;
}

.error-card > p {
    margin-bottom: 2rem;

    color: var(--color-text-muted);

    line-height: 1.7;
}

.error-card__links {
    display: flex;
    flex-direction: column;

    gap: .85rem;
}

.error-card__links a {
    color: var(--color-text-light);

    font-size: .9rem;
    font-weight: 600;

    transition: var(--transition);
}

.error-card__links a:hover {
    color: var(--color-secondary);

    transform: translateX(4px);
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .error-page__layout {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .error-page {
        min-height: auto;

        padding: 4rem 0;
    }

    .error-card {
        padding: 2rem;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .error-page__buttons {
        flex-direction: column;
    }

    .error-page__buttons .btn {
        width: 100%;
    }

}

/* ==========================================
   SOURCE: footer.css
========================================== */
.site-footer {
    padding: 5rem 0 2rem;

    background: #0b1220;

    border-top: 1px solid rgba(255, 255, 255, .08);
}


/* ==========================================
   Main Footer Layout
========================================== */

.footer-main {
    display: grid;

    grid-template-columns: 1.6fr repeat(3, 1fr);

    gap: 4rem;

    padding-bottom: 4rem;
}


/* ==========================================
   Brand
========================================== */

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    display: inline-block;

    margin-bottom: 1.25rem;

    color: var(--color-text);

    font-size: 1.5rem;
    font-weight: 700;

    transition: var(--transition);
}

.footer-logo:hover {
    color: var(--color-secondary);
}

.footer-tagline {
    margin-bottom: 1rem;

    color: var(--color-text);

    font-size: 1.1rem;
    font-weight: 600;

    line-height: 1.5;
}

.footer-description {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .95rem;
    line-height: 1.7;
}


/* ==========================================
   Footer Columns
========================================== */

.footer-column h3 {
    margin-bottom: 1.25rem;

    color: var(--color-text);

    font-size: .9rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}


/* ==========================================
   Links
========================================== */

.footer-links {
    display: flex;
    flex-direction: column;

    gap: .85rem;

    margin: 0;
    padding: 0;
}

.footer-links a {
    color: var(--color-text-muted);

    font-size: .95rem;

    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--color-secondary);

    transform: translateX(3px);
}


/* ==========================================
   Contact
========================================== */

.footer-contact a {
    word-break: break-word;
}


/* ==========================================
   Footer Bottom
========================================== */

.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-bottom p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .85rem;
}

.footer-legal {
    display: flex;

    gap: 1.5rem;
}

.footer-legal a {
    color: var(--color-text-muted);

    font-size: .85rem;

    transition: var(--transition);
}

.footer-legal a:hover {
    color: var(--color-text);
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;

        gap: 3rem;
    }

    .footer-main .footer-column:last-child {
        grid-column: 2 / 4;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .site-footer {
        padding: 4rem 0 2rem;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 2.5rem;

        padding-bottom: 3rem;
    }

    .footer-main .footer-column:last-child {
        grid-column: auto;
    }

    .footer-brand {
        max-width: none;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .footer-legal {
        flex-direction: column;

        gap: .75rem;
    }

}

/* ==========================================
   SOURCE: animations.css
========================================== */

/* ==========================================
   SOURCE: responsive.css
========================================== */

/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .navbar {
        gap: 1.25rem;
    }

    .nav-menu {
        gap: 1.25rem;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    /* ======================================
       Header
    ====================================== */

    .navbar {
        min-height: 74px;

        flex-wrap: nowrap;

        padding: .75rem 0;
    }

    .logo {
        font-size: 1.25rem;
    }

    .nav-toggle {
        display: flex;

        margin-left: auto;
    }

    .header-cta {
        display: none;
    }
.logo {
    gap: .65rem;
}

.logo__mark {
    width: 38px;
    height: 38px;

    max-width: 38px;
    max-height: 38px;

    flex-basis: 38px;
}

.logo__divider {
    height: 34px;
}

.logo__novice {
    font-size: .82rem;
}

.logo__digital {
    font-size: .5rem;
}


    /* ======================================
       Mobile Navigation
    ====================================== */

    .nav-menu {
        position: absolute;

        top: calc(100% + .75rem);
        left: 0;
        right: 0;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: .25rem;

        width: 100%;

        margin: 0;
        padding: .75rem;

        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);

        background: rgba(17, 24, 39, .98);

        box-shadow: var(--shadow-lg);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .nav-menu.is-open {
        display: flex;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu a {
        display: block;

        width: 100%;

        padding: .9rem 1rem;

        border-radius: 10px;

        color: var(--color-text-light);
    }

    .nav-menu a:hover {
        background: rgba(255, 255, 255, .05);

        color: var(--color-text);
    }


    /* ======================================
       Homepage Hero
    ====================================== */

    .hero .container {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .hero__content {
        order: 1;

        padding-top: 0;
    }

    .hero__visual {
        order: 2;
    }

    .hero__trust {
        grid-template-columns: 1fr;

        gap: .75rem;
    }


    /* ======================================
       Why Us
    ====================================== */

    .feature-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .hero h1 {
        font-size: var(--font-size-xl);
    }

}

/* ==========================================
   SOURCE: local-landing.css
========================================== */

/* ==========================================
   Novice Digital
   File: local-landing.css
   Version: 1.0.0
   Last Updated: 2026-08-17
========================================== */


/* ==========================================
   Local Hero
========================================== */

.local-hero {
    position: relative;

    overflow: hidden;

    padding: 4.5rem 0 5.5rem;
}


.local-hero::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    top: -260px;
    right: -180px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .17);

    filter: blur(140px);

    pointer-events: none;
}


.local-hero::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: -180px;
    bottom: -220px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .07);

    filter: blur(100px);

    pointer-events: none;
}


.local-hero__layout {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 5rem;

    align-items: center;
}


.local-hero__content {
    max-width: 760px;
}


.local-hero h1 {
    max-width: 760px;

    margin-bottom: 1.5rem;
}


.local-hero__lead {
    max-width: 700px;

    margin-bottom: 2rem;

    color: var(--color-text-muted);

    font-size: 1.2rem;

    line-height: 1.8;
}


.local-hero__buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 2rem;
}


.local-hero__trust {
    display: flex;

    flex-wrap: wrap;

    gap: .85rem 1.6rem;

    color: var(--color-text-muted);

    font-size: .85rem;

    font-weight: 500;
}


.local-hero__trust span {
    position: relative;

    padding-left: 1.15rem;
}


.local-hero__trust span::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 50%;
    left: 0;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--color-secondary);

    box-shadow: 0 0 10px rgba(34, 197, 94, .5);
}


/* ==========================================
   Local Hero Preview
========================================== */

.local-hero__visual {
    width: 100%;
}


.local-preview {
    overflow: hidden;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    background: #ffffff;

    box-shadow: var(--shadow-lg);
}


.local-preview__top {
    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 13px 18px;

    border-bottom: 1px solid #E5E7EB;

    background: #F8FAFC;
}


.local-preview__dots {
    display: flex;

    gap: .45rem;
}


.local-preview__dots span {
    width: 10px;
    height: 10px;

    border-radius: 50%;
}


.local-preview__dots span:nth-child(1) {
    background: #FF5F57;
}


.local-preview__dots span:nth-child(2) {
    background: #FEBC2E;
}


.local-preview__dots span:nth-child(3) {
    background: #28C840;
}


.local-preview__address {
    flex: 1;

    padding-right: 3.5rem;

    color: #64748B;

    font-size: .75rem;

    text-align: center;
}


.local-preview__body {
    position: relative;

    overflow: hidden;

    min-height: 440px;

    padding: 3.25rem;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(34, 197, 94, .11),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #F8FAFC
        );
}


.local-preview__body::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .07);

    filter: blur(40px);

    pointer-events: none;
}


.local-preview__body > * {
    position: relative;

    z-index: 1;
}


.local-preview__eyebrow {
    display: inline-flex;

    align-items: center;

    margin-bottom: 1.25rem;

    color: #22C55E;

    font-size: .72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


.local-preview__eyebrow::before {
    content: "";

    width: 18px;
    height: 2px;

    margin-right: .55rem;

    border-radius: 999px;

    background: #22C55E;
}


.local-preview__title {
    display: block;

    max-width: 390px;

    margin-bottom: 1rem;

    color: #111827;

    font-size: 2.15rem;

    line-height: 1.12;

    letter-spacing: -.04em;
}


.local-preview__body > p {
    max-width: 390px;

    margin-bottom: 1.6rem;

    color: #64748B;

    font-size: .9rem;

    line-height: 1.7;
}


.local-preview__cta {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 3rem;

    padding: .75rem 1.2rem;

    border-radius: 9px;

    background: var(--color-primary);

    color: #ffffff;

    font-size: .78rem;

    font-weight: 700;

    box-shadow: 0 8px 22px rgba(37, 99, 235, .18);
}


.local-preview__stats {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: .75rem;
}


.local-preview__stats div {
    padding: 1rem;

    border: 1px solid #E5E7EB;

    border-radius: 12px;

    background: rgba(255, 255, 255, .9);

    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}


.local-preview__stats strong {
    display: block;

    margin-bottom: .25rem;

    color: #111827;

    font-size: .8rem;
}


.local-preview__stats span {
    color: #64748B;

    font-size: .68rem;
}


/* ==========================================
   Local Introduction
========================================== */

.local-intro {
    padding: 5.5rem 0;

    border-top: 1px solid rgba(255, 255, 255, .04);

    border-bottom: 1px solid rgba(255, 255, 255, .04);

    background: rgba(17, 24, 39, .35);
}


.local-intro__layout {
    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 6rem;

    align-items: start;
}


.local-intro__heading {
    max-width: 520px;
}


.local-intro__heading h2 {
    margin-top: 0;
}


.local-intro__content {
    max-width: 760px;
}


.local-intro__content p {
    margin-bottom: 1.5rem;

    color: var(--color-text-muted);

    font-size: 1.05rem;

    line-height: 1.85;
}


.local-intro__content p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   Generic Local Heading
========================================== */

.local-section-heading {
    max-width: 760px;

    margin: 0 auto 4rem;

    text-align: center;
}


.local-section-heading h2 {
    margin-bottom: 1.25rem;
}


.local-section-heading > p {
    max-width: 660px;

    margin: 0 auto;

    color: var(--color-text-muted);

    font-size: 1.05rem;

    line-height: 1.75;
}


/* ==========================================
   Benefits
========================================== */

.local-benefits {
    position: relative;

    padding: 6rem 0;
}


.local-benefits::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: 180px;
    left: -260px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .08);

    filter: blur(120px);

    pointer-events: none;
}


.local-benefits__grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;
}


.local-benefit {
    position: relative;

    overflow: hidden;

    min-height: 280px;

    padding: 2.25rem;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(31, 41, 55, .8),
            rgba(17, 24, 39, .9)
        );

    transition: var(--transition);
}


.local-benefit:hover {
    transform: translateY(-4px);

    border-color: rgba(37, 99, 235, .55);

    box-shadow: var(--shadow-md);
}


.local-benefit::after {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -80px;
    bottom: -80px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .07);

    filter: blur(30px);

    pointer-events: none;
}


.local-benefit__number {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(37, 99, 235, .24);

    border-radius: 11px;

    background: rgba(37, 99, 235, .1);

    color: #93C5FD;

    font-size: .75rem;

    font-weight: 700;
}


.local-benefit h3 {
    margin-bottom: 1rem;

    color: var(--color-text);

    font-size: 1.25rem;
}


.local-benefit p {
    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.75;
}


/* ==========================================
   Local Assen Block
========================================== */

.local-assend {
    padding: 1rem 0 6rem;
}


.local-assend__box {
    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 5rem;

    padding: 4rem;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            rgba(31, 41, 55, .94),
            rgba(17, 24, 39, .96)
        );

    box-shadow: var(--shadow-md);
}


.local-assend__box::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -120px;
    top: -180px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .08);

    filter: blur(90px);

    pointer-events: none;
}


.local-assend__box > * {
    position: relative;

    z-index: 1;
}


.local-assend__content h2 {
    max-width: 600px;

    margin-bottom: 1.5rem;
}


.local-assend__content p {
    max-width: 680px;

    margin-bottom: 1.25rem;

    color: var(--color-text-muted);

    line-height: 1.8;
}


.local-assend__content p:last-child {
    margin-bottom: 0;
}


.local-assend__points {
    display: flex;

    flex-direction: column;

    gap: 1rem;

    justify-content: center;
}


.local-assend__point {
    padding: 1.35rem 1.5rem;

    border: 1px solid rgba(255, 255, 255, .07);

    border-radius: var(--radius-md);

    background: rgba(15, 23, 42, .55);
}


.local-assend__point strong {
    display: block;

    margin-bottom: .35rem;

    color: var(--color-text);

    font-size: .95rem;
}


.local-assend__point span {
    color: var(--color-text-muted);

    font-size: .85rem;

    line-height: 1.55;
}


/* ==========================================
   Packages
========================================== */

.local-packages {
    padding: 6rem 0;

    border-top: 1px solid rgba(255, 255, 255, .04);

    background: rgba(17, 24, 39, .28);
}


.local-packages__grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

    align-items: stretch;
}


.local-package {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 2.5rem;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(31, 41, 55, .9),
            rgba(17, 24, 39, .96)
        );

    box-shadow: var(--shadow-sm);
}


.local-package--featured {
    border-color: rgba(37, 99, 235, .7);

    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, .12),
            rgba(17, 24, 39, .98) 45%
        );

    box-shadow:
        0 18px 60px rgba(0, 0, 0, .24),
        0 0 0 1px rgba(37, 99, 235, .12);
}


.local-package__featured-label {
    display: inline-flex;

    align-self: flex-start;

    margin-bottom: 1.5rem;

    padding: .45rem .75rem;

    border-radius: 999px;

    background: rgba(34, 197, 94, .12);

    color: var(--color-secondary);

    font-size: .72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.local-package__top {
    display: flex;

    justify-content: space-between;

    gap: 1.5rem;

    align-items: flex-start;

    margin-bottom: 1.75rem;
}


.local-package__label {
    display: inline-block;

    padding-top: .4rem;

    color: var(--color-text);

    font-size: 1.3rem;

    font-weight: 700;
}


.local-package__price {
    text-align: right;
}


.local-package__price span {
    display: block;

    margin-bottom: .25rem;

    color: var(--color-text-muted);

    font-size: .72rem;

    text-transform: uppercase;

    letter-spacing: .8px;
}


.local-package__price strong {
    display: block;

    color: var(--color-text);

    font-size: 2rem;

    line-height: 1;
}


.local-package__price small {
    display: block;

    margin-top: .35rem;

    color: var(--color-text-muted);

    font-size: .7rem;
}


.local-package h3 {
    min-height: 76px;

    margin-bottom: 1.5rem;

    color: var(--color-text);

    font-size: 1.05rem;

    line-height: 1.55;
}


.local-package ul {
    display: flex;

    flex-direction: column;

    gap: .8rem;

    margin: 0 0 2rem;

    padding: 0;

    list-style: none;
}


.local-package li {
    position: relative;

    padding-left: 1.45rem;

    color: var(--color-text-muted);

    font-size: .9rem;

    line-height: 1.5;
}


.local-package li::before {
    content: "✓";

    position: absolute;

    top: 0;
    left: 0;

    color: var(--color-secondary);

    font-weight: 700;
}


.local-package .btn {
    width: 100%;

    margin-top: auto;
}


.local-packages__footer {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: .75rem;

    margin-top: 2.5rem;

    color: var(--color-text-muted);

    text-align: center;
}


.local-packages__footer p {
    margin: 0;
}


.local-packages__footer a {
    color: var(--color-secondary);

    font-weight: 600;

    transition: var(--transition);
}


.local-packages__footer a:hover {
    color: var(--color-text);
}


/* ==========================================
   Process
========================================== */

.local-process {
    padding: 6rem 0;
}


.local-process__grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;
}


.local-process__step {
    position: relative;

    padding: 2rem;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    background: rgba(31, 41, 55, .52);
}


.local-process__step > span {
    display: block;

    margin-bottom: 2rem;

    color: var(--color-primary);

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: 1px;
}


.local-process__step h3 {
    margin-bottom: .85rem;

    color: var(--color-text);

    font-size: 1.1rem;
}


.local-process__step p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .9rem;

    line-height: 1.7;
}


/* ==========================================
   Growth / SEO
========================================== */

.local-growth {
    padding: 1rem 0 6rem;
}


.local-growth__layout {
    display: grid;

    grid-template-columns: 1fr .9fr;

    gap: 5rem;

    align-items: center;

    padding: 4rem;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(37, 99, 235, .12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(31, 41, 55, .88),
            rgba(17, 24, 39, .96)
        );
}


.local-growth__content h2 {
    max-width: 620px;

    margin-bottom: 1.5rem;
}


.local-growth__content p {
    max-width: 660px;

    margin-bottom: 1.25rem;

    color: var(--color-text-muted);

    line-height: 1.8;
}


.local-growth__link {
    display: inline-flex;

    align-items: center;

    margin-top: .75rem;

    color: var(--color-secondary);

    font-weight: 600;

    transition: var(--transition);
}


.local-growth__link::after {
    content: "→";

    margin-left: .6rem;

    transition: transform .25s ease;
}


.local-growth__link:hover {
    color: var(--color-text);
}


.local-growth__link:hover::after {
    transform: translateX(4px);
}


.local-growth__metrics {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;
}


.local-growth__metric {
    min-height: 130px;

    padding: 1.5rem;

    border: 1px solid rgba(255, 255, 255, .07);

    border-radius: var(--radius-md);

    background: rgba(15, 23, 42, .58);
}


.local-growth__metric span {
    display: block;

    margin-bottom: .65rem;

    color: var(--color-secondary);

    font-size: .7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.local-growth__metric strong {
    display: block;

    color: var(--color-text);

    font-size: .95rem;

    line-height: 1.5;
}


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

.local-faq {
    padding: 6rem 0;

    border-top: 1px solid rgba(255, 255, 255, .04);

    background: rgba(17, 24, 39, .28);
}


.local-faq__layout {
    display: grid;

    grid-template-columns: .75fr 1.25fr;

    gap: 5rem;

    align-items: start;
}


.local-faq__heading {
    max-width: 480px;

    position: sticky;

    top: 120px;
}


.local-faq__heading h2 {
    margin-bottom: 1rem;
}


.local-faq__heading > p {
    color: var(--color-text-muted);

    line-height: 1.7;
}


.local-faq__items {
    display: flex;

    flex-direction: column;

    gap: .85rem;
}


.local-faq__item {
    overflow: hidden;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: rgba(31, 41, 55, .62);

    transition: var(--transition);
}


.local-faq__item[open] {
    border-color: rgba(37, 99, 235, .45);

    background: rgba(31, 41, 55, .82);
}


.local-faq__item summary {
    position: relative;

    padding: 1.4rem 3.75rem 1.4rem 1.5rem;

    color: var(--color-text);

    font-weight: 600;

    line-height: 1.5;

    cursor: pointer;

    list-style: none;
}


.local-faq__item summary::-webkit-details-marker {
    display: none;
}


.local-faq__item summary::after {
    content: "+";

    position: absolute;

    width: 30px;
    height: 30px;

    top: 50%;
    right: 1.25rem;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateY(-50%);

    border-radius: 8px;

    background: rgba(37, 99, 235, .12);

    color: #93C5FD;

    font-size: 1.15rem;

    line-height: 1;

    transition: transform .25s ease;
}


.local-faq__item[open] summary::after {
    content: "−";

    background: rgba(34, 197, 94, .12);

    color: var(--color-secondary);
}


.local-faq__answer {
    padding: 0 1.5rem 1.5rem;
}


.local-faq__answer p {
    margin-bottom: 1rem;

    color: var(--color-text-muted);

    font-size: .95rem;

    line-height: 1.75;
}


.local-faq__answer p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   Final CTA
========================================== */

.local-final-cta {
    padding: 6rem 0;
}


.local-final-cta__box {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 4rem;

    padding: 4rem;

    border: 1px solid rgba(37, 99, 235, .4);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .14),
            rgba(31, 41, 55, .84) 45%,
            rgba(17, 24, 39, .96)
        );

    box-shadow: var(--shadow-md);
}


.local-final-cta__box::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -100px;
    top: -150px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .09);

    filter: blur(80px);

    pointer-events: none;
}


.local-final-cta__box > * {
    position: relative;

    z-index: 1;
}


.local-final-cta__content {
    max-width: 720px;
}


.local-final-cta__content h2 {
    margin-bottom: 1.25rem;
}


.local-final-cta__content > p {
    max-width: 640px;

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.8;
}


.local-final-cta__actions {
    display: flex;

    flex-direction: column;

    flex-shrink: 0;

    gap: .85rem;
}


.local-final-cta__actions .btn {
    min-width: 220px;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 1100px) {

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


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

}


@media (max-width: 992px) {

    .local-hero__layout {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }


    .local-hero__visual {
        max-width: 720px;
    }


    .local-preview__body {
        min-height: auto;
    }


    .local-intro__layout {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .local-intro__heading {
        max-width: 700px;
    }


    .local-assend__box {
        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .local-assend__points {
        display: grid;

        grid-template-columns: repeat(3, 1fr);
    }


    .local-packages__grid {
        grid-template-columns: 1fr;

        max-width: 700px;

        margin-inline: auto;
    }


    .local-package h3 {
        min-height: 0;
    }


    .local-growth__layout {
        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .local-faq__layout {
        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .local-faq__heading {
        position: static;

        max-width: 700px;
    }


    .local-final-cta__box {
        flex-direction: column;

        align-items: flex-start;
    }


    .local-final-cta__actions {
        flex-direction: row;

        flex-wrap: wrap;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .local-hero,
    .local-intro,
    .local-benefits,
    .local-packages,
    .local-process,
    .local-faq,
    .local-final-cta {
        padding: 4rem 0;
    }


    .local-assend,
    .local-growth {
        padding: 0 0 4rem;
    }


    .local-hero__layout {
        gap: 2.5rem;
    }


    .local-hero__lead {
        font-size: 1.05rem;
    }


    .local-preview__body {
        padding: 2.25rem;
    }


    .local-preview__title {
        font-size: 1.75rem;
    }


    .local-section-heading {
        margin-bottom: 3rem;

        text-align: left;
    }


    .local-section-heading > p {
        margin: 0;
    }


    .local-benefits__grid {
        grid-template-columns: 1fr;
    }


    .local-benefit {
        min-height: 0;

        padding: 2rem;
    }


    .local-assend__box {
        padding: 2.5rem;
    }


    .local-assend__points {
        grid-template-columns: 1fr;
    }


    .local-package {
        padding: 2rem;
    }


    .local-process__grid {
        grid-template-columns: 1fr;
    }


    .local-growth__layout {
        padding: 2.5rem;
    }


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


    .local-final-cta__box {
        padding: 2.5rem;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 560px) {

    .local-hero__buttons {
        flex-direction: column;
    }


    .local-hero__buttons .btn {
        width: 100%;
    }


    .local-hero__trust {
        flex-direction: column;

        gap: .7rem;
    }


    .local-preview__top {
        padding: 11px 13px;
    }


    .local-preview__address {
        padding-right: 2rem;

        font-size: .68rem;
    }


    .local-preview__body {
        padding: 1.75rem;
    }


    .local-preview__title {
        font-size: 1.55rem;
    }


    .local-preview__stats {
        grid-template-columns: 1fr;
    }


    .local-preview__stats div:nth-child(3) {
        display: none;
    }


    .local-assend__box,
    .local-growth__layout,
    .local-final-cta__box {
        padding: 2rem;
    }


    .local-package__top {
        flex-direction: column;

        gap: .75rem;
    }


    .local-package__price {
        text-align: left;
    }


    .local-package__price strong {
        font-size: 1.8rem;
    }


    .local-growth__metrics {
        grid-template-columns: 1fr;
    }


    .local-growth__metric {
        min-height: 0;
    }


    .local-final-cta__actions {
        width: 100%;

        flex-direction: column;
    }


    .local-final-cta__actions .btn {
        width: 100%;

        min-width: 0;
    }

}


/* ==========================================
   Extra Small Mobile
========================================== */

@media (max-width: 400px) {

    .local-preview__body {
        padding: 1.4rem;
    }


    .local-preview__title {
        font-size: 1.4rem;
    }


    .local-preview__cta {
        margin-bottom: 2rem;
    }


    .local-benefit,
    .local-package {
        padding: 1.6rem;
    }


    .local-assend__box,
    .local-growth__layout,
    .local-final-cta__box {
        padding: 1.6rem;
    }


    .local-process__step {
        padding: 1.6rem;
    }


    .local-faq__item summary {
        padding-left: 1.2rem;

        padding-right: 3.3rem;
    }


    .local-faq__answer {
        padding-left: 1.2rem;

        padding-right: 1.2rem;
    }

}