/* ============================================
   WEBDESIGNER PORTFOLIO
   Lys, varm, personlig estetikk
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Fargepalett */
    --color-accent: #3e5c76;
    --color-dark: #4c5c68;
    --color-text-primary: #46494c;
    --color-text-secondary: #4c5c68;
    --color-text-muted: #c5c3c6;
    --color-bg: #FFFFFF;
    --color-bg-alt: #dcdcdd;
    --color-bg-secondary: #dcdcdd;

    /* Borders */
    --border-light: #dcdcdd;
    --border-medium: #c5c3c6;

    /* Typography */
    --font-heading: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration hints for animated elements */
.scroll-fade-in,
.about-clade-image,
.about-clade-content,
.gilion-card,
.portfolio-card,
.service-card,
.faq-item,
.process-timeline__step,
[data-parallax] {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Contain layout for sections to isolate repaints */
section {
    contain: layout style;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.scroll-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

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

/* Staggered children animation */
.scroll-fade-in-children > * {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.scroll-fade-in-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.scroll-fade-in-children.is-visible > *:nth-child(1) { transition-delay: 0s; }
.scroll-fade-in-children.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.scroll-fade-in-children.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.scroll-fade-in-children.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.scroll-fade-in-children.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.scroll-fade-in-children.is-visible > *:nth-child(6) { transition-delay: 0.4s; }

/* ============================================
   ANIMATED ACCENT COLOR - CASCADE EFFECT
   Fargen "renner" nedover siden som en bølge
   ============================================ */

/* Base accent colors (fallback) */
:root {
    --color-accent: #363b42;
    --color-accent-hover: #40464e;
    --color-accent-light: rgba(54, 59, 66, 0.1);
}

/* Mockup accent colors - keep orange for visual mockups only */
:root {
    --color-mockup-accent: #E07A5F;
    --color-mockup-accent-light: rgba(224, 122, 95, 0.2);
}

/* Typography section colors */
:root {
    --typo-color-1: #1E3A5F;  /* Dyp blå */
    --typo-color-2: #2D5A87;  /* Medium blå */
    --typo-color-3: #D97706;  /* Varm oransje */
    --typo-color-4: #B8860B;  /* Gull */
    --typo-color-5: #1B4D3E;  /* Skoggrønn */
    --typo-color-6: #2E7D5B;  /* Medium grønn */
    --typo-color-7: #991B1B;  /* Rubinrød */
    --typo-color-8: #7C3AED;  /* Lilla */
    --typo-color-9: #5B21B6;  /* Mørk lilla */
}

/* Color animation for text elements - single color */
@keyframes colorShift {
    0%, 100% { color: #2D2D2D; }
}

/* Color animation for backgrounds - single color */
@keyframes bgColorShift {
    0%, 100% { background-color: #2D2D2D; }
}

/* Color animation for borders - single color */
@keyframes borderColorShift {
    0%, 100% { border-color: rgba(45, 45, 45, 0.2); }
}

/* Color animation for solid borders - single color */
@keyframes solidBorderColorShift {
    0%, 100% { border-color: #2D2D2D; }
}

/* Color animation for muted text (step numbers) - single color */
@keyframes colorShiftMuted {
    0%, 100% { color: rgba(45, 45, 45, 0.25); }
}

/* Color animation for muted backgrounds (inactive buttons) - single color */
@keyframes bgColorShiftMuted {
    0%, 100% { background-color: rgba(45, 45, 45, 0.5); }
}

/* Color animation for gradient backgrounds - single color */
@keyframes gradientColorShift {
    0%, 100% { background: linear-gradient(135deg, rgba(45, 45, 45, 0.03) 0%, rgba(45, 45, 45, 0.08) 100%); }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
    }
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg); /* Lys bakgrunn på body */
    overflow-x: clip; /* clip i stedet for hidden - kutter ikke vertikalt */
}

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ============================================
   HEADER
   ============================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    z-index: 100;
    background: #FDFBF9;
    border-bottom: none;
    will-change: transform;
}

.header.scrolled {
    background: #FDFBF9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.header.visible {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Header over dark section (homepage tjenester) */
.header.header--over-dark {
    background: #1d2327;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.header.header--over-dark .logo__text {
    color: #FFFFFF;
}

.header.header--over-dark .nav a {
    color: rgba(255, 255, 255, 0.8);
}

.header.header--over-dark .nav a:hover,
.header.header--over-dark .nav a.active {
    color: #FFFFFF;
}

.header.header--over-dark .header-cta {
    background: #FFFFFF;
    color: #1d2327;
}

.header.header--over-dark .header-cta:hover {
    background: #F1F5F9;
}

.header.header--over-dark .menu-toggle__bar {
    background: #FFFFFF;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.logo__monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-bg-secondary);
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.logo:hover .logo__monogram {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Logo text style */
.logo__text {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary);
    transition: color var(--transition-fast);
}

.logo:hover .logo__text {
    color: #1E3A5F;
    animation: colorShift 60s ease-in-out infinite;
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav a {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #46494c;
    transition: all 0.3s ease;
    background-size: 200% auto;
}

.nav a:hover {
    background: linear-gradient(90deg, #3e5c76, #3e5c76, #2d4459, #3e5c76);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 2s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Header CTA */
.header-cta {
    padding: 12px 24px;
    background: #3e5c76;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    transition: all var(--transition-fast);
}

.header-cta:hover {
    background: #2d4459;
    transform: translateY(-1px);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.menu-toggle__bar {
    width: 24px;
    height: 2px;
    background-color: var(--color-text-primary);
    transition: all var(--transition-base);
}

.menu-toggle.active .menu-toggle__bar:nth-child(1) {
    transform: rotate(45deg) translate(3px, 3px);
}

.menu-toggle.active .menu-toggle__bar:nth-child(2) {
    transform: rotate(-45deg) translate(3px, -3px);
}

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.mobile-menu__link {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--color-text-primary);
    transition: color var(--transition-fast);
}

.mobile-menu__link:hover {
    color: var(--color-accent);
}

.mobile-menu__cta {
    margin-top: 24px;
    padding: 16px 40px;
    background: #3e5c76;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    color: white;
    transition: all var(--transition-fast);
}

.mobile-menu__cta:hover {
    background: #2d4459;
}

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

/* ============================================
   HERO SECTION - Trustly Architecture (No Compromise)
   ============================================ */

/* VIKTIG: overflow: visible på alle foreldre */
html, body, main {
    overflow-x: clip; /* Skjuler horisontal overflow men kutter ikke vertikalt */
}

main {
    overflow: visible !important;
}

/* HERO SECTION */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 80px 80px;
    background: #FFFFFF;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
}

/* Hero Two Column Grid */
.hero-grid {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 700px;
    margin-right: auto;
}

.hero-image {
    position: absolute;
    top: 0;
    right: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hero-image img {
    width: 420px;
    height: 100vh;
    object-fit: cover;
    border-radius: 0 0 210px 210px;
}


/* ========================================
   CLADE-STYLE HERO SECTION
   ======================================== */

/* Hero fade-in animation */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-section-clade {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 160px 80px 80px;
    background: #FFFFFF;
}

.hero-clade-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-clade-content {
    max-width: 1100px;
}

.hero-clade-headline {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(48px, 7vw, 90px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #46494c;
    margin: 0 0 32px 0;
    opacity: 0;
    animation: heroFadeUp 0.6s ease-out forwards;
}

@keyframes letterFlip {
    0% {
        transform: scaleX(1);
    }
    40% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
    90% {
        transform: scaleX(-1);
    }
    100% {
        transform: scaleX(1);
    }
}

.letter-flipped {
    display: inline-block;
}

.text-black {
    color: #000000;
}

.text-muted {
    color: #000000;
}

.hero-clade-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #4c5c68;
    max-width: 600px;
    margin: 0;
    opacity: 0;
    animation: heroFadeUp 0.6s ease-out 0.15s forwards;
}

.hero-clade-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #3e5c76;
    color: #FFFFFF;
    border: none;
    padding: 16px 32px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 32px;
    opacity: 0;
    animation: heroFadeUp 0.6s ease-out 0.25s forwards;
}

.hero-clade-btn:hover {
    background: #2d4459;
    transform: translateX(4px);
}

.hero-clade-btn svg {
    transition: transform 0.3s ease;
}

.hero-clade-btn:hover svg {
    transform: translateX(4px);
}

.hero-clade-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #46494c;
    white-space: nowrap;
    opacity: 0;
    animation: heroFadeUp 0.6s ease-out 0.3s forwards;
}

.hero-clade-scroll svg {
    transform: rotate(180deg);
}


/* ========================================
   CLADE-STYLE ABOUT SECTION
   ======================================== */

.about-clade-section {
    padding: 0 80px 60px;
    background: #FFFFFF;
}

.about-clade-container {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Image expand animation */
@keyframes expandIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.about-clade-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    animation: expandIn 0.7s ease-out 0.4s forwards;
}

.about-clade-image img {
    width: 100%;
    height: 495px;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    border-radius: 8px;
}

.about-clade-content {
    background: #4c5c68;
    border-radius: 8px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 495px;
    box-sizing: border-box;
    opacity: 0;
    animation: expandIn 0.7s ease-out 0.55s forwards;
}

.about-clade-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #c5c3c6;
    margin-bottom: 16px;
}

.about-clade-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0 0 24px 0;
}

.about-clade-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7BA3C9;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
}

.about-clade-btn:hover {
    background: #6090B8;
    transform: translateX(4px);
}

.about-clade-btn svg {
    transition: transform 0.3s ease;
}

.about-clade-btn:hover svg {
    transform: translateX(4px);
}


/* Responsive for Clade sections */
@media (max-width: 900px) {
    .hero-section-clade {
        padding: 120px 24px 60px;
    }

    .hero-clade-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .hero-clade-headline {
        font-size: clamp(36px, 10vw, 56px);
    }

    .about-clade-section {
        padding: 0 24px 60px;
    }

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

    .about-clade-image img {
        min-height: 300px;
    }

    .about-clade-content {
        padding: 32px;
    }
}


/* ========================================
   FAQ SECTION
   ======================================== */

.faq-section {
    padding: 60px 80px;
    background: #FFFFFF;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

/* FAQ animations - on load */
.faq-section .faq-title {
    opacity: 0;
    animation: heroFadeUp 0.6s ease-out 0.5s forwards;
}

.faq-section .faq-list .faq-item:nth-child(1) { opacity: 0; animation: heroFadeUp 0.5s ease-out 0.6s forwards; }
.faq-section .faq-list .faq-item:nth-child(2) { opacity: 0; animation: heroFadeUp 0.5s ease-out 0.7s forwards; }
.faq-section .faq-list .faq-item:nth-child(3) { opacity: 0; animation: heroFadeUp 0.5s ease-out 0.8s forwards; }
.faq-section .faq-list .faq-item:nth-child(4) { opacity: 0; animation: heroFadeUp 0.5s ease-out 0.9s forwards; }
.faq-section .faq-list .faq-item:nth-child(5) { opacity: 0; animation: heroFadeUp 0.5s ease-out 1.0s forwards; }

/* About-clade scroll animations */
.about-clade-section.is-visible .about-clade-image {
    animation: expandIn 0.7s ease-out 0.2s forwards;
}

.about-clade-section.is-visible .about-clade-content {
    animation: expandIn 0.7s ease-out 0.35s forwards;
}

/* Services-showcase scroll animations */
.services-showcase.is-visible .services-showcase__left-box {
    animation: heroFadeUp 0.6s ease-out forwards;
}

.services-showcase.is-visible .service-card:nth-child(1) {
    animation: expandIn 0.7s ease-out 0.2s forwards;
}

.services-showcase.is-visible .service-card:nth-child(2) {
    animation: expandIn 0.7s ease-out 0.35s forwards;
}

.services-showcase.is-visible .service-card:nth-child(3) {
    animation: expandIn 0.7s ease-out 0.5s forwards;
}

.services-showcase.is-visible .service-card:nth-child(4) {
    animation: expandIn 0.7s ease-out 0.65s forwards;
}

.services-showcase .services-showcase__left-box,
.services-showcase .service-card {
    opacity: 0;
}

/* Process-timeline scroll animations */
.process-timeline.is-visible .process-timeline__header {
    animation: heroFadeUp 0.6s ease-out forwards;
}

.process-timeline.is-visible .process-timeline__step:nth-child(1) {
    animation: heroFadeUp 0.5s ease-out 0.15s forwards;
}

.process-timeline.is-visible .process-timeline__step:nth-child(2) {
    animation: heroFadeUp 0.5s ease-out 0.3s forwards;
}

.process-timeline.is-visible .process-timeline__step:nth-child(3) {
    animation: heroFadeUp 0.5s ease-out 0.45s forwards;
}

.process-timeline.is-visible .process-timeline__step:nth-child(4) {
    animation: heroFadeUp 0.5s ease-out 0.6s forwards;
}

.process-timeline.is-visible .process-timeline__cta {
    animation: heroFadeUp 0.5s ease-out 0.75s forwards;
}

.process-timeline .process-timeline__header,
.process-timeline .process-timeline__step,
.process-timeline .process-timeline__cta {
    opacity: 0;
}

/* CTA-section scroll animations */
.cta-section.is-visible h2 {
    animation: heroFadeUp 0.6s ease-out forwards;
}

.cta-section.is-visible p {
    animation: heroFadeUp 0.5s ease-out 0.15s forwards;
}

.cta-section.is-visible .cta-section__btn {
    animation: expandIn 0.6s ease-out 0.3s forwards;
}

.cta-section h2,
.cta-section p,
.cta-section .cta-section__btn {
    opacity: 0;
}

.faq-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    color: #46494c;
    margin: 0 0 60px 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-item:first-child {
    border-top: 1px solid #e0e0e0;
}

.faq-icon {
    flex-shrink: 0;
    width: 48px;
    display: flex;
    justify-content: center;
    color: #46494c;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.faq-item:hover .faq-icon {
    opacity: 1;
}

.faq-content {
    flex: 1;
}

.faq-question {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #46494c;
    display: block;
    transition: color 0.3s ease;
}

.faq-answer {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #4c5c68;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.faq-item:hover .faq-answer {
    max-height: 200px;
    opacity: 1;
    margin-top: 12px;
}

.faq-item:hover {
    background: #f9f9f9;
    margin: 0 -20px;
    padding: 24px 20px;
}

/* Responsive FAQ */
@media (max-width: 768px) {
    .faq-section {
        padding: 60px 24px;
    }

    .faq-item {
        gap: 16px;
    }

    .faq-icon {
        width: 36px;
    }

    .faq-question {
        font-size: 16px;
    }
}


/* Hero Content */
.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 700px;
    will-change: transform, opacity;
}

/* BLOKK 1: Melding */
.hero-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.hero-overline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 12px;
    animation: colorShift 60s ease-in-out infinite;
}

.hero-overline__star {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.hero-headline {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    color: #111;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
    white-space: normal;
    transition: opacity 0.1s ease-out;
}

.hero-highlight {
    color: inherit;
    background: transparent;
    box-shadow: inset 0 -1em 0 0 rgba(100, 116, 139, 0.18);
    position: relative;
}

.hero-highlight::after {
    display: none;
}

.hero-headline__accent {
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
}

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

.hero-subtext {
    font-family: 'General Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #4c5c68;
    margin: 0 0 32px 0;
    transition: opacity 0.1s ease-out;
}

.hero-subtext strong {
    font-weight: 600;
}

/* BLOKK 2: Handling */
.hero-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Legacy support */
.overline {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: #8B8680;
    margin-bottom: 12px;
}

.overline.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards, colorShift 60s ease-in-out infinite;
    animation-delay: 0s, 0s;
}

.hero h1 {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(52px, 6vw, 72px);
    font-weight: 600;
    line-height: 1.08;
    color: #363b42;
    margin-bottom: 16px;
}

.text-accent {
    color: var(--color-accent);
    animation: colorShift 60s ease-in-out infinite;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: #4B5563;
    max-width: 420px;
    margin: 0;
}

.highlight-box {
    display: inline-block;
    border: none;
    border-radius: 4px;
    padding: 0;
    color: inherit;
    font-weight: inherit;
}

.cta-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 56px;
}

.cta-primary {
    padding: 16px 32px;
    background: var(--color-accent);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: white;
    transition: all var(--transition-fast);
    /* Cascade animation - same as hero-submit (delay: 1.2s) */
    animation: bgColorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.cta-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(54, 59, 66, 0.3);
}

.cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.cta-secondary svg {
    transition: transform var(--transition-fast);
}

.cta-secondary:hover {
    color: var(--color-accent);
}

.cta-secondary:hover svg {
    transform: translateX(4px);
}

/* Hero Form */
.hero-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
}

.hero-input-wrapper {
    position: relative;
    width: 100%;
}

.hero-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    pointer-events: none;
}

.hero-input {
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1.5px solid #9CA3AF;
    border-radius: 8px;
    padding: 14px 16px 14px 44px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.hero-input:focus {
    outline: none;
    border-color: #46494c;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.hero-input:focus + .hero-input-icon,
.hero-input-wrapper:focus-within .hero-input-icon {
    color: #3e5c76;
}

.hero-input::placeholder {
    color: #9CA3AF;
}

.hero-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #3e5c76;
    color: #111;
    border: none;
    border-radius: 50px;
    padding: 16px 28px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-submit:hover {
    background: #2d4459;
}

.hero-submit svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.hero-submit svg.arrow-animating {
    animation: arrow-slide 0.7s ease forwards;
}

@keyframes arrow-slide {
    0% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-4px);
    }
    50% {
        transform: translateX(25px);
        opacity: 0;
    }
    51% {
        transform: translateX(-25px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.privacy-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #9CA3AF;
    margin-top: 4px;
}

.privacy-note svg {
    color: var(--color-accent);
    animation: colorShift 60s ease-in-out infinite;
}

.form-alt-link {
    font-size: 14px;
    color: #6B7280;
    margin-top: 12px;
}

.form-alt-link a {
    color: var(--color-accent);
    text-decoration: none;
    transition: all var(--transition-fast);
    animation: colorShift 60s ease-in-out infinite;
}

.form-alt-link a:hover {
    text-decoration: underline;
    color: var(--color-text-primary);
}

/* Hero Privacy Note */
.hero-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
    color: #6B7280;
}

.hero-privacy svg {
    flex-shrink: 0;
    color: #6B7280;
}

/* Hero No Site Link */
.hero-no-site-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: underline;
    transition: color var(--transition-fast);
    animation: colorShift 60s ease-in-out infinite;
}

.hero-no-site-link:hover {
    opacity: 0.8;
}

/* Hero Trust Badges - Enkel tekst med checkmarks */
.hero-trust-badges {
    display: flex;
    justify-content: flex-start;
    gap: 32px;
    margin-top: 16px;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 520px;
}

.hero-trust-badges .trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.hero-trust-badges .trust-badge svg {
    width: 18px;
    height: 18px;
    color: #64748B;
    stroke-width: 2px;
}

/* Mockup Section - Standalone */
.mockup-section {
    padding: 60px 0 80px;
    background: var(--color-bg-primary);
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.mockup-section__container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    padding: 0 48px;
}

/* Hero Mockup Wrapper */
.hero-mockup-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: visible !important;
    margin-right: -150px;
}

/* Legacy support */
.hero-visual {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Browser Mockup */
.browser-mockup {
    width: 100%;
    max-width: 520px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    border: 1px solid #E5E5E5;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: perspective(1000px) rotateY(-2deg) rotateX(2deg);
    transition: transform var(--transition-slow);
}

.browser-mockup:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.browser-mockup__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #F5F5F5;
    border-bottom: 1px solid #E5E5E5;
}

.browser-mockup__dots {
    display: flex;
    gap: 8px;
}

