/*
Theme Name: Agentia Mea
Author: Tu
Description: RNBDesigns editorial redesign — Syne + Plus Jakarta Sans, dark cards, pearl sections and red accents.
Version: 8.8.0
Text Domain: agentia-mea
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* Backgrounds */
    --bg:              #060608;
    --bg-raised:       #0c0c0f;
    --bg-card:         rgba(255, 255, 255, 0.026);
    --bg-card-hover:   rgba(255, 255, 255, 0.042);

    /* Borders */
    --border:          rgba(255, 255, 255, 0.07);
    --border-hover:    rgba(255, 255, 255, 0.13);
    --border-accent:   rgba(255, 10, 10, 0.32);

    /* Accent — red to orange */
    --accent-from:     #FF0A0A;
    --accent-to:       #FA6526;
    --gradient:        linear-gradient(115deg, #FF0A0A 0%, #FA6526 100%);

    /* Text */
    --text:            #EDE9E2;
    --text-sub:        rgba(237, 233, 226, 0.52);
    --text-muted:      rgba(237, 233, 226, 0.28);

    /* Type */
    --font-sans:       'Syne', system-ui, sans-serif;
    --font-serif:      'Cormorant Garamond', Georgia, serif;

    /* Spacing */
    --section-py:      clamp(5rem, 10vw, 9rem);
    --container-max:   1200px;
    --gutter:          clamp(1.25rem, 4vw, 3rem);

    /* Shape */
    --r-sm:            6px;
    --r-md:            14px;
    --r-lg:            22px;
    --r-pill:          100px;
    --r-button:        6px;

    /* Motion */
    --ease:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur:             0.35s;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background-color: #060608;
    overscroll-behavior-y: none;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* ── Atmospheric radial glows ──────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 90vw 55vh at 50% -5%,  rgba(255, 10,  10,  0.06) 0%, transparent 70%),
        radial-gradient(ellipse 55vw 45vh at 90% 105%, rgba(250, 101, 38,  0.045) 0%, transparent 65%),
        radial-gradient(ellipse 40vw 40vh at 5%  80%,  rgba(255, 10,  10,  0.025) 0%, transparent 65%);
}

/* ── iOS notch/status-bar cover — solid bar behind the safe-area ────── */
body::after {
    content: '';
    position: fixed;
    top: -1px;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 1px);
    background: #060608;
    z-index: 9997;
    pointer-events: none;
}

/* ── Industrial grain — image-based, html-level, permanent fixed lens ──
 * Attached to html::before so it's never clipped by body or any container.
 * z-index 9998 sits above all content but below cursor (99998/99999).
 * mix-blend-mode intentionally omitted — breaks dark backgrounds on Windows.
 * ──────────────────────────────────────────────────────────────────────── */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background-image: url('assets/img/grain-img.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.03;
}

img, svg { max-width: 100%; display: block; }
a        { color: inherit; text-decoration: none; }
ul       { list-style: none; }
button   { cursor: pointer; border: none; background: none; font-family: var(--font-sans); }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

h1 { font-size: clamp(3rem, 8.5vw, 7.2rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.65rem); }
h4 { font-size: 1.05rem; letter-spacing: -0.02em; }

p {
    color: var(--text-sub);
    font-size: clamp(0.9rem, 1.5vw, 1.02rem);
    line-height: 1.75;
}

/* Gradient text */
.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Serif italic accent — Cormorant Garamond 300i */
.serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 1.06em;
    letter-spacing: 0.01em;
    -webkit-text-fill-color: initial; /* allow parent gradient to override */
}

/* Section label chip */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-from);
    padding: 0.32rem 0.9rem;
    border: 1px solid rgba(255, 10, 10, 0.28);
    border-radius: var(--r-pill);
    background: rgba(255, 10, 10, 0.055);
    margin-bottom: 1rem;
}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 1;
}

.section {
    padding-block: var(--section-py);
}

.section-divider {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--border) 15%,
        var(--border) 85%,
        transparent
    );
    margin-inline: var(--gutter);
}

/* ============================================================
   5. ANIMATIONS
   ============================================================ */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes dotBlink {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.65); }
}

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

/* Scroll fade-in — animații de intrare dezactivate */
.fade-in,
.fade-in.visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.78rem 1.85rem;
    border-radius: var(--r-button);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    position: relative;
    overflow: hidden;
    border: none;
    outline: none;
    text-decoration: none;
}

.btn:hover { transform: translateY(-3px); }

/* Gradient fill */
.btn-gradient {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 4px 22px rgba(255, 10, 10, 0.22);
}
.btn-gradient:hover {
    box-shadow: 0 10px 36px rgba(255, 10, 10, 0.42),
                0 2px 14px rgba(250, 101, 38, 0.28);
    filter: brightness(1.08);
}

/* Ghost outline */
.btn-outline {
    background: transparent;
    color: rgba(255, 80, 40, 0.9);
    border: 1px solid rgba(255, 10, 10, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-outline .btn-icon {
    background: rgba(255, 10, 10, 0.12);
}
.btn-outline:hover {
    background: rgba(255, 10, 10, 0.1);
    border-color: rgba(255, 10, 10, 0.6);
    box-shadow: 0 0 22px rgba(255, 10, 10, 0.1);
}

/* Icon circle inside btn */
.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Round plus button */
.btn-plus {
    width: 38px;
    height: 38px;
    border-radius: var(--r-button);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    text-decoration: none;
    transition: all var(--dur) var(--ease-spring);
}
.btn-plus:hover {
    background: rgba(255, 10, 10, 0.12);
    border-color: rgba(255, 10, 10, 0.45);
    color: rgba(255, 80, 40, 0.95);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 18px rgba(255, 10, 10, 0.14);
}

/* ============================================================
   7. HEADER
   ============================================================ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    /* env(safe-area-inset-top) acoperă notch/status bar pe iOS */
    padding: calc(1.4rem + env(safe-area-inset-top, 0px)) var(--gutter) 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid transparent;
    background: transparent;
    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        padding 0.4s ease;
}
.site-header.scrolled {
    background: rgba(6, 6, 8, 0.88);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.9rem;
}

.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}
.header-logo img {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 2.2rem;
}
.header-nav a {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-sub);
    letter-spacing: 0.04em;
    transition: color var(--dur);
}
.header-nav a:hover,
.header-nav .current-menu-item > a {
    color: var(--text);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 26px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 2px;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text);
    border-radius: 2px;
    transition: transform var(--dur), opacity var(--dur);
    transform-origin: center;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 8, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-top: calc(2rem + env(safe-area-inset-top, 0px));
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__close {
    position: absolute;
    top: calc(1.4rem + env(safe-area-inset-top, 0px));
    right: var(--gutter);
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0.5rem;
    z-index: 201;
}
.mobile-nav a {
    font-size: clamp(2rem, 7vw, 3rem);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    color: var(--text);
    transition: color var(--dur);
}
.mobile-nav a:hover { color: var(--accent-to); }

/* ============================================================
   8. HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 5.5rem;
    padding-bottom: 4rem;
    overflow: hidden;
}

/* Fine inset corner frame */
.hero-frame {
    position: absolute;
    inset: 1.5rem;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--r-lg);
}
.hero-frame::before,
.hero-frame::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-style: solid;
    border-color: rgba(255, 10, 10, 0.5);
}
.hero-frame::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
    border-radius: 3px 0 0 0;
}
.hero-frame::after {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 3px 0;
}

/* Floating badges */
.hero-badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    white-space: nowrap;
}
.badge-agency {
    background: var(--gradient);
    color: #fff;
    top: 42%; left: 9%;
}
.badge-expert {
    background: rgba(12, 12, 16, 0.92);
    border: 1px solid var(--border);
    color: var(--text);
    top: 22%; right: 12%;
}
.badge-innovative {
    background: rgba(232, 217, 106, 0.07);
    border: 1px solid rgba(232, 217, 106, 0.24);
    color: #dcd159;
    bottom: 28%; right: 14%;
}
.badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: dotBlink 2.6s ease-in-out infinite;
}

/* Hero content (legacy alias — kept for compat) */
.hero-inner {
    position: relative;
    text-align: center;
    width: 100%;
}

/* ── Hero structure — open layout, no frame ───────────────
 * No border, no backdrop — the WebGL canvas + CSS glows
 * provide all the atmosphere.
 * ──────────────────────────────────────────────────────────── */
.hero-structure {
    position: relative;
    isolation: isolate;
    text-align: center;
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6rem);
}
/* Primary glow bloom — centered, red core fading to orange */
.hero-structure::before {
    content: '';
    position: absolute;
    inset: -35% 0;
    background: radial-gradient(
        ellipse 70% 60% at 50% 48%,
        rgba(255, 10, 10, 0.11) 0%,
        rgba(250, 101, 38, 0.055) 40%,
        transparent 68%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}
/* Secondary glow — offset lower-right, warmer tone */
.hero-structure::after {
    content: '';
    position: absolute;
    inset: -20% 0;
    background: radial-gradient(
        ellipse 55% 45% at 62% 72%,
        rgba(250, 101, 38, 0.065) 0%,
        transparent 62%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

/* Dot-grid texture — sits above canvas, below text */
.hero-noise {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* H1 — mixed case, tight tracking */
.hero-title {
    font-size: clamp(3rem, 7.5vw, 6.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.07;
    color: var(--text);
    margin: 0 0 1.6rem;
}
.hero-title .line { display: block; }

/* Italic cinematic subline — Cormorant Garamond */
.hero-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.28rem);
    font-weight: 300;
    color: var(--text-sub);
    line-height: 1.7;
    margin: 0 auto 2.8rem;
    max-width: 480px;
}

/* ── Dual CTA row ────────────────────────────────────────── */
.hero-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Secondary outline pill — fills with gradient on hover */
.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.85rem;
    border-radius: var(--r-button);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}
.btn-hero-secondary:hover {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(255, 10, 10, 0.38);
}

/* Warm pseudo-glow suppressed — WebGL canvas handles atmosphere */
.hero::after { display: none; }

@media (max-width: 768px) {
    .hero-structure { padding: 2.5rem 1.25rem 3.5rem; }
    .hero-title { letter-spacing: 0.02em; }
    .hero-ctas  { gap: 0.75rem; }
}
@media (max-width: 480px) {
    .hero-ctas { flex-direction: column; }
    .hero-ctas .btn,
    .btn-hero-secondary { width: 100%; text-align: center; justify-content: center; }
}

/* ============================================================
   9. ABOUT
   ============================================================ */
.about {
    background: var(--bg-raised);
    text-align: center;
}
.about h2 {
    max-width: 700px;
    margin: 0.5rem auto 1.4rem;
}
.about-text {
    max-width: 620px;
    margin: 0 auto 2.8rem;
    font-size: clamp(0.97rem, 1.8vw, 1.12rem);
    color: rgba(237, 233, 226, 0.7);
    line-height: 1.85;
}

/* ============================================================
   10. TECH STACK — MARQUEE
   ============================================================ */
.techstack {
    padding-block: clamp(3rem, 5vw, 5rem);
    overflow: hidden;
    background: var(--bg);
}
.techstack-label { margin-bottom: 1.75rem; }

.marquee-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee 30s linear infinite;
    will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 2rem;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    transition: color var(--dur);
    flex-shrink: 0;
    cursor: default;
}
.marquee-item:hover { color: var(--text-sub); }

.marquee-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.marquee-icon svg { width: 100%; height: 100%; }

.marquee-name {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   11. SERVICES — HORIZONTAL SCROLL
   ============================================================ */
.services-hscroll {
    height: 350vh;
    position: relative;
}

.hscroll-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(3rem, 5vw, 5rem) 2rem;
}

.hscroll-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
}

.services-title h2 { line-height: 1.08; }
.services-title .normal-line { display: block; }
.services-title .italic-line {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 1.05em;
    color: var(--text-sub);
    letter-spacing: 0.01em;
}

.hscroll-track-wrap {
    overflow: hidden;
    padding-inline: var(--gutter);
}
.hscroll-track {
    display: flex;
    gap: 1.4rem;
    will-change: transform;
}

/* ── Service Card (glassmorphism) ──────────────────────────── */
.service-card {
    min-width: 320px;
    max-width: 340px;
    flex-shrink: 0;
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.5s var(--ease), border-color 0.4s, background 0.4s;
}

/* Subtle top-edge glow — visible on hover (inset shadow follows border-radius natively) */
.service-card::before { display: none; }
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 10, 10, 0.06), transparent);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
}

.service-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 10, 10, 0.45);
    box-shadow:
        inset 0 2px 0 0 var(--accent-from),
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(255, 10, 10, 0.10);
}
.service-card:hover::after { opacity: 1; }

.service-num {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--accent-from);
    display: block;
}

.service-card h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-family: var(--font-sans);
    font-weight: 600;
    flex: 1;
}

.service-desc {
    font-size: 0.86rem;
    color: var(--text-sub);
    line-height: 1.7;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}
.tag {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.26rem 0.65rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    transition: color var(--dur), border-color var(--dur);
}
.service-card:hover .tag {
    border-color: rgba(255, 10, 10, 0.18);
    color: var(--text-sub);
}

.service-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

/* Progress bar */
.hscroll-progress-wrap { margin-top: 2.2rem; }
.hscroll-progress-bar {
    width: 100%;
    height: 1px;
    background: var(--border);
    border-radius: 1px;
    overflow: hidden;
}
.hscroll-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--gradient);
    border-radius: 1px;
    transition: width 0.06s linear;
}

/* ============================================================
   12. PORTFOLIO
   ============================================================ */
.portfolio { background: var(--bg-raised); }

.portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.8rem;
}
.portfolio-header h2 { margin-top: 0.4rem; }

.portfolio-grid-asym {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.portfolio-item--large {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 6;
}
.portfolio-item--small { aspect-ratio: 4 / 3; }

.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
}
.portfolio-item:hover {
    transform: translateY(-5px);
    border-color: var(--border-accent);
    box-shadow:
        0 24px 62px rgba(0, 0, 0, 0.6),
        0 0 38px rgba(255, 10, 10, 0.08);
}

.portfolio-item-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.portfolio-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.portfolio-item:hover .portfolio-item-img {
    transform: scale(1.04);
}
.portfolio-item:hover .portfolio-item-inner {
    color: rgba(255, 255, 255, 0.09);
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 6, 8, 0.9) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    padding: 1.8rem;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }

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

/* ============================================================
   13. PROCESS
   ============================================================ */
.process h2 { margin-block: 0.5rem 3rem; }

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

.process-step {
    padding: 2.2rem 1.8rem;
    border-left: 1px solid var(--border);
    position: relative;
    transition: background 0.4s;
}
.process-step:first-child { border-left: none; }
.process-step::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: var(--border);
}
/* Gradient accent bar on top */
.process-step::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient);
    border-radius: 2px;
    transition: width 0.5s var(--ease);
}
.process-step:hover { background: rgba(255, 10, 10, 0.02); }
.process-step:hover::after { width: 100%; }

.process-num {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--accent-from);
    display: block;
    margin-bottom: 1.1rem;
}
.process-step h4 { margin-bottom: 0.65rem; }
.process-step p { font-size: 0.87rem; color: var(--text-sub); }

/* ============================================================
   14. TESTIMONIALS
   ============================================================ */
.testimonials { background: var(--bg); }
.testimonials h2 { margin-block: 0.5rem 3rem; }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
}

.testimonial-card {
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.testimonial-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at bottom right, rgba(250, 101, 38, 0.06), transparent 60%);
    pointer-events: none;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-accent);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(255, 10, 10, 0.07);
}

.testimonial-quote-icon { flex-shrink: 0; opacity: 0.85; }

.testimonial-stars { display: flex; gap: 2px; }
.star {
    font-size: 0.95rem;
    color: var(--text-muted);
}
.star--filled {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.testimonial-text {
    font-size: clamp(0.88rem, 1.3vw, 0.96rem);
    color: rgba(237, 233, 226, 0.68);
    line-height: 1.8;
    font-style: normal;
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.testimonial-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 0.15rem;
}
.testimonial-role {
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* ============================================================
   15. FAQ
   ============================================================ */
.faq { background: var(--bg-raised); }

.faq-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}
.faq-heading h2 {
    margin-top: 0.5rem;
    position: sticky;
    top: 2rem;
}

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

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.3rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    font-weight: 500;
    color: var(--text);
    transition: color var(--dur);
}
.faq-question:hover { color: #fff; }
.faq-question[aria-expanded="true"] { color: var(--accent-to); }

.faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.faq-question:hover .faq-icon,
.faq-question[aria-expanded="true"] .faq-icon {
    border-color: var(--border-accent);
    background: rgba(255, 10, 10, 0.07);
    color: var(--accent-to);
}

.faq-line-v {
    transition: transform 0.32s var(--ease), opacity 0.32s;
    transform-origin: center;
    transform-box: fill-box;
}
.faq-question[aria-expanded="true"] .faq-line-v {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s var(--ease);
}
.faq-answer:not([hidden]) { max-height: 500px; }
.faq-answer[hidden] { display: block !important; max-height: 0; }

.faq-answer p {
    padding: 0 0 1.5rem;
    font-size: clamp(0.84rem, 1.3vw, 0.94rem);
    color: var(--text-sub);
    line-height: 1.8;
}

/* ============================================================
   16. PRICING
   ============================================================ */
.pricing { background: var(--bg); }

.pricing-header {
    text-align: center;
    max-width: 580px;
    margin-inline: auto;
    margin-bottom: 4rem;
}
.pricing-header h2 { margin-block: 0.5rem 1rem; }
.pricing-subtitle {
    font-size: clamp(0.86rem, 1.4vw, 0.97rem);
    color: var(--text-muted);
    line-height: 1.75;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: center;
}

.pricing-card {
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 22px 62px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(255, 10, 10, 0.06);
}

/* Popular card */
.pricing-card--popular {
    border-color: rgba(255, 10, 10, 0.35);
    transform: scale(1.034);
    box-shadow:
        0 12px 48px rgba(255, 10, 10, 0.15),
        0 0 0 1px rgba(255, 10, 10, 0.12);
    z-index: 1;
}
.pricing-card--popular:hover {
    transform: scale(1.034) translateY(-5px);
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.7),
        0 0 55px rgba(255, 10, 10, 0.2);
}

/* Glow blob */
.pricing-glow {
    position: absolute;
    inset: -30%;
    background: radial-gradient(
        ellipse at 55% 35%,
        rgba(250, 80, 20, 0.42) 0%,
        rgba(255, 30, 8, 0.18) 35%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(30px);
    animation: glowPulse 3.5s ease-in-out infinite;
}

.pricing-hex {
    position: absolute;
    top: -18px; right: -18px;
    width: 150px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.pricing-badge {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%) translateY(-1px);
    background: var(--gradient);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.28rem 1rem;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    z-index: 2;
    white-space: nowrap;
}

.pricing-card-inner {
    position: relative;
    z-index: 1;
    padding: clamp(1.8rem, 3vw, 2.3rem);
    padding-top: clamp(2.3rem, 3vw, 2.8rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-to);
}

.pricing-name {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.025em;
}

.pricing-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.25rem 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.pricing-amount {
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 700;
    font-family: var(--font-sans);
    letter-spacing: -0.04em;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    filter: blur(7px);
    user-select: none;
    cursor: default;
}
.pricing-decimals {
    font-size: 0.55em;
    letter-spacing: 0;
}
.pricing-currency {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    color: rgba(237, 233, 226, 0.65);
    line-height: 1.4;
}
.pricing-check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pricing-cta {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

/* ============================================================
   17. CONTACT
   ============================================================ */
.contact { background: var(--bg-raised); text-align: center; }

.contact-inner {
    max-width: 620px;
    margin-inline: auto;
}
.contact-inner h2 { margin-block: 0.5rem 1rem; }
.contact-inner > p { margin-bottom: 3rem; }

.contact-form-wrap {
    background: var(--bg-card);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    text-align: left;
}

/* CF7 dark overrides */
.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form input[type="tel"],
.contact-form-wrap .wpcf7-form textarea,
.contact-form-wrap .wpcf7-form select {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0.88rem 1.15rem;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--dur), box-shadow var(--dur);
    margin-bottom: 1rem;
}
.contact-form-wrap .wpcf7-form input:focus,
.contact-form-wrap .wpcf7-form textarea:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px rgba(255, 10, 10, 0.08);
}
.contact-form-wrap .wpcf7-form textarea { min-height: 130px; resize: vertical; }

.contact-form-wrap .wpcf7-form input[type="submit"] {
    background: var(--gradient);
    border: none;
    border-radius: var(--r-button);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.88rem 2.5rem;
    cursor: pointer;
    transition: transform var(--dur), box-shadow var(--dur);
    margin-bottom: 0;
    width: auto;
}
.contact-form-wrap .wpcf7-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 10, 10, 0.38);
}

/* ============================================================
   18. FOOTER
   ============================================================ */
.site-footer {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
    border-top: 1px solid var(--border);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}
.footer-brand p {
    margin-top: 0.8rem;
    max-width: 250px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.footer-links h4 {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.footer-links ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a {
    font-size: 0.85rem;
    color: var(--text-sub);
    transition: color var(--dur);
}
.footer-links a:hover { color: var(--text); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.footer-bottom p { font-size: 0.76rem; color: var(--text-muted); }

.social-links { display: flex; gap: 0.7rem; }
.social-link {
    width: 34px;
    height: 34px;
    border-radius: var(--r-button);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.social-link:hover {
    border-color: var(--border-accent);
    color: var(--accent-to);
    background: rgba(255, 10, 10, 0.06);
}

/* ============================================================
   19. SCROLLBAR + SELECTION
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 10, 10, 0.35); }

::selection {
    background: rgba(255, 10, 10, 0.28);
    color: #fff;
}

/* ============================================================
   20. RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .services-hscroll     { height: auto; }
    .hscroll-sticky       { position: static; height: auto; overflow: visible; }
    .hscroll-track-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
    .hscroll-track        { transform: none !important; padding-bottom: 0.5rem; }
    .service-card         { scroll-snap-align: start; }
    .hscroll-progress-wrap { display: none; }

    .process-grid         { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid    { grid-template-columns: repeat(2, 1fr); }
    .faq-inner            { grid-template-columns: 1fr; gap: 2rem; }
    .faq-heading h2       { position: static; }

    .pricing-grid         { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
    .pricing-card--popular { transform: none; }
    .pricing-card--popular:hover { transform: translateY(-5px); }
}

/* ============================================================
   21. RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Header mereu cu fundal solid pe mobil */
    .site-header {
        background: #060608;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .header-nav           { display: none; }
    .hamburger            { display: flex; }
    .btn-contact-header   { display: none; }

    .badge { font-size: 0.66rem; padding: 0.3rem 0.7rem; }
    .badge-agency    { top: 36%; left: 1.5%; }
    .badge-expert    { top: 15%; right: 1.5%; }
    .badge-innovative { bottom: 26%; right: 1.5%; }

    .portfolio-grid-asym  { grid-template-columns: 1fr; }
    .portfolio-item--large { grid-column: auto; aspect-ratio: 16 / 8; }
    .portfolio-header     { flex-direction: column; align-items: flex-start; }

    .process-grid         { grid-template-columns: 1fr 1fr; }
    .testimonials-grid    { grid-template-columns: 1fr; }
    .footer-top           { flex-direction: column; gap: 2rem; }
    .footer-bottom        { flex-direction: column-reverse; align-items: flex-start; }
}

/* ============================================================
   22. RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    .process-grid { grid-template-columns: 1fr; }
    .hero-badges  { display: none; }
    .hero-frame   { inset: 0.75rem; }
    h1            { font-size: clamp(2.4rem, 13vw, 3.2rem); }
    .btn          { padding: 0.7rem 1.4rem; font-size: 0.75rem; }
}

/* ============================================================
   A. CUSTOM CURSOR
   ============================================================ */
* { cursor: none !important; }

.cursor-dot {
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s;
    will-change: transform;
}
.cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.28s var(--ease),
                height 0.28s var(--ease),
                border-color 0.28s var(--ease),
                box-shadow 0.28s var(--ease),
                opacity 0.2s;
    will-change: transform;
}
.cursor-ring.is-hover {
    width: 54px;
    height: 54px;
    border-color: rgba(255, 10, 10, 0.75);
    box-shadow: 0 0 18px rgba(255, 10, 10, 0.28),
                0 0 38px rgba(250, 101, 38, 0.12);
}
.cursor-dot.is-hidden,
.cursor-ring.is-hidden { opacity: 0; }

@media (hover: none) {
    * { cursor: auto !important; }
    .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================================
   B. TECH STACK — GRAYSCALE + OPACITY REVEAL
   ============================================================ */
.marquee-item {
    opacity: 0.3;
    filter: grayscale(100%);
    color: var(--text-muted);
    transition: opacity 0.4s var(--ease),
                filter 0.4s var(--ease),
                color 0.4s var(--ease);
}
.marquee-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    color: var(--text);
}

/* ============================================================
   C. HIGH-TECH GRID LINES — PRECISION DIVIDERS
   ============================================================ */
.section-divider {
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.04) 15%,
        rgba(255, 255, 255, 0.04) 85%,
        transparent
    );
    margin-inline: 0;
}
/* Extra sub-pixel line inside hero for layered depth */
.hero-frame {
    border-color: rgba(255, 255, 255, 0.035);
}

/* ============================================================
   D. 3D MOCKUP TILT
   ============================================================ */
.mockup-tilt {
    transform: perspective(1000px) rotateX(2deg) rotateY(-4deg);
    box-shadow:
        -24px 24px 70px rgba(0, 0, 0, 0.55),
        -8px 8px 28px rgba(0, 0, 0, 0.35),
        0 0 80px rgba(255, 10, 10, 0.05);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    border-radius: var(--r-md);
    overflow: hidden;
}
.mockup-tilt:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.45),
        0 0 50px rgba(255, 10, 10, 0.07);
}

/* ============================================================
   E. SITE FOOTER
   ============================================================ */
.site-footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* ── Massive CTA ────────────────────────────────────────── */
.footer-cta {
    padding: clamp(6rem, 12vw, 11rem) 0 clamp(4rem, 7vw, 6rem);
}
.footer-cta__label { margin-bottom: 1.5rem; }

.footer-headline {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 8vw, 9rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.95;
    color: var(--text);
    margin: 0 0 3rem;
}
.footer-headline .serif-italic { display: inline; }

.footer-start-btn {
    font-size: 0.88rem;
    padding: 1rem 2.8rem;
}

/* ── 4-col grid ─────────────────────────────────────────── */
.footer-grid-wrap {
    border-top: 1px solid var(--border);
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
}
.footer-col__heading {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 1.5rem;
}
.footer-col nav,
.footer-col address {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-style: normal;
}
.footer-col a,
.footer-col p {
    font-size: 0.96rem;
    color: var(--text-sub);
    text-decoration: none;
    transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
    line-height: 1.5;
    margin: 0;
}
.footer-col a:hover { color: var(--text); }

/* ── Bottom bar ─────────────────────────────────────────── */
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
}
.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-bottom p {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0;
}
.footer-bottom span {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    /* Scale the massive headline down without overflow */
    .footer-headline { font-size: clamp(2.4rem, 10vw, 4.5rem); }

    /* Luxury directory layout:
       RNBDESIGNS (brand)  — full width
       PEOPLE | SOCIALS    — 2-col
       STUDIO              — full width, separated
    */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.75rem 2rem;
    }

    /* RNBDESIGNS brand col — full width anchor */
    .footer-col:first-child {
        grid-column: span 2;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--border);
    }

    /* STUDIO col — full width at bottom, separated */
    .footer-col:last-child {
        grid-column: span 2;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
    }

    /* Headings: small caps, accent, generous tracking */
    .footer-col__heading {
        font-size: 0.65rem;
        letter-spacing: 0.3em;
        color: var(--accent-from);
        margin-bottom: 1.25rem;
    }

    /* Links: Cormorant Garamond for editorial, serif elegance */
    .footer-col a {
        font-family: var(--font-serif);
        font-size: 1.05rem;
        font-style: normal;
        line-height: 1.8;
        padding-block: 0;
    }

    /* Body text / address lines keep sans */
    .footer-col p {
        line-height: 1.9;
        padding-block: 0;
    }

    .footer-col nav,
    .footer-col address {
        gap: 0.15rem;
    }
}
@media (max-width: 480px) {
    .footer-headline { font-size: clamp(2rem, 12vw, 3.5rem); }
    .footer-bottom .container { flex-direction: column; text-align: center; }
}

/* ============================================================
   F. PAGE SERVICII — ZIG-ZAG GLASSMORPHISM LAYOUT (v2.3)
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.servicii-hero {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: center;
    padding-top: 7rem;
    padding-bottom: var(--section-py);
    overflow: hidden;
}
.servicii-hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60vw 45vh at 50% 20%, rgba(255, 10, 10, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40vw 35vh at 80% 80%, rgba(250, 101, 38, 0.05) 0%, transparent 65%);
}
.servicii-hero__inner {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}
.servicii-hero__title {
    font-family: var(--font-sans);
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.08;
    margin: 0;
    color: var(--text);
}
.servicii-hero__subtitle {
    max-width: 580px;
    font-size: clamp(0.9rem, 1.5vw, 1.04rem);
    color: var(--text-sub);
    line-height: 1.8;
    margin: 0;
}

/* Hero CTA extra breathing room (btn already styled globally) */
.servicii-hero__inner .btn {
    margin-top: 0.6rem;
}

/* ── Section Wrapper ──────────────────────────────────────── */
.services-grid-wrapper {
    background: var(--bg);
}

/* ── Single Row ───────────────────────────────────────────── */
.service-zigzag-row {
    display: flex;
    align-items: center;
    gap: 5rem;
}
/* Zig-Zag: even rows reverse direction (class set in PHP to avoid nth-child
   mismatch from .svc-row-divider siblings) */
.service-zigzag-row--reverse {
    flex-direction: row-reverse;
}

