/* ==========================================================================
   QVision Unified Stylesheet β€” v2.0 (consolidated & enhanced)
   
   Structure:
   1) Variables & Base
   2) Top Bar / Navigation
   3) Hub Hero
   4) Hub Cards
   5) Hub Footer
   6) Hub Scroll Animations
   7) Inner Page Base (hero, sections, prose, dividers)
   8) Inner Page Components (features, stats, process, use-cases, CTA)
   9) About Page (timeline, mission/vision, products, contact)
   10) QCMS / Web Solutions Page (CMS hero, floating UI)
   11) Custom Development Page (code hero, editor)
   12) Creative & Print Page (service blocks, eshop, self-links)
   13) Contact Page (contact form, department cards, map)
   14) Responsive Breakpoints (consolidated)
   ========================================================================== */


/* ==========================================================================
   1) VARIABLES & BASE
   ========================================================================== */

:root {
    --bg: #0a0a0f;
    --bg-card: #12121a;
    --bg-card-hover: #1a1a26;
    --bg-surface: #0e0e16;
    --text-primary: #f0f0f5;
    --text-secondary: #8888a0;
    --text-muted: #55556a;
    --border: #1e1e2e;
    --border-hover: #2a2a40;
    --accent-creative: #f97316;
    --accent-roomzy: #2563eb;
    --accent-qmenu: #10b981;
    --accent-rezzit: #ec4899;
    --accent-web: #a855f7;
    --accent-custom: #06b6d4;
    --radius: 20px;

    /* Page accent β€” overridden per page via body class */
    --page-accent: var(--accent-web);
    --page-accent-glow: rgba(168,85,247,0.08);
}

/* Per-page accent overrides (set body class on each page) */
.page-creative   { --page-accent: var(--accent-creative); --page-accent-glow: rgba(249,115,22,0.08); }
.page-roomzy     { --page-accent: var(--accent-roomzy);   --page-accent-glow: rgba(37,99,235,0.08); }
.page-qmenu      { --page-accent: var(--accent-qmenu);    --page-accent-glow: rgba(16,185,129,0.08); }
.page-rezzit     { --page-accent: var(--accent-rezzit);    --page-accent-glow: rgba(236,72,153,0.08); }
.page-web        { --page-accent: var(--accent-web);       --page-accent-glow: rgba(168,85,247,0.08); }
.page-custom     { --page-accent: var(--accent-custom);    --page-accent-glow: rgba(6,182,212,0.08); }

/* Accent color utilities */
.text-creative { color: var(--accent-creative); }
.text-roomzy { color: var(--accent-roomzy); }
.text-qmenu { color: var(--accent-qmenu); }
.text-rezzit { color: var(--accent-rezzit); }
.text-web { color: var(--accent-web); }
.text-custom { color: var(--accent-custom); }

.bg-creative { background-color: var(--accent-creative); }
.bg-roomzy { background-color: var(--accent-roomzy); }
.bg-qmenu { background-color: var(--accent-qmenu); }
.bg-rezzit { background-color: var(--accent-rezzit); }
.bg-web { background-color: var(--accent-web); }
.bg-custom { background-color: var(--accent-custom); }

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

body {
    font-family: 'Outfit', 'Manrope', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Subtle grid background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}


/* ==========================================================================
   2) TOP BAR / NAVIGATION
   ========================================================================== */

.top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(20px);
    background: rgba(10, 10, 15, 0.15);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.3s, border-color 0.3s;
}

.top-bar.scrolled {
    background: rgba(10, 10, 15, 0.88);
    border-bottom-color: var(--border);
}

.top-bar-logo {
    height: 32px;
    width: auto;
    display: block;
}

.top-bar-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.top-bar-links a {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.2s;
}

.top-bar-links a:hover { color: #fff; }
.top-bar-links a.active { color: var(--text-primary); }

.top-bar.scrolled .top-bar-links a { color: var(--text-secondary); }
.top-bar.scrolled .top-bar-links a:hover { color: var(--text-primary); }

/* Solutions Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
}

.nav-dropdown-toggle:hover { color: #fff; }

.top-bar.scrolled .nav-dropdown-toggle { color: var(--text-secondary); }
.top-bar.scrolled .nav-dropdown-toggle:hover { color: var(--text-primary); }

.nav-dropdown-toggle svg {
    transition: transform 0.3s;
}

.nav-dropdown.open .nav-dropdown-toggle svg {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
}

.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.nav-dropdown-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}

.nav-dropdown-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nav-dropdown-item-text {
    display: flex;
    flex-direction: column;
}

.nav-dropdown-item-name {
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.3;
}

.nav-dropdown-item-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 300;
}

.nav-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 8px;
}

/* External link indicator */
.nav-dropdown-item .nav-ext {
    margin-left: auto;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ===== LANGUAGE DROPDOWN ===== */
.nav-lang {
    position: relative;
}

.nav-lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 5px 10px;
    font-family: inherit;
    transition: all 0.2s;
}

.nav-lang-toggle:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.15);
}