.browser-mockup__dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.browser-mockup__dots span:nth-child(1) { background: #ff5f57; }
.browser-mockup__dots span:nth-child(2) { background: #febc2e; }
.browser-mockup__dots span:nth-child(3) { background: #28c840; }

.browser-mockup__url {
    flex: 1;
    padding: 8px 16px;
    background: white;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-align: center;
}

.browser-mockup__content {
    padding: 24px;
    min-height: 300px;
    background: white;
}

/* ============================================
   ANIMATED BROWSER MOCKUP
   7 states, 22.4 sekunder syklus (3.2s per state)
   ============================================ */

.mockup-animated {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
}

.mockup-el {
    position: absolute;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Headline (A) */
.mockup-headline {
    height: 10px;
    background: #D1D5DB;
    border-radius: 4px;
    animation: mockupHeadline 22.4s ease-in-out infinite;
}

/* Subtext lines (B, C) */
.mockup-subtext {
    height: 7px;
    background: #9CA3AF;
    border-radius: 3px;
}

.mockup-subtext-1 {
    animation: mockupSubtext1 22.4s ease-in-out infinite;
}

.mockup-subtext-2 {
    animation: mockupSubtext2 22.4s ease-in-out infinite;
}

/* CTA button (D) */
.mockup-cta {
    height: 24px;
    border-radius: 6px;
    animation: mockupCta 22.4s ease-in-out infinite, bgColorShift 60s ease-in-out infinite;
    animation-delay: 0s, 1.2s;
}

/* Boxes (E, F, G, H) */
.mockup-box {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}

.mockup-box-1 {
    animation: mockupBox1 22.4s ease-in-out infinite;
}

.mockup-box-2 {
    animation: mockupBox2 22.4s ease-in-out infinite;
}

.mockup-box-3 {
    animation: mockupBox3 22.4s ease-in-out infinite;
}

.mockup-box-4 {
    animation: mockupBox4 22.4s ease-in-out infinite;
}

/* ============================================
   MOCKUP KEYFRAMES
   State timing: 0-14.29% = State 1, etc.
   Hold: 11.61% (2.6s), Transition: 2.68% (0.6s)
   Total: 22.4s (3.2s per state)
   ============================================ */

/* Headline (A) keyframes */
@keyframes mockupHeadline {
    /* State 1: left 8%, top 12%, width 50% */
    0%, 12.14% { left: 8%; top: 12%; width: 50%; transform: translateX(0); }
    14.29% { left: 50%; top: 10%; width: 55%; transform: translateX(-50%); }
    /* State 2: centered, top 10%, width 55% */
    14.29%, 26.43% { left: 50%; top: 10%; width: 55%; transform: translateX(-50%); }
    28.57% { left: 50%; top: 8%; width: 45%; transform: translateX(-50%); }
    /* State 3: centered, top 8%, width 45% */
    28.57%, 40.71% { left: 50%; top: 8%; width: 45%; transform: translateX(-50%); }
    42.86% { left: 8%; top: 10%; width: 55%; transform: translateX(0); }
    /* State 4: left 8%, top 10%, width 55% */
    42.86%, 55% { left: 8%; top: 10%; width: 55%; transform: translateX(0); }
    57.14% { left: 8%; top: 18%; width: 42%; transform: translateX(0); }
    /* State 5: left 8%, top 18%, width 42% */
    57.14%, 69.29% { left: 8%; top: 18%; width: 42%; transform: translateX(0); }
    71.43% { left: 8%; top: 8%; width: 40%; transform: translateX(0); }
    /* State 6: left 8%, top 8%, width 40% */
    71.43%, 83.57% { left: 8%; top: 8%; width: 40%; transform: translateX(0); }
    85.71% { left: 50%; top: 32%; width: 50%; transform: translateX(-50%); }
    /* State 7: centered, top 32%, width 50% */
    85.71%, 97.86% { left: 50%; top: 32%; width: 50%; transform: translateX(-50%); }
    100% { left: 8%; top: 12%; width: 50%; transform: translateX(0); }
}

/* Subtext 1 (B) keyframes */
@keyframes mockupSubtext1 {
    /* State 1: left 8%, top 22%, width 70% */
    0%, 12.14% { left: 8%; top: 22%; width: 70%; transform: translateX(0); opacity: 1; }
    14.29% { left: 50%; top: 20%; width: 65%; transform: translateX(-50%); opacity: 1; }
    /* State 2: centered, top 20%, width 65% */
    14.29%, 26.43% { left: 50%; top: 20%; width: 65%; transform: translateX(-50%); opacity: 1; }
    28.57% { left: 50%; top: 17%; width: 55%; transform: translateX(-50%); opacity: 1; }
    /* State 3: centered, top 17%, width 55% */
    28.57%, 40.71% { left: 50%; top: 17%; width: 55%; transform: translateX(-50%); opacity: 1; }
    42.86% { left: 8%; top: 19%; width: 60%; transform: translateX(0); opacity: 1; }
    /* State 4: left 8%, top 19%, width 60% */
    42.86%, 55% { left: 8%; top: 19%; width: 60%; transform: translateX(0); opacity: 1; }
    57.14% { left: 8%; top: 30%; width: 40%; transform: translateX(0); opacity: 1; }
    /* State 5: left 8%, top 30%, width 40% */
    57.14%, 69.29% { left: 8%; top: 30%; width: 40%; transform: translateX(0); opacity: 1; }
    71.43% { left: 8%; top: 16%; width: 55%; transform: translateX(0); opacity: 1; }
    /* State 6: left 8%, top 16%, width 55% */
    71.43%, 83.57% { left: 8%; top: 16%; width: 55%; transform: translateX(0); opacity: 1; }
    85.71% { left: 50%; top: 45%; width: 55%; transform: translateX(-50%); opacity: 1; }
    /* State 7: centered, top 45%, width 55% */
    85.71%, 97.86% { left: 50%; top: 45%; width: 55%; transform: translateX(-50%); opacity: 1; }
    100% { left: 8%; top: 22%; width: 70%; transform: translateX(0); opacity: 1; }
}

/* Subtext 2 (C) keyframes */
@keyframes mockupSubtext2 {
    /* State 1: left 8%, top 28%, width 45% */
    0%, 12.14% { left: 8%; top: 28%; width: 45%; transform: translateX(0); opacity: 1; }
    14.29% { opacity: 0; }
    /* State 2: hidden */
    14.29%, 26.43% { left: 8%; top: 28%; width: 45%; transform: translateX(0); opacity: 0; }
    28.57% { left: 50%; top: 24%; width: 40%; transform: translateX(-50%); opacity: 1; }
    /* State 3: centered, top 24%, width 40% */
    28.57%, 40.71% { left: 50%; top: 24%; width: 40%; transform: translateX(-50%); opacity: 1; }
    42.86% { left: 8%; top: 26%; width: 45%; transform: translateX(0); opacity: 1; }
    /* State 4: left 8%, top 26%, width 45% */
    42.86%, 55% { left: 8%; top: 26%; width: 45%; transform: translateX(0); opacity: 1; }
    57.14% { left: 8%; top: 38%; width: 35%; transform: translateX(0); opacity: 1; }
    /* State 5: left 8%, top 38%, width 35% */
    57.14%, 69.29% { left: 8%; top: 38%; width: 35%; transform: translateX(0); opacity: 1; }
    71.43% { opacity: 0; }
    /* State 6: hidden */
    71.43%, 83.57% { left: 8%; top: 38%; width: 35%; transform: translateX(0); opacity: 0; }
    85.71% { opacity: 0; }
    /* State 7: hidden */
    85.71%, 97.86% { left: 50%; top: 50%; width: 40%; transform: translateX(-50%); opacity: 0; }
    100% { left: 8%; top: 28%; width: 45%; transform: translateX(0); opacity: 1; }
}

/* CTA (D) keyframes */
@keyframes mockupCta {
    /* State 1: left 8%, top 38%, width 25% */
    0%, 12.14% { left: 8%; top: 38%; width: 25%; transform: translateX(0); opacity: 1; }
    14.29% { left: 50%; top: 32%; width: 28%; transform: translateX(-50%); opacity: 1; }
    /* State 2: centered, top 32%, width 28% */
    14.29%, 26.43% { left: 50%; top: 32%; width: 28%; transform: translateX(-50%); opacity: 1; }
    28.57% { left: 50%; top: 35%; width: 22%; transform: translateX(-50%); opacity: 1; }
    /* State 3: centered, top 35%, width 22% */
    28.57%, 40.71% { left: 50%; top: 35%; width: 22%; transform: translateX(-50%); opacity: 1; }
    42.86% { left: 8%; top: 38%; width: 26%; transform: translateX(0); opacity: 1; }
    /* State 4: left 8%, top 38%, width 26% */
    42.86%, 55% { left: 8%; top: 38%; width: 26%; transform: translateX(0); opacity: 1; }
    57.14% { left: 8%; top: 52%; width: 24%; transform: translateX(0); opacity: 1; }
    /* State 5: left 8%, top 52%, width 24% */
    57.14%, 69.29% { left: 8%; top: 52%; width: 24%; transform: translateX(0); opacity: 1; }
    71.43% { opacity: 0; }
    /* State 6: hidden */
    71.43%, 83.57% { left: 8%; top: 52%; width: 24%; transform: translateX(0); opacity: 0; }
    85.71% { left: 50%; top: 60%; width: 22%; transform: translateX(-50%); opacity: 1; }
    /* State 7: centered, top 60%, width 22% */
    85.71%, 97.86% { left: 50%; top: 60%; width: 22%; transform: translateX(-50%); opacity: 1; }
    100% { left: 8%; top: 38%; width: 25%; transform: translateX(0); opacity: 1; }
}

/* Box 1 (E) keyframes */
@keyframes mockupBox1 {
    /* State 1: left 8%, top 55%, width 26%, height 35% */
    0%, 12.14% { left: 8%; top: 55%; width: 26%; height: 35%; opacity: 1; }
    14.29% { left: 8%; top: 50%; width: 42%; height: 40%; opacity: 1; }
    /* State 2: left 8%, top 50%, width 42%, height 40% */
    14.29%, 26.43% { left: 8%; top: 50%; width: 42%; height: 40%; opacity: 1; }
    28.57% { left: 8%; top: 48%; width: 84%; height: 44%; opacity: 1; }
    /* State 3: left 8%, top 48%, width 84%, height 44% */
    28.57%, 40.71% { left: 8%; top: 48%; width: 84%; height: 44%; opacity: 1; }
    42.86% { left: 8%; top: 52%; width: 52%; height: 42%; opacity: 1; }
    /* State 4: left 8%, top 52%, width 52%, height 42% */
    42.86%, 55% { left: 8%; top: 52%; width: 52%; height: 42%; opacity: 1; }
    57.14% { left: 54%; top: 12%; width: 40%; height: 60%; opacity: 1; }
    /* State 5: left 54%, top 12%, width 40%, height 60% */
    57.14%, 69.29% { left: 54%; top: 12%; width: 40%; height: 60%; opacity: 1; }
    71.43% { left: 8%; top: 28%; width: 42%; height: 30%; opacity: 1; }
    /* State 6: left 8%, top 28%, width 42%, height 30% */
    71.43%, 83.57% { left: 8%; top: 28%; width: 42%; height: 30%; opacity: 1; }
    85.71% { opacity: 0; }
    /* State 7: hidden */
    85.71%, 97.86% { left: 8%; top: 28%; width: 42%; height: 30%; opacity: 0; }
    100% { left: 8%; top: 55%; width: 26%; height: 35%; opacity: 1; }
}

/* Box 2 (F) keyframes */
@keyframes mockupBox2 {
    /* State 1: left 37%, top 55%, width 26%, height 35% */
    0%, 12.14% { left: 37%; top: 55%; width: 26%; height: 35%; opacity: 1; }
    14.29% { left: 54%; top: 50%; width: 42%; height: 40%; opacity: 1; }
    /* State 2: left 54%, top 50%, width 42%, height 40% */
    14.29%, 26.43% { left: 54%; top: 50%; width: 42%; height: 40%; opacity: 1; }
    28.57% { opacity: 0; }
    /* State 3: hidden */
    28.57%, 40.71% { left: 54%; top: 50%; width: 42%; height: 40%; opacity: 0; }
    42.86% { left: 64%; top: 52%; width: 30%; height: 19%; opacity: 1; }
    /* State 4: left 64%, top 52%, width 30%, height 19% */
    42.86%, 55% { left: 64%; top: 52%; width: 30%; height: 19%; opacity: 1; }
    57.14% { opacity: 0; }
    /* State 5: hidden */
    57.14%, 69.29% { left: 64%; top: 52%; width: 30%; height: 19%; opacity: 0; }
    71.43% { left: 54%; top: 28%; width: 42%; height: 30%; opacity: 1; }
    /* State 6: left 54%, top 28%, width 42%, height 30% */
    71.43%, 83.57% { left: 54%; top: 28%; width: 42%; height: 30%; opacity: 1; }
    85.71% { opacity: 0; }
    /* State 7: hidden */
    85.71%, 97.86% { left: 54%; top: 28%; width: 42%; height: 30%; opacity: 0; }
    100% { left: 37%; top: 55%; width: 26%; height: 35%; opacity: 1; }
}

/* Box 3 (G) keyframes */
@keyframes mockupBox3 {
    /* State 1: left 66%, top 55%, width 26%, height 35% */
    0%, 12.14% { left: 66%; top: 55%; width: 26%; height: 35%; opacity: 1; }
    14.29% { opacity: 0; }
    /* State 2: hidden */
    14.29%, 26.43% { left: 66%; top: 55%; width: 26%; height: 35%; opacity: 0; }
    28.57% { opacity: 0; }
    /* State 3: hidden */
    28.57%, 40.71% { left: 66%; top: 55%; width: 26%; height: 35%; opacity: 0; }
    42.86% { left: 64%; top: 75%; width: 30%; height: 19%; opacity: 1; }
    /* State 4: left 64%, top 75%, width 30%, height 19% */
    42.86%, 55% { left: 64%; top: 75%; width: 30%; height: 19%; opacity: 1; }
    57.14% { opacity: 0; }
    /* State 5: hidden */
    57.14%, 69.29% { left: 64%; top: 75%; width: 30%; height: 19%; opacity: 0; }
    71.43% { left: 8%; top: 62%; width: 42%; height: 30%; opacity: 1; }
    /* State 6: left 8%, top 62%, width 42%, height 30% */
    71.43%, 83.57% { left: 8%; top: 62%; width: 42%; height: 30%; opacity: 1; }
    85.71% { opacity: 0; }
    /* State 7: hidden */
    85.71%, 97.86% { left: 8%; top: 62%; width: 42%; height: 30%; opacity: 0; }
    100% { left: 66%; top: 55%; width: 26%; height: 35%; opacity: 1; }
}

/* Box 4 (H) keyframes - kun synlig i State 6 */
@keyframes mockupBox4 {
    /* State 1-5: hidden */
    0%, 69.29% { left: 54%; top: 62%; width: 42%; height: 30%; opacity: 0; }
    71.43% { left: 54%; top: 62%; width: 42%; height: 30%; opacity: 1; }
    /* State 6: left 54%, top 62%, width 42%, height 30% */
    71.43%, 83.57% { left: 54%; top: 62%; width: 42%; height: 30%; opacity: 1; }
    85.71% { opacity: 0; }
    /* State 7 and back to 1: hidden */
    85.71%, 100% { left: 54%; top: 62%; width: 42%; height: 30%; opacity: 0; }
}

/* ============================================
   LOGO STRIPE
   ============================================ */

.logo-stripe {
    padding: 64px 0;
}

.logo-stripe .container {
    display: flex;
    align-items: center;
    gap: 48px;
}

.logo-stripe__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.logo-stripe__logos {
    display: flex;
    align-items: center;
    gap: 48px;
    flex: 1;
}

.logo-stripe__item {
    font-size: 16px;
    font-weight: 600;
    color: #9CA3AF;
    opacity: 0.7;
}

/* ============================================
   TIMELINE SECTION
   ============================================ */

.timeline-section {
    background: #FDFBF9;
    padding: 120px 24px;
}

.timeline-section .section-header {
    text-align: center;
    margin-bottom: 64px;
}

.timeline-section .section-subtitle {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* SVG container for L-formede linjer */
.timeline-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.timeline-line {
    display: none; /* Skjul den gamle vertikale linjen */
}

.timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 48px;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

/* Sirkel på tidslinjen */
.timeline-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border: 3px solid #363b42;
    border-radius: 50%;
    z-index: 2;
    top: 60px; /* Juster til å møte kurven */
    /* Cascade animation */
    animation: solidBorderColorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.step-card {
    background: #FFFFFF;
    border: 1px solid #9CA3AF;
    border-radius: 8px;
    padding: 32px;
    width: calc(50% - 64px);
    transition: all 0.3s ease;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
}

.step-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* SVG connector - buet linje mellom kort og sirkel */
.connector {
    position: absolute;
    top: 18px;
    width: 64px;
    height: 50px;
}

.connector svg {
    display: block;
    width: 64px;
    height: 50px;
    overflow: visible;
}

.connector--left {
    right: 50%;
}

.connector--right {
    left: 50%;
}

.step-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Venstre-kort */
.timeline-step--left {
    justify-content: flex-start;
}

.timeline-step--left .step-card {
    text-align: left;
}

.timeline-step--left .step-header {
    flex-direction: row;
}

/* Høyre-kort */
.timeline-step--right {
    justify-content: flex-end;
}

.timeline-step--right .step-card {
    text-align: right;
}

.timeline-step--right .step-header {
    flex-direction: row-reverse;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.step-icon {
    width: 40px;
    height: 40px;
    color: #363b42;
    flex-shrink: 0;
}

.step-number {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: rgba(54, 59, 66, 0.25);
}

.step-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: #46494c;
    margin-bottom: 8px;
}

.step-description {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: #6B7280;
}

/* Timeline Responsive - Mobil */
@media (max-width: 768px) {
    /* Skjul L-linjer på mobil */
    .timeline-connectors {
        display: none;
    }

    .timeline-step {
        justify-content: flex-start;
    }

    .step-card {
        width: 100%;
        text-align: left;
    }

    .timeline-step--right .step-card {
        text-align: left;
    }

    .timeline-step--right .step-header {
        flex-direction: row;
    }
}

/* ============================================
   SECTIONS - GENERAL
   ============================================ */

.section {
    padding: 120px 0;
    background-color: #FFFFFF;
}

.section--alt {
    background-color: var(--color-bg-alt);
}

/* ============================================
   PROCESS SHOWCASE - Inside video-layer
   ============================================ */

.process-showcase__blob {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 180, 150, 0.35) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.process-showcase__container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
    background: transparent; /* Ingen bakgrunn - kortene flyter */
    border-radius: 24px;
    display: grid;
    grid-template-columns: minmax(350px, 420px) 1fr;
    gap: 60px;
    align-items: start;
}

/* Chat Panel */
.chat-panel {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    max-width: 425px;
    margin-right: -5px;
}

.chat-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0F0F0;
}

.chat-panel__project-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #46494c;
}

.chat-panel__project-type {
    display: block;
    font-size: 12px;
    color: #c5c3c6;
    margin-top: 2px;
}

.chat-panel__devices {
    display: flex;
    gap: 4px;
}

.device-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 6px;
    color: #c5c3c6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.device-btn:hover,
.device-btn--active {
    background: #F5F5F5;
    color: #46494c;
}

/* Chat Message */
.chat-message {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.chat-message__avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.chat-message__bubble {
    background: #F7F7F7;
    border-radius: 8px;
    padding: 16px 20px;
    flex: 1;
}

.chat-message__bubble p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Reply Message */
.chat-message--reply {
    flex-direction: row;
    justify-content: flex-end;
}

.chat-message--reply .chat-message__bubble {
    background: #E8F4E8;
    border-radius: 8px;
    text-align: left;
    order: 1;
}

.chat-message--reply .chat-message__avatar {
    order: 2;
    background: linear-gradient(135deg, #4A9D4A 0%, #2D5A2D 100%);
}

/* AI Reasoning */
.chat-reasoning {
    margin-bottom: 20px;
}

.chat-reasoning__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: #4c5c68;
    cursor: pointer;
    padding: 0;
    margin-bottom: 8px;
}

.chat-reasoning__toggle svg {
    transition: transform 0.2s ease;
}

.chat-reasoning__text {
    font-size: 14px;
    line-height: 1.5;
    color: #4c5c68;
    margin: 0;
    padding-left: 4px;
}

/* Status */
.chat-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 20px;
}

.chat-status__dot {
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
}

.chat-status__text {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

/* Next Steps */
.chat-next-steps {
    margin-bottom: 20px;
}

.chat-next-steps h4 {
    font-size: 13px;
    font-weight: 600;
    color: #4c5c68;
    margin: 0 0 10px 0;
}

.chat-next-steps ul {
    margin: 0;
    padding-left: 16px;
}

.chat-next-steps li {
    font-size: 13px;
    color: #4c5c68;
    line-height: 1.6;
    margin-bottom: 4px;
}

/* Chat Input */
.chat-input {
    display: flex;
    gap: 8px;
    background: #F5F5F5;
    border-radius: 8px;
    padding: 4px;
}

.chat-input input {
    flex: 1;
    background: none;
    border: none;
    padding: 12px;
    font-size: 14px;
    color: #333;
}

.chat-input input::placeholder {
    color: #999;
}

.chat-input__send {
    background: #46494c;
    border: none;
    border-radius: 6px;
    padding: 10px 12px;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.chat-input__send:hover {
    background: #333;
}

/* Preview Wrapper */
.preview-wrapper {
    position: relative;
    margin-left: -10px;
}

/* Website Preview */
.website-preview {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.browser-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #F8F8F8;
    border-bottom: 1px solid #E5E5E5;
}

.browser-chrome__dots {
    display: flex;
    gap: 6px;
}

.browser-chrome__dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E0E0E0;
}

.browser-chrome__dots span:first-child {
    background: #FF5F57;
}

.browser-chrome__dots span:nth-child(2) {
    background: #FFBD2E;
}

.browser-chrome__dots span:last-child {
    background: #28CA41;
}

.browser-chrome__url {
    flex: 1;
    background: #FFFFFF;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: #4c5c68;
    text-align: center;
}

/* Malerfirma Preview */
.maler-preview {
    position: relative;
}

.maler-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #F0F0F0;
}

.maler-nav__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #46494c;
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.maler-nav__tagline {
    display: block;
    font-size: 9px;
    color: #c5c3c6;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.maler-nav__menu {
    display: flex;
    gap: 20px;
}

.maler-nav__link {
    font-size: 11px;
    font-weight: 500;
    color: #4c5c68;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.maler-nav__link:hover,
.maler-nav__link--active {
    color: #46494c;
}

.maler-nav__cta {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #1E3A5F;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
}

/* Maler Hero */
.maler-hero {
    position: relative;
    min-height: 397px;
    display: flex;
    align-items: center;
}

.maler-hero__bg {
    position: absolute;
    inset: 0;
    background: url('../images/maler-i-arbeid.jpg') center/cover no-repeat;
    background-color: #4c5c68;
}

.maler-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}

.maler-hero__content {
    position: relative;
    z-index: 1;
    padding: 40px;
    max-width: 400px;
}

.maler-hero__eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: #C4956A;
    margin-bottom: 12px;
}

.maler-hero__headline {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 0 16px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.maler-hero__subtext {
    font-size: 13px;
    line-height: 1.6;
    color: #F0F0F0;
    margin: 0 0 12px 0;
}

.maler-hero__highlight {
    font-size: 12px;
    color: #FFFFFF;
    margin: 0 0 24px 0;
}

.maler-hero__highlight strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.maler-hero__ctas {
    display: flex;
    gap: 12px;
}

.maler-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.maler-cta--primary {
    background: #D4654A;
    color: white;
}

.maler-cta--primary:hover {
    background: #C75D42;
}

.maler-cta--secondary {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}

.maler-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Live Cursors */
.live-cursor {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
    animation: cursor-float 3s ease-in-out infinite;
}

.live-cursor svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.live-cursor__name {
    background: currentColor;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    margin-left: 8px;
}

.live-cursor--green {
    color: #22C55E;
}

.live-cursor--green .live-cursor__name {
    background: #22C55E;
}

.live-cursor--cyan {
    color: #06B6D4;
}

.live-cursor--cyan .live-cursor__name {
    background: #06B6D4;
}

@keyframes cursor-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5px, -5px); }
}

