/* =========================================================
   FURKAN BALKAN WEBDESIGN
   style.css
========================================================= */


/* =========================================================
   DESIGN SYSTEM
========================================================= */

:root {
    --bg: #09090b;
    --bg-soft: #0f0f13;
    --bg-card: #141419;
    --bg-card-hover: #18181f;

    --text: #f7f7f8;
    --text-soft: #c7c7cf;
    --text-muted: #92929d;

    --accent: #7758ff;
    --accent-light: #a594ff;
    --accent-dark: #6040ef;

    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.16);

    --success: #71e5a4;
    --error: #ff8585;

    --shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    --radius-small: 10px;
    --radius: 18px;
    --radius-large: 28px;

    --container: 1180px;

    --transition: 0.25s ease;
}


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 78% 8%,
            rgba(119, 88, 255, 0.08),
            transparent 28%
        ),
        var(--bg);

    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

button,
input,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

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

ul {
    list-style: none;
}

::selection {
    background: var(--accent);
    color: white;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(119, 88, 255, 0.45);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: 9999;

    padding: 10px 16px;

    background: #ffffff;

    color: #09090b;

    border-radius: 8px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.3);

    font-size: 13px;
    font-weight: 750;

    transform: translateY(-160%);

    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}


/* =========================================================
   ALLGEMEIN
========================================================= */

.container {
    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin-inline: auto;
}

.section {
    position: relative;

    padding: 120px 0;
}

.section-heading {
    max-width: 720px;

    margin-bottom: 58px;
}

.section-label {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--accent-light);

    font-size: 12px;
    font-weight: 750;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.section-heading h2,
.about-content h2,
.offer-content h2,
.contact-content h2 {
    font-size: clamp(36px, 5vw, 58px);

    line-height: 1.08;

    letter-spacing: -2px;
}

.section-heading p {
    max-width: 630px;

    margin-top: 20px;

    color: var(--text-muted);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
    display: inline-flex;

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

    gap: 10px;

    min-height: 48px;

    padding: 14px 22px;

    border: 1px solid transparent;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

    color: white;

    box-shadow:
        0 12px 30px rgba(119, 88, 255, 0.23);
}

.button-primary:hover {
    box-shadow:
        0 18px 40px rgba(119, 88, 255, 0.32);
}

.button-secondary {
    background: rgba(255, 255, 255, 0.035);

    border-color: var(--border);

    color: white;
}

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.06);

    border-color: var(--border-hover);
}

.button-small {
    min-height: 44px;

    padding: 10px 18px;

    background: var(--accent);

    color: white;

    border-radius: 10px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    background: rgba(9, 9, 11, 0.72);

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

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

    transition:
        background var(--transition),
        box-shadow var(--transition);
}

.navbar.scrolled {
    background: rgba(9, 9, 11, 0.94);

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.25);
}

.nav-container {
    height: 78px;

    display: flex;

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

    gap: 30px;
}

.logo {
    flex-shrink: 0;

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.6px;
}

.logo span {
    color: var(--accent);
}

.nav-menu {
    display: flex;

    align-items: center;

    gap: 32px;
}

.nav-menu a {
    position: relative;

    color: var(--text-muted);

    font-size: 14px;
    font-weight: 600;

    transition: color var(--transition);
}

.nav-menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--accent);

    border-radius: 20px;

    transition: width var(--transition);
}

.nav-menu a:hover,
.nav-menu a.active {
    color: white;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-button {
    display: none;

    width: 42px;
    height: 42px;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.menu-button span {
    display: block;

    width: 23px;
    height: 2px;

    margin: 5px auto;

    background: white;

    border-radius: 100px;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.menu-button.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-button.is-active span:nth-child(2) {
    opacity: 0;
}

.menu-button.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 145px;
    padding-bottom: 90px;

    overflow: hidden;
}

.hero::before {
    content: "";

    position: absolute;

    width: 680px;
    height: 680px;

    right: -280px;
    top: 20px;

    background: rgba(119, 88, 255, 0.18);

    filter: blur(150px);

    border-radius: 50%;

    pointer-events: none;
}

.hero-container {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(420px, 0.98fr);

    align-items: center;

    gap: 76px;
}

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

.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

    padding: 8px 14px;

    background: rgba(119, 88, 255, 0.07);

    border: 1px solid rgba(119, 88, 255, 0.2);

    border-radius: 999px;

    color: #cfc7ff;

    font-size: 13px;
    font-weight: 600;
}

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

    width: 7px;
    height: 7px;

    background: var(--accent);

    border-radius: 50%;

    box-shadow:
        0 0 12px var(--accent);
}

