/*
 * 360Riyadh — final visual direction pass
 * Editorial Spatial Tech: quieter, sharper, less image-led and less decorative.
 * Presentation only. No URL, SEO, routing or business-logic changes live here.
 */

:root {
    --srv-bg: #07090d;
    --srv-bg-soft: #0b0e13;
    --srv-panel: #10141a;
    --srv-panel-2: #141920;
    --srv-text: #f3f6f8;
    --srv-muted: #a9b1ba;
    --srv-dim: #747d87;
    --srv-accent: #75dfff;
    --srv-accent-soft: #b7f0ff;
    --srv-line: rgba(255,255,255,.11);
    --srv-line-strong: rgba(255,255,255,.18);
    --srv-radius: 12px;
}

body.sr-rebuild-page,
.sr-home,
.sr-services,
.sr-about,
.sr-contact {
    background: var(--srv-bg) !important;
    color: var(--srv-text);
}

/* Global shell: quieter, editorial, not app-like. */
.sr-global-header {
    background: rgba(7,9,13,.94) !important;
    border-bottom: 1px solid var(--srv-line) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.sr-global-header-inner {
    min-height: 72px !important;
}

.sr-brand-mark {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    border-color: rgba(117,223,255,.55) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sr-brand-mark::before {
    inset: 7px !important;
    border-radius: 50% !important;
    border-color: rgba(117,223,255,.75) !important;
}

.sr-brand-mark::after {
    inset: 13px 4px !important;
    border-color: rgba(117,223,255,.75) !important;
}

.sr-global-desktop-nav a,
.sr-global-mobile-menu a {
    color: var(--srv-muted) !important;
}

.sr-global-desktop-nav a:hover,
.sr-global-desktop-nav a:focus-visible,
.sr-global-mobile-menu a:hover,
.sr-global-mobile-menu a:focus-visible {
    color: var(--srv-text) !important;
    background: transparent !important;
}

.sr-global-lang,
.sr-global-cta,
.sr-btn,
.sr-nav-cta,
.sr-language-link {
    border-radius: 8px !important;
}

.sr-global-cta,
.sr-btn-primary,
.sr-btn-light {
    color: #071017 !important;
    border-color: transparent !important;
    background: var(--srv-accent) !important;
    box-shadow: none !important;
}

.sr-btn-ghost,
.sr-language-link,
.sr-global-lang {
    border-color: var(--srv-line-strong) !important;
    background: transparent !important;
}

.sr-global-footer {
    background: #06080b !important;
    border-top: 1px solid var(--srv-line) !important;
}

/* Shared tone: flatten decorative gradients and reduce visual noise. */
.sr-hero,
.sr-services-hero,
.sr-service-hero,
.sr-portfolio-hero,
.sr-about,
.sr-contact,
.sr-contact-hero {
    background: var(--srv-bg) !important;
}

.sr-grid-noise,
.sr-about-grid-noise {
    opacity: .16 !important;
    background-size: 84px 84px !important;
}

.sr-kicker {
    color: var(--srv-accent) !important;
    letter-spacing: .10em !important;
}

.sr-kicker > span,
.sr-kicker::before {
    background: var(--srv-accent) !important;
    box-shadow: none !important;
}

.sr-home em,
.sr-services em,
.sr-about em,
.sr-contact em,
.sr-portfolio-hero h1 em,
.sr-portfolio-section-head h2 em {
    color: var(--srv-accent) !important;
}

/* Home hero: stronger typography, smaller and calmer schematic. */
.sr-hero {
    min-height: 690px !important;
    padding-block: clamp(78px,8vw,118px) 74px !important;
}

.sr-hero-grid {
    grid-template-columns: minmax(0,1.15fr) minmax(340px,.72fr) !important;
    gap: clamp(42px,7vw,92px) !important;
}

.sr-hero h1 {
    max-width: 800px !important;
    font-size: clamp(50px,5.5vw,76px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    font-weight: 780 !important;
}

.sr-lang-ar .sr-hero h1,
.sr-site[dir="rtl"] .sr-hero h1 {
    font-size: clamp(46px,5vw,68px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.02em !important;
    font-weight: 740 !important;
}

.sr-hero-lead,
.sr-hero-copy > p,
.sr-services-lead,
.sr-contact-lead,
.sr-about-copy > p:not(.sr-kicker) {
    color: var(--srv-muted) !important;
}

.sr-spatial-demo {
    min-height: 420px !important;
    padding: 18px !important;
    border-radius: var(--srv-radius) !important;
    border-color: var(--srv-line-strong) !important;
    background: var(--srv-panel) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.sr-demo-map {
    height: 255px !important;
    border-radius: 8px !important;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        #0b0f14 !important;
    background-size: 32px 32px !important;
}

.sr-demo-map::before,
.sr-demo-map::after,
.sr-pulse {
    box-shadow: none !important;
}

.sr-command-card {
    margin: -18px 10px 0 !important;
    border-radius: 8px !important;
    background: #0d1117 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.sr-command-icon {
    border-radius: 6px !important;
    background: var(--srv-accent) !important;
}

.sr-node,
.sr-visual-node {
    box-shadow: none !important;
}

.sr-route,
.sr-visual-line {
    box-shadow: none !important;
}

/* Proof / trust row becomes a calm editorial strip. */
.sr-proof,
.sr-system,
.sr-ai,
.sr-services-list,
.sr-services-system,
.sr-service-process,
.sr-related,
.sr-portfolio-featured,
.sr-about-stack {
    background: var(--srv-bg-soft) !important;
}

.sr-proof {
    padding: 22px 0 54px !important;
}

.sr-proof-row span {
    min-height: 66px !important;
    color: #c4cbd2 !important;
    font-weight: 700 !important;
}

/* Homepage service cards: less tile-like, more editorial. */
.sr-service-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    border-left: 0 !important;
    gap: 0 !important;
}

.sr-service-card {
    min-height: 235px !important;
    padding: 28px 26px 54px !important;
    border: 0 !important;
    border-top: 1px solid var(--srv-line) !important;
    background: transparent !important;
    transform: none !important;
}

.sr-service-card:nth-child(odd) {
    border-inline-end: 1px solid var(--srv-line) !important;
}

.sr-service-card h3 {
    margin-top: 34px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.sr-service-card:hover {
    background: rgba(255,255,255,.025) !important;
}

/* Homepage real work: images become documentary evidence, not giant hero art. */
.sr-work-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 30px 18px !important;
}

.sr-work-media,
.sr-work-card:first-child .sr-work-media {
    min-height: 290px !important;
    aspect-ratio: 16/10;
    border-radius: 10px !important;
    border-color: var(--srv-line) !important;
    background-color: #15191f !important;
    background-blend-mode: luminosity;
    box-shadow: none !important;
    transform: none !important;
}

.sr-work-media::after {
    background: linear-gradient(to top, rgba(7,9,13,.66), rgba(7,9,13,.12) 56%, rgba(7,9,13,.22)) !important;
}

.sr-work-card:hover .sr-work-media {
    transform: none !important;
    border-color: rgba(117,223,255,.42) !important;
    background-blend-mode: normal;
}

.sr-work-number,
.sr-work-open,
.sr-portfolio-index,
.sr-portfolio-open {
    border-radius: 6px !important;
    background: rgba(7,9,13,.78) !important;
    backdrop-filter: none !important;
}

/* AI section: remove glossy marketing-panel feel. */
.sr-ai-shell,
.sr-agent-card,
.sr-cta-shell,
.sr-about-final-card {
    border-radius: var(--srv-radius) !important;
    background: var(--srv-panel) !important;
    box-shadow: none !important;
}

.sr-dialog-row {
    border-radius: 8px !important;
    background: transparent !important;
}

/* Services: replace orbit/radar look with a simple capability matrix. */
.sr-services-hero-grid,
.sr-service-hero-grid {
    grid-template-columns: minmax(0,1.12fr) minmax(330px,.68fr) !important;
}

.sr-services-hero h1,
.sr-service-hero h1 {
    font-size: clamp(48px,5.1vw,72px) !important;
    line-height: 1.04 !important;
    font-weight: 760 !important;
}

.sr-lang-ar .sr-services-hero h1,
.sr-lang-ar .sr-service-hero h1 {
    line-height: 1.18 !important;
    font-weight: 730 !important;
}

.sr-services-orbit {
    min-height: 350px !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    align-content: center;
    padding: 22px !important;
    border-radius: var(--srv-radius) !important;
    background: var(--srv-panel) !important;
    box-shadow: none !important;
}

.sr-services-orbit::before,
.sr-services-orbit::after {
    display: none !important;
}

.sr-services-orbit span {
    position: static !important;
    min-height: 64px !important;
    border-radius: 8px !important;
    border-color: var(--srv-line) !important;
    background: #0b0f14 !important;
    box-shadow: none !important;
    color: #d8e0e6 !important;
}

.sr-services-orbit span:nth-child(3) {
    grid-column: 1 / -1;
}

.sr-solution-row {
    min-height: 145px !important;
}

.sr-solution-row:hover,
.sr-lang-ar .sr-solution-row:hover {
    transform: none !important;
}

.sr-service-visual {
    min-height: 390px !important;
    border-radius: var(--srv-radius) !important;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        var(--srv-panel) !important;
    background-size: 40px 40px !important;
    box-shadow: none !important;
}

.sr-service-visual::before,
.sr-service-visual::after {
    border-radius: 10px !important;
    border-color: rgba(117,223,255,.12) !important;
}

.sr-service-visual::before {
    width: 240px !important;
    height: 240px !important;
}

.sr-service-visual::after {
    width: 150px !important;
    height: 150px !important;
}

.sr-visual-core {
    width: 82px !important;
    height: 82px !important;
    border-radius: 10px !important;
    background: #0d151d !important;
    box-shadow: none !important;
}

.sr-use-grid span,
.sr-related-grid a,
.sr-deliverable,
.sr-agent-card {
    border-radius: 8px !important;
}

/* Portfolio: keep real imagery but unify, mute and reduce dominance. */
.sr-portfolio-hero h1 {
    font-size: clamp(50px,5.4vw,76px) !important;
    font-weight: 760 !important;
}

.sr-lang-ar .sr-portfolio-hero h1 {
    line-height: 1.18 !important;
    font-weight: 730 !important;
}

.sr-portfolio-featured-grid,
.sr-portfolio-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 34px 18px !important;
}

.sr-portfolio-card.is-primary {
    grid-column: auto !important;
}

.sr-portfolio-media,
.sr-portfolio-card.is-primary .sr-portfolio-media {
    min-height: 285px !important;
    aspect-ratio: 16/10;
    border-radius: 10px !important;
    background-color: #15191f !important;
    background-blend-mode: luminosity;
    box-shadow: none !important;
    transform: none !important;
}

.sr-portfolio-media::before {
    background: linear-gradient(to top, rgba(7,9,13,.66), rgba(7,9,13,.10) 58%, rgba(7,9,13,.20)) !important;
}

.sr-portfolio-card:hover .sr-portfolio-media,
.sr-portfolio-card:focus-visible .sr-portfolio-media {
    transform: none !important;
    border-color: rgba(117,223,255,.42) !important;
    box-shadow: none !important;
    background-blend-mode: normal;
}

/* About: diagram remains, but no radar/glow aesthetic. */
.sr-about-system,
.sr-qualifier-signal {
    min-height: 410px !important;
    border-radius: var(--srv-radius) !important;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        var(--srv-panel) !important;
    background-size: 42px 42px !important;
    box-shadow: none !important;
}

.sr-about-system::before,
.sr-about-system::after,
.sr-qualifier-signal::before,
.sr-qualifier-signal::after {
    border-radius: 10px !important;
    box-shadow: none !important;
}

.sr-about-system-core,
.sr-signal-ring {
    border-radius: 10px !important;
    background: #0d151d !important;
    box-shadow: none !important;
}

.sr-about-system-node,
.sr-contact-meta span,
.sr-agent-badge {
    border-radius: 6px !important;
}

.sr-about-card-grid article,
.sr-about-final-card {
    border-radius: 8px !important;
    background: transparent !important;
}

/* Contact: make form feel like a serious project brief, not a neon dashboard. */
.sr-contact-copy h1 {
    font-size: clamp(48px,5.4vw,76px) !important;
    line-height: 1.04 !important;
    font-weight: 760 !important;
}

.sr-lang-ar .sr-contact-copy h1 {
    line-height: 1.18 !important;
    font-weight: 730 !important;
}

.sr-q-form,
.sr-q-summary,
.sr-success-card,
.sr-alert-card {
    border-radius: 10px !important;
    background: var(--srv-panel) !important;
    box-shadow: none !important;
}

.sr-signal-ring i {
    box-shadow: none !important;
}

/* Reduced global radii and shadows across rebuild. */
body.sr-rebuild-page [class*="card"],
body.sr-rebuild-page [class*="panel"] {
    box-shadow: none;
}

/* Mobile: tighter typography and less decorative vertical height. */
@media (max-width: 820px) {
    .sr-content-width {
        width: min(calc(100% - 34px), var(--srh-max)) !important;
    }

    .sr-hero,
    .sr-services-hero,
    .sr-service-hero,
    .sr-portfolio-hero,
    .sr-about-hero,
    .sr-contact-hero {
        padding-top: 52px !important;
    }

    .sr-hero-grid,
    .sr-services-hero-grid,
    .sr-service-hero-grid,
    .sr-contact-hero-grid,
    .sr-about-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .sr-hero h1,
    .sr-lang-ar .sr-hero h1,
    .sr-site[dir="rtl"] .sr-hero h1,
    .sr-services-hero h1,
    .sr-service-hero h1,
    .sr-portfolio-hero h1,
    .sr-about-copy h1,
    .sr-about[dir="rtl"] .sr-about-copy h1,
    .sr-contact-copy h1 {
        max-width: none !important;
        font-size: clamp(34px,9.4vw,42px) !important;
        line-height: 1.16 !important;
        letter-spacing: -.018em !important;
    }

    .sr-lang-ar .sr-services-hero h1,
    .sr-lang-ar .sr-service-hero h1,
    .sr-lang-ar .sr-portfolio-hero h1,
    .sr-lang-ar .sr-contact-copy h1 {
        letter-spacing: 0 !important;
    }

    .sr-hero-lead,
    .sr-services-lead,
    .sr-contact-lead,
    .sr-about-copy > p:not(.sr-kicker) {
        font-size: 16px !important;
        line-height: 1.72 !important;
    }

    .sr-spatial-demo,
    .sr-service-visual,
    .sr-about-system,
    .sr-qualifier-signal {
        min-height: 300px !important;
        border-radius: 10px !important;
    }

    .sr-demo-map {
        height: 210px !important;
    }

    .sr-services-orbit {
        min-height: 250px !important;
        padding: 14px !important;
    }

    .sr-service-grid,
    .sr-work-grid,
    .sr-portfolio-featured-grid,
    .sr-portfolio-grid {
        grid-template-columns: 1fr !important;
    }

    .sr-service-card:nth-child(odd) {
        border-inline-end: 0 !important;
    }

    .sr-work-media,
    .sr-work-card:first-child .sr-work-media,
    .sr-portfolio-media,
    .sr-portfolio-card.is-primary .sr-portfolio-media {
        min-height: 220px !important;
        aspect-ratio: 16/10 !important;
    }

    .sr-about-card-grid article,
    .sr-deliverable,
    .sr-related-grid a,
    .sr-use-grid span {
        border-radius: 8px !important;
    }

    .sr-global-mobile-menu summary,
    .sr-global-mobile-menu nav {
        border-radius: 8px !important;
    }
}