/* Responsive */
@media (max-width: 1024px) {
    .process-showcase__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .chat-panel {
        max-width: 100%;
    }

    .maler-nav__menu {
        display: none;
    }
}

@media (max-width: 768px) {
    .process-showcase {
        padding: 60px 20px;
    }

    .maler-hero__headline {
        font-size: 28px;
    }

    .maler-hero__ctas {
        flex-direction: column;
    }

    .live-cursor {
        display: none;
    }
}

/* ============================================
   SERVICES SHOWCASE - "Slik hjelper vi deg"
   ============================================ */
.services-showcase {
    position: relative;
    min-height: 900px;
    padding: 60px 40px;
    background: #FFFFFF;
    overflow: hidden;
}

.services-showcase__bg-image {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    height: 80%;
    background: url('../images/hand-phone.png') left center/contain no-repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}

.services-showcase__container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-start;
}

/* Venstre boks med tittel og CTA */
.services-showcase__left-box {
    flex: 1;
    height: 560px;
    background: #dcdcdd;
    border-radius: 8px;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Header */
.services-showcase__header {
    text-align: left;
    margin-bottom: 0;
}

.services-showcase__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    color: #46494c;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 24px 0;
}

/* Text reveal animation */
.text-reveal {
    overflow: hidden;
}

.text-reveal .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.text-reveal .letter {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
}

.text-reveal.animate .letter {
    transform: translateY(0);
    opacity: 1;
}

.services-showcase__subtitle {
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

/* Cards Grid */
.services-showcase__grid {
    flex: 0 0 auto;
    width: 670px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.service-card-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    height: 560px;
}

/* Service Card - Slik hjelper vi deg section */
.services-showcase .service-card {
    background: #dcdcdd;
    border-radius: 8px;
    padding: 32px 28px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Lås innhold til toppen - forhindrer layout shift */
    justify-content: flex-start !important;
    align-items: flex-start;
    flex: none;
    height: calc(50% - 12px);
    overflow: hidden;
    position: relative;
    transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    box-shadow: none;
    transform: none !important; /* Overstyrer global translateY(-4px) på hover */
}

/* Fade-gradient på bunnen av kortet - skjuler siste linje helt, fader nest siste */
.services-showcase .service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(to bottom, transparent 0%, #dcdcdd 60%, #dcdcdd 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    border-radius: 0 0 16px 16px;
}

.services-showcase .service-card:hover::after {
    opacity: 0;
}

/* Når kolonnen hovres: alle kort krymper som standard */
.service-card-column:hover .service-card {
    height: calc(35% - 12px);
}

/* Kortet som hovres vokser */
.service-card-column .service-card:hover {
    height: calc(65% - 12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Auto-demo animasjon - viser effekten når seksjonen blir synlig */
.service-card-column.demo-active .service-card {
    height: calc(35% - 12px);
}

.service-card-column.demo-active .service-card.auto-expand {
    height: calc(65% - 12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Hover overstyrer demo */
.service-card-column.demo-active .service-card:hover {
    height: calc(65% - 12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.services-showcase .service-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #46494c;
    margin-bottom: 16px;
    animation: none;
    flex-shrink: 0; /* Forhindrer elementet fra å krympe */
}

.services-showcase .service-card__icon svg {
    width: 24px;
    height: 24px;
}

.services-showcase .service-card__title {
    font-family: 'General Sans', sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: #46494c;
    line-height: 1.2;
    margin: 0 0 16px 0;
    flex-shrink: 0; /* Forhindrer elementet fra å krympe */
}

/* SEO-kortet har lengre tittel, hold den mindre */
.services-showcase .service-card[data-card="4"] .service-card__title {
    font-size: 26px;
}

.services-showcase .service-card__text {
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 1.6;
    margin: 0;
    flex-shrink: 0; /* Forhindrer elementet fra å krympe */
    /* Ingen max-height - teksten flyter naturlig, kortet har overflow: hidden */
    transition: color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.services-showcase .service-card:hover .service-card__text {
    color: #333333;
}

/* Forhindre at globale stiler påvirker innholdet */
.services-showcase .service-card__icon,
.services-showcase .service-card__title,
.services-showcase .service-card__text {
    transform: none !important;
}

/* CTA - Expanding Plus Button */
.services-showcase__cta {
    text-align: left;
    margin-top: auto;
}

.services-showcase__link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 53px;
    height: 53px;
    padding-left: 15px;
    border: none;
    border-radius: 27px;
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #46494c;
    text-decoration: none;
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: width 0.35s ease;
}

/* Hover på hele left-box trigger animasjonen */
.services-showcase__left-box:hover .services-showcase__link {
    width: 195px;
}

/* Plus icon container */
.services-showcase__link .plus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: transform 0.35s ease;
}

.services-showcase__left-box:hover .plus-icon {
    transform: rotate(90deg);
}

.services-showcase__link svg {
    display: block;
}

/* Link text - hidden by default */
.services-showcase__link .link-text {
    display: block;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-width 0.35s ease;
    margin-left: 0;
}

.services-showcase__left-box:hover .link-text {
    opacity: 1;
    max-width: 150px;
    margin-left: 12px;
}

/* Responsive */
@media (max-width: 1199px) {
    .services-showcase__container {
        flex-direction: column;
        gap: 40px;
    }

    .services-showcase__left-box {
        width: 100%;
        height: auto;
        padding: 32px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .services-showcase__grid {
        width: 100%;
    }

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

    .services-showcase__cta {
        margin-top: 0;
    }

    .services-showcase__bg-image {
        opacity: 0.3;
    }
}

@media (max-width: 767px) {
    .services-showcase {
        padding: 80px 16px;
        min-height: auto;
    }

    .services-showcase__left-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .services-showcase__grid {
        width: 100%;
        flex-direction: column;
    }

    .service-card-column {
        width: 100%;
        height: auto;
    }

    .services-showcase__bg-image {
        display: none;
    }

    .service-card {
        min-height: auto;
    }
}

/* Tjenester-seksjon med mørk bakgrunn */
#tjenester {
    background-color: #1d2327;
    padding-top: 80px;
    padding-bottom: 80px;
}

#tjenester .section-overline {
    color: #94A3B8 !important;
    animation: none !important;
}

.section-overline--link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.section-overline--link:hover {
    color: #FFFFFF !important;
}

/* Section CTA Link */
.section-cta {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.section-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
}

.section-cta__link:hover {
    color: #FFFFFF;
}

.section-cta__link svg {
    transition: transform 0.3s ease;
}

.section-cta__link:hover svg {
    transform: translateX(4px);
}

#tjenester .section-header h2 {
    font-family: 'DM Sans', sans-serif;
    color: #FFFFFF;
}

#tjenester .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

#tjenester .service-card {
    background: #252b2f;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#tjenester .service-card:hover {
    background: #2a3136;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#tjenester .service-card__icon {
    color: #94A3B8 !important;
    animation: none !important;
}

#tjenester .service-card h3 {
    color: #FFFFFF;
}

#tjenester .service-card p {
    color: rgba(255, 255, 255, 0.65);
}

#tjenester .service-card__link {
    color: #94A3B8 !important;
    animation: none !important;
}

#tjenester .service-card__link:hover {
    color: #CBD5E1 !important;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

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

.section-header__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.section-header__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-accent);
    transition: all var(--transition-fast);
    /* Cascade animation - Portfolio section (delay: 3.6s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.section-header__link:hover {
    gap: 12px;
}

.section-overline {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 16px;
    /* Cascade animation */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0.4s;
}

/* Timeline overline følger nettsidefargen */
.timeline-section .section-overline {
    color: #1E3A5F;
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0.4s;
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 18px;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   SERVICES
   ============================================ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.service-card {
    background: var(--color-bg-secondary);
    padding: 40px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-base);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.service-card__icon {
    margin-bottom: 24px;
    color: var(--color-accent);
    /* Cascade animation - Tjenester section (delay: 2.8s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.service-card h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.service-card p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-accent);
    transition: all var(--transition-fast);
    /* Cascade animation - Tjenester section (delay: 3.2s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.service-card__link svg {
    transition: transform var(--transition-fast);
}

.service-card__link:hover {
    color: var(--color-accent-hover);
}

.service-card__link:hover svg {
    transform: translateX(4px);
}

/* Services Grid - Four columns */
.services-grid--four {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Minimal service card style */
.service-card--minimal {
    background: var(--color-bg-secondary);
    padding: 32px 28px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-base);
}

.service-card--minimal:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.service-card__icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #FFFFFF;
}

.service-card__icon-circle svg {
    width: 24px;
    height: 24px;
}

.service-card--minimal h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
    color: #363b42;
    margin-bottom: 12px;
    text-align: left;
}

.service-card--minimal p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: 0;
    text-align: left;
}

/* Responsive for four columns */
@media (max-width: 1100px) {
    .services-grid--four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-grid--four {
        grid-template-columns: 1fr;
    }

    .service-card--minimal {
        padding: 24px 20px;
    }
}

/* ============================================
   WAVES BACKGROUND - Parallax
   ============================================ */

.section--waves {
    position: relative;
    overflow: hidden;
}

.waves-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.waves-svg {
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

.wave {
    fill: none;
    stroke-linecap: round;
}

.wave--1,
.wave--2 {
    display: none;
}

.wave--3 {
    stroke: #e0dbd5;
    stroke-width: 1.5;
    opacity: 0.8;
}

.wave--4 {
    stroke: #d8d3cc;
    stroke-width: 1.5;
    opacity: 0.7;
}

/* Ensure content is above waves */
.section--waves .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   PROJECTS
   ============================================ */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.project-card {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-base);
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.project-card--wide {
    grid-column: 1 / -1;
}

.project-card__image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.project-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform var(--transition-slow);
}

.project-card:hover .project-card__img {
    transform: scale(1.02);
}

.project-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    transition: transform var(--transition-slow);
}