.hero h1 {
    max-width: 780px;

    margin-bottom: 27px;

    font-size: clamp(50px, 6.1vw, 84px);

    line-height: 0.99;

    letter-spacing: -4px;
}

.highlight {
    display: block;

    background:
        linear-gradient(
            135deg,
            #ded7ff,
            var(--accent-light),
            var(--accent)
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}

.hero-text {
    max-width: 650px;

    margin-bottom: 32px;

    color: var(--text-muted);

    font-size: 18px;

    line-height: 1.8;
}

.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 32px;
}

.hero-features {
    display: flex;

    flex-wrap: wrap;

    gap: 22px;
}

.hero-feature {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-soft);

    font-size: 13px;
}

.check {
    color: var(--accent-light);

    font-weight: 800;
}


/* =========================================================
   HERO WEBSITE MOCKUP
========================================================= */

.hero-visual {
    position: relative;

    display: flex;

    justify-content: center;
}

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

    position: absolute;

    width: 80%;
    height: 80%;

    background: rgba(119, 88, 255, 0.13);

    filter: blur(90px);

    border-radius: 50%;
}

.showcase-window {
    position: relative;

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

    overflow: hidden;

    background: #101015;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    box-shadow:
        0 45px 120px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(119, 88, 255, 0.08);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);
}

.showcase-topbar {
    height: 56px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 0 18px;

    background: #17171d;

    border-bottom: 1px solid var(--border);
}

.showcase-dots {
    display: flex;

    gap: 7px;
}

.showcase-dots span {
    width: 9px;
    height: 9px;

    background: rgba(255, 255, 255, 0.14);

    border-radius: 50%;
}

.showcase-address {
    flex: 1;

    max-width: 290px;

    margin: 0 auto;

    padding: 7px 12px;

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid rgba(255, 255, 255, 0.04);

    border-radius: 8px;

    color: #777781;

    font-size: 10px;

    text-align: center;
}

.showcase-site {
    min-height: 435px;

    padding: 25px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(119, 88, 255, 0.16),
            transparent 30%
        ),
        #0c0c10;
}

.showcase-nav {
    display: flex;

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

    margin-bottom: 54px;
}

.showcase-brand {
    font-size: 14px;
    font-weight: 800;
}

.showcase-brand span {
    color: var(--accent);
}

.showcase-navlinks {
    display: flex;

    gap: 16px;

    color: #787883;

    font-size: 8px;
}

.showcase-main {
    display: grid;

    grid-template-columns: 1.4fr 0.6fr;

    align-items: end;

    gap: 20px;
}

.showcase-badge {
    display: inline-block;

    margin-bottom: 13px;

    padding: 5px 8px;

    background: rgba(119, 88, 255, 0.1);

    border: 1px solid rgba(119, 88, 255, 0.18);

    border-radius: 999px;

    color: #bcb0fa;

    font-size: 7px;
    font-weight: 600;
}

.showcase-copy h3 {
    margin-bottom: 15px;

    font-size: 30px;

    line-height: 1.05;

    letter-spacing: -1.5px;
}

.showcase-copy h3 span {
    display: block;

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

.showcase-copy p {
    max-width: 300px;

    margin-bottom: 20px;

    color: #85858e;

    font-size: 9px;

    line-height: 1.7;
}

.showcase-actions {
    display: flex;

    gap: 8px;
}

.showcase-primary,
.showcase-secondary {
    padding: 9px 12px;

    border-radius: 7px;

    font-size: 8px;
    font-weight: 700;
}

.showcase-primary {
    background: var(--accent);

    color: white;
}

.showcase-secondary {
    background: rgba(255, 255, 255, 0.035);

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

    color: #c5c5ca;
}

.showcase-card {
    min-height: 125px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(119, 88, 255, 0.1),
            rgba(255, 255, 255, 0.02)
        );

    border: 1px solid rgba(119, 88, 255, 0.13);

    border-radius: 14px;
}

.showcase-card-icon {
    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    background: var(--accent);

    border-radius: 8px;

    color: white;

    font-size: 11px;
    font-weight: 700;
}