/* Row divider spacing */
.svc-row-divider {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

/* ── Content Side ─────────────────────────────────────────── */
.service-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.svc-zz-title {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}

.svc-zz-desc {
    font-size: clamp(0.88rem, 1.4vw, 0.98rem);
    color: var(--text-sub);
    line-height: 1.8;
    max-width: 480px;
    margin: 0;
}

.svc-zz-bullets {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.svc-zz-bullets li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: rgba(237, 233, 226, 0.65);
    line-height: 1.4;
}
.svc-zz-bullets li svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

/* ── Visual Side ──────────────────────────────────────────── */
.service-visual {
    flex: 1;
    min-width: 0;
    position: relative;
    isolation: isolate;  /* CLAUDE.md: keeps glows inside stacking context */
}

/* Primary ambient glow */
.service-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.22;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}

/* Secondary wider glow layer */
.service-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: blur(160px);
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
}

.service-zigzag-row:hover .service-visual::before { opacity: 0.32; }

/* Glow colors */
.glow-red::before,    .glow-red::after    { background: #FF0A0A; }
.glow-blue::before,   .glow-blue::after   { background: #3878FF; }
.glow-green::before,  .glow-green::after  { background: #22C55E; }
.glow-purple::before, .glow-purple::after { background: #A855F7; }
.glow-cyan::before,   .glow-cyan::after   { background: #06B6D4; }
.glow-orange::before, .glow-orange::after { background: #FA6526; }

/* ── Glass Card ───────────────────────────────────────────── */
.glass-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.032);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 24px;
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    transform: perspective(1200px) rotateX(1.5deg) rotateY(-1.5deg);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.04) inset,
        0 24px 64px rgba(0, 0, 0, 0.45);
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.45s var(--ease),
        border-color 0.4s var(--ease);
}
.glass-card:hover {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(-4px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.06) inset,
        0 32px 80px rgba(0, 0, 0, 0.55);
}

/* ── Ghost watermark number ───────────────────────────────── */
.gc-watermark {
    position: absolute;
    top: -0.15em;
    left: clamp(1rem, 2.5vw, 1.8rem);
    font-family: var(--font-sans);
    font-size: clamp(5rem, 11vw, 9rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.055);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ── Card Header (num + title) ────────────────────────────── */
.gc-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}
.gc-header .service-num {
    font-size: 0.72rem;
    opacity: 0.5;
}
.gc-title {
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

/* ── Metrics Row ──────────────────────────────────────────── */
.gc-metrics {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}
.gc-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    padding: 0.6rem 0.4rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 10px;
}
.gc-metric__value {
    font-family: var(--font-sans);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gc-metric__label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(237, 233, 226, 0.4);
    text-align: center;
}

/* ── Tag chips ────────────────────────────────────────────── */
.gc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    position: relative;
    z-index: 1;
}

/* ── Diagonal grid decoration ─────────────────────────────── */
.gc-decor {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            -48deg,
            rgba(255, 255, 255, 0.016) 0px,
            rgba(255, 255, 255, 0.016) 1px,
            transparent 1px,
            transparent 12px
        );
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .service-zigzag-row { gap: 3rem; }
    .svc-row-divider    { margin-top: 3rem; margin-bottom: 3rem; }
}

@media (max-width: 768px) {
    .servicii-hero            { min-height: auto; padding-top: 5.5rem; }
    .servicii-hero__title     { font-size: clamp(2rem, 10vw, 3rem); }

    .service-zigzag-row,
    .service-zigzag-row--reverse {
        flex-direction: column;
        gap: 2.5rem;
    }
    .svc-row-divider { margin-top: 2rem; margin-bottom: 2rem; }
    .glass-card      { aspect-ratio: 4 / 3; }
    .gc-watermark    { font-size: clamp(5rem, 22vw, 8rem); }
    .gc-metric__value { font-size: 1rem; }
}

/* ============================================================
   G. PAGE PORTOFOLIU (v2 — unified gradient hover, editorial)
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.portofoliu-hero {
    position: relative;
    min-height: 58vh;
    display: flex;
    align-items: center;
    padding-top: 7rem;
    padding-bottom: var(--section-py);
    overflow: hidden;
}
.portofoliu-hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70vw 50vh at 50% 15%, rgba(255, 10, 10, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 45vw 40vh at 85% 90%, rgba(250, 101, 38, 0.05) 0%, transparent 60%);
}
.portofoliu-hero__inner {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}
.portofoliu-hero__title {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.02;
    color: var(--text);
    margin: 0;
}
.portofoliu-hero__subtitle {
    max-width: 580px;
    font-size: clamp(0.88rem, 1.4vw, 1.02rem);
    color: var(--text-sub);
    line-height: 1.8;
    margin: 0;
}
.portofoliu-hero__cta-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Hero stat bar ───────────────────────────────────────── */
.hero-stat-bar {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.85rem 2rem;
    background: rgba(255, 255, 255, 0.026);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-wrap: wrap;
    justify-content: center;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}
.hero-stat__val {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-stat__lbl {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.hero-stat-bar__sep {
    width: 1px;
    height: 1.75rem;
    background: var(--border);
    flex-shrink: 0;
}

/* ── Section header ──────────────────────────────────────── */
.pf-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 5rem;
}
.pf-section-header h2 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 0;
}

/* ── Projects Grid ─────────────────────────────────────────── */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 3.5vw, 3rem);
}

/* ── Project card ──────────────────────────────────────────── */
.project-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition:
        border-color 0.45s var(--ease),
        box-shadow 0.45s var(--ease),
        transform 0.45s var(--ease-spring);
}
.project-card:hover {
    border-color: rgba(255, 10, 10, 0.38);
    box-shadow:
        0 0 0 1px rgba(255, 10, 10, 0.05),
        0 0 60px rgba(255, 10, 10, 0.11),
        0 24px 52px rgba(0, 0, 0, 0.45);
    transform: translateY(-6px);
}

/* ── Card image wrapper ────────────────────────────────────── */
.project-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
}

/* Inset red glow */
.project-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(255, 10, 10, 0);
    transition: box-shadow 0.5s var(--ease);
    z-index: 2;
    pointer-events: none;
}
.project-card:hover .project-card__image::before {
    box-shadow:
        inset 0 0 80px rgba(255, 10, 10, 0.1),
        inset 0 -50px 50px rgba(250, 101, 38, 0.06);
}

/* Bottom scrim */
.project-card__image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(
        to top,
        rgba(6, 6, 8, 0.88) 0%,
        rgba(6, 6, 8, 0.35) 40%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

.project-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
    transform: scale(1.03);
    transition: transform 0.75s var(--ease);
}
.project-card:hover .project-card__image img {
    transform: scale(1.09);
}

/* Ghost project number */
.pv-num {
    position: absolute;
    bottom: 0.75rem;
    left: 1.25rem;
    font-family: var(--font-sans);
    font-size: clamp(3.5rem, 5.5vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 1;
    color: rgba(237, 233, 226, 0.06);
    z-index: 3;
    pointer-events: none;
    user-select: none;
}

/* "View Project" pill */
.pv-overlay {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--r-pill);
    z-index: 4;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    pointer-events: none;
}
.project-card:hover .pv-overlay {
    opacity: 1;
    transform: translateY(0);
}
.pv-overlay__label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1;
}
.pv-overlay svg {
    color: var(--text);
    flex-shrink: 0;
    transition: transform 0.3s var(--ease);
}
.project-card:hover .pv-overlay svg {
    transform: translate(2px, -2px);
}

/* ── Card body ─────────────────────────────────────────────── */
.project-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    flex: 1;
}

.project-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.project-num {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.project-meta__sep {
    color: var(--text-muted);
    font-size: 0.68rem;
}
.project-category-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.project-title {
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}

.project-desc {
    font-size: clamp(0.86rem, 1.3vw, 0.96rem);
    color: var(--text-sub);
    line-height: 1.8;
    margin: 0;
}

/* ── Metrics grid ──────────────────────────────────────────── */

/* Use 1px gap trick: container bg = border color, cells = bg color */
.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.metric-item {
    background: var(--bg);
    padding: 0.9rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.metric-value {
    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text);
}
.metric-value--positive {
    color: #00E56B;
}
.metric-label {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

/* Case-study link under tech tags */
.project-case-study {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-sub);
    text-decoration: none;
    opacity: 0.65;
    background-image: linear-gradient(115deg, var(--accent-from), var(--accent-to));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: opacity 0.3s var(--ease), background-size 0.35s var(--ease);
}
.project-case-study svg {
    flex-shrink: 0;
    transition: transform 0.3s var(--ease);
}
.project-case-study:hover {
    opacity: 1;
    background-size: 100% 1px;
}
.project-case-study:hover svg {
    transform: translate(3px, -3px);
}

/* ── Tech tags ────────────────────────────────────────────── */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.tech-tag {
    display: inline-block;
    padding: 0.28rem 0.82rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text-sub);
    transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease);
}
.project-card:hover .tech-tag {
    border-color: rgba(255, 10, 10, 0.22);
    color: var(--text);
}
.tech-tag:hover {
    border-color: var(--border-accent) !important;
    background: rgba(255, 10, 10, 0.07) !important;
    color: var(--text) !important;
}

/* ── Testimonials ─────────────────────────────────────────── */
.pf-testimonials__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    margin-bottom: 3.5rem;
}
.pf-testimonials__header h2 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 0;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.testimonial-card {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    transition:
        border-color 0.4s var(--ease),
        transform 0.4s var(--ease-spring),
        box-shadow 0.4s var(--ease);
}

/* Left gradient line on testimonial cards */
.testimonial-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 2px;
    background: var(--gradient);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.4s var(--ease), top 0.4s var(--ease), bottom 0.4s var(--ease);
}
.testimonial-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 10, 10, 0.06);
}
.testimonial-card:hover::before {
    opacity: 1;
    top: 8%;
    bottom: 8%;
}
.testimonial-stars {
    display: flex;
    gap: 0.3rem;
}
.testimonial-quote {
    font-size: clamp(0.84rem, 1.3vw, 0.92rem);
    line-height: 1.75;
    color: var(--text-sub);
    flex: 1;
    font-style: normal;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
}
.testimonial-name {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}
.testimonial-role {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.3;
}

/* ── Responsive ───────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
    .projects-grid        { gap: 1.75rem; }
    .hero-stat-bar        { gap: 1.25rem; padding: 0.75rem 1.5rem; }
    .project-title        { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
    .pv-num               { font-size: clamp(3rem, 5vw, 5rem); }
    .project-card__body   { padding: 1.4rem; }
}

/* Mobile */
@media (max-width: 768px) {
    /* Hero */
    .portofoliu-hero            { min-height: auto; padding-top: 5.5rem; }
    .portofoliu-hero__inner     { gap: 1.25rem; }
    .portofoliu-hero__title     { font-size: clamp(2rem, 9vw, 3rem); }
    .portofoliu-hero__subtitle  { font-size: 0.88rem; }
    .portofoliu-hero__cta-group { flex-direction: column; align-items: stretch; }
    .portofoliu-hero__cta-group .btn { justify-content: center; }

    /* Stat bar */
    .hero-stat-bar      { gap: 0.9rem 1.5rem; padding: 0.75rem 1.25rem; }
    .hero-stat-bar__sep { display: none; }
    .hero-stat__val     { font-size: 0.9rem; }

    /* Section header */
    .pf-section-header  { margin-bottom: 3.5rem; }

    /* Single-column grid */
    .projects-grid      { grid-template-columns: 1fr; gap: 3rem; }
    .project-card__body { padding: 1.25rem; }
    .pv-num             { font-size: clamp(2.8rem, 14vw, 4.5rem); }

    /* Typography */
    .project-title      { font-size: clamp(1.35rem, 5vw, 1.75rem); }
    .project-desc       { font-size: 0.88rem; }

    /* Metrics */
    .metrics-grid       { grid-template-columns: 1fr 1fr; }
    .metric-item        { padding: 0.8rem 0.9rem; }
    .metric-value       { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
    .metric-label       { font-size: 0.6rem; }

    /* Testimonials */
    .testimonials-grid          { grid-template-columns: 1fr; gap: 1rem; }
    .pf-testimonials__header h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* Small phones */
@media (max-width: 480px) {
    .hero-stat-bar   { flex-wrap: wrap; justify-content: center; }
    .metrics-grid    { grid-template-columns: 1fr 1fr; gap: 1px; }
    .metric-item     { padding: 0.75rem 0.8rem; }
    .tech-tags       { gap: 0.35rem; }
    .tech-tag        { font-size: 0.65rem; padding: 0.24rem 0.66rem; }
    .pv-overlay      { display: none; }  /* too small to be useful */
}


/* ============================================================
   H. PAGE ABOUT
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.about-hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    padding-top: 8rem;
    padding-bottom: var(--section-py);
    overflow: hidden;
}
.about-hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80vw 55vh at 50% 10%, rgba(255, 10, 10, 0.09) 0%, transparent 65%),
        radial-gradient(ellipse 50vw 40vh at 85% 90%, rgba(250, 101, 38, 0.055) 0%, transparent 60%);
}
.about-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
    max-width: 760px;
}
.about-hero__title {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.02;
    color: var(--text);
    margin: 0;
}
.about-hero__subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    color: var(--text-sub);
    line-height: 1.8;
    max-width: 520px;
    margin: 0;
}

/* ── Story 2-col ──────────────────────────────────────────── */
.about-story__grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
}
.about-story__left {
    position: sticky;
    top: 8rem;
}
.about-story__stats {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.about-story__stat {
    background: var(--bg);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.about-story__stat-val {
    font-family: var(--font-sans);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #FFFFFF;
}
.about-story__stat-lbl {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.about-story__heading {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--text);
    margin: 0 0 1.75rem;
}
.about-story__right p {
    color: var(--text-sub);
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    line-height: 1.85;
    margin-bottom: 1.1rem;
}
.about-story__right p:last-child {
    margin-bottom: 0;
}

/* ── Help cards ───────────────────────────────────────────── */
.about-help {
    position: relative;
    overflow: hidden;
}
.about-help__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70vw 60vh at 50% 50%, rgba(255, 10, 10, 0.06) 0%, transparent 65%);
}
.about-help__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 3.5rem;
}
.about-help__header h2 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 0;
}
.help-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.help-card {
    /* glassmorphism — matches service-card variables */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:
        border-color 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
/* Top gradient accent line — inset shadow follows border-radius natively */
.help-card::before { display: none; }
.help-card:hover {
    border-color: var(--border-accent);
    box-shadow:
        inset 0 2px 0 0 var(--accent-from),
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(255, 10, 10, 0.08);
}
.help-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.help-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgba(255, 10, 10, 0.08);
    border: 1px solid rgba(255, 10, 10, 0.14);
    color: var(--accent-from);
    flex-shrink: 0;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.help-card:hover .help-card__icon {
    background: rgba(255, 10, 10, 0.14);
    border-color: rgba(255, 10, 10, 0.28);
}
.help-card__num {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.help-card__title {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}
.help-card__text {
    font-size: clamp(0.82rem, 1.2vw, 0.9rem);
    color: var(--text-sub);
    line-height: 1.75;
    margin: 0;
}

/* ── Core Values ──────────────────────────────────────────── */
.about-values__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 3.5rem;
}
.about-values__header h2 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 0;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.value-item {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: background 0.35s var(--ease);
}
/* Remove right border on even items, bottom border on last two */
.value-item:nth-child(2n) {
    border-right: none;
}
.value-item:nth-last-child(-n+2) {
    border-bottom: none;
}
.value-item:hover {
    background: var(--bg-card);
}
.value-item__line {
    width: 28px;
    height: 2px;
    background: var(--gradient);
    border-radius: 2px;
    margin-bottom: 1.25rem;
}
.value-item__title {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 0.65rem;
    line-height: 1.2;
}
.value-item__text {
    font-size: clamp(0.82rem, 1.2vw, 0.88rem);
    color: var(--text-sub);
    line-height: 1.75;
    margin: 0;
}

/* ── About page responsive ────────────────────────────────── */
@media (max-width: 1024px) {
    .help-cards-grid        { grid-template-columns: repeat(2, 1fr); }
    .about-story__left      { position: static; }
    .about-story__grid      { gap: 3rem; }
}
@media (max-width: 768px) {
    .about-hero             { min-height: auto; padding-top: 6rem; }
    .about-hero__title      { font-size: clamp(2.2rem, 10vw, 3.5rem); }
    .about-hero__subtitle   { font-size: 0.9rem; max-width: 100%; }
    .about-hero__inner      { align-items: center; text-align: center; width: 100%; }
    .about-help__header     { align-items: center; text-align: center; }
    .about-story__grid      { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-story__heading   { font-size: clamp(1.8rem, 8vw, 2.5rem); }
    .about-story__right     { overflow-wrap: break-word; word-break: break-word; }
    .about-story__stats     { grid-template-columns: 1fr 1fr; }
    .help-cards-grid        { grid-template-columns: 1fr; gap: 1rem; }
    .values-grid            { grid-template-columns: 1fr; }
    .value-item             { border-right: none; }
    .value-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
    .value-item:last-child  { border-bottom: none; }
    .team-grid              { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-team__header     { align-items: center; text-align: center; }
    .about-values__header   { text-align: center; }
    .contact-inner          { text-align: center; }
    .btn                    { white-space: normal; text-align: center; max-width: 100%; }
    .team-card__image       { aspect-ratio: 2 / 3; }
    .team-card__image img   { object-position: center 10%; }
}
@media (max-width: 480px) {
    .about-story__stats     { grid-template-columns: 1fr 1fr; }
    .help-card              { padding: 1.25rem; }
}

/* ── Team section ─────────────────────────────────────────── */
.about-team__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 4rem;
}
.about-team__header h2 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 0;
}
.team-grid {
    display: grid;
    gap: 2.5rem;
}
.team-grid--founders {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    margin-bottom: 3rem;
}
.team-grid--staff {
    grid-template-columns: 1fr;
    gap: 1rem;
}
.team-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.team-card__image {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    isolation: isolate;
    transition: border-color 0.4s var(--ease);
}
.team-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    filter: none;
    transition: transform 0.6s var(--ease);
    transform: scale(1.0);
}
.team-card:hover .team-card__image {
    border-color: rgba(255, 10, 10, 0.28);
}
.team-card:hover .team-card__image img {
    filter: none;
    transform: scale(1.07);
}
/* Soft bottom vignette */
.team-card__image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(to top, rgba(6, 6, 8, 0.55) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.team-card__image-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    background: rgba(6,6,8,0.72);
    border: 1px solid var(--border);
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
    backdrop-filter: blur(8px);
}
.team-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.team-card__name {
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
    line-height: 1.15;
}
.team-card__role {
    font-size: clamp(0.82rem, 1.2vw, 0.9rem);
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.team-card__bio {
    font-size: clamp(0.84rem, 1.3vw, 0.92rem);
    color: var(--text-sub);
    line-height: 1.78;
    margin: 0;
}
/* ── Staff cards (no photo) ─────────────────────────────── */
.team-staff-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.5rem 2rem;
    overflow: hidden;
    transition: border-color 0.4s var(--ease);
}
.team-staff-card:hover {
    border-color: rgba(255, 10, 10, 0.22);
}
.team-staff-card__avatar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,10,10,0.12) 0%, rgba(250,101,38,0.08) 100%);
    border: 1px solid rgba(255,10,10,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-from);
    flex-shrink: 0;
}
.team-staff-card__tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-from);
    margin-bottom: 0.2rem;
}
.team-staff-card__name {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 0.18rem;
    line-height: 1.2;
}
.team-staff-card__role {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-to);
    margin: 0 0 0.35rem;
    opacity: 0.9;
}
.team-staff-card__text {
    font-size: clamp(0.82rem, 1.2vw, 0.88rem);
    color: var(--text-sub);
    line-height: 1.75;
    margin: 0;
}
.team-staff-card__line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-from), var(--accent-to));
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.team-staff-card:hover .team-staff-card__line { opacity: 1; }
/* Subtle corner glow */
.team-staff-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,10,10,0.06) 0%, transparent 70%);
    pointer-events: none;
}
@media (max-width: 900px) {
    .team-grid--founders { gap: 2.5rem; }
    .team-staff-card     { padding: 1.25rem 1.5rem; gap: 1.25rem; }
}
@media (max-width: 768px) {
    .team-grid--founders { grid-template-columns: 1fr; gap: 3rem; }
    .team-card__image    { aspect-ratio: 2 / 3; }
}



/* ============================================================
   I. PAGE HOSTING
   ============================================================ */

/* -- Design token: hosting blue ----------------------------- */
:root {
    --hosting-blue:        rgb(26, 103, 171);
    --hosting-blue-light:  rgba(26, 103, 171, 0.18);
    --hosting-blue-glow:   rgba(26, 103, 171, 0.32);
    --hosting-blue-border: rgba(26, 103, 171, 0.42);
}

/* -- Blue CTA button (hosting only) ------------------------- */
.hosting-btn-blue {
    background: var(--hosting-blue);
    color: #fff;
    box-shadow: 0 4px 22px var(--hosting-blue-glow);
    width: 100%;
    justify-content: center;
    margin-top: auto;
}
.hosting-btn-blue:hover {
    background: rgb(34, 122, 200);
    box-shadow: 0 10px 36px var(--hosting-blue-glow), 0 2px 14px rgba(26, 103, 171, 0.2);
    filter: brightness(1.06);
}

/* ------------------------------------------------------------ */
/*  HERO                                                        */
/* ------------------------------------------------------------ */
.hosting-hero {
    position: relative;
    padding-top: clamp(8rem, 16vw, 13rem);
    padding-bottom: clamp(5rem, 10vw, 9rem);
    overflow: hidden;
}
.hosting-hero__inner {
    max-width: 820px;
}
.hosting-hero__title {
    font-size: clamp(3rem, 8vw, 7rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
    margin: 0 0 1.6rem;
}
.hosting-hero__sub {
    font-size: clamp(0.95rem, 1.6vw, 1.08rem);
    color: var(--text-sub);
    max-width: 560px;
    margin-bottom: 2.4rem;
}

/* Ambient blue orb */
.hosting-hero__orb {
    position: absolute;
    top: -10%;
    right: 0;
    width: clamp(300px, 55vw, 680px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,103,171,0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------------------------------------------------ */
/*  FEATURES GRID                                               */
/* ------------------------------------------------------------ */
.hosting-features__header {
    max-width: 640px;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.hosting-features__header h2 {
    margin: 0.5rem 0 1rem;
}
.hosting-features__sub {
    color: var(--text-sub);
    font-size: clamp(0.9rem, 1.4vw, 1rem);
}

.hosting-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Feature card */
.hosting-feat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(1.8rem, 3vw, 2.6rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hosting-feat-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--hosting-blue-border);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(26, 103, 171, 0.09);
}

/* Featured variant */
.hosting-feat-card--featured {
    border-color: var(--hosting-blue-border);
    background: rgba(26, 103, 171, 0.05);
}
.hosting-feat-card--featured:hover {
    background: rgba(26, 103, 171, 0.09);
}

/* Badge */
.hosting-feat-card__badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hosting-blue);
    background: var(--hosting-blue-light);
    border: 1px solid var(--hosting-blue-border);
    border-radius: var(--r-pill);
    padding: 0.22rem 0.7rem;
}

/* Icon */
.hosting-feat-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: var(--hosting-blue-light);
    border: 1px solid var(--hosting-blue-border);
    color: var(--hosting-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Blue neon glow */
    box-shadow: 0 0 18px rgba(26, 103, 171, 0.28), inset 0 0 8px rgba(26, 103, 171, 0.12);
    animation: hostingGlow 3s ease-in-out infinite;
}
@keyframes hostingGlow {
    0%, 100% { box-shadow: 0 0 18px rgba(26,103,171,0.28), inset 0 0 8px rgba(26,103,171,0.12); }
    50%       { box-shadow: 0 0 32px rgba(26,103,171,0.52), inset 0 0 12px rgba(26,103,171,0.22); }
}

.hosting-feat-card__title {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
}
.hosting-feat-card__text {
    font-size: clamp(0.85rem, 1.3vw, 0.94rem);
    color: var(--text-sub);
    line-height: 1.72;
    margin: 0;
    flex-grow: 1;
}
.hosting-feat-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--text-sub);
}
.hosting-feat-card__list li::before {
    content: '�';
    color: var(--hosting-blue);
    margin-right: 0.5rem;
    font-weight: 700;
}

/* ------------------------------------------------------------ */
/*  PRICING CARDS                                               */
/* ------------------------------------------------------------ */
.hosting-pricing__header {
    max-width: 580px;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.hosting-pricing__header h2 {
    margin: 0.5rem 0 1rem;
}
.hosting-pricing__sub {
    color: var(--text-sub);
    font-size: clamp(0.9rem, 1.4vw, 1rem);
}

.hosting-pricing__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(1rem, 1.8vw, 1.5rem);
    align-items: start;
    padding-top: 1.2rem; /* space for featured card badge overflow */
}
/* Row 1: 3 cards × 2 cols each = 6 */
.hosting-pricing__grid .hosting-price-card:nth-child(-n+3) { grid-column: span 2; }
/* Row 2: 2 cards × 3 cols each = 6, centered */
.hosting-pricing__grid .hosting-price-card:nth-child(4) { grid-column: 2 / span 2; }
.hosting-pricing__grid .hosting-price-card:nth-child(5) { grid-column: 4 / span 2; }

/* Pricing card */
.hosting-price-card {
    background: var(--bg-card);
    border: 1px solid var(--hosting-blue-border);
    border-radius: var(--r-lg);
    padding: clamp(1.8rem, 3vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hosting-price-card:hover {
    background: rgba(26, 103, 171, 0.06);
    border-color: var(--hosting-blue);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(26, 103, 171, 0.14);
}

/* Featured pricing card */
.hosting-price-card--featured {
    border-color: var(--hosting-blue);
    background: rgba(26, 103, 171, 0.07);
    box-shadow: 0 0 40px rgba(26, 103, 171, 0.12);
}
.hosting-price-card--featured:hover {
    background: rgba(26, 103, 171, 0.12);
}

.hosting-price-card__badge {
    position: absolute;
    top: -0.65rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background: var(--hosting-blue);
    border-radius: var(--r-pill);
    padding: 0.28rem 1rem;
    white-space: nowrap;
}

.hosting-price-card__tier {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hosting-blue);
}
.hosting-price-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1;
}
.hosting-price-card__amount {
    font-family: var(--font-sans);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    color: var(--text);
}
.hosting-price-card__period {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.hosting-price-card__desc {
    font-size: 0.88rem;
    color: var(--text-sub);
    line-height: 1.65;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.hosting-price-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.84rem;
    color: var(--text-sub);
    flex-grow: 1;
}
.hosting-price-card__feature--dim {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(237,233,226,0.15);
}

/* Check / dash markers */
.hosting-check,
.hosting-dash {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 0.55rem;
    vertical-align: middle;
    flex-shrink: 0;
}
.hosting-check {
    background: var(--hosting-blue-light);
    border: 1px solid var(--hosting-blue-border);
    position: relative;
}
.hosting-check::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 6px;
    height: 4px;
    border-left: 1.5px solid var(--hosting-blue);
    border-bottom: 1.5px solid var(--hosting-blue);
    transform: rotate(-45deg) translateY(-1px);
}
.hosting-dash {
    background: rgba(237,233,226,0.06);
    border: 1px solid var(--border);
    position: relative;
}
.hosting-dash::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 6px;
    height: 1.5px;
    background: var(--text-muted);
}

/* ------------------------------------------------------------ */
/*  TRUST SECTION                                               */
/* ------------------------------------------------------------ */
.hosting-trust__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 8vw, 7rem);
    align-items: center;
}
.hosting-trust__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}
.hosting-trust__copy h2 {
    margin: 0.25rem 0 0;
}
.hosting-trust__brand {
    color: var(--hosting-blue);
}
.hosting-trust__copy p {
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    line-height: 1.78;
}
.hosting-trust__copy strong {
    color: var(--text);
    font-weight: 600;
}

.hosting-trust__metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.hosting-trust__metric {
    background: var(--bg-card);
    border: 1px solid var(--hosting-blue-border);
    border-radius: var(--r-lg);
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hosting-trust__metric:hover {
    background: rgba(26, 103, 171, 0.06);
    border-color: var(--hosting-blue);
}
.hosting-trust__metric-val {
    font-family: var(--font-sans);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text);
    line-height: 1;
}
.hosting-trust__metric-val span {
    font-size: 0.6em;
    color: var(--hosting-blue);
    letter-spacing: 0;
    margin-left: 0.1em;
}
.hosting-trust__metric-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ------------------------------------------------------------ */
/*  RESPONSIVE                                                  */
/* ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .hosting-features__grid  { grid-template-columns: repeat(2, 1fr); }
    /* Reset custom spans, use simple 2-col grid */
    .hosting-pricing__grid   { grid-template-columns: repeat(2, 1fr); }
    .hosting-pricing__grid .hosting-price-card:nth-child(-n+3) { grid-column: span 1; }
    .hosting-pricing__grid .hosting-price-card:nth-child(4)    { grid-column: span 1; }
    .hosting-pricing__grid .hosting-price-card:nth-child(5)    { grid-column: span 1; }
    .hosting-trust__inner    { grid-template-columns: 1fr; }
    .hosting-trust__metrics  { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .hosting-hero__title     { font-size: clamp(2.6rem, 12vw, 4.5rem); }
    .hosting-features__grid  { grid-template-columns: 1fr; }
    .hosting-pricing__grid   { grid-template-columns: repeat(2, 1fr); }
    .hosting-trust__metrics  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .hosting-pricing__grid   { grid-template-columns: 1fr; }
    .hosting-trust__metrics  { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .hosting-trust__metric   { padding: 1.2rem; }
}
/* ============================================================
   J. PAGE CONTACT
   ============================================================ */

/* -- Hero ------------------------------------------------- */
.contact-page-hero {
    padding-top: clamp(8rem, 16vw, 13rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}
.contact-page-hero__inner {
    max-width: 700px;
}
.contact-page-hero__title {
    font-size: clamp(3.2rem, 9vw, 7.5rem);
    letter-spacing: -0.045em;
    line-height: 1.0;
    margin: 0.4rem 0 1.4rem;
}
.contact-page-hero__sub {
    font-size: clamp(0.95rem, 1.6vw, 1.08rem);
    color: var(--text-sub);
    max-width: 480px;
    margin: 0;
}

/* -- 2-col grid ------------------------------------------- */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: clamp(3rem, 8vw, 7rem);
    align-items: start;
}

/* -- Left: Details ---------------------------------------- */
.contact-page-details {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    padding-top: 0.25rem;
}

.contact-detail-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.contact-detail-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.contact-detail-value {
    font-size: clamp(0.95rem, 1.5vw, 1.08rem);
    color: var(--text);
    font-style: normal;
    text-decoration: none;
    line-height: 1.6;
    transition: color var(--dur) var(--ease);
}
a.contact-detail-value:hover {
    color: var(--accent-from);
}

.contact-socials {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.contact-socials a {
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    color: var(--text-sub);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
.contact-socials a:hover { color: var(--text); }

/* Availability badge */
.contact-availability {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1.1rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--r-pill);
    width: fit-content;
}
.contact-availability__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;
    animation: dotBlink 2.4s ease-in-out infinite;
}
.contact-availability__text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(34, 197, 94, 0.9);
}