.project-card__placeholder--alt {
    background: linear-gradient(135deg, #E8E4E1 0%, #D8D4D1 100%);
}

.project-card__placeholder--alt2 {
    background: linear-gradient(135deg, #E1E5E8 0%, #D1D5D8 100%);
}

.project-card:hover .project-card__placeholder {
    transform: scale(1.02);
}

.project-card__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    background: var(--color-accent);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    /* Cascade animation - Portfolio section (delay: 4.0s) */
    animation: bgColorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.project-card__content {
    padding: 24px;
}

.project-card__content h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.project-card__result {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 12px;
    /* Cascade animation - Portfolio section (delay: 4.4s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.project-card__desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ============================================
   PROCESS
   ============================================ */

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

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

.process-step__number {
    display: block;
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: 700;
    color: var(--color-accent);
    opacity: 0.2;
    line-height: 1;
    margin-bottom: 16px;
    /* Cascade animation - Prosess section (delay: 4.8s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.process-step h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.process-step p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ============================================
   TESTIMONIALS
   ============================================ */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.testimonial-card {
    position: relative;
    background: var(--color-bg-secondary);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.testimonial-card__quote {
    position: absolute;
    top: 20px;
    left: 32px;
    font-family: var(--font-heading);
    font-size: 80px;
    font-weight: 700;
    color: var(--color-accent);
    opacity: 0.15;
    line-height: 1;
    /* Cascade animation - Testimonials section (delay: 5.2s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.testimonial-card blockquote {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.testimonial-card blockquote p {
    font-family: var(--font-heading);
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testimonial-card__avatar {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
    border-radius: 50%;
}

.testimonial-card__author strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.testimonial-card__author span {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ============================================
   GARANTI
   ============================================ */

.garanti-boks {
    background: linear-gradient(135deg, rgba(54, 59, 66, 0.03) 0%, rgba(54, 59, 66, 0.08) 100%);
    border: 1px solid rgba(54, 59, 66, 0.2);
    border-radius: 8px;
    padding: 64px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.garanti-icon {
    margin-bottom: 24px;
    color: var(--color-accent);
    /* Cascade animation - element 6 (delay: 2.0s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

/* Glass effect icon */
.garanti-icon--glass {
    animation: none;
    cursor: pointer;
    transition: transform 0.4s ease;
    position: relative;
}

.garanti-icon--glass svg {
    filter: drop-shadow(0 2px 6px rgba(79, 209, 197, 0.15));
    transition: filter 0.4s ease, transform 0.4s ease;
}

.garanti-icon--glass:hover {
    transform: scale(1.1);
}

.garanti-icon--glass:hover svg {
    filter: drop-shadow(0 4px 12px rgba(183, 148, 244, 0.25));
}

.garanti-overline {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 16px;
    /* Cascade animation - same as garanti-icon */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.garanti-boks h2 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 20px;
}

.garanti-boks > p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto 32px;
}

.garanti-liste {
    display: flex;
    justify-content: center;
    gap: 24px;
    list-style: none;
}

.garanti-liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    background: #FFFFFF;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.garanti-liste svg {
    color: var(--color-accent);
    flex-shrink: 0;
    /* Cascade animation - element 5 (delay: 1.6s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

/* Icon style variant - no boxes */
.garanti-liste--icons {
    gap: 60px;
    justify-content: center;
}

.garanti-liste--icons li {
    flex-direction: column;
    gap: 12px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    flex: 0 0 auto;
    width: 140px;
    white-space: nowrap;
}

.garanti-liste--icons svg {
    width: 32px;
    height: 32px;
}

/* ============================================
   GARANTI - FIGMA VARIANT
   Inspirert av SMWD Layout Library
   ============================================ */

.garanti-figma {
    background-color: #FFFFFF;
    padding: 60px 24px;
}

.garanti-figma__container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.garanti-figma__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #000000;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 40px;
}

.garanti-figma__badge svg {
    width: 18px;
    height: 18px;
}

.garanti-figma__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 600;
    color: #46494c;
    line-height: 1.1;
    margin-bottom: 24px;
}

.garanti-figma__text {
    font-size: 18px;
    line-height: 1.7;
    color: #4c5c68;
    max-width: 600px;
    margin: 0 auto 48px;
}

.garanti-figma__features {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.garanti-figma__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    padding: 16px 24px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    color: #46494c;
    border: 1px solid #e5e5e5;
}

.garanti-figma__feature svg {
    width: 20px;
    height: 20px;
    color: #46494c;
}

@media (max-width: 768px) {
    .garanti-figma {
        padding: 80px 16px;
    }

    .garanti-figma__features {
        flex-direction: column;
        align-items: center;
    }

    .garanti-figma__feature {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ============================================
   ABOUT
   ============================================ */

#om-oss .container {
    max-width: 1400px;
    padding: 0 40px;
    margin: 0 auto;
}

.about-grid {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: center;
}

.about-image {
    flex: 1;
}

.about-image__placeholder {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
}

.about-image__photo {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: 8px;
}

.about-content {
    flex: 0 0 auto;
    width: 670px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-content .section-overline {
    margin-bottom: 12px;
}

.about-content h2 {
    font-family: 'General Sans', sans-serif;
    font-size: clamp(36px, 5vw, 48px);
    font-weight: 500;
    color: #000000;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.about-content p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.about-signature {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-text-primary) !important;
    margin-top: 24px !important;
}

/* Forhindre at knappen strekkes til full bredde i flex-kolonnen */
.about-content .typography-cta {
    align-self: flex-start;
}

.about-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-accent);
    margin-top: 16px;
    transition: all var(--transition-fast);
    /* Cascade animation - Om oss section (delay: 5.6s) */
    animation: colorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.about-link svg {
    transition: transform var(--transition-fast);
}

.about-link:hover svg {
    transform: translateX(4px);
}

/* ============================================
   FEATURES SHINE SECTION
   ============================================ */

.features-shine-section {
    padding: 100px 40px;
    background: #fff;
}

.features-shine-container {
    max-width: 1200px;
    margin: 0 auto;
}

.features-shine-header {
    text-align: center;
    margin-bottom: 60px;
}

.features-shine-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 20px 0;
    font-style: italic;
}

.features-shine-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.features-shine-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.features-shine-card {
    background: #F5F7FA;
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.features-shine-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.features-shine-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.features-shine-card-preview {
    background: #FAFAFA;
    border-radius: 16px;
    padding: 24px;
    flex: 1;
    margin-bottom: 24px;
}

.preview-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.preview-progress-bar {
    width: 40px;
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
}

.preview-progress-fill {
    flex: 1;
    height: 6px;
    background: #E0D5C9;
    border-radius: 3px;
}

.preview-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.preview-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #888;
    margin: 0 0 20px 0;
}

.preview-question {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.preview-select {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #aaa;
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
}

.preview-steps {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.preview-step {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    background: #fff;
}

.preview-step--active {
    background: #F5C563;
    border-color: #F5C563;
}

.features-shine-card-btn {
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #1a1a1a;
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.features-shine-card-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .features-shine-section {
        padding: 60px 20px;
    }

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

    .features-shine-subtitle br {
        display: none;
    }
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    padding: 80px 0;
    background: #1d2327;
    text-align: center;
}

.cta-section h2 {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.cta-section p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
}

.cta-section__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: #4c5c68;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    transition: all var(--transition-fast);
}

.cta-section__btn:hover {
    background: #46494c;
}

.cta-section__btn svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.cta-section__btn svg.arrow-animating {
    animation: arrow-slide 0.7s ease forwards;
}

/* ============================================
   REFERENCES SECTION
   ============================================ */

.references-section {
    padding: 100px 0;
    background: var(--color-bg);
}

.references-section .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.references-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.reference-item {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.reference-item--reverse {
    direction: rtl;
}

.reference-item--reverse > * {
    direction: ltr;
}

/* Reference Content */
.reference-content {
    display: flex;
    flex-direction: column;
    flex: 0 0 45%;
}

.reference-quote {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: 16px;
    font-style: normal;
}

.reference-company {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--transition-fast);
    animation: colorShift 60s infinite;
}

.reference-company:hover {
    opacity: 0.8;
}

.reference-divider {
    width: 40px;
    height: 2px;
    background: #E5E7EB;
    margin: 20px 0;
}

.reference-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.reference-date {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.reference-rating {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reference-author {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.reference-stars {
    font-size: 14px;
    color: #F59E0B;
    letter-spacing: 2px;
}

.reference-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.reference-concept {
    font-size: 14px;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 4px;
}

.reference-subtitle {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.reference-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.reference-list li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    padding-left: 16px;
    position: relative;
    margin-bottom: 8px;
}

.reference-list li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--color-text-secondary);
}

/* Browser Frame Mockup */
.reference-mockup {
    flex: 0 0 50%;
    max-width: 500px;
}

.browser-frame {
    background: var(--color-bg-alt);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    max-height: 500px;
}

.browser-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #F3F4F6;
    border-bottom: 1px solid #E5E7EB;
}

.browser-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.browser-dot--red {
    background: #EF4444;
}

.browser-dot--yellow {
    background: #F59E0B;
}

.browser-dot--green {
    background: #22C55E;
}

.browser-url {
    flex: 1;
    margin-left: 12px;
    padding: 6px 12px;
    background: white;
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.browser-content {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    display: block;
    overflow: hidden;
}

.browser-content img {
    width: 100%;
    height: auto;
    display: block;
}

.browser-placeholder {
    font-size: 14px;
    color: var(--color-text-secondary);
    padding: 80px 0;
    text-align: center;
}

.browser-screenshot {
    width: 100%;
    height: auto;
    display: block;
}

/* Browser Slideshow */
.browser-slideshow {
    position: relative;
}

.browser-slideshow .browser-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.browser-slideshow .browser-slide:first-child {
    position: relative;
}

.browser-slideshow .browser-slide.active {
    opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .references-section .container {
        padding: 0 24px;
    }

    .references-list {
        gap: 80px;
    }

    .reference-item {
        flex-direction: column;
        gap: 40px;
    }

    .reference-item--reverse {
        direction: ltr;
    }

    .reference-content,
    .reference-mockup {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .reference-mockup {
        order: -1;
    }

    .reference-quote {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .references-list {
        gap: 60px;
    }

    .reference-item {
        gap: 32px;
    }

    .reference-quote {
        font-size: 18px;
    }
}

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

.footer {
    background: #1d2327;
    padding: 80px 0 40px;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer__brand p {
    font-size: 15px;
    line-height: 1.7;
    color: #9CA3AF;
    margin-top: 16px;
    max-width: 280px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-bg);
}

.footer__monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
}

.footer__logo span:last-child {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
}

.footer h4 {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-bg);
    margin-bottom: 20px;
}

.footer__nav nav,
.footer__contact,
.footer__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__nav a,
.footer__contact a,
.footer__links a {
    font-size: 15px;
    color: #9CA3AF;
    transition: color var(--transition-fast);
}

.footer__contact p {
    font-size: 15px;
    color: #9CA3AF;
    margin: 0;
}

.footer__nav a:hover,
.footer__contact a:hover,
.footer__links a:hover {
    color: var(--color-bg);
}

.footer__social-links {
    display: flex;
    gap: 16px;
}

.footer__social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #9CA3AF;
    transition: all var(--transition-fast);
}

.footer__social-links a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-bg);
}

.footer__bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer__bottom p {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

.footer__privacy-link {
    font-size: 14px;
    color: #6B7280;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__privacy-link:hover {
    color: var(--color-bg);
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease-out forwards;
}

.animate-fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    animation: fadeInRight 0.8s ease-out forwards;
    animation-delay: 0.4s;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
    .container {
        padding: 0 32px;
    }

    .header {
        padding: 0 32px;
    }

    .hero {
        padding: 120px 32px 60px;
    }

    .hero__container {
        gap: 48px;
    }

    .hero h1 {
        font-size: clamp(37px, 4.6vw, 49px);
    }

    .browser-mockup {
        max-width: 420px;
    }

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

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

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

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

    .about-grid {
        flex-direction: column;
        gap: 48px;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (under 768px)
   ============================================ */

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

    .header {
        height: 72px;
        padding: 0 16px;
    }

    .nav,
    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .hero {
        padding: 100px 16px 60px;
        min-height: 80vh;
    }

    /* Hero section mobil */
    .hero-section {
        padding: 100px 16px 60px;
        min-height: auto;
    }

    .hero__gradient-orb {
        top: -10%;
        right: -30%;
        width: 500px;
        height: 500px;
    }

    .hero__container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-image {
        display: none;
    }

    .hero-content {
        align-items: center;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .hero-message {
        align-items: center;
    }

    .hero-headline,
    .hero h1 {
        font-size: 34px;
        white-space: normal;
    }

    .hero-subtext,
    .hero-subtitle {
        font-size: 16px;
        max-width: 100%;
    }

    .hero-action {
        align-items: stretch;
        width: 100%;
    }

    .hero-form {
        max-width: 100%;
    }

    .hero-submit {
        max-width: 100%;
    }

    .hero-trust-badges {
        justify-content: center;
        max-width: 100%;
        gap: 12px;
        flex-wrap: wrap;
    }


    .hero-mockup-wrapper,
    .hero-visual {
        display: none;
    }

    /* Logo stripe */
    .logo-stripe {
        padding: 48px 0;
    }

    .logo-stripe .container {
        flex-direction: column;
        gap: 24px;
    }

    .logo-stripe__logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    /* Sections */
    .section {
        padding: 80px 0;
    }

    .section-header {
        margin-bottom: 48px;
    }

    .section-header__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* Process */
    .process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .process-step__number {
        font-size: 48px;
    }

    /* Garanti */
    .garanti-boks {
        padding: 40px 24px;
    }

    .garanti-liste {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .garanti-liste--icons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 32px;
    }

    /* About */
    #om-oss .container {
        padding: 0 16px;
    }

    .about-image {
        order: -1;
    }

    .about-image__photo {
        height: auto;
        aspect-ratio: 1/1;
    }

    .about-content {
        width: 100%;
        text-align: center;
    }

    .about-content p {
        max-width: 100%;
    }

    /* CTA */
    .cta-section {
        padding: 80px 0;
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer__brand {
        text-align: center;
    }

    .footer__brand p {
        max-width: 100%;
        margin: 16px auto 0;
    }

    .footer__logo {
        justify-content: center;
    }

    .footer__nav,
    .footer__contact,
    .footer__social {
        text-align: center;
    }

    .footer__social-links {
        justify-content: center;
    }

    .footer__bottom {
        text-align: center;
    }
}

/* ============================================
   NY NETTSIDE PAGE
   ============================================ */

.header--simple {
    justify-content: center;
}

.new-site-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 80px;
}

.new-site-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.new-site-content {
    text-align: center;
}

.new-site-headline {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.new-site-subtitle {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 40px;
}

.new-site-form {
    text-align: left;
}

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

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.form-input,
.form-select {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px 20px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(54, 59, 66, 0.1);
}

.form-input::placeholder {
    color: #9CA3AF;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
}

.new-site-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 16px 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 8px;
    /* Cascade animation - same as hero-submit (delay: 1.2s) */
    animation: bgColorShift 60s ease-in-out infinite;
    animation-delay: 0s;
}

.new-site-submit:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(54, 59, 66, 0.3);
}

.new-site-submit svg {
    transition: transform var(--transition-fast);
}

.new-site-submit:hover svg {
    transform: translateX(4px);
}

.new-site-form .privacy-note {
    justify-content: center;
    margin-top: 16px;
}

.new-site-form .form-alt-link {
    text-align: center;
}

/* ============================================
   SUCCESS POPUP
   ============================================ */

.popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.popup.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

.popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.popup-content {
    position: relative;
    background: #FFFFFF;
    padding: 32px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: popupFadeIn 0.3s ease-out;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.popup-icon {
    width: 48px;
    height: 48px;
    background: var(--color-accent);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: bgColorShift 60s ease-in-out infinite;
}

.popup-icon svg {
    width: 24px;
    height: 24px;
}

.popup-content h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.popup-content p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.popup-close {
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    animation: bgColorShift 60s ease-in-out infinite;
}

.popup-close:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(54, 59, 66, 0.3);
}

/* Two-Column Popup Layout */
.popup-content--wide {
    max-width: 920px;
    width: calc(100vw - 40px);
    text-align: left;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.popup-main-heading {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: left;
    margin-bottom: 24px;
    margin-left: 305px;
}

.popup-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    margin-bottom: 24px;
    max-width: 100%;
}

.popup-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

.popup-left .popup-icon {
    margin: 0 auto 12px;
}

/* Animated green checkmark icon */
.popup-icon--animated {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    animation: popIn 0.4s ease-out;
}

.popup-icon--animated svg {
    width: 40px;
    height: 40px;
    stroke: white;
}

.popup-left h3 {
    margin-bottom: 6px;
}

.popup-left p {
    margin-bottom: 0;
    font-size: 13px;
}

.popup-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.popup-right h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

/* Popup Timeline Steps */
.popup-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-left: 20px;
    border-left: 2px solid rgba(54, 59, 66, 0.2);
    width: 100%;
    max-width: 480px;
}

.popup-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 120px;
    align-items: start;
    gap: 20px;
}

.popup-step__content {
    flex: 1;
    min-width: 0;
}

/* Popup Step Mockup Illustrations */
.popup-step__mockup {
    width: 120px;
    height: 70px;
    background: #FDFBF9;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    font-size: 8px;
    flex-shrink: 0;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Steg 1: Mini Gmail-innboks */
.mockup-inbox {
    display: flex;
    flex-direction: column;
}

.mockup-inbox__header {
    display: flex;
    gap: 3px;
    padding: 4px 6px;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
}

.mockup-inbox__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #D1D5DB;
}

.mockup-inbox__row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid #F3F4F6;
}

.mockup-inbox__row--unread {
    background: #EFF6FF;
    font-weight: 600;
}

.mockup-inbox__row--read {
    background: #FFFFFF;
    opacity: 0.6;
}

.mockup-inbox__unread-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3e5c76;
    flex-shrink: 0;
    animation: inboxPulse 2s ease-in-out infinite;
}

@keyframes inboxPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

.mockup-inbox__sender {
    color: #1F2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 50px;
}

.mockup-inbox__subject {
    color: #6B7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.mockup-inbox__row--unread .mockup-inbox__sender,
.mockup-inbox__row--unread .mockup-inbox__subject {
    color: #1F2937;
}

/* Steg 2: Mini e-post-svar */
.mockup-reply {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #FFFFFF;
}

.mockup-reply__to {
    color: #9CA3AF;
    margin-bottom: 4px;
    font-size: 7px;
}

.mockup-reply__text {
    color: #374151;
    line-height: 1.4;
}

.mockup-reply__cursor {
    display: inline-block;
    width: 1px;
    height: 8px;
    background: var(--color-accent);
    margin-left: 1px;
    animation: cursorBlink 1s step-end infinite, bgColorShift 60s ease-in-out infinite;
}

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

/* Steg 3: Før/etter sammenligning */
.mockup-compare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: #FFFFFF;
}

.mockup-compare__before,
.mockup-compare__after {
    flex: 1;
}

.mockup-mini-site {
    background: #FDFBF9;
    border: 1px solid #E5E7EB;
    border-radius: 3px;
    padding: 3px;
    height: 42px;
}

.mockup-mini-site--before {
    opacity: 0.5;
}

.mockup-mini-site__bar {
    height: 3px;
    background: #D1D5DB;
    border-radius: 1px;
    margin-bottom: 3px;
    width: 60%;
}

.mockup-mini-site__bar--accent {
    background: var(--color-mockup-accent);
}

.mockup-mini-site__block {
    height: 10px;
    background: #E5E7EB;
    border-radius: 1px;
    margin-bottom: 2px;
}

.mockup-mini-site__block--accent {
    background: var(--color-mockup-accent-light);
    border: 1px solid rgba(224, 122, 95, 0.3); /* Mockup only */
}

.mockup-mini-site__block--small {
    height: 6px;
    width: 70%;
}

.mockup-compare__arrow {
    color: var(--color-accent);
    font-size: 10px;
    font-weight: 700;
    animation: arrowPulse 2s ease-in-out infinite, colorShift 60s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(2px); }
}

/* Steg 4: Mini browser med live-badge */
.mockup-browser {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    position: relative;
}

.mockup-browser__header {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    background: #F3F4F6;
    border-bottom: 1px solid #E5E7EB;
}

.mockup-browser__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.mockup-browser__dot--red { background: #EF4444; }
.mockup-browser__dot--yellow { background: #F59E0B; }
.mockup-browser__dot--green { background: #10B981; }

.mockup-browser__url {
    flex: 1;
    background: #FFFFFF;
    border-radius: 3px;
    padding: 2px 4px;
    margin-left: 3px;
    color: #6B7280;
    font-size: 7px;
}

.mockup-browser__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.mockup-browser__live-badge {
    background: #10B981;
    color: #FFFFFF;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 600;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

.mockup-browser__confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.mockup-browser__confetti span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    animation: confettiFall 3s ease-in-out infinite;
}

.mockup-browser__confetti span:nth-child(1) {
    background: var(--color-mockup-accent);
    left: 20%;
    animation-delay: 0s;
}

.mockup-browser__confetti span:nth-child(2) {
    background: #10B981;
    left: 40%;
    animation-delay: 0.5s;
}

.mockup-browser__confetti span:nth-child(3) {
    background: #3e5c76;
    left: 60%;
    animation-delay: 1s;
}

.mockup-browser__confetti span:nth-child(4) {
    background: #F59E0B;
    left: 80%;
    animation-delay: 1.5s;
}

.mockup-browser__confetti span:nth-child(5) {
    background: #8B5CF6;
    left: 50%;
    animation-delay: 2s;
}

@keyframes confettiFall {
    0% { top: -10%; opacity: 0; transform: rotate(0deg); }
    10% { opacity: 1; }
    100% { top: 110%; opacity: 0; transform: rotate(360deg); }
}

.popup-step::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 24px;
    width: 8px;
    height: 8px;
    background: #FFFFFF;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    animation: solidBorderColorShift 60s ease-in-out infinite;
}

.popup-step__number {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    opacity: 0.8;
    animation: colorShift 60s ease-in-out infinite;
}

.popup-step__title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.popup-step__intro {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 3px;
    line-height: 1.3;
}

.popup-step__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popup-step__list li {
    position: relative;
    padding-left: 10px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text-secondary);
    margin-bottom: 1px;
}

.popup-step__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 3px;
    height: 3px;
    background: #9CA3AF;
    border-radius: 50%;
}

.popup-step__list li:last-child {
    margin-bottom: 0;
}

.popup-content--wide .popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
}

/* Mobile: Stack columns */
@media (max-width: 700px) {
    .popup-content--wide {
        padding: 32px 24px;
    }

    .popup-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .popup-left {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: 24px;
    }

    .popup-timeline {
        gap: 20px;
    }

    .popup-step__mockup {
        width: 120px;
        height: 70px;
        font-size: 8px;
    }

    .mockup-mini-site {
        height: 48px;
    }
}

/* ============================================
   PRIVACY PAGE
   ============================================ */

.privacy-section {
    min-height: 100vh;
    padding: 120px 24px 80px;
    background: var(--color-bg);
}

.privacy-container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.privacy-content {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 48px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.privacy-updated {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.privacy-headline {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.privacy-intro {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    padding-bottom: 32px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 32px;
}

.privacy-intro p {
    margin: 0;
}

.privacy-block {
    margin-bottom: 32px;
}

.privacy-block h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.privacy-block p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.privacy-block p:last-child {
    margin-bottom: 0;
}

.privacy-block ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.privacy-block ul li {
    position: relative;
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.privacy-block ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: bgColorShift 90s ease-in-out infinite;
}

.privacy-block a {
    color: var(--color-accent);
    text-decoration: none;
    transition: opacity var(--transition-fast);
    animation: colorShift 90s ease-in-out infinite;
}

.privacy-block a:hover {
    opacity: 0.8;
}

.privacy-back {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #E5E7EB;
}

.privacy-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.privacy-back-link:hover {
    color: var(--color-accent);
}

.privacy-back-link svg {
    transition: transform var(--transition-fast);
}

.privacy-back-link:hover svg {
    transform: translateX(-4px);
}

/* Privacy page responsive */
@media (max-width: 768px) {
    .privacy-section {
        padding: 100px 16px 60px;
    }

    .privacy-content {
        padding: 32px 24px;
    }

    .privacy-headline {
        font-size: 28px;
    }

    .privacy-block h2 {
        font-size: 18px;
    }
}

/* ============================================
   KNOWLEDGE PAGE
   ============================================ */

.knowledge-hero {
    padding: 160px 0 80px;
    text-align: center;
    background: linear-gradient(180deg, #FDFBF9 0%, #FDFBF9 100%);
}

.knowledge-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 600;
    color: var(--color-text);
    margin: 16px 0;
    line-height: 1.2;
}

.knowledge-hero__subtitle {
    font-size: 18px;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.knowledge-section {
    padding: 60px 0 100px;
}

/* Knowledge Section Home */
.knowledge-section-home {
    padding: 60px 0;
    background: #FFFFFF;
}

.knowledge-section-home .section-header {
    text-align: center;
    margin-bottom: 48px;
}

.knowledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}

.knowledge-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 32px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.knowledge-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.knowledge-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-radius: 8px;
    margin-bottom: 20px;
    color: #3e5c76;
}

.knowledge-card__category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 12px;
    animation: colorShift 60s ease-in-out infinite;
}

.knowledge-card__title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.3;
}

.knowledge-card__excerpt {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.knowledge-card__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    opacity: 0;
    margin-bottom: 0;
}

.knowledge-card.expanded .knowledge-card__content {
    max-height: 1000px;
    opacity: 1;
    margin-bottom: 20px;
}

.knowledge-card__content h3 {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    margin: 24px 0 8px;
}

.knowledge-card__content h3:first-child {
    margin-top: 0;
}

.knowledge-card__content p {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Knowledge card toggle - Plus button design */
.knowledge-card__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 40px;
    height: 40px;
    padding-left: 11px;
    background: #1d2327;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: width 0.35s ease;
}

/* Hover på hele kortet trigger animasjonen */
.knowledge-card:hover .knowledge-card__toggle {
    width: 125px;
}

.knowledge-card__toggle .plus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    transition: transform 0.35s ease;
}

.knowledge-card:hover .knowledge-card__toggle .plus-icon {
    transform: rotate(90deg);
}

.knowledge-card__toggle svg {
    display: block;
    stroke: #fff;
}

.knowledge-card__toggle .toggle-text {
    display: block;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-width 0.35s ease;
    margin-left: 0;
}

.knowledge-card:hover .knowledge-card__toggle .toggle-text {
    opacity: 1;
    max-width: 80px;
    margin-left: 10px;
}

/* Expanded state - roterer plus til X */
.knowledge-card.expanded .knowledge-card__toggle .plus-icon {
    transform: rotate(45deg);
}

.knowledge-card.expanded .knowledge-card__toggle .toggle-text {
    opacity: 1;
    max-width: 80px;
    margin-left: 10px;
}

.knowledge-card.expanded .knowledge-card__toggle {
    width: 140px;
}

/* Knowledge CTA Section - Link to Innsikt */
.knowledge-cta-section {
    padding: 60px 0;
}

.knowledge-cta-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 32px;
    margin-top: 80px;
    margin-bottom: 40px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.03) 0%, rgba(30, 58, 95, 0.08) 100%);
    border-radius: 8px;
    border: 1px solid rgba(30, 58, 95, 0.1);
    transition: all 0.3s ease;
}

.knowledge-cta-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(30, 58, 95, 0.1);
}

.knowledge-cta-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    color: #1E3A5F;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    animation: colorShift 60s ease-in-out infinite;
}

.knowledge-cta-content h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.knowledge-cta-content p {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 500px;
}

.knowledge-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #46494c;
    color: white;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.knowledge-cta-btn:hover {
    background: #333;
}

.knowledge-cta-btn svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.knowledge-cta-btn svg.arrow-animating {
    animation: arrow-slide 0.7s ease forwards;
}