.showcase-card strong {
    margin-bottom: 3px;

    font-size: 9px;
}

.showcase-card span {
    color: #777781;

    font-size: 7px;
}

.showcase-stats {
    display: grid;

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

    gap: 1px;

    margin-top: 38px;

    overflow: hidden;

    background: var(--border);

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

    border-radius: 11px;
}

.showcase-stats div {
    display: flex;

    flex-direction: column;

    padding: 12px;

    background: #101014;
}

.showcase-stats strong {
    font-size: 13px;
}

.showcase-stats span {
    margin-top: 2px;

    color: #707079;

    font-size: 7px;
}


/* =========================================================
   TRUST
========================================================= */

.trust-section {
    padding: 35px 0 75px;

    border-bottom: 1px solid var(--border);
}

.trust-title {
    margin-bottom: 28px;

    color: var(--text-muted);

    font-size: 12px;
    font-weight: 650;

    letter-spacing: 0.08em;

    text-align: center;

    text-transform: uppercase;
}

.trust-grid {
    display: grid;

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

    overflow: hidden;

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

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

.trust-item {
    min-height: 105px;

    display: flex;

    flex-direction: column;

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

    gap: 5px;

    padding: 22px;

    background: rgba(255, 255, 255, 0.018);

    text-align: center;
}

.trust-item:not(:last-child) {
    border-right: 1px solid var(--border);
}

.trust-item strong {
    font-size: 16px;
}

.trust-item span {
    color: var(--text-muted);

    font-size: 13px;
}


/* =========================================================
   LEISTUNGEN
========================================================= */

.services-grid {
    display: grid;

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

    gap: 18px;
}

.service-card {
    min-height: 330px;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.015)
        );

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

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

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.02)
        );

    border-color: rgba(119, 88, 255, 0.28);
}

.service-number {
    margin-bottom: 50px;

    color: var(--accent-light);

    font-size: 13px;
    font-weight: 700;
}

.service-card h3 {
    margin-bottom: 14px;

    font-size: 25px;
}

.service-card > p {
    max-width: 500px;

    margin-bottom: 27px;

    color: var(--text-muted);

    font-size: 15px;

    line-height: 1.75;
}

.service-card ul {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.service-card li {
    position: relative;

    padding-left: 20px;

    color: var(--text-soft);

    font-size: 13px;
}

.service-card li::before {
    content: "•";

    position: absolute;

    left: 0;

    color: var(--accent);
}


/* =========================================================
   PROJEKTE ALLGEMEIN
========================================================= */

.projects {
    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);
}

.projects-grid {
    display: grid;

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

    gap: 26px;
}

.project-card {
    min-width: 0;
}

.project-featured {
    grid-column: 1 / -1;
}

.project-info {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 4px 0;
}

.project-category {
    display: block;

    margin-bottom: 4px;

    color: var(--text-muted);

    font-size: 12px;
}

.project-info h3 {
    font-size: 18px;
}

.project-description {
    max-width: 550px;

    margin-top: 7px;

    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.65;
}

.project-arrow {
    flex-shrink: 0;

    color: var(--text-muted);

    font-size: 24px;

    transition:
        color var(--transition),
        transform var(--transition);
}

.project-card:hover .project-arrow {
    color: var(--accent-light);

    transform: translate(3px, -3px);
}


/* =========================================================
   KRAFTWERK PROJEKT
========================================================= */

.project-browser {
    overflow: hidden;

    background: #0c0c10;

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

    border-radius: 24px;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.project-featured:hover .project-browser {
    transform: translateY(-5px);

    border-color: rgba(230, 167, 95, 0.3);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.3);
}

.project-browser-bar,
.clean-browser-bar,
.barber-browser-bar {
    height: 48px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 0 16px;
}

.project-browser-bar {
    background: #17171d;

    border-bottom: 1px solid var(--border);
}

.project-browser-dots,
.clean-browser-dots,
.barber-browser-dots {
    display: flex;

    gap: 6px;
}

.project-browser-dots span,
.clean-browser-dots span,
.barber-browser-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.project-browser-dots span {
    background: rgba(255, 255, 255, 0.14);
}

.project-browser-url,
.clean-browser-url,
.barber-browser-url {
    width: 210px;

    margin-inline: auto;

    padding: 5px 10px;

    border-radius: 6px;

    font-size: 8px;

    text-align: center;
}