/* -- Right: Form card ------------------------------------- */
.contact-page-form-wrap {
    position: relative;
    isolation: isolate;
}

/* Atmospheric red/orange glow behind the card */
.contact-page-glow {
    position: absolute;
    inset: -15% 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%,
            rgba(255, 10, 10, 0.08) 0%,
            rgba(250, 101, 38, 0.04) 50%,
            transparent 75%);
    pointer-events: none;
    border-radius: 50%;
}

/* Override contact-form-wrap for the dedicated page:
   remove the max-width centering it inherits via .contact-inner */
.contact-page-form-wrap .contact-form-wrap {
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
    padding: clamp(2rem, 4vw, 3rem);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.04) inset,
        0 24px 64px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* -- Responsive ------------------------------------------- */
@media (max-width: 900px) {
    .contact-page-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
    .contact-page-details {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
    }
    .contact-detail-group {
        min-width: 180px;
        flex: 1;
    }
    .contact-availability {
        width: 100%;
    }
}
@media (max-width: 600px) {
    .contact-page-hero__title { font-size: clamp(2.8rem, 14vw, 4.5rem); }
    .contact-page-details {
        flex-direction: column;
        gap: 2rem;
    }
}
/* ============================================================
   K. SINGLE CASE STUDY — High-Tech Aggressive v2
   ============================================================ */

/* Hide footer CTA on single case study pages */
body.single-case-study .footer-cta { display: none !important; }

/* ── LABEL CHIP ─────────────────────────────────────────── */
.cs-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border-accent);
    border-radius: var(--r-pill);
    background: rgba(255,10,10,0.04);
}

/* ── HERO ───────────────────────────────────────────────── */
.cs-hero {
    background: var(--bg);
    overflow: hidden;
}

.cs-hero__badge-bar {
    padding-block: 1.4rem;
    border-bottom: 1px solid var(--border);
}

.cs-ht-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cs-ht-badge__line {
    display: inline-block;
    width: 2.5rem;
    height: 1px;
    background: var(--gradient);
    flex-shrink: 0;
}

.cs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    transition: color var(--dur) var(--ease);
}
.cs-back-link:hover { color: var(--text); }
.cs-back-link svg { transition: transform var(--dur) var(--ease); }
.cs-back-link:hover svg { transform: translateX(-3px); }

.cs-hero__content {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.cs-hero__title {
    font-family: var(--font-sans);
    font-size: clamp(2.2rem, 5.5vw, 4.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.045em;
    color: var(--text);
    margin-bottom: 1.5rem;
    max-width: 20ch;
}

.cs-hero__tagline {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 400;
    color: var(--text-sub);
    margin-bottom: 2.5rem;
    max-width: 55ch;
    line-height: 1.6;
}

.cs-scroll-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--dur) var(--ease);
}
.cs-scroll-cta:hover { color: var(--text); }

.cs-scroll-cta__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cs-scroll-cta:hover .cs-scroll-cta__arrow {
    border-color: var(--border-accent);
    background: rgba(255,10,10,0.06);
}

/* Featured image container */
.cs-hero__visual {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.cs-hero__visual-inner {
    position: relative;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-bottom: none;
    aspect-ratio: 16 / 9;
    max-height: 62vh;
}
.cs-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 8s ease-out;
}
.cs-hero__visual:hover .cs-hero__img { transform: scale(1.0); }
.cs-hero__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg) 0%, rgba(6,6,8,0.15) 60%, transparent 100%);
    pointer-events: none;
}

/* Meta pills bar */
.cs-hero__meta-bar {
    background: var(--bg-raised);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-block: 1.2rem;
}
.cs-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: center;
    justify-content: center;
}
.cs-pill {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.cs-pill__label {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cs-pill__val {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.cs-pill--link { text-decoration: none; transition: opacity var(--dur) var(--ease); }
.cs-pill--link:hover { opacity: 0.65; }
.cs-pill--link .cs-pill__val { color: var(--accent-from); }

/* ── CHALLENGE / PROVOCAREA ─────────────────────────────── */
.cs-challenge {
    background: var(--bg);
    padding-block: clamp(5rem, 10vw, 9rem);
    border-top: 1px solid var(--border);
}
.cs-challenge__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
}
.cs-challenge__left {
    position: sticky;
    top: 8rem;
}
.cs-shield-icon { margin-bottom: 1.5rem; }
.cs-challenge__heading {
    font-family: var(--font-sans);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 2rem;
}
.cs-challenge__heading-em {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.82em;
    letter-spacing: -0.01em;
    color: var(--text-sub);
    font-style: italic;
    text-transform: none;
    line-height: 1.2;
}
.cs-challenge__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.cs-raw-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    padding: 0.38rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
}
.cs-raw-badge--filled {
    background: rgba(255,10,10,0.1);
    border-color: rgba(255,10,10,0.3);
    color: #ff5555;
}
.cs-challenge__right {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.cs-challenge__body {
    color: var(--text-sub);
    font-size: clamp(0.9rem, 1.5vw, 1.02rem);
    line-height: 1.8;
}
.cs-challenge__body p:first-child {
    font-size: clamp(1.05rem, 1.8vw, 1.28rem);
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.cs-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-from);
    text-decoration: none;
    transition: gap var(--dur) var(--ease), opacity var(--dur) var(--ease);
    align-self: flex-start;
}
.cs-text-link:hover { gap: 1.1rem; opacity: 0.75; }
.cs-challenge__media {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.cs-challenge__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── TECH STACK / PROCESUL ──────────────────────────────── */
.cs-tech {
    background: var(--bg-raised);
    padding-block: clamp(5rem, 10vw, 9rem);
    border-top: 1px solid var(--border);
}
.cs-tech__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
}
.cs-tech__card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: clamp(1.6rem, 2.5vw, 2.25rem);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cs-tech__card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}
.cs-tech__card--main {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.cs-tech__terminal {
    font-family: 'Courier New', monospace;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent-from);
    line-height: 1;
    letter-spacing: -0.02em;
}
.cs-tech__sublabel,
.cs-tech__card-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-from);
}
.cs-tech__card-label { margin-bottom: 1rem; }
.cs-tech__main-title {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--text);
    margin-top: auto;
}
.cs-tech__main-body {
    color: var(--text-sub);
    font-size: 0.88rem;
    line-height: 1.75;
    flex: 1;
}
.cs-tech__main-body p { margin: 0 0 0.7em 0; }
.cs-tech__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
}
.cs-tech__status-val { color: #22c55e; }
.cs-tech__gear { color: var(--text-muted); flex-shrink: 0; }
.cs-tech__card--stack { display: flex; flex-direction: column; }
.cs-tech__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.cs-tech__list-item {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    transition: color var(--dur) var(--ease);
}
.cs-tech__list-item:first-child { border-top: 1px solid var(--border); }
.cs-tech__list-item:hover { color: var(--accent-from); }
.cs-tech__card--meta {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.cs-tech__meta-row { display: flex; flex-direction: column; gap: 0.25rem; }
.cs-tech__meta-val {
    font-family: var(--font-sans);
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.0;
}
.cs-tech__meta-val--accent { color: var(--accent-from); }
.cs-tech__meta-img {
    margin: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    flex: 1;
    min-height: 80px;
}
.cs-tech__meta-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-tech__attribution {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: auto;
}

/* ── DATE CONCRETE / STATS ──────────────────────────────── */
.cs-data-section {
    background: var(--bg);
    padding-block: clamp(5rem, 10vw, 9rem);
    border-top: 1px solid var(--border);
}
.cs-data__layout {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
}
.cs-data__title {
    font-family: var(--font-sans);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 1.25rem;
}
.cs-data__sub {
    color: var(--text-sub);
    font-size: 0.88rem;
    line-height: 1.75;
    max-width: 30ch;
}
.cs-data__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.cs-data__card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: clamp(1.4rem, 2.2vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cs-data__card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}
.cs-data__card:hover {
    border-color: var(--border-hover);
    transform: translateY(-3px);
}
.cs-data__card:hover::after { opacity: 1; }
.cs-data__num {
    font-family: var(--font-sans);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.0;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cs-data__label {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
}
.cs-data__sublabel {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── GALLERY ────────────────────────────────────────────── */
.cs-gallery-section {
    background: var(--bg-raised);
    padding-block: clamp(5rem, 10vw, 9rem);
    border-top: 1px solid var(--border);
}
.cs-gallery-header {
    margin-bottom: 3rem;
}
.cs-gallery-header .cs-label { margin-bottom: 0.75rem; }
.cs-gallery-header h2 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--text);
}
.cs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.cs-gallery-item {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
    aspect-ratio: 16 / 9;
}
.cs-gallery-item:first-child { grid-column: 1 / -1; }
.cs-gallery-item:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
}
.cs-gallery-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}
.cs-gallery-item:hover .cs-gallery-img { transform: scale(1.02); }

/* ── TESTIMONIAL — WHITE CONTRAST ───────────────────────── */
.cs-testimonial-section {
    background: #f0ede8;
    padding-block: clamp(5rem, 10vw, 9rem);
    color: #0a0a0d;
}
.cs-testimonial { max-width: 960px; margin: 0 auto; }
.cs-testimonial__quote {
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 3.8vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    font-style: italic;
    color: #0a0a0d;
    margin: 0 0 3rem 0;
}
.cs-testimonial__footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cs-testimonial__line {
    display: block;
    width: 2.8rem;
    height: 2px;
    background: var(--gradient);
    flex-shrink: 0;
}
.cs-testimonial__author {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.cs-testimonial__name {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #0a0a0d;
}
.cs-testimonial__role {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10,10,13,0.45);
}
.cs-testimonial__cert {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(10,10,13,0.35);
    margin-left: auto;
}

/* ── CTA ────────────────────────────────────────────────── */
.cs-cta-section {
    background: var(--bg);
    padding-block: clamp(5rem, 10vw, 9rem);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
}
.cs-cta__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 440px;
    background: radial-gradient(ellipse at center, rgba(255,10,10,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.cs-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}
.cs-cta__inner h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    letter-spacing: -0.04em;
    max-width: 14ch;
    line-height: 1.1;
}
.cs-cta__desc {
    color: var(--text-sub);
    max-width: 44ch;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ── NAV ────────────────────────────────────────────────── */
.cs-nav-section {
    background: var(--bg-raised);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--border);
}
.cs-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
}
.cs-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-sub);
    padding: 1rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: all var(--dur) var(--ease);
}
.cs-nav__link:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--bg-card);
}
.cs-nav__link--next { justify-content: flex-end; text-align: right; }
.cs-nav__text { display: flex; flex-direction: column; gap: 0.2rem; }
.cs-nav__label {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cs-nav__title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: inherit;
}
.cs-nav__all {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color var(--dur) var(--ease);
}
.cs-nav__all:hover { color: var(--text); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .cs-challenge__grid,
    .cs-data__layout { grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
    .cs-challenge__left { position: static; }
    .cs-tech__grid { grid-template-columns: 1fr; }
    .cs-tech__card--main { grid-row: auto; }
    .cs-data__sub { max-width: none; }
}
@media (max-width: 640px) {
    .cs-hero__title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
    .cs-hero__visual { padding-inline: 0.75rem; }
    .cs-hero__visual-inner { aspect-ratio: 4 / 3; }
    .cs-gallery-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .cs-gallery-item { aspect-ratio: 4 / 3; }
    .cs-gallery-item:first-child { grid-column: auto; aspect-ratio: 16 / 9; }
    .cs-data__grid { grid-template-columns: 1fr; }
    .cs-nav__inner { grid-template-columns: 1fr; gap: 0.75rem; }
    .cs-nav__all { display: none; }
    .cs-testimonial__cert { margin-left: 0; }
}

/* ============================================================
   L. HALO GRADIENT — HERO CANVAS
   ============================================================ */

/*
 * .hero gains an isolated stacking context so z-index: -1 on
 * the canvas stays contained within the hero — never bleeds
 * behind the body background.
 */
.hero {
    isolation: isolate;
    background: #000;  /* pure black so bottom mask-fade blends seamlessly */
}

/*
 * Suppress the warm-orange pseudo-element glow — the WebGL
 * halo handles all atmosphere. (Override lives in Section 8.)
 */
.hero::after { background: none; }

#gradient-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;

    /* Fade bottom edge smoothly into the page's black background */
    -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 92%);
    mask-image:         linear-gradient(to bottom, black 45%, transparent 92%);
}

/* Respect prefers-reduced-motion — fall back to plain dark bg */
@media (prefers-reduced-motion: reduce) {
    #gradient-canvas { display: none; }
}

/* Mobile — subtle opacity reduction; k is handled in JS */
@media (max-width: 767px) {
    #gradient-canvas { opacity: 0.55; }
}

/* ============================================================
   N1. HOMEPAGE PORTFOLIO PREVIEW
   ============================================================ */

/* -- Header row ------------------------------------------ */
.hp-portfolio__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
}
.hp-portfolio__header-left { flex: 1 1 auto; }
.hp-portfolio__header-left h2 { margin-block: 0.5rem 0; }
.hp-portfolio__header-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.hp-portfolio__header-cta .btn-icon { font-size: 1.25rem; line-height: 1; }

/* -- Grid layout ----------------------------------------- */
.hp-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
}

/* First card spans both columns */
.hp-pf-card--large {
    grid-column: 1 / -1;
}

/* -- Card base ------------------------------------------- */
.hp-pf-card {
    background: var(--bg-raised);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, transform 0.3s;
}
.hp-pf-card:hover {
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-4px);
}

/* -- Image wrapper --------------------------------------- */
.hp-pf-card__image-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    background: #111;
}
.hp-pf-card--large .hp-pf-card__image-wrap {
    aspect-ratio: 16 / 5;
}
.hp-pf-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.hp-pf-card:hover .hp-pf-card__img {
    transform: scale(1.04);
}
.hp-pf-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,10,10,0.7) 0%, rgba(250,101,38,0.7) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.hp-pf-card:hover .hp-pf-card__overlay { opacity: 1; }
.hp-pf-card__overlay-label {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* -- Body ------------------------------------------------ */
.hp-pf-card__body {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* -- Meta row -------------------------------------------- */
.hp-pf-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hp-pf-card__category,
.hp-pf-card__tag {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.hp-pf-card__category { color: var(--accent-to); }
.hp-pf-card__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
}

/* -- Title ----------------------------------------------- */
.hp-pf-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}
.hp-pf-card--large .hp-pf-card__title { font-size: 1.35rem; }
.hp-pf-card__title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s;
}
.hp-pf-card__title a:hover { color: var(--accent-to); }

/* -- Footer row ------------------------------------------ */
.hp-pf-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
}
.hp-pf-card__metric {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.hp-pf-card__metric-val {
    font-size: 1.25rem;
    font-weight: 800;
    background: linear-gradient(115deg, #FF0A0A 0%, #FA6526 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.hp-pf-card__metric-lbl {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hp-pf-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-muted);
    transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.hp-pf-card__link:hover {
    border-color: var(--accent-to);
    color: var(--accent-to);
    background: rgba(250,101,38,0.08);
}

/* -- Responsive ------------------------------------------ */
@media (max-width: 768px) {
    .hp-portfolio__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .hp-portfolio__grid {
        grid-template-columns: 1fr;
    }
    .hp-pf-card--large .hp-pf-card__image-wrap {
        aspect-ratio: 16 / 9;
    }
    .hp-pf-card--large .hp-pf-card__title { font-size: 1.15rem; }
}

/* ============================================================
   N. DISCOVERY CALL — HOMEPAGE CTA
   ============================================================ */
.discovery {
    background: var(--bg);
    text-align: center;
}

.discovery-inner {
    max-width: 840px;
    margin-inline: auto;
}
.discovery-inner h2 { margin-block: 0.5rem 1rem; }
.discovery-inner > p {
    margin-bottom: 3rem;
    color: var(--text-sub);
    max-width: 540px;
    margin-inline: auto;
}

/* Glass card wrapping the Amelia widget */
.discovery-card {
    background: var(--bg-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    isolation: isolate;
    text-align: left;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.04) inset,
        0 24px 64px rgba(0, 0, 0, 0.45);
}

/* ── Amelia: tap-highlight, outline reset + scroll containment ──
 * Prevents double-border tap glitch on iOS/Android.
 * overscroll-behavior: contain stops page scroll when user scrolls
 * inside the calendar widget.
 * ─────────────────────────────────────────────────────────────── */
.amelia-v2-booking *,
.am-body * {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.amelia-v2-booking,
.am-body {
    overscroll-behavior: contain;
}
/* Target Amelia's internal scrollable step/calendar containers so scroll
   stays inside the widget and does not propagate to the page. */
.amelia-v2-booking .am-step-container,
.amelia-v2-booking .am-calendar,
.amelia-v2-booking [class*='am-scroll'],
.amelia-v2-booking [class*='am-step'],
.am-body .am-step-container,
.am-body .am-calendar {
    overscroll-behavior: contain;
    -ms-scroll-chaining: none;
}
/* Allow natural touch-pan inside the widget on mobile */
.amelia-v2-booking,
.amelia-v2-booking * {
    touch-action: pan-y;
}

/* ============================================================
   O. CONTACT PAGE — AMELIA CARD + SECONDARY CF7
   ============================================================ */

/* Amelia booking glass card — right column of .contact-page-grid.
   overflow: visible so Amelia's internal calendar is never clipped.
   Glow is delivered via box-shadow (avoids isolation+backdrop conflicts). */
.contact-amelia-wrap {
    position: relative;
    width: 100%;
    overflow: visible;
    background: var(--bg-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(2rem, 4vw, 3rem);
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.04) inset,
        0 24px 64px rgba(0, 0, 0, 0.4),
        0 0 80px rgba(155, 0, 0, 0.18),
        0 0 140px rgba(250, 101, 38, 0.07);
}

.contact-booking-title {
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 1.75rem;
    color: var(--text);
}

/* Secondary CF7 section — intentionally subdued */
.contact-page-cf7 {
    background: var(--bg-raised);
    padding-bottom: var(--section-py);
}

.contact-page-cf7__inner {
    max-width: 620px;
}

.contact-page-cf7__title {
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-block: 0.5rem 2rem;
    color: var(--text-sub);
}

/* More subdued card than the primary form */
.contact-form-wrap.cf7-secondary {
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

@media (max-width: 768px) {
    .contact-booking-title,
    .contact-page-cf7__title { font-size: 1.35rem; }

    /* Give the calendar room to breathe on small screens */
    .contact-amelia-wrap,
    .discovery-card {
        padding: 1.5rem 1rem;
        overflow: visible;
    }
}

/* ============================================================
   P. UNIVERSAL ANIMATION ENGINE — v3
      P1 — Text Reveal  (.reveal-text → .line-mask > .line-inner)
      P2 — Entry Reveal (.reveal-entry — luxury fade + scale)
      P3 — Parallax     (.parallax-el + [data-parallax-speed])
      P4 — Lenis reset
   ============================================================ */

/* ── P1: Text Reveal ──────────────────────────────────────── */

/*
 * .reveal-text never clips itself — each visual line gets its own
 * .line-mask (overflow:hidden) injected by animations.js.
 */
.reveal-text {
    overflow: visible;
}

.line-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;  /* prevent descenders (g, y, p) clipping */
    line-height: inherit;
}

.line-inner {
    display: block;
    will-change: transform, opacity;
    line-height: inherit;
}

/* Legacy word-level masks (backward compat) */
.word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: inherit;
}

.word-inner {
    display: inline-block;
    will-change: transform, opacity;
}

/* Screen-reader visually-hidden copy */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── P2: Entry Reveal ─────────────────────────────────────── */

/*
 * .reveal-entry — luxury entrance: opacity 0→1, y 24→0, scale 0.96→1.
 * GSAP sets initial state in JS; CSS only declares perf hints.
 * overflow:visible is critical — scale animations must NOT be clipped.
 * Use on: cards, buttons, images, booking forms, any block element.
 */
.reveal-entry {
    will-change: opacity, transform;
    overflow: visible;  /* never clip the scale transform */
}

/* ── P3: Parallax ─────────────────────────────────────────── */

/*
 * .parallax-el — add to any element for a gentle float on scroll.
 * Default speed = 0.08 (set in JS). Override with data-parallax-speed.
 *
 * [data-parallax-speed] — explicit speed, also works standalone
 * without the class, for backward compatibility.
 */
.parallax-el,
[data-parallax-speed] {
    will-change: transform;
}

/* ── P4: Lenis reset ──────────────────────────────────────── */

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;  /* Lenis owns momentum, not CSS */
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* ── Reduced-motion: instant reveal, no motion ───────────── */
@media (prefers-reduced-motion: reduce) {
    .line-inner,
    .word-inner {
        transform: none !important;
        opacity: 1 !important;
    }

    .reveal-entry {
        opacity: 1 !important;
        transform: none !important;
    }

    .parallax-el,
    [data-parallax-speed] {
        will-change: auto;
        transform: none !important;
    }
}

/* ============================================================
   M. PORTFOLIO PAGINATION
   ============================================================ */

.pf-pagination {
    display: flex;
    justify-content: center;
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}

.pf-pagination__list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.625rem;
    height: 2.625rem;
    padding-inline: 0.75rem;
    border-radius: var(--r-button);
    border: 1px solid rgba(237, 233, 226, 0.1);
    background: var(--bg-card);
    color: var(--text-sub);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                transform var(--dur) var(--ease-spring);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pf-pagination__link:hover {
    background: rgba(255, 10, 10, 0.12);
    border-color: rgba(255, 10, 10, 0.4);
    color: var(--text);
    transform: translateY(-2px);
}

.pf-pagination__link--active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    pointer-events: none;
}

.pf-pagination__link--prev,
.pf-pagination__link--next {
    padding-inline: 0.625rem;
}

.pf-pagination__link--prev svg,
.pf-pagination__link--next svg {
    display: block;
}

/* -- Responsive ------------------------------------------- */
@media (max-width: 480px) {
    .pf-pagination__list {
        gap: 0.375rem;
    }

    .pf-pagination__link {
        min-width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8125rem;
    }
}

/* ============================================================
   LEGAL PAGES (T&C, Privacy, Cookies) — page-legal.php / page-termeni.php
   ============================================================ */

/* -- Hero ------------------------------------------------ */
.legal-hero { padding-bottom: 3rem; }
.legal-hero__inner { max-width: 860px; }
.legal-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.08;
    margin-block: 0.75rem 1.5rem;
    letter-spacing: -0.02em;
}
.legal-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    background: var(--bg-raised);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.legal-hero__meta strong { color: var(--text); font-weight: 600; }
.legal-hero__meta-sep {
    margin-inline: 0.75rem;
    opacity: 0.3;
    font-size: 1rem;
}

/* -- Layout ---------------------------------------------- */
.legal-body { padding-top: 0; }
.legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 5rem;
    align-items: start;
}

/* -- TOC sidebar ----------------------------------------- */
.legal-toc { position: sticky; top: 110px; }
.legal-toc__inner {
    background: var(--bg-raised);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
}
.legal-toc__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.legal-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    counter-reset: toc-counter;
}
.legal-toc__list li { counter-increment: toc-counter; }
.legal-toc__link {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.77rem;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.5;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.legal-toc__link::before {
    content: counter(toc-counter, decimal-leading-zero);
    font-size: 0.63rem;
    font-weight: 700;
    color: rgba(255,255,255,0.18);
    flex-shrink: 0;
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}
.legal-toc__link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}
.legal-toc__link.is-active {
    color: var(--accent-to);
    background: rgba(250,101,38,0.07);
    border-left-color: var(--accent-to);
}
.legal-toc__link.is-active::before { color: var(--accent-to); }

/* -- Main content wrapper -------------------------------- */
.legal-content {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.65);
}

/* Each H2 block becomes a card */
.legal-content h2 {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-raised);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid var(--accent-to);
    border-radius: 0 12px 12px 0;
    scroll-margin-top: 110px;
    letter-spacing: -0.01em;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h2::before {
    content: attr(id);
    display: none; /* IDs are used for anchors, not display */
}

/* Section number badge on h2 */
.legal-content h2 .legal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: linear-gradient(115deg, #FF0A0A 0%, #FA6526 100%);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0;
}

.legal-content h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    padding-left: 0.85rem;
    border-left: 2px solid rgba(250,101,38,0.4);
}

/* Paragraphs & lists */
.legal-content p {
    margin-bottom: 1rem;
    max-width: 72ch;
}
.legal-content ul,
.legal-content ol {
    padding-left: 0;
    margin-bottom: 1.25rem;
    list-style: none;
}
.legal-content ul li,
.legal-content ol li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.55rem;
}
.legal-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-to);
    opacity: 0.7;
}
.legal-content ol {
    counter-reset: legal-ol;
}
.legal-content ol li {
    counter-increment: legal-ol;
}
.legal-content ol li::before {
    content: counter(legal-ol) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-to);
    opacity: 0.8;
}

/* Tables */
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    border-radius: 12px;
    overflow: hidden;
}
.legal-content thead tr {
    background: linear-gradient(115deg, rgba(255,10,10,0.12) 0%, rgba(250,101,38,0.12) 100%);
}
.legal-content th {
    text-align: left;
    padding: 0.85rem 1.1rem;
    color: var(--text);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.legal-content td {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.65);
    vertical-align: top;
}
.legal-content tbody tr:last-child td { border-bottom: none; }
.legal-content tbody tr {
    background: var(--bg-raised);
    transition: background 0.15s;
}
.legal-content tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}
.legal-content td strong { color: var(--text); font-weight: 600; }

/* Links & inline */
.legal-content a {
    color: var(--accent-to);
    text-decoration: none;
    border-bottom: 1px solid rgba(250,101,38,0.3);
    transition: border-color 0.2s;
}
.legal-content a:hover { border-bottom-color: var(--accent-to); }
.legal-content strong { color: var(--text); font-weight: 600; }

/* Horizontal rule */
.legal-content hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-block: 2rem;
}

/* -- Legal nav footer ------------------------------------ */
.legal-nav-footer {
    margin-top: 4rem;
    padding: 2rem;
    background: var(--bg-raised);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
}
.legal-nav-footer__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-weight: 600;
}
.legal-nav-footer__links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.legal-nav-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.6rem 1.1rem;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.legal-nav-footer__link:hover {
    border-color: var(--accent-to);
    color: var(--accent-to);
    background: rgba(250,101,38,0.06);
}

/* -- Responsive ------------------------------------------ */
@media (max-width: 1024px) {
    .legal-layout { grid-template-columns: 200px 1fr; gap: 3rem; }
}
@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; gap: 2rem; }
    .legal-toc { position: static; }
    .legal-toc__inner { padding: 1.25rem; }
}
@media (max-width: 600px) {
    .legal-hero__meta { font-size: 0.78rem; padding: 0.4rem 1rem; }
    .legal-content h2 { font-size: 1rem; padding: 1rem 1.1rem; }
    .legal-nav-footer__links { flex-direction: column; }
    .legal-nav-footer { padding: 1.25rem; }
}

/* ============================================================
   Q. HOMEPAGE — BRUTALIST LUXURY / EDITORIAL
   Scoped to the front page; content and section order live in PHP.
   ============================================================ */