@media (max-width: 768px) {
    .knowledge-cta-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .knowledge-cta-content h3 {
        font-size: 20px;
    }

    .knowledge-cta-content p {
        font-size: 15px;
    }
}

/* Nav active state */
.nav a.active,
.mobile-menu__link.active {
    color: var(--color-accent);
}

/* Knowledge page responsive */
@media (max-width: 768px) {
    .knowledge-hero {
        padding: 120px 20px 60px;
    }

    .knowledge-hero h1 {
        font-size: 28px;
    }

    .knowledge-hero__subtitle {
        font-size: 16px;
    }

    .knowledge-section {
        padding: 40px 0 80px;
    }

    .knowledge-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .knowledge-card {
        padding: 24px;
    }

    .knowledge-card__title {
        font-size: 19px;
    }
}

/* ============================================
   OM OSS PAGE STYLES
   ============================================ */

/* 1. About Hero Section */
.about-hero {
    padding: 120px 24px 80px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-hero .overline {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #1E3A5F;
    margin-bottom: 16px;
    display: block;
    animation: colorShift 60s ease-in-out infinite;
}

.about-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    color: #46494c;
    margin-bottom: 24px;
    line-height: 1.2;
}

.about-hero h1 em {
    color: #1E3A5F;
    font-style: normal;
    animation: colorShift 60s ease-in-out infinite;
}

.about-hero__intro {
    font-size: 20px;
    color: #6B7280;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* 2. About Story Section */
.about-story {
    padding: 80px 24px;
    background: #FDFBF9;
}

.about-story__container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.about-story__image {
    width: 100%;
}

.image-placeholder {
    width: 100%;
    height: 400px;
    background: #E5E7EB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    font-size: 14px;
}

.about-story__content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
    margin-bottom: 24px;
}

.about-story__content p {
    font-size: 17px;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-story__content p:first-of-type {
    font-size: 20px;
    font-weight: 500;
    color: #46494c;
}

.about-story__signature {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    color: #6B7280;
    margin-top: 24px;
}

/* 3. About Approach Section */
.about-approach {
    padding: 100px 24px;
}

.about-approach__container {
    max-width: 1100px;
    margin: 0 auto;
}

.about-approach__header {
    text-align: center;
    margin-bottom: 60px;
}

.about-approach__header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
    margin-bottom: 12px;
}

.about-approach__header p {
    font-size: 18px;
    color: #6B7280;
}

.about-approach__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.approach-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 40px 32px;
    transition: all 0.3s ease;
}

.approach-card:hover {
    border-color: #1E3A5F;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

.approach-card__icon {
    width: 56px;
    height: 56px;
    background: rgba(30, 58, 95, 0.1);
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.approach-card__icon svg {
    color: #1E3A5F;
    animation: colorShift 60s ease-in-out infinite;
}

.approach-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #46494c;
    margin-bottom: 16px;
}

.approach-card p {
    font-size: 16px;
    color: #374151;
    line-height: 1.7;
    margin-bottom: 12px;
}

.approach-card__subtext {
    font-size: 15px;
    color: #6B7280;
    line-height: 1.7;
}

/* 4. About Team Section */
.about-team {
    padding: 100px 24px;
    background: #FDFBF9;
}

.about-team__container {
    max-width: 800px;
    margin: 0 auto;
}

.about-team__header {
    text-align: center;
    margin-bottom: 48px;
}

.about-team__header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
}

.about-team__profile {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
}

.image-placeholder--round {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.profile-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #46494c;
    margin-bottom: 4px;
}

.profile-role {
    font-size: 16px;
    color: #1E3A5F;
    font-weight: 500;
    display: block;
    margin-bottom: 20px;
    animation: colorShift 60s ease-in-out infinite;
}

.profile-content p {
    font-size: 17px;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 16px;
}

.profile-contact {
    margin-top: 24px;
}

.profile-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1E3A5F;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
    animation: colorShift 60s ease-in-out infinite;
}

.profile-link:hover {
    opacity: 0.8;
}

.profile-link svg {
    width: 20px;
    height: 20px;
}

/* 5. About CTA Section */
.about-cta {
    padding: 100px 24px;
    text-align: center;
}

.about-cta__container {
    max-width: 600px;
    margin: 0 auto;
}

.about-cta h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
    margin-bottom: 16px;
}

.about-cta p {
    font-size: 18px;
    color: #6B7280;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Button styles for about page */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn--primary {
    background: #1E3A5F;
    color: #FFFFFF;
    animation: bgColorShift 60s ease-in-out infinite;
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.3);
}

/* Alias for btn-primary (single dash variant) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    background: #2D2D2D;
    color: #FFFFFF;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #46494c;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn--large {
    padding: 16px 32px;
    font-size: 17px;
}

/* Om oss Responsive */
@media (max-width: 900px) {
    .about-approach__cards {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .about-hero {
        padding: 100px 20px 60px;
    }

    .about-hero h1 {
        font-size: 32px;
    }

    .about-hero__intro {
        font-size: 17px;
    }

    .about-story {
        padding: 60px 20px;
    }

    .about-story__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-story__content h2 {
        font-size: 28px;
    }

    .about-approach {
        padding: 60px 20px;
    }

    .about-approach__header h2 {
        font-size: 28px;
    }

    .about-team {
        padding: 60px 20px;
    }

    .about-team__profile {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-image {
        display: flex;
        justify-content: center;
    }

    .image-placeholder--round {
        width: 160px;
        height: 160px;
    }

    .about-team__header h2 {
        font-size: 28px;
    }

    .about-cta {
        padding: 60px 20px;
    }

    .about-cta h2 {
        font-size: 28px;
    }

    .about-cta p {
        font-size: 16px;
    }
}

/* ============================================
   NEW OM OSS PAGE STYLES
   ============================================ */

/* 1. About Hero New */
.about-hero-new {
    padding: 140px 24px 80px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-hero-new__container {
    max-width: 700px;
    margin: 0 auto;
}

.about-hero-new .overline {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1E3A5F;
    margin-bottom: 16px;
    display: block;
    animation: colorShift 60s ease-in-out infinite;
}

.about-hero-new h1 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    color: #46494c;
    margin-bottom: 24px;
    line-height: 1.2;
}

.about-hero-new h1 em {
    color: #1E3A5F;
    font-style: normal;
    animation: colorShift 60s ease-in-out infinite;
}

.about-hero-new__lead {
    font-size: 20px;
    color: #6B7280;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* 2. About Philosophy */
.about-philosophy {
    padding: 80px 24px;
    background: #FDFBF9;
}

.about-philosophy__container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.about-philosophy__image {
    width: 100%;
}

.about-philosophy__content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: #46494c;
    margin-bottom: 20px;
    line-height: 1.3;
}

.about-philosophy__content p {
    font-size: 17px;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-philosophy__list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    border-left: 3px solid #1E3A5F;
    padding-left: 20px;
    animation: solidBorderColorShift 60s ease-in-out infinite;
}

.about-philosophy__list li {
    font-size: 17px;
    color: #374151;
    margin-bottom: 8px;
}

.about-philosophy__list li strong {
    color: #46494c;
}

/* 3. About Process */
.about-process {
    padding: 100px 24px;
}

.about-process__container {
    max-width: 1100px;
    margin: 0 auto;
}

.about-process__header {
    text-align: center;
    margin-bottom: 60px;
}

.about-process__header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
    margin-bottom: 12px;
}

.about-process__header p {
    font-size: 18px;
    color: #6B7280;
}

.about-process__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.process-step {
    text-align: center;
    padding: 40px 24px;
}

.process-step__number {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 700;
    color: rgba(30, 58, 95, 0.15);
    display: block;
    margin-bottom: 16px;
    animation: colorShiftMuted 60s ease-in-out infinite;
}

.process-step h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #46494c;
    margin-bottom: 12px;
}

.process-step p {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.7;
}

/* Process Flow - Alternating L-shaped layout */
.process-flow {
    padding: 100px 24px;
    background: #FDFBF9;
}

.process-flow__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.process-flow__header {
    text-align: center;
    margin-bottom: 60px;
}

.process-flow__header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
    margin-bottom: 12px;
}

.process-flow__header p {
    font-size: 18px;
    color: #6B7280;
    max-width: 550px;
    margin: 0 auto;
}

.process-flow__steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Card styling */
.process-flow__card {
    background: #FAF9F7;
    border-radius: 22px;
    padding: 24px 32px;
    width: 440px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    position: relative;
}

.process-flow__card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.process-flow__icon {
    width: 48px;
    height: 48px;
    background: #1E3A5F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-flow__icon svg {
    width: 22px;
    height: 22px;
    stroke: #FFFFFF;
    stroke-width: 2;
}

.process-flow__number {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 700;
    color: rgba(30, 58, 95, 0.18);
    line-height: 1;
}

.process-flow__card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    color: #46494c;
    margin-top: 16px;
    margin-bottom: 10px;
}

.process-flow__card p {
    font-size: 16px;
    color: #4B5563;
    line-height: 1.7;
    margin: 0;
}

.process-flow__cta {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #1E3A5F;
    border-radius: 8px;
    color: #1E3A5F;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.process-flow__cta:hover {
    background: #1E3A5F;
    color: #FFFFFF;
}

.process-flow__checklist {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
}

.process-flow__checklist li {
    font-size: 14px;
    color: #4B5563;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.process-flow__checklist li:last-child {
    margin-bottom: 0;
}

.process-flow__checklist .checkmark {
    color: #1E3A5F;
    font-weight: 600;
}

/* Row positioning */
.process-flow__row {
    position: relative;
    display: flex;
}

.process-flow__row--left {
    justify-content: flex-start;
}

.process-flow__row--right {
    justify-content: flex-end;
}

/* Juster boks 2 litt opp og mer til høyre */
.process-flow__row:nth-child(2) {
    margin-top: -20px;
    margin-right: -30px;
}

/* L-shaped connector lines container */
.process-flow__connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.process-flow__connector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Responsive */
@media (max-width: 900px) {
    .process-flow__steps {
        gap: 60px;
        align-items: center;
    }

    .process-flow__row--left,
    .process-flow__row--right {
        justify-content: center;
    }

    .process-flow__card {
        width: 100%;
        max-width: 400px;
    }

    .process-flow__connectors {
        display: none;
    }

    /* Simple vertical lines on mobile */
    .process-flow__row:not(.process-flow__row--last)::after {
        content: '';
        position: absolute;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 40px;
        background: #E5E7EB;
    }
}

@media (max-width: 480px) {
    .process-flow {
        padding: 60px 16px;
    }

    .process-flow__header h2 {
        font-size: 28px;
    }

    .process-flow__header p {
        font-size: 16px;
    }

    .process-flow__number {
        font-size: 36px;
    }

    .process-flow__card {
        padding: 24px;
    }
}

/* ============================================
   GILION-STYLE SECTION
   ============================================ */

.gilion-section {
    padding: 60px 40px;
    background: #FFFFFF;
}

.gilion-container {
    max-width: 1400px;
    margin: 0 auto;
}

.gilion-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 60px;
}

/* Gilion animations */
.gilion-section.is-visible .gilion-headline h2 {
    animation: heroFadeUp 0.6s ease-out forwards;
}

.gilion-section.is-visible .gilion-subtitle {
    animation: heroFadeUp 0.6s ease-out 0.1s forwards;
}

.gilion-section.is-visible .gilion-description {
    animation: heroFadeUp 0.6s ease-out 0.2s forwards;
}

.gilion-section.is-visible .gilion-card:nth-child(1) {
    animation: expandIn 0.7s ease-out 0.3s forwards;
}

.gilion-section.is-visible .gilion-card:nth-child(2) {
    animation: expandIn 0.7s ease-out 0.45s forwards;
}

.gilion-section .gilion-headline h2,
.gilion-section .gilion-subtitle,
.gilion-section .gilion-description,
.gilion-section .gilion-card {
    opacity: 0;
}

.gilion-headline h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    color: #000000;
    margin: 0 0 16px 0;
    line-height: 1.1;
}

.gilion-subtitle {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    color: #9e9e9e;
    line-height: 1.2;
    margin: 0;
}

.gilion-description {
    padding-top: 10px;
}

.gilion-description p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0 0 16px 0;
}

.gilion-buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.gilion-btn {
    padding: 14px 28px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.gilion-btn--filled {
    background: #000000;
    color: #FFFFFF;
    border: none;
}

.gilion-btn--filled:hover {
    background: #333333;
}

.gilion-btn--outlined {
    background: transparent;
    color: #000000;
    border: 1px solid #000000;
}

.gilion-btn--outlined:hover {
    background: #000000;
    color: #FFFFFF;
}

.gilion-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.gilion-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 450px;
}

.gilion-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gilion-card-content {
    position: absolute;
    top: 32px;
    left: 32px;
    color: #FFFFFF;
}

.gilion-card-content h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 8px 0;
}

.gilion-card-subtitle {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.3;
}

/* Gilion Responsive */
@media (max-width: 900px) {
    .gilion-section {
        padding: 60px 24px;
    }

    .gilion-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gilion-cards {
        grid-template-columns: 1fr;
    }

    .gilion-card {
        height: 350px;
    }
}


/* ============================================
   PORTFOLIO SHOWCASE SECTION
   ============================================ */

.portfolio-showcase {
    padding: 60px 40px;
    background: #FFFFFF;
}

.portfolio-showcase__container {
    max-width: 1400px;
    margin: 0 auto;
}

.portfolio-showcase__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 60px;
}

/* Portfolio animations */
.portfolio-showcase.is-visible .portfolio-showcase__headline h2 {
    animation: heroFadeUp 0.6s ease-out forwards;
}

.portfolio-showcase.is-visible .portfolio-showcase__subtitle {
    animation: heroFadeUp 0.6s ease-out 0.1s forwards;
}

.portfolio-showcase.is-visible .portfolio-showcase__description {
    animation: heroFadeUp 0.6s ease-out 0.2s forwards;
}

.portfolio-showcase.is-visible .portfolio-card:nth-child(1) {
    animation: expandIn 0.7s ease-out 0.3s forwards;
}

.portfolio-showcase.is-visible .portfolio-card:nth-child(2) {
    animation: expandIn 0.7s ease-out 0.4s forwards;
}

.portfolio-showcase.is-visible .portfolio-card:nth-child(3) {
    animation: expandIn 0.7s ease-out 0.5s forwards;
}

.portfolio-showcase .portfolio-showcase__headline h2,
.portfolio-showcase .portfolio-showcase__subtitle,
.portfolio-showcase .portfolio-showcase__description,
.portfolio-showcase .portfolio-card {
    opacity: 0;
}

.portfolio-showcase__headline h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    color: #000000;
    margin: 0 0 16px 0;
    line-height: 1.1;
}

.portfolio-showcase__subtitle {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    color: #9e9e9e;
    line-height: 1.2;
    margin: 0;
}

.portfolio-showcase__description {
    padding-top: 10px;
}

.portfolio-showcase__description p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    max-width: 500px;
}

.portfolio-showcase__slider {
    position: relative;
}

.portfolio-showcase__cards {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 20px;
}

.portfolio-showcase__cards::-webkit-scrollbar {
    display: none;
}

.portfolio-card {
    flex: 0 0 auto;
    width: calc(33.333% - 16px);
    min-width: 350px;
    scroll-snap-align: start;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    height: 500px;
}

.portfolio-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-card__title {
    position: absolute;
    top: 32px;
    left: 32px;
    right: 32px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.portfolio-showcase__nav {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.portfolio-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #000000;
    background: transparent;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.portfolio-nav-btn:hover {
    background: #000000;
    color: #FFFFFF;
}

/* Portfolio Responsive */
@media (max-width: 900px) {
    .portfolio-showcase {
        padding: 60px 24px;
    }

    .portfolio-showcase__top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .portfolio-card {
        width: 300px;
        min-width: 300px;
        height: 400px;
    }
}


/* ============================================
   TYPOGRAPHY SHOWCASE SECTION
   ============================================ */

.typography-section {
    padding: 100px 40px;
    background: #FFFFFF;
}

.typography-section__container {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.typography-showcase {
    flex: 1;
}

.typography-image {
    width: 100%;
    height: 560px;
    border-radius: 8px;
    object-fit: cover;
}

.typography-content {
    flex: 0 0 auto;
    width: 670px;
}

.typography-content h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 500;
    color: #000000;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.typography-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 16px;
}

.typography-content__link {
    display: inline-block;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 500;
    color: #3e5c76;
    text-decoration: none;
    transition: all 0.2s ease;
}

.typography-content__link:hover {
    color: #2d4459;
}

.typography-checklist {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.typography-checklist li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 18px;
    color: #46494c;
    font-weight: 600;
    background: linear-gradient(90deg, #e5e4e0 0%, #e5e4e0 60%, transparent 100%);
    padding: 12px 24px;
    border-radius: 50px 0 0 50px;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.typography-checklist li:nth-child(1) { transition-delay: 0.1s; }
.typography-checklist li:nth-child(2) { transition-delay: 0.25s; }
.typography-checklist li:nth-child(3) { transition-delay: 0.4s; }

.typography-checklist.animated li {
    opacity: 1;
    transform: translateX(0);
}

.typography-checklist li::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #46494c;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

.typography-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 20px;
    background: #3e5c76;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.typography-cta svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.typography-cta:hover {
    background: #2d4459;
}

.typography-cta svg.arrow-animating {
    animation: arrow-slide 0.7s ease forwards;
}

.typography-box {
    display: flex;
    flex-direction: column;
    background: #FDFBF9;
    padding: 50px;
    width: 420px;
    height: 420px;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.typo-line {
    font-size: 64px;
    line-height: 1;
    color: #46494c;
    margin-top: -27px;
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.typo-line:first-child {
    margin-top: 0;
}

/* Animasjon når synlig */
.typography-box.is-visible .typo-line {
    opacity: 1;
    transform: translateY(0);
}

.typography-box.is-visible .typo-line--1 { transition-delay: 0s; }
.typography-box.is-visible .typo-line--2 { transition-delay: 0.15s; }
.typography-box.is-visible .typo-line--3 { transition-delay: 0.30s; }
.typography-box.is-visible .typo-line--4 { transition-delay: 0.45s; }
.typography-box.is-visible .typo-line--5 { transition-delay: 0.60s; }
.typography-box.is-visible .typo-line--6 { transition-delay: 0.75s; }
.typography-box.is-visible .typo-line--7 { transition-delay: 0.90s; }
.typography-box.is-visible .typo-line--8 { transition-delay: 1.05s; }
.typography-box.is-visible .typo-line--9 { transition-delay: 1.20s; }

/* 1: Ultra-light serif */
.typo-line--1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* 2: Light serif */
.typo-line--2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* 3: Regular serif */
.typo-line--3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

/* 4: Medium serif */
.typo-line--4 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
}

/* 5: Light sans-serif (overgang) */
.typo-line--5 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* 6: Medium sans-serif */
.typo-line--6 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* 7: Semi-bold sans-serif */
.typo-line--7 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* 8: Bold sans-serif */
.typo-line--8 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 9: Black/Heavy sans-serif */
.typo-line--9 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* Fase 2: Farge-animasjon */
@keyframes colorize-1 { to { color: var(--typo-color-1); } }
@keyframes colorize-2 { to { color: var(--typo-color-2); } }
@keyframes colorize-3 { to { color: var(--typo-color-3); } }
@keyframes colorize-4 { to { color: var(--typo-color-4); } }
@keyframes colorize-5 { to { color: var(--typo-color-5); } }
@keyframes colorize-6 { to { color: var(--typo-color-6); } }
@keyframes colorize-7 { to { color: var(--typo-color-7); } }
@keyframes colorize-8 { to { color: var(--typo-color-8); } }
@keyframes colorize-9 { to { color: var(--typo-color-9); } }

.typography-box.animate-colors .typo-line--1 {
    animation: colorize-1 0.6s ease forwards;
    animation-delay: 0s;
}
.typography-box.animate-colors .typo-line--2 {
    animation: colorize-2 0.6s ease forwards;
    animation-delay: 0.2s;
}
.typography-box.animate-colors .typo-line--3 {
    animation: colorize-3 0.6s ease forwards;
    animation-delay: 0.4s;
}
.typography-box.animate-colors .typo-line--4 {
    animation: colorize-4 0.6s ease forwards;
    animation-delay: 0.6s;
}
.typography-box.animate-colors .typo-line--5 {
    animation: colorize-5 0.6s ease forwards;
    animation-delay: 0.8s;
}
.typography-box.animate-colors .typo-line--6 {
    animation: colorize-6 0.6s ease forwards;
    animation-delay: 1.0s;
}
.typography-box.animate-colors .typo-line--7 {
    animation: colorize-7 0.6s ease forwards;
    animation-delay: 1.2s;
}
.typography-box.animate-colors .typo-line--8 {
    animation: colorize-8 0.6s ease forwards;
    animation-delay: 1.4s;
}
.typography-box.animate-colors .typo-line--9 {
    animation: colorize-9 0.6s ease forwards;
    animation-delay: 1.6s;
}

/* ============================================
   FASE 2: Blur til fokus
   ============================================ */
.typo-line {
    filter: blur(3px);
}

.typography-box.is-visible .typo-line {
    filter: blur(3px);
}

.typography-box.phase-focus .typo-line {
    filter: blur(0);
    transition: filter 0.8s ease;
}

/* ============================================
   FASE 3: Gradient sweep
   ============================================ */
@keyframes gradient-sweep {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.typography-box.phase-sweep .typo-line {
    background: linear-gradient(
        90deg,
        #46494c 0%,
        #46494c 40%,
        #3e5c76 50%,
        #46494c 60%,
        #46494c 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-sweep 1.5s ease forwards;
}

/* ============================================
   FASE 4: Letter-spacing puls
   ============================================ */
@keyframes letter-pulse {
    0% { letter-spacing: inherit; }
    50% { letter-spacing: 0.08em; }
    100% { letter-spacing: inherit; }
}

.typography-box.phase-pulse .typo-line {
    animation: letter-pulse 0.8s ease;
}

/* ============================================
   FASE 5: Skygge-animasjon
   ============================================ */
@keyframes shadow-move {
    0% { text-shadow: 0 0 0 transparent; }
    30% { text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15); }
    60% { text-shadow: 2px 6px 12px rgba(0, 0, 0, 0.1); }
    100% { text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.08); }
}

.typography-box.phase-shadow .typo-line {
    animation: shadow-move 1.2s ease forwards;
}

/* ============================================
   FASE 6: 3D Tilt
   ============================================ */
@keyframes tilt-3d {
    0% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg); }
    25% { transform: perspective(1000px) rotateX(2deg) rotateY(-3deg); }
    50% { transform: perspective(1000px) rotateX(-1deg) rotateY(2deg); }
    75% { transform: perspective(1000px) rotateX(1deg) rotateY(-1deg); }
    100% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg); }
}