.project-browser-url {
    background: rgba(255, 255, 255, 0.04);

    color: #676771;
}

.craft-site {
    min-height: 435px;

    padding: 32px;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(230, 167, 95, 0.16),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #15120e,
            #0b0b0c 65%
        );
}

.craft-nav {
    display: flex;

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

    gap: 15px;

    margin-bottom: 65px;
}

.craft-logo {
    font-size: 14px;
    font-weight: 900;
}

.craft-logo span {
    color: #e6a75f;
}

.craft-links {
    display: flex;

    gap: 18px;

    color: #77777f;

    font-size: 8px;
}

.craft-contact {
    padding: 8px 12px;

    background: #e6a75f;

    border-radius: 7px;

    color: #15100a;

    font-size: 8px;
    font-weight: 750;
}

.craft-hero {
    display: grid;

    grid-template-columns: 1.35fr 0.65fr;

    align-items: end;

    gap: 38px;
}

.craft-label {
    display: inline-block;

    margin-bottom: 14px;

    padding: 6px 9px;

    background: rgba(230, 167, 95, 0.08);

    border: 1px solid rgba(230, 167, 95, 0.18);

    border-radius: 999px;

    color: #d8ae80;

    font-size: 8px;
}

.craft-content h3 {
    max-width: 460px;

    margin-bottom: 16px;

    font-size: clamp(34px, 4vw, 50px);

    line-height: 1;

    letter-spacing: -2px;
}

.craft-content h3 span {
    display: block;

    color: #e6a75f;
}

.craft-content p {
    max-width: 330px;

    margin-bottom: 22px;

    color: #808087;

    font-size: 10px;

    line-height: 1.7;
}

.craft-buttons {
    display: flex;

    gap: 9px;
}

.craft-primary,
.craft-secondary {
    padding: 10px 13px;

    border-radius: 7px;

    font-size: 8px;
    font-weight: 700;
}

.craft-primary {
    background: #e6a75f;

    color: #16100a;
}

.craft-secondary {
    border: 1px solid var(--border);

    color: #c0c0c5;
}

.craft-visual {
    min-height: 170px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(230, 167, 95, 0.12),
            rgba(255, 255, 255, 0.015)
        );

    border: 1px solid rgba(230, 167, 95, 0.13);

    border-radius: 16px;
}

.craft-number {
    margin-bottom: 5px;

    color: #e6a75f;

    font-size: 38px;
    font-weight: 850;

    letter-spacing: -1px;
}

.craft-visual span {
    color: #85858d;

    font-size: 8px;
}

.craft-bottom {
    display: grid;

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

    gap: 1px;

    margin-top: 42px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 10px;
}

.craft-bottom div {
    display: flex;

    flex-direction: column;

    padding: 13px 15px;

    background: rgba(10, 10, 12, 0.88);
}

.craft-bottom strong {
    font-size: 13px;
}

.craft-bottom span {
    margin-top: 2px;

    color: #707078;

    font-size: 7px;
}


/* =========================================================
   KLARGLANZ PROJEKT
========================================================= */

.clean-browser {
    min-height: 420px;

    overflow: hidden;

    background: #eef6ff;

    border: 1px solid rgba(112, 169, 222, 0.2);

    border-radius: 22px;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.clean-project:hover .clean-browser {
    transform: translateY(-5px);

    border-color: rgba(67, 145, 220, 0.45);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.22);
}

.clean-browser-bar {
    background: #f7fbff;

    border-bottom: 1px solid #dceaf6;
}

.clean-browser-dots span {
    background: #c6d7e6;
}

.clean-browser-url {
    background: #eaf2f8;

    color: #7d98ad;
}

.clean-site {
    position: relative;

    min-height: 372px;

    padding: 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(50, 151, 255, 0.17),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #eef8ff
        );

    color: #102438;
}

.clean-site::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -70px;
    bottom: -85px;

    background: #1d8fff;

    opacity: 0.08;

    border-radius: 50%;
}

.clean-nav {
    position: relative;

    z-index: 2;

    display: flex;

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

    margin-bottom: 35px;
}

.clean-logo {
    font-size: 13px;
    font-weight: 900;

    letter-spacing: -0.5px;
}