html.homepage-editorial-root { background: #0a0a0a; }

body.homepage-editorial {
    --bg: #0a0a0a;
    --bg-raised: #121212;
    --bg-card: #121212;
    --bg-card-hover: #161616;
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.22);
    --border-accent: rgba(237, 28, 36, 0.65);
    --accent-from: #ed1c24;
    --accent-to: #ed1c24;
    --gradient: linear-gradient(#ed1c24, #ed1c24);
    --text: #f2f2ef;
    --text-sub: #b9b9b6;
    --text-muted: #949491;
    --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-heading: 'Syne', system-ui, sans-serif;
    --font-serif: var(--font-heading);
    --section-py: clamp(5rem, 9vw, 9rem);
    --container-max: 1320px;
    --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
    --r-md: 14px;
    --r-lg: 18px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}

.homepage-editorial::before { display: none; }
.homepage-editorial::after { background: var(--bg); }
.homepage-editorial-root::before { display: none; }
.homepage-editorial .homepage-content { position: relative; }
.homepage-editorial .section { background: var(--bg); }
.homepage-editorial .section-divider {
    max-width: calc(var(--container-max) - 2 * var(--gutter));
    margin-inline: auto;
    background: var(--border);
}
.homepage-editorial :is(h1, h2, h3, h4) {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.045em;
    line-height: 1.05;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.homepage-editorial h2 { font-size: clamp(2rem, 4.5vw, 4.5rem); }
.homepage-editorial :is(h1, h2, h3, h4) .serif-italic,
.homepage-editorial .services-title .italic-line {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
}
.homepage-editorial .text-gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
}
.homepage-editorial .section-label {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: clamp(0.65rem, 0.8vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.6;
}
.homepage-editorial .section-label::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0.7rem;
    background: var(--accent-from);
    vertical-align: 0.05em;
}
.homepage-editorial :is(.btn, .btn-hero-secondary) {
    min-height: 52px;
    padding: 1rem 1.6rem;
    border-radius: var(--r-button);
    border: 1px solid var(--border-hover);
    font-family: var(--font-sans);
    font-size: clamp(0.68rem, 0.85vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.075em;
    box-shadow: none;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.homepage-editorial .btn-gradient {
    background: var(--accent-from);
    border-color: var(--accent-from);
    color: var(--text);
}
.homepage-editorial :is(.btn-outline, .btn-hero-secondary) {
    background: transparent;
    backdrop-filter: none;
    color: var(--text);
}
.homepage-editorial :is(.btn, .btn-hero-secondary):hover {
    border-color: var(--accent-from);
    background: var(--accent-from);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: none;
}
.homepage-editorial .btn-gradient:hover { filter: brightness(1.1); }
.homepage-editorial .btn-icon {
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.homepage-editorial :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 5px;
}
.homepage-editorial :is(.service-card, .portfolio-item):focus-within { border-color: var(--accent-from); }
.homepage-editorial :is(.hero, .about, .techstack, .services-editorial, .portfolio, .process, .testimonials, .faq, .pricing, .discovery) {
    scroll-margin-top: 110px;
}

/* Header and mobile navigation */
.homepage-editorial .site-header,
.homepage-editorial .site-header.scrolled {
    background: rgba(10, 10, 10, 0.94);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding-block: calc(1.15rem + env(safe-area-inset-top, 0px)) 1.15rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.homepage-editorial .header-nav { gap: clamp(1rem, 2vw, 2rem); }
.homepage-editorial .header-nav a {
    font-size: clamp(0.66rem, 0.8vw, 0.78rem);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-sub);
}
.homepage-editorial .header-nav a:hover { color: var(--accent-from); }
.homepage-editorial .header-actions .btn { min-height: 42px; padding: 0.7rem 1.3rem; }
.homepage-editorial .mobile-nav { background: var(--bg); }
.homepage-editorial .mobile-nav a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}
.homepage-editorial .mobile-nav a.btn { font-family: var(--font-sans); font-size: clamp(0.75rem, 2vw, 0.9rem); }
.homepage-editorial .cursor-dot { background: var(--accent-from); }
.homepage-editorial .cursor-ring.is-hover { border-color: var(--accent-from); box-shadow: none; }

/* Hero — oversized type, an open composition, a fine red rule */
.homepage-editorial .hero {
    min-height: min(900px, 100svh);
    padding-block: clamp(10rem, 14vw, 15rem) clamp(5rem, 8vw, 8rem);
    background: var(--bg);
    overflow: hidden;
    align-items: center;
}
.homepage-editorial #gradient-canvas,
.homepage-editorial .hero-noise,
.homepage-editorial .hero-structure::before,
.homepage-editorial .hero-structure::after { display: none; }
.homepage-editorial .hero .container { width: 100%; }
.homepage-editorial .hero-structure {
    max-width: none;
    padding: 0;
    text-align: left;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3rem;
    align-items: end;
}
.homepage-editorial .hero-structure > * { min-width: 0; }
.homepage-editorial .hero-title {
    grid-column: 1 / -1;
    font-size: clamp(3.2rem, 7.4vw, 7rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
    margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
    text-wrap: initial;
}
.homepage-editorial .hero-title .serif-italic { color: var(--accent-from); }
.homepage-editorial .hero-title::before {
    content: '';
    display: block;
    width: 68px;
    height: 3px;
    background: var(--accent-from);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.homepage-editorial .hero-subtitle {
    max-width: 520px;
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.2vw, 1.08rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-sub);
}
.homepage-editorial .hero-subtitle em { font-style: normal; }
.homepage-editorial .hero-ctas { justify-content: flex-end; gap: 0.75rem; }

/* About — editorial columns and generous negative space */
.homepage-editorial .about { text-align: left; }
.homepage-editorial .about .container {
    display: grid;
    grid-template-columns: minmax(150px, 0.65fr) minmax(0, 2fr);
    column-gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.homepage-editorial .about .container > * { min-width: 0; }
.homepage-editorial .about-label { grid-column: 1; grid-row: 1 / 4; margin-top: 0.5rem; }
.homepage-editorial .about h2 { grid-column: 2; max-width: none; margin: 0 0 2rem; }
.homepage-editorial .about-text {
    grid-column: 2;
    max-width: 660px;
    margin: 0 0 2rem;
    font-size: clamp(0.98rem, 1.4vw, 1.12rem);
    line-height: 1.9;
    color: var(--text-sub);
}
.homepage-editorial .about .btn { grid-column: 2; justify-self: start; }
.homepage-editorial .techstack { padding-block: clamp(2.5rem, 5vw, 4rem); }
.homepage-editorial .marquee-item { opacity: 1; color: var(--text-sub); padding: 1rem 2.5rem; }
.homepage-editorial .marquee-item:hover { color: var(--text); }
.homepage-editorial .marquee-name { font-size: clamp(0.75rem, 1vw, 0.9rem); }

/* Services — six glass cards, no pinned horizontal scrolling */
.homepage-editorial .services-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.homepage-editorial .services-title { max-width: 780px; min-width: 0; }
.homepage-editorial .services-title .italic-line { color: var(--text-muted); }
.homepage-editorial .services-header > .btn { flex-shrink: 0; }
.homepage-editorial .services-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.homepage-editorial .service-card {
    min-width: 0;
    max-width: none;
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    gap: 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.homepage-editorial .service-card::after { display: none; }
.homepage-editorial .service-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-from);
    transform: translateY(-3px);
    box-shadow: none;
}
.homepage-editorial .service-num { font-size: clamp(0.72rem, 1vw, 0.85rem); letter-spacing: 0.08em; }
.homepage-editorial .service-card h3 { flex: none; font-size: clamp(1.25rem, 1.65vw, 1.65rem); line-height: 1.2; }
.homepage-editorial .service-desc { flex: 1; font-size: clamp(0.88rem, 1vw, 0.96rem); line-height: 1.85; }
.homepage-editorial .tag { background: transparent; color: var(--text-muted); border-radius: 3px; font-size: clamp(0.6rem, 0.7vw, 0.67rem); }
.homepage-editorial .service-footer { margin-top: auto; }
.homepage-editorial .btn-plus { border-radius: var(--r-button); color: var(--text); border-color: var(--border-hover); background: transparent; }
.homepage-editorial .btn-plus:hover { background: var(--accent-from); color: var(--text); transform: none; box-shadow: none; }
.homepage-editorial .hscroll-progress-wrap { display: none; }

/* Portfolio — large images and captions that are always readable */
.homepage-editorial .portfolio-header { margin-bottom: 3rem; }
.homepage-editorial .portfolio-header h2 { max-width: 930px; margin-top: 1.2rem; }
.homepage-editorial .portfolio-grid-asym { gap: 2rem 1.5rem; margin-bottom: 3rem; }
.homepage-editorial .portfolio-item {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    backdrop-filter: none;
}
.homepage-editorial .portfolio-item:hover { border-color: var(--accent-from); transform: translateY(-3px); box-shadow: none; }
.homepage-editorial .portfolio-item-inner { position: relative; inset: auto; aspect-ratio: 16 / 10; }
.homepage-editorial .portfolio-item--large .portfolio-item-inner { aspect-ratio: 16 / 7; }
.homepage-editorial .portfolio-item-img { object-position: top; }
.homepage-editorial .portfolio-overlay {
    position: relative;
    inset: auto;
    display: block;
    flex: 1;
    padding: clamp(1.2rem, 2.3vw, 2rem);
    opacity: 1;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}
.homepage-editorial .portfolio-overlay p { color: var(--text-sub) !important; font-family: var(--font-sans); line-height: 1.6; }
.homepage-editorial .portfolio-overlay h4 {
    color: var(--text) !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: clamp(1.1rem, 1.65vw, 1.6rem) !important;
    line-height: 1.25;
}

/* Process, centered testimonials and FAQ */
.homepage-editorial .process h2 { margin-block: 1.2rem 3rem; }
.homepage-editorial .process-grid { border-top: 1px solid var(--border); }
.homepage-editorial .process-step { padding: 2.5rem 1.5rem; }
.homepage-editorial .process-step h4 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); margin-bottom: 1rem; }
.homepage-editorial .process-step p { color: var(--text-sub); font-size: clamp(0.86rem, 1vw, 0.95rem); line-height: 1.85; }
.homepage-editorial .process-step .process-num { color: var(--accent-from); font-size: clamp(1.8rem, 3vw, 3rem); font-family: var(--font-heading); line-height: 1; margin-bottom: 2rem; }
.homepage-editorial .process-step:hover { background: var(--bg-raised); }
.homepage-editorial .testimonials { text-align: center; }
.homepage-editorial .testimonials h2 { max-width: 1000px; margin: 1.2rem auto 3.5rem; }
.homepage-editorial .testimonials-grid { gap: 0; }
.homepage-editorial .testimonial-card {
    align-items: center;
    padding: 2rem clamp(1.5rem, 2.8vw, 3rem);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.homepage-editorial .testimonial-card:first-child { border-left: 0; }
.homepage-editorial .testimonial-card::before { display: none; }
.homepage-editorial .testimonial-card:hover { transform: none; box-shadow: none; }
.homepage-editorial .testimonial-quote-icon { color: var(--accent-from); }
.homepage-editorial .testimonial-quote-icon path { fill: currentColor; }
.homepage-editorial .testimonial-stars { justify-content: center; }
.homepage-editorial .star--filled { color: var(--accent-from); background: none; -webkit-text-fill-color: currentColor; }
.homepage-editorial .testimonial-text { color: var(--text-sub); font-size: clamp(0.92rem, 1.1vw, 1.03rem); line-height: 1.9; }
.homepage-editorial .testimonial-author { justify-content: center; border-top: 0; padding-top: 1rem; }
.homepage-editorial .testimonial-avatar { background: var(--bg-card); border: 1px solid var(--border); }
.homepage-editorial .testimonial-name { color: var(--text); }
.homepage-editorial .testimonial-role { color: var(--text-muted); line-height: 1.6; }
.homepage-editorial .faq-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(3rem, 7vw, 7rem); }
.homepage-editorial .faq-inner > * { min-width: 0; }
.homepage-editorial .faq-heading h2 { margin-top: 1.2rem; position: static; }
.homepage-editorial .faq-question { font-family: var(--font-sans); font-size: clamp(0.92rem, 1.2vw, 1.04rem); padding-block: 1.7rem; line-height: 1.6; }
.homepage-editorial .faq-question:hover { color: var(--accent-from); }
.homepage-editorial .faq-icon { border-radius: 3px; color: var(--text-sub); }
.homepage-editorial .faq-answer p { color: var(--text-sub); font-size: clamp(0.9rem, 1.1vw, 1rem); line-height: 1.9; white-space: pre-line; }

/* Pricing — equal cards and restrained emphasis */
.homepage-editorial .pricing-header { max-width: 1000px; margin-bottom: 3rem; text-align: left; margin-inline: 0; }
.homepage-editorial .pricing-header h2 { margin-block: 1.2rem 1.5rem; }
.homepage-editorial .pricing-subtitle { max-width: 680px; color: var(--text-sub); font-size: clamp(0.95rem, 1.2vw, 1.05rem); }
.homepage-editorial .pricing-grid { align-items: stretch; gap: 1rem; }
.homepage-editorial .pricing-card {
    display: flex;
    background: var(--bg-card);
    border-radius: var(--r-md);
    box-shadow: none;
    transform: none;
}
.homepage-editorial .pricing-card--popular { border-color: var(--accent-from); }
.homepage-editorial .pricing-card:hover { transform: translateY(-3px); border-color: var(--accent-from); box-shadow: none; }
.homepage-editorial :is(.pricing-glow, .pricing-hex) { display: none; }
.homepage-editorial .pricing-card-inner { width: 100%; padding: 3rem clamp(1.5rem, 2.4vw, 2.5rem) 2rem; gap: 1.25rem; }
.homepage-editorial .pricing-badge { left: 2rem; transform: none; border-radius: 0 0 3px 3px; background: var(--accent-from); }
.homepage-editorial .pricing-name { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.homepage-editorial .pricing-desc { color: var(--text-sub); font-size: clamp(0.86rem, 1vw, 0.95rem); line-height: 1.8; }
.homepage-editorial .pricing-amount { font-family: var(--font-heading); font-size: clamp(2.5rem, 4vw, 4rem); background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
.homepage-editorial .pricing-features { margin-bottom: 1.5rem; }
.homepage-editorial .pricing-features li { color: var(--text-sub); line-height: 1.7; font-size: clamp(0.82rem, 1vw, 0.92rem); align-items: flex-start; }
.homepage-editorial .pricing-check { margin-top: 0.35rem; color: var(--accent-from); }
.homepage-editorial .pricing-check path { stroke: currentColor; }
.homepage-editorial .pricing-cta { margin-top: auto; }

/* Consultation and footer */
.homepage-editorial .discovery-inner { max-width: 960px; }
.homepage-editorial .discovery-inner h2 { margin-block: 1.2rem 1.5rem; }
.homepage-editorial .discovery-inner > p { max-width: 650px; font-size: clamp(0.95rem, 1.2vw, 1.06rem); line-height: 1.9; }
.homepage-editorial .discovery-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: none; padding: clamp(1.25rem, 4vw, 3rem); }
.homepage-editorial .site-footer { background: var(--bg); padding-top: 0; }
.homepage-editorial .footer-cta { padding-block: clamp(4rem, 9vw, 8rem); }
.homepage-editorial .footer-headline { max-width: 1050px; font-size: clamp(2.5rem, 6.8vw, 6.8rem); line-height: 1.05; margin-bottom: 2.5rem; }
.homepage-editorial .footer-headline .text-gradient { color: var(--accent-from); }
.homepage-editorial .footer-col a:hover { color: var(--accent-from); }
.homepage-editorial .footer-col__heading { font-size: clamp(0.8rem, 1vw, 1rem); letter-spacing: 0.08em; }
.homepage-editorial .footer-col a,
.homepage-editorial .footer-col p { font-size: clamp(0.85rem, 1vw, 0.96rem); }

/* Responsive compositions: preserve every card and every caption */
@media (max-width: 1100px) {
    .homepage-editorial .hero-structure { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
    .homepage-editorial .hero-title { margin-bottom: 0; }
    .homepage-editorial .hero-ctas { justify-content: flex-start; }
    .homepage-editorial .services-editorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .homepage-editorial .services-header { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 1024px) {
    .homepage-editorial .pricing-grid { grid-template-columns: 1fr; max-width: 700px; margin-inline: auto; }
    .homepage-editorial .pricing-card--popular { transform: none; }
    .homepage-editorial .testimonials-grid { grid-template-columns: 1fr; }
    .homepage-editorial .testimonial-card { border-left: 0; border-top: 1px solid var(--border); max-width: 720px; margin-inline: auto; padding-block: 2.5rem; }
    .homepage-editorial .testimonial-card:first-child { border-top: 0; }
    .homepage-editorial .faq-inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .homepage-editorial .header-nav { display: none; }
    .homepage-editorial .hamburger { display: flex; }
    .homepage-editorial .about .container { grid-template-columns: 1fr; }
    .homepage-editorial .about-label { grid-column: 1; grid-row: auto; margin: 0 0 1.5rem; }
    .homepage-editorial .about :is(h2, .about-text, .btn) { grid-column: 1; }
}
@media (max-width: 768px) {
    .homepage-editorial .hero { min-height: auto; padding-block: 9rem 5rem; }
    .homepage-editorial .hero-title { font-size: clamp(1.65rem, 7.8vw, 3.75rem); }
    .homepage-editorial h2 { font-size: clamp(1.65rem, 6.4vw, 2.6rem); font-weight: 700; }
    .homepage-editorial .hero-structure { padding: 0; }
    .homepage-editorial .portfolio-item--large .portfolio-item-inner { aspect-ratio: 16 / 10; }
    .homepage-editorial .portfolio-grid-asym { gap: 1.5rem; }
    .homepage-editorial .footer-col a { font-family: var(--font-sans); font-style: normal; }
    .homepage-editorial .footer-col__heading { font-family: var(--font-heading); }
}
@media (max-width: 600px) {
    .homepage-editorial .services-editorial-grid { grid-template-columns: 1fr; }
    .homepage-editorial .service-card { padding: 1.75rem; }
    .homepage-editorial .process-grid { grid-template-columns: 1fr; }
    .homepage-editorial .process-step { border-left: 0; padding-inline: 0; }
    .homepage-editorial .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
    .homepage-editorial .hero-ctas .btn { width: 100%; justify-content: center; }
    .homepage-editorial .services-header > .btn { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .homepage-editorial-root { scroll-behavior: auto; }
    .homepage-editorial *, .homepage-editorial *::before, .homepage-editorial *::after {
        animation: none !important;
        transition: none !important;
    }
    .homepage-editorial .marquee-track { flex-wrap: wrap; justify-content: center; width: 100%; }
    .homepage-editorial .marquee-wrapper { mask-image: none; -webkit-mask-image: none; }
}

/* ============================================================
   R. KINETIC STUDIO — TYPOGRAPHY, LIGHT & SCROLL
   Native motion is progressively added by homepage-motion.js.
   ============================================================ */
body.homepage-editorial {
    --bg: #101114;
    --bg-raised: #17191e;
    --bg-card: #17191e;
    --bg-card-hover: #1d2026;
    --paper: #e9e9e4;
    --ink: #17191c;
    --silver: #c5cad3;
    --ambient-red: rgba(237, 28, 36, 0.18);
    --ambient-blue: rgba(122, 157, 211, 0.10);
    --section-py: clamp(4.5rem, 8vw, 7.5rem);
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.homepage-editorial-root { background: #101114; }
.homepage-editorial h2 { font-weight: 700; }
.homepage-editorial .section-label { color: var(--accent-from); margin-bottom: 1.1rem; }
.homepage-editorial :is(.about, .techstack, .faq, .footer-cta) .section-label { color: #c8101a; }
.homepage-editorial .page-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent-from);
    box-shadow: 0 0 16px var(--accent-from);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 300;
    pointer-events: none;
}
.homepage-editorial .motion-reveal { opacity: 0; }
.homepage-editorial .motion-reveal.motion-visible { opacity: 1; }
.homepage-editorial :is(.btn, .btn-hero-secondary) {
    border-radius: var(--r-button);
    overflow: hidden;
    position: relative;
    transition: transform 0.45s var(--motion-ease), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.homepage-editorial .btn::after {
    content: '';
    position: absolute;
    inset: -70% -25%;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.8s var(--motion-ease);
    pointer-events: none;
}
.homepage-editorial .btn:hover::after { transform: translateX(120%); }
.homepage-editorial .btn-gradient { box-shadow: 0 4px 32px rgba(237,28,36,0.18); }
.homepage-editorial .btn-gradient:hover { box-shadow: 0 8px 44px rgba(237,28,36,0.32); }
.homepage-editorial :is(.hero-ctas .btn, .footer-start-btn) {
    transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px));
}
.homepage-editorial .site-header,
.homepage-editorial .site-header.scrolled { background: rgba(16,17,20,0.85); }
.homepage-editorial .header-nav a { position: relative; }
.homepage-editorial .header-nav a::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent-from);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--motion-ease);
}
.homepage-editorial .header-nav a:hover::after { transform: scaleX(1); }

/* Typography-led hero with restrained red ambient light. */
.homepage-editorial .hero {
    min-height: 0;
    padding-block: clamp(9.5rem, 11vw, 11rem) clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(ellipse at 88% 42%, rgba(237,28,36,0.12), transparent 55%),
        radial-gradient(ellipse at 8% 0%, var(--ambient-blue), transparent 50%),
        var(--bg);
}
.homepage-editorial .hero-structure { z-index: 2; display: block; max-width: 1150px; }
.homepage-editorial .hero-title {
    font-size: clamp(3rem, 6vw, 6rem);
    margin-bottom: 0;
    line-height: 1.12;
    position: relative;
    letter-spacing: -0.045em;
}
.homepage-editorial .hero-title-line { display: block; }
.homepage-editorial .hero-title > .serif-italic {
    display: block;
    color: var(--accent-from);
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.015em;
    line-height: 1.2;
    margin-top: 0.08em;
}
.homepage-editorial .hero-title::before { width: 32px; margin-bottom: 2rem; box-shadow: 0 0 20px var(--ambient-red); }
.homepage-editorial .hero-subtitle { color: var(--silver); max-width: 690px; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.homepage-editorial .hero-ctas { margin-top: 2rem; justify-content: flex-start; gap: 1rem; }
/* Pearl sections interrupt the dark canvas with a clear change of rhythm. */
.homepage-editorial :is(.about, .techstack, .faq) {
    --text: var(--ink);
    --text-sub: #53555a;
    --text-muted: #686a6e;
    --border: rgba(23,25,28,0.14);
    --border-hover: rgba(23,25,28,0.28);
    background: var(--paper);
    color: var(--ink);
}
.homepage-editorial .about { padding-block: var(--section-py); }
.homepage-editorial .about .container { grid-template-columns: minmax(140px, 0.45fr) minmax(0, 2fr); }
.homepage-editorial .about h2 { font-weight: 700; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.13; }
.homepage-editorial .about .btn:hover { color: var(--paper); }
.homepage-editorial .techstack { padding-top: 0; padding-bottom: 4rem; }
.homepage-editorial .marquee-item { filter: grayscale(1); opacity: 0.75; }
.homepage-editorial .marquee-item:hover { opacity: 1; }
.homepage-editorial .marquee-name { letter-spacing: 0.06em; }

/* Bento service cards: fine specular borders, local light and pointer tilt. */
.homepage-editorial .services-editorial {
    background: radial-gradient(ellipse at 100% 20%, var(--ambient-blue), transparent 45%), var(--bg);
}
.homepage-editorial .services-editorial-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem; }
.homepage-editorial .services-title .italic-line { color: var(--accent-from); }
.homepage-editorial .service-card { grid-column: span 2; border-radius: 20px; padding: clamp(1.75rem, 3vw, 3rem); transform-style: preserve-3d; }
.homepage-editorial .service-card:nth-child(1),
.homepage-editorial .service-card:nth-child(2) { grid-column: span 3; }
.homepage-editorial .service-card:nth-child(6) { grid-column: 1 / -1; }
.homepage-editorial .service-card:nth-child(6) { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 4rem; }
.homepage-editorial .service-card:nth-child(6) .service-num { grid-column: 1 / -1; }
.homepage-editorial .service-card:nth-child(6) .service-tags { align-self: start; }
.homepage-editorial .service-card:nth-child(6) .service-footer { grid-column: 2; justify-content: flex-end; }
.homepage-editorial .service-card h3 { font-weight: 700; font-size: clamp(1.35rem, 1.9vw, 1.9rem); line-height: 1.2; }
.homepage-editorial .service-card:nth-child(-n+2) h3 { font-size: clamp(1.6rem, 2.5vw, 2.5rem); }
.homepage-editorial .service-card::before,
.homepage-editorial .pricing-card::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(450px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(197,202,211,0.12), transparent 75%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 0;
}
.homepage-editorial .service-card > * { position: relative; z-index: 1; }
.homepage-editorial :is(.service-card, .pricing-card):hover {
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
    border-color: var(--border-accent);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 36px rgba(237,28,36,0.07);
}
.homepage-editorial .service-card:hover::before,
.homepage-editorial .pricing-card:hover::after { opacity: 1; }
.homepage-editorial .service-num { color: var(--accent-from); font-family: var(--font-heading); font-size: clamp(1rem, 1.5vw, 1.4rem); letter-spacing: 0; }
.homepage-editorial .btn-plus { width: 46px; height: 46px; border-radius: var(--r-button); }
.homepage-editorial .btn-plus:hover { transform: rotate(90deg); }

/* Large project panels stack while scrolling on wide screens. */
.homepage-editorial .portfolio { background: var(--bg-raised); }
.homepage-editorial .portfolio-grid-asym { display: flex; flex-direction: column; gap: 2rem; }
.homepage-editorial .portfolio-item {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    position: sticky;
    top: 112px;
    border-radius: 20px;
    background: var(--bg-card);
    box-shadow: 0 -10px 50px rgba(0,0,0,0.22);
}
.homepage-editorial .portfolio-item:nth-child(2) { top: 134px; }
.homepage-editorial .portfolio-item:nth-child(3) { top: 156px; }
.homepage-editorial .portfolio-item:hover { transform: none; box-shadow: 0 -10px 50px rgba(0,0,0,0.22); }
.homepage-editorial .portfolio-item-inner,
.homepage-editorial .portfolio-item--large .portfolio-item-inner { aspect-ratio: 16 / 11; }
.homepage-editorial .portfolio-item-img { transform: translateY(var(--image-shift, 0px)) scale(1.08); transition: transform 0.2s linear; }
.homepage-editorial .portfolio-item:hover .portfolio-item-img { transform: translateY(var(--image-shift, 0px)) scale(1.11); }
.homepage-editorial .portfolio-overlay { display: flex; align-items: flex-end; padding: clamp(1.5rem, 3vw, 3rem); border-top: 0; border-left: 1px solid var(--border); }
.homepage-editorial .portfolio-overlay h4 { font-weight: 700 !important; font-size: clamp(1.35rem, 2.2vw, 2.2rem) !important; line-height: 1.15; }
.homepage-editorial .portfolio-overlay p { font-size: clamp(0.6rem, 0.8vw, 0.72rem) !important; margin-bottom: 1.5rem !important; }
.homepage-editorial .portfolio-overlay p { color: var(--accent-from) !important; }
.homepage-editorial .portfolio-overlay::after { content: '\2197'; position: absolute; right: 2rem; top: 1.5rem; color: var(--text-sub); font-size: clamp(1.5rem, 3vw, 2.5rem); transition: transform 0.4s var(--motion-ease), color 0.4s; }
.homepage-editorial .portfolio-item:hover .portfolio-overlay::after { color: var(--accent-from); transform: translate(4px, -4px); }

/* The roadmap lights up as it enters the viewport. */
.homepage-editorial .process-step::after { height: 2px; box-shadow: 0 0 12px var(--ambient-red); }
.homepage-editorial .process-step.step-active::after { width: 100%; }
.homepage-editorial .process-step .process-num { font-size: clamp(3rem, 5vw, 5rem); color: transparent; -webkit-text-stroke: 1px var(--text-muted); transition: color 0.7s, -webkit-text-stroke 0.7s; }
.homepage-editorial .process-step.step-active .process-num { color: var(--accent-from); -webkit-text-stroke-color: transparent; }
.homepage-editorial .testimonials { background: radial-gradient(ellipse at 50% 50%, var(--ambient-blue), transparent 65%), var(--bg); }
.homepage-editorial .testimonial-card { border-left-color: rgba(197,202,211,0.15); }
.homepage-editorial .testimonial-text { font-size: clamp(0.98rem, 1.25vw, 1.12rem); }
.homepage-editorial .testimonial-avatar { border-color: var(--border-accent); color: var(--accent-from); box-shadow: 0 0 28px var(--ambient-red); }
.homepage-editorial .faq-question { color: var(--ink); }
.homepage-editorial .faq-icon { border-radius: 50%; }
.homepage-editorial .faq-item { transition: padding 0.3s, background 0.3s; }
.homepage-editorial .faq-item:has(.faq-question[aria-expanded="true"]) { padding-inline: 1rem; background: rgba(23,25,28,0.035); }
.homepage-editorial .pricing { background: radial-gradient(ellipse at 50% 75%, var(--ambient-red), transparent 55%), var(--bg); }
.homepage-editorial .pricing-card { border-radius: 20px; overflow: hidden; }
.homepage-editorial .pricing-card--popular { box-shadow: 0 0 60px rgba(237,28,36,0.12); }
.homepage-editorial .pricing-card--popular .pricing-glow { display: block; opacity: 0.3; background: radial-gradient(ellipse at 50% 0%, var(--ambient-red), transparent 65%); }
.homepage-editorial .pricing-name { font-weight: 700; color: var(--accent-from); }
.homepage-editorial .discovery { background: radial-gradient(ellipse at 50% 80%, var(--ambient-blue), transparent 65%), var(--bg); }
.homepage-editorial .discovery-card { box-shadow: 0 0 80px rgba(122,157,211,0.06); }
.homepage-editorial .footer-cta { background: var(--paper); text-align: center; --text: var(--ink); --text-muted: #686a6e; }
.homepage-editorial .footer-headline { margin-inline: auto; font-weight: 700; }
.homepage-editorial .footer-start-btn { color: var(--paper); }
.homepage-editorial .footer-grid-wrap { padding-block: 4rem; }

@media (max-width: 1100px) {
    .homepage-editorial .hero-title { font-size: clamp(3rem, 6vw, 5rem); }
    .homepage-editorial .hero-subtitle { max-width: 660px; }
    .homepage-editorial .service-card { grid-column: span 3; }
    .homepage-editorial .service-card:nth-child(6) { grid-column: span 3; display: flex; }
    .homepage-editorial .service-card:nth-child(-n+2) h3 { font-size: clamp(1.35rem, 1.9vw, 1.9rem); }
}
@media (max-width: 900px) {
    .homepage-editorial .about .container { grid-template-columns: minmax(0, 1fr); }
    .homepage-editorial .hamburger { width: 44px; height: 44px; padding: 9px; justify-content: center; }
    .homepage-editorial .portfolio-item { grid-template-columns: minmax(0, 1fr); position: relative; top: auto !important; }
    .homepage-editorial .portfolio-item-inner,
    .homepage-editorial .portfolio-item--large .portfolio-item-inner { aspect-ratio: 16 / 10; }
    .homepage-editorial .portfolio-overlay { border-left: 0; border-top: 1px solid var(--border); min-height: 160px; }
    .homepage-editorial .portfolio-overlay h4 { max-width: 90%; }
}
@media (max-width: 768px) {
    .homepage-editorial { --section-py: 4rem; }
    .homepage-editorial .hero { padding-block: 8.25rem 4rem; }
    .homepage-editorial .hero-title { font-size: clamp(1.7rem, 7.2vw, 3.45rem); margin-bottom: 0; letter-spacing: -0.025em; }
    .homepage-editorial .hero-title > .serif-italic { letter-spacing: 0.02em; }
    .homepage-editorial .hero-ctas { margin-top: 1.75rem; gap: 0.85rem; }
    .homepage-editorial .hero-subtitle { color: var(--text-sub); }
    .homepage-editorial .about h2 { font-size: clamp(1.55rem, 6vw, 2.6rem); }
    .homepage-editorial h2 { font-size: clamp(1.55rem, 6vw, 2.6rem); line-height: 1.15; letter-spacing: -0.035em; }
    .homepage-editorial :is(.services-header, .portfolio-header, .pricing-header) { margin-bottom: 2rem; }
    .homepage-editorial .services-header { gap: 1.75rem; }
    .homepage-editorial .testimonials h2 { margin-bottom: 2rem; }
    .homepage-editorial .faq-inner { gap: 2rem; }
    .homepage-editorial .services-editorial-grid { gap: 1rem; }
    .homepage-editorial .process-step.step-active .process-num { color: var(--accent-from); }
}
@media (max-width: 600px) {
    .homepage-editorial .service-card,
    .homepage-editorial .service-card:nth-child(1),
    .homepage-editorial .service-card:nth-child(2),
    .homepage-editorial .service-card:nth-child(6) { grid-column: 1 / -1; }
    .homepage-editorial .portfolio-overlay { min-height: 150px; }
    .homepage-editorial .service-card { border-radius: 16px; padding: 1.75rem; }
    .homepage-editorial .footer-headline { font-size: clamp(1.9rem, 8vw, 3rem); line-height: 1.15; }
    .homepage-editorial .footer-cta { padding-block: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .homepage-editorial .motion-reveal { opacity: 1; }
    .homepage-editorial :is(.service-card, .pricing-card, .hero-ctas .btn, .footer-start-btn):hover { transform: none; }
    .homepage-editorial .portfolio-item { position: relative; top: auto !important; }
    .homepage-editorial .portfolio-item-img { transform: none; }
}

/* ============================================================
   S. SERVICES PAGE — SHARED EDITORIAL DESIGN
   Keeps the existing six services, metrics, benefits, FAQ and CF7.
   ============================================================ */
.services-editorial-page .services-page-content { position: relative; }
.services-editorial-page .servicii-hero {
    min-height: 0;
    padding-block: clamp(9.5rem, 11vw, 11rem) clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(ellipse at 90% 35%, var(--ambient-red), transparent 55%),
        radial-gradient(ellipse at 10% 0%, var(--ambient-blue), transparent 50%),
        var(--bg);
}
.services-editorial-page .servicii-hero__glow { display: none; }
.services-editorial-page .servicii-hero__inner { align-items: flex-start; text-align: left; gap: 0; }
.services-editorial-page .servicii-hero__title {
    max-width: 1120px;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4.8vw, 4.75rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 0;
    overflow-wrap: anywhere;
}
.services-editorial-page .servicii-hero__title .text-gradient { color: var(--accent-from); -webkit-text-fill-color: currentColor; }
.services-editorial-page .servicii-hero__subtitle { max-width: 740px; color: var(--silver); margin-top: 2rem; font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.85; }
.services-editorial-page .servicii-hero__inner > .btn { margin-top: 2rem; transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)); }

/* A pearl canvas separates the detailed offer from the dark hero. */
.services-editorial-page .services-grid-wrapper {
    --text: var(--ink);
    --text-sub: #53555a;
    --text-muted: #686a6e;
    --border: rgba(23,25,28,0.14);
    --border-hover: rgba(23,25,28,0.28);
    background: var(--paper);
    color: var(--ink);
}
.services-editorial-page .service-zigzag-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}
.services-editorial-page .service-zigzag-row--reverse .service-content { grid-column: 2; grid-row: 1; }
.services-editorial-page .service-zigzag-row--reverse .service-visual { grid-column: 1; grid-row: 1; }
.services-editorial-page .service-content { gap: 1.3rem; min-width: 0; }
.services-editorial-page .service-content > .service-num { font-family: var(--font-sans); font-size: clamp(0.72rem, 1vw, 0.88rem); letter-spacing: 0.12em; font-weight: 700; color: #c8101a; }
.services-editorial-page .svc-zz-title { font-family: var(--font-heading); color: var(--ink); font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; }
.services-editorial-page .svc-zz-desc { max-width: 540px; color: var(--text-sub); font-size: clamp(0.92rem, 1.1vw, 1.02rem); line-height: 1.85; }
.services-editorial-page .svc-zz-bullets { gap: 0.9rem; margin-block: 0.25rem 0.5rem; }
.services-editorial-page .svc-zz-bullets li { color: var(--text-sub); font-size: clamp(0.86rem, 1vw, 0.96rem); line-height: 1.65; align-items: flex-start; gap: 0.75rem; }
.services-editorial-page .svc-zz-bullets li svg { margin-top: 0.35rem; color: var(--accent-from); }
.services-editorial-page .svc-zz-bullets path { stroke: currentColor; }
.services-editorial-page .svc-zz-bullets circle { fill: rgba(237,28,36,0.07); stroke: var(--border-accent); }
.services-editorial-page .service-content > .btn { align-self: flex-start; margin-top: 0.4rem; }
.services-editorial-page .service-content > .btn:hover { color: var(--paper); }
.services-editorial-page .svc-row-divider { margin-block: clamp(3.5rem, 7vw, 6rem); max-width: none; background: var(--border); }

/* Dark metric panels, with a restrained red light following the pointer. */
.services-editorial-page .service-visual { min-width: 0; }
.services-editorial-page .service-visual::before,
.services-editorial-page .service-visual::after { display: none; }
.services-editorial-page .glass-card {
    --text: #f2f2ef;
    --text-sub: #b9b9b6;
    --text-muted: #a4a6ac;
    --border: rgba(255,255,255,0.08);
    width: 100%;
    aspect-ratio: auto;
    min-height: 420px;
    padding: clamp(1.75rem, 3vw, 3rem);
    gap: 2rem;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(23,25,28,0.10);
    transform: none;
    overflow: hidden;
    transition: transform 0.45s var(--motion-ease), border-color 0.3s, box-shadow 0.3s;
}
.services-editorial-page .glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(237,28,36,0.14), transparent 75%);
    opacity: 0.5;
    transition: opacity 0.35s;
    pointer-events: none;
}
.services-editorial-page .glass-card::after { content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 2px; background: var(--accent-from); transition: width 0.5s var(--motion-ease); }
.services-editorial-page .glass-card:hover {
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px);
    border-color: var(--accent-from);
    box-shadow: 0 25px 55px rgba(23,25,28,0.15), 0 0 30px rgba(237,28,36,0.08);
}
.services-editorial-page .glass-card:hover::before { opacity: 1; }
.services-editorial-page .glass-card:hover::after { width: 100%; }
.services-editorial-page .gc-watermark { top: 1.5rem; left: 1.75rem; font-family: var(--font-heading); font-size: clamp(5rem, 8vw, 8rem); letter-spacing: 0; line-height: 1; color: rgba(237,28,36,0.15); }
.services-editorial-page .gc-header { align-items: flex-start; gap: 0.8rem; margin-top: 4.5rem; }
.services-editorial-page .gc-header .service-num { color: var(--accent-from); opacity: 1; font-size: clamp(0.7rem, 0.8vw, 0.8rem); padding-top: 0.3rem; }
.services-editorial-page .gc-title { color: var(--text); font-family: var(--font-heading); font-size: clamp(1.15rem, 1.65vw, 1.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.services-editorial-page .gc-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-block: 1.5rem; border-block: 1px solid var(--border); }
.services-editorial-page .gc-metric { min-width: 0; align-items: flex-start; padding: 0 0.8rem; gap: 0.75rem; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; }
.services-editorial-page .gc-metric:first-child { border-left: 0; padding-left: 0; }
.services-editorial-page .gc-metric:last-child { padding-right: 0; }
.services-editorial-page .gc-metric__value { font-family: var(--font-heading); color: var(--accent-from); background: none; -webkit-text-fill-color: currentColor; font-size: clamp(1.3rem, 2.1vw, 2rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; overflow-wrap: anywhere; }
.services-editorial-page .gc-metric__label { color: var(--text-muted); font-family: var(--font-sans); font-size: clamp(0.72rem, 0.85vw, 0.8rem); letter-spacing: 0.03em; line-height: 1.6; text-align: left; overflow-wrap: anywhere; }
.services-editorial-page .gc-tags { gap: 0.5rem; }
.services-editorial-page .gc-tags .tag { max-width: 100%; white-space: normal; color: var(--text-sub); text-transform: none; font-size: clamp(0.7rem, 0.8vw, 0.8rem); line-height: 1.6; letter-spacing: 0; padding: 0.35rem 0.65rem; }
.services-editorial-page .gc-decor { opacity: 0.4; }
.services-editorial-page .services-links-bridge { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: clamp(3rem, 7vw, 6rem); }
.services-editorial-page .services-links-bridge .btn:hover { color: var(--paper); }

/* Contact retains the existing CF7 shortcode and all its fields. */
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .contact { background: radial-gradient(ellipse at 50% 80%, var(--ambient-red), transparent 65%), var(--bg); }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .contact-inner { max-width: 840px; }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .contact-inner h2 { margin-block: 0.5rem 1.5rem; }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .contact-inner > p { max-width: 660px; margin: 0 auto 2.5rem; font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.85; }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .contact-form-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: clamp(1.5rem, 4vw, 3rem); box-shadow: 0 0 60px rgba(237,28,36,0.05); }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .wpcf7 .hidden-fields-container { display: none; }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .wpcf7-response-output:empty { display: none; }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .wpcf7-response-output { border: 1px solid var(--border); padding: 1rem; border-radius: 8px; color: var(--text-sub); }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .wpcf7-not-valid-tip { display: block; color: var(--accent-from); font-size: clamp(0.8rem, 1vw, 0.9rem); margin-bottom: 1rem; }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .contact-form-wrap .wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) { font-family: var(--font-sans); border-radius: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .contact-form-wrap .wpcf7-form :is(input, textarea, select):focus { border-color: var(--accent-from); box-shadow: 0 0 0 3px rgba(237,28,36,0.12); }
:is(.services-editorial-page, .portfolio-editorial-page, .about-editorial-page, .contact-editorial-page) .contact-form-wrap .wpcf7-form input[type="submit"] { min-height: 52px; background: var(--accent-from); border-radius: var(--r-button); font-family: var(--font-sans); padding: 1rem 2rem; font-size: clamp(0.7rem, 0.9vw, 0.85rem); }

@media (max-width: 1100px) {
    .services-editorial-page .service-zigzag-row { gap: 2.5rem; }
    .services-editorial-page .glass-card { padding: 1.75rem; }
    .services-editorial-page .gc-metric__value { font-size: clamp(1.1rem, 2vw, 1.6rem); }
}
@media (max-width: 900px) {
    .services-editorial-page .service-zigzag-row { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .services-editorial-page .service-zigzag-row .service-content,
    .services-editorial-page .service-zigzag-row .service-visual { grid-column: 1; grid-row: auto; width: 100%; }
    .services-editorial-page .svc-zz-desc { max-width: 700px; }
    .services-editorial-page .glass-card { min-height: 360px; }
    .services-editorial-page .gc-header { margin-top: 4rem; }
    .services-editorial-page .gc-metric__value { font-size: clamp(1.3rem, 3.2vw, 2rem); }
}
@media (max-width: 768px) {
    .services-editorial-page .servicii-hero { padding-block: 8.25rem 4rem; }
    .services-editorial-page .servicii-hero__title { font-size: clamp(1.65rem, 5.8vw, 2.7rem); letter-spacing: -0.025em; line-height: 1.15; }
    .services-editorial-page .servicii-hero__subtitle { margin-top: 1.5rem; }
    .services-editorial-page .servicii-hero__inner > .btn { margin-top: 1.75rem; }
    .services-editorial-page .svc-zz-title { font-size: clamp(1.65rem, 6vw, 2.6rem); }
    .services-editorial-page .svc-row-divider { margin-block: 3rem; }
    .services-editorial-page .gc-header { margin-top: 3.5rem; }
    .services-editorial-page .gc-metric__label { font-size: clamp(0.72rem, 2vw, 0.8rem); }
}
@media (max-width: 480px) {
    .services-editorial-page .glass-card { padding: 1.5rem; gap: 1.5rem; min-height: 0; }
    .services-editorial-page .gc-watermark { font-size: 5rem; top: 1.25rem; left: 1.5rem; }
    .services-editorial-page .gc-header { margin-top: 4rem; flex-direction: column; gap: 0.5rem; }
    .services-editorial-page .gc-metrics { grid-template-columns: 1fr; padding-block: 0; border-block: 0; }
    .services-editorial-page .gc-metric { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 0 !important; border-left: 0; border-top: 1px solid var(--border); }
    .services-editorial-page .gc-metric__value { font-size: clamp(1.35rem, 5vw, 1.65rem); flex-shrink: 0; }
    .services-editorial-page .gc-metric__label { max-width: 55%; text-align: right; }
    .services-editorial-page .services-links-bridge { flex-direction: column; }
    .services-editorial-page .services-links-bridge .btn { justify-content: center; }
    .services-editorial-page .service-content > .btn,
    .services-editorial-page .servicii-hero__inner > .btn { max-width: 100%; }
    .services-editorial-page .contact-form-wrap .wpcf7-form input[type="submit"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .services-editorial-page .glass-card:hover { transform: none; }
    .services-editorial-page .servicii-hero__inner > .btn { transform: none; }
}

/* ============================================================
   T. PORTFOLIO PAGE — EDITORIAL PROJECT GALLERY
   All twelve projects, metrics, descriptions and pagination remain in PHP.
   ============================================================ */
.portfolio-editorial-page .portfolio-page-content { position: relative; }
.portfolio-editorial-page .portofoliu-hero {
    min-height: 0;
    padding-block: clamp(9.5rem, 11vw, 11rem) clamp(4rem, 7vw, 6rem);
    background: radial-gradient(ellipse at 88% 40%, var(--ambient-red), transparent 55%), radial-gradient(ellipse at 10% 0%, var(--ambient-blue), transparent 50%), var(--bg);
}
.portfolio-editorial-page .portofoliu-hero__glow { display: none; }
.portfolio-editorial-page .portofoliu-hero__inner { align-items: flex-start; text-align: left; gap: 0; }
.portfolio-editorial-page .portofoliu-hero__title { max-width: 1150px; font-family: var(--font-heading); font-size: clamp(2.6rem, 4.8vw, 4.75rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }
.portfolio-editorial-page .portofoliu-hero__title .text-gradient { color: var(--accent-from); -webkit-text-fill-color: currentColor; }
.portfolio-editorial-page .portofoliu-hero__subtitle { max-width: 750px; margin-top: 2rem; color: var(--silver); font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.85; }
.portfolio-editorial-page .portofoliu-hero__cta-group { margin-top: 2rem; justify-content: flex-start; gap: 1rem; }
.portfolio-editorial-page .portofoliu-hero__cta-group .btn { min-height: 56px; padding-block: 0.75rem; transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)); }
.portfolio-editorial-page .hero-stat-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 880px);
    padding: 1.5rem 0;
    margin-top: 2rem;
    gap: 1.5rem;
    background: transparent;
    border: 0;
    border-block: 1px solid var(--border);
    border-radius: 0;
    backdrop-filter: none;
}
.portfolio-editorial-page .hero-stat-bar__sep { display: none; }
.portfolio-editorial-page .hero-stat { min-width: 0; align-items: flex-start; gap: 0.75rem; }
.portfolio-editorial-page .hero-stat__val { font-family: var(--font-heading); font-size: clamp(1.8rem, 2.8vw, 2.8rem); font-weight: 700; letter-spacing: 0; background: none; color: var(--accent-from); -webkit-text-fill-color: currentColor; }
.portfolio-editorial-page .hero-stat__lbl { color: var(--text-muted); font-size: clamp(0.72rem, 0.85vw, 0.8rem); line-height: 1.6; letter-spacing: 0.04em; }

