@extends('layouts.app')
@section('ownCta', '1') {{-- eigene Pre-Footer-CTA (.wd-cta) → generische Footer-CTA unterdrücken --}}

@php
    // Locale ONLY via first URL segment.
    $siteLocale = in_array(request()->segment(1), ['de','en'], true) ? request()->segment(1) : 'de';
    $en = $siteLocale === 'en';
    $t  = fn ($de, $enT) => $en ? $enT : $de;
    $lp = $en ? 'en/' : '';

    // Showroom — 20 live demos at /demo/{slug}. cat is ['de','en'].
    $templates = [
        ['name' => 'Der Handwerker', 'cat' => ['Bau & Montage','Construction'], 'slug' => 'handwerk'],
        ['name' => 'Lumina Bistro', 'cat' => ['Gastronomie','Food & Drink'], 'slug' => 'bistro'],
        ['name' => 'Creative Studio', 'cat' => ['Design Agency','Design Agency'], 'slug' => 'agency'],
        ['name' => 'FitLife Gym', 'cat' => ['Sport & Fitness','Sports & Fitness'], 'slug' => 'fitness'],
        ['name' => 'Kanzlei Modern', 'cat' => ['Recht & Beratung','Law & Consulting'], 'slug' => 'lawyer'],
        ['name' => 'Clean Dental', 'cat' => ['Medizin','Medical'], 'slug' => 'doctor'],
        ['name' => 'Auto-Service', 'cat' => ['Werkstatt','Auto Repair'], 'slug' => 'auto'],
        ['name' => 'Photo-Focus', 'cat' => ['Fotografie','Photography'], 'slug' => 'photo'],
        ['name' => 'Green Garden', 'cat' => ['Gartenbau','Landscaping'], 'slug' => 'garden'],
        ['name' => 'Smart Home UI', 'cat' => ['Technik','Tech'], 'slug' => 'smarthome'],
        ['name' => 'Yoga Flow', 'cat' => ['Wellness','Wellness'], 'slug' => 'yoga'],
        ['name' => 'ImmoScout Design', 'cat' => ['Immobilien','Real Estate'], 'slug' => 'immo'],
        ['name' => 'Personal Brand', 'cat' => ['Coaching','Coaching'], 'slug' => 'coach'],
        ['name' => 'KotschFlow SaaS', 'cat' => ['Software','Software'], 'slug' => 'saas'],
        ['name' => 'Nature Travel', 'cat' => ['Reisen','Travel'], 'slug' => 'travel'],
        ['name' => 'Music Hub', 'cat' => ['Entertainment','Entertainment'], 'slug' => 'music'],
        ['name' => 'Nightlife Club', 'cat' => ['Events','Events'], 'slug' => 'event'],
        ['name' => 'Industrial Tech', 'cat' => ['Industrie','Industry'], 'slug' => 'industry'],
        ['name' => 'Café Aroma', 'cat' => ['Gastronomie','Food & Drink'], 'slug' => 'cafe'],
        ['name' => 'Pixel Portfolio', 'cat' => ['Grafikdesign','Graphic Design'], 'slug' => 'pixel'],
    ];

    $services = [
        [
            'icon' => 'fa-pen-ruler',
            'num'  => '01',
            'title'=> $t('UI/UX Design', 'UI/UX Design'),
            'lead' => $t('Individuelle Designs, genau auf die Marke zugeschnitten.', 'Bespoke designs, tailored precisely to your brand.'),
            'body' => $t('Modern, sauber, benutzerfreundlich — jedes Pixel mit Absicht gesetzt. Kein Theme von der Stange, sondern eine Bildsprache, die nur zu dir passt.', 'Modern, clean, user-friendly — every pixel placed on purpose. No off-the-shelf theme, but a visual language built only for you.'),
        ],
        [
            'icon' => 'fa-code',
            'num'  => '02',
            'title'=> $t('Full-Stack Entwicklung', 'Full-Stack Development'),
            'lead' => $t('Skalierbare Backends, blitzschnelle Frontends.', 'Scalable backends, lightning-fast frontends.'),
            'body' => $t('Sauberer, handgeschriebener Code mit Laravel, Vue.js und Tailwind CSS. Solide gebaut, wartbar und bereit zu wachsen — keine Baukasten-Kompromisse.', 'Clean, hand-written code with Laravel, Vue.js and Tailwind CSS. Built solid, maintainable and ready to scale — no page-builder compromises.'),
        ],
        [
            'icon' => 'fa-gauge-high',
            'num'  => '03',
            'title'=> $t('SEO & Speed', 'SEO & Speed'),
            'lead' => $t('Optimiert auf Sichtbarkeit und Ladezeit.', 'Optimised for visibility and load time.'),
            'body' => $t('Saubere Struktur, schnelle Ladezeiten und passende Meta-Daten als solide Grundlage. Performance, die man fühlt — und die Suchmaschinen verstehen.', 'Clean structure, fast load times and proper meta data as a solid foundation. Performance you feel — and that search engines understand.'),
        ],
    ];

    $process = [
        [
            'icon' => 'fa-wand-magic-sparkles',
            'step' => $t('Schritt 01', 'Step 01'),
            'title'=> $t('Konzept & Wireframing', 'Concept & Wireframing'),
            'body' => $t('Wir planen Struktur und Nutzererlebnis, bevor die erste Farbe fällt. Das Fundament entscheidet über alles, was darauf steht.', 'We plan structure and user experience before the first colour drops. The foundation decides everything built on top of it.'),
        ],
        [
            'icon' => 'fa-palette',
            'step' => $t('Schritt 02', 'Step 02'),
            'title'=> $t('Design & Feedback', 'Design & Feedback'),
            'body' => $t('Ein exklusives Design entsteht — und wird gemeinsam verfeinert, bis jedes Detail sitzt. Deine Marke führt, wir setzen sie um.', 'An exclusive design takes shape — refined together until every detail lands. Your brand leads, we execute it.'),
        ],
        [
            'icon' => 'fa-code',
            'step' => $t('Schritt 03', 'Step 03'),
            'title'=> $t('Programmierung', 'Engineering'),
            'body' => $t('Handgeschriebener, sauberer Code für maximale Performance. Pixelgenau umgesetzt, schnell ausgeliefert, gebaut um zu bleiben.', 'Hand-written, clean code for maximum performance. Pixel-perfect, fast to ship, built to last.'),
        ],
    ];