.typography-box.phase-tilt {
    animation: tilt-3d 2s ease-in-out;
}

/* ============================================
   FASE 7: Scale Breathe
   ============================================ */
@keyframes scale-breathe {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.typography-box.phase-breathe {
    animation: scale-breathe 1.5s ease-in-out;
}

/* ============================================
   FASE 8: Final Accent Fade (siste linje blir blå)
   ============================================ */
@keyframes accent-fade {
    0% { color: #46494c; }
    100% { color: #3e5c76; }
}

.typography-box.phase-accent .typo-line--9 {
    animation: accent-fade 1s ease forwards;
}

/* Glow effekt på boksen ved avslutning */
@keyframes box-glow {
    0% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.04); }
    50% { box-shadow: 0 4px 30px rgba(62, 106, 226, 0.15), 0 8px 50px rgba(62, 106, 226, 0.08); }
    100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.04); }
}

.typography-box.phase-accent {
    animation: box-glow 2s ease;
}

@media (max-width: 968px) {
    .typography-section {
        padding: 60px 24px;
        overflow-x: hidden;
    }

    .typography-section__container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .typography-content {
        width: 100%;
        max-width: 100%;
    }

    .typography-content h2 {
        font-size: 28px;
    }

    .typo-line {
        font-size: 36px;
        margin-top: -12px;
    }

    .typography-checklist li {
        font-size: 15px;
        padding: 10px 16px;
        gap: 12px;
        border-radius: 50px;
        background: #e5e4e0;
    }

    .typography-checklist li::before {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .typography-section {
        padding: 48px 16px;
        overflow-x: hidden;
    }

    .typography-section__container {
        flex-direction: column;
        gap: 32px;
    }

    .typography-content {
        width: 100%;
        padding: 0;
    }

    .typography-image {
        height: auto;
        aspect-ratio: 1/1;
    }

    .typography-content h2 {
        font-size: 26px;
    }

    .typography-content p {
        font-size: 15px;
    }

    .typography-checklist {
        margin: 20px 0;
    }

    .typography-checklist li {
        font-size: 14px;
        padding: 10px 14px;
        gap: 10px;
    }

    .typography-checklist li::before {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

/* ============================================
   PROCESS TIMELINE - Fire steg til en nettside som leverer
   ============================================ */

.process-timeline {
    background: #FFFFFF;
    padding: 60px 40px;
    position: relative;
}

.process-timeline__container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
}

/* Venstre kolonne - Sticky header */
.process-timeline__header {
    flex: 0 0 500px;
    position: sticky;
    top: 120px;
    align-self: flex-start;
    height: fit-content;
}

.process-timeline__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #666666;
    margin-bottom: 16px;
}

.process-timeline__title {
    font-family: 'Bricolage Grotesque', 'Gambetta', 'DM Serif Display', Georgia, serif;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    color: #46494c;
    margin: 0 0 24px 0;
}

.process-timeline__subtitle {
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #4c5c68;
    margin: 0;
}

/* Høyre kolonne - Timeline */
.process-timeline__content {
    flex: 0 0 550px;
    position: relative;
    padding-left: 80px;
    margin-left: auto;
}

/* Timeline linjer */
.process-timeline__line-bg {
    position: absolute;
    left: 23px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: #E5E5E5;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s ease-out;
}

.process-timeline.line-animated .process-timeline__line-bg {
    transform: scaleY(1);
}

.process-timeline__line-progress {
    position: absolute;
    left: 23px;
    top: 24px;
    width: 2px;
    height: 0;
    background: #2D5A4A;
    transition: height 0.15s ease-out;
}

/* Steg */
.process-timeline__step {
    position: relative;
    margin-bottom: 80px;
}

.process-timeline__step:last-of-type {
    margin-bottom: 0;
}

.process-timeline__number {
    position: absolute;
    left: -80px;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid #E5E5E5;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #888888;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-timeline__step.is-active .process-timeline__number {
    border-color: #2D5A4A;
    background: #2D5A4A;
    color: #FFFFFF;
}

.process-timeline__step-content {
    padding-top: 8px;
}

.process-timeline__step-title {
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #46494c;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.process-timeline__step-desc {
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 16px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
    max-width: 500px;
}

.process-timeline__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 14px 28px;
    background: #2D5A4A;
    color: #FFFFFF;
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.process-timeline__cta svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.process-timeline__cta:hover {
    background: #234839;
    transform: translateY(-2px);
}

.process-timeline__cta svg.arrow-animating {
    animation: arrow-slide 0.7s ease forwards;
}

/* Resultat-steg med sjekkmerke */
.process-timeline__step--result {
    margin-top: 80px;
}

.process-timeline__number--check {
    color: #888888;
}

.process-timeline__number--check svg {
    stroke: currentColor;
}

.process-timeline__step--result.is-active .process-timeline__number--check {
    border-color: #2D5A4A;
    background: #2D5A4A;
    color: #FFFFFF;
}

/* Gammel resultat-ikon (ikke i bruk lenger) */
.process-timeline__result-icon {
    font-size: 20px;
    color: #2D5A4A;
    flex-shrink: 0;
}

.process-timeline__result-title {
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #46494c;
    margin: 0 0 8px 0;
}

.process-timeline__result-desc {
    font-family: 'General Sans', 'DM Sans', sans-serif;
    font-size: 16px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* Process Timeline Responsive - Tablet */
@media (max-width: 1023px) {
    .process-timeline {
        padding: 80px 40px;
    }

    .process-timeline__container {
        flex-direction: column;
        gap: 60px;
    }

    .process-timeline__header {
        position: static;
        flex: none;
        max-width: 100%;
    }
}

/* Process Timeline Responsive - Mobile */
@media (max-width: 767px) {
    .process-timeline {
        padding: 60px 24px;
    }

    .process-timeline__content {
        padding-left: 60px;
    }

    .process-timeline__line-bg,
    .process-timeline__line-progress {
        left: 19px;
    }

    .process-timeline__number {
        width: 40px;
        height: 40px;
        font-size: 13px;
        left: -60px;
    }

    .process-timeline__step {
        margin-bottom: 60px;
    }

    .process-timeline__step-title {
        font-size: 18px;
    }

    .process-timeline__step-desc {
        font-size: 15px;
    }

    .process-timeline__title {
        font-size: 28px;
    }
}

/* ============================================
   SHOWCASE WRAPPER WITH CURVED LINES
   ============================================ */
.showcase-wrapper {
    position: relative;
    background: #1d2327;
    overflow: hidden;
}

.showcase-waves {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.showcase-waves-svg {
    width: 100%;
    height: 100%;
}

.showcase-wave {
    fill: none;
    stroke-linecap: round;
}

.showcase-wave--1 {
    stroke: #e0dbd5;
    stroke-width: 1.5;
    opacity: 0.15;
}

.showcase-wave--2 {
    stroke: #d8d3cc;
    stroke-width: 1.5;
    opacity: 0.1;
}

/* Showcase waves container - for scroll parallax */
.showcase-waves {
    --parallax-x: 0px;
    --parallax-y: 0px;
    --parallax-scale: 1;
    transform:
        translateX(var(--parallax-x))
        translateY(var(--parallax-y))
        scale(var(--parallax-scale));
    transition: transform 0.15s ease-out;
}

/* SVG idle-animasjon som alltid kjører */
.showcase-waves-svg {
    animation: waves-float 25s ease-in-out infinite;
}

@keyframes waves-float {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-12px) translateX(20px) rotate(0.5deg);
    }
    50% {
        transform: translateY(8px) translateX(-15px) rotate(-0.3deg);
    }
    75% {
        transform: translateY(-6px) translateX(12px) rotate(0.2deg);
    }
}

/* ============================================
   SHOWCASE MARQUEE
   ============================================ */
.showcase-marquee {
    position: relative;
    z-index: 1;
    padding: 60px 0;
    background: transparent;
    overflow: hidden;
}

.showcase-marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
}


.showcase-marquee__items {
    display: flex;
    gap: 24px;
    padding-right: 24px;
}

.showcase-marquee__item {
    flex-shrink: 0;
    width: 600px;
    height: 340px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-marquee__item:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.showcase-marquee__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile screenshot item - taller aspect ratio */
.showcase-marquee__item--mobile {
    width: 180px;
    height: 340px;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Reverse marquee (scrolls right) */
.showcase-marquee--reverse {
    padding-top: 0;
}

.showcase-marquee__track--reverse {
    animation: marquee-scroll-reverse 30s linear infinite;
}

@keyframes marquee-scroll-reverse {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .showcase-marquee {
        padding: 40px 0;
    }

    .showcase-marquee__item {
        width: 300px;
        height: 210px;
    }

    .showcase-marquee__item--mobile {
        width: 110px;
        height: 210px;
    }

    .showcase-marquee__items {
        gap: 16px;
        padding-right: 16px;
    }
}

/* ============================================
   SCROLL PREVIEW SECTION
   ============================================ */
.scroll-preview-section {
    background: #1d2327;
    padding: 100px 24px;
}

.scroll-preview-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.scroll-preview-content {
    color: #fff;
}

.scroll-preview-overline {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 16px;
}

.scroll-preview-headline {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 20px;
}

.scroll-preview-text {
    font-size: 17px;
    line-height: 1.7;
    color: #9CA3AF;
}

.scroll-preview-frame {
    background: #2a2f35;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.scroll-preview-browser {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #363b42;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scroll-preview-browser__dots {
    display: flex;
    gap: 6px;
}

.scroll-preview-browser__dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.scroll-preview-browser__dots .dot--red {
    background: #ff5f57;
}

.scroll-preview-browser__dots .dot--yellow {
    background: #ffbd2e;
}

.scroll-preview-browser__dots .dot--green {
    background: #28ca41;
}

.scroll-preview-browser__url {
    flex: 1;
    background: #2a2f35;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #9CA3AF;
}

.scroll-preview-window {
    height: 400px;
    overflow: hidden;
    position: relative;
}

.scroll-preview-image {
    width: 100%;
    height: auto;
    display: block;
}

.scroll-preview-image.animate {
    animation: scroll-down 30s linear forwards;
}

@keyframes scroll-down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-100% + 400px));
    }
}

@media (max-width: 900px) {
    .scroll-preview-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .scroll-preview-headline {
        font-size: 32px;
    }

    .scroll-preview-window {
        height: 300px;
    }
}

/* 4. About Team New */
.about-team-new {
    padding: 100px 24px;
    background: #FDFBF9;
}

.about-team-new__container {
    max-width: 800px;
    margin: 0 auto;
}

.about-team-new__header {
    text-align: center;
    margin-bottom: 48px;
}

.about-team-new__header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
}

.team-member {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 48px;
    align-items: start;
}

.team-member__image .image-placeholder--round {
    width: 180px;
    height: 180px;
}

.team-member__content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #46494c;
    margin-bottom: 4px;
}

.team-member__role {
    font-size: 16px;
    color: #1E3A5F;
    font-weight: 500;
    display: block;
    margin-bottom: 20px;
    animation: colorShift 60s ease-in-out infinite;
}

.team-member__content p {
    font-size: 17px;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 16px;
}

.team-member__contact {
    margin-top: 24px;
}

.team-member__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1E3A5F;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
    animation: colorShift 60s ease-in-out infinite;
}

.team-member__link:hover {
    opacity: 0.8;
}

/* 5. About Why */
.about-why {
    padding: 100px 24px;
}

.about-why__container {
    max-width: 1100px;
    margin: 0 auto;
}

.about-why__header {
    text-align: center;
    margin-bottom: 60px;
}

.about-why__header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
    margin-bottom: 12px;
}

.about-why__header p {
    font-size: 18px;
    color: #6B7280;
}

.about-why__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.why-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 40px 32px;
    transition: all 0.3s ease;
}

.why-card:hover {
    border-color: #1E3A5F;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

.why-card__icon {
    width: 56px;
    height: 56px;
    background: rgba(30, 58, 95, 0.1);
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-card__icon svg {
    color: #1E3A5F;
    animation: colorShift 60s ease-in-out infinite;
}

.why-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #46494c;
    margin-bottom: 12px;
}

.why-card p {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.7;
}

/* 6. About Values */
.about-values {
    padding: 100px 24px;
    background: #FDFBF9;
}

.about-values__container {
    max-width: 1120px;
    margin: 0 auto;
}

.about-values__header {
    text-align: center;
    margin-bottom: 64px;
}

.about-values__eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1E3A5F;
    margin-bottom: 16px;
}

.about-values__header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #46494c;
}

.about-values__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.value-card {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
}

.value-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F4F8;
    border-radius: 10px;
    margin-bottom: 20px;
}

.value-card__icon svg {
    color: #1E3A5F;
}

.value-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #46494c;
    margin-bottom: 12px;
}

.value-card p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #4A5568;
    line-height: 1.6;
}

/* Legacy support for value-item */
.value-item h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #46494c;
    margin-bottom: 12px;
}

.value-item p {
    font-size: 15px;
    color: #4A5568;
    line-height: 1.6;
}

/* 7. About CTA New */
.about-cta-new {
    padding: 100px 24px;
    text-align: center;
    background: #FDFBF9;
}

.about-cta-new__container {
    max-width: 600px;
    margin: 0 auto;
}

.about-cta-new h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
    margin-bottom: 16px;
}

.about-cta-new p {
    font-size: 18px;
    color: #6B7280;
    line-height: 1.7;
    margin-bottom: 24px;
}

.about-cta-new__checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.about-cta-new__checklist li {
    font-size: 16px;
    color: #374151;
    padding: 8px 0;
    padding-left: 28px;
    position: relative;
}

.about-cta-new__checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #1E3A5F;
    font-weight: 600;
    animation: colorShift 60s ease-in-out infinite;
}

/* 8. About FAQ */
.about-faq {
    padding: 100px 24px;
    background: #FDFBF9;
}

.about-faq__container {
    max-width: 700px;
    margin: 0 auto;
}

.about-faq__header {
    text-align: center;
    margin-bottom: 48px;
}

.about-faq__header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: #46494c;
}

.about-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: #D1D5DB;
}

.faq-item.expanded {
    border-color: #1E3A5F;
}

.faq-item__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #46494c;
    transition: all 0.2s ease;
}

.faq-item__question:hover {
    background: #FDFBF9;
}

.faq-item__icon {
    flex-shrink: 0;
    color: #6B7280;
    transition: transform 0.3s ease;
}

.faq-item.expanded .faq-item__icon {
    transform: rotate(180deg);
    color: #1E3A5F;
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.expanded .faq-item__answer {
    max-height: 300px;
    padding: 0 24px 24px;
}

.faq-item__answer p {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.7;
    margin: 0;
}

/* New Om Oss Responsive */
@media (max-width: 900px) {
    .about-process__steps {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .about-why__cards {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

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

    .value-card {
        padding: 28px;
    }
}

@media (max-width: 768px) {
    .about-hero-new {
        padding: 120px 20px 60px;
    }

    .about-hero-new h1 {
        font-size: 32px;
    }

    .about-hero-new__lead {
        font-size: 17px;
    }

    .about-philosophy {
        padding: 60px 20px;
    }

    .about-philosophy__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-philosophy__content h2 {
        font-size: 26px;
    }

    .about-process {
        padding: 60px 20px;
    }

    .about-process__header h2 {
        font-size: 28px;
    }

    .process-step__number {
        font-size: 40px;
    }

    .about-team-new {
        padding: 60px 20px;
    }

    .team-member {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .team-member__image {
        display: flex;
        justify-content: center;
    }

    .team-member__image .image-placeholder--round {
        width: 160px;
        height: 160px;
    }

    .about-team-new__header h2 {
        font-size: 28px;
    }

    .about-why {
        padding: 60px 20px;
    }

    .about-why__header h2 {
        font-size: 28px;
    }

    .about-values {
        padding: 60px 20px;
    }

    .about-values__eyebrow {
        font-size: 12px;
    }

    .about-values__header h2 {
        font-size: 28px;
    }

    .about-values__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .value-card {
        padding: 24px;
    }

    .value-card__icon {
        width: 44px;
        height: 44px;
    }

    .value-card h3 {
        font-size: 17px;
    }

    .value-card p {
        font-size: 14px;
    }

    .about-cta-new {
        padding: 60px 20px;
    }

    .about-cta-new h2 {
        font-size: 28px;
    }

    .about-cta-new p {
        font-size: 16px;
    }

    .about-faq {
        padding: 60px 20px;
    }

    .about-faq__header h2 {
        font-size: 28px;
    }

    .faq-item__question {
        padding: 16px 20px;
        font-size: 15px;
    }

    .faq-item.expanded .faq-item__answer {
        padding: 0 20px 20px;
    }
}

/* ============================================
   HERO CTA SECTION (Replaces form)
   ============================================ */

.hero-cta-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.hero-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: #1E293B;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: bgColorShift 60s ease-in-out infinite;
}

.hero-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 41, 59, 0.3);
}

.hero-cta-button svg {
    transition: transform 0.3s ease;
}

.hero-cta-button:hover svg {
    transform: translateX(4px);
}

.hero-cta-subtext {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ============================================
   CONTACT POPUP STYLES - TWO COLUMN LAYOUT
   ============================================ */

.contact-popup-content {
    max-width: 520px;
    width: calc(100vw - 40px);
    padding: 40px;
    position: relative;
}

/* Two-column variant */
.contact-popup-content--two-col {
    max-width: 820px;
    padding: 0;
    overflow: hidden;
}

.contact-popup__grid {
    display: grid;
    grid-template-columns: 60% 40%;
    min-height: 100%;
}

.contact-popup__left {
    padding: 40px;
    background: #FFFFFF;
}

.contact-popup__right {
    padding: 40px;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #E5E7EB;
}

.popup-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: 8px;
    transition: all 0.2s ease;
    z-index: 10;
}

.popup-close-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-primary);
}

.contact-popup__header {
    text-align: left;
    margin-bottom: 28px;
}