.clean-logo span {
    color: #238be9;
}

.clean-nav-links {
    display: flex;

    gap: 12px;

    color: #7290a7;

    font-size: 7px;
}

.clean-hero {
    position: relative;

    z-index: 2;
}

.clean-kicker {
    display: inline-block;

    margin-bottom: 11px;

    padding: 5px 8px;

    background: #e2f2ff;

    border-radius: 999px;

    color: #2186dd;

    font-size: 7px;
    font-weight: 700;
}

.clean-hero h3 {
    max-width: 420px;

    margin-bottom: 12px;

    font-size: 29px;

    line-height: 1;

    letter-spacing: -1.3px;

    color: #102438;
}

.clean-hero h3 span {
    display: block;

    color: #1f8de8;
}

.clean-hero p {
    max-width: 285px;

    margin-bottom: 17px;

    color: #6b8497;

    font-size: 8px;

    line-height: 1.7;
}

.clean-actions {
    display: flex;

    gap: 8px;

    margin-bottom: 28px;
}

.clean-primary,
.clean-secondary {
    padding: 8px 11px;

    border-radius: 7px;

    font-size: 7px;
    font-weight: 750;
}

.clean-primary {
    background: #218dec;

    color: white;

    box-shadow:
        0 8px 20px rgba(33, 141, 236, 0.22);
}

.clean-secondary {
    background: white;

    border: 1px solid #d8e7f3;

    color: #54728a;
}

.clean-services {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 8px;
}

.clean-services div {
    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 10px;

    background: rgba(255, 255, 255, 0.75);

    border: 1px solid #deebf5;

    border-radius: 9px;
}

.clean-services span {
    color: #218dec;

    font-size: 7px;
    font-weight: 800;
}

.clean-services strong {
    color: #294256;

    font-size: 7px;
}

.clean-rating {
    position: absolute;

    right: 22px;
    top: 112px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    background: white;

    border: 1px solid #dceaf4;

    border-radius: 11px;

    box-shadow:
        0 12px 28px rgba(36, 92, 132, 0.12);
}

.clean-rating strong {
    color: #102438;

    font-size: 17px;
}

.clean-rating div {
    display: flex;

    flex-direction: column;
}

.clean-rating div > span {
    color: #ffb02e;

    font-size: 7px;

    letter-spacing: 1px;
}

.clean-rating small {
    color: #89a0b2;

    font-size: 6px;
}


/* =========================================================
   NOIR BARBER PROJEKT
========================================================= */

.barber-browser {
    min-height: 420px;

    overflow: hidden;

    background: #0c0b0a;

    border: 1px solid rgba(201, 164, 92, 0.18);

    border-radius: 22px;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.barber-project:hover .barber-browser {
    transform: translateY(-5px);

    border-color: rgba(201, 164, 92, 0.45);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.4);
}

.barber-browser-bar {
    background: #171512;

    border-bottom: 1px solid rgba(201, 164, 92, 0.12);
}

.barber-browser-dots span {
    background: rgba(255, 255, 255, 0.12);
}

.barber-browser-url {
    background: rgba(255, 255, 255, 0.035);

    color: #6d665d;
}

.barber-site {
    position: relative;

    min-height: 372px;

    padding: 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(201, 164, 92, 0.13),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #151310,
            #080807
        );

    color: #f1ece2;
}

.barber-site::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

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

    border: 1px solid rgba(201, 164, 92, 0.12);

    border-radius: 50%;
}

.barber-nav {
    position: relative;

    z-index: 2;

    display: flex;

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

    gap: 15px;

    margin-bottom: 43px;
}

.barber-logo {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: #f4efe6;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 2px;
}

.barber-logo span {
    color: #c9a45c;
}

.barber-nav-links {
    display: flex;

    gap: 14px;

    color: #837b6f;

    font-size: 7px;
}

.barber-book {
    padding: 8px 11px;

    background: #c9a45c;

    border-radius: 5px;

    color: #12100c;

    font-size: 7px;
    font-weight: 800;
}

.barber-hero {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1.35fr 0.65fr;

    align-items: end;

    gap: 20px;
}

.barber-kicker {
    display: inline-block;

    margin-bottom: 12px;

    color: #c9a45c;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.barber-content h3 {
    max-width: 320px;

    margin-bottom: 13px;

    color: #f6f1e7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -1px;
}