.top-bar.scrolled .nav-lang-toggle {
    color: var(--text-secondary);
    border-color: var(--border);
}

.top-bar.scrolled .nav-lang-toggle:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.nav-lang-toggle svg {
    transition: transform 0.3s;
}

.nav-lang.open .nav-lang-toggle svg {
    transform: rotate(180deg);
}

.nav-lang-flag {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
}

.nav-lang-code {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.nav-lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
}

.nav-lang.open .nav-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    transition: all 0.2s;
}

.nav-lang-option:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}

.nav-lang-option.active {
    color: var(--text-primary);
}

.nav-lang-option .nav-lang-code {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.68rem;
}


/* ==========================================================================
   3) HUB HERO
   ========================================================================== */

.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../img/bg.png') center center / cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.hero-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 250px;
    z-index: 2;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    padding: 0 24px;
    animation: heroReveal 1.2s ease-out;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 100px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 28px;
    font-family: 'Space Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.05);
}

.hero-content h1 {
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 20px;
    text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}

.hero-content h1 .gradient-text {
    background: linear-gradient(135deg, var(--accent-creative), #fff, var(--accent-custom));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 8s ease-in-out infinite;
}

.hero-content p {
    font-size: 1.1rem;
    color: rgba(220,220,235,0.8);
    max-width: 520px;
    margin: 0 auto 40px;
    line-height: 1.7;
    font-weight: 300;
    text-shadow: 0 1px 20px rgba(0,0,0,0.4);
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.35);
    font-size: 0.72rem;
    font-family: 'Space Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    animation: bounceDown 2s ease-in-out infinite;
}

.scroll-indicator .scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
}


/* ==========================================================================
   4) HUB CARDS
   ========================================================================== */

.cards-section {
    position: relative;
    z-index: 1;
    scroll-margin-top: 96px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.section-intro {
    text-align: center;
    margin-bottom: 48px;
}

.section-intro h2 {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.section-intro h2 strong {
    color: var(--text-primary);
    font-weight: 600;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 32px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    min-height: 260px;
    cursor: pointer;
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--card-accent, #fff), transparent);
    opacity: 0.3;
    transition: opacity 0.4s;
}

.card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-4px);
}

.card:hover::before { opacity: 0.7; }

.card::after {
    content: '';
    position: absolute;
    top: -40%; right: -20%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: var(--card-accent, transparent);
    filter: blur(80px);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.card:hover::after { opacity: 0.08; }

.card-creative { --card-accent: var(--accent-creative); }
.card-roomzy   { --card-accent: var(--accent-roomzy); }
.card-qmenu    { --card-accent: var(--accent-qmenu); }
.card-rezzit   { --card-accent: var(--accent-rezzit); }
.card-web      { --card-accent: var(--accent-web); }
.card-custom   { --card-accent: var(--accent-custom); }

.card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
}

.card-creative .card-icon { color: var(--accent-creative); border-color: rgba(249,115,22,0.2); }
.card-roomzy .card-icon   { color: var(--accent-roomzy);   border-color: rgba(37,99,235,0.2); }
.card-qmenu .card-icon    { color: var(--accent-qmenu);    border-color: rgba(16,185,129,0.2); }
.card-rezzit .card-icon   { color: var(--accent-rezzit);   border-color: rgba(236,72,153,0.2); }
.card-web .card-icon      { color: var(--accent-web);      border-color: rgba(168,85,247,0.2); }
.card-custom .card-icon   { color: var(--accent-custom);   border-color: rgba(6,182,212,0.2); }

.card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.3px; }
.card p  { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; flex-grow: 1; font-weight: 300; }

.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.card-tag {
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.3px;
}

.card-arrow {
    position: absolute;
    bottom: 32px; right: 32px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: all 0.3s;
    font-size: 0.9rem;
}

.card:hover .card-arrow {
    border-color: var(--card-accent);
    color: var(--card-accent);
    transform: translate(2px, -2px);
}


/* ==========================================================================
   5) SHARED FOOTER
   ========================================================================== */

/* Legacy compact footer (kept for standalone pages) */
.footer,
.page-footer {
    text-align: center;
    padding: 48px 0 40px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.footer a,
.page-footer a {
    color: var(--text-secondary);
    text-decoration: none;
}

.footer a:hover,
.page-footer a:hover {
    color: var(--text-primary);
}

.footer-location,
.page-footer-location {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* ---- Rich site footer ---- */

.site-footer {
    position: relative;
    margin-top: 80px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.site-footer-glow {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 60%);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-web) 30%,
        var(--accent-rezzit) 50%,
        var(--accent-qmenu) 70%,
        transparent
    );
    opacity: 0.55;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 0;
}

/* 4-column grid */
.site-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
}

/* Brand column */
.site-footer-brand {
    padding-right: 24px;
}