@endphp

@section('title'){{ $t('Webdesign Studio — individuelle Web-Anwendungen | KOTSCH.TECH', 'Web Design Studio — bespoke web applications | KOTSCH.TECH') }}@endsection

@section('meta_description'){{ $t('Webdesign-Studio von Arthur Kotsch: keine Standard-Templates, sondern individuelle, schnelle Web-Anwendungen mit Laravel, Vue.js und Tailwind. Plus 20 Live-Design-Demos.', 'Web design studio by Arthur Kotsch: no standard templates, but bespoke, fast web applications with Laravel, Vue.js and Tailwind. Plus 20 live design demos.') }}@endsection

@section('content')

    {{-- ============================ HERO ============================ --}}
    <header class="wd-hero reveal active">
        <span class="wd-paint-row" aria-hidden="true">
            <span class="wd-chip wd-chip-a"></span>
            <span class="wd-chip wd-chip-b"></span>
            <span class="wd-chip wd-chip-c"></span>
            <span class="wd-chip wd-chip-d"></span>
        </span>

        <span class="wd-eyebrow">{{ $t('Webdesign Studio · Arthur Kotsch', 'Web Design Studio · Arthur Kotsch') }}</span>

        <h1 class="wd-hero-title">
            <span class="wd-line">{{ $t('Wir bauen keine', 'We don’t build') }}</span>
            <span class="wd-line wd-strike">{{ $t('Standard-Templates.', 'standard templates.') }}</span>
            <span class="wd-line wd-grad">{{ $t('Wir bauen deine Marke.', 'We build your brand.') }}</span>
        </h1>

        <p class="wd-hero-lead">
            {{ $t('Individuelle, schnelle Web-Anwendungen mit modernen Technologien — Laravel, Vue.js, Tailwind CSS und sauberem, handgeschriebenem Code. Das Design auf dieser Seite ist das Portfolio.', 'Bespoke, fast web applications built with modern technology — Laravel, Vue.js, Tailwind CSS and clean, hand-written code. The design of this page is the portfolio.') }}
        </p>

        <div class="wd-hero-cta">
            <a href="/{{ $lp }}kontakt?subject=Webdesign" class="wd-btn wd-btn-primary">
                <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i>
                {{ $t('Projekt anfragen', 'Start a project') }}
            </a>
            <a href="#wd-vorlagen" class="wd-btn wd-btn-ghost">
                {{ $t('Live-Demos ansehen', 'See live demos') }}
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
            </a>
        </div>

        <ul class="wd-stack">
            <li><span class="wd-dot"></span>Laravel</li>
            <li><span class="wd-dot"></span>Vue.js</li>
            <li><span class="wd-dot"></span>Tailwind CSS</li>
            <li><span class="wd-dot"></span>{{ $t('Handcode', 'Hand-code') }}</li>
        </ul>
    </header>

    {{-- ============================ SERVICES ============================ --}}
    <section id="wd-leistungen" class="wd-section wd-services">
        <div class="wd-section-head reveal">
            <span class="wd-kicker"><span class="wd-kicker-swatch"></span>{{ $t('Leistungen', 'Services') }}</span>
            <h2 class="wd-h2">{{ $t('Drei Disziplinen,', 'Three disciplines,') }} <em>{{ $t('ein Anspruch.', 'one standard.') }}</em></h2>
            <p class="wd-sub">{{ $t('Von der ersten Skizze bis zur letzten Zeile Code — alles aus einer Hand, alles handgemacht.', 'From the first sketch to the last line of code — all from one hand, all hand-made.') }}</p>
        </div>

        <div class="wd-services-grid reveal stagger">
            @foreach($services as $svc)
                <article class="wd-service-card">
                    <span class="wd-service-num" aria-hidden="true">{{ $svc['num'] }}</span>
                    <span class="wd-service-icon"><i class="fa-solid {{ $svc['icon'] }}" aria-hidden="true"></i></span>
                    <h3 class="wd-service-title">{{ $svc['title'] }}</h3>
                    <p class="wd-service-lead">{{ $svc['lead'] }}</p>
                    <p class="wd-service-body">{{ $svc['body'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    {{-- ============================ SHOWROOM ============================ --}}
    <section id="wd-vorlagen" class="wd-section wd-showroom">
        <div class="wd-showroom-head reveal">
            <div class="wd-showroom-head-main">
                <span class="wd-kicker"><span class="wd-kicker-swatch"></span>{{ $t('Showroom · Live-Demos', 'Showroom · Live Demos') }}</span>
                <h2 class="wd-h2 wd-h2-xl">
                    {{ $t('20 echte Seiten.', '20 real pages.') }}<br>
                    <span class="wd-grad">{{ $t('Live, nicht gerendert.', 'Live, not rendered.') }}</span>
                </h2>
            </div>
            <p class="wd-showroom-head-note">
                {{ $t('Jede Kachel ist eine echte, laufende Demo-Seite für eine Branche. Klicke dich in jede Welt hinein — alles live unter /demo.', 'Every tile is a real, running demo page for an industry. Step into each world — all live under /demo.') }}
            </p>
        </div>

        <div class="wd-disclaimer reveal">
            <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
            <p>{{ $t('Design-Demos als Inspiration und Ausgangspunkt — nicht als fertige Produkte. Kundenprojekte werden individuell angepasst, nicht 1:1 als Standard-Template geliefert.', 'Design demos as inspiration and a starting point — not finished products. Client projects are individually tailored, not delivered 1:1 as a standard template.') }}</p>
        </div>

        <div class="wd-gallery reveal">
            @foreach($templates as $i => $tpl)
                <a href="/demo/{{ $tpl['slug'] }}" class="wd-card">
                    <span class="wd-browser" aria-hidden="true">
                        <span class="wd-browser-bar">
                            <span class="wd-browser-dot"></span>
                            <span class="wd-browser-dot"></span>
                            <span class="wd-browser-dot"></span>
                            <span class="wd-browser-url">/demo/{{ $tpl['slug'] }}</span>
                        </span>
                    </span>
                    <span class="wd-shot">
                        <span class="wd-shot-overlay">
                            <span class="wd-shot-cue">{{ $t('Vollbild öffnen', 'Open full screen') }} <i class="fa-solid fa-up-right-and-down-left-from-center" aria-hidden="true"></i></span>
                        </span>
                        <iframe src="/demo/{{ $tpl['slug'] }}" loading="lazy" tabindex="-1" title="{{ $t('Live-Vorschau:', 'Live preview:') }} {{ $tpl['name'] }}"></iframe>
                    </span>
                    <span class="wd-card-foot">
                        <span class="wd-card-meta">
                            <span class="wd-card-cat">{{ $t(...$tpl['cat']) }}</span>
                            <span class="wd-card-name">{{ $tpl['name'] }}</span>
                        </span>
                        <span class="wd-card-go" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
                    </span>
                </a>
            @endforeach
        </div>

        <div class="wd-disclaimer wd-disclaimer-seo reveal">
            <i class="fa-solid fa-magnifying-glass-chart" aria-hidden="true"></i>
            <p>{{ $t('Grundlegend SEO-vorbereitet: saubere Struktur, schnelle Ladezeiten, klare Inhalte und passende Meta-Daten. Keine Garantie für bestimmte Google-Rankings.', 'Fundamentally SEO-prepared: clean structure, fast load times, clear content and proper meta data. No guarantee of specific Google rankings.') }}</p>
        </div>
    </section>

    {{-- ============================ PROCESS ============================ --}}
    <section id="wd-ablauf" class="wd-section wd-process">
        <div class="wd-section-head reveal">
            <span class="wd-kicker"><span class="wd-kicker-swatch"></span>{{ $t('Ablauf', 'Process') }}</span>
            <h2 class="wd-h2">{{ $t('Vom Whiteboard', 'From whiteboard') }} <em>{{ $t('zum Launch.', 'to launch.') }}</em></h2>
            <p class="wd-sub">{{ $t('Drei klare Schritte. Kein Rätselraten, keine Black-Box.', 'Three clear steps. No guesswork, no black box.') }}</p>
        </div>

        <div class="wd-process-grid reveal stagger">
            @foreach($process as $idx => $step)
                <article class="wd-step">
                    <span class="wd-step-rail" aria-hidden="true"></span>
                    <span class="wd-step-icon"><i class="fa-solid {{ $step['icon'] }}" aria-hidden="true"></i></span>
                    <span class="wd-step-tag">{{ $step['step'] }}</span>
                    <h3 class="wd-step-title">{{ $step['title'] }}</h3>
                    <p class="wd-step-body">{{ $step['body'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    {{-- ============================ FINAL CTA (dark) ============================ --}}
    <section id="wd-kontakt" class="wd-cta reveal">
        <span class="wd-cta-paint" aria-hidden="true">
            <span class="wd-chip wd-chip-a"></span>
            <span class="wd-chip wd-chip-b"></span>
            <span class="wd-chip wd-chip-c"></span>
            <span class="wd-chip wd-chip-d"></span>
        </span>
        <span class="wd-kicker wd-kicker-dark"><span class="wd-kicker-swatch"></span>{{ $t('Kontakt', 'Get in touch') }}</span>
        <h2 class="wd-cta-title">
            {{ $t('Bereit für eine Seite,', 'Ready for a site') }}<br>
            <span class="wd-grad">{{ $t('die niemandem sonst gehört?', 'that belongs to no one else?') }}</span>
        </h2>
        <p class="wd-cta-lead">
            {{ $t('Erzähl uns von deinem Projekt — wir antworten mit einem individuellen Konzept, nicht mit einem Template.', 'Tell us about your project — we reply with a bespoke concept, not a template.') }}
        </p>
        <a href="/{{ $lp }}kontakt?subject=Webdesign" class="wd-btn wd-btn-cta">
            <i class="fa-solid fa-pen-ruler" aria-hidden="true"></i>
            {{ $t('Projekt anfragen', 'Start a project') }}
            <i class="fa-solid fa-arrow-right wd-btn-cta-arrow" aria-hidden="true"></i>
        </a>
    </section>

@endsection

<style>
    /* ============================================================
       WEBDESIGN STUDIO — Direction A: Bold Editorial
       All classes prefixed wd-. Light mode; single dark band = #wd-kontakt.
       ============================================================ */

    .wd-section {
        position: relative;
        max-width: 1280px;
        margin: 0 auto;
        padding: 110px clamp(1.25rem, 5vw, 4rem);
        scroll-margin-top: 84px;
    }
    section[id^="wd-"] { scroll-margin-top: 84px; }

    .wd-grad {
        background: linear-gradient(115deg, var(--primary) 0%, var(--accent-2) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    /* ---------- shared headings ---------- */
    .wd-kicker {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--primary);
    }
    .wd-kicker-swatch {
        width: 2.2rem;
        height: .7rem;
        border-radius: 3px;
        flex: 0 0 auto;
        background: linear-gradient(90deg, var(--primary), var(--accent-2));
    }
    .wd-kicker-dark { color: #fff; }

    .wd-h2 {
        font-size: clamp(2rem, 5.2vw, 3.6rem);
        line-height: 1.02;
        font-weight: 800;
        letter-spacing: -.03em;
        margin: .7rem 0 0;
        color: var(--text-main);
        overflow-wrap: anywhere;
    }
    .wd-h2 em { font-style: normal; }
    .wd-h2-xl { font-size: clamp(2.3rem, 7vw, 5rem); }
    .wd-sub {
        max-width: 56ch;
        margin: 1rem 0 0;
        font-size: 1.08rem;
        line-height: 1.7;
        color: var(--text-muted);
        overflow-wrap: anywhere;
    }
    .wd-section-head { margin-bottom: 3.5rem; }

    /* ============================ HERO ============================ */
    .wd-hero {
        position: relative;
        max-width: 1180px;
        margin: 0 auto;
        padding: clamp(7rem, 13vw, 10rem) clamp(1.25rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
        overflow: hidden;
    }
    .wd-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(circle at 86% 6%, var(--primary-soft), transparent 42%),
            radial-gradient(circle at 4% 78%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 46%);
        pointer-events: none;
    }
    .wd-hero::after {
        content: "";
        position: absolute;
        top: clamp(-4rem, -6vw, -2rem);
        right: clamp(-6rem, -8vw, -3rem);
        width: clamp(16rem, 34vw, 30rem);
        height: clamp(16rem, 34vw, 30rem);
        z-index: -1;
        border-radius: 50%;
        background: conic-gradient(from 140deg, var(--primary-glow), color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%);
        filter: blur(28px);
        opacity: .55;
        pointer-events: none;
    }

    .wd-paint-row {
        display: flex;
        gap: .55rem;
        margin-bottom: 1.6rem;
    }
    .wd-chip {
        width: clamp(2.4rem, 6vw, 3.6rem);
        height: clamp(.9rem, 1.8vw, 1.2rem);
        border-radius: 4px;
        box-shadow: 0 6px 18px -8px rgba(15,23,42,.35);
    }
    .wd-chip-a { background: var(--primary); }
    .wd-chip-b { background: color-mix(in srgb, var(--primary) 55%, var(--accent-2)); }
    .wd-chip-c { background: color-mix(in srgb, var(--accent-2) 65%, var(--primary)); }
    .wd-chip-d { background: var(--accent-2); }

    .wd-eyebrow {
        display: inline-block;
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--primary);
    }

    .wd-hero-title {
        margin: 1.1rem 0 0;
        font-size: clamp(2.6rem, 9vw, 6.2rem);
        line-height: .98;
        font-weight: 800;
        letter-spacing: -.04em;
        color: var(--text-main);
        overflow-wrap: anywhere;
    }
    .wd-line { display: block; }
    .wd-strike {
        position: relative;
        color: var(--text-muted);
        width: fit-content;
        max-width: 100%;
    }
    .wd-strike::after {
        content: "";
        position: absolute;
        left: -.1em;
        right: -.1em;
        top: 52%;
        height: clamp(4px, .9vw, 9px);
        border-radius: 6px;
        background: linear-gradient(90deg, var(--primary), var(--accent-2));
        transform: rotate(-1.6deg);
    }

    .wd-hero-lead {
        max-width: 60ch;
        margin: 1.7rem 0 0;
        font-size: clamp(1.05rem, 2vw, 1.35rem);
        line-height: 1.65;
        color: var(--text-muted);
        overflow-wrap: anywhere;
    }

    .wd-hero-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 2.4rem;
    }

    .wd-btn {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        min-height: var(--tap-min);
        padding: .95rem 1.7rem;
        border-radius: 980px;
        font-weight: 800;
        font-size: 1rem;
        text-decoration: none;
        letter-spacing: -.01em;
        transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
        will-change: transform;
    }
    .wd-btn-primary {
        color: #fff;
        background: linear-gradient(120deg, var(--primary), var(--accent-2));
        box-shadow: 0 16px 34px -14px var(--accent-2);
    }
    .wd-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px var(--primary); }
    .wd-btn-ghost {
        color: var(--text-main);
        background: #fff;
        border: 1.5px solid color-mix(in srgb, var(--primary) 30%, #e2e8f0);
    }
    .wd-btn-ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }

    .wd-stack {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem 1.6rem;
        margin: 2.6rem 0 0;
        padding: 0;
        list-style: none;
    }
    .wd-stack li {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
        font-weight: 700;
        font-size: .95rem;
        color: var(--text-main);
    }
    .wd-dot {
        width: .55rem;
        height: .55rem;
        border-radius: 50%;
        flex: 0 0 auto;
        background: linear-gradient(135deg, var(--primary), var(--accent-2));
    }

    /* ============================ SERVICES ============================ */
    .wd-services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
        gap: 1.6rem;
    }
    .wd-service-card {
        position: relative;
        min-width: 0;
        padding: 2.4rem 2rem 2.2rem;
        background: #fff;
        border: 1px solid #eef0f4;
        border-radius: 26px;
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
    .wd-service-card::before {
        content: "";
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, var(--primary), var(--accent-2));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .4s ease;
    }
    .wd-service-card:hover {
        transform: translateY(-8px);
        border-color: color-mix(in srgb, var(--primary) 35%, transparent);
        box-shadow: 0 30px 60px -28px var(--card-glow), var(--shadow-soft);
    }
    .wd-service-card:hover::before { transform: scaleX(1); }
    .wd-service-num {
        position: absolute;
        top: 1.2rem;
        right: 1.4rem;
        font-size: 2.6rem;
        font-weight: 800;
        letter-spacing: -.04em;
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 1.4px color-mix(in srgb, var(--primary) 32%, #e2e8f0);
    }
    .wd-service-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 16px;
        font-size: 1.4rem;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent-2));
        box-shadow: 0 12px 26px -12px var(--accent-2);
    }
    .wd-service-title {
        margin: 1.4rem 0 0;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--text-main);
        overflow-wrap: anywhere;
    }
    .wd-service-lead {
        margin: .55rem 0 0;
        font-weight: 700;
        color: var(--primary);
        overflow-wrap: anywhere;
    }
    .wd-service-body {
        margin: .85rem 0 0;
        line-height: 1.7;
        color: var(--text-muted);
        overflow-wrap: anywhere;
    }

    /* ============================ SHOWROOM ============================ */
    .wd-showroom {
        max-width: 1480px;
        background:
            radial-gradient(circle at 92% 4%, var(--primary-soft), transparent 30%),
            radial-gradient(circle at 6% 96%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 34%),
            var(--bg-light);
        border-top: 1px solid #eef0f4;
        border-bottom: 1px solid #eef0f4;
        border-radius: 40px;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .wd-showroom-head {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 1.5rem 2.5rem;
        align-items: end;
        margin-bottom: 2rem;
    }
    .wd-showroom-head-main { min-width: 0; }
    .wd-showroom-head-note {
        min-width: 0;
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.7;
        color: var(--text-muted);
        overflow-wrap: anywhere;
    }

    .wd-disclaimer {
        display: flex;
        gap: .9rem;
        align-items: flex-start;
        max-width: 880px;
        margin: 0 0 2.6rem;
        padding: 1.05rem 1.3rem;
        background: #fff;
        border: 1px solid #eef0f4;
        border-left: 4px solid var(--primary);
        border-radius: 14px;
        box-shadow: var(--shadow-soft);
    }
    .wd-disclaimer i {
        flex: 0 0 auto;
        margin-top: .15rem;
        font-size: 1.15rem;
        color: var(--primary);
    }
    .wd-disclaimer p {
        min-width: 0;
        margin: 0;
        font-size: .96rem;
        line-height: 1.6;
        color: var(--text-muted);
        overflow-wrap: anywhere;
    }
    .wd-disclaimer-seo {
        border-left-color: var(--accent-2);
        margin: 2.8rem 0 0;
    }
    .wd-disclaimer-seo i { color: var(--accent-2); }

    .wd-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
        gap: 1.6rem;
    }
    .wd-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        content-visibility: auto;
        contain-intrinsic-size: 360px 360px;
        text-decoration: none;
        color: var(--text-main);
        background: #fff;
        border: 1px solid #e8eaef;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--shadow-soft);
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
    .wd-card:hover {
        transform: translateY(-8px);
        border-color: color-mix(in srgb, var(--primary) 40%, transparent);
        box-shadow: 0 34px 64px -30px var(--card-glow), var(--shadow-soft);
    }
    @media (min-width: 1080px) {
        .wd-card-wide { grid-column: span 2; }
    }

    .wd-browser {
        display: block;
        background: #0f172a;
        padding: .55rem .7rem;
    }
    .wd-browser-bar {
        display: flex;
        align-items: center;
        gap: .4rem;
        min-width: 0;
    }
    .wd-browser-dot {
        width: .58rem;
        height: .58rem;
        border-radius: 50%;
        flex: 0 0 auto;
        background: #ef4444;
    }
    .wd-browser-dot:nth-child(2) { background: #f59e0b; }
    .wd-browser-dot:nth-child(3) { background: #22c55e; }
    .wd-browser-url {
        margin-left: .5rem;
        padding: .15rem .7rem;
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 980px;
        background: rgba(255,255,255,.08);
        color: #94a3b8;
        font-size: .72rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wd-shot {
        position: relative;
        display: block;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: #fff;
    }
    .wd-shot-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, transparent 55%, rgba(15,23,42,.06));
    }
    .wd-shot-cue {
        display: inline-flex; align-items: center; gap: .5rem;
        padding: .6rem 1.1rem; border-radius: 980px;
        background: linear-gradient(120deg, var(--primary), var(--accent-2)); color: #fff;
        font-size: .82rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
        box-shadow: 0 12px 26px -10px rgba(15,23,42,.5);
        opacity: 0; transform: translateY(8px);
        transition: opacity .3s ease, transform .3s ease;
    }
    .wd-card:hover .wd-shot-cue, .wd-card:focus-visible .wd-shot-cue { opacity: 1; transform: translateY(0); }
    .wd-shot iframe {
        width: 400%;
        height: 400%;
        transform: scale(.25);
        transform-origin: 0 0;
        border: 0;
        pointer-events: none;
        background: #fff;
    }

    .wd-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.1rem 1.25rem;
        border-top: 1px solid #eef0f4;
    }
    .wd-card-meta {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        min-width: 0;
    }
    .wd-card-cat {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--primary);
        overflow-wrap: anywhere;
    }
    .wd-card-name {
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--text-main);
        overflow-wrap: anywhere;
    }
    .wd-card-go {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 auto;
        border-radius: 50%;
        color: var(--primary);
        background: var(--primary-soft);
        transition: transform .3s ease, background-color .3s ease, color .3s ease;
    }
    .wd-card:hover .wd-card-go {
        transform: translateX(3px) rotate(-2deg);
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent-2));
    }

    /* ============================ PROCESS ============================ */
    .wd-process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: 1.6rem;
    }
    .wd-step {
        position: relative;
        min-width: 0;
        padding: 2.4rem 2rem 2.2rem;
        background: #fff;
        border: 1px solid #eef0f4;
        border-radius: 24px;
        box-shadow: var(--shadow-soft);
        transition: transform .3s ease, box-shadow .3s ease;
    }
    .wd-step:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -28px var(--card-glow), var(--shadow-soft); }
    .wd-step-rail {
        position: absolute;
        left: 0; top: 2.4rem;
        width: 5px;
        height: 3.2rem;
        border-radius: 0 4px 4px 0;
        background: linear-gradient(180deg, var(--primary), var(--accent-2));
    }
    .wd-step-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 14px;
        font-size: 1.25rem;
        color: var(--primary);
        background: var(--primary-soft);
    }
    .wd-step-tag {
        display: block;
        margin: 1.3rem 0 0;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--accent-2);
    }
    .wd-step-title {
        margin: .4rem 0 0;
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--text-main);
        overflow-wrap: anywhere;
    }
    .wd-step-body {
        margin: .8rem 0 0;
        line-height: 1.7;
        color: var(--text-muted);
        overflow-wrap: anywhere;
    }

    /* ============================ FINAL CTA (dark) ============================ */
    .wd-cta {
        position: relative;
        max-width: 1280px;
        margin: 4rem auto 0;
        padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 6vw, 5rem);
        text-align: center;
        background:
            radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 42%),
            radial-gradient(circle at 86% 110%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 46%),
            var(--bg-dark);
        border-radius: 40px;
        overflow: hidden;
        scroll-margin-top: 84px;
    }
    .wd-cta-paint {
        display: flex;
        justify-content: center;
        gap: .55rem;
        margin-bottom: 1.6rem;
    }
    .wd-cta-title {
        margin: .9rem auto 0;
        max-width: 18ch;
        font-size: clamp(2rem, 5.6vw, 3.8rem);
        line-height: 1.05;
        font-weight: 800;
        letter-spacing: -.03em;
        color: #fff;
        overflow-wrap: anywhere;
    }
    .wd-cta-lead {
        max-width: 54ch;
        margin: 1.3rem auto 0;
        font-size: 1.12rem;
        line-height: 1.7;
        color: #cbd5e1;
        overflow-wrap: anywhere;
    }
    .wd-btn-cta {
        margin-top: 2.4rem;
        color: #020617;
        background: #fff;
        box-shadow: 0 20px 44px -16px rgba(0,0,0,.5);
    }
    .wd-btn-cta:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -16px var(--accent-2); }
    .wd-btn-cta-arrow { transition: transform .25s ease; }
    .wd-btn-cta:hover .wd-btn-cta-arrow { transform: translateX(4px); }

    /* ============================ RESPONSIVE ============================ */
    @media (max-width: 900px) {
        .wd-section { padding: 80px clamp(1.1rem, 5vw, 2.5rem); }
        .wd-showroom-head {
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
        }
        .wd-services-grid,
        .wd-process-grid,
        .wd-gallery {
            grid-template-columns: minmax(0, 1fr);
        }
        .wd-card-wide { grid-column: auto; }
        .wd-section-head { margin-bottom: 2.5rem; }
    }
    @media (max-width: 768px) {
        .wd-hero { padding: 6.5rem 1.25rem 3rem; }
        .wd-section { padding: 66px 1.25rem; }
        .wd-cta { margin-top: 2.5rem; border-radius: 28px; }
        .wd-showroom { border-radius: 26px; }
    }
    @media (max-width: 560px) {
        .wd-hero-cta { flex-direction: column; align-items: stretch; }
        .wd-hero-cta .wd-btn { justify-content: center; }
        .wd-service-card,
        .wd-step { padding: 1.9rem 1.4rem; }
    }

    @media (prefers-reduced-motion: reduce) {
        .wd-btn,
        .wd-card,
        .wd-service-card,
        .wd-step,
        .wd-card-go,
        .wd-service-card::before,
        .wd-btn-cta-arrow {
            transition: none !important;
        }
        .wd-btn:hover,
        .wd-card:hover,
        .wd-service-card:hover,
        .wd-step:hover { transform: none !important; }
    }
</style>