/* A bright gallery canvas brings the project screenshots forward. */
.portfolio-editorial-page .portfolio-section {
    --text: var(--ink);
    --text-sub: #53555a;
    --text-muted: #686a6e;
    --border: rgba(23,25,28,0.14);
    --border-hover: rgba(23,25,28,0.28);
    background: var(--paper);
    color: var(--ink);
    scroll-margin-top: 110px;
}
.portfolio-editorial-page .pf-section-header { gap: 0; margin-bottom: 3rem; }
.portfolio-editorial-page .pf-section-header .section-label { color: #c8101a; }
.portfolio-editorial-page .pf-section-header h2 { max-width: 1000px; font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 700; line-height: 1.15; color: var(--ink); }
.portfolio-editorial-page .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; align-items: stretch; }
.portfolio-editorial-page .project-card {
    --text: #f2f2ef;
    --text-sub: #b9b9b6;
    --text-muted: #a4a6ac;
    --border: rgba(255,255,255,0.08);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(23,25,28,0.09);
    cursor: default;
    transition: transform 0.4s var(--motion-ease), border-color 0.3s, box-shadow 0.3s;
    transition-delay: 0s !important;
}
.portfolio-editorial-page .project-card:hover,
.portfolio-editorial-page .project-card:focus-within { border-color: var(--accent-from); box-shadow: 0 20px 50px rgba(23,25,28,0.14), 0 0 30px rgba(237,28,36,0.06); }
.portfolio-editorial-page .project-card:hover { transform: translateY(-3px); }
.portfolio-editorial-page .project-card__image { display: block; aspect-ratio: 16 / 11; background: var(--bg); }
.portfolio-editorial-page .project-card__image::before { display: none; }
.portfolio-editorial-page .project-card__image::after { height: 30%; background: linear-gradient(to top, rgba(16,17,20,0.25), transparent); }
.portfolio-editorial-page .project-card__image img { object-position: top; transform: translateY(var(--image-shift, 0px)) scale(1.065); transition: transform 0.35s var(--motion-ease); }
.portfolio-editorial-page .project-card:hover .project-card__image img { transform: translateY(var(--image-shift, 0px)) scale(1.09); }
.portfolio-editorial-page .pv-num { top: 1rem; left: 1rem; bottom: auto; padding: 0.5rem 0.7rem; background: var(--accent-from); color: var(--text); border-radius: 6px; font-family: var(--font-heading); font-size: clamp(0.85rem, 1vw, 1rem); font-weight: 700; letter-spacing: 0.03em; line-height: 1; }
.portfolio-editorial-page .pv-overlay { display: flex; opacity: 1; transform: none; background: rgba(16,17,20,0.88); border-color: rgba(255,255,255,0.2); padding: 0.7rem 0.9rem; }
.portfolio-editorial-page .pv-overlay__label { font-size: clamp(0.62rem, 0.75vw, 0.72rem); color: var(--text); }
.portfolio-editorial-page .project-card:hover .pv-overlay { border-color: var(--accent-from); }
.portfolio-editorial-page .project-card__body { padding: clamp(1.3rem, 2.2vw, 2rem); gap: 1.4rem; position: relative; }
.portfolio-editorial-page .project-card__body::before { content: ''; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(237,28,36,0.07), transparent 75%); pointer-events: none; opacity: 0; transition: opacity 0.35s; }
.portfolio-editorial-page .project-card:hover .project-card__body::before { opacity: 1; }
.portfolio-editorial-page .project-card__body > * { position: relative; }
.portfolio-editorial-page .project-meta { align-items: flex-start; gap: 0.6rem; }
.portfolio-editorial-page .project-num { color: var(--accent-from); font-weight: 700; font-size: clamp(0.7rem, 0.8vw, 0.8rem); }
.portfolio-editorial-page .project-category-label { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: clamp(0.66rem, 0.8vw, 0.76rem); line-height: 1.7; letter-spacing: 0.05em; color: var(--text-muted); background: none; -webkit-text-fill-color: currentColor; }
.portfolio-editorial-page .project-title { font-family: var(--font-heading); font-size: clamp(1.2rem, 1.8vw, 1.75rem); font-weight: 700; color: var(--text); line-height: 1.2; letter-spacing: -0.025em; }
.portfolio-editorial-page .project-desc { color: var(--text-sub); font-size: clamp(0.88rem, 1vw, 0.98rem); line-height: 1.85; }
.portfolio-editorial-page .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 10px; background: var(--border); }
.portfolio-editorial-page .metric-item { min-width: 0; padding: 1rem; gap: 0.5rem; background: var(--bg); }
.portfolio-editorial-page .metric-value { font-family: var(--font-heading); font-size: clamp(1.15rem, 1.65vw, 1.65rem); font-weight: 700; color: var(--accent-from); letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.portfolio-editorial-page .metric-label { color: var(--text-muted); font-size: clamp(0.7rem, 0.85vw, 0.8rem); letter-spacing: 0.025em; line-height: 1.6; overflow-wrap: anywhere; }
.portfolio-editorial-page .tech-tags { gap: 0.5rem; }
.portfolio-editorial-page .tech-tag { color: var(--text-sub); background: transparent; border-radius: 4px; font-size: clamp(0.72rem, 0.85vw, 0.8rem); line-height: 1.6; letter-spacing: 0; max-width: 100%; white-space: normal; }
.portfolio-editorial-page .project-case-study { min-height: 46px; align-self: flex-start; margin-top: auto; padding: 0.65rem 1.15rem; gap: 0.75rem; border: 1px solid var(--border-accent); border-radius: var(--r-button); color: var(--text); background: transparent; opacity: 1; font-family: var(--font-sans); font-size: clamp(0.72rem, 0.85vw, 0.8rem); font-weight: 600; line-height: 1.6; transition: background 0.3s, border-color 0.3s; }
.portfolio-editorial-page .project-case-study:hover { background: var(--accent-from); background-size: 0; border-color: var(--accent-from); }
.portfolio-editorial-page .project-case-study svg { color: var(--accent-from); }
.portfolio-editorial-page .project-case-study:hover svg { color: var(--text); }
.portfolio-editorial-page .pf-pagination { padding-top: 3rem; }
.portfolio-editorial-page .pf-pagination__link { color: var(--ink); background: transparent; border-color: var(--border); min-width: 46px; height: 46px; }
.portfolio-editorial-page .pf-pagination__link:hover,
.portfolio-editorial-page .pf-pagination__link--active { color: var(--paper); background: var(--accent-from); border-color: var(--accent-from); }
.portfolio-editorial-page .portfolio-links-bridge { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.portfolio-editorial-page .portfolio-links-bridge .btn:hover { color: var(--paper); }
.portfolio-editorial-page .portfolio-links-bridge .btn-gradient { color: var(--paper); }

/* Testimonials remain centered and readable; the existing CF7 form follows. */
.portfolio-editorial-page .pf-testimonials { background: radial-gradient(ellipse at 50% 45%, var(--ambient-blue), transparent 65%), var(--bg); }
.portfolio-editorial-page .pf-testimonials__header { max-width: 1000px; margin: 0 auto 3rem; gap: 0; }
.portfolio-editorial-page .pf-testimonials__header h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.15; }
.portfolio-editorial-page .testimonial-quote { color: var(--text-sub); font-family: var(--font-sans); font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.85; font-style: normal; flex: 1; }
.portfolio-editorial-page .testimonial-stars path { fill: var(--accent-from); }
.portfolio-editorial-page .testimonial-author__info { min-width: 0; }
.portfolio-editorial-page .contact { background: radial-gradient(ellipse at 50% 80%, var(--ambient-red), transparent 65%), var(--bg); }

@media (max-width: 1024px) {
    .portfolio-editorial-page .projects-grid { gap: 1.5rem; }
    .portfolio-editorial-page .project-card__body { padding: 1.4rem; }
    .portfolio-editorial-page .project-title { font-size: clamp(1.15rem, 2vw, 1.5rem); }
    .portfolio-editorial-page .metric-item { padding: 0.8rem; }
}
@media (max-width: 900px) {
    .portfolio-editorial-page .projects-grid { grid-template-columns: minmax(0, 1fr); }
    .portfolio-editorial-page .project-title { font-size: clamp(1.35rem, 3.3vw, 2rem); }
    .portfolio-editorial-page .project-card__body { padding: clamp(1.5rem, 3.5vw, 2rem); }
}
@media (max-width: 768px) {
    .portfolio-editorial-page .portofoliu-hero { padding-block: 8.25rem 4rem; }
    .portfolio-editorial-page .portofoliu-hero__title { font-size: clamp(1.65rem, 5.8vw, 2.7rem); letter-spacing: -0.025em; line-height: 1.15; }
    .portfolio-editorial-page .portofoliu-hero__subtitle { margin-top: 1.5rem; }
    .portfolio-editorial-page .hero-stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .portfolio-editorial-page .hero-stat__val { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .portfolio-editorial-page .portofoliu-hero__cta-group { align-items: stretch; flex-direction: row; }
    .portfolio-editorial-page .pf-section-header { margin-bottom: 2rem; }
    .portfolio-editorial-page .pf-section-header h2,
    .portfolio-editorial-page .pf-testimonials__header h2 { font-size: clamp(1.55rem, 6vw, 2.6rem); }
    .portfolio-editorial-page .project-card__image img { transform: translateY(var(--image-shift, 0px)) scale(1.065); }
    .portfolio-editorial-page .project-case-study { min-height: 48px; }
}
@media (max-width: 480px) {
    .portfolio-editorial-page .portofoliu-hero__cta-group { flex-direction: column; width: 100%; }
    .portfolio-editorial-page .portofoliu-hero__cta-group .btn { justify-content: center; }
    .portfolio-editorial-page .project-card { border-radius: 16px; }
    .portfolio-editorial-page .project-card__body { padding: 1.25rem; gap: 1.3rem; }
    .portfolio-editorial-page .project-title { font-size: clamp(1.15rem, 4.8vw, 1.4rem); }
    .portfolio-editorial-page .project-card__image { aspect-ratio: 16 / 11; }
    .portfolio-editorial-page .pv-num { top: 0.75rem; left: 0.75rem; }
    .portfolio-editorial-page .pv-overlay { display: flex; right: 0.75rem; bottom: 0.75rem; }
    .portfolio-editorial-page .metric-item { padding: 0.85rem 0.75rem; }
    .portfolio-editorial-page .metric-value { font-size: clamp(1.1rem, 4.3vw, 1.35rem); }
    .portfolio-editorial-page .metric-label { font-size: clamp(0.68rem, 2.5vw, 0.75rem); }
    .portfolio-editorial-page .portfolio-links-bridge { flex-direction: column; }
    .portfolio-editorial-page .portfolio-links-bridge .btn { justify-content: center; }
    .portfolio-editorial-page .contact-form-wrap .wpcf7-form input[type="submit"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-editorial-page .project-card:hover { transform: none; }
    .portfolio-editorial-page .project-card__image img,
    .portfolio-editorial-page .project-card:hover .project-card__image img { transform: none; }
    .portfolio-editorial-page .portofoliu-hero__cta-group .btn { transform: none; }
}

/* ============================================================
   U. ABOUT PAGE — EDITORIAL STORY, VALUES AND TEAM
   ============================================================ */
.about-editorial-page .about-hero {
    min-height: 0;
    padding-block: clamp(9.5rem, 11vw, 11rem) clamp(4rem, 7vw, 6rem);
    background: radial-gradient(ellipse at 90% 35%, var(--ambient-red), transparent 55%), radial-gradient(ellipse at 10% 0%, var(--ambient-blue), transparent 50%), var(--bg);
}
.about-editorial-page .about-hero__glow,
.about-editorial-page .about-help__glow { display: none; }
.about-editorial-page .about-hero__inner { max-width: 1120px; gap: 0; align-items: flex-start; text-align: left; }
.about-editorial-page .about-hero__title { font-family: var(--font-heading); font-size: clamp(2.5rem, 4.8vw, 4.75rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; margin: 0; }
.about-editorial-page .about-hero__title .text-gradient { color: var(--accent-from); -webkit-text-fill-color: currentColor; letter-spacing: 0.015em; }
.about-editorial-page .about-hero__subtitle { max-width: 750px; margin-top: 2rem; color: var(--silver); font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.85; }
.about-editorial-page .about-hero__inner > .btn { margin-top: 2rem; min-height: 56px; padding-block: 0.75rem; transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)); }

.about-editorial-page :is(.about-story, .about-values) {
    --text: var(--ink);
    --text-sub: #53555a;
    --text-muted: #686a6e;
    --border: rgba(23,25,28,0.14);
    --border-hover: rgba(23,25,28,0.28);
    background: var(--paper);
    color: var(--ink);
}
.about-editorial-page :is(.about-story, .about-values) .section-label { color: #c8101a; }
.about-editorial-page .about-story__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: clamp(2rem, 6vw, 6rem); }
.about-editorial-page .about-story__left { min-width: 0; top: 7.5rem; }
.about-editorial-page .about-story__stats { margin-top: 2rem; border-radius: 18px; border-color: rgba(255,255,255,0.08); background: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)), var(--bg-card); box-shadow: 0 15px 40px rgba(23,25,28,0.09); }
.about-editorial-page .about-story__stat { min-width: 0; padding: clamp(1.1rem, 2vw, 1.75rem); gap: 0.75rem; background: var(--bg-card); }
.about-editorial-page .about-story__stat-val { font-family: var(--font-heading); color: var(--accent-from); font-size: clamp(1.65rem, 2.7vw, 2.6rem); font-weight: 700; letter-spacing: 0; line-height: 1.1; }
.about-editorial-page .about-story__stat-lbl { color: var(--silver); font-size: clamp(0.68rem, 0.8vw, 0.78rem); line-height: 1.65; letter-spacing: 0.03em; }
.about-editorial-page .about-story__right { min-width: 0; }
.about-editorial-page .about-story__heading { font-family: var(--font-heading); color: var(--ink); font-size: clamp(1.7rem, 2.9vw, 2.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 2rem; }
.about-editorial-page .about-story__heading .text-gradient { color: #c8101a; -webkit-text-fill-color: currentColor; }
.about-editorial-page .about-story__right p { color: var(--text-sub); font-size: clamp(0.95rem, 1.1vw, 1.02rem); line-height: 1.9; margin-bottom: 1.35rem; }
.about-editorial-page .about-story__right .btn { white-space: normal; line-height: 1.6; max-width: 100%; }
.about-editorial-page .about-story__right .btn:hover { color: var(--paper); }

.about-editorial-page .about-help { background: radial-gradient(ellipse at 50% 45%, var(--ambient-red), transparent 65%), var(--bg); }
.about-editorial-page :is(.about-help__header, .about-values__header, .about-team__header) { align-items: flex-start; text-align: left; gap: 0; margin-bottom: 3rem; }
.about-editorial-page :is(.about-help__header, .about-values__header, .about-team__header) h2 { max-width: 1050px; font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; }
.about-editorial-page .help-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.about-editorial-page .help-card { min-width: 0; padding: clamp(1.5rem, 2.8vw, 2.25rem); gap: 1.5rem; border-radius: 18px; background: var(--bg-card); backdrop-filter: none; transition: border-color 0.3s, box-shadow 0.3s, transform 0.4s var(--motion-ease); }
.about-editorial-page .help-card::before { display: block; content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(237,28,36,0.12), transparent 75%); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.about-editorial-page .help-card:hover { border-color: var(--accent-from); transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
.about-editorial-page .help-card:hover::before { opacity: 1; }
.about-editorial-page .help-card__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--ambient-red); border-color: var(--border-accent); }
.about-editorial-page .help-card__num { font-family: var(--font-heading); color: var(--accent-from); font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: 0; }
.about-editorial-page .help-card__title { font-family: var(--font-heading); font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.about-editorial-page .help-card__text { font-size: clamp(0.88rem, 1vw, 0.98rem); line-height: 1.85; color: var(--text-sub); }

.about-editorial-page .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; border-block: 1px solid var(--border); border-radius: 0; }
.about-editorial-page .value-item { min-width: 0; padding: clamp(1.75rem, 3.5vw, 3rem); }
.about-editorial-page .value-item:hover { background: rgba(23,25,28,0.035); }
.about-editorial-page .value-item__line { width: 40px; background: var(--accent-from); margin-bottom: 1.5rem; }
.about-editorial-page .value-item__title { color: var(--ink); font-family: var(--font-heading); font-size: clamp(1.25rem, 2vw, 1.9rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; margin-bottom: 1rem; }
.about-editorial-page .value-item__text { color: var(--text-sub); font-size: clamp(0.9rem, 1.1vw, 1.02rem); line-height: 1.85; }

.about-editorial-page .about-team { background: radial-gradient(ellipse at 80% 15%, var(--ambient-blue), transparent 50%), var(--bg); }
.about-editorial-page .team-grid--founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.about-editorial-page .team-card { min-width: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card); overflow: hidden; transition: border-color 0.3s; }
.about-editorial-page .team-card:hover { border-color: var(--accent-from); }
.about-editorial-page .team-card__image { border: 0; border-radius: 0; aspect-ratio: 4 / 5; background: var(--bg); }
.about-editorial-page .team-card__image img { object-position: center 15%; transform: translateY(var(--image-shift, 0px)) scale(1.06); transition: transform 0.45s var(--motion-ease); }
.about-editorial-page .team-card:hover .team-card__image { box-shadow: none; }
.about-editorial-page .team-card:hover .team-card__image img { transform: translateY(var(--image-shift, 0px)) scale(1.08); }
.about-editorial-page .team-card__image::after { background: linear-gradient(to top, rgba(16,17,20,0.5), transparent 40%); }
.about-editorial-page .team-card__image-badge { top: auto; left: 1.5rem; bottom: 1.5rem; padding: 0.6rem 0.85rem; border: 1px solid var(--border-accent); background: var(--accent-from); color: var(--text); backdrop-filter: none; font-family: var(--font-sans); font-size: clamp(0.68rem, 0.8vw, 0.78rem); font-weight: 700; }
.about-editorial-page .team-card__body { padding: clamp(1.5rem, 2.8vw, 2.5rem); gap: 1rem; flex: 1; }
.about-editorial-page .team-card__name { color: var(--text); font-family: var(--font-heading); font-size: clamp(1.45rem, 2.5vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.about-editorial-page .team-card__role { color: var(--accent-from); font-size: clamp(0.82rem, 1vw, 0.94rem); line-height: 1.8; }
.about-editorial-page .team-card__role .serif-italic { font-family: var(--font-sans); font-size: inherit; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.about-editorial-page .team-card__bio { color: var(--text-sub); font-size: clamp(0.92rem, 1.1vw, 1.02rem); line-height: 1.85; }
.about-editorial-page .team-grid--staff { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.about-editorial-page .team-staff-card { min-width: 0; align-items: flex-start; padding: clamp(1.5rem, 2.8vw, 2.5rem); gap: 1.5rem; border-radius: 18px; background: var(--bg-card); transition: border-color 0.3s, transform 0.4s var(--motion-ease); }
.about-editorial-page .team-staff-card::before { inset: 0; width: auto; height: auto; border-radius: 0; background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(237,28,36,0.1), transparent 75%); }
.about-editorial-page .team-staff-card:hover { border-color: var(--accent-from); transform: translateY(-3px); }
.about-editorial-page .team-staff-card__avatar { width: 48px; height: 48px; border-radius: 12px; color: var(--accent-from); background: var(--ambient-red); border-color: var(--border-accent); }
.about-editorial-page .team-staff-card__body { min-width: 0; }
.about-editorial-page .team-staff-card__tag { color: var(--accent-from); font-size: clamp(0.66rem, 0.8vw, 0.75rem); }
.about-editorial-page .team-staff-card__name { font-family: var(--font-heading); font-size: clamp(1.15rem, 1.75vw, 1.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.about-editorial-page .team-staff-card__role { color: var(--silver); font-family: var(--font-sans); font-size: clamp(0.75rem, 0.95vw, 0.88rem); line-height: 1.75; letter-spacing: 0; text-transform: none; }
.about-editorial-page .team-staff-card__text { color: var(--text-sub); font-size: clamp(0.88rem, 1vw, 0.98rem); line-height: 1.85; }
.about-editorial-page .team-staff-card__line { background: var(--accent-from); }
.about-editorial-page .contact { background: radial-gradient(ellipse at 50% 80%, var(--ambient-red), transparent 65%), var(--bg); }

@media (max-width: 1100px) {
    .about-editorial-page .help-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .about-editorial-page .about-story__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .about-editorial-page .about-story__left { position: static; }
    .about-editorial-page .about-story__heading { font-size: clamp(1.65rem, 4.3vw, 2.65rem); }
    .about-editorial-page .team-staff-card { flex-direction: column; }
}
@media (max-width: 768px) {
    .about-editorial-page .about-hero { padding-block: 8.25rem 4rem; }
    .about-editorial-page .about-hero__title { font-size: clamp(1.85rem, 6.8vw, 3rem); line-height: 1.15; letter-spacing: -0.025em; }
    .about-editorial-page .about-hero__subtitle { margin-top: 1.5rem; }
    .about-editorial-page :is(.about-help__header, .about-values__header, .about-team__header) { margin-bottom: 2rem; }
    .about-editorial-page :is(.about-help__header, .about-values__header, .about-team__header) h2 { font-size: clamp(1.55rem, 6vw, 2.6rem); }
    .about-editorial-page .team-grid--founders { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .about-editorial-page .team-card__image { aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
    .about-editorial-page :is(.help-cards-grid, .values-grid, .team-grid--staff) { grid-template-columns: minmax(0, 1fr); }
    .about-editorial-page .value-item { padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--border); }
    .about-editorial-page .value-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
    .about-editorial-page .value-item:last-child { border-bottom: 0; }
    .about-editorial-page .team-staff-card { flex-direction: row; }
    .about-editorial-page .team-staff-card__avatar { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
    .about-editorial-page .about-hero__inner > .btn { width: 100%; justify-content: center; }
    .about-editorial-page .about-story__stat { padding: 1.15rem; }
    .about-editorial-page .help-card,
    .about-editorial-page .team-card,
    .about-editorial-page .team-staff-card { border-radius: 16px; }
    .about-editorial-page .team-staff-card { flex-direction: column; gap: 1.15rem; }
    .about-editorial-page .team-card__image-badge { left: 1rem; bottom: 1rem; }
    .about-editorial-page .contact-form-wrap .wpcf7-form input[type="submit"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .about-editorial-page :is(.help-card, .team-staff-card):hover { transform: none; }
    .about-editorial-page .team-card__image img,
    .about-editorial-page .team-card:hover .team-card__image img,
    .about-editorial-page .about-hero__inner > .btn { transform: none; }
}

/* ============================================================
   V. EDITORIAL EFFECTS — DECORATIVE LAYERS ONLY
   ============================================================ */
.homepage-editorial :is(.hero, .servicii-hero, .portofoliu-hero, .about-hero, .hosting-hero, .contact-page-hero) { isolation: isolate; }
.homepage-editorial :is(.hero, .servicii-hero, .portofoliu-hero, .about-hero, .hosting-hero, .contact-page-hero) > .container { position: relative; z-index: 1; }
.homepage-editorial .editorial-atmosphere { position: absolute; inset: -40px; z-index: 0; overflow: hidden; pointer-events: none; contain: paint; transform: translate(var(--ambient-x, 0px), var(--ambient-y, 0px)); transition: transform 1.2s var(--motion-ease); }
.homepage-editorial .editorial-atmosphere::before { content: ''; position: absolute; inset: -25%; background: radial-gradient(ellipse at 82% 45%, rgba(237,28,36,0.25), transparent 58%), radial-gradient(ellipse at 25% 65%, rgba(122,157,211,0.1), transparent 55%); animation: editorial-aurora 16s ease-in-out infinite alternate; animation-play-state: paused; }
.homepage-editorial .editorial-atmosphere::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(197,202,211,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(197,202,211,0.06) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse at 88% 45%, black, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 88% 45%, black, transparent 65%); animation: editorial-grid-drift 24s linear infinite; animation-play-state: paused; }
.homepage-editorial .editorial-glow-title { animation: editorial-title-glow 7s ease-in-out infinite alternate; animation-play-state: paused; }
.homepage-editorial .editorial-hero-active .editorial-atmosphere::before,
.homepage-editorial .editorial-hero-active .editorial-atmosphere::after,
.homepage-editorial .editorial-hero-active .editorial-glow-title { animation-play-state: running; }
.homepage-editorial.editorial-effects-paused .editorial-atmosphere::before,
.homepage-editorial.editorial-effects-paused .editorial-atmosphere::after,
.homepage-editorial.editorial-effects-paused .editorial-glow-title { animation-play-state: paused; }
@keyframes editorial-aurora { from { transform: translate(-5%, -3%) scale(0.95); } to { transform: translate(7%, 5%) scale(1.12); } }
@keyframes editorial-grid-drift { from { background-position: 0 0; } to { background-position: 72px 72px; } }
@keyframes editorial-title-glow { from { text-shadow: 0 0 18px rgba(237,28,36,0.04); } to { text-shadow: 0 0 42px rgba(237,28,36,0.3), 0 0 90px rgba(237,28,36,0.12); } }

.homepage-editorial :is(.service-card, .pricing-card, .glass-card, .project-card, .help-card, .team-card, .team-staff-card, .hosting-feat-card, .hosting-price-card, .hosting-trust__metric) { position: relative; }
.homepage-editorial :is(.project-case-study, .btn-plus, .footer-start-btn) { position: relative; overflow: hidden; }
.homepage-editorial .editorial-card-sheen { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; }
.homepage-editorial .editorial-card-sheen::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.07) 45%, transparent 65%); transform: translateX(-130%); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
    .homepage-editorial :is(.service-card, .pricing-card, .glass-card, .project-card, .help-card, .team-card, .team-staff-card, .hosting-feat-card, .hosting-price-card, .hosting-trust__metric):hover > .editorial-card-sheen::before { animation: editorial-card-sweep 950ms var(--motion-ease) both; }
    .homepage-editorial .help-card__icon { transition: transform 0.45s var(--motion-ease), background 0.3s; }
    .homepage-editorial .help-card:hover .help-card__icon { transform: rotate(-7deg) scale(1.08); }
    .homepage-editorial .btn .btn-icon { transition: transform 0.35s var(--motion-ease); }
    .homepage-editorial .btn:hover .btn-icon { transform: translateX(3px); }
}
@keyframes editorial-card-sweep { 0% { opacity: 0; transform: translateX(-130%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(130%); } }

.homepage-editorial .editorial-preview-cursor { position: absolute; top: 0; left: 0; translate: var(--preview-x, 0px) var(--preview-y, 0px); z-index: 5; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: var(--accent-from); color: var(--paper); font: 2rem/1 var(--font-sans); box-shadow: 0 0 35px rgba(237,28,36,0.25); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.7); transition: opacity 0.2s, transform 0.35s var(--motion-ease); }
.homepage-editorial .editorial-preview-active > .editorial-preview-cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.homepage-editorial:has(.editorial-preview-active) :is(.cursor-dot, .cursor-ring) { opacity: 0; }
.homepage-editorial .editorial-button-ripple { position: absolute; display: block; border-radius: 50%; background: rgba(255,255,255,0.22); pointer-events: none; animation: editorial-ripple 600ms ease-out both; }
@keyframes editorial-ripple { from { transform: scale(0); opacity: 0.6; } to { transform: scale(1); opacity: 0; } }
.homepage-editorial .page-scroll-progress { background: linear-gradient(90deg, var(--accent-from), #ff646a, var(--accent-from)); }
.homepage-editorial .page-scroll-progress::after { content: ''; position: absolute; right: 0; top: -2px; width: 7px; height: 6px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 12px var(--accent-from), 0 0 24px var(--accent-from); }
@media (max-width: 768px) {
    .homepage-editorial .editorial-atmosphere::after { background-size: 48px 48px; opacity: 0.65; }
    .homepage-editorial .editorial-atmosphere::before { animation-duration: 20s; }
}
@media (hover: none), (pointer: coarse) {
    .homepage-editorial .editorial-preview-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .homepage-editorial .editorial-atmosphere { transform: none; transition: none; }
    .homepage-editorial .editorial-atmosphere::before,
    .homepage-editorial .editorial-atmosphere::after,
    .homepage-editorial .editorial-glow-title,
    .homepage-editorial :is(.service-card, .pricing-card, .glass-card, .project-card, .help-card, .team-card, .team-staff-card, .hosting-feat-card, .hosting-price-card, .hosting-trust__metric):hover > .editorial-card-sheen::before { animation: none; }
    .homepage-editorial .editorial-preview-cursor,
    .homepage-editorial .editorial-button-ripple { display: none; }
    .homepage-editorial .help-card:hover .help-card__icon,
    .homepage-editorial .btn:hover .btn-icon { transform: none; }
}

/* ============================================================
   W. HOSTING PAGE — PREMIUM INFRASTRUCTURE AND FIVE PLANS
   ============================================================ */
.hosting-editorial-page {
    --hosting-blue: var(--accent-from);
    --hosting-blue-light: var(--ambient-red);
    --hosting-blue-glow: rgba(237,28,36,0.2);
    --hosting-blue-border: var(--border-accent);
}
.hosting-editorial-page .hosting-hero { padding-block: clamp(9.5rem, 11vw, 11rem) clamp(4rem, 7vw, 6rem); background: radial-gradient(ellipse at 90% 35%, var(--ambient-red), transparent 55%), var(--bg); }
.hosting-editorial-page .hosting-hero__inner { max-width: 1150px; }
.hosting-editorial-page .hosting-hero__orb { display: none; }
.hosting-editorial-page .hosting-hero__title { font-family: var(--font-heading); font-size: clamp(2.5rem, 4.8vw, 4.75rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; margin: 0; }
.hosting-editorial-page .hosting-hero__title .text-gradient { color: var(--accent-from); -webkit-text-fill-color: currentColor; }
.hosting-editorial-page .hosting-hero__sub { max-width: 750px; color: var(--silver); font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.85; margin: 2rem 0; }
.hosting-editorial-page .hosting-hero__actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: 1rem; }
.hosting-editorial-page .hosting-hero__actions .btn { min-height: 56px; padding-block: 0.75rem; max-width: 100%; white-space: normal; line-height: 1.6; transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)); }

.hosting-editorial-page :is(.hosting-features, .hosting-trust) { --text: var(--ink); --text-sub: #53555a; --text-muted: #686a6e; --border: rgba(23,25,28,0.14); --border-hover: rgba(23,25,28,0.28); background: var(--paper); color: var(--ink); }
.hosting-editorial-page :is(.hosting-features, .hosting-trust) .section-label { color: #c8101a; }
.hosting-editorial-page :is(.hosting-features__header, .hosting-pricing__header) { max-width: 1000px; margin-bottom: 3rem; }
.hosting-editorial-page :is(.hosting-features__header, .hosting-pricing__header) h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; margin: 0 0 1.5rem; }
.hosting-editorial-page :is(.hosting-features__sub, .hosting-pricing__sub) { max-width: 730px; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.85; color: var(--text-sub); }
.hosting-editorial-page .hosting-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.hosting-editorial-page .hosting-feat-card {
    --text: #f2f2ef; --text-sub: #b9b9b6; --text-muted: #a4a6ac; --border: rgba(255,255,255,0.08);
    min-width: 0; padding: 4rem clamp(1.5rem, 2.5vw, 2.25rem) 2rem; gap: 1.5rem; border-radius: 20px; background: var(--bg-card); border-color: var(--border); overflow: hidden; box-shadow: 0 15px 40px rgba(23,25,28,0.08); transition: border-color 0.3s, transform 0.4s var(--motion-ease), box-shadow 0.3s;
}
.hosting-editorial-page .hosting-feat-card::before,
.hosting-editorial-page .hosting-price-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(237,28,36,0.12), transparent 75%); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.hosting-editorial-page .hosting-feat-card > :not(.editorial-card-sheen),
.hosting-editorial-page .hosting-price-card > :not(.editorial-card-sheen) { position: relative; }
.hosting-editorial-page :is(.hosting-feat-card, .hosting-price-card):hover { background: var(--bg-card); border-color: var(--accent-from); transform: translateY(-3px); box-shadow: 0 18px 45px rgba(23,25,28,0.12), 0 0 30px rgba(237,28,36,0.07); }
.hosting-editorial-page :is(.hosting-feat-card, .hosting-price-card):hover::before { opacity: 1; }
.hosting-editorial-page .hosting-feat-card.hosting-feat-card--featured { border-color: var(--border-accent); }
.hosting-editorial-page .hosting-feat-card .hosting-feat-card__badge { position: absolute; top: 1rem; right: 1rem; color: var(--text); background: var(--accent-from); border-color: var(--accent-from); font-size: clamp(0.61rem, 0.75vw, 0.7rem); letter-spacing: 0.07em; padding: 0.45rem 0.7rem; }
.hosting-editorial-page .hosting-feat-card__icon { width: 50px; height: 50px; border-radius: 12px; background: var(--ambient-red); border-color: var(--border-accent); color: var(--accent-from); animation: none; box-shadow: none; transition: transform 0.45s var(--motion-ease); }
.hosting-editorial-page .hosting-feat-card__title { font-family: var(--font-heading); font-size: clamp(1.2rem, 1.7vw, 1.65rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.hosting-editorial-page .hosting-feat-card__text { font-size: clamp(0.9rem, 1.05vw, 1rem); line-height: 1.85; }
.hosting-editorial-page .hosting-feat-card__list { gap: 0.8rem; font-size: clamp(0.8rem, 0.95vw, 0.9rem); line-height: 1.7; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.hosting-editorial-page .hosting-feat-card__list li { position: relative; padding-left: 1rem; }
.hosting-editorial-page .hosting-feat-card__list li::before { content: ''; position: absolute; top: 0.7em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-from); margin: 0; }

.hosting-editorial-page .hosting-pricing { background: radial-gradient(ellipse at 50% 50%, var(--ambient-red), transparent 60%), var(--bg); scroll-margin-top: 110px; }
.hosting-editorial-page .hosting-pricing__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; padding-top: 0; }
.hosting-editorial-page .hosting-pricing__grid .hosting-price-card:nth-child(-n+3) { grid-column: span 2; }
.hosting-editorial-page .hosting-pricing__grid .hosting-price-card:nth-child(4) { grid-column: 2 / span 2; }
.hosting-editorial-page .hosting-pricing__grid .hosting-price-card:nth-child(5) { grid-column: 4 / span 2; }
.hosting-editorial-page .hosting-price-card { min-width: 0; padding: 3.5rem clamp(1.5rem, 2.4vw, 2.25rem) 2rem; gap: 1.5rem; border-radius: 20px; border-color: var(--border); background: var(--bg-card); overflow: hidden; box-shadow: none; transition: border-color 0.3s, transform 0.4s var(--motion-ease), box-shadow 0.3s; }
.hosting-editorial-page .hosting-price-card--featured { border-color: var(--accent-from); box-shadow: 0 0 50px rgba(237,28,36,0.1); }
.hosting-editorial-page .hosting-price-card .hosting-price-card__badge { position: absolute; top: 1rem; right: 1rem; left: auto; transform: none; background: var(--accent-from); color: var(--text); font-family: var(--font-sans); font-size: clamp(0.61rem, 0.75vw, 0.7rem); padding: 0.4rem 0.8rem; letter-spacing: 0.07em; }
.hosting-editorial-page .hosting-price-card__tier { font-family: var(--font-heading); font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.25; }
.hosting-editorial-page .hosting-price-card__price { gap: 0.6rem; }
.hosting-editorial-page .hosting-price-card__amount { color: var(--accent-from); font-family: var(--font-heading); font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 700; letter-spacing: -0.025em; }
.hosting-editorial-page .hosting-price-card__period { font-size: clamp(0.75rem, 0.9vw, 0.85rem); line-height: 1.5; white-space: nowrap; }
.hosting-editorial-page .hosting-price-card__desc { min-height: 6.5rem; padding-bottom: 1.5rem; font-size: clamp(0.88rem, 1vw, 0.98rem); line-height: 1.85; }
.hosting-editorial-page .hosting-price-card__features { gap: 0.8rem; font-size: clamp(0.82rem, 1vw, 0.95rem); line-height: 1.7; }
.hosting-editorial-page .hosting-price-card__features li { display: flex; align-items: flex-start; gap: 0.6rem; }
.hosting-editorial-page .hosting-check { margin: 0.35rem 0 0; }
.hosting-editorial-page .hosting-btn-blue { background: var(--accent-from); border-color: var(--accent-from); color: var(--text); box-shadow: 0 4px 32px rgba(237,28,36,0.16); font-family: var(--font-sans); white-space: normal; line-height: 1.6; }
.hosting-editorial-page .hosting-btn-blue:hover { background: var(--accent-from); border-color: var(--accent-from); color: var(--text); box-shadow: 0 8px 40px rgba(237,28,36,0.25); filter: brightness(1.08); }

.hosting-editorial-page .hosting-trust__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
.hosting-editorial-page .hosting-trust__copy { min-width: 0; gap: 1.5rem; }
.hosting-editorial-page .hosting-trust__copy h2 { font-family: var(--font-heading); font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.035em; }
.hosting-editorial-page .hosting-trust__brand { color: #c8101a; }
.hosting-editorial-page .hosting-trust__copy p { color: var(--text-sub); font-size: clamp(0.95rem, 1.1vw, 1.02rem); line-height: 1.85; }
.hosting-editorial-page .hosting-trust__copy .hosting-btn-blue { width: auto; margin-top: 0.5rem; align-self: flex-start; color: var(--paper); }
.hosting-editorial-page .hosting-trust__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hosting-editorial-page .hosting-trust__metric { --text: #f2f2ef; --text-muted: #a4a6ac; min-width: 0; padding: clamp(1.4rem, 2.2vw, 2rem); gap: 1rem; border-color: rgba(255,255,255,0.08); border-radius: 18px; background: var(--bg-card); overflow: hidden; transition: border-color 0.3s, background 0.3s; }
.hosting-editorial-page .hosting-trust__metric:hover { background: var(--bg-card); border-color: var(--accent-from); }
.hosting-editorial-page .hosting-trust__metric-val { font-family: var(--font-heading); color: var(--accent-from); font-size: clamp(1.45rem, 2.5vw, 2.35rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.hosting-editorial-page .hosting-trust__metric-val span { color: var(--text); font-size: 0.55em; }
.hosting-editorial-page .hosting-trust__metric-label { color: var(--text-muted); font-size: clamp(0.65rem, 0.8vw, 0.75rem); font-family: var(--font-sans); letter-spacing: 0.04em; line-height: 1.65; }
.hosting-editorial-page .hosting-links-bridge { background: radial-gradient(ellipse at 50% 80%, var(--ambient-red), transparent 60%), var(--bg); }
.hosting-editorial-page .hosting-links-bridge h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; }
.hosting-editorial-page .hosting-links-bridge p { color: var(--silver); font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.85; }
.hosting-editorial-page .hosting-links-bridge__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.hosting-editorial-page .hosting-links-bridge__actions .btn { white-space: normal; line-height: 1.6; max-width: 100%; }

@media (max-width: 1100px) {
    .hosting-editorial-page .hosting-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hosting-editorial-page .hosting-feat-card:last-child { grid-column: 1 / -1; }
    .hosting-editorial-page .hosting-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hosting-editorial-page .hosting-pricing__grid .hosting-price-card:nth-child(n) { grid-column: auto; }
    .hosting-editorial-page .hosting-price-card__desc { min-height: 0; }
}
@media (max-width: 900px) {
    .hosting-editorial-page .hosting-trust__inner { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .hosting-editorial-page .hosting-trust__copy h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
}
@media (max-width: 768px) {
    .hosting-editorial-page .hosting-hero { padding-block: 8.25rem 4rem; }
    .hosting-editorial-page .hosting-hero__title { font-size: clamp(1.65rem, 5.5vw, 2.65rem); line-height: 1.15; letter-spacing: -0.025em; }
    .hosting-editorial-page .hosting-hero__sub { margin: 1.5rem 0 2rem; }
    .hosting-editorial-page .hosting-features__grid { grid-template-columns: minmax(0, 1fr); }
    .hosting-editorial-page :is(.hosting-features__header, .hosting-pricing__header) { margin-bottom: 2rem; }
    .hosting-editorial-page :is(.hosting-features__header, .hosting-pricing__header) h2,
    .hosting-editorial-page .hosting-links-bridge h2 { font-size: clamp(1.55rem, 6vw, 2.6rem); }
}
@media (max-width: 600px) {
    .hosting-editorial-page .hosting-pricing__grid { grid-template-columns: minmax(0, 1fr); }
    .hosting-editorial-page .hosting-hero__actions { flex-direction: column; }
    .hosting-editorial-page .hosting-hero__actions .btn { justify-content: center; }
    .hosting-editorial-page .hosting-feat-card,
    .hosting-editorial-page .hosting-price-card { border-radius: 16px; }
    .hosting-editorial-page .hosting-trust__metric { padding: 1.25rem; }
    .hosting-editorial-page .hosting-trust__metric-val { font-size: clamp(1.45rem, 4.5vw, 2rem); }
}
@media (max-width: 480px) {
    .hosting-editorial-page .hosting-trust__metrics { gap: 0.75rem; }
    .hosting-editorial-page .hosting-trust__metric { padding: 1rem; }
    .hosting-editorial-page .hosting-trust__metric-val { font-size: clamp(1.3rem, 5.2vw, 1.55rem); }
    .hosting-editorial-page .hosting-links-bridge__actions { flex-direction: column; }
    .hosting-editorial-page .hosting-links-bridge__actions .btn { justify-content: center; }
}
@media (hover: hover) and (pointer: fine) {
    .hosting-editorial-page .hosting-feat-card:hover .hosting-feat-card__icon { transform: rotate(-7deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .hosting-editorial-page :is(.hosting-feat-card, .hosting-price-card):hover,
    .hosting-editorial-page .hosting-feat-card:hover .hosting-feat-card__icon,
    .hosting-editorial-page .hosting-hero__actions .btn { transform: none; }
}

/* ============================================================
   X. CONTACT PAGE — DETAILS, AMELIA AND DIRECT MESSAGE
   ============================================================ */
.contact-editorial-page .contact-page-hero { position: relative; overflow: hidden; padding-block: clamp(9.5rem, 11vw, 11rem) clamp(4rem, 7vw, 6rem); background: radial-gradient(ellipse at 90% 35%, var(--ambient-red), transparent 55%), var(--bg); }
.contact-editorial-page .contact-page-hero__inner { max-width: 1150px; }
.contact-editorial-page .contact-page-hero__title { font-family: var(--font-heading); font-size: clamp(2.5rem, 4.8vw, 4.75rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; margin: 0; }
.contact-editorial-page .contact-page-hero__title .text-gradient { color: var(--accent-from); -webkit-text-fill-color: currentColor; }
.contact-editorial-page .contact-page-hero__sub { max-width: 750px; margin-top: 2rem; font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.85; color: var(--silver); }
.contact-editorial-page .contact-page-hero__sub a { border-bottom: 1px solid var(--border-accent); transition: border-color 0.3s; }
.contact-editorial-page .contact-page-hero__sub a:hover { border-color: var(--accent-from); }
.contact-editorial-page .contact-page-body { background: var(--paper); }
.contact-editorial-page .contact-page-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.7fr); gap: clamp(2.5rem, 4vw, 4rem); }
.contact-editorial-page .contact-page-details { --text: var(--ink); --text-sub: #53555a; --text-muted: #686a6e; --border: rgba(23,25,28,0.14); position: sticky; top: 7.5rem; padding: 0; gap: 1.75rem; min-width: 0; }
.contact-editorial-page .contact-detail-group { min-width: 0; gap: 0.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.contact-editorial-page .contact-detail-label { color: #c8101a; font-family: var(--font-sans); font-size: clamp(0.68rem, 0.8vw, 0.78rem); font-weight: 700; letter-spacing: 0.12em; }
.contact-editorial-page .contact-detail-value { color: var(--ink); font-family: var(--font-sans); font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.6; overflow-wrap: anywhere; }
.contact-editorial-page a.contact-detail-value { align-self: flex-start; }
.contact-editorial-page a.contact-detail-value:hover { color: #c8101a; }
.contact-editorial-page .contact-socials { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
.contact-editorial-page .contact-socials a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--r-button); font-size: clamp(0.72rem, 0.8vw, 0.8rem); font-weight: 600; line-height: 1.6; color: var(--ink); transition: background 0.3s, border-color 0.3s, color 0.3s; }
.contact-editorial-page .contact-socials a:hover { background: var(--accent-from); border-color: var(--accent-from); color: var(--paper); }
.contact-editorial-page .contact-availability { flex: none; max-width: 100%; padding: 0.8rem 1rem; border: 1px solid rgba(34,197,94,0.25); background: rgba(34,197,94,0.07); gap: 0.65rem; }
.contact-editorial-page .contact-availability__text { color: #17713b; font-family: var(--font-sans); font-size: clamp(0.7rem, 0.8vw, 0.8rem); line-height: 1.7; letter-spacing: 0; }

/* The booking panel stays still and unclipped for dropdowns and calendars. */
.contact-editorial-page .contact-page-form-wrap { min-width: 0; isolation: auto; will-change: auto; }
.contact-editorial-page .contact-page-glow { display: none; }
.contact-editorial-page .contact-amelia-wrap.glass-card { display: block; width: 100%; aspect-ratio: auto; min-height: 0; padding: clamp(1.5rem, 2.5vw, 2.5rem); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; transform: none; box-shadow: 0 20px 50px rgba(23,25,28,0.1); transition: border-color 0.3s; }
.contact-editorial-page .contact-amelia-wrap.glass-card:hover { transform: none; border-color: var(--border-accent); box-shadow: 0 20px 50px rgba(23,25,28,0.1); }
.contact-editorial-page .contact-booking-title { font-family: var(--font-heading); font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; margin: 0 0 2rem; }
.contact-editorial-page .contact-amelia-wrap :is(.amelia-v2-booking, .am-fs__wrapper) { max-width: 100%; min-width: 0; }
.contact-editorial-page .contact-amelia-wrap .am-fs__wrapper {
    --am-c-primary: var(--accent-from) !important;
    --am-c-main-bgr: var(--bg-card) !important;
    --am-c-main-heading-text: var(--text) !important;
    --am-c-main-text: var(--text-sub) !important;
    --am-c-inp-bgr: var(--bg) !important;
    --am-c-inp-border: rgba(255,255,255,0.12) !important;
    --am-c-inp-text: var(--text) !important;
    --am-c-inp-placeholder: var(--text-muted) !important;
    --am-c-drop-bgr: var(--bg-raised) !important;
    --am-c-drop-text: var(--text) !important;
    --am-c-btn-prim: var(--accent-from) !important;
    --am-c-btn-prim-text: var(--text) !important;
    --am-c-btn-sec: var(--bg) !important;
    --am-c-btn-sec-text: var(--text) !important;
    --am-font-family: var(--font-sans) !important;
}
.contact-editorial-page .contact-amelia-wrap :is(button, input, [role="combobox"]):focus-visible { outline: 2px solid var(--accent-from) !important; outline-offset: 3px; }
.contact-editorial-page .contact-amelia-wrap .am-select {
    --am-c-select-bgr: var(--bg) !important;
    --am-c-select-border: rgba(255,255,255,0.12) !important;
    --am-c-select-text: var(--text) !important;
    --am-c-select-placeholder: var(--text-muted) !important;
    --am-font-family: var(--font-sans) !important;
}
.contact-editorial-page .contact-amelia-wrap .am-button--primary {
    --am-c-btn-first: var(--accent-from) !important;
    --am-c-btn-second: var(--text) !important;
    --am-c-btn-first-op80: rgba(237,28,36,0.8) !important;
    --am-c-btn-first-op30: rgba(237,28,36,0.3) !important;
    --am-c-btn-first-op20: rgba(237,28,36,0.1) !important;
}
.contact-editorial-page .contact-page-cf7 { background: radial-gradient(ellipse at 50% 80%, var(--ambient-red), transparent 65%), var(--bg); }
.contact-editorial-page .contact-page-cf7__inner { max-width: 840px; margin-inline: auto; text-align: center; }
.contact-editorial-page .contact-page-cf7__title { color: var(--text); font-family: var(--font-heading); font-size: clamp(1.9rem, 3.5vw, 3.3rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.035em; margin: 0.5rem 0 2.5rem; }
.contact-editorial-page .contact-form-wrap.cf7-secondary { text-align: left; background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--border); border-radius: 20px; padding: clamp(1.5rem, 4vw, 3rem); box-shadow: 0 0 60px rgba(237,28,36,0.05); }
.contact-editorial-page .contact-links-bridge { background: var(--bg); }
.contact-editorial-page .contact-links-bridge__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.contact-editorial-page .contact-links-bridge__actions .btn { white-space: normal; line-height: 1.6; max-width: 100%; }
@media (max-width: 1100px) {
    .contact-editorial-page .contact-page-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .contact-editorial-page .contact-page-details { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .contact-editorial-page .contact-detail-group { flex: none; }
    .contact-editorial-page .contact-availability { grid-column: 1 / -1; width: fit-content; }
}
@media (max-width: 768px) {
    .contact-editorial-page .contact-page-hero { padding-block: 8.25rem 4rem; }
    .contact-editorial-page .contact-page-hero__title { font-size: clamp(1.75rem, 6.8vw, 3rem); line-height: 1.15; letter-spacing: -0.025em; }
    .contact-editorial-page .contact-page-hero__sub { margin-top: 1.5rem; }
    .contact-editorial-page .contact-booking-title { font-size: clamp(1.3rem, 3.6vw, 1.8rem); }
    .contact-editorial-page .contact-amelia-wrap.glass-card { padding: 1.5rem; }
    .contact-editorial-page .contact-page-cf7__title { font-size: clamp(1.55rem, 6vw, 2.6rem); }
}
@media (max-width: 600px) {
    .contact-editorial-page .contact-page-details { grid-template-columns: minmax(0, 1fr); }
    .contact-editorial-page .contact-availability { width: fit-content; }
    .contact-editorial-page .contact-links-bridge__actions { flex-direction: column; }
    .contact-editorial-page .contact-links-bridge__actions .btn { justify-content: center; }
}
@media (max-width: 480px) {
    .contact-editorial-page .contact-amelia-wrap.glass-card { border-radius: 16px; padding: 1.5rem 1rem; }
    .contact-editorial-page .contact-form-wrap.cf7-secondary { border-radius: 16px; }
    .contact-editorial-page .contact-form-wrap .wpcf7-form input[type="submit"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-editorial-page .contact-availability__dot { animation: none; }
}

/* ============================================================
   Y. MOBILE EDITION — BOLD TYPE, NATIVE SWIPE AND TOUCH LIGHT
   Desktop remains governed by the existing editorial sections.
   ============================================================ */
.homepage-editorial .hero-copy { display: contents; }
@media (max-width: 768px) {
    .homepage-editorial { --section-py: 4.5rem; }
    .homepage-editorial .site-header,
    .homepage-editorial .site-header.scrolled { padding-block: calc(0.9rem + env(safe-area-inset-top, 0px)) 0.9rem; background: rgba(16,17,20,0.94); }
    .homepage-editorial .hamburger { border: 1px solid rgba(237,28,36,0.35); border-radius: 12px; background: rgba(237,28,36,0.08); }
    .homepage-editorial .hamburger span { background: var(--paper); }
    .homepage-editorial .hamburger span:nth-child(2) { width: 70%; align-self: center; }
    .homepage-editorial .page-scroll-progress { height: 2px; }
    .homepage-editorial :is(.hero, .servicii-hero, .portofoliu-hero, .about-hero, .hosting-hero, .contact-page-hero) { padding-top: 7.5rem; }
    .homepage-editorial.editorial-touch-edition :is(.hero, .servicii-hero, .portofoliu-hero, .about-hero, .hosting-hero, .contact-page-hero) { padding-bottom: 7.5rem; }
    .homepage-editorial :is(.servicii-hero__title, .portofoliu-hero__title, .about-hero__title, .hosting-hero__title, .contact-page-hero__title) { font-size: clamp(2rem, 9vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
    .homepage-editorial .hero-title { font-weight: 700; line-height: 1; }
    .homepage-editorial .hero-title::before { width: 48px; height: 2px; margin-bottom: 1.4rem; }
    .homepage-editorial .hero-title-line:first-child { font-size: clamp(1.5rem, 8.5vw, 3.5rem); margin-bottom: 0.4rem; color: var(--silver); }
    .homepage-editorial .hero-title-line:nth-child(2) { max-width: 100%; font-size: clamp(2.8rem, 14vw, 6.5rem); line-height: 0.94; letter-spacing: -0.045em; text-wrap: balance; }
    .homepage-editorial .hero-title-city { font-size: clamp(1.85rem, 9.2vw, 4rem) !important; letter-spacing: 0 !important; margin-top: 0.4rem !important; }
    .homepage-editorial :is(.hero-subtitle, .servicii-hero__subtitle, .portofoliu-hero__subtitle, .about-hero__subtitle, .hosting-hero__sub, .contact-page-hero__sub) { font-size: 0.95rem; line-height: 1.85; margin-top: 1.75rem; }
    .homepage-editorial :is(.hero-ctas, .portofoliu-hero__cta-group, .hosting-hero__actions) { gap: 0.75rem; }
    .homepage-editorial :is(.hero-ctas, .portofoliu-hero__cta-group, .hosting-hero__actions) .btn-gradient,
    .homepage-editorial .servicii-hero__inner > .btn-gradient,
    .homepage-editorial .about-hero__inner > .btn-gradient { border-radius: var(--r-button); justify-content: flex-start; padding: 1.05rem 3.1rem 1.05rem 1.3rem; min-height: 56px; }
    .homepage-editorial :is(.portofoliu-hero__cta-group, .hosting-hero__actions, .servicii-hero__inner, .about-hero__inner) .btn-gradient .btn-icon { display: none; }
    .homepage-editorial :is(.hero-ctas, .portofoliu-hero__cta-group, .hosting-hero__actions) .btn-gradient::before,
    .homepage-editorial .servicii-hero__inner > .btn-gradient::before,
    .homepage-editorial .about-hero__inner > .btn-gradient::before { content: '\2197'; position: absolute; right: 1.2rem; color: var(--paper); font-size: 1.3rem; line-height: 1; }
    .homepage-editorial :is(.hero-ctas, .portofoliu-hero__cta-group, .hosting-hero__actions) .btn:active { transform: scale(0.98); }
    .homepage-editorial .editorial-atmosphere::before { background: radial-gradient(ellipse at 85% 30%, rgba(237,28,36,0.32), transparent 62%), radial-gradient(ellipse at 5% 70%, rgba(122,157,211,0.18), transparent 55%); }
    .homepage-editorial .editorial-atmosphere::after { background-size: 40px 40px; opacity: 0.75; mask-image: linear-gradient(125deg, transparent 5%, black 85%); -webkit-mask-image: linear-gradient(125deg, transparent 5%, black 85%); }
    .homepage-editorial .mobile-hero-beam { position: absolute; top: -20%; right: -20%; z-index: 0; width: 72%; height: 140%; transform: rotate(25deg); border-left: 1px solid rgba(237,28,36,0.25); border-right: 1px solid rgba(242,242,239,0.06); background: linear-gradient(90deg, rgba(237,28,36,0.06), transparent 50%); pointer-events: none; }
    .homepage-editorial .mobile-brand-ribbon { display: block; position: absolute; bottom: 1.5rem; left: -5%; z-index: 2; width: 110%; overflow: hidden; background: var(--accent-from); color: var(--paper); transform: rotate(-3deg); padding-block: 0.75rem; border-block: 1px solid rgba(255,255,255,0.2); pointer-events: none; }
    .homepage-editorial .mobile-brand-track { display: flex; width: max-content; animation: mobile-brand-flow 22s linear infinite; animation-play-state: paused; }
    .homepage-editorial .mobile-brand-group { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; flex-shrink: 0; }
    .homepage-editorial .mobile-brand-word { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; line-height: 1.1; letter-spacing: -0.035em; white-space: nowrap; }
    .homepage-editorial .editorial-hero-active .mobile-brand-track { animation-play-state: running; }
    .homepage-editorial.editorial-effects-paused .mobile-brand-track { animation-play-state: paused; }
    .homepage-editorial h2 { font-size: clamp(1.65rem, 7.2vw, 3.25rem); line-height: 1.1; }
    .homepage-editorial .section-label { letter-spacing: 0.12em; }
    .homepage-editorial .section-label::before { width: 5px; height: 12px; margin-right: 0.4rem; }

    /* A glimpse of the next card and native scrolling make swipe discoverable. */
    .homepage-editorial :is(.services-editorial-grid, .pricing-grid, .testimonials-grid, .help-cards-grid, .hosting-pricing__grid) { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% - 2 * var(--gutter) - 1.35rem); gap: 1rem; align-items: stretch; width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0.65rem var(--gutter) 1.3rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--accent-from) transparent; -webkit-overflow-scrolling: touch; }
    .homepage-editorial :is(.services-editorial-grid, .pricing-grid, .testimonials-grid, .help-cards-grid, .hosting-pricing__grid) > * { grid-column: auto !important; min-width: 0; scroll-snap-align: start; }
    .homepage-editorial .services-editorial-grid .service-card:nth-child(n) { display: flex; padding: 1.6rem; border-radius: 20px; }
    .homepage-editorial .services-editorial-grid .service-card:nth-child(n) h3 { font-size: clamp(1.55rem, 5.5vw, 2.4rem); }
    .homepage-editorial .service-num { font-size: 2.25rem; line-height: 1; color: var(--accent-from); }
    .homepage-editorial .service-card .service-footer { grid-column: auto; }
    .homepage-editorial .pricing-card-inner { padding: 3rem 1.5rem 1.75rem; }
    .homepage-editorial .testimonial-card { border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card); padding: 1.75rem; }
    .homepage-editorial .mobile-rail-controls { display: flex; align-items: center; gap: 0.65rem; margin-top: 1rem; min-width: 0; }
    .homepage-editorial .mobile-rail-hint { flex: 1; min-width: 0; color: var(--text-muted); font-size: clamp(0.6rem, 2.4vw, 0.75rem); line-height: 1.5; }
    .homepage-editorial .mobile-rail-count { color: var(--accent-from); font-family: var(--font-sans); font-weight: 700; font-size: 0.7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .homepage-editorial .mobile-rail-button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-button); border: 1px solid var(--border-hover); background: var(--bg-card); color: var(--text); font-size: 1.35rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
    .homepage-editorial .mobile-rail-button:not(:disabled):active { border-color: var(--accent-from); background: var(--accent-from); }
    .homepage-editorial .mobile-rail-button:disabled { opacity: 0.3; cursor: default; }
    .homepage-editorial .mobile-paint-card { position: relative; isolation: isolate; }
    .homepage-editorial .mobile-card-light { display: block; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at var(--touch-x, 85%) var(--touch-y, 0%), rgba(237,28,36,0.15), transparent 65%), linear-gradient(145deg, rgba(255,255,255,0.03), transparent 55%); transition: opacity 0.7s; }
    .homepage-editorial :is(.mobile-card-current, .mobile-card-touched) > .mobile-card-light { opacity: 1; }
    .homepage-editorial :is(.service-card, .pricing-card, .project-card, .portfolio-item, .glass-card, .help-card, .team-card, .team-staff-card, .hosting-feat-card, .hosting-price-card, .testimonial-card).mobile-card-current { border-color: rgba(237,28,36,0.7); }
    .homepage-editorial .mobile-card-current > .editorial-card-sheen::before { animation: editorial-card-sweep 1.1s var(--motion-ease) both; }
    .homepage-editorial :is(.mobile-paint-card, .glass-card):hover { transform: none; }
    .homepage-editorial .mobile-card-touched > .mobile-card-light { background: radial-gradient(circle at var(--touch-x) var(--touch-y), rgba(237,28,36,0.3), transparent 65%); }
    .homepage-editorial .mobile-project-mark { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-from); color: var(--paper); font: 1.5rem/1 var(--font-sans); box-shadow: 0 0 24px rgba(237,28,36,0.18); pointer-events: none; }
    .portfolio-editorial-page .pv-overlay { right: 1rem; bottom: 1rem; min-height: 44px; border-radius: 12px; border-color: var(--accent-from); background: var(--accent-from); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .portfolio-editorial-page .pv-overlay__label { font-size: 0.65rem; }
    .homepage-editorial .portfolio-overlay { min-height: 140px; background: var(--bg-card); }
    .homepage-editorial .portfolio-overlay::after { display: none; }
    .homepage-editorial .hero-stat-bar { border: 0; padding-block: 0; gap: 0.65rem; margin-top: 2rem; }
    .homepage-editorial .hero-stat { padding: 1.25rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.035); }
    .homepage-editorial .hero-stat:first-child { background: var(--accent-from); border-color: var(--accent-from); }
    .homepage-editorial .hero-stat:first-child :is(.hero-stat__val, .hero-stat__lbl) { color: var(--paper); }
    .homepage-editorial .hero-stat__val { font-size: clamp(1.75rem, 7.2vw, 3rem); }
    .homepage-editorial .hero-stat__lbl { font-size: 0.65rem; }
    .homepage-editorial .process-grid { gap: 0; }
    .homepage-editorial .process-step { padding: 2rem 0 2rem 1.5rem; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .homepage-editorial .process-step.step-active { border-left-color: var(--accent-from); }
    .homepage-editorial .process-step::after { display: none; }
    .homepage-editorial .process-step::before { content: ''; position: absolute; top: 2.25rem; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); transition: background 0.4s, box-shadow 0.4s; }
    .homepage-editorial .process-step.step-active::before { background: var(--accent-from); box-shadow: 0 0 16px rgba(237,28,36,0.4); }
    .homepage-editorial .process-step .process-num { font-size: 3.5rem; }
    .about-editorial-page .value-item.mobile-card-current .value-item__line { width: 100%; transition: width 0.8s var(--motion-ease); }
    .contact-editorial-page .contact-page-details { gap: 0.8rem; }
    .contact-editorial-page .contact-detail-group:not(.contact-availability) { padding: 1.25rem; border: 1px solid rgba(23,25,28,0.12); border-radius: 16px; background: rgba(255,255,255,0.45); }
    .contact-editorial-page .contact-booking-title { border-left: 3px solid var(--accent-from); padding-left: 1rem; }
    .homepage-editorial .footer-headline { font-size: clamp(2.1rem, 9.2vw, 4rem); line-height: 1.05; }

    /* Menu links retain their real destinations and native link semantics. */
    .homepage-editorial .mobile-nav { align-items: stretch; justify-content: flex-start; gap: 0; padding: calc(6rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; background: radial-gradient(ellipse at 110% 70%, rgba(237,28,36,0.22), transparent 65%), var(--bg); }
    .homepage-editorial .mobile-nav > li { list-style: none; }
    .homepage-editorial .mobile-nav .mobile-menu-link { display: flex; align-items: center; gap: 1rem; min-height: 58px; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: clamp(1.65rem, 7.7vw, 3.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
    .homepage-editorial .mobile-nav.is-open .mobile-menu-link { animation: mobile-menu-enter 650ms var(--motion-ease) backwards; animation-delay: calc(var(--menu-order, 0) * 45ms); }
    .homepage-editorial .mobile-menu-number { font-family: var(--font-sans); font-weight: 500; color: var(--accent-from); font-size: 0.68rem; letter-spacing: 0; flex-shrink: 0; }
    .homepage-editorial .mobile-menu-brand { position: absolute; left: var(--gutter); top: calc(2rem + env(safe-area-inset-top, 0px)); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; color: var(--paper); }
    .homepage-editorial .mobile-nav__close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border-accent); border-radius: 12px; background: rgba(237,28,36,0.08); }
    .homepage-editorial .mobile-nav > .btn { flex-shrink: 0; justify-content: center; margin-top: 2rem !important; border-radius: var(--r-button); }
}
@media (max-width: 768px) and (max-height: 500px) {
    .homepage-editorial .mobile-nav { padding-top: calc(4.75rem + env(safe-area-inset-top, 0px)); }
    .homepage-editorial .mobile-nav .mobile-menu-link { font-size: 1.35rem; min-height: 44px; padding-block: 0.5rem; }
}
@keyframes mobile-brand-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mobile-menu-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .homepage-editorial .mobile-brand-track,
    .homepage-editorial .mobile-card-current > .editorial-card-sheen::before,
    .homepage-editorial .mobile-nav.is-open .mobile-menu-link { animation: none; }
    .homepage-editorial .mobile-card-light,
    .homepage-editorial .value-item__line { transition: none; }
    .homepage-editorial :is(.hero-ctas, .portofoliu-hero__cta-group, .hosting-hero__actions) .btn:active { transform: none; }
}

/* Homepage mobile hero: an editorial cover with a dark action panel. */
@media (max-width: 768px) {
    .homepage-editorial .hero {
        --text: var(--ink);
        --text-sub: #53555a;
        --text-muted: #686a6e;
        --silver: #53555a;
        padding-top: 7rem;
        background: var(--paper);
        color: var(--ink);
        border-bottom: 1px solid rgba(23,25,28,0.14);
    }
    .homepage-editorial.editorial-touch-edition .hero { padding-bottom: 4.5rem; }
    .homepage-editorial .hero .editorial-atmosphere::before { background: radial-gradient(ellipse at 95% 5%, rgba(237,28,36,0.12), transparent 55%), radial-gradient(ellipse at 0% 20%, rgba(122,157,211,0.08), transparent 55%); }
    .homepage-editorial .hero .editorial-atmosphere::after { background-image: linear-gradient(rgba(23,25,28,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,28,0.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, black, transparent 55%); -webkit-mask-image: linear-gradient(180deg, black, transparent 55%); animation: none; }
    .homepage-editorial .hero .mobile-hero-beam { display: none; }
    .homepage-editorial .hero-title { color: var(--ink); }
    .homepage-editorial .hero-title::before { display: none; }
    .homepage-editorial .hero-title-line:first-child { margin: 0 0 1.4rem; padding-left: 1rem; border-left: 3px solid var(--accent-from); font-size: 1rem; line-height: 1.25; color: var(--ink); letter-spacing: 0.06em; }
    .homepage-editorial .hero-title-line:nth-child(2) { font-size: clamp(3rem, 16vw, 6.8rem); line-height: 0.93; letter-spacing: -0.055em; }
    .homepage-editorial .hero-word { display: block; }
    .homepage-editorial .hero-word--design { text-align: right; color: var(--accent-from); }
    .homepage-editorial .hero-title-city { display: block; margin-top: 1rem !important; padding-top: 0.85rem; border-top: 1px solid rgba(23,25,28,0.2); font-size: clamp(1.05rem, 4vw, 1.6rem) !important; line-height: 1.2; color: #c8101a; letter-spacing: 0.06em !important; }
    .homepage-editorial .mobile-hero-aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(260px circle at var(--hero-touch-x, 85%) var(--hero-touch-y, 10%), rgba(237,28,36,0.16), transparent 75%); opacity: 0; transition: opacity 0.65s; }
    .homepage-editorial .mobile-hero-touched .mobile-hero-aura { opacity: 1; }
    .homepage-editorial .hero-copy {
        --text: #f2f2ef;
        --text-sub: #b9b9b6;
        --text-muted: #a4a6ac;
        --silver: #c5cad3;
        display: block; position: relative; margin-top: 1.85rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, rgba(237,28,36,0.15), transparent 65%), var(--bg); box-shadow: 0 16px 40px rgba(23,25,28,0.08);
    }
    .homepage-editorial .hero-copy .hero-subtitle { margin-top: 0; color: var(--silver); font-size: 0.9rem; line-height: 1.85; }
    .homepage-editorial .hero-copy .hero-ctas { margin-top: 1.5rem; gap: 0.6rem; }
    .homepage-editorial .hero-copy .hero-ctas .btn { width: 100%; min-height: 52px; font-size: 0.72rem; letter-spacing: 0.035em; }
    .homepage-editorial .hero-copy .btn-hero-secondary { border-radius: var(--r-button); border-color: rgba(255,255,255,0.18); }
    .homepage-editorial .hero .mobile-brand-ribbon { bottom: 0.75rem; left: 0; width: 100%; transform: none; padding-block: 0.4rem; background: transparent; color: var(--ink); border: 0; opacity: 0.55; }
    .homepage-editorial .hero .mobile-brand-word { font-size: 0.67rem; letter-spacing: 0.08em; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .homepage-editorial .mobile-hero-aura { display: none; }
}

/* ============================================================
   Z. CASE STUDIES — EDITORIAL STORY, PROJECT IMAGES AND RESULTS
   ============================================================ */
.case-editorial-page .case-study-content { min-width: 0; }
.case-editorial-page :is(.cs-challenge, .cs-tech, .cs-data-section, .cs-gallery-section, .cs-testimonial-section, .cs-cta-section) { padding-block: var(--section-py); scroll-margin-top: 110px; }
.case-editorial-page .cs-hero { position: relative; isolation: isolate; padding-top: clamp(8.5rem, 10vw, 10rem); background: radial-gradient(ellipse at 95% 10%, var(--ambient-red), transparent 55%), var(--bg); }
.case-editorial-page .cs-hero > :is(.container, .cs-hero__visual, .cs-hero__meta-bar) { position: relative; z-index: 1; }
.case-editorial-page .cs-hero__content { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); column-gap: clamp(2rem, 5vw, 5rem); row-gap: 1.5rem; padding-bottom: 4rem; }
.case-editorial-page .cs-back-link { grid-column: 1 / -1; justify-self: start; margin: 0 0 1rem; min-height: 44px; padding: 0.5rem 0.85rem; border: 1px solid var(--border); border-radius: var(--r-button); color: var(--silver); font-size: 0.7rem; }
.case-editorial-page .cs-back-link:hover { color: var(--text); border-color: var(--accent-from); }
.case-editorial-page .cs-hero__title { grid-column: 1; grid-row: 2 / 4; align-self: start; max-width: 100%; margin: 0; font-family: var(--font-heading); font-size: clamp(2.7rem, 4.7vw, 4.8rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.045em; text-wrap: balance; }
.case-editorial-page .cs-hero__tagline { grid-column: 2; align-self: end; margin: 0; max-width: none; color: var(--silver); font-size: clamp(0.98rem, 1.25vw, 1.16rem); line-height: 1.9; }
.case-editorial-page .cs-hero__tagline .serif-italic { font-family: var(--font-sans); font-size: inherit; font-style: normal; font-weight: 400; line-height: inherit; letter-spacing: 0; }
.case-editorial-page .cs-scroll-cta { grid-column: 2; justify-self: start; align-self: start; display: inline-flex; gap: 1.25rem; margin: 0; padding: 0.65rem 0.65rem 0.65rem 1.1rem; min-height: 52px; border: 1px solid var(--border-accent); border-radius: 12px; background: var(--accent-from); color: var(--paper); font-size: 0.68rem; letter-spacing: 0.05em; }
.case-editorial-page .cs-scroll-cta__arrow { width: 32px; height: 32px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 7px; color: var(--paper); }
.case-editorial-page .cs-scroll-cta:hover .cs-scroll-cta__arrow { background: rgba(255,255,255,0.2); color: var(--paper); transform: translateY(2px); }
.case-editorial-page .cs-hero__visual { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); padding-bottom: 3rem; }
.case-editorial-page .cs-hero__visual-inner { max-height: none; aspect-ratio: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card); }
.case-editorial-page .cs-hero__img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; transform: none; }
.case-editorial-page .cs-hero__visual:hover .cs-hero__img { transform: none; }
.case-editorial-page .cs-hero__visual-overlay { display: none; }
.case-editorial-page .cs-hero__meta-bar { padding-block: 1.75rem; background: var(--bg-raised); border-color: var(--border); }
.case-editorial-page .cs-hero__pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.case-editorial-page .cs-pill { min-width: 0; gap: 0.65rem; }
.case-editorial-page .cs-pill__label { color: var(--accent-from); font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em; }
.case-editorial-page .cs-pill__val { min-width: 0; display: block; font-size: clamp(0.78rem, 1vw, 0.9rem); line-height: 1.8; overflow-wrap: anywhere; }
.case-editorial-page .cs-pill__val svg { display: inline-block; margin-left: 0.25rem; vertical-align: 0.05em; }
.case-editorial-page .cs-pill--link { transition: border-color 0.3s, background 0.3s; }
.case-editorial-page .cs-pill--link:hover { opacity: 1; }
.case-editorial-page :is(.cs-challenge, .cs-data-section, .cs-testimonial-section) { --text: var(--ink); --text-sub: #53555a; --text-muted: #686a6e; --border: rgba(23,25,28,0.14); --border-hover: rgba(23,25,28,0.28); background: var(--paper); color: var(--ink); }
.case-editorial-page .cs-challenge__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: clamp(2rem, 6vw, 6rem); }
.case-editorial-page :is(.cs-challenge__left, .cs-challenge__right) { min-width: 0; }
.case-editorial-page .cs-challenge__left { top: 7rem; }
.case-editorial-page .cs-shield-icon { margin-bottom: 1.5rem; }
.case-editorial-page :is(.cs-challenge__heading, .cs-data__title) { font-family: var(--font-heading); font-size: clamp(2.1rem, 3.8vw, 3.6rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; color: var(--ink); }
.case-editorial-page .cs-challenge__heading-em { color: #c8101a; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; font-family: inherit; font-style: normal; }
.case-editorial-page .cs-challenge__heading { font-size: clamp(2rem, 3vw, 3rem); }
.case-editorial-page .cs-challenge__heading-em { text-transform: uppercase; }
.case-editorial-page .cs-raw-badge { padding: 0.55rem 0.75rem; border-radius: 7px; color: var(--ink); border-color: var(--border); font-size: 0.6rem; letter-spacing: 0.06em; }
.case-editorial-page .cs-raw-badge--filled { background: var(--accent-from); border-color: var(--accent-from); color: var(--paper); }
.case-editorial-page .cs-challenge__body { color: var(--text-sub); font-size: 1rem; line-height: 1.95; }
.case-editorial-page .cs-challenge__body p:first-child { color: var(--ink); font-size: clamp(1.03rem, 1.3vw, 1.16rem); line-height: 1.9; }
.case-editorial-page :is(.cs-challenge__body, .cs-tech__main-body) :is(p, ul, ol) { margin-bottom: 1.25rem; }
.case-editorial-page :is(.cs-challenge__body, .cs-tech__main-body) :is(ul, ol) { padding-left: 1.25rem; }
.case-editorial-page :is(.cs-challenge__body, .cs-tech__main-body) li { margin-block: 0.65rem; }
.case-editorial-page :is(.cs-challenge__body, .cs-tech__main-body) a { color: var(--accent-from); text-decoration: underline; text-underline-offset: 0.2em; }
.case-editorial-page .cs-text-link { min-height: 44px; color: #c8101a; font-size: 0.7rem; }
.case-editorial-page .cs-challenge__media { margin-top: 2rem; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; }
.case-editorial-page .cs-challenge__media img { width: 100%; height: auto; display: block; }
.case-editorial-page .cs-image-link { position: relative; display: block; width: 100%; min-width: 0; color: var(--paper); }
.case-editorial-page .cs-image-zoom { position: absolute; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-from); color: var(--paper); font: 1.5rem/1 var(--font-sans); pointer-events: none; box-shadow: 0 0 24px rgba(237,28,36,0.15); }
.case-editorial-page .cs-image-link:focus-visible { outline-color: var(--accent-from); outline-offset: -4px; }
.case-editorial-page .cs-tech { background: radial-gradient(ellipse at 80% 40%, var(--ambient-red), transparent 65%), var(--bg); }
.case-editorial-page .cs-tech__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; }
.case-editorial-page .cs-tech__card { min-width: 0; position: relative; isolation: isolate; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: clamp(1.5rem, 3vw, 3rem); overflow: hidden; transition: border-color 0.3s, background 0.3s; }
.case-editorial-page .cs-tech__card:hover { border-color: var(--accent-from); background: var(--bg-card); }
.case-editorial-page .cs-tech__card--main { gap: 1.5rem; }
.case-editorial-page .cs-tech__terminal { font-size: 1.8rem; }
.case-editorial-page :is(.cs-tech__sublabel, .cs-tech__card-label) { font-size: 0.65rem; letter-spacing: 0.1em; }
.case-editorial-page .cs-tech__main-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 2.7vw, 2.8rem); font-weight: 700; line-height: 1.16; margin-top: 0; }
.case-editorial-page .cs-tech__main-body { color: var(--text-sub); font-size: clamp(0.93rem, 1.1vw, 1.02rem); line-height: 1.9; }
.case-editorial-page .cs-tech__status { gap: 1rem; font-size: 0.6rem; letter-spacing: 0.06em; line-height: 1.7; }
.case-editorial-page .cs-tech__list-item { font-family: var(--font-heading); font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 700; padding-block: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.case-editorial-page .cs-tech__meta-val { font-family: var(--font-heading); font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.case-editorial-page .cs-tech__meta-img { min-height: 0; border-radius: 12px; background: var(--bg); }
.case-editorial-page .cs-tech__meta-img img { width: 100%; height: auto; max-height: 330px; object-fit: contain; }
.case-editorial-page .cs-tech__attribution { font-size: 0.61rem; letter-spacing: 0.07em; line-height: 1.8; overflow-wrap: anywhere; }
.case-editorial-page .cs-data__layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: clamp(2rem, 6vw, 6rem); }
.case-editorial-page .cs-data__header { min-width: 0; }
.case-editorial-page .cs-data__title .serif-italic { color: #c8101a; }
.case-editorial-page .cs-data__sub { max-width: 40ch; color: var(--text-sub); font-size: 0.95rem; line-height: 1.9; }
.case-editorial-page .cs-data__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.case-editorial-page .cs-data__card { --text: #f2f2ef; --text-muted: #a4a6ac; min-width: 0; gap: 0.85rem; padding: clamp(1.5rem, 2.5vw, 2.5rem); border-radius: 20px; border-color: rgba(255,255,255,0.08); background: var(--bg-card); }
.case-editorial-page .cs-data__card:hover { border-color: var(--accent-from); transform: none; }
.case-editorial-page .cs-data__card::after { background: var(--accent-from); }
.case-editorial-page .cs-data__num { font-family: var(--font-heading); font-size: clamp(1.7rem, 3.4vw, 3.3rem); font-weight: 700; line-height: 1.2; background: none; -webkit-text-fill-color: currentColor; color: var(--accent-from); overflow-wrap: anywhere; }
.case-editorial-page .cs-data__label { color: var(--text); font-size: clamp(0.65rem, 0.85vw, 0.8rem); letter-spacing: 0.035em; line-height: 1.7; }
.case-editorial-page .cs-data__sublabel { color: var(--text-muted); font-size: 0.58rem; line-height: 1.7; letter-spacing: 0.05em; }
.case-editorial-page .cs-gallery-section { background: var(--bg-raised); }
.case-editorial-page .cs-label { background: none; padding: 0; border: 0; border-radius: 0; color: var(--accent-from); font-size: 0.65rem; letter-spacing: 0.12em; }
.case-editorial-page .cs-gallery-header h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 700; line-height: 1.15; }
.case-editorial-page .cs-gallery-item { min-width: 0; aspect-ratio: auto; border-radius: 20px; background: var(--bg-card); }
.case-editorial-page .cs-gallery-item:hover { transform: none; border-color: var(--accent-from); }
.case-editorial-page .cs-gallery-img { width: 100%; height: auto; object-fit: contain; }
.case-editorial-page .cs-gallery-item:hover .cs-gallery-img { transform: none; }
.case-editorial-page .cs-testimonial__quote { color: var(--ink); font-family: var(--font-heading); font-size: clamp(1.5rem, 2.8vw, 2.6rem); font-weight: 700; font-style: normal; line-height: 1.4; letter-spacing: -0.025em; }
.case-editorial-page .cs-testimonial__line { background: var(--accent-from); }
.case-editorial-page .cs-testimonial__role { color: #53555a; font-size: 0.72rem; line-height: 1.7; }
.case-editorial-page .cs-testimonial__cert { color: #686a6e; font-size: 0.62rem; line-height: 1.7; letter-spacing: 0.07em; overflow-wrap: anywhere; }
.case-editorial-page .cs-cta-section { background: radial-gradient(ellipse at 50% 70%, var(--ambient-red), transparent 65%), var(--bg); }
.case-editorial-page .cs-cta__glow { display: none; }
.case-editorial-page .cs-cta__inner h2 { max-width: 1050px; font-family: var(--font-heading); font-size: clamp(2.2rem, 4.5vw, 4.5rem); font-weight: 700; line-height: 1.13; }
.case-editorial-page .cs-cta__inner h2 .serif-italic { color: var(--accent-from); }
.case-editorial-page .cs-cta__desc { font-size: 1rem; line-height: 1.85; }
.case-editorial-page .cs-nav__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 1.5rem; }
.case-editorial-page .cs-nav__link { min-width: 0; min-height: 72px; padding: 1.5rem; gap: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.case-editorial-page .cs-nav__link svg { flex-shrink: 0; color: var(--accent-from); }
.case-editorial-page .cs-nav__link:hover { border-color: var(--accent-from); background: var(--bg-card); }
.case-editorial-page .cs-nav__text { min-width: 0; gap: 0.6rem; }
.case-editorial-page .cs-nav__title { font-family: var(--font-heading); font-size: clamp(0.9rem, 1.2vw, 1.15rem); line-height: 1.6; overflow-wrap: anywhere; }
.case-editorial-page .cs-nav__all { display: flex; justify-content: center; min-width: 90px; min-height: 52px; padding: 1rem; color: var(--silver); }
.case-editorial-page .cs-lightbox { width: calc(100% - 2rem); max-width: 1400px; height: calc(100dvh - 2rem); max-height: 1000px; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; background: var(--bg); color: var(--text); overflow: hidden; }
.case-editorial-page .cs-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1rem; }
.case-editorial-page .cs-lightbox::backdrop { background: rgba(0,0,0,0.86); }
.case-editorial-page .cs-lightbox__toolbar { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.case-editorial-page .cs-lightbox__counter { flex: 1; color: var(--silver); font: 0.8rem/1.6 var(--font-sans); font-variant-numeric: tabular-nums; }
.case-editorial-page .cs-lightbox__button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-button); color: var(--text); font: 1.5rem/1 var(--font-sans); cursor: pointer; }
.case-editorial-page .cs-lightbox__button:not(:disabled):hover { border-color: var(--accent-from); background: var(--accent-from); }
.case-editorial-page .cs-lightbox__button:disabled { opacity: 0.3; cursor: default; }
.case-editorial-page .cs-lightbox__original { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 0.5rem; color: var(--silver); font-size: 0.75rem; text-decoration: underline; text-underline-offset: 0.25em; }
.case-editorial-page .cs-lightbox__stage { min-height: 0; min-width: 0; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; }
.case-editorial-page .cs-lightbox__image { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.case-editorial-page .cs-lightbox__caption { color: var(--silver); font-size: 0.75rem; line-height: 1.7; margin: 0; max-height: 5.1em; overflow-y: auto; }
.case-editorial-page .cs-lightbox,
.case-editorial-page .cs-lightbox * { cursor: auto !important; }
.case-editorial-page .cs-lightbox :is(a, button:not(:disabled)) { cursor: pointer !important; }
@media (hover: hover) and (pointer: fine) {
    .case-editorial-page :is(.cs-tech__card, .cs-data__card):hover > .editorial-card-sheen::before { animation: editorial-card-sweep 950ms var(--motion-ease) both; }
}
@media (max-width: 1100px) {
    .case-editorial-page .cs-hero__content { grid-template-columns: minmax(0, 1fr); }
    .case-editorial-page .cs-hero__title { grid-row: auto; }
    .case-editorial-page :is(.cs-hero__tagline, .cs-scroll-cta) { grid-column: 1; }
    .case-editorial-page .cs-hero__tagline { max-width: 850px; }
}
@media (max-width: 900px) {
    .case-editorial-page :is(.cs-challenge__grid, .cs-data__layout, .cs-tech__grid) { grid-template-columns: minmax(0, 1fr); }
    .case-editorial-page .cs-tech__card--main { grid-row: auto; }
    .case-editorial-page .cs-challenge__left { position: static; }
}
@media (max-width: 768px) {
    .case-editorial-page .cs-hero { --text: var(--ink); --text-sub: #53555a; --text-muted: #686a6e; --silver: #53555a; padding-top: 7rem; background: var(--paper); color: var(--ink); }
    .case-editorial-page .cs-hero .editorial-atmosphere::before { background: radial-gradient(ellipse at 95% 5%, rgba(237,28,36,0.12), transparent 60%); }
    .case-editorial-page .cs-hero .editorial-atmosphere::after { background-image: linear-gradient(rgba(23,25,28,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,28,0.04) 1px, transparent 1px); mask-image: linear-gradient(180deg, black, transparent 55%); -webkit-mask-image: linear-gradient(180deg, black, transparent 55%); }
    .case-editorial-page .cs-hero__content { gap: 1.4rem; padding-bottom: 2.5rem; }
    .case-editorial-page .cs-back-link { margin-bottom: 0.35rem; color: #c8101a; border-color: rgba(23,25,28,0.16); }
    .case-editorial-page .cs-hero__title { font-size: clamp(1.8rem, 7.8vw, 3.5rem); line-height: 1.12; letter-spacing: -0.035em; color: var(--ink); }
    .case-editorial-page .cs-hero__tagline { font-size: 0.95rem; line-height: 1.85; }
    .case-editorial-page .cs-hero__meta-bar { background: transparent; padding-block: 0 2.5rem; border: 0; }
    .case-editorial-page .cs-hero__pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .case-editorial-page .cs-pill { padding: 1rem; border: 1px solid rgba(23,25,28,0.12); border-radius: 14px; background: rgba(255,255,255,0.45); }
    .case-editorial-page :is(.cs-pill--industry, .cs-pill--services) { grid-column: 1 / -1; }
    .case-editorial-page .cs-pill__label { color: #c8101a; }
    .case-editorial-page .cs-pill__val { color: var(--ink); font-size: 0.84rem; }
    .case-editorial-page .cs-pill--link { background: var(--accent-from); border-color: var(--accent-from); }
    .case-editorial-page .cs-pill--link :is(.cs-pill__label, .cs-pill__val) { color: var(--paper); }
    .case-editorial-page :is(.cs-challenge__heading, .cs-data__title, .cs-gallery-header h2, .cs-cta__inner h2) { font-size: clamp(1.8rem, 7vw, 3rem); }
    .case-editorial-page .cs-challenge__body { font-size: 0.95rem; line-height: 1.9; }
    .case-editorial-page .cs-tech__main-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    .case-editorial-page .cs-tech__card { padding: 1.5rem; }
    .case-editorial-page :is(.cs-tech__card, .cs-data__card, .cs-gallery-item).mobile-card-current { border-color: rgba(237,28,36,0.7); }
    .case-editorial-page .cs-data__card { padding: 1.15rem; border-radius: 16px; gap: 0.7rem; }
    .case-editorial-page .cs-data__num { font-size: clamp(1.15rem, 5.4vw, 2rem); letter-spacing: -0.025em; }
    .case-editorial-page .cs-data__label { font-size: 0.62rem; }
    .case-editorial-page .cs-data__sublabel { font-size: 0.52rem; }
    .case-editorial-page .cs-gallery-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% - 2 * var(--gutter) - 1.35rem); width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: 0.65rem var(--gutter) 1.3rem; overflow-x: auto; overflow-y: hidden; gap: 1rem; align-items: start; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--accent-from) transparent; }
    .case-editorial-page .cs-gallery-item:nth-child(n) { grid-column: auto; scroll-snap-align: start; aspect-ratio: auto; }
    .case-editorial-page .cs-testimonial__quote { font-size: clamp(1.35rem, 5.5vw, 2.2rem); line-height: 1.5; }
    .case-editorial-page .cs-testimonial__footer { gap: 1rem; }
    .case-editorial-page .cs-nav__inner { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
    .case-editorial-page .cs-nav__inner > span { display: none; }
    .case-editorial-page .cs-nav__all { display: flex; }
    .case-editorial-page .cs-nav__link { padding: 1.25rem; }
    .case-editorial-page .cs-cta__inner .btn { min-height: 56px; white-space: normal; }
}
@media (max-width: 600px) {
    .case-editorial-page .cs-lightbox { width: calc(100% - 1rem); height: calc(100dvh - 1rem); padding: 0.75rem; border-radius: 16px; }
    .case-editorial-page .cs-lightbox__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 44px); gap: 0.5rem; }
    .case-editorial-page .cs-lightbox__counter { grid-column: 1 / 4; grid-row: 1; }
    .case-editorial-page .cs-lightbox__original { grid-column: 1; grid-row: 2; padding: 0; font-size: 0.68rem; }
    .case-editorial-page .cs-lightbox__button:nth-child(3) { grid-column: 2; grid-row: 2; }
    .case-editorial-page .cs-lightbox__button:nth-child(4) { grid-column: 3; grid-row: 2; }
    .case-editorial-page .cs-lightbox__button:nth-child(5) { grid-column: 4; grid-row: 1 / 3; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .case-editorial-page .cs-scroll-cta:hover .cs-scroll-cta__arrow { transform: none; }
    .case-editorial-page :is(.cs-tech__card, .cs-data__card):hover > .editorial-card-sheen::before { animation: none; }
}

/* ============================================================
   AA. LEGAL — editorial reading, original document content
   ============================================================ */
.legal-editorial-page { --paper: #e9e9e4; --ink: #17191c; }
.legal-editorial-page .legal-page-content { position: relative; }
.legal-editorial-page .legal-page-content > .section-divider { display: none; }
.legal-editorial-page .legal-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding-top: clamp(9rem, 13vw, 13rem); padding-bottom: clamp(3.5rem, 6vw, 6rem);
    background: #101114; border-bottom: 3px solid var(--accent-from);
}
.legal-editorial-page .legal-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 95% 10%, rgba(237,28,36,0.15), transparent 55%),
        linear-gradient(90deg, transparent 74.95%, rgba(255,255,255,0.045) 75%, transparent 75.05%);
}
.legal-editorial-page .legal-hero__inner { max-width: 1120px; }
.legal-editorial-page .legal-hero .section-label { color: #f2f2ef; letter-spacing: 0.16em; }
.legal-editorial-page .legal-hero .section-label::before { width: 24px; height: 2px; border-radius: 0; }
.legal-editorial-page .legal-hero__title {
    max-width: 1080px; margin: 1.6rem 0 2.5rem;
    font-family: var(--font-heading); font-size: clamp(3rem, 6.6vw, 6.25rem);
    font-weight: 700; line-height: 1.06; letter-spacing: -0.055em;
    color: #f2f2ef; text-wrap: balance; overflow-wrap: normal;
}
.legal-editorial-page .legal-hero__meta {
    display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem 2rem;
    max-width: 100%; padding: 1.5rem 0 0; margin: 0;
    background: none; border: 0; border-top: 1px solid rgba(255,255,255,0.14);
    border-radius: 0; font-size: 0.78rem; line-height: 1.8; color: #b4b6bc;
}
.legal-editorial-page .legal-hero__meta > span:not(.legal-hero__meta-sep) { min-width: 0; }
.legal-editorial-page .legal-hero__meta strong { color: #f2f2ef; font-weight: 600; }
.legal-editorial-page .legal-hero__meta-sep { display: none; }
.legal-editorial-page .legal-body {
    --text: var(--ink); --text-sub: #4c4f55; --text-muted: #686a6e;
    padding-block: clamp(3.5rem, 6vw, 6rem) clamp(4rem, 7vw, 7rem);
    background: var(--paper); color: var(--ink);
}
.legal-editorial-page .legal-layout { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
.legal-editorial-page .legal-toc { top: 105px; min-width: 0; }
.legal-editorial-page .legal-toc[hidden] { display: none; }
.legal-editorial-page .legal-toc__inner {
    padding: 1.5rem 1.2rem 1rem; border-radius: 16px;
    background: #17191e; border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 45px rgba(23,25,28,0.07);
}
.legal-editorial-page .legal-toc__label {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: 0 0 1rem; margin: 0 0 0.75rem; background: none;
    border: 0; border-bottom: 1px solid rgba(255,255,255,0.12); border-radius: 0;
    color: #f2f2ef; font-family: var(--font-heading); font-size: 1rem;
    line-height: 1.4; font-weight: 700; letter-spacing: 0.04em;
}
.legal-editorial-page .legal-toc__toggle:disabled { opacity: 1; cursor: default; }
.legal-editorial-page #legal-toc-nav { max-height: calc(100dvh - 210px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ed1c24 #17191e; }
.legal-editorial-page #legal-toc-nav[hidden] { display: none; }
.legal-editorial-page .legal-toc__list { gap: 0.3rem; padding-right: 0.35rem; counter-reset: none; }
.legal-editorial-page .legal-toc__list li { counter-increment: none; }
.legal-editorial-page .legal-toc__link {
    min-height: 44px; padding: 0.7rem 0.8rem; border-radius: 5px; border-left-width: 2px;
    color: #bfc1c7; font-size: 0.75rem; line-height: 1.65;
}
.legal-editorial-page .legal-toc__link::before { display: none; }
.legal-editorial-page .legal-toc__link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.legal-editorial-page .legal-toc__link.is-active { color: #fff; border-left-color: #ed1c24; background: rgba(237,28,36,0.14); }
.legal-editorial-page .legal-content { font-size: 0.98rem; line-height: 1.9; color: #4c4f55; overflow-wrap: anywhere; }
.legal-editorial-page .legal-content h2 {
    display: block; margin: 3.5rem 0 1.4rem; padding: 1.35rem 0 0;
    border: 0; border-top: 1px solid rgba(23,25,28,0.2); border-radius: 0;
    background: none; color: var(--ink); font-size: clamp(1.3rem, 1.85vw, 1.9rem);
    font-weight: 700; line-height: 1.3; letter-spacing: -0.025em;
    text-align: left; text-wrap: pretty; scroll-margin-top: 125px;
}
.legal-editorial-page .legal-content h2:first-child { margin-top: 0; }
.legal-editorial-page .legal-content h2::before { content: ''; display: block; width: 40px; height: 3px; margin: -1.55rem 0 1.35rem; background: #ed1c24; }
.legal-editorial-page .legal-content h3 { margin: 1.7rem 0 0.75rem; padding: 0; border: 0; color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.6; letter-spacing: -0.015em; }
.legal-editorial-page .legal-content p { max-width: none; margin: 0 0 1.15rem; }
.legal-editorial-page .legal-content :is(ul, ol) { margin: 0 0 1.5rem; padding-left: 1.45rem; }
.legal-editorial-page .legal-content ul { list-style: disc; }
.legal-editorial-page .legal-content ol { list-style: decimal; counter-reset: none; }
.legal-editorial-page .legal-content li { margin-bottom: 0.65rem; padding-left: 0.35rem; counter-increment: none; }
.legal-editorial-page .legal-content li::before { display: none; }
.legal-editorial-page .legal-content li::marker { color: #c8101a; font-weight: 600; }
.legal-editorial-page .legal-content :is(ul, ol) :is(ul, ol) { margin-top: 0.75rem; }
.legal-editorial-page .legal-content strong { color: var(--ink); font-weight: 700; }
.legal-editorial-page .legal-content a { color: #b71019; border-bottom-color: rgba(183,16,25,0.3); text-underline-offset: 3px; }
.legal-editorial-page .legal-content a:hover { color: #8c0b12; border-bottom-color: currentColor; }
.legal-editorial-page .legal-content hr { margin-block: 3rem; border-top-color: rgba(23,25,28,0.18); }
.legal-editorial-page .legal-content table {
    display: block; overflow-x: auto; width: 100%; margin: 1.5rem 0 2rem;
    border: 1px solid rgba(23,25,28,0.15); border-collapse: separate; border-spacing: 0;
    border-radius: 10px; background: #f6f6f2; font-size: 0.84rem; line-height: 1.7;
    scrollbar-width: thin; scrollbar-color: #c8101a transparent;
}
.legal-editorial-page .legal-table-scroll { width: 100%; margin: 1.5rem 0 2rem; overflow-x: auto; border: 1px solid rgba(23,25,28,0.15); border-radius: 10px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c8101a transparent; }
.legal-editorial-page .legal-table-scroll table { display: table; width: 100%; margin: 0; border: 0; border-radius: 0; overflow: visible; }
.legal-editorial-page .legal-content thead tr { background: #17191e; }
.legal-editorial-page .legal-content th { padding: 1rem; border-color: rgba(255,255,255,0.12); color: #f2f2ef; font-size: 0.68rem; line-height: 1.6; letter-spacing: 0.06em; }
.legal-editorial-page .legal-content td { padding: 1rem; color: #4c4f55; border-bottom-color: rgba(23,25,28,0.12); }
.legal-editorial-page .legal-content tbody tr { background: #f6f6f2; }
.legal-editorial-page .legal-content tbody tr:nth-child(even) { background: #e0e0db; }
.legal-editorial-page .legal-content td strong { color: var(--ink); }
.legal-editorial-page .legal-content blockquote { margin: 2rem 0; padding: 1.5rem; border-left: 3px solid #ed1c24; background: #f6f6f2; color: var(--ink); }
.legal-editorial-page .legal-nav-footer { margin-top: 4rem; padding: 1.75rem; background: #17191e; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; }
.legal-editorial-page .legal-nav-footer__label { margin-bottom: 1rem; color: #bfc1c7; }
.legal-editorial-page .legal-nav-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.legal-editorial-page .legal-content .legal-nav-footer__link { display: flex; justify-content: space-between; gap: 1rem; min-height: 60px; padding: 1rem; color: #f2f2ef; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; font-size: 0.82rem; line-height: 1.6; }
.legal-editorial-page .legal-nav-footer__link svg { flex-shrink: 0; color: #ed1c24; }
.legal-editorial-page .legal-content .legal-nav-footer__link:hover { border-color: #ed1c24; color: #fff; background: rgba(237,28,36,0.1); }
.legal-editorial-page .legal-body :is(a, button, [tabindex]):focus-visible { outline: 2px solid #c8101a; outline-offset: 4px; }
.legal-editorial-page .legal-toc :is(a, button):focus-visible { outline-color: #f2f2ef; outline-offset: -3px; }
@media (max-width: 1100px) {
    .legal-editorial-page .legal-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 2.5rem; }
}
@media (max-width: 900px) {
    .legal-editorial-page .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .legal-editorial-page .legal-toc { position: static; }
    .legal-editorial-page .legal-toc__inner { padding: 1rem 1.25rem; }
    .legal-editorial-page .legal-toc--ready .legal-toc__toggle { min-height: 44px; margin: 0; padding: 0; border: 0; }
    .legal-editorial-page .legal-toc__toggle::after { content: ''; width: 8px; height: 8px; margin: 0 3px 4px 1rem; border-right: 2px solid #ed1c24; border-bottom: 2px solid #ed1c24; transform: rotate(45deg); transition: transform 0.2s; }
    .legal-editorial-page .legal-toc__toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-bottom: -4px; }
    .legal-editorial-page #legal-toc-nav { max-height: min(55dvh, 460px); }
    .legal-editorial-page .legal-toc__list { padding-top: 0.75rem; }
}
@media (max-width: 768px) {
    .legal-editorial-page .legal-hero { --text: var(--ink); padding-top: 8rem; padding-bottom: 2.75rem; background: var(--paper); color: var(--ink); }
    .legal-editorial-page .legal-hero::before { background: radial-gradient(ellipse at 100% 0%, rgba(237,28,36,0.12), transparent 65%); }
    .legal-editorial-page .legal-hero .section-label { color: #b71019; }
    .legal-editorial-page .legal-hero__title { margin: 1.35rem 0 2rem; font-size: clamp(1.4rem, 6.9vw, 3.5rem); line-height: 1.12; letter-spacing: -0.035em; color: var(--ink); overflow-wrap: anywhere; }
    .legal-editorial-page .legal-hero__meta { display: grid; gap: 0.65rem; padding-top: 1.25rem; border-color: rgba(23,25,28,0.18); color: #53555a; font-size: 0.72rem; }
    .legal-editorial-page .legal-hero__meta strong { color: var(--ink); }
    .legal-editorial-page .legal-body { padding-top: 2rem; }
    .legal-editorial-page .legal-content { font-size: 0.93rem; line-height: 1.9; }
    .legal-editorial-page .legal-content h2 { font-size: 1.28rem; line-height: 1.35; margin-top: 3rem; }
    .legal-editorial-page .legal-content h2:first-child { margin-top: 0; }
    .legal-editorial-page .legal-content h3 { font-size: 0.93rem; }
    .legal-editorial-page .legal-content table { font-size: 0.78rem; }
    .legal-editorial-page .legal-content :is(th, td) { min-width: 140px; padding: 0.85rem; }
    .legal-editorial-page .legal-nav-footer { padding: 1.25rem; }
    .legal-editorial-page .legal-nav-footer__links { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .legal-editorial-page .legal-toc__toggle::after { transition: none; }
}
@media print {
    body.legal-editorial-page { background: #fff; color: #000; }
    .legal-editorial-page :is(.site-header, .mobile-nav, .legal-toc, .legal-nav-footer, .site-footer, .page-scroll-progress, .custom-cursor, .section-divider, .discovery) { display: none !important; }
    .legal-editorial-page :is(.legal-hero, .legal-body) { padding: 1rem 0; background: #fff; border: 0; }
    .legal-editorial-page .legal-hero::before { display: none; }
    .legal-editorial-page .legal-layout { display: block; }
    .legal-editorial-page :is(.legal-content, .legal-hero__title, .legal-hero__meta, .legal-hero__meta strong) { color: #000; }
    .legal-editorial-page .legal-hero__title { font-size: 2rem; }
    .legal-editorial-page .legal-content h2 { break-after: avoid; }
    .legal-editorial-page .legal-table-scroll { overflow: visible; }
    .legal-editorial-page .legal-content :is(th, td) { color: #000; border-color: #ccc; }
    .legal-editorial-page .legal-content thead tr { background: #eee; }
}

/* Booking actions use the same square corners as theme CTAs. */
.homepage-editorial .contact-amelia-wrap .am-button { border-radius: var(--r-button) !important; }