.site-footer-logo {
    height: 28px;
    margin-bottom: 18px;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.site-footer-logo:hover {
    opacity: 1;
}

.site-footer-tagline {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.site-footer-address {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Column headings */
.site-footer-heading {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 20px;
}

/* Link lists */
.site-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer-links li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-footer-links a {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.25s;
}

.site-footer-links a:hover {
    color: var(--text-primary);
}

/* Product colour dot */
.site-footer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Social icons row */
.site-footer-social {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.site-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    transition: all 0.3s;
}

.site-footer-social a:hover {
    border-color: var(--border-hover);
    background: var(--bg-card);
    color: var(--text-primary);
}

.site-footer-social svg {
    width: 16px;
    height: 16px;
}

/* Bottom bar */
.site-footer-bottom {
    margin-top: 56px;
    border-top: 1px solid var(--border);
}

.site-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 28px;
}

.site-footer-bottom p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.site-footer-bottom-links {
    display: flex;
    gap: 24px;
}

.site-footer-bottom-links a {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.25s;
}

.site-footer-bottom-links a:hover {
    color: var(--text-secondary);
}


/* ==========================================================================
   6) ANIMATIONS
   ========================================================================== */

@keyframes heroReveal {
    from { opacity: 0; transform: translateY(40px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(8px); opacity: 1; }
}

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

/* Hub card scroll reveal */
.card { opacity: 0; }
.card.visible { animation: fadeUp 0.7s ease-out forwards; }
.card.visible:nth-child(1) { animation-delay: 0.05s; }
.card.visible:nth-child(2) { animation-delay: 0.10s; }
.card.visible:nth-child(3) { animation-delay: 0.15s; }
.card.visible:nth-child(4) { animation-delay: 0.20s; }
.card.visible:nth-child(5) { animation-delay: 0.25s; }
.card.visible:nth-child(6) { animation-delay: 0.30s; }

.section-intro {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.section-intro.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Inner page section scroll reveal */
.page-section {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.page-section.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   7) INNER PAGE BASE
   ========================================================================== */

/* Page Hero (compact, no full-viewport) */
.page-hero {
    position: relative;
    padding: 140px 24px 80px;
    text-align: center;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--page-accent-glow) 0%, transparent 60%);
    pointer-events: none;
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.page-hero .badge {
    border-color: var(--border);
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 6px 16px;
    letter-spacing: 1px;
    background: transparent;
    backdrop-filter: none;
}

.page-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
    text-shadow: none;
}

.page-hero h1 .gradient-text {
    background: linear-gradient(135deg, var(--accent-creative), var(--accent-roomzy), var(--accent-web));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-hero p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 300;
    text-shadow: none;
}

/* Page content wrapper */
.page-content,
.page {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/*.page {
    padding-top: 120px;
}*/

/* Sections */
.page-section {
    margin-bottom: 72px;
}

/* Section labels β€” unified (supports both old and new class names) */
.page-section-label,
.section-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Section titles */
.page-section-title,
.section-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    line-height: 1.25;
}

/* Prose β€” unified */
.page-prose,
.prose {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 300;
}

.page-prose p + p,
.prose p + p {
    margin-top: 16px;
}

.page-prose strong,
.prose strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* Dividers β€” unified */
.page-divider,
.divider {
    height: 1px;
    background: var(--border);
    margin: 64px 0;
}


/* ==========================================================================
   8) INNER PAGE COMPONENTS
   ========================================================================== */

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    transition: border-color 0.3s;
}

.feature-card:hover { border-color: var(--border-hover); }

.feature-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--page-accent);
}

.feature-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.feature-card p  { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; font-weight: 300; }

/* Hosting Features */
.hosting-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.hosting-feature {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    transition: border-color 0.3s;
    text-align: center;
}

.hosting-feature:hover { border-color: var(--border-hover); }
.hosting-feature-icon { font-size: 2.5rem; margin-bottom: 16px; }
.hosting-feature h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.hosting-feature p  { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; font-weight: 300; }

/* Tech Tags */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.tech-tag {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.stat-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
}

.stat-item .stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 4px;
    color: var(--page-accent);
}

.stat-item .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Process Steps */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.process-step {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 20px;
}

.process-step-number {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    color: var(--page-accent);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.process-step h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.process-step p  { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; font-weight: 300; }

/* CTA Strip */
.cta-strip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px;
    text-align: center;
    margin-top: 64px;
}

.cta-strip h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 10px; }
.cta-strip p   { color: var(--text-secondary); font-size: 0.95rem; font-weight: 300; margin-bottom: 24px; }

.cta-strip-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.cta-strip-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    font-family: 'Space Mono', monospace;
    transition: color 0.2s;
}

.cta-strip-links a:hover { color: var(--text-primary); }

.cta-strip-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; background: var(--accent-creative);
    color: #fff; border-radius: 8px; text-decoration: none;
    font-size: 0.88rem; font-weight: 600; transition: opacity 0.3s;
}

.cta-strip-btn:hover { opacity: 0.9; }

/* Use Cases */
.use-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.use-case {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-primary);
}

.use-case-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--page-accent);
}

.use-case-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 300;
}