.barber-content h3 span {
    display: block;

    color: #c9a45c;
}

.barber-content p {
    max-width: 280px;

    margin-bottom: 18px;

    color: #817a70;

    font-size: 8px;

    line-height: 1.7;
}

.barber-actions {
    display: flex;

    gap: 8px;
}

.barber-primary,
.barber-secondary {
    padding: 8px 11px;

    border-radius: 5px;

    font-size: 7px;
    font-weight: 750;
}

.barber-primary {
    background: #c9a45c;

    color: #15120d;
}

.barber-secondary {
    background: transparent;

    border: 1px solid rgba(201, 164, 92, 0.22);

    color: #aaa195;
}

.barber-price-card {
    min-height: 140px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(201, 164, 92, 0.1),
            rgba(255, 255, 255, 0.015)
        );

    border: 1px solid rgba(201, 164, 92, 0.17);

    border-radius: 12px;
}

.barber-price-label {
    margin-bottom: 14px;

    color: #8f836f;

    font-size: 6px;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}

.barber-price-card strong {
    margin-bottom: 3px;

    color: #eee8de;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;
}

.barber-price {
    color: #c9a45c;

    font-size: 26px;
    font-weight: 700;
}

.barber-price-card small {
    color: #756e64;

    font-size: 6px;
}

.barber-services {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 1px;

    margin-top: 28px;

    overflow: hidden;

    background: rgba(201, 164, 92, 0.13);

    border: 1px solid rgba(201, 164, 92, 0.12);

    border-radius: 8px;
}

.barber-services div {
    display: flex;

    flex-direction: column;

    padding: 10px 12px;

    background: rgba(10, 9, 8, 0.94);
}

.barber-services span {
    margin-bottom: 5px;

    color: #776b59;

    font-size: 6px;
}

.barber-services strong {
    color: #ded7cb;

    font-size: 8px;
}

.barber-services small {
    margin-top: 2px;

    color: #c9a45c;

    font-size: 6px;
}

.barber-footer-line {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    margin-top: 13px;

    color: #5f5951;

    font-size: 6px;

    letter-spacing: 0.05em;
}


/* =========================================================
   ABLAUF
========================================================= */

.process-grid {
    display: grid;

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

    gap: 1px;

    overflow: hidden;

    background: var(--border);

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

    border-radius: var(--radius-large);
}

.process-item {
    min-height: 285px;

    padding: 31px;

    background: var(--bg);
}

.process-number {
    display: inline-block;

    margin-bottom: 60px;

    color: var(--accent-light);

    font-size: 13px;
    font-weight: 750;
}

.process-item h3 {
    margin-bottom: 12px;

    font-size: 20px;
}

.process-item p {
    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   ÜBER MICH
========================================================= */

.about {
    border-top: 1px solid var(--border);
}

.about-container {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 90px;
}

.about-visual {
    position: relative;

    min-height: 480px;

    display: flex;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(119, 88, 255, 0.24),
            transparent 38%
        ),
        var(--bg-soft);

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

    border-radius: var(--radius-large);
}

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

    position: absolute;

    width: 230px;
    height: 230px;

    border: 1px solid rgba(119, 88, 255, 0.22);

    border-radius: 50%;
}

.about-card {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 20px 25px;

    background: rgba(14, 14, 18, 0.78);

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

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 18px;

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

.about-initials {
    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

    border-radius: 15px;

    font-size: 19px;
    font-weight: 800;
}

.about-card div {
    display: flex;

    flex-direction: column;
}

.about-card div span {
    margin-top: 2px;

    color: var(--text-muted);

    font-size: 12px;
}

.about-content {
    max-width: 620px;
}

.about-content h2 {
    margin-bottom: 28px;
}

.about-content > p {
    margin-bottom: 17px;

    color: var(--text-muted);

    font-size: 16px;

    line-height: 1.8;
}

.about-points {
    display: grid;

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

    gap: 12px;

    margin: 30px 0;
}

.about-points div {
    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--text-soft);

    font-size: 14px;
}

.about-points span {
    color: var(--accent-light);

    font-weight: 800;
}


/* =========================================================
   ANGEBOT
========================================================= */

.offer {
    padding-top: 40px;
}