.contact-popup__header h2 {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.contact-popup__header p {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.contact-popup__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-popup__form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-popup__form label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.contact-popup__form input,
.contact-popup__form textarea {
    padding: 12px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-primary);
    background: #FFFFFF;
    transition: all 0.2s ease;
}

.contact-popup__form input:focus,
.contact-popup__form textarea:focus {
    outline: none;
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.contact-popup__form input::placeholder,
.contact-popup__form textarea::placeholder {
    color: #9CA3AF;
}

.contact-popup__form textarea {
    resize: vertical;
    min-height: 80px;
}

.contact-popup__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    margin-top: 4px;
    background: #10B981;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-popup__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

/* Meeting section (right column) */
.contact-popup__meeting {
    text-align: center;
    padding: 10px 10px;
    width: 100%;
}

.contact-popup__meeting-icon {
    width: 56px;
    height: 56px;
    background: #FFFFFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    color: #10B981;
}

.contact-popup__meeting h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.contact-popup__meeting p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.contact-popup__meeting-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: transparent;
    color: #10B981;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #10B981;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.contact-popup__meeting-btn:hover {
    background: #10B981;
    color: #FFFFFF;
}

/* Divider and direct contact */
.contact-popup__divider {
    width: 100%;
    height: 1px;
    background: #E5E7EB;
    margin: 32px 0 24px;
}

.contact-popup__direct {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.contact-popup__direct-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.contact-popup__direct-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1E3A5F;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contact-popup__direct-link:hover {
    opacity: 0.7;
}

.contact-popup__direct-link svg {
    flex-shrink: 0;
    color: #6B7280;
}

/* Contact Popup Success View */
.contact-popup__success {
    text-align: center;
    padding: 60px 40px;
}

.contact-popup__success .success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: popIn 0.4s ease-out;
}

.contact-popup__success .success-icon svg {
    stroke: white;
    width: 40px;
    height: 40px;
}

.contact-popup__success h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}

.contact-popup__success p {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

.contact-popup__success .contact-popup__submit {
    width: auto;
    padding: 14px 48px;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Contact Popup Responsive */
@media (max-width: 768px) {
    .contact-popup-content--two-col {
        max-width: calc(100vw - 32px);
    }

    .contact-popup__grid {
        grid-template-columns: 1fr;
    }

    .contact-popup__left {
        padding: 32px 24px;
    }

    .contact-popup__right {
        padding: 32px 24px;
        border-left: none;
        border-top: 1px solid #E5E7EB;
    }

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

    .contact-popup__header h2 {
        font-size: 24px;
    }

    .contact-popup__form input,
    .contact-popup__form textarea {
        padding: 12px 14px;
        font-size: 16px;
    }

    .contact-popup__success {
        padding: 40px 24px;
    }
}

/* ============================================
   HERO MOCKUP - 4 REALISTIC WEBSITE LAYOUTS
   Kafé, Elektriker, Frisør, Håndverker
   ============================================ */

.hero-mockup {
    width: 700px !important;
    min-width: 700px !important;
    max-width: none !important;
    min-height: 480px !important;

    /* Device frame */
    padding: 10px;
    background: linear-gradient(160deg, #FDFBF9 0%, #f5f6f7 100%);
    border-radius: 8px;
    overflow: hidden;

    /* ROTASJON - gir dynamikk */
    transform: perspective(1500px) rotateY(-4deg) rotateX(2deg);

    /* DEFINISJON */
    border: 1px solid rgba(0, 0, 0, 0.08);

    /* ANIMASJON */
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-mockup:hover {
    transform: perspective(1500px) rotateY(-2deg) rotateX(1deg) translateY(-4px);
}

.mockup-browser {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Browser Bar - slankere */
.browser-bar {
    background: #F8FAFC;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #E2E8F0;
    height: 40px;
    box-sizing: border-box;
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dot--red { background: #FF5F56; }
.dot--yellow { background: #FFBD2E; }
.dot--green { background: #27CA40; }

.browser-url {
    flex: 1;
    background: #FFFFFF;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    color: #333;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
}

.url-cursor {
    display: none;
}

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

/* Mockup Content Container - fyller mockup-browser */
.mockup-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 450px;
}

/* Individual Mock Sites */
.mock-site {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.mock-site.active {
    opacity: 1;
    visibility: visible;
}

/* =====================
   SHARED NAV STYLES
   ===================== */
.mock-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.4s ease;
}

.mock-site.active .mock-nav.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.mock-logo {
    font-weight: 700;
    font-size: 15px;
    font-family: var(--font-body);
    letter-spacing: -0.3px;
}

.mock-menu {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #c5c3c6;
    font-family: var(--font-body);
}

/* =====================
   SHARED HERO ELEMENTS
   ===================== */
.mock-overline {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.1s;
}

.mock-site.active .mock-overline.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.mock-headline {
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.2s;
}

.mock-site.active .mock-headline.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.mock-subline {
    font-size: 12px;
    font-family: var(--font-body);
    color: #4c5c68;
    line-height: 1.5;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.3s;
}

.mock-site.active .mock-subline.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.mock-cta {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-body);
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s;
}

.mock-site.active .mock-cta.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* =====================
   SITE 1: KAFÉ - Profesjonell kafé design
   ===================== */
.mock-site--kafe {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Kafé Navigation */
.kafe-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(61, 44, 35, 0.08);
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}

.mock-site.active .kafe-nav.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.kafe-nav__logo {
    display: flex;
    flex-direction: column;
}

.kafe-nav__name {
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 600;
    color: #3D2C23;
    letter-spacing: -0.3px;
    line-height: 1.1;
}

.kafe-nav__tagline {
    font-family: 'Inter', sans-serif;
    font-size: 6px;
    color: #9B8A7A;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.kafe-nav__menu {
    display: flex;
    gap: 12px;
}

.kafe-nav__link {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    color: #7A6A5E;
    text-decoration: none;
    cursor: pointer;
}

.kafe-nav__cta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: #3D9970;
    text-decoration: none;
}

.kafe-nav__cta svg {
    stroke: #3D9970;
}

/* Kafé Hero med bakgrunnsbilde */
.kafe-hero {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 200px;
}

.kafe-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.6s ease, transform 0.8s ease;
}

.mock-site.active .kafe-hero__bg.animate-in {
    opacity: 1;
    transform: scale(1);
}

.kafe-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

/* Fallback gradient om bilde mangler */
.kafe-hero__bg:not(:has(img)),
.kafe-hero__bg img[src=""],
.kafe-hero__bg img:not([src]) {
    background: linear-gradient(145deg, #C4A484 0%, #8B5A3C 100%);
}

.kafe-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(61, 44, 35, 0.85) 0%,
        rgba(61, 44, 35, 0.7) 50%,
        rgba(61, 44, 35, 0.4) 100%
    );
    z-index: 1;
}

.kafe-hero__content {
    position: relative;
    z-index: 2;
    padding: 16px 20px;
    max-width: 65%;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease;
}

.mock-site.active .kafe-hero__content.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Kafé badge */
.kafe-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.kafe-hero__badge svg {
    fill: #F5C563;
}

.kafe-hero__headline {
    font-family: 'Playfair Display', serif;
    font-size: 52px !important;
    font-weight: 700;
    color: #FFF0E0 !important;
    line-height: 1.1;
    margin-bottom: 6px;
}

.kafe-hero__subtext {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 10px;
    max-width: 240px;
}

/* Kafé CTAs */
.kafe-hero__ctas {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.2s;
}

.mock-site.active .kafe-hero__ctas.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.kafe-hero__cta {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 600;
    border-radius: 4px;
    padding: 7px 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kafe-hero__cta--primary {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #8B5A3C;
    color: #FFFFFF;
}

.kafe-hero__cta--primary:hover {
    background: #6D4530;
}

.kafe-hero__cta--secondary {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.kafe-hero__cta--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Kafé Indicators */
.kafe-hero__indicators {
    display: flex;
    gap: 12px;
}

.kafe-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    color: rgba(255, 255, 255, 0.7);
}

.kafe-indicator svg {
    fill: #F5C563;
    stroke: rgba(255, 255, 255, 0.7);
}

/* Kafé Features bar */
.kafe-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px 16px;
    background: #FDF8F3;
    flex-shrink: 0;
}

.kafe-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid rgba(61, 44, 35, 0.06);
}

.kafe-feature__icon {
    color: #8B5A3C;
}

.kafe-feature__label {
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 500;
    color: #3D2C23;
    text-align: center;
}

/* =====================
   SITE 2: OSLO ELEKTRIKER
   Profesjonell elektrikerbedrift
   ===================== */
.mock-site--electrician {
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* === ELEKTRIKER NAVIGASJON === */
.elec-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #1E293B;
    height: 36px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}

.mock-site.active .elec-nav.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.elec-nav__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.elec-nav__logo {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.elec-nav__badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 6px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: #10B981;
}

.elec-nav__badge-dot {
    width: 5px;
    height: 5px;
    background: #10B981;
    border-radius: 50%;
    animation: elecPulse 2s infinite;
}

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

.elec-nav__center {
    display: flex;
    gap: 16px;
}

.elec-nav__link {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    color: #94A3B8;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.elec-nav__right {
    display: flex;
}

.elec-nav__cta {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #F59E0B;
    color: #0F172A;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

/* === ELEKTRIKER HERO === */
.elec-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    padding: 14px 16px;
    background: #F8FAFC;
    align-items: center;
    flex: 1;
    min-height: 0;
}

.elec-hero__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease;
}

.mock-site.active .elec-hero__content.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.elec-hero__emergency {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F59E0B;
    padding: 3px 8px;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 700;
    color: #0F172A;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.elec-hero__headline,
.hero .elec-hero__headline,
.mock-site--electrician h1.elec-hero__headline {
    font-family: 'Inter', sans-serif;
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1.1 !important;
    color: #1E293B;
    letter-spacing: -0.02em;
    margin: 0;
}

.elec-hero__headline-accent {
    color: #475569;
    font-weight: 600;
}

.elec-hero__subtext {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.4;
    color: #64748B;
    margin: 0;
    max-width: 220px;
}

.elec-hero__trust-points {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.elec-trust-point {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: #1E293B;
}

.elec-hero__ctas {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.2s;
}

.mock-site.active .elec-hero__ctas.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.elec-cta {
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.elec-cta--primary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1E293B;
    color: #FFFFFF;
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.25);
}

.elec-cta--secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: #1E293B;
    padding: 7px 12px;
    border-radius: 4px;
    border: 1px solid #E2E8F0;
    font-size: 9px;
    font-weight: 600;
}

/* === ELEKTRIKER HERO VISUAL === */
.elec-hero__visual {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

.mock-site.active .elec-hero__content.animate-in ~ .elec-hero__visual,
.mock-site.active .elec-hero__visual.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.elec-hero__image-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 32px;
}

.elec-hero__image {
    width: 100%;
    min-height: 160px;
    height: 180px;
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.elec-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback lightning bolt */
.elec-hero__image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #F59E0B;
    clip-path: polygon(50% 0%, 65% 35%, 100% 35%, 45% 60%, 65% 100%, 30% 55%, 0% 55%);
    opacity: 0.2;
}

.elec-hero__image:has(img) .elec-hero__image::before {
    display: none;
}

.elec-hero__rating-card {
    position: absolute;
    bottom: -20px;
    left: 24px;
    background: #FFFFFF;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.elec-rating__stars {
    display: flex;
    gap: 2px;
}

.elec-rating__stars svg {
    width: 12px;
    height: 12px;
}

.elec-rating__info {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.elec-rating__score {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #1E293B;
}

.elec-rating__count {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    color: #64748B;
}

/* === ELEKTRIKER STATS BAR === */
.elec-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 16px;
    background: #1E293B;
    flex-shrink: 0;
}

.elec-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.elec-stat__number {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #F59E0B;
}

.elec-stat__label {
    font-family: 'Inter', sans-serif;
    font-size: 6px;
    color: #94A3B8;
    font-weight: 500;
}

.elec-stat__divider {
    width: 1px;
    height: 20px;
    background: #334155;
}

/* === ELEKTRIKER SERVICES === */
.elec-services {
    padding: 10px 16px;
    background: #FFFFFF;
    flex-shrink: 0;
}

.elec-services__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.elec-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: #F8FAFC;
    border-radius: 6px;
    border: 1px solid #F1F5F9;
    cursor: pointer;
    transition: all 0.2s;
}

.elec-service-card:hover {
    background: #FFFFFF;
    border-color: #F59E0B;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.elec-service-card__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 4px;
    color: #1E293B;
}

.elec-service-card__name {
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: #1E293B;
    text-align: center;
}

/* Urgent card */
.elec-service-card--urgent {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.15);
}

.elec-service-card--urgent .elec-service-card__icon {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.elec-service-card--urgent .elec-service-card__name {
    color: #DC2626;
}

/* === ELEKTRIKER WHY US === */
.elec-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px 16px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.elec-why__item {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.elec-why__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 4px;
    color: #1E293B;
    border: 1px solid #E2E8F0;
}

.elec-why__content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.elec-why__title {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    line-height: 1.2;
}

.elec-why__desc {
    font-family: 'Inter', sans-serif;
    font-size: 6px;
    color: #64748B;
    line-height: 1.3;
    margin: 0;
}

/* =====================
   SITE 3: SALONG (FRISØR)
   Skalert til 280px innholdshøyde
   ===================== */
.mock-site--salon {
    background: #FFFBFC;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Salon Navigation */
.salon-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #E7E5E4;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}

.mock-site.active .salon-nav.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.salon-nav__logo {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    color: #1C1917;
    letter-spacing: -0.02em;
}

.salon-nav__menu {
    display: flex;
    gap: 18px;
}

.salon-nav__link {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: #57534E;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.salon-nav__link:hover {
    color: #DB2777;
}

.salon-nav__link:hover::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #DB2777;
    border-radius: 1px;
}

.salon-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #FFFFFF;
    background: #DB2777;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(219, 39, 119, 0.25);
}

.salon-nav__cta:hover {
    background: #BE185D;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
}

/* Salon Hero */
.salon-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 14px 20px 12px;
    align-items: start;
    flex: 0 0 auto;
    min-height: 0;
    box-sizing: border-box;
    background: linear-gradient(135deg, #FDFCFB 0%, #FDF2F8 100%);
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.5s ease 0.15s;
}

.mock-site.active .salon-hero.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.salon-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    height: 100%;
}

.salon-hero__overline {
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #DB2777;
    margin-bottom: 4px;
}

.salon-hero__headline,
.hero .salon-hero__headline,
.mock-site--salon h1.salon-hero__headline {
    font-family: 'Playfair Display', serif;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1.05 !important;
    color: #1C1917;
    letter-spacing: -0.02em;
    margin: 0 0 4px 0;
}

.salon-hero__subtext {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.4;
    color: #57534E;
    margin: 0 0 8px 0;
    max-width: 200px;
}

/* Salon CTA Buttons */
.salon-hero__ctas {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.salon-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.salon-cta--primary {
    background: #DB2777;
    color: white;
    box-shadow: 0 4px 14px rgba(219, 39, 119, 0.3);
}

.salon-cta--primary:hover {
    background: #BE185D;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(219, 39, 119, 0.4);
}

.salon-cta--secondary {
    background: transparent;
    color: #44403C;
    border: 2px solid #D6D3D1;
}

.salon-cta--secondary:hover {
    border-color: #F9A8D4;
    background: #FDF2F8;
    color: #BE185D;
}

/* Salon Trust Points */
.salon-hero__trust {
    display: flex;
    gap: 12px;
}

.salon-trust-point {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 500;
    color: #57534E;
}

.salon-trust-point svg {
    color: #EC4899;
    width: 10px;
    height: 10px;
}

/* Salon Hero Image */
.salon-hero__image {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.mock-site.active .salon-hero.animate-in .salon-hero__image,
.mock-site.active .salon-hero__image.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.salon-hero__image-placeholder {
    position: relative;
    width: 100%;
    max-width: 160px;
    height: 160px;
    background: linear-gradient(145deg, #FDF2F8 0%, #FBCFE8 50%, #F9A8D4 100%);
    border-radius: 10px;
    box-shadow:
        0 12px 30px -8px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: visible;
}

.salon-hero__image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Salon Rating Badge */
.salon-hero__rating {
    position: absolute;
    bottom: -12px;
    left: 12px;
    background: white;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 10;
}

.salon-rating__stars {
    color: #FBBF24;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.salon-rating__text {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #1C1917;
}

.salon-rating__text span {
    font-weight: 400;
    color: #78716C;
    font-size: 11px;
}

/* Salong Emma Trust Bar */
.salon-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 24px;
    background: #9D174D;
    flex-shrink: 0;
}

.salon-trust-bar__item {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.salon-trust-bar__number {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
}

.salon-trust-bar__text {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #FFFFFF;
}

.salon-trust-bar__divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
}

/* Salong Emma Services Section */
.salon-services {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #FAFAF9;
    flex-shrink: 0;
}

.salon-service-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 6px;
    background: #FFFFFF;
    border: 1px solid #E7E5E4;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    cursor: pointer;
}

.salon-service-card:hover {
    box-shadow: 0 8px 24px rgba(219, 39, 119, 0.1);
    border-color: #FBCFE8;
    transform: translateY(-2px);
}

.salon-service-card__icon-wrapper {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.salon-service-card__icon {
    width: 14px;
    height: 14px;
    color: #DB2777;
}

.salon-service-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #1C1917;
}

.salon-service-card__price {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 600;
    color: #DB2777;
}

/* Salong Emma Contact Bar */
.salon-contact-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 16px;
    background: #1C1917;
    flex-shrink: 0;
}

.salon-contact-bar__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.salon-contact-bar__item svg {
    width: 12px;
    height: 12px;
    color: #DB2777;
}

.salon-contact-bar__item span {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: #FFFFFF;
}

.salon-contact-bar__divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
}

/* =====================
   SITE 4: NORDISK VELVÆRE
   Premium helsekost nettbutikk
   ===================== */
.mock-site--nv {
    background: #FDFBF7;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
}

/* NV Navigation */
.nv-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(255,255,255,0.95);
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}

.mock-site.active .nv-nav.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.nv-nav__left {
    flex: 1;
    display: flex;
    align-items: center;
}

.nv-nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nv-nav__leaf {
    color: #40916C;
    width: 20px;
    height: 20px;
}

.nv-nav__brand {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nv-nav__name {
    font-size: 14px;
    font-weight: 600;
    color: #1A2B23;
    letter-spacing: -0.02em;
}

.nv-nav__tagline {
    font-size: 9px;
    color: #6B7C72;
    letter-spacing: 0.01em;
}

.nv-nav__center {
    display: flex;
    gap: 32px;
}

.nv-nav__link {
    position: relative;
    font-size: 11px;
    font-weight: 500;
    color: #4B5563;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.nv-nav__link:hover {
    color: #166534;
}

.nv-nav__link:hover::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #166534;
    border-radius: 1px;
}

.nv-nav__right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.nv-nav__icon {
    color: #4A5A52;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.nv-nav__icon:hover {
    background: #F3F6F4;
}

.nv-nav__cart {
    position: relative;
    color: #4A5A52;
    cursor: pointer;
    padding: 6px;
}

.nv-nav__cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #166534;
    color: white;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

.nv-nav__cta {
    background: #40916C;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.nv-nav__cta:hover {
    background: #357A5B;
    transform: translateY(-1px);
}

/* NV Hero */
.nv-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 20px 32px 24px;
    background: linear-gradient(135deg, #FAFCFB 0%, #F3F6F4 100%);
    min-height: 320px;
    align-items: start;
    flex-shrink: 0;
}

.nv-hero__content {
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;
}

.mock-site.active .nv-hero__content.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.nv-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid #A7F3D0;
    color: #166534;
    font-size: 9px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.nv-hero__badge svg {
    color: #B8860B;
    width: 14px;
    height: 14px;
}

.nv-hero__overline {
    font-size: 9px;
    font-weight: 700;
    color: #166534;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 4px;
}

.nv-hero__headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px !important;
    font-weight: 700;
    color: #1A2B23;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 6px 0 0 0;
}

.nv-hero__subtext {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #4B5563;
    line-height: 1.5;
    max-width: 300px;
    margin: 8px 0 0 0;
}

/* Pris-området */
.nv-hero__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: nowrap;
}

.nv-hero__price-current {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1A2B23;
    white-space: nowrap;
}

.nv-hero__price-old {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #9CA3AF;
    text-decoration: line-through;
    white-space: nowrap;
}