/* ==========================================================================
   9) ABOUT PAGE
   ========================================================================== */

/* Background orbs */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.orb-1 { width: 500px; height: 500px; background: var(--accent-roomzy); top: -150px; right: -100px; }
.orb-2 { width: 400px; height: 400px; background: var(--accent-rezzit); bottom: -100px; left: -100px; }

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 32px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, var(--accent-creative), var(--accent-roomzy), var(--accent-qmenu), var(--accent-web), var(--accent-custom));
}

.timeline-item {
    position: relative;
    padding: 20px 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 28px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--text-muted);
}

.timeline-item:nth-child(1)::before { border-color: var(--accent-creative); }
.timeline-item:nth-child(2)::before { border-color: var(--accent-web); }
.timeline-item:nth-child(3)::before { border-color: var(--accent-qmenu); }
.timeline-item:nth-child(4)::before { border-color: var(--accent-roomzy); }
.timeline-item:nth-child(5)::before { border-color: var(--accent-custom); }

.timeline-year  { font-family: 'Space Mono', monospace; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 6px; }
.timeline-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
.timeline-desc  { font-size: 0.9rem; color: var(--text-secondary); font-weight: 300; line-height: 1.6; }

/* Stats Grid (about page variant) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 4px;
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card .stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
}

.product-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}

.product-chip:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.product-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.product-chip-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 300;
}

/* Mission & Vision */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
}

.mv-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px;
}

.mv-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mv-card h3 .mv-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-roomzy);
    font-size: 0.9rem;
}

.mv-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; font-weight: 300; }

/* Contact strip (about page) */
.contact-strip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px;
    text-align: center;
    margin-top: 64px;
}

.contact-strip h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 10px; }
.contact-strip p   { color: var(--text-secondary); font-size: 0.95rem; font-weight: 300; margin-bottom: 24px; }

.contact-details {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.contact-details a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    font-family: 'Space Mono', monospace;
    transition: color 0.2s;
}

.contact-details a:hover { color: var(--text-primary); }


/* ==========================================================================
   10) QCMS / WEB SOLUTIONS PAGE
   ========================================================================== */

.cms-hero {
    position: relative;
    padding: 140px 24px 80px;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
}

.cms-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 30% 40%, rgba(168,85,247,0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 60%, rgba(6,182,212,0.04) 0%, transparent 50%);
    pointer-events: none;
}

.cms-hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.cms-hero-text { animation: heroReveal 1s ease-out; }

.cms-hero-text .badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border: 1px solid var(--border);
    border-radius: 100px; font-size: 0.72rem; color: var(--text-muted);
    margin-bottom: 24px; font-family: 'Space Mono', monospace;
    letter-spacing: 1px; text-transform: uppercase;
}

.cms-hero-text h1 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 20px;
}

.cms-hero-text h1 span { color: var(--accent-web); }

.cms-hero-text p {
    font-size: 1.05rem; color: var(--text-secondary);
    line-height: 1.7; font-weight: 300; max-width: 440px;
}

/* Floating UI composition */
.cms-visual {
    position: relative;
    min-height: 420px;
    animation: heroReveal 1s ease-out 0.2s both;
}

.float-card {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    overflow: hidden;
}