.offer-card {
    display: grid;

    grid-template-columns: 1.3fr 0.7fr;

    gap: 60px;

    padding: 60px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(119, 88, 255, 0.18),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #15151b,
            #101014
        );

    border: 1px solid rgba(119, 88, 255, 0.16);

    border-radius: 30px;
}

.offer-content h2 {
    margin-bottom: 20px;
}

.offer-content > p {
    max-width: 550px;

    color: var(--text-muted);

    line-height: 1.8;
}

.offer-features {
    display: grid;

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

    gap: 13px 24px;

    margin-top: 32px;
}

.offer-features span {
    color: var(--text-soft);

    font-size: 14px;
}

.offer-price {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 30px;

    background: rgba(255, 255, 255, 0.025);

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

    border-radius: 20px;
}

.price-label {
    margin-bottom: 10px;

    color: var(--text-muted);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.price {
    margin-bottom: 12px;

    font-size: clamp(42px, 5vw, 60px);
    font-weight: 800;

    letter-spacing: -2px;
}

.price span {
    margin-right: 4px;

    color: var(--text-muted);

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0;
}

.offer-price p {
    margin-bottom: 25px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   KONTAKT
========================================================= */

.contact {
    border-top: 1px solid var(--border);
}

.contact-container {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    align-items: start;

    gap: 80px;
}

.contact-content {
    position: sticky;

    top: 130px;
}

.contact-content h2 {
    margin-bottom: 23px;
}

.contact-content > p {
    max-width: 460px;

    color: var(--text-muted);

    font-size: 16px;

    line-height: 1.8;
}

.contact-note {
    display: inline-flex;

    margin-top: 25px;

    padding: 10px 14px;

    background: rgba(119, 88, 255, 0.07);

    border: 1px solid rgba(119, 88, 255, 0.15);

    border-radius: 999px;

    color: #bbb0f8;

    font-size: 12px;
}

.contact-form {
    padding: 34px;

    background: rgba(255, 255, 255, 0.022);

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

    border-radius: var(--radius-large);
}

.form-row {
    display: grid;

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

    gap: 16px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: var(--text-soft);

    font-size: 12px;
    font-weight: 600;
}

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

    padding: 14px 15px;

    background: #0d0d11;

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

    border-radius: 11px;

    color: var(--text);

    outline: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-group textarea {
    min-height: 155px;

    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #5f5f68;
}

.form-group input:focus,
.form-group textarea:focus {
    background: #101014;

    border-color: rgba(119, 88, 255, 0.65);

    box-shadow:
        0 0 0 4px rgba(119, 88, 255, 0.09);
}

.form-button {
    width: 100%;
}

.form-button:disabled {
    cursor: not-allowed;

    opacity: 0.65;

    transform: none;

    box-shadow: none;
}

.form-status {
    min-height: 22px;

    margin-top: 15px;

    font-size: 13px;
}

.form-status.success {
    color: var(--success);
}

.form-status.error {
    color: var(--error);
}

.form-status.sending {
    color: var(--accent-light);
}

.form-info {
    margin-top: 8px;

    color: #686873;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    padding-top: 70px;

    background: #070708;

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

.footer-container {
    display: grid;

    grid-template-columns: 1.4fr 1fr 0.7fr;

    gap: 60px;

    padding-bottom: 55px;
}

.footer-brand p {
    max-width: 320px;

    margin-top: 14px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.7;
}

.footer-links,
.footer-legal {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.footer-links a,
.footer-legal a {
    width: fit-content;

    color: var(--text-muted);

    font-size: 13px;

    transition: color var(--transition);
}

.footer-links a:hover,
.footer-legal a:hover {
    color: white;
}

.footer-bottom {
    padding: 22px 0;

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

/* Verbesserter Kontrast für Lighthouse / Accessibility */
.footer-bottom p {
    color: #92929d;

    font-size: 11px;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .hero-container {
        grid-template-columns: 1fr;

        gap: 70px;
    }

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

    .hero-visual {
        max-width: 650px;

        margin-inline: auto;
    }

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

    .about-container {
        gap: 55px;
    }

    .offer-card {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .offer-price {
        max-width: 500px;
    }

}


/* =========================================================
   MOBILE NAV / TABLET
========================================================= */

@media (max-width: 820px) {

    .nav-cta {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .nav-menu {
        position: absolute;

        top: calc(100% + 1px);
        left: 24px;
        right: 24px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px;

        background: rgba(17, 17, 21, 0.98);

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

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

        border-radius: 14px;

        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.45);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(-10px);

        transition:
            opacity var(--transition),
            visibility var(--transition),
            transform var(--transition);
    }

    .nav-menu.is-open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }

    .nav-menu a {
        min-height: 46px;

        display: flex;

        align-items: center;

        padding: 12px 14px;

        border-radius: 9px;
    }

    .nav-menu a:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    .nav-menu a::after {
        display: none;
    }

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

    .trust-item:nth-child(2) {
        border-right: 0;
    }

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

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

    .project-featured {
        grid-column: auto;
    }

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

    .contact-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact-content {
        position: static;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: span 2;
    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    .container {
        width: calc(100% - 30px);
    }

    .section {
        padding: 85px 0;
    }

    .nav-container {
        height: 70px;
    }

    .logo {
        font-size: 18px;
    }

    .hero {
        min-height: auto;

        padding-top: 120px;
        padding-bottom: 70px;
    }

    .hero-container {
        gap: 55px;
    }

    .hero h1 {
        font-size: clamp(42px, 13vw, 60px);

        letter-spacing: -2.5px;
    }

    .hero-text {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .button {
        width: 100%;
    }

    .hero-features {
        flex-direction: column;

        gap: 10px;
    }

    .showcase-window {
        transform: none;

        border-radius: 18px;
    }

    .showcase-site {
        min-height: auto;

        padding: 18px;
    }

    .showcase-nav {
        margin-bottom: 38px;
    }

    .showcase-main {
        grid-template-columns: 1fr;
    }

    .showcase-card,
    .showcase-navlinks {
        display: none;
    }

    .showcase-copy h3 {
        font-size: 26px;
    }

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

    .trust-item {
        border-right: 0 !important;

        border-bottom: 1px solid var(--border);
    }

    .trust-item:last-child {
        border-bottom: 0;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2,
    .about-content h2,
    .offer-content h2,
    .contact-content h2 {
        font-size: 38px;

        letter-spacing: -1.4px;
    }

    .service-card {
        min-height: auto;

        padding: 27px;
    }

    .service-number {
        margin-bottom: 35px;
    }

    .project-browser,
    .clean-browser,
    .barber-browser {
        min-height: auto;
    }

    .craft-site,
    .clean-site,
    .barber-site {
        min-height: auto;

        padding: 18px;
    }

    .craft-nav,
    .barber-nav {
        margin-bottom: 38px;
    }

    .craft-links,
    .craft-contact,
    .clean-nav-links,
    .barber-nav-links,
    .barber-book {
        display: none;
    }

    .craft-hero,
    .barber-hero {
        grid-template-columns: 1fr;
    }

    .craft-content h3 {
        font-size: 30px;

        letter-spacing: -1.3px;
    }

    .craft-visual,
    .barber-price-card {
        display: none;
    }

    .craft-bottom {
        margin-top: 30px;
    }

    .craft-bottom div {
        padding: 10px;
    }

    .clean-rating {
        position: static;

        width: fit-content;

        margin-top: 15px;
    }

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

    .barber-content h3 {
        font-size: 28px;
    }

    .barber-services {
        margin-top: 25px;
    }

    .barber-footer-line {
        flex-direction: column;

        gap: 4px;
    }

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

    .process-item {
        min-height: auto;

        padding: 27px;
    }

    .process-number {
        margin-bottom: 38px;
    }

    .about-visual {
        min-height: 330px;
    }

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

    .offer {
        padding-top: 10px;
    }

    .offer-card {
        padding: 30px 23px;

        border-radius: 22px;
    }

    .offer-features {
        grid-template-columns: 1fr;
    }

    .offer-price {
        padding: 24px;
    }

    .contact-form {
        padding: 24px 20px;
    }

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

        gap: 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
========================================================= */

@media (max-width: 380px) {

    .container {
        width: calc(100% - 24px);
    }

    .hero h1 {
        font-size: 39px;

        letter-spacing: -2px;
    }

    .section-heading h2,
    .about-content h2,
    .offer-content h2,
    .contact-content h2 {
        font-size: 34px;
    }

    .contact-form {
        padding: 20px 16px;
    }

    .craft-bottom {
        grid-template-columns: 1fr;
    }

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

    .showcase-stats {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;

        transform: none;
    }

}