.nv-hero__price-save {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #166534;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* CTA-knapper */
.nv-hero__ctas {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.2s;
}

.mock-site.active .nv-hero__ctas.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.nv-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.nv-cta--primary {
    background: #166534;
    color: white;
    box-shadow: 0 4px 14px rgba(22, 101, 52, 0.3);
}

.nv-cta--primary:hover {
    background: #14532D;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 101, 52, 0.4);
}

.nv-cta--secondary {
    background: transparent;
    color: #166534;
    border: 2px solid #166534;
}

.nv-cta--secondary:hover {
    background: #ECFDF5;
}

/* Trust points */
.nv-hero__trust {
    display: flex;
    gap: 16px;
    margin-top: 14px;
}

.nv-trust-point {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: #4B5563;
}

.nv-trust-point svg {
    color: #166534;
    width: 10px;
    height: 10px;
    stroke-width: 2.5;
}

/* Product side */
.nv-hero__product {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 16px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

.mock-site.active .nv-hero__content.animate-in ~ .nv-hero__product,
.mock-site.active .nv-hero__product.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.nv-hero__product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #F8FAF9 0%, #EDF2EF 100%);
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nv-hero__bottle {
    max-height: 220px;
    width: auto;
    border-radius: 10px;
    filter: drop-shadow(0 16px 32px rgba(22, 101, 52, 0.12));
    transition: transform 0.3s ease;
}

.nv-hero__bottle:hover {
    transform: scale(1.03) rotate(2deg);
}

.nv-product-placeholder {
    width: 32px;
    height: 60px;
    background: linear-gradient(180deg, #1B4D3E 0%, #2D6A4F 100%);
    border-radius: 6px 6px 4px 4px;
    position: relative;
    box-shadow: 0 8px 16px rgba(27, 77, 62, 0.25);
}

.nv-product-placeholder::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    background: #D4A574;
    border-radius: 2px 2px 0 0;
}

.nv-product-placeholder::after {
    content: 'Ω-3';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.9);
    font-size: 8px;
    font-weight: 700;
}

.nv-hero__ingredient-badge {
    position: absolute;
    bottom: 24px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #E8ECF0;
}

.nv-ingredient__icon {
    font-size: 20px;
}

.nv-ingredient__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nv-ingredient__label {
    font-size: 8px;
    color: #6B7C72;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nv-ingredient__value {
    font-size: 12px;
    font-weight: 600;
    color: #1A2B23;
}

/* Trust Bar */
.nv-trust-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 14px 24px;
    background: #1A2B23;
    flex-shrink: 0;
}

.nv-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.nv-trust-item:last-child {
    border-right: none;
}

.nv-trust-item svg {
    color: #40916C;
    stroke-width: 2.5;
}

.nv-trust-item span {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
}

/* Products Grid */
.nv-products {
    padding: 32px 24px;
    background: #FFFFFF;
    flex-shrink: 0;
}

.nv-products__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.nv-products__title {
    font-size: 16px;
    font-weight: 600;
    color: #1A2B23;
    margin: 0;
}

.nv-products__link {
    font-size: 11px;
    font-weight: 500;
    color: #40916C;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.nv-products__link:hover {
    color: #357A5B;
}

.nv-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.nv-product-card {
    position: relative;
    background: #F5F1EB;
    border-radius: 8px;
    padding: 8px 8px 12px 8px;
    text-align: center;
}

.nv-product-card__badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #D4A574;
    color: white;
    font-size: 5px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 3px;
    text-transform: uppercase;
}

.nv-product-card__badge--new {
    background: #7C3AED;
}

.nv-product-card__image {
    height: 80px;
    max-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.nv-product-card__bottle {
    max-height: 110px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.nv-product-card__img {
    width: 18px;
    height: 32px;
    border-radius: 4px 4px 3px 3px;
    position: relative;
}

.nv-product-card__img::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 5px;
    background: #D4A574;
    border-radius: 2px 2px 0 0;
}

.nv-product-card__img--omega {
    background: linear-gradient(180deg, #1B4D3E 0%, #2D6A4F 100%);
}

.nv-product-card__img--vitamin {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
}

.nv-product-card__img--magnesium {
    background: linear-gradient(180deg, #7C3AED 0%, #6D28D9 100%);
}

.nv-product-card__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nv-product-card__category {
    font-size: 7px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.nv-product-card__name {
    font-size: 11px;
    font-weight: 700;
    color: #46494c;
    margin: 0;
}

.nv-product-card__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.nv-product-card__stars {
    font-size: 9px;
    color: #FBBF24;
}

.nv-product-card__reviews {
    font-size: 9px;
    color: #6B7280;
}

.nv-product-card__price {
    font-size: 12px;
    font-weight: 700;
    color: #1B4D3E;
    margin-top: 2px;
}

/* Ingredients Strip */
.nv-ingredients {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: #95D5B2;
    flex-shrink: 0;
}

.nv-ingredients__item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.nv-ingredients__emoji {
    font-size: 8px;
}

.nv-ingredients__text {
    font-size: 7px;
    font-weight: 600;
    color: #1B4D3E;
}

.nv-ingredients__divider {
    width: 2px;
    height: 2px;
    background: #1B4D3E;
    border-radius: 50%;
    opacity: 0.3;
}

/* Testimonial */
.nv-testimonial {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #FDFBF7;
    border-top: 1px solid rgba(27, 77, 62, 0.1);
    flex-shrink: 0;
}

.nv-testimonial__content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nv-testimonial__stars {
    font-size: 8px;
    color: #FBBF24;
}

.nv-testimonial__quote {
    font-size: 8px;
    font-style: italic;
    color: #46494c;
    line-height: 1.4;
    margin: 0;
}

.nv-testimonial__author {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nv-testimonial__avatar {
    width: 16px;
    height: 16px;
    background: #1B4D3E;
    color: white;
    font-size: 6px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nv-testimonial__info {
    display: flex;
    flex-direction: column;
}

.nv-testimonial__name {
    font-size: 6px;
    font-weight: 600;
    color: #46494c;
}

.nv-testimonial__verified {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 5px;
    color: #40916C;
}

/* =====================
   NORDIC PURE - Ny design
   ===================== */

/* Override bakgrunn for Nordic Pure */
.mock-site--nv {
    background: #f0f7f4;
}

/* Nordic Pure Navigation Icon */
.np-nav__icon {
    width: 28px;
    height: 28px;
    background: #0f4c3a;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.np-nav__icon svg {
    width: 14px;
    height: 14px;
}

.np-nav__name {
    font-size: 15px;
    font-weight: 600;
    color: #0f4c3a;
    font-family: Georgia, serif;
}

.np-nav__cta {
    background: #0f4c3a;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.np-nav__cta:hover {
    background: #166534;
}

/* Nordic Pure Hero */
.np-hero {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 40px 20px 20px;
    background: linear-gradient(to bottom, #f0f7f4, #FDFBF9);
    align-items: center;
    min-height: 280px;
    flex: 1;
    position: relative;
}

.np-hero__content {
    display: flex;
    flex-direction: column;
    width: 75%;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;
}

.mock-site.active .np-hero__content.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Nordic Pure Badge */
.np-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dcfce7;
    padding: 4px 10px;
    border-radius: 14px;
    margin-bottom: 12px;
    width: fit-content;
}

.np-badge__item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 8px;
    font-weight: 700;
    color: #0f4c3a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.np-badge__item svg {
    width: 10px;
    height: 10px;
}

.np-badge__dot {
    width: 4px;
    height: 4px;
    background: #86efac;
    border-radius: 50%;
}

/* Nordic Pure Headline */
.np-hero__headline,
.hero .np-hero__headline,
.mock-site--nv h1.np-hero__headline {
    font-family: Georgia, serif;
    font-size: 34px !important;
    font-weight: 700;
    color: #0f4c3a;
    line-height: 1.15;
    margin: 0 0 12px 0;
    max-width: 65%;
}

.np-hero__headline-accent {
    font-style: italic;
    color: #2d6a4f;
    font-weight: 400;
}

.np-hero__subtext {
    font-size: 11px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 16px;
    max-width: 320px;
    font-weight: 400;
}

/* Nordic Pure CTAs */
.np-hero__ctas {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.2s;
}

.mock-site.active .np-hero__ctas.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.np-cta--primary {
    background: #0f4c3a;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 10px 30px -10px rgba(15, 76, 58, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.np-cta--primary:hover {
    background: #166534;
    transform: translateY(-2px);
}

/* Nordic Pure Social Proof */
.np-social-proof {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.7);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.8);
}

.np-avatars {
    display: flex;
}

.np-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}

.np-avatar:not(:first-child) {
    margin-left: -6px;
}

.np-rating {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.np-stars {
    display: flex;
    gap: 1px;
}

.np-rating__text {
    font-size: 7px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Nordic Pure Product */
.np-hero__product {
    position: absolute;
    right: 25px;
    top: 60px;
    bottom: 25px;
    width: 42%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s ease;
    background: rgba(230, 235, 230, 0.6);
    border-radius: 20px;
    overflow: hidden;
}

.mock-site.active .np-hero__product.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.np-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.np-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    background: #bbf7d0;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.5;
}

.np-product-container {
    position: relative;
    z-index: 10;
    background: rgba(255,255,255,0.6);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 16px 32px -16px rgba(15, 76, 58, 0.2);
}

.np-bottle {
    width: 100px;
    height: 160px;
    background: linear-gradient(135deg, #166534 0%, #14532d 100%);
    border-radius: 10px;
    position: relative;
    box-shadow: 0 16px 32px -8px rgba(0,0,0,0.3);
}

.np-bottle__cap {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 24px;
    background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);
    border-radius: 4px 4px 3px 3px;
}

.np-bottle__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 60px;
    background: white;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.np-bottle__text {
    font-size: 11px;
    font-weight: 600;
    color: #0f4c3a;
    font-family: Georgia, serif;
}

.np-bottle__icon {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    opacity: 0.5;
}

.np-decoration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 3px;
}

.np-pill {
    width: 12px;
    height: 7px;
    background: #fbbf24;
    border-radius: 8px;
    opacity: 0.8;
}

.np-leaf {
    position: absolute;
    bottom: 20px;
    left: 12px;
    width: 28px;
    height: 14px;
    background: #166534;
    border-radius: 0 14px 0 14px;
    transform: rotate(-30deg);
    opacity: 0.7;
}

/* Nordic Pure Trust Bar */
.np-trust-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f0f7f4;
    border-top: 1px solid rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.np-trust-badge {
    font-size: 7px;
    font-weight: 800;
    color: #0f4c3a;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0.6;
}

.np-check {
    color: #22c55e;
}

/* =====================
   SITE 5: NORDISK MALERSERVICE
   Skalert til 560x280 mockup
   ===================== */
.mock-site--nms {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* NMS Navigation - Profesjonell */
.nms-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}

.mock-site.active .nms-nav.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.nms-nav__logo {
    display: flex;
    flex-direction: column;
}

.nms-nav__name {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: -0.01em;
}

.nms-nav__tagline {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 500;
    color: #64748b;
    margin-top: 1px;
}

.nms-nav__menu {
    display: flex;
    gap: 16px;
}

.nms-nav__link {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
}

/* Nav CTA */
.nms-nav__cta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #FFFFFF;
    background: #1e3a5f;
    border-radius: 5px;
    padding: 7px 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.nms-nav__phone-icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
}

.nms-nav__cta:hover {
    background: #152a45;
}

/* NMS Hero - Background image with overlay */
.nms-hero {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 20px 14px;
    overflow: hidden;
}

.nms-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.6s ease, transform 0.8s ease;
}

.mock-site.active .nms-hero__bg.animate-in {
    opacity: 1;
    transform: scale(1);
}

.nms-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

.nms-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(135deg,
        rgba(30, 58, 95, 0.92) 0%,
        rgba(30, 58, 95, 0.75) 50%,
        rgba(30, 58, 95, 0.55) 100%
    );
    pointer-events: none;
}

.nms-hero__content {
    position: relative;
    z-index: 2;
    max-width: 340px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease 0.15s;
}

.mock-site.active .nms-hero__content.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Trust badge */
.nms-hero__trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nms-hero__trust-badge svg {
    color: #4ade80;
    flex-shrink: 0;
}

.nms-hero__overline {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d97706;
    margin: 0 0 4px 0;
}

.nms-hero__headline,
.hero .nms-hero__headline,
.mock-site--nms h1.nms-hero__headline {
    font-family: 'Playfair Display', serif;
    font-size: 22px !important;
    font-weight: 700;
    line-height: 1.15 !important;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.nms-hero__subtext {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 10px 0;
}

.nms-hero__ctas {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.35s;
}

.mock-site.active .nms-hero__ctas.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.nms-hero__cta {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 600;
    border-radius: 4px;
    padding: 7px 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nms-hero__cta--primary {
    color: #FFFFFF;
    background: #d97706;
}

.nms-hero__cta--primary:hover {
    background: #b45309;
    transform: translateY(-1px);
}

.nms-hero__cta--primary svg {
    flex-shrink: 0;
}

.nms-hero__cta--secondary {
    color: #FFFFFF;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.nms-hero__cta--secondary:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

/* Trust indicators */
.nms-hero__indicators {
    display: flex;
    gap: 12px;
}

.nms-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

.nms-indicator svg {
    flex-shrink: 0;
    color: #fbbf24;
    width: 10px;
    height: 10px;
}

/* NMS Services bar */
.nms-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f8fafc;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.nms-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    gap: 3px;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.nms-service:last-child {
    border-right: none;
}

.nms-service__icon {
    color: #1e3a5f;
    flex-shrink: 0;
}

.nms-service__label {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 500;
    color: #475569;
    text-align: center;
}

/* NMS Why section */
.nms-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px 16px;
    background: #FDFBF9;
    flex-shrink: 0;
}

.nms-why__item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.nms-why__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 6px;
}

.nms-why__content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nms-why__title {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0;
}

.nms-why__text {
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    color: #64748b;
    line-height: 1.35;
    margin: 0;
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 1024px) {
    .hero-mockup {
        max-width: 420px;
        transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
    }

    .hero-mockup:hover {
        transform: perspective(1200px) rotateY(-1deg) rotateX(0.5deg) translateY(-2px);
    }

    .mock-headline {
        font-size: 20px;
    }

    .mock-hero--split,
    .mock-hero--split-reverse {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mock-hero--split .mock-hero__image {
        order: -1;
    }

    .mock-image-placeholder {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 768px) {
    .hero-mockup {
        display: none;
    }
}

/* Hero CTA Responsive */
@media (max-width: 768px) {
    .hero-cta-section {
        align-items: center;
        text-align: center;
    }

    .hero-cta-button {
        padding: 16px 32px;
        font-size: 16px;
    }
}

/* ============================================
   TJENESTER PAGE
   ============================================ */

/* Tjenester Page - Dark Header */
.header--dark {
    background: #46494c;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header--dark .logo__text {
    color: #FFFFFF;
}

.header--dark .nav a {
    color: rgba(255, 255, 255, 0.8);
}

.header--dark .nav a:hover,
.header--dark .nav a.active {
    color: #FFFFFF;
}

.header--dark .header-cta {
    background: #FFFFFF;
    color: #46494c;
}

.header--dark .header-cta:hover {
    background: #F1F5F9;
}

.header--dark .menu-toggle__bar {
    background: #FFFFFF;
}

/* Keep dark header dark when scrolled */
.header--dark.scrolled {
    background: #46494c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Transition to light header when passing dark section */
.header--dark.header--light {
    background: #FDFBF9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header--dark.header--light .logo__text {
    color: #363b42;
}

.header--dark.header--light .nav a {
    color: #64748B;
}

.header--dark.header--light .nav a:hover,
.header--dark.header--light .nav a.active {
    color: #363b42;
}

.header--dark.header--light .header-cta {
    background: #363b42;
    color: #FFFFFF;
}

.header--dark.header--light .header-cta:hover {
    background: #1d2327;
}

.header--dark.header--light .menu-toggle__bar {
    background: #363b42;
}

/* Tjenester Hero */
.tjenester-hero {
    padding: 140px 0 80px;
    background: #46494c;
}

.tjenester-overline {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

.tjenester-hero h1 {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 600;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 24px;
    max-width: 800px;
}

.tjenester-hero-accent {
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
}

.tjenester-intro {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    max-width: 640px;
}

/* Tjenester Cards */
.tjenester-cards {
    padding: 80px 0;
    background: #FDFBF9;
}

.tjenester-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.tjeneste-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.tjeneste-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.tjeneste-card__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3d5245;
    border-radius: 50%;
    margin-bottom: 24px;
    color: #FFFFFF;
}

.tjeneste-card__icon svg {
    width: 24px;
    height: 24px;
    stroke: #FFFFFF;
}

.tjeneste-card__label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #3d5245;
    margin-bottom: 8px;
}

.tjeneste-card h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #46494c;
    margin-bottom: 16px;
}

.tjeneste-card > p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #40464e;
    flex: 1;
    margin-bottom: 24px;
}

.tjeneste-card__footer {
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tjeneste-card__tag {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #9CA3AF;
    font-style: italic;
}

/* Bransjer Section */
.bransjer-section {
    padding: 80px 24px;
    background: #FDFBF9;
}

.bransjer-container {
    max-width: 1120px;
    margin: 0 auto;
}

.bransjer-header {
    text-align: center;
    margin-bottom: 48px;
}

.bransjer-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1E3A5F;
    margin-bottom: 16px;
}

.bransjer-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #46494c;
    margin-bottom: 16px;
}

.bransjer-intro {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #4A5568;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.bransjer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.bransje-card {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bransje-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
}

.bransje-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F4F8;
    border-radius: 10px;
    margin-bottom: 16px;
}

.bransje-card__icon svg {
    color: #1E3A5F;
}

.bransje-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #46494c;
    margin-bottom: 8px;
}

.bransje-card p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #4A5568;
    line-height: 1.6;
}

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

.bransjer-cta p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #4A5568;
}

.bransjer-cta a {
    color: #1E3A5F;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bransjer-cta a:hover {
    color: #2D5A8F;
    text-decoration: underline;
}

/* Prosess Section */
.tjenester-prosess {
    padding: 80px 0;
    background: #FDFBF9;
}

.tjenester-prosess .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.tjenester-prosess .section-header h2 {
    font-family: 'DM Sans', sans-serif;
}

.prosess-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    position: relative;
}

.prosess-timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    left: calc(12.5%);
    right: calc(12.5%);
    height: 2px;
    background: #D1D5DB;
}

.prosess-step {
    text-align: center;
    position: relative;
}

.prosess-step__number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #363b42;
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50%;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
}

.prosess-step h4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #363b42;
    margin-bottom: 12px;
}

.prosess-step p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}

/* Pris Section */
.tjenester-pris {
    padding: 80px 0;
    background: #FDFBF9;
}

.pris-content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.pris-content h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(32px, 4vw, 40px);
    font-weight: 600;
    color: #363b42;
    margin-bottom: 24px;
}

.pris-content p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 16px;
}

.pris-content p strong {
    color: #363b42;
    font-weight: 600;
}

.pris-content .btn {
    margin-top: 24px;
}

/* Tjenester CTA */
.tjenester-cta {
    padding: 120px 0;
    background: #1d2327;
    text-align: center;
}

.tjenester-cta h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 40px;
    line-height: 1.2;
}

/* Invertert knapp for mørk bakgrunn */
.tjenester-cta .btn-primary {
    background: #FFFFFF;
    color: #1d2327;
    padding: 18px 40px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 8px;
}

.tjenester-cta .btn-primary:hover {
    background: #f5f5f5;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.btn-large {
    padding: 18px 40px;
    font-size: 17px;
}

/* Tjenester Responsive */
@media (max-width: 1024px) {
    .tjenester-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

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

    .prosess-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 60px;
    }

    .prosess-timeline::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .tjenester-hero {
        padding: 120px 0 60px;
    }

    .tjenester-hero h1 {
        font-size: 32px;
    }

    .tjenester-intro {
        font-size: 16px;
    }

    .tjeneste-card {
        padding: 24px;
    }

    .tjeneste-card h3 {
        font-size: 24px;
    }

    .prosess-timeline {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .prosess-step {
        text-align: left;
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .prosess-step__number {
        margin: 0;
        flex-shrink: 0;
    }

    .prosess-step h4 {
        margin-bottom: 8px;
    }

    .bransjer-section {
        padding: 60px 20px;
    }

    .bransjer-header h2 {
        font-size: 28px;
    }

    .bransjer-intro {
        font-size: 16px;
    }

    .bransjer-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bransje-card {
        padding: 20px;
    }

    .bransje-card__icon {
        width: 44px;
        height: 44px;
    }

    .bransje-card h3 {
        font-size: 17px;
    }

    .bransje-card p {
        font-size: 14px;
    }

    .tjenester-cta {
        padding: 80px 0;
    }

    .tjenester-cta h2 {
        font-size: 28px;
    }

    .tjenester-cta .btn-primary {
        padding: 16px 32px;
        font-size: 16px;
    }
}