/* Blog card */
.float-blog { top: 0; left: 10%; width: 240px; z-index: 3; }
.float-blog-img { width: 100%; height: 100px; background: linear-gradient(135deg, #2d1b69, #1a365d); display: flex; align-items: center; justify-content: center; }
.float-blog-img svg { color: rgba(255,255,255,0.2); }
.float-blog-body { padding: 14px 16px; }
.float-blog-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.float-blog-tag { font-family: 'Space Mono', monospace; font-size: 0.58rem; color: var(--accent-web); text-transform: uppercase; letter-spacing: 0.5px; }
.float-blog-body h4 { font-size: 0.82rem; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.float-blog-body p { font-size: 0.68rem; color: var(--text-muted); }

/* Product card */
.float-product { top: 60px; right: 0; width: 200px; z-index: 4; }
.float-product-img { width: 100%; height: 90px; background: linear-gradient(135deg, #1a2744, #0d3b3b); display: flex; align-items: center; justify-content: center; }
.float-product-img svg { color: rgba(255,255,255,0.15); }
.float-product-body { padding: 12px 14px; }
.float-product-body h4 { font-size: 0.78rem; font-weight: 600; margin-bottom: 4px; }
.float-product-price { font-family: 'Space Mono', monospace; font-size: 0.85rem; color: var(--accent-qmenu); font-weight: 700; }
.float-product-btn { display: block; margin-top: 10px; padding: 6px 0; text-align: center; font-size: 0.68rem; font-weight: 600; color: #fff; background: var(--accent-web); border-radius: 6px; letter-spacing: 0.3px; }

/* Language selector */
.float-lang { top: 180px; left: 0; width: 160px; padding: 14px 16px; z-index: 5; }
.float-lang-title { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.float-lang-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.76rem; color: var(--text-secondary); }
.float-lang-row.active { color: var(--text-primary); }
.float-lang-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-muted); }
.float-lang-row.active .float-lang-dot { background: var(--accent-web); border-color: var(--accent-web); }

/* Analytics widget */
.float-analytics { bottom: 0; left: 15%; width: 220px; padding: 16px 18px; z-index: 4; }
.float-analytics-title { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.float-analytics-number { font-size: 1.6rem; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); }
.float-analytics-change { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: var(--accent-qmenu); }
.float-analytics-bars { display: flex; align-items: flex-end; gap: 4px; margin-top: 12px; height: 40px; }
.float-analytics-bar { flex: 1; background: var(--accent-web); border-radius: 3px 3px 0 0; opacity: 0.5; }
.float-analytics-bar:nth-child(5),
.float-analytics-bar:nth-child(6),
.float-analytics-bar:nth-child(7) { opacity: 0.8; }

/* SEO widget */
.float-seo { bottom: 30px; right: 5%; width: 180px; padding: 14px 16px; z-index: 3; }
.float-seo-title { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.float-seo-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 0.72rem; color: var(--text-secondary); }
.float-seo-score { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--accent-qmenu); }


/* ==========================================================================
   11) CUSTOM DEVELOPMENT PAGE
   ========================================================================== */

.code-hero {
    position: relative;
    padding: 140px 24px 60px;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.code-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 70% 40%, rgba(6,182,212,0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 30% 60%, rgba(168,85,247,0.04) 0%, transparent 50%);
    pointer-events: none;
}

.code-hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.code-hero-text { animation: heroReveal 1s ease-out; }

.code-hero-text .badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border: 1px solid var(--border);
    border-radius: 100px; font-size: 0.72rem; color: var(--text-muted);
    margin-bottom: 24px; font-family: 'Space Mono', monospace;
    letter-spacing: 1px; text-transform: uppercase;
}

.code-hero-text h1 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 20px;
}

.code-hero-text h1 span { color: var(--accent-custom); }

.code-hero-text p {
    font-size: 1.05rem; color: var(--text-secondary);
    line-height: 1.7; font-weight: 300; max-width: 440px;
}

/* Floating code editor */
.code-visual {
    perspective: 800px;
    animation: heroReveal 1s ease-out 0.2s both;
}

.code-editor {
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 12px;
    overflow: hidden;
    transform: rotateY(-8deg) rotateX(4deg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(6,182,212,0.06);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.code-editor:hover { transform: rotateY(-3deg) rotateX(2deg); }

.code-editor-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; background: #161b22; border-bottom: 1px solid #21262d;
}

.code-dot { width: 10px; height: 10px; border-radius: 50%; }
.code-dot-red    { background: #ff5f57; }
.code-dot-yellow { background: #febc2e; }
.code-dot-green  { background: #28c840; }

.code-editor-tab {
    margin-left: 16px; font-family: 'Fira Code', monospace;
    font-size: 0.7rem; color: #8b949e; padding: 4px 12px;
    background: #0d1117; border-radius: 6px 6px 0 0;
    border: 1px solid #21262d; border-bottom: none;
}

.code-body {
    padding: 20px 20px 24px;
    font-family: 'Fira Code', monospace;
    font-size: 0.78rem; line-height: 1.8; overflow: hidden;
}

.code-line { display: flex; gap: 16px; white-space: nowrap; }
.code-ln { color: #484f58; min-width: 24px; text-align: right; user-select: none; }

/* Syntax highlighting */
.code-kw      { color: #ff7b72; }
.code-type    { color: #79c0ff; }
.code-str     { color: #a5d6ff; }
.code-method  { color: #d2a8ff; }
.code-comment { color: #484f58; font-style: italic; }
.code-param   { color: #ffa657; }
.code-op      { color: #c9d1d9; }
.code-attr    { color: #7ee787; }

/* Floating status panel */
.code-panel-float {
    position: absolute; bottom: -20px; left: -30px;
    background: #161b22; border: 1px solid #21262d;
    border-radius: 10px; padding: 16px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    transform: rotateY(-4deg) rotateX(2deg); z-index: 2;
}

.code-panel-float-title { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: #484f58; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.code-panel-float-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.code-panel-dot { width: 6px; height: 6px; border-radius: 50%; }
.code-panel-float-row span { font-family: 'Fira Code', monospace; font-size: 0.72rem; color: #c9d1d9; }
.code-panel-float-row .ok { color: #28c840; }


/* ==========================================================================
   12) CREATIVE & PRINT PAGE
   ========================================================================== */

/* Service blocks β€” alternating layout */
.service-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

.service-block.reverse { direction: rtl; }
.service-block.reverse > * { direction: ltr; }

.service-text h2 {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px;
    margin-bottom: 16px; line-height: 1.25;
}

.service-text p {
    font-size: 0.95rem; color: var(--text-secondary);
    line-height: 1.7; font-weight: 300; margin-bottom: 16px;
}

.service-text p strong { color: var(--text-primary); font-weight: 500; }

.service-list {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
}

.service-list-item {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Service visual placeholder */
/* Service visual β€” stretches to match sibling text height */
.service-visual {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    min-height: 320px;
    display: flex; align-items: stretch; justify-content: stretch;
    position: relative;
}

.service-visual::before {
    content: '';
    position: absolute;
    top: -30%; right: -20%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: var(--page-accent);
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.service-visual-inner {
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.service-visual-icon {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--page-accent);
}

.service-visual-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Self-link banner */
.self-link {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 12px;
    transition: border-color 0.3s;
    text-decoration: none;
    color: inherit;
}

.self-link:first-of-type { margin-top: 24px; }
.self-link:hover { border-color: var(--border-hover); }

.self-link-text { display: block; }
.self-link-name { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.self-link-desc { display: block; font-size: 0.85rem; color: var(--text-secondary); font-weight: 300; }

.self-link-arrow {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    font-size: 1rem;
    transition: all 0.3s;
}

.self-link:hover .self-link-arrow {
    border-color: var(--accent-web);
    color: var(--accent-web);
}

/* eShop banner */
.eshop-banner {
    background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(168,85,247,0.05));
    border: 1px solid rgba(249,115,22,0.15);
    border-radius: 16px;
    padding: 32px 36px;
    text-align: center;
    margin-top: 48px;
}

.eshop-banner h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.eshop-banner p   { font-size: 0.9rem; color: var(--text-secondary); font-weight: 300; margin-bottom: 16px; }

.eshop-banner a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; background: var(--accent-creative);
    color: #fff; border-radius: 8px; text-decoration: none;
    font-size: 0.88rem; font-weight: 600; transition: opacity 0.3s;
}

.eshop-banner a:hover { opacity: 0.9; }


/* ==========================================================================
   12b) IMAGE CAROUSEL (CSS-only crossfade)
   ========================================================================== */

/*
   Usage:
   <div class="image-carousel" style="--slide-count: 3; --slide-duration: 5s;">
       <div class="carousel-slide"><img src="..." alt="..."></div>
       <div class="carousel-slide"><img src="..." alt="..."></div>
       <div class="carousel-slide"><img src="..." alt="..."></div>
   </div>

   --slide-count: number of slides (must match actual slide count)
   --slide-duration: how long each slide is visible (default 5s)
*/

.image-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    flex: 1;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: carouselFade calc(var(--slide-duration, 5s) * var(--slide-count, 3)) ease-in-out infinite;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Stagger each slide */
.carousel-slide:nth-child(1) { animation-delay: calc(var(--slide-duration, 5s) * 0); }
.carousel-slide:nth-child(2) { animation-delay: calc(var(--slide-duration, 5s) * 1); }
.carousel-slide:nth-child(3) { animation-delay: calc(var(--slide-duration, 5s) * 2); }
.carousel-slide:nth-child(4) { animation-delay: calc(var(--slide-duration, 5s) * 3); }
.carousel-slide:nth-child(5) { animation-delay: calc(var(--slide-duration, 5s) * 4); }
.carousel-slide:nth-child(6) { animation-delay: calc(var(--slide-duration, 5s) * 5); }

/*
   Crossfade keyframes β€” calculated per slide count.
   Each slide is visible for (100 / slide-count)% of the cycle.
   We use separate animations per common slide count for precise overlap.
*/

/* Default: 3 slides β€” each gets 33% of cycle */
@keyframes carouselFade {
    0%      { opacity: 0; }
    5%      { opacity: 1; }
    28%     { opacity: 1; }
    33%     { opacity: 0; }
    100%    { opacity: 0; }
}

/* 2 slides β€” each gets 50% of cycle, with 10% overlap */
.image-carousel[style*="slide-count: 2"] .carousel-slide {
    animation-name: carouselFade2;
}

@keyframes carouselFade2 {
    0%      { opacity: 0; }
    5%      { opacity: 1; }
    45%     { opacity: 1; }
    55%     { opacity: 0; }
    100%    { opacity: 0; }
}

/* 4 slides β€” each gets 25% of cycle */
.image-carousel[style*="slide-count: 4"] .carousel-slide {
    animation-name: carouselFade4;
}

@keyframes carouselFade4 {
    0%      { opacity: 0; }
    4%      { opacity: 1; }
    21%     { opacity: 1; }
    25%     { opacity: 0; }
    100%    { opacity: 0; }
}

/* 5 slides β€” each gets 20% of cycle */
.image-carousel[style*="slide-count: 5"] .carousel-slide {
    animation-name: carouselFade5;
}

@keyframes carouselFade5 {
    0%      { opacity: 0; }
    3%      { opacity: 1; }
    17%     { opacity: 1; }
    20%     { opacity: 0; }
    100%    { opacity: 0; }
}

/* 6 slides β€” each gets ~17% of cycle */
.image-carousel[style*="slide-count: 6"] .carousel-slide {
    animation-name: carouselFade6;
}

@keyframes carouselFade6 {
    0%      { opacity: 0; }
    2.5%    { opacity: 1; }
    14%     { opacity: 1; }
    16.67%  { opacity: 0; }
    100%    { opacity: 0; }
}

/* Placeholder (shown when no images are loaded yet) */
.carousel-placeholder {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--page-accent);
    background: var(--bg-card);
}

.carousel-placeholder span {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* When using the carousel inside service-visual */
.service-visual .image-carousel {
    border-radius: 0;
    min-height: 100%;
}

.service-visual:has(.image-carousel) {
    padding: 0;
}

/* Ensure service-visual fills when carousel is inside */
.service-visual:has(.image-carousel) .carousel-slide {
    position: absolute;
    inset: 0;
}

/* ==========================================================================
   QVision Contact Page β€” qvision-contact.css
   ========================================================================== */

/* ===== CONTACT HERO ===== */
.contact-hero {
    position: relative;
    padding: 140px 24px 80px;
    text-align: center;
    overflow: hidden;
}

    .contact-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        z-index: 0;
        background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(6,182,212,0.04) 0%, transparent 40%);
        pointer-events: none;
    }

.contact-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    animation: heroReveal 1s ease-out;
}

.contact-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.contact-hero p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 300;
}

/* 13) Contact */
/* ===== DEPARTMENT CARDS ===== */
.contact-main-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.contact-main-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px;
    transition: border-color 0.3s;
    display: flex;
    flex-direction: column;
}

    .contact-main-card:hover {
        border-color: var(--border-hover);
    }

    .contact-main-card h3 {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -0.3px;
    }

    .contact-main-card p {
        font-size: 0.88rem;
        color: var(--text-secondary);
        line-height: 1.6;
        font-weight: 300;
        flex-grow: 1;
        margin-bottom: 20px;
    }

/* Business hours inside card */
.contact-hours {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.3px;
}

    .contact-hours svg {
        flex-shrink: 0;
        color: var(--text-muted);
    }

/* Contact links */
.contact-main-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .contact-main-links a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.85rem;
        transition: all 0.3s;
    }

        .contact-main-links a:hover {
            border-color: var(--border-hover);
            color: var(--text-primary);
            background: rgba(255,255,255,0.04);
        }

        .contact-main-links a svg {
            flex-shrink: 0;
            color: var(--text-muted);
            transition: color 0.3s;
        }

        .contact-main-links a:hover svg {
            color: var(--text-secondary);
        }

.contact-link-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
    display: block;
    margin-bottom: 1px;
}

.contact-link-value {
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
}

/* Email CTA button (more prominent than plain links) */
.contact-email-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--accent-roomzy);
    border: none;
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: opacity 0.3s;
    margin-top: 4px;
}

    .contact-email-btn:hover {
        opacity: 0.9;
        background: var(--accent-roomzy) !important;
        border-color: transparent !important;
        color: #fff !important;
    }

    .contact-email-btn svg {
        color: rgba(255,255,255,0.8) !important;
    }


/* ===== GENERAL INQUIRY CARD (full width) ===== */
.contact-general {
    margin-top: 20px;
}

    .contact-general .contact-main-card {
        text-align: center;
        align-items: center;
    }

    .contact-general .contact-main-links {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

        .contact-general .contact-main-links a {
            flex: 0 0 auto;
        }


/* ===== MAP ===== */
.map-section {
    margin-top: 0;
}

.map-embed {
    margin-top: 24px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
}

    .map-embed iframe {
        width: 100%;
        height: 400px;
        display: block;
        filter: invert(1) grayscale(1);
    }

.map-fallback {
    margin-top: 12px;
    text-align: center;
}

    .map-fallback a {
        font-size: 0.82rem;
        color: var(--text-muted);
        text-decoration: none;
        font-family: 'Space Mono', monospace;
        letter-spacing: 0.3px;
        transition: color 0.2s;
    }

        .map-fallback a:hover {
            color: var(--text-secondary);
        }


/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .contact-main-cards {
        grid-template-columns: 1fr;
    }

    .contact-general .contact-main-links {
        flex-direction: column;
    }

    .contact-hero {
        padding: 120px 20px 60px;
    }

    .map-embed iframe {
        height: 300px;
    }
}



/* ==========================================================================
   13b) REZZIT PAGE HERO (floating UI composition)
   ========================================================================== */

/* Rezzit hero accent overrides */
.page-rezzit .cms-hero::before {
    background: radial-gradient(ellipse at 30% 40%, rgba(236,72,153,0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 60%, rgba(168,85,247,0.04) 0%, transparent 50%);
}

.page-rezzit .cms-hero-text h1 span { color: var(--accent-rezzit); }

/* Reservation card */
.float-rsv { top: 0; left: 5%; width: 230px; padding: 16px 18px; z-index: 3; }
.float-rsv-title { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.float-rsv-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 0.72rem; }
.float-rsv-row-label { color: var(--text-muted); }
.float-rsv-row-value { color: var(--text-primary); font-weight: 500; }
.float-rsv-status { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 100px; font-family: 'Space Mono', monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.float-rsv-status.confirmed { background: rgba(16,185,129,0.12); color: #10b981; border: 1px solid rgba(16,185,129,0.2); }
.float-rsv-status.pending { background: rgba(236,72,153,0.12); color: var(--accent-rezzit); border: 1px solid rgba(236,72,153,0.2); }

/* Table map card */
.float-tables { top: 15px; right: 90px; width: 200px; padding: 14px 16px; z-index: 4; }
.float-tables-title { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.float-tables-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.float-tables-cell { width: 100%; aspect-ratio: 1; border-radius: 6px; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 0.55rem; color: var(--text-muted); }
.float-tables-cell.occupied { border-color: var(--accent-rezzit); background: rgba(236,72,153,0.08); color: var(--accent-rezzit); }
.float-tables-cell.available { border-color: var(--accent-qmenu); background: rgba(16,185,129,0.08); color: var(--accent-qmenu); }
.float-tables-cell.reserved { border-color: var(--accent-creative); background: rgba(249,115,22,0.08); color: var(--accent-creative); }
.float-tables-legend { display: flex; gap: 10px; margin-top: 10px; }
.float-tables-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.55rem; color: var(--text-muted); }
.float-tables-legend-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Time slots card */
.float-slots { top: 210px; left: 0; width: 165px; padding: 14px 16px; z-index: 5; }
.float-slots-title { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.float-slots-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.72rem; }
.float-slots-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.float-slots-dot.open { background: var(--accent-qmenu); }
.float-slots-dot.booked { background: var(--accent-rezzit); }
.float-slots-time { font-family: 'Space Mono', monospace; font-size: 0.68rem; color: var(--text-secondary); }
.float-slots-row.taken .float-slots-time { color: var(--text-muted); text-decoration: line-through; }

/* Today stats card */
.float-today { bottom: 0; left: 31%; width: 215px; padding: 16px 18px; z-index: 6; }
.float-today-title { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.float-today-number { font-size: 1.7rem; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); }
.float-today-label { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 8px; }
.float-today-row { display: flex; gap: 16px; }
.float-today-mini { text-align: center; }
.float-today-mini-num { font-family: 'Space Mono', monospace; font-size: 0.82rem; font-weight: 700; color: var(--accent-rezzit); }
.float-today-mini-lbl { font-size: 0.55rem; color: var(--text-muted); }

/* Guest profile card */
.float-guest { bottom: 106px; right: 10%; width: 180px; padding: 14px 16px; z-index: 7; }
.float-guest-title { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.float-guest-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.float-guest-badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-family: 'Space Mono', monospace; font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(249,115,22,0.12); color: var(--accent-creative); border: 1px solid rgba(249,115,22,0.2); margin-bottom: 8px; }
.float-guest-meta { font-size: 0.65rem; color: var(--text-muted); line-height: 1.6; }
.float-guest-meta span { color: var(--text-secondary); font-weight: 500; }


/* ==========================================================================
   14) RESPONSIVE BREAKPOINTS (consolidated)
   ========================================================================== */

@media (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .cms-hero-grid,
    .code-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cms-visual { min-height: 360px; }
    .cms-hero,
    .code-hero { min-height: auto; padding-bottom: 40px; }

    .code-editor { transform: none; }
    .code-editor:hover { transform: none; }
    .code-panel-float { display: none; }
}

@media (max-width: 768px) {
    .feature-grid,
    .hosting-features,
    .use-cases { grid-template-columns: 1fr; }

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

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

    .products-grid { grid-template-columns: 1fr; }
    .mv-grid { grid-template-columns: 1fr; }

    .page-hero { padding: 120px 20px 60px; }

    .cta-strip-links,
    .contact-details { flex-direction: column; gap: 12px; }

    .service-block,
    .service-block.reverse {
        grid-template-columns: 1fr;
        gap: 32px;
        direction: ltr;
    }

    .self-link { flex-direction: column; text-align: center; }

    /* Footer responsive */
    .site-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }

    .site-footer-brand { padding-right: 0; }

    .site-footer-inner { padding: 48px 24px 0; }

    .site-footer-bottom-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .top-bar { padding: 12px 20px; }
    .top-bar-logo { height: 26px; }
    .top-bar-links { gap: 12px; }

    /* Mobile dropdowns β€” full width */
    .nav-dropdown-menu {
        position: fixed;
        top: 56px;
        left: 12px;
        right: 12px;
        min-width: auto;
    }

    .nav-lang-menu {
        position: fixed;
        top: 56px;
        right: 12px;
        min-width: 160px;
    }

    .nav-lang-code { display: none; }
    .nav-dropdown-item-desc { display: none; }
}

@media (max-width: 640px) {
    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .site-footer-social { justify-content: flex-start; }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card {
        padding: 28px 24px;
        min-height: 220px;
    }

    .hero-content h1 { letter-spacing: -1px; }

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

@media (max-width: 500px) {
    .cms-visual { display: none; }
}