/*
 * Webbang UI Refinement v10
 * Public-site visual system only. SEO metadata and structured data are intentionally untouched.
 */
:root {
    --wb-blue: #3372B8;
    --wb-blue-mid: #3B9FC7;
    --wb-cyan: #46BDCA;
    --wb-bg: #070D1A;
    --wb-surface: #0C1422;
    --wb-surface-2: #101B2B;
    --wb-card: #111D2E;
    --wb-border: #22334A;
    --wb-border-soft: rgba(168,183,201,.14);
    --wb-text: #F4F8FC;
    --wb-copy: #B9C6D6;
    --wb-muted: #92A2B5;
    --wb-gradient: linear-gradient(135deg,#3372B8 0%,#3B9FC7 55%,#46BDCA 100%);
    --wb-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wb-radius: 14px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--wb-font) !important;
    background: var(--wb-bg);
    color: var(--wb-text);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -.008em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body > .noise { opacity: .012 !important; }
body > .fixed.-z-20 {
    background: radial-gradient(circle at 10% 0%,rgba(51,114,184,.10),transparent 27%),
                radial-gradient(circle at 92% 5%,rgba(70,189,202,.07),transparent 24%),
                #070D1A !important;
}

/* Type hierarchy: intentionally restrained and readable. */
main h1, main h2, main h3, main h4,
footer h2, header strong {
    font-family: var(--wb-font) !important;
    font-weight: 650 !important;
    text-wrap: balance;
}
.display {
    font-size: clamp(2.7rem,5.2vw,4.6rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.042em !important;
    font-weight: 650 !important;
}
.section-title {
    font-size: clamp(2rem,3.5vw,3.15rem) !important;
    line-height: 1.09 !important;
    letter-spacing: -.034em !important;
    font-weight: 650 !important;
}
.eyebrow,
.section-kicker,
.hero-badge {
    font-size: .78rem !important;
    line-height: 1.35 !important;
    letter-spacing: .105em !important;
    font-weight: 700 !important;
}
.eyebrow::before { width: 1.65rem !important; opacity: .85; }
.muted, .prose-webbang { color: var(--wb-copy) !important; }
.prose-webbang { font-size: 1rem !important; line-height: 1.8 !important; }
main p { text-wrap: pretty; }

/* Layout rhythm */
.shell { max-width: 1240px !important; }
main section.py-24 { padding-top: 5.25rem !important; padding-bottom: 5.25rem !important; }
main section.py-20 { padding-top: 4.75rem !important; padding-bottom: 4.75rem !important; }
main section.pb-28 { padding-bottom: 5.5rem !important; }
main section.pb-24 { padding-bottom: 5.25rem !important; }

/* Flat, clean surfaces instead of competing gradients/shadows. */
.card,
.glass {
    background: rgba(12,20,34,.88) !important;
    border-color: var(--wb-border-soft) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.card { border-radius: var(--wb-radius) !important; }
.card:hover { border-color: rgba(70,189,202,.28) !important; }
.grid-lines { opacity: .18 !important; }
.portal-shadow { box-shadow: 0 22px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(70,189,202,.08) !important; }

/* Buttons */
.btn-primary,
.btn-secondary {
    min-height: 48px !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    border-radius: 10px !important;
    font-size: .95rem !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}
.btn-primary { background: var(--wb-gradient) !important; }
.btn-primary:hover { transform: translateY(-1px) !important; filter: brightness(1.04); }
.btn-secondary {
    background: rgba(255,255,255,.025) !important;
    border-color: rgba(168,183,201,.20) !important;
}
.btn-secondary:hover { background: rgba(70,189,202,.045) !important; border-color: rgba(70,189,202,.34) !important; }

/* Inputs: never use tiny form text. */
.field, .field-light { font-size: 1rem !important; min-height: 48px; border-radius: 10px !important; }
.label { font-size: .78rem !important; letter-spacing: .08em !important; color: #AEBCCC !important; }

/* Header */
.wb-site-header {
    background: rgba(7,13,26,.94) !important;
    border-bottom: 1px solid rgba(168,183,201,.11) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.wb-header-inner { min-height: 76px; height: 76px !important; }
.wb-primary-nav { gap: 2rem !important; font-size: .95rem !important; font-weight: 600 !important; color: #BAC5D3 !important; }
.wb-primary-nav > a,
.wb-primary-nav button { transition: color .16s ease; }
.wb-primary-nav > a:hover,
.wb-primary-nav button:hover { color: #fff !important; }
.wb-solutions-menu {
    width: min(720px, calc(100vw - 2rem)) !important;
    top: 66px !important;
    padding: 10px !important;
    border-radius: 15px !important;
    background: #0C1422 !important;
    border-color: rgba(168,183,201,.14) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.38) !important;
}
.wb-solutions-menu a { padding: .95rem 1rem !important; border-radius: 10px !important; }
.wb-solutions-menu a:hover { background: #111D2E !important; }
.wb-solutions-menu a span:first-child { font-size: .95rem !important; font-weight: 650 !important; }
.wb-solutions-menu a span:last-child { margin-top: .25rem !important; font-size: .82rem !important; line-height: 1.5 !important; color: #899AAF !important; }
.wb-cart-button, .wb-mobile-button { border-color: rgba(168,183,201,.16) !important; }
.wb-mobile-panel { background: #08101D !important; }
.wb-mobile-panel a { font-size: 1rem; padding: .85rem 1rem !important; }

/* Footer */
.wb-site-footer { background: #050A12 !important; padding-top: 4.5rem !important; }
.wb-site-footer p, .wb-site-footer a { font-size: .9rem; }
.wb-site-footer .wb-footer-copy { font-size: .95rem !important; line-height: 1.75 !important; color: #93A3B6 !important; }
.wb-site-footer h2 { font-size: .76rem !important; letter-spacing: .09em !important; color: #8595A9 !important; }
.wb-site-footer ul { margin-top: 1rem !important; }
.wb-site-footer li + li { margin-top: .7rem !important; }
.wb-site-footer a { color: #AAB8C8 !important; }
.wb-site-footer a:hover { color: var(--wb-cyan) !important; }

/* Generic database-driven pages */
main .card.min-h-64 { min-height: 15rem !important; padding: 1.6rem !important; }
main .card.min-h-64 h3 { margin-top: 3.5rem !important; font-size: 1.2rem !important; }
main .card.min-h-64 p { font-size: .95rem !important; line-height: 1.7 !important; }
main .text-sm.leading-7 { font-size: .95rem !important; line-height: 1.7 !important; }
main .text-xs.uppercase { letter-spacing: .09em !important; }

/* Public readability floor for supporting UI copy. */
main .text-sm { font-size: .95rem !important; }
main .text-xs { font-size: .82rem !important; }
main [class*="text-[10px]"] { font-size: .75rem !important; }
main [class*="text-[11px]"] { font-size: .78rem !important; }
main .leading-6 { line-height: 1.65 !important; }

/* Homepage: calmer composition and clearer spacing. */
.wb-home > section:first-child .shell { min-height: 650px !important; gap: 4.5rem !important; padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.wb-home .ambient-orb { opacity: .55 !important; }
.wb-home .animate-float { animation: none !important; }
.wb-home .animate-sweep { display: none !important; }
.wb-home .rounded-3xl { border-radius: 16px !important; }
.wb-home .portal-shadow { background: #0C1422 !important; }
.wb-home > section:nth-child(2) { padding-top: 1.45rem !important; padding-bottom: 1.45rem !important; }
.wb-home > section:nth-child(2) p { font-size: .78rem !important; letter-spacing: .08em !important; }
.wb-home #services .card { min-height: 280px !important; padding: 1.55rem !important; }
.wb-home #services .card:hover { transform: translateY(-2px) !important; }
.wb-home #services .card h3 { font-size: 1.25rem !important; font-weight: 650 !important; }
.wb-home #services .card p { font-size: .95rem !important; line-height: 1.7 !important; }
.wb-home article { background: #0C1422 !important; border-color: var(--wb-border-soft) !important; }
.wb-home article h3 { font-weight: 650 !important; }
.wb-home .bg-white\/\[\.02\] { background: rgba(255,255,255,.012) !important; }

/* Web Design & Development page refinement */
.wdd-page { font-family: var(--wb-font) !important; background: var(--wb-bg) !important; color: var(--wb-text) !important; }
.wdd-hero {
    padding-top: 3.25rem !important;
    padding-bottom: 5.5rem !important;
    background: radial-gradient(circle at 10% 30%,rgba(51,114,184,.12),transparent 32%),
                radial-gradient(circle at 88% 45%,rgba(70,189,202,.07),transparent 28%),
                #070D1A !important;
}
.wdd-hero-grid { opacity: .38; }
.wdd-breadcrumb { margin-bottom: 2.5rem !important; font-size: .9rem !important; }
.wdd-hero-layout { gap: 4.5rem !important; }
.wdd-kicker { font-size: .78rem !important; letter-spacing: .10em !important; }
.wdd-hero h1 {
    font-size: clamp(2.85rem,5.25vw,4.7rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    font-weight: 650 !important;
}
.wdd-lead { margin-top: 1.55rem !important; font-size: 1.08rem !important; line-height: 1.75 !important; color: #B9C6D6 !important; }
.wdd-studio { border-radius: 16px !important; box-shadow: 0 24px 64px rgba(0,0,0,.28) !important; }
.wdd-section-nav { top: 76px !important; background: rgba(7,13,26,.96) !important; }
.wdd-section-nav a { font-size: .9rem !important; font-weight: 600 !important; }
.wdd-intro, .wdd-services, .wdd-process, .wdd-standards, .wdd-tech, .wdd-work, .wdd-faq, .wdd-contact { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.wdd-intro h2,.wdd-section-heading h2,.wdd-process h2,.wdd-standards h2,.wdd-tech h2,.wdd-work h2,.wdd-faq h2,.wdd-contact h2 {
    font-size: clamp(2.05rem,3.4vw,3.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.034em !important;
    font-weight: 650 !important;
}
.wdd-service-card { min-height: 280px !important; padding: 1.5rem !important; border-radius: 14px !important; background: #0D1726 !important; box-shadow: none !important; }
.wdd-service-card:hover { transform: translateY(-2px) !important; background: #101C2D !important; }
.wdd-service-card h3 { margin-top: 4.2rem !important; font-size: 1.25rem !important; font-weight: 650 !important; }
.wdd-service-card p { font-size: .95rem !important; color: #9FAFC1 !important; }
.wdd-industry-grid a { padding: 1.35rem 1.45rem !important; border-radius: 13px !important; }
.wdd-copy-block>p, .wdd-section-heading>p { font-size: 1.02rem !important; color: #B3C0D0 !important; }

/* UK VRM page: retain the Obsidian identity, but improve legibility and use Webbang accents. */
.vrm-page { font-family: var(--wb-font) !important; }
.vrm-section-nav { top: 76px !important; }
.vrm-hero-title { font-weight: 650 !important; letter-spacing: -.04em !important; }
.vrm-hero-copy { font-size: 1.05rem !important; line-height: 1.7 !important; color: rgba(244,248,252,.68) !important; }
.vrm-section-heading { font-weight: 650 !important; letter-spacing: -.034em !important; }
.vrm-section-copy { font-size: .98rem !important; color: rgba(244,248,252,.62) !important; }
.vrm-benefit-item h3 { font-size: 1rem !important; font-weight: 650 !important; }
.vrm-benefit-item p { font-size: .9rem !important; color: rgba(244,248,252,.60) !important; }
.vrm-shared-features>p, .vrm-plan-label, .vrm-data-kicker, .vrm-plan-badge { font-size: .74rem !important; }
.vrm-shared-features span { font-size: .86rem !important; }
.vrm-plan-topline h3 { font-size: 1.3rem !important; font-weight: 650 !important; }
.vrm-plan-description { font-size: .91rem !important; color: rgba(244,248,252,.62) !important; }
.vrm-plan-difference strong { font-size: .9rem !important; }
.vrm-plan-difference small { font-size: .78rem !important; }
.vrm-pricing-footer p { font-size: .82rem !important; color: rgba(244,248,252,.48) !important; }
.vrm-integration-card h3 { font-size: 1.05rem !important; font-weight: 650 !important; }
.vrm-integration-card p { font-size: .9rem !important; color: rgba(244,248,252,.58) !important; }
.vrm-data-panel h3 { font-size: 1.45rem !important; font-weight: 650 !important; }
.vrm-data-panel p:not(.vrm-data-kicker) { font-size: .9rem !important; color: rgba(244,248,252,.58) !important; }
.vrm-faq-item summary { font-size: 1rem !important; font-weight: 650 !important; }
.vrm-faq-item>div { font-size: .92rem !important; color: rgba(244,248,252,.60) !important; }
.vrm-plan-card, .vrm-integration-card, .vrm-data-panel, .vrm-benefit-list { box-shadow: none !important; }

/* Shop/product readability */
main [class*="text-[10px]"] { letter-spacing: .08em; }

@media (max-width: 1023px) {
    .wb-header-inner { height: 70px !important; min-height: 70px; }
    .wdd-section-nav, .vrm-section-nav { top: 70px !important; }
    .wdd-hero-layout { gap: 2.75rem !important; }
}
@media (max-width: 767px) {
    html { font-size: 16px; }
    .display { font-size: clamp(2.35rem,11vw,3.4rem) !important; }
    .section-title { font-size: clamp(1.85rem,8vw,2.65rem) !important; }
    main section.py-24 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .wdd-hero { padding-top: 2.5rem !important; padding-bottom: 4rem !important; }
    .wdd-hero h1 { font-size: clamp(2.45rem,11vw,3.5rem) !important; }
    .wdd-lead { font-size: 1rem !important; }
    .wdd-intro, .wdd-services, .wdd-process, .wdd-standards, .wdd-tech, .wdd-work, .wdd-faq, .wdd-contact { padding-top: 4.2rem !important; padding-bottom: 4.2rem !important; }
    .wb-site-footer { padding-top: 3.75rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}