/* ==========================================================================
   Remap Bootstrap's own variables to the custom design tokens, then layer
   custom component styles on top so nothing reads as stock Bootstrap.
   ========================================================================== */

:root {
    --bs-primary: var(--hws-primary);
    --bs-primary-rgb: 70, 125, 204;
    --bs-body-font-family: var(--hws-font-body);
    --bs-body-color: var(--hws-text);
    --bs-body-bg: var(--hws-bg);
    --bs-border-radius: var(--hws-radius-sm);
    --bs-border-radius-lg: var(--hws-radius-md);
    --bs-border-color: var(--hws-border);
    --bs-link-color: var(--hws-primary);
    --bs-link-hover-color: var(--hws-primary-dark);
}

/* ---- Animated SVG icons ----
   Shared wrapper for every hwsIcon() call (see includes/icons.php), which
   replaces Bootstrap Icons font glyphs with inline stroke-based SVGs across
   the homepage and the shared partials it pulls in. Sized at 1em so it
   drops into any existing icon-sized container (.hws-card-icon,
   .hws-stat-icon-circle, .hws-social-link, etc.) without those needing
   their own changes - only more specific rules there override the size.
   Two animations layer on top of that inherited color/size, deliberately
   on two different elements so they never fight over the same transform:
   a one-shot pop-in on the OUTER .hws-svg-icon span the first time an icon
   scrolls into view (main.js toggles .is-drawn, mirroring the existing
   .hws-reveal IntersectionObserver), and a hover micro-motion on the INNER
   svg, additive with any existing hover transform on the icon's container
   (.hws-card:hover .hws-card-icon already scales/rotates the box; this
   also nudges the glyph inside it). Each drawable element still carries
   pathLength="1" (harmless, and keeps a dash-based effect easy to add
   later) but the reveal itself intentionally doesn't key off it. */
.hws-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 0;
    flex-shrink: 0;
    vertical-align: -0.14em;
}

.hws-svg-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    transition: transform 320ms var(--hws-ease);
}

.hws-svg-icon svg * {
    vector-effect: non-scaling-stroke;
}

a:hover > .hws-svg-icon svg,
a:hover .hws-svg-icon svg,
button:hover .hws-svg-icon svg,
.hws-social-link:hover .hws-svg-icon svg,
.dropdown-item:hover .hws-svg-icon svg {
    transform: scale(1.14) rotate(-8deg);
}

@media (prefers-reduced-motion: no-preference) {
    .hws-svg-icon {
        opacity: 0;
        transform: scale(0.5) rotate(-25deg);
        transition: opacity 550ms var(--hws-ease), transform 550ms var(--hws-ease);
    }
    .hws-svg-icon.is-drawn {
        opacity: 1;
        transform: none;
    }
    /* Persistent chrome (navbar, footer) shouldn't sit invisible/rotated
       waiting on a scroll-triggered reveal that may never fire - a fast
       scroll straight to the footer (End key, a flick, scrollIntoView) can
       skip past an element in a single frame with no intersecting frame in
       between, leaving it permanently mid-animation. Unlike .hws-reveal,
       this icon-draw observer has no catch-up safety net, and chrome icons
       (social links, topbar phone/email) aren't "content" a user scrolls to
       reveal - they should just be there. Render them at full state
       immediately; content-area icons keep the draw-in effect. */
    header .hws-svg-icon,
    footer .hws-svg-icon {
        opacity: 1;
        transform: none;
    }
}

/* ---- Buttons ---- */
.btn {
    font-weight: var(--hws-weight-semibold);
    border-radius: var(--hws-radius-pill);
    padding: 0.7rem 1.5rem;
    transition: transform var(--hws-transition-fast), box-shadow var(--hws-transition-fast), background-color var(--hws-transition-fast), color var(--hws-transition-fast);
}

.btn:focus-visible {
    outline: 3px solid var(--hws-primary-light);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--hws-gradient-primary);
    border: none;
    color: #fff;
    box-shadow: var(--hws-shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: var(--hws-shadow-md);
    color: #fff;
}

.btn-outline-light {
    border-width: 1.5px;
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-light,
.btn-light {
    transition: transform var(--hws-transition-fast), box-shadow var(--hws-transition-fast), background-color var(--hws-transition-fast), color var(--hws-transition-fast);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-light:hover {
    transform: translateY(-1px);
    box-shadow: var(--hws-shadow-sm);
}

.btn-lg {
    padding: 0.85rem 1.9rem;
    font-size: var(--hws-size-base);
}

/* Arrow nudge for any button/link that carries a trailing bi-arrow-right icon */
.btn i.bi-arrow-right,
.hws-card-link i.bi-arrow-right,
.btn .hws-svg-icon,
.hws-card-link .hws-svg-icon {
    transition: transform var(--hws-transition-fast);
}

.btn:hover i.bi-arrow-right,
.btn:hover .hws-svg-icon {
    transform: translateX(3px);
}

/* ---- Utility bar ---- */
.hws-topbar {
    background: var(--hws-bg-dark);
    color: var(--hws-text-on-dark-muted);
    font-size: var(--hws-size-xs);
    padding-block: 0.4rem;
    opacity: 0.88;
}

.hws-topbar a {
    color: var(--hws-text-on-dark-muted);
    text-decoration: none;
    transition: color var(--hws-transition-fast);
}

.hws-topbar a:hover {
    color: #fff;
}

.hws-topbar i,
.hws-topbar .hws-svg-icon {
    color: var(--hws-text-on-dark-muted);
    margin-right: 0.3rem;
}

/* ---- Navbar ---- */
.hws-navbar {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--hws-border);
    min-height: var(--hws-navbar-height);
    transition: box-shadow var(--hws-transition-base), padding-block var(--hws-transition-base);
}

.hws-navbar.is-scrolled {
    box-shadow: var(--hws-shadow-sm);
}

/* Direction-aware: slightly more compact while actively scrolling down past
   the fold, restored the moment the user scrolls back up. Padding-only, so
   there's no width/height jump - just a gentle reduction in vertical air. */
.hws-navbar.hws-navbar--compact {
    padding-block: 0.55rem !important;
}

.hws-navbar .hws-container {
    flex-wrap: wrap;
}

.hws-navbar .navbar-brand {
    display: flex;
    align-items: center;
}

.hws-navbar .navbar-brand .hws-logo-img {
    height: 40px;
    width: auto;
    transition: opacity var(--hws-transition-fast);
}

.hws-navbar .navbar-brand:hover .hws-logo-img {
    opacity: 0.8;
}

.hws-nav-list {
    gap: 0.15rem;
}

.hws-navbar .nav-link {
    font-weight: var(--hws-weight-medium);
    color: var(--hws-text);
    padding-inline: var(--hws-space-4) !important;
    position: relative;
}

.hws-navbar-login {
    font-size: var(--hws-size-sm);
    font-weight: var(--hws-weight-medium);
    color: var(--hws-text-muted);
    text-decoration: none;
    padding-inline: var(--hws-space-2);
    transition: color var(--hws-transition-fast);
}

.hws-navbar-login:hover {
    color: var(--hws-primary);
}

.hws-navbar .nav-link.active {
    color: var(--hws-primary);
}

.hws-navbar .dropdown-menu {
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius-md);
    box-shadow: var(--hws-shadow-md);
    padding: var(--hws-space-2);
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--hws-transition-fast), transform var(--hws-transition-fast), visibility var(--hws-transition-fast);
    pointer-events: none;
}

.hws-navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Below the xl breakpoint, Bootstrap renders dropdown-menus in normal flow
   (position: static) rather than absolutely-positioned + Popper-placed, so
   the always-"display: block" fade trick above would reserve layout space
   for every closed dropdown. Fall back to plain show/hide there instead. */
@media (max-width: 1199.98px) {
    .hws-navbar .dropdown-menu {
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    .hws-navbar .dropdown-menu.show {
        display: block;
    }
}

.hws-navbar .dropdown-item {
    border-radius: var(--hws-radius-sm);
    padding: 0.55rem var(--hws-space-3);
}

.hws-navbar .dropdown-item:hover,
.hws-navbar .dropdown-item:focus {
    background-color: var(--hws-primary-light);
    color: var(--hws-primary-dark);
}

/* Services is deliberately a compact product-style menu, not Bootstrap's
   stock text list. It remains a normal accessible Bootstrap dropdown. */
.hws-navbar .hws-services-menu { min-width: 310px; padding: 0.35rem; border-radius: 12px; }
.hws-service-menu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; white-space: normal; border-radius: 8px; transition: background var(--hws-transition-fast); }
.hws-service-menu-item > i:first-child,
.hws-service-menu-item > .hws-svg-icon:first-child { width: 24px; height: 24px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background: var(--hws-primary-light); color: var(--hws-primary); font-size: 0.7rem; transition: background var(--hws-transition-fast), color var(--hws-transition-fast); }
.hws-service-menu-item > .hws-svg-icon svg { width: 14px; height: 14px; transition: transform var(--hws-transition-fast); }
.hws-service-menu-item strong, .hws-service-menu-item small { display: block; }
.hws-service-menu-item strong { font-size: 0.82rem; font-weight: 600; line-height: 1.3; }
.hws-service-menu-item small { color: var(--hws-text-muted); font-size: 0.68rem; margin-top: 0.05rem; }
.hws-service-menu-item:hover, .hws-service-menu-item:focus { background: var(--hws-primary-light); }
.hws-service-menu-item:hover > i:first-child, .hws-service-menu-item:focus > i:first-child,
.hws-service-menu-item:hover > .hws-svg-icon:first-child, .hws-service-menu-item:focus > .hws-svg-icon:first-child { background: var(--hws-primary); color: #fff; }
.hws-service-menu-item:hover > .hws-svg-icon svg,
.hws-service-menu-item:focus > .hws-svg-icon svg { transform: scale(1.04); }
.hws-service-menu-item .ms-auto { font-size: 0.75rem; transition: transform var(--hws-transition-fast); }
.hws-service-menu-item:hover .ms-auto, .hws-service-menu-item:focus .ms-auto { transform: translateX(3px); }
.hws-service-menu-label { display: block; padding: 0.3rem 0.55rem 0.1rem; font-size: 0.64rem; font-weight: var(--hws-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--hws-text-muted); }

.hws-navbar-phone {
    font-weight: var(--hws-weight-semibold);
    color: var(--hws-text);
    white-space: nowrap;
}

/* Transparent-over-hero variant - only index.php sets body.has-hero, so
   every other page keeps the solid navbar above unchanged. */
@media (min-width: 992px) {
    body.has-hero .hws-navbar {
        background-color: transparent;
        backdrop-filter: none;
        border-bottom-color: transparent;
        box-shadow: none;
    }

    body.has-hero .hws-navbar.is-scrolled {
        background-color: rgba(255, 255, 255, 0.92);
        backdrop-filter: saturate(180%) blur(10px);
        border-bottom-color: var(--hws-border);
    }
}

/* Nav link underline sweep - applies identically to ALL nav links (including dropdown toggles) */
.hws-navbar .dropdown-toggle::after {
    display: none !important;
}

.hws-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: var(--hws-space-4);
    right: var(--hws-space-4);
    bottom: 2px;
    height: 1.5px;
    background: var(--hws-primary);
    opacity: 0.85;
    border-radius: var(--hws-radius-pill);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--hws-transition-fast);
}

.hws-navbar .nav-link:hover::after,
.hws-navbar .nav-link.active::after {
    transform: scaleX(1);
}

/* ---- Hero ---- */
/* A full opening scene, not a compact banner - min-height keeps it close to
   the viewport on desktop without forcing a fixed height on short content. */
.hws-hero {
    min-height: clamp(640px, 88vh, 980px);
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #F8FAFF 0%, #FFFFFF 100%);
    position: relative;
    overflow: hidden;
    padding-top: clamp(2.5rem, 4.5vw, 4rem);
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.hws-hero-glow {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate(0, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(37, 99, 235, 0.05) 50%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.hws-hero > .hws-container {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Left Content: Eyebrow, Heading, Paragraph, Buttons, Tag List */
.hws-hero .hws-eyebrow {
    color: #2563EB !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 1.25rem !important;
    display: inline-block;
}

.hws-hero h1 {
    font-size: var(--hws-size-hero) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em;
    color: #0F172A !important;
    margin-bottom: 1.5rem !important;
}

.hws-hero h1 .hws-gradient-text {
    background: linear-gradient(135deg, #2563EB 0%, #10B981 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Headline line-mask reveal: each visual line sits in an overflow-hidden
   mask so its inner span can rise into view (GSAP: yPercent + opacity).
   display:block on both preserves the exact same line breaks the old
   <br>-separated markup produced. */
.hws-hero-headline {
    display: block;
}

.hws-hero-line-mask {
    display: block;
    overflow: hidden;
}

.hws-hero-line {
    display: block;
}

/* Rotating keyword inside the headline's third line (main.js). A stable
   min-width (sized to the longest candidate word) means the word changing
   never shifts anything around it; overflow:hidden masks the vertical
   flip transition between words. */
.hws-hero-flip-word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    min-width: 16ch;
    text-align: left;
}

.hws-hero-flip-word {
    display: inline-block;
}

/* GSAP entrance start-state - only applied once the synchronous inline
   script in index.php confirms motion is allowed and JS is running, so
   no-JS / reduced-motion visitors always see the hero fully rendered. */
.hws-hero-gsap-armed [data-hero-el="eyebrow"],
.hws-hero-gsap-armed .hws-hero-line,
.hws-hero-gsap-armed [data-hero-el="lead"],
.hws-hero-gsap-armed [data-hero-el="btn"],
.hws-hero-gsap-armed [data-hero-el="tags"],
.hws-hero-gsap-armed .hws-central-platform-wrap,
.hws-hero-gsap-armed .hws-eco-svg,
.hws-hero-gsap-armed .hws-hero-node-anchor {
    opacity: 0;
}

.hws-hero-gsap-armed .hws-hero-line {
    transform: translateY(100%);
}

.hws-hero-lead {
    font-size: 1rem !important; /* 16px */
    line-height: 1.7 !important;
    color: #64748B !important;
    max-width: 32rem !important;
    margin-bottom: 2rem !important;
}

/* Reference Buttons */
.hws-hero-btn-primary {
    background: linear-gradient(135deg, #2563EB 0%, #10B981 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.85rem 2rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 24px -4px rgba(37, 99, 235, 0.28) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.hws-hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -4px rgba(37, 99, 235, 0.35) !important;
    color: #FFFFFF !important;
}

/* Magnetic CTA (main.js): once armed, GSAP drives x/y itself (folding in
   the same -2px lift) so its inline transform isn't fought by this rule.
   Generic .btn rule added alongside the hero-specific one now that
   data-magnetic is also used on the shared cta.php button (any page). */
.hws-hero-btn-primary.js-magnetic-active:hover,
.btn.js-magnetic-active:hover {
    transform: none;
}

.hws-hero-btn-secondary {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 999px !important;
    padding: 0.85rem 2rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.hws-hero-btn-secondary:hover {
    border-color: #94A3B8 !important;
    transform: translateY(-2px);
    color: #0F172A !important;
}

/* Tag list under buttons */
.hws-hero-taglist {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    color: #64748B;
    letter-spacing: 0.05em;
    margin-top: 1.75rem;
}

.hws-hero-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10B981;
    display: inline-block;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* ==========================================================================
   Right Visual: Circular Service Ecosystem Illustration
   ========================================================================== */
.hws-hero-ecosystem-visual {
    position: relative;
    width: 100%;
    max-width: 740px;
    height: 600px;
    margin-inline: auto;
    user-select: none;
}

.hws-eco-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    transform: translate3d(var(--hws-orbit-x, 0px), var(--hws-orbit-y, 0px), 0);
    transition: transform 0.18s ease-out;
}

/* Concentric Orbit Rings */
.hws-orbit-ring {
    fill: none;
    stroke: #E2E8F0;
    stroke-width: 1.25;
    stroke-dasharray: 4 6;
    transition: stroke 0.3s ease;
}

.hws-orbit-ring--inner { stroke: #D1D5DB; }
.hws-orbit-ring--mid { stroke: #E2E8F0; }
.hws-orbit-ring--outer { stroke: #EEF2F6; }

/* Central 3D Layered Platform with the letter "H" */
.hws-central-platform-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 156px;
    height: 156px;
    z-index: 2;
    animation: hwsPlatformFloat 6s ease-in-out infinite;
}

@keyframes hwsPlatformFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(-6px);
    }
    50% {
        transform: translate(-50%, -50%) translateY(6px);
    }
}

/* Independent mouse-parallax layer for the central platform (4-6px). Nested
   one level inside the anchor+float wrapper above so the two never fight
   over the same `transform` property. */
.hws-platform-mouse-parallax {
    width: 100%;
    height: 100%;
    transform: translate3d(var(--hws-platform-x, 0px), var(--hws-platform-y, 0px), 0);
    transition: transform 0.15s ease-out;
}

.hws-central-platform {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hws-platform-ambient-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.38) 0%, rgba(37, 99, 235, 0.15) 50%, transparent 70%);
    filter: blur(20px);
    border-radius: 50%;
    pointer-events: none;
    transform: translate3d(var(--hws-glow-x, 0px), var(--hws-glow-y, 0px), 0);
    transition: transform 0.2s ease-out, opacity 300ms ease, filter 300ms ease;
}

/* Stacked 3D Isometric Slabs */
.hws-platform-slab {
    position: absolute;
    border-radius: 24px;
    transform: perspective(600px) rotateX(55deg) rotateZ(-45deg);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.18);
}

.hws-slab--base {
    width: 138px;
    height: 138px;
    top: 20px;
    background: linear-gradient(135deg, #38BDF8 0%, #2563EB 100%);
    opacity: 0.85;
}

.hws-slab--mid {
    width: 127px;
    height: 127px;
    top: 11px;
    background: linear-gradient(135deg, #BAE6FD 0%, #60A5FA 100%);
    opacity: 0.9;
}

.hws-slab--top {
    width: 118px;
    height: 118px;
    top: 2px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0F7FF 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

.hws-platform-h-glyph {
    transform: rotateZ(45deg);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hws-platform-h-mark-img {
    max-width: 88%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   Hero Service Nodes (Nested Wrapper Architecture for Stable Placement)
   ========================================================================== */

/* 1. Orbit Anchor: Handles 100% stable geometric placement around ecosystem */
.hws-hero-node-anchor {
    position: absolute;
    z-index: 5;
    pointer-events: auto;
    width: 152px;
    height: auto;
}

.hws-hero-node-anchor--web {
    top: 9%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hws-hero-node-anchor--apps {
    top: 50%;
    left: 88%;
    transform: translate(-50%, -50%);
}

.hws-hero-node-anchor--mobile {
    top: 50%;
    left: 12%;
    transform: translate(-50%, -50%);
}

.hws-hero-node-anchor--product {
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 2. Parallax & Idle Float Wrapper: Subtle mouse drift (max 3-5px) */
.hws-hero-node-parallax {
    transform: translate3d(var(--hws-node-x, 0px), var(--hws-node-y, 0px), 0);
    transition: transform 0.15s ease-out;
    animation: hwsNodeSubtleFloat 6s ease-in-out infinite;
}

.hws-hero-node-anchor--web .hws-hero-node-parallax { animation-delay: 0s; }
.hws-hero-node-anchor--apps .hws-hero-node-parallax { animation-delay: 1s; }
.hws-hero-node-anchor--mobile .hws-hero-node-parallax { animation-delay: 2s; }
.hws-hero-node-anchor--product .hws-hero-node-parallax { animation-delay: 3s; }

@keyframes hwsNodeSubtleFloat {
    0%, 100% { margin-top: 0px; }
    50% { margin-top: 3px; }
}

/* 3. Interactive Card: Unified component that lifts as ONE physical object */
.hws-hero-node-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    user-select: none;
    outline: none;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hws-hero-node-anchor:hover .hws-hero-node-card,
.hws-hero-node-card:focus-visible {
    transform: translate3d(0, -5px, 0) scale(1.02);
}

/* Node Label */
.hws-hero-node-label {
    display: block;
    font-size: 0.8125rem; /* ~13px */
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* Isometric White 3D Pedestal */
.hws-hero-node-pedestal {
    width: 72px;
    height: 56px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 80%, #E8EEF5 100%);
    border: 1.5px solid #E2E8F0;
    border-bottom: 3.5px solid #CBD5E1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 10px 22px -4px rgba(15, 23, 42, 0.08),
        0 2px 6px rgba(15, 23, 42, 0.03),
        inset 0 1px 2px #FFFFFF;
    transition: box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease;
    margin-bottom: 0.4rem;
    pointer-events: none;
}

.hws-hero-node-anchor:hover .hws-hero-node-pedestal,
.hws-hero-node-card:focus-visible .hws-hero-node-pedestal {
    border-color: #CBD5E1;
    box-shadow: 
        0 16px 30px -4px rgba(15, 23, 42, 0.13),
        0 4px 10px rgba(15, 23, 42, 0.05),
        inset 0 1px 2px #FFFFFF;
}

/* Icon Wrap (Centred inside pedestal, very subtle scale/rotate on hover) */
.hws-hero-node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hws-hero-node-anchor:hover .hws-hero-node-icon,
.hws-hero-node-card:focus-visible .hws-hero-node-icon {
    transform: scale(1.05) rotate(1.5deg);
}

.hws-icon--blue { color: #2563EB; }
.hws-icon--green { color: #10B981; }
.hws-icon--purple { color: #8B5CF6; }
.hws-icon--indigo { color: #6366F1; }

/* Node Description */
.hws-hero-node-desc {
    display: block;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.35;
    color: #64748B;
    max-width: 140px;
    pointer-events: none;
}

/* ==========================================================================
   Connection Lines & Hover Reactions (Anchored to Original Position)
   ========================================================================== */
.hws-hero-conn-line {
    stroke: #CBD5E1;
    stroke-width: 1.2;
    stroke-dasharray: 4 5;
    opacity: 0.28;
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), stroke 300ms ease, stroke-width 300ms ease;
}

/* Active / Hover Connection Highlights */
.hws-hero-ecosystem-visual[data-active-node="web"] .hws-hero-conn-line[data-node="web"],
.hws-hero-ecosystem-visual:has([data-node="web"]:hover) .hws-hero-conn-line[data-node="web"] {
    opacity: 0.9;
    stroke: #2563EB;
    stroke-width: 1.8;
}

.hws-hero-ecosystem-visual[data-active-node="apps"] .hws-hero-conn-line[data-node="apps"],
.hws-hero-ecosystem-visual:has([data-node="apps"]:hover) .hws-hero-conn-line[data-node="apps"] {
    opacity: 0.9;
    stroke: #10B981;
    stroke-width: 1.8;
}

.hws-hero-ecosystem-visual[data-active-node="mobile"] .hws-hero-conn-line[data-node="mobile"],
.hws-hero-ecosystem-visual:has([data-node="mobile"]:hover) .hws-hero-conn-line[data-node="mobile"] {
    opacity: 0.9;
    stroke: #8B5CF6;
    stroke-width: 1.8;
}

.hws-hero-ecosystem-visual[data-active-node="product"] .hws-hero-conn-line[data-node="product"],
.hws-hero-ecosystem-visual:has([data-node="product"]:hover) .hws-hero-conn-line[data-node="product"] {
    opacity: 0.9;
    stroke: #6366F1;
    stroke-width: 1.8;
}

/* Orbit Dot Highlights on Hover */
.hws-hero-orbit-dot {
    transition: filter 300ms ease, r 300ms ease;
}

.hws-hero-ecosystem-visual[data-active-node="web"] .hws-orbit-dot--web,
.hws-hero-ecosystem-visual:has([data-node="web"]:hover) .hws-orbit-dot--web {
    filter: drop-shadow(0 0 8px #2563EB);
    r: 5;
}

.hws-hero-ecosystem-visual[data-active-node="apps"] .hws-orbit-dot--apps,
.hws-hero-ecosystem-visual:has([data-node="apps"]:hover) .hws-orbit-dot--apps {
    filter: drop-shadow(0 0 8px #10B981);
    r: 5.5;
}

.hws-hero-ecosystem-visual[data-active-node="mobile"] .hws-orbit-dot--mobile,
.hws-hero-ecosystem-visual:has([data-node="mobile"]:hover) .hws-orbit-dot--mobile {
    filter: drop-shadow(0 0 8px #8B5CF6);
    r: 5;
}

.hws-hero-ecosystem-visual[data-active-node="product"] .hws-orbit-dot--product,
.hws-hero-ecosystem-visual:has([data-node="product"]:hover) .hws-orbit-dot--product {
    filter: drop-shadow(0 0 8px #06B6D4);
    r: 5.5;
}

/* Subtle Platform Ambient Glow Boost on Node Hover */
.hws-hero-ecosystem-visual[data-active-node] .hws-platform-ambient-glow,
.hws-hero-ecosystem-visual:has(.hws-hero-node-card:hover) .hws-platform-ambient-glow {
    opacity: 1;
    filter: blur(24px);
    transform: translate3d(var(--hws-glow-x, 0px), var(--hws-glow-y, 0px), 0) scale(1.1);
}

/* Trust Stats Strip Card matching Reference Design */
.hws-stats-card--ref {
    background: #FFFFFF !important;
    border: 1px solid #F1F5F9 !important;
    border-radius: 16px !important;
    padding: 1.5rem 2rem !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
}

.hws-stat-item-ref {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hws-about-years {
    font-family: var(--hws-font-heading);
    font-size: clamp(3.5rem, 5vw + 1.5rem, 5.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-block: 0.5rem 0.25rem;
}

.hws-stat-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.hws-stat-icon-circle--blue {
    background: #EFF6FF;
    color: #2563EB;
}

.hws-stat-icon-circle--green {
    background: #ECFDF5;
    color: #10B981;
}

.hws-stat-icon-circle--teal {
    background: #F0FDFA;
    color: #0D9488;
}

.hws-stat-icon-circle--purple {
    background: #F5F3FF;
    color: #8B5CF6;
}

.hws-stat-val-ref {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.15;
    font-family: var(--hws-font-heading);
}

.hws-stat-lbl-ref {
    font-size: 0.8125rem;
    color: #64748B;
    margin-top: 0.15rem;
}

/* Responsive Rules */
@media (max-width: 991.98px) {
    .hws-hero-ecosystem-visual {
        max-width: 520px;
        height: 460px;
        margin-top: 2rem;
    }
    
    .hws-hero-node-pedestal {
        width: 58px;
        height: 46px;
    }

    .hws-hero-node-desc {
        font-size: 0.75rem;
        max-width: 120px;
    }
}

@media (max-width: 767.98px) {
    .hws-hero {
        text-align: center;
    }

    .hws-hero-lead {
        margin-inline: auto;
    }

    .hws-hero .d-flex {
        justify-content: center;
    }

    .hws-hero-taglist {
        justify-content: center;
    }

    .hws-hero-ecosystem-visual {
        max-width: 100%;
        height: 430px;
        transform: scale(0.88);
        transform-origin: center top;
        margin-top: 1.5rem;
        margin-bottom: -20px;
    }

    .hws-hero-node-anchor {
        width: 110px;
    }

    /* Disable hover lift on touch / mobile devices */
    .hws-hero-node-anchor:hover .hws-hero-node-card {
        transform: none;
    }

    .hws-hero-node-label {
        font-size: 0.75rem;
    }

    .hws-hero-node-desc {
        font-size: 0.6875rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hws-central-platform-wrap,
    .hws-hero-node-parallax,
    .hws-hero-node-card,
    .hws-platform-mouse-parallax,
    .hws-eco-svg,
    .hws-platform-ambient-glow {
        animation: none !important;
        transform: none !important;
    }

    .hws-hero-orbit-dot circle,
    .hws-eco-svg animateMotion {
        display: none !important;
    }
}



/* Hero entrance is owned by the GSAP timeline in main.js (see the
   .hws-hero-gsap-armed rules above) - content sits at its natural, fully
   visible position here so no-JS/reduced-motion/CDN-blocked visitors see
   the complete hero immediately, nothing hidden by default CSS. */

/* Floating badge chips around the hero/product visuals */
.hws-float-chip {
    position: absolute;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--hws-radius-pill);
    font-size: var(--hws-size-xs);
    font-weight: var(--hws-weight-semibold);
    box-shadow: var(--hws-shadow-md);
    white-space: nowrap;
    z-index: 2;
}

@media (min-width: 992px) {
    .hws-float-chip {
        display: inline-flex;
    }
}

.hws-float-chip i,
.hws-float-chip .hws-svg-icon {
    color: var(--hws-accent);
}

@media (prefers-reduced-motion: reduce) {
    /* Belt-and-suspenders: the inline arming script already checks
       prefers-reduced-motion before adding this class, but this covers the
       user toggling the OS setting mid-session or any other edge case. */
    .hws-hero-gsap-armed [data-hero-el],
    .hws-hero-gsap-armed .hws-hero-line,
    .hws-hero-gsap-armed .hws-central-platform-wrap,
    .hws-hero-gsap-armed .hws-eco-svg,
    .hws-hero-gsap-armed .hws-hero-node-anchor {
        opacity: 1 !important;
        transform: none !important;
    }

    .hws-hero-visual,
    .hws-hero-visual::before,
    .hws-hero-visual .hws-hero-rings,
    .hws-hero-visual .hws-hero-nodes circle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hws-hero-visual::before {
        opacity: 0.6 !important;
    }
}

/* ---- Trust stats ---- */
.hws-stats-card {
    background: var(--hws-bg);
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius-lg);
    box-shadow: var(--hws-shadow-sm);
    padding: var(--hws-space-4) var(--hws-space-3);
}

.hws-stat {
    text-align: center;
    padding: var(--hws-space-4);
    border-radius: var(--hws-radius-md);
    transition: background var(--hws-transition-base);
}

.hws-stat:hover {
    background: var(--hws-primary-light);
}

@media (min-width: 768px) {
    .hws-stats-card .col-md-3:not(:last-child) .hws-stat {
        border-right: 1px solid var(--hws-border);
    }
}

.hws-stat-value {
    font-family: var(--hws-font-heading);
    font-size: clamp(1.75rem, 1.5vw + 1.2rem, 2.5rem);
    font-weight: var(--hws-weight-extrabold);
    color: var(--hws-primary);
    line-height: 1;
    margin-bottom: var(--hws-space-2);
}

.hws-section-dark .hws-stat-value {
    color: var(--hws-accent);
}

.hws-stat-label {
    font-size: var(--hws-size-sm);
    color: var(--hws-text-muted);
}

/* ---- Cards (shared base) ---- */
.hws-card {
    background: var(--hws-bg);
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius-md);
    padding: var(--hws-space-5);
    height: 100%;
    transition: transform var(--hws-transition-base), box-shadow var(--hws-transition-base), border-color var(--hws-transition-base);
}

.hws-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hws-shadow-md);
    border-color: rgba(70, 125, 204, 0.32);
}

.hws-card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--hws-radius-sm);
    background: var(--hws-primary-light);
    color: var(--hws-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: var(--hws-space-4);
    transition: transform var(--hws-transition-base), background var(--hws-transition-base), color var(--hws-transition-base);
}

/* Component-level: every card built on .hws-card + .hws-card-icon (service,
   hosting, feature, product) gets this automatically - one rule, four
   components upgraded at once. */
.hws-card:hover .hws-card-icon {
    transform: scale(1.08) rotate(-4deg);
    background: var(--hws-gradient-primary);
    color: #fff;
}

.hws-card-number {
    font-family: var(--hws-font-heading);
    font-weight: var(--hws-weight-extrabold);
    color: var(--hws-border);
    font-size: 1.75rem;
    position: absolute;
    top: var(--hws-space-4);
    right: var(--hws-space-5);
    transition: color var(--hws-transition-base);
}

.hws-card:hover .hws-card-number {
    color: var(--hws-primary-light);
}

.hws-card {
    position: relative;
}

.hws-card-link {
    font-weight: var(--hws-weight-semibold);
    color: var(--hws-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    margin-top: var(--hws-space-3);
}

.hws-card-link:hover {
    color: var(--hws-primary-dark);
    gap: 0.55rem;
}

.hws-card-link i,
.hws-card-link .hws-svg-icon {
    transition: transform var(--hws-transition-fast);
}

/* ---- Contact page ---- */
.hws-contact-aside { display: grid; gap: var(--hws-space-4); }
.hws-contact-direct h2 { margin-top: var(--hws-space-2); }
.hws-contact-channel { display: flex; align-items: center; gap: 0.75rem; color: var(--hws-text); text-decoration: none; padding: 0.8rem 0; border-top: 1px solid var(--hws-border); }
.hws-contact-channel > i:first-child { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--hws-primary); background: var(--hws-primary-light); border-radius: 10px; }
.hws-contact-channel span { min-width: 0; font-weight: var(--hws-weight-semibold); overflow-wrap: anywhere; }
.hws-contact-channel small { display: block; color: var(--hws-text-muted); font-size: var(--hws-size-xs); font-weight: var(--hws-weight-medium); margin-bottom: 0.1rem; }
.hws-contact-channel:hover { color: var(--hws-primary); }
.hws-contact-next { padding: var(--hws-space-5); border-radius: var(--hws-radius-md); background: var(--hws-bg-alt); border: 1px solid var(--hws-border); }
.hws-contact-next ol { padding: 0; margin: var(--hws-space-4) 0 0; list-style: none; counter-reset: contact-steps; }
.hws-contact-next li { position: relative; padding: 0 0 var(--hws-space-4) 3rem; counter-increment: contact-steps; }
.hws-contact-next li:last-child { padding-bottom: 0; }
.hws-contact-next li::before { content: '0' counter(contact-steps); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--hws-primary); background: var(--hws-primary-light); font-size: var(--hws-size-xs); font-weight: var(--hws-weight-bold); }
.hws-contact-next strong, .hws-contact-next span { display: block; }
.hws-contact-next span { color: var(--hws-text-muted); font-size: var(--hws-size-sm); margin-top: 0.2rem; }

/* ---- About page ---- */
.hws-about-intro { overflow: hidden; }
.hws-about-actions { display: flex; gap: var(--hws-space-4); align-items: center; flex-wrap: wrap; margin-top: var(--hws-space-5); }
.hws-about-timeline-card { position: relative; padding: var(--hws-space-5); border-radius: var(--hws-radius-lg); background: var(--hws-bg-alt); border: 1px solid var(--hws-border); overflow: hidden; }
.hws-about-timeline-card::before { content: ''; position: absolute; width: 260px; height: 260px; right: -120px; top: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(22,199,154,.16), transparent 68%); pointer-events: none; }
.hws-about-timeline-card > * { position: relative; }
.hws-about-year { font-family: var(--hws-font-heading); font-size: var(--hws-size-xl); font-weight: var(--hws-weight-extrabold); color: var(--hws-primary); }
.hws-about-product { display: flex; justify-content: space-between; align-items: center; gap: var(--hws-space-5); padding: var(--hws-space-6); border-radius: var(--hws-radius-lg); background: var(--hws-bg); border: 1px solid var(--hws-border); }
.hws-about-product > div { max-width: 720px; }

/* ---- Final homepage polish ---- */
body { font-size: var(--hws-size-base); }
.hws-section-heading > p { max-width: 650px; margin: var(--hws-space-3) auto 0; color: var(--hws-text-muted); font-size: 1rem; }
.hws-hero-visual { box-shadow: 0 28px 80px rgba(70, 125, 204, 0.1); }
.hws-hero-visual::after { content: ''; position: absolute; inset: 14%; border: 1px solid rgba(70, 125, 204, 0.12); border-radius: 50%; pointer-events: none; animation: hwsOrbitalPulse 5s var(--hws-ease) infinite; }
.hws-hero-visual .hws-hero-nodes circle { filter: drop-shadow(0 2px 5px rgba(70, 125, 204,.18)); }
@keyframes hwsOrbitalPulse { 50% { transform: scale(1.035); opacity: 0.55; } }

.hws-stats-card { padding-block: var(--hws-space-5); box-shadow: 0 12px 34px rgba(16,24,40,.055); }
.hws-stat { transition: transform var(--hws-transition-base), color var(--hws-transition-base); }
.hws-stat:hover { transform: translateY(-3px); }
.hws-stat:hover .hws-stat-value { color: var(--hws-accent); }
.hws-stat-label { font-size: 0.8125rem; letter-spacing: .025em; }

#services .hws-card { min-height: 100%; }
#services .hws-card p, .hws-hosting-card p, .hws-feature-card p, .hws-editorial-item p, .hws-case-card p { font-size: 0.9375rem; line-height: 1.6; }

.hws-section-dark .hws-bg-decoration { opacity: .7; }
.hws-section-dark .hws-hosting-card { border-color: rgba(166,176,195,.18); background: rgba(18,27,46,.88); }
.hws-section-dark .hws-hosting-card:hover { border-color: rgba(22,199,154,.55); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.hws-section-dark .hws-hosting-card .hws-card-icon { background: rgba(22,199,154,.13); color: var(--hws-accent); }

.hws-product-shot { box-shadow: 0 26px 65px rgba(0,0,0,.24); transform: perspective(1000px) rotateY(-2deg) rotateX(1deg); transition: transform var(--hws-transition-slow), box-shadow var(--hws-transition-slow); }
.hws-product-visual-wrap:hover .hws-product-shot { transform: perspective(1000px) rotateY(0) rotateX(0) translateY(-3px); box-shadow: 0 32px 75px rgba(0,0,0,.3); }

.hws-case-card { position: relative; box-shadow: 0 5px 16px rgba(16,24,40,.035); }
.hws-case-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(130deg, transparent 55%, rgba(70, 125, 204,.06)); opacity: 0; transition: opacity var(--hws-transition-base); }
.hws-case-card:hover::after { opacity: 1; }

.hws-process-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hws-space-3); }
.hws-process-track .hws-step { padding: 0 var(--hws-space-3) 0 0; border-left: 0; border-top: 2px solid var(--hws-primary); padding-top: var(--hws-space-4); padding-bottom: 0; }
.hws-process-track .hws-step::after { content: ''; position: absolute; height: 2px; width: var(--hws-space-3); right: calc(var(--hws-space-3) * -1); top: -2px; background: var(--hws-primary); }
.hws-process-track .hws-step:last-child::after { display: none; }
.hws-process-track .hws-step-number { position: static; margin-bottom: var(--hws-space-3); transform: scale(1); }
.hws-process-track .hws-step.is-inactive { border-top-color: var(--hws-border); }
.hws-process-track .hws-step.is-inactive::after { background: var(--hws-border); }

.hws-process-heading {
    font-size: clamp(2rem, 2.6vw + 1.2rem, 3rem);
    line-height: 1.1;
    margin-bottom: var(--hws-space-4);
}

/* One shared visual area for the whole process section - layers stack and
   crossfade on opacity as the active step changes (JS: main.js ScrollTrigger
   onUpdate toggles .is-active), never four separate icons at once. */
.hws-process-shared-visual {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1;
    margin-top: var(--hws-space-5);
}

.hws-process-shared-visual-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hws-primary);
    opacity: 0;
    transition: opacity var(--hws-transition-slow);
}

.hws-process-shared-visual-layer svg {
    width: 100%;
    height: 100%;
}

.hws-process-shared-visual-layer.is-active {
    opacity: 1;
}

@media (max-width: 991.98px) {
    .hws-process-shared-visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hws-process-shared-visual-layer { transition: none; }
}
.hws-process-track .hws-step.is-inactive .hws-step-number { transform: scale(0.8); }
.hws-process-track .hws-step.is-current .hws-step-number { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) { .hws-hero-visual::after { animation: none; } .hws-product-shot, .hws-product-visual-wrap:hover .hws-product-shot { transform: none; } }

/* ---- Hosting cards ---- */
.hws-hosting-card {
    text-align: left;
}

.hws-hosting-card .hws-card-icon {
    margin-bottom: var(--hws-space-3);
}

/* Pricing tier cards */
.hws-plan-card {
    background: var(--hws-bg);
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius-md);
    padding: var(--hws-space-5);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--hws-transition-base), box-shadow var(--hws-transition-base), border-color var(--hws-transition-base);
}

.hws-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hws-shadow-md);
    border-color: rgba(70, 125, 204, 0.32);
}

.hws-plan-card.is-highlighted {
    border-color: var(--hws-primary);
    box-shadow: var(--hws-shadow-md);
    background: linear-gradient(180deg, var(--hws-primary-light) 0%, var(--hws-bg) 140px);
    position: relative;
}

.hws-plan-badge {
    position: absolute;
    top: -14px;
    left: var(--hws-space-5);
    background: var(--hws-gradient-primary);
    color: #fff;
    font-size: var(--hws-size-xs);
    font-weight: var(--hws-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.8rem;
    border-radius: var(--hws-radius-pill);
    animation: hwsBadgePulse 2.4s ease-in-out infinite;
}

@keyframes hwsBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(70, 125, 204, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(70, 125, 204, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hws-plan-badge {
        animation: none;
    }
}

.hws-plan-price-note {
    color: var(--hws-text-muted);
    font-size: var(--hws-size-sm);
    margin-bottom: var(--hws-space-4);
}

.hws-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--hws-space-5);
    flex-grow: 1;
}

.hws-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-block: 0.4rem;
    font-size: var(--hws-size-sm);
    border-top: 1px solid var(--hws-border);
}

.hws-plan-features li:first-child {
    border-top: none;
}

.hws-plan-features i {
    color: var(--hws-success);
    margin-top: 0.2rem;
}

.hws-compare-table tbody tr {
    transition: background-color var(--hws-transition-fast);
}

.hws-compare-table tbody tr:hover {
    background-color: var(--hws-bg-alt);
}

/* ---- Portfolio cards ---- */
.hws-portfolio-card {
    display: block;
    padding: var(--hws-space-3);
    border-radius: var(--hws-radius-md);
    transition: transform var(--hws-transition-base), box-shadow var(--hws-transition-base);
}

.hws-portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hws-shadow-md);
}

.hws-portfolio-thumb {
    border-radius: var(--hws-radius-md);
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--hws-bg-dark), var(--hws-bg-dark-alt));
    margin-bottom: var(--hws-space-4);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--hws-border);
}

.hws-portfolio-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hws-transition-base);
}

.hws-portfolio-card:hover .hws-portfolio-thumb img {
    transform: scale(1.04);
}

.hws-portfolio-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--hws-space-2);
    padding: var(--hws-space-3);
    background: linear-gradient(180deg, transparent 40%, rgba(11, 18, 32, 0.85) 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--hws-transition-base), transform var(--hws-transition-base);
}

.hws-portfolio-card:hover .hws-portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
}

.hws-portfolio-overlay-label {
    color: #fff;
    font-weight: var(--hws-weight-semibold);
    font-size: var(--hws-size-sm);
}

.hws-portfolio-overlay-arrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--hws-transition-base);
}

.hws-portfolio-card:hover .hws-portfolio-overlay-arrow {
    transform: translate(2px, -2px);
}

.hws-portfolio-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: var(--hws-space-3);
}

.hws-badge {
    display: inline-block;
    background: var(--hws-bg-alt);
    color: var(--hws-text-muted);
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius-pill);
    padding: 0.25rem 0.7rem;
    font-size: var(--hws-size-xs);
    font-weight: var(--hws-weight-medium);
    transition: background-color var(--hws-transition-fast), border-color var(--hws-transition-fast), color var(--hws-transition-fast);
}

.hws-badge:hover {
    background: var(--hws-primary-light);
    border-color: rgba(70, 125, 204, 0.32);
    color: var(--hws-primary-dark);
}

/* ---- Feature / product cards ---- */
.hws-feature-card {
    text-align: left;
}

/* ---- DigitalHugs product spotlight ---- */
.hws-product-panel {
    background: var(--hws-gradient-dark);
    border-radius: var(--hws-radius-lg);
    color: var(--hws-text-on-dark);
    padding: var(--hws-space-6);
    box-shadow: var(--hws-shadow-lg);
}

.hws-product-shot {
    border-radius: var(--hws-radius-md);
    overflow: hidden;
    box-shadow: var(--hws-shadow-lg);
    border: 1px solid var(--hws-border-dark);
}

.hws-product-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.hws-built-by {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--hws-size-sm);
    color: var(--hws-text-on-dark-muted);
    margin-top: var(--hws-space-4);
}

/* Wrapper for a product shot + its floating chips */
.hws-product-visual-wrap {
    position: relative;
}

/* Two more real DigitalHugs screens, layered behind/beside the main tabbed
   shot for depth - not a fabricated device, just more of the same product. */
.hws-dh-secondary-shot {
    position: absolute;
    width: 36%;
    border-radius: var(--hws-radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    z-index: 3;
    transition: transform var(--hws-transition-slow);
}

.hws-dh-secondary-shot img {
    width: 100%;
    height: auto;
    display: block;
}

.hws-dh-secondary-shot--a { top: -7%; right: -6%; transform: rotate(4deg); }
.hws-dh-secondary-shot--b { bottom: -9%; left: -6%; transform: rotate(-5deg); }

.hws-product-visual-wrap:hover .hws-dh-secondary-shot--a { transform: rotate(2deg) translateY(-6px); }
.hws-product-visual-wrap:hover .hws-dh-secondary-shot--b { transform: rotate(-3deg) translateY(6px); }

@media (max-width: 991.98px) {
    .hws-dh-secondary-shot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hws-dh-secondary-shot { transition: none; }
}

/* DigitalHugs showcase: extends .hws-product-shot/.hws-float-chip above
   with a small tab strip for switching between real product screens. */
.hws-dh-showcase-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: var(--hws-space-4);
}

.hws-dh-showcase-tab {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--hws-text-on-dark-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}

.hws-dh-showcase-tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.hws-dh-showcase-tab.active { background: var(--hws-gradient-primary); color: #fff; border-color: transparent; }
.hws-dh-showcase-tab:focus-visible { outline: 2px solid var(--hws-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .hws-dh-showcase-tab { transition: none; }
}

/* ---- CTA sections ---- */
.hws-cta {
    border-radius: var(--hws-radius-lg);
    padding: var(--hws-space-7) var(--hws-space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hws-cta > * {
    position: relative;
    z-index: 1;
}

.hws-cta.hws-cta-gradient {
    background: var(--hws-gradient-primary);
    color: #fff;
}

.hws-cta.hws-cta-gradient::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: radial-gradient(45% 45% at 20% 20%, rgba(255, 255, 255, 0.22), transparent 70%),
                radial-gradient(40% 40% at 85% 80%, rgba(255, 255, 255, 0.16), transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: hwsCtaDrift 14s ease-in-out infinite;
}

@keyframes hwsCtaDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-2%, 2%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .hws-cta.hws-cta-gradient::before {
        animation: none;
    }
}

.hws-cta.hws-cta-gradient h2 {
    color: #fff;
}

.hws-cta.hws-cta-muted {
    background: var(--hws-bg-alt);
}

/* Full-bleed final-CTA section variant (homepage) - same gradient/glow
   treatment as .hws-cta-gradient above, but on the <section> itself so it
   reads as a destination, not a rounded card sitting in the container. */
.hws-cta-section {
    padding-block: var(--hws-space-8);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hws-cta-section > * {
    position: relative;
    z-index: 1;
}

.hws-cta-section-gradient {
    background: var(--hws-gradient-primary);
    color: #fff;
}

.hws-cta-section-gradient h2 {
    color: #fff;
}

.hws-cta-section-text {
    max-width: 560px;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.9);
}

.hws-cta-section-gradient::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: radial-gradient(45% 45% at 20% 20%, rgba(255, 255, 255, 0.22), transparent 70%),
                radial-gradient(40% 40% at 85% 80%, rgba(255, 255, 255, 0.16), transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: hwsCtaDrift 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hws-cta-section-gradient::before {
        animation: none;
    }
}

/* ---- Process steps ---- */
/* Default state is the fully-activated look (primary line + full-scale
   number) - this is what every visitor sees with no JS, so the section is
   complete and legible on its own. When GSAP + ScrollTrigger are available
   (main.js), .is-inactive/.is-current are added on top to turn this into a
   genuine scroll-position-linked spotlight that tracks scroll in both
   directions - see the "Scroll-linked spotlight" rules below. */
.hws-step {
    position: relative;
    padding-left: var(--hws-space-5);
    border-left: 2px solid var(--hws-primary);
    padding-bottom: var(--hws-space-6);
    transition: border-color var(--hws-transition-slow);
}

.hws-step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.hws-step-number {
    position: absolute;
    left: -21px;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hws-gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--hws-weight-bold);
    font-size: var(--hws-size-sm);
    transform: scale(1);
    opacity: 1;
    transition: transform var(--hws-transition-slow), opacity var(--hws-transition-slow), box-shadow var(--hws-transition-base);
}

.hws-step h3 {
    transition: color var(--hws-transition-slow);
}

/* Scroll-linked spotlight (GSAP + ScrollTrigger, main.js): steps the user
   hasn't scrolled to yet dim back; the current one gets a brief emphasis. */
.hws-step.is-inactive {
    border-left-color: var(--hws-border);
}

.hws-step.is-inactive .hws-step-number {
    transform: scale(0.75);
    opacity: 0.55;
}

.hws-step.is-current .hws-step-number {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px var(--hws-primary-light);
}

.hws-step.is-current h3 {
    color: var(--hws-primary);
}

.hws-step-visual {
    width: 44px;
    height: 44px;
    margin-bottom: var(--hws-space-3);
    color: var(--hws-primary);
    opacity: 0.45;
    transform: scale(0.9);
    transition: opacity var(--hws-transition-slow), transform var(--hws-transition-slow);
}

.hws-step-visual svg { width: 100%; height: 100%; display: block; }

.hws-step.is-current .hws-step-visual { opacity: 1; transform: scale(1); }
.hws-step.is-inactive .hws-step-visual { opacity: 0.3; }
.hws-process-track .hws-step-visual { margin-bottom: var(--hws-space-2); }

@media (prefers-reduced-motion: reduce) {
    .hws-step-visual {
        transition: none;
        transform: none !important;
        opacity: 1 !important;
    }

    .hws-step.is-inactive,
    .hws-step.is-inactive .hws-step-number,
    .hws-step.is-current .hws-step-number {
        transform: none;
        opacity: 1;
        box-shadow: none;
        border-left-color: var(--hws-primary);
    }
}

/* ---- About timeline ---- */
.hws-timeline {
    position: relative;
    padding-left: var(--hws-space-5);
    border-left: 2px dashed var(--hws-border);
}

.hws-timeline-item {
    position: relative;
    padding-bottom: var(--hws-space-6);
}

.hws-timeline-item:last-child {
    padding-bottom: 0;
}

.hws-timeline-item::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hws-primary);
    box-shadow: 0 0 0 4px var(--hws-primary-light);
    transform: scale(0.4);
    opacity: 0;
    transition: transform var(--hws-transition-slow), opacity var(--hws-transition-slow), box-shadow var(--hws-transition-base);
}

.hws-timeline-item.is-visible::before {
    transform: scale(1);
    opacity: 1;
}

.hws-timeline-item:hover::before {
    transform: scale(1.3);
    box-shadow: 0 0 0 6px var(--hws-primary-light);
}

@media (prefers-reduced-motion: reduce) {
    .hws-timeline-item::before {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---- Why Heavens editorial list ---- */
.hws-why-heavens-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hws-space-6);
    align-items: center;
}

@media (min-width: 992px) {
    .hws-why-heavens-wrap {
        grid-template-columns: 260px 1fr;
        gap: var(--hws-space-7);
    }
}

.hws-why-anchor {
    text-align: center;
    padding: var(--hws-space-5);
}

@media (min-width: 992px) {
    .hws-why-anchor {
        text-align: left;
        border-right: 1px solid var(--hws-border);
    }
}

.hws-why-anchor-number {
    display: block;
    font-family: var(--hws-font-heading);
    font-weight: var(--hws-weight-extrabold);
    font-size: clamp(3.25rem, 5vw, 5.5rem);
    line-height: 1;
    background: var(--hws-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hws-why-anchor-label {
    display: block;
    margin-top: var(--hws-space-3);
    font-weight: var(--hws-weight-semibold);
    color: var(--hws-text-muted);
    font-size: var(--hws-size-base);
}

.hws-editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .hws-editorial-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hws-editorial-item {
    display: flex;
    align-items: flex-start;
    gap: var(--hws-space-4);
    padding: var(--hws-space-5) var(--hws-space-4);
    border-bottom: 1px solid var(--hws-border);
}

.hws-editorial-item:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .hws-editorial-item:nth-child(odd) {
        border-right: 1px solid var(--hws-border);
        padding-left: 0;
    }

    .hws-editorial-item:nth-child(even) {
        padding-right: 0;
    }

    /* 5th item (last, odd-count list) spans both columns and centers as
       its own closing row - see the layout note in why-heavens-list.php. */
    .hws-editorial-item:nth-child(5):last-child {
        grid-column: 1 / -1;
        max-width: 560px;
        margin-inline: auto;
        border-right: none;
        padding-inline: var(--hws-space-4);
    }
}

.hws-editorial-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--hws-radius-sm);
    background: var(--hws-primary-light);
    color: var(--hws-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: transform var(--hws-transition-base), background var(--hws-transition-base), color var(--hws-transition-base);
}

.hws-editorial-item:hover .hws-editorial-icon {
    transform: scale(1.08) rotate(-4deg);
    background: var(--hws-gradient-primary);
    color: #fff;
}

/* ---- Why Heavens 3D background ----
   Progressive-enhancement depth layer behind the section heading/anchor.
   .hws-tech3d-fallback (inline SVG) is the always-on, no-JS-safe visual;
   .hws-tech3d-canvas (Three.js, added by tech3d-bg.js) fades in over it
   only once a real frame has rendered - see the "never leave a blank
   visual area" requirement. Follows the same position:absolute inset:0,
   z-index:0, pointer-events:none contract as .hws-bg-decoration elsewhere
   (hosting/DigitalHugs sections) so it never blocks clicks/selection and
   sits behind .hws-container-relative content. */
.hws-tech3d-section {
    position: relative;
    overflow: hidden;
}

.hws-tech3d-bg {
    position: absolute;
    inset: -6% -4%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Wider, softer-edged mask than a small halo behind the heading alone -
       the signature visual should read across most of the section, only
       feathering out before the dense editorial list below so it never
       fights that text for contrast. */
    mask-image: radial-gradient(ellipse 82% 72% at 50% 32%, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 92%);
    -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 32%, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 92%);
}

.hws-tech3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 1100ms var(--hws-ease);
}

.hws-tech3d-section.is-tech3d-active .hws-tech3d-canvas {
    opacity: 1;
}

.hws-tech3d-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    transition: opacity 700ms var(--hws-ease);
}

.hws-tech3d-section.is-tech3d-active .hws-tech3d-fallback {
    opacity: 0;
}

/* Barely-there breathing motion for the static fallback, only while the
   section is on-screen (toggled by tech3d-bg.js via IntersectionObserver)
   and only when the visitor allows motion - paused/removed otherwise. */
@media (prefers-reduced-motion: no-preference) {
    .hws-tech3d-section.is-tech3d-visible .hws-tech3d-fallback {
        animation: hwsTech3dBreathe 11s ease-in-out infinite;
    }
}

@keyframes hwsTech3dBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.012) rotate(.3deg); }
}

@media (max-width: 767.98px) {
    /* Mobile: static SVG only, no WebGL, no scroll-linked transform - see
       tech3d-bg.js, which skips Three.js and ScrollTrigger below 768px. */
    .hws-tech3d-canvas { display: none; }
    .hws-tech3d-fallback { opacity: .38; }
    .hws-tech3d-bg {
        mask-image: radial-gradient(ellipse 85% 55% at 50% 20%, #000 0%, rgba(0, 0, 0, .4) 50%, transparent 80%);
        -webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 20%, #000 0%, rgba(0, 0, 0, .4) 50%, transparent 80%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hws-tech3d-canvas { display: none; }
    .hws-tech3d-fallback { opacity: .42; animation: none !important; }
}

/* ---- Breadcrumbs ---- */
.hws-breadcrumb {
    --bs-breadcrumb-divider: '/';
    font-size: var(--hws-size-sm);
    margin-bottom: var(--hws-space-4);
}

.hws-breadcrumb a {
    color: var(--hws-text-muted);
    text-decoration: none;
}

.hws-breadcrumb a:hover {
    color: var(--hws-primary);
}

/* ---- Page header (interior pages) ---- */
.hws-page-header {
    padding-block: var(--hws-space-7) var(--hws-space-6);
    background-color: var(--hws-bg-alt);
    border-bottom: 1px solid var(--hws-border);
}

/* ---- Forms ---- */
.form-label {
    font-weight: var(--hws-weight-medium);
    font-size: var(--hws-size-sm);
}

.form-control,
.form-select {
    border-radius: var(--hws-radius-sm);
    border-color: var(--hws-border);
    padding: 0.65rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--hws-primary);
    box-shadow: 0 0 0 0.2rem var(--hws-primary-light);
}

.hws-honeypot-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- FAQ accordion ---- */
.hws-accordion .accordion-item {
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius-md) !important;
    margin-bottom: var(--hws-space-3);
    overflow: hidden;
}

.hws-accordion .accordion-button {
    font-weight: var(--hws-weight-semibold);
    background: var(--hws-bg);
    transition: background-color var(--hws-transition-fast), color var(--hws-transition-fast);
}

.hws-accordion .accordion-button.collapsed:hover {
    background: var(--hws-bg-alt);
    color: var(--hws-primary);
}

.hws-accordion .accordion-button:not(.collapsed) {
    color: var(--hws-primary);
    background: var(--hws-primary-light);
    box-shadow: none;
}

.hws-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem var(--hws-primary-light);
}

/* Minimal Editorial Accordion */
.hws-accordion--minimal .accordion-item {
    border: none;
    border-bottom: 1px solid var(--hws-border);
    border-radius: 0 !important;
    margin-bottom: 0;
    background: transparent;
}

.hws-accordion--minimal .accordion-button {
    background: transparent;
    padding: 1.25rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hws-text);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: none !important;
    transition: color var(--hws-transition-base);
}

.hws-accordion--minimal .hws-faq-num {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hws-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.hws-accordion--minimal .hws-faq-qtext {
    flex: 1;
}

.hws-accordion--minimal .accordion-button::after {
    background-image: none !important;
    content: "+";
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--hws-primary);
    transform: none;
    transition: transform var(--hws-transition-base), color var(--hws-transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.hws-accordion--minimal .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
    color: var(--hws-primary-dark);
}

.hws-accordion--minimal .accordion-button:hover {
    color: var(--hws-primary);
}

.hws-accordion--minimal .accordion-body {
    padding: 0 0 1.25rem 2.4rem;
    line-height: 1.65;
    font-size: 0.95rem;
}

/* ---- Footer ---- */
.hws-footer {
    background: var(--hws-bg-dark);
    color: var(--hws-text-on-dark-muted);
    padding-block: var(--hws-space-6) var(--hws-space-4);
}

.hws-footer-secondary-links {
    margin-top: var(--hws-space-3);
    padding-top: var(--hws-space-3);
    border-top: 1px solid var(--hws-border-dark);
    font-size: var(--hws-size-xs);
    opacity: 0.75;
}

.hws-footer h6 {
    color: var(--hws-text-on-dark);
    font-size: var(--hws-size-xs);
    font-weight: var(--hws-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--hws-space-4);
    padding-bottom: var(--hws-space-2);
    border-bottom: 1px solid var(--hws-border-dark);
}

.hws-footer a {
    color: var(--hws-text-on-dark-muted);
    text-decoration: none;
    display: inline-block;
    padding-block: 0.3rem;
    transition: color var(--hws-transition-fast), transform var(--hws-transition-fast);
}

.hws-footer a:hover {
    color: #fff;
    transform: translateX(2px);
}

.hws-footer-logo {
    height: 36px;
    width: auto;
    display: block;
}

.hws-footer-bottom {
    border-top: 1px solid var(--hws-border-dark);
    margin-top: var(--hws-space-5);
    padding-top: var(--hws-space-3);
    font-size: var(--hws-size-xs);
}

/* Specificity note: .hws-footer a (0,1,1) above would otherwise beat a bare
   .hws-social-link (0,1,0) and silently win the `display` property, forcing
   these back to inline-block - text-align/whitespace layout instead of
   true flex centering (the icon then sits off-center in its circle,
   nowhere near the visual center a flex .hws-social-link expects).
   .hws-footer .hws-social-link (0,2,0) unambiguously outranks it regardless
   of source order. */
.hws-footer .hws-social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--hws-bg-dark-alt);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    transition: transform var(--hws-transition-fast), background var(--hws-transition-fast);
}

.hws-footer .hws-social-link:hover {
    background: var(--hws-gradient-primary);
    transform: translateY(-2px);
}

/* ---- Error pages ---- */
.hws-error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.hws-error-code {
    font-family: var(--hws-font-heading);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: var(--hws-weight-extrabold);
    background: var(--hws-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}

/* ---- Case studies ---- */
.hws-case-card { height: 100%; background: var(--hws-bg); border: 1px solid var(--hws-border); border-radius: var(--hws-radius-md); overflow: hidden; transition: transform var(--hws-transition-base), box-shadow var(--hws-transition-base); }
.hws-case-card:hover { transform: translateY(-5px) rotate(-1.5deg); box-shadow: var(--hws-shadow-md); }
.hws-case-image { position: relative; display: block; overflow: hidden; background: var(--hws-bg-alt); }
.hws-case-image img, .hws-gallery img { display: block; width: 100%; height: auto; transition: transform var(--hws-transition-slow); }
.hws-case-card:hover .hws-case-image img, .hws-gallery img:hover { transform: scale(1.035); }
.hws-case-label {
    position: absolute;
    top: var(--hws-space-3);
    left: var(--hws-space-3);
    z-index: 1;
    padding: 0.3rem 0.7rem;
    border-radius: var(--hws-radius-pill);
    font-size: var(--hws-size-xs);
    font-weight: var(--hws-weight-semibold);
    letter-spacing: 0.02em;
    color: var(--hws-text-on-dark);
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
}
.hws-case-label--real { background: rgba(22, 163, 74, 0.85); }
.hws-case-label--product { background: rgba(37, 99, 235, 0.85); }
.hws-case-card-body { padding: var(--hws-space-4); }
.hws-case-card h2 a { color: var(--hws-text); text-decoration: none; }
.hws-case-card:hover .hws-card-link { color: var(--hws-primary-dark); gap: 0.55rem; }
.hws-case-featured { overflow: hidden; border-radius: var(--hws-radius-lg); box-shadow: var(--hws-shadow-md); margin: 0; }
.hws-case-featured img { display: block; width: 100%; height: auto; transition: transform var(--hws-transition-slow); }
.hws-case-featured:hover img { transform: scale(1.02); }

/* Editorial "featured" case-study card (homepage) - image + copy side by
   side at a larger size than the standard grid card below it. */
.hws-case-card--featured { display: flex; flex-direction: row; box-shadow: var(--hws-shadow-lg); }
.hws-case-card--featured:hover { transform: translateY(-5px); }
.hws-case-card--featured .hws-case-image { flex: 1 1 62%; min-width: 0; }
.hws-case-card--featured .hws-case-image img { height: 100%; object-fit: cover; }
.hws-case-card--featured .hws-case-card-body { flex: 1 1 45%; display: flex; flex-direction: column; justify-content: center; padding: var(--hws-space-6); }
.hws-case-card--featured .hws-case-card-body p { font-size: var(--hws-size-lg); }

@media (max-width: 767.98px) {
    .hws-case-card--featured { flex-direction: column; }
    .hws-case-card--featured .hws-case-image img { height: auto; }
    .hws-case-card--featured .hws-case-card-body { padding: var(--hws-space-4); }
}
.hws-demo-note { color: var(--hws-text-muted); font-size: var(--hws-size-sm); }
.hws-prose section { margin-bottom: var(--hws-space-6); }
.hws-prose h2 { margin-bottom: var(--hws-space-3); }
.hws-prose li { margin-bottom: 0.55rem; }
.hws-case-aside { padding: var(--hws-space-4); background: var(--hws-bg-alt); border-radius: var(--hws-radius-md); }
.hws-gallery img { border: 1px solid var(--hws-border); border-radius: var(--hws-radius-md); }

.hws-case-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hws-space-3); margin: var(--hws-space-5) 0; }
.hws-case-highlight { display: flex; align-items: center; gap: 0.6rem; padding: var(--hws-space-3) var(--hws-space-4); background: var(--hws-primary-light); border-radius: var(--hws-radius-md); font-weight: var(--hws-weight-medium); font-size: var(--hws-size-sm); color: var(--hws-primary-dark); transition: transform var(--hws-transition-base), box-shadow var(--hws-transition-base); }
.hws-case-highlight i { font-size: 1.15rem; flex-shrink: 0; }
.hws-case-highlight:hover { transform: translateY(-2px); box-shadow: var(--hws-shadow-sm); }

.hws-case-list { list-style: none; padding-left: 0; margin-top: var(--hws-space-3); }
.hws-case-list li { display: flex; align-items: flex-start; gap: 0.65rem; }
.hws-case-list li i { color: var(--hws-primary); margin-top: 0.2rem; flex-shrink: 0; }
.hws-case-list--muted li i { color: var(--hws-text-muted); }

/* Case-study meta row (hero category/industry/platform/market) and a
   per-card icon accent rotation for grids of 6 (e.g. a 6-step journey),
   mirroring the #services nth-child pattern above at a reusable scope. */
.hws-case-meta > div { min-width: 140px; }
.hws-case-hero-section { position: relative; overflow: hidden; }

/* A short quoted example line inside a case-study spotlight, e.g. an
   attendee's search query or a "your photos are ready" moment. */
.hws-case-example { display: block; padding: var(--hws-space-3) var(--hws-space-4); background: var(--hws-bg-alt); border-left: 3px solid var(--hws-primary); border-radius: var(--hws-radius-sm); font-style: italic; color: var(--hws-text); margin: var(--hws-space-3) 0; }
.hws-accent-grid > div:nth-child(6n+2) .hws-card-icon,
.hws-accent-grid > div:nth-child(6n+5) .hws-card-icon {
    background: rgba(22, 199, 154, 0.14);
    color: var(--hws-accent);
}
.hws-accent-grid > div:nth-child(6n+3) .hws-card-icon,
.hws-accent-grid > div:nth-child(6n+6) .hws-card-icon {
    background: rgba(255, 138, 61, 0.14);
    color: var(--hws-accent-warm);
}

/* ---- DigitalHugs product page ---- */
.hws-product-hero { overflow: hidden; }
.hws-workflow-step { position: relative; height: 100%; padding: var(--hws-space-4); border-top: 2px solid var(--hws-border); transition: border-color var(--hws-transition-base), transform var(--hws-transition-base); }
.hws-workflow-step span { display: block; font-weight: var(--hws-weight-bold); color: var(--hws-primary); margin-bottom: var(--hws-space-3); }
.hws-workflow-step::after { content: '→'; position: absolute; right: -12px; top: 1.8rem; color: var(--hws-accent); font-size: 1.35rem; }
.hws-workflow-step:last-child::after { display: none; }
.hws-workflow-step:hover { border-top-color: var(--hws-primary); transform: translateY(-3px); }

/* An 8-step workflow recap wraps to two rows of four on desktop - hide the
   connector arrow at the row break so it doesn't point into empty space. */
@media (min-width: 992px) {
    .hws-workflow-recap > .col-lg-3:nth-child(4) .hws-workflow-step::after { display: none; }
}
.hws-check-list { list-style: none; padding: 0; margin: var(--hws-space-4) 0 0; }
.hws-check-list li { margin-bottom: 0.75rem; }
.hws-check-list li::before { content: '✓'; color: var(--hws-accent); font-weight: 800; margin-right: 0.6rem; }
.hws-product-gallery { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1rem; }
.hws-product-gallery img { width: 100%; height: auto; border-radius: var(--hws-radius-md); box-shadow: var(--hws-shadow-sm); }
.hws-product-gallery img:first-child { grid-row: span 2; }

/* ---- Infrastructure status strip (hosting pages) ---- */
.hws-status-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto var(--hws-space-5);
    padding: 0.5rem 1.1rem;
    border-radius: var(--hws-radius-pill);
    background: var(--hws-glass-bg-dark);
    border: 1px solid var(--hws-glass-border-dark);
    color: var(--hws-text-on-dark-muted);
    font-size: var(--hws-size-xs);
    font-weight: var(--hws-weight-medium);
}

.hws-status-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.hws-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hws-accent);
    box-shadow: 0 0 0 3px rgba(22, 199, 154, 0.22);
    flex-shrink: 0;
    animation: hwsPulseOpacity 2.6s ease-in-out infinite;
}

.hws-status-sep {
    color: var(--hws-border-dark);
}

@media (max-width: 575.98px) {
    .hws-status-strip {
        border-radius: var(--hws-radius-md);
        padding: 0.85rem 1rem;
    }

    .hws-status-sep {
        display: none;
    }

    .hws-status-item {
        flex-basis: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hws-status-dot {
        animation: none;
    }
}

/* Slim technical trust bar - a lighter-weight alternative to a full dark
   section for the hosting subpages, which already lead with their own
   "who this is for" card and don't need a second full illustrated band. */
.hws-trust-bar {
    background: var(--hws-bg-dark);
    padding-block: var(--hws-space-4);
}

.hws-trust-bar-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--hws-space-2) var(--hws-space-6);
    text-align: center;
}

.hws-trust-bar-items > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hws-text-on-dark-muted);
    font-size: var(--hws-size-sm);
    font-weight: var(--hws-weight-medium);
}

.hws-trust-bar-items i {
    color: var(--hws-accent);
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    .hws-trust-bar-items {
        gap: var(--hws-space-3);
    }
}

/* ==========================================================================
   Interactive Service Explorer ("What We Build"). Editorial layout: a
   vertical numbered list on the left (like a table of contents, not a
   pill-tab bar) and one large visual panel on the right that crossfades
   per active item - a single component instead of a card grid + a
   separate tab widget competing for the same content.
   ========================================================================== */
/* ==========================================================================
   Redesigned Floating Service Explorer ("What We Do").
   Left side: minimal vertical navigation (no card boxes).
   Right side: transparent visual stage with 4 distinct floating 3D/layered UI compositions.
   ========================================================================== */
.hws-service-explorer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
}

.hws-service-explorer-tabs {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.hws-service-explorer-tab {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    text-align: left;
    padding: 1.35rem 1.25rem 1.35rem 1.5rem;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--hws-border);
    transition: background var(--hws-transition-base), border-color var(--hws-transition-base), transform var(--hws-transition-base);
}

.hws-service-explorer-tab:last-child { border-bottom-color: transparent; }

.hws-service-explorer-tab-number {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 700;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
    transition: color var(--hws-transition-base);
}

.hws-service-explorer-tab-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform var(--hws-transition-base);
}

.hws-service-explorer-tab-title {
    font-size: clamp(1.4rem, 1vw + 1.1rem, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hws-text-muted);
    transition: color var(--hws-transition-base);
}

/* Collapses/expands to the description's actual height (paragraph +
   capability list + link, length varies per tab) via the CSS grid
   0fr/1fr trick, rather than guessing a fixed max-height that's either
   too short (clips longer tabs) or wastes space (too tall for shorter
   ones). The inner span is the overflow:hidden clip; this outer one is
   the animated grid track. */
.hws-service-explorer-tab-desc {
    display: grid;
    grid-template-rows: 0fr;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--hws-text-muted);
    opacity: 0;
    transition: grid-template-rows 350ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease, margin-top 250ms ease;
}

.hws-service-explorer-tab-desc-inner {
    overflow: hidden;
    min-height: 0;
}

.hws-service-explorer-tab:hover {
    background: rgba(37, 99, 235, 0.02);
}

.hws-service-explorer-tab:hover .hws-service-explorer-tab-text {
    transform: translateX(4px);
}

.hws-service-explorer-tab:hover .hws-service-explorer-tab-title {
    color: var(--hws-text);
}

.hws-service-explorer-tab.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.05) 0%, transparent 100%);
    border-left-color: var(--hws-primary);
}

.hws-service-explorer-tab.active .hws-service-explorer-tab-number {
    color: var(--hws-primary);
}

.hws-service-explorer-tab.active .hws-service-explorer-tab-title {
    color: var(--hws-text);
}

.hws-service-explorer-tab.active .hws-service-explorer-tab-desc {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.25rem;
}

.hws-service-explorer-tab:focus-visible {
    outline: 2px solid var(--hws-primary);
    outline-offset: -2px;
}

.hws-service-explorer-capabilities {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hws-service-explorer-capabilities li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--hws-text-muted);
    font-size: 0.9375rem;
}

.hws-service-explorer-capabilities li .hws-svg-icon {
    color: var(--hws-primary);
    flex-shrink: 0;
}

.hws-service-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--hws-primary);
    text-decoration: none;
    transition: color var(--hws-transition-base);
}

.hws-service-nav-link:hover {
    color: var(--hws-primary-dark);
}

/* Right Side: Transparent Visual Stage (NO Card Container!) */
.hws-service-explorer-panels {
    position: relative;
    z-index: 1;
    min-height: 32rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hws-service-visual-stage {
    position: relative;
    width: 100%;
    height: 34rem;
    min-height: 34rem;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.hws-service-explorer-panel.tab-pane {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hws-service-explorer-panel.tab-pane.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* Ambient Radial Stage Glow */
.hws-stage-ambient-glow {
    position: absolute;
    inset: -15%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.14) 0%, rgba(37, 99, 235, 0.04) 45%, transparent 70%);
    opacity: 0.85;
    filter: blur(40px);
    pointer-events: none;
    animation: hwsPulseGlow 6s ease-in-out infinite;
}

/* Floating Decorative Particles */
.hws-stage-particle {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    animation: hwsFloatParticle 5.5s ease-in-out infinite;
}
.hws-particle--dot-1 { top: 12%; left: 8%; width: 6px; height: 6px; border-radius: 50%; background: #06B6D4; opacity: 0.6; }
.hws-particle--dot-2 { bottom: 15%; right: 10%; width: 8px; height: 8px; border-radius: 50%; background: #2563EB; opacity: 0.5; animation-delay: 1.5s; }
.hws-particle--cross { top: 18%; right: 12%; font-size: 14px; font-weight: 700; color: #38BDF8; opacity: 0.5; animation-delay: 2.2s; }
.hws-particle--ring { bottom: 20%; left: 6%; width: 18px; height: 18px; border: 1.5px stroke #10B981; border-radius: 50%; opacity: 0.45; animation-delay: 0.8s; }
.hws-particle--square { top: 8%; right: 32%; width: 10px; height: 10px; border: 1px solid #8B5CF6; transform: rotate(45deg); opacity: 0.4; animation-delay: 3s; }

/* Main Floating Artwork Container */
.hws-vis-composition {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    transform-style: preserve-3d;
    transform: translate(var(--hws-vis-main-x, 0px), var(--hws-vis-main-y, 0px));
}

.hws-vis-main-layer {
    position: relative;
    z-index: 2;
    animation: hwsFloatMain 6s ease-in-out infinite;
}

.hws-vis-fg-layer {
    position: relative;
    z-index: 3;
    animation: hwsFloatSecondary 7.5s ease-in-out infinite;
    transform: translate(var(--hws-vis-fg-x, 0px), var(--hws-vis-fg-y, 0px));
}

/* --- 01. WEBSITES VISUAL COMPOSITION --- */
.hws-browser-window {
    position: relative;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 8px 16px -6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transform: rotateY(-7deg) rotateX(4deg);
    transition: transform var(--hws-transition-slow);
}

.hws-browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}

.hws-browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.hws-browser-dot--red { background: #FF5F56; }
.hws-browser-dot--yellow { background: #FFBD2E; }
.hws-browser-dot--green { background: #27C939; }

.hws-browser-url {
    flex: 1;
    max-width: 220px;
    margin-inline: auto;
    font-size: 0.72rem;
    color: #64748B;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 3px 10px;
    text-align: center;
}

.hws-browser-body {
    padding: 20px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

.hws-mock-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.hws-mock-logo { width: 28px; height: 12px; border-radius: 3px; background: #2563EB; }
.hws-mock-links { display: flex; gap: 8px; }
.hws-mock-link { width: 36px; height: 6px; border-radius: 3px; background: #E2E8F0; }

.hws-mock-hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.hws-mock-title { width: 85%; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #1E293B 0%, #334155 100%); margin-bottom: 8px; }
.hws-mock-subtitle { width: 95%; height: 8px; border-radius: 3px; background: #94A3B8; margin-bottom: 12px; }
.hws-mock-btn { width: 70px; height: 22px; border-radius: 6px; background: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%); }

.hws-mock-media {
    height: 85px;
    border-radius: 8px;
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    border: 1px dashed #38BDF8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284C7;
}

/* Floating Mobile Preview on Websites Visual */
.hws-floating-mobile-preview {
    position: absolute;
    bottom: -18px;
    right: -12px;
    width: 130px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
    padding: 10px;
    z-index: 4;
}
.hws-floating-mobile-preview .hws-mock-title { width: 90%; height: 8px; }
.hws-floating-mobile-preview .hws-mock-media { height: 50px; }

/* Floating Cursor */
.hws-floating-cursor {
    position: absolute;
    top: 45%;
    left: 48%;
    z-index: 5;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    animation: hwsFloatMain 4s ease-in-out infinite;
}

/* --- 02. WEB APPLICATIONS VISUAL COMPOSITION --- */
.hws-dashboard-window {
    position: relative;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    display: grid;
    grid-template-columns: 60px 1fr;
    min-height: 260px;
}

.hws-dash-sidebar {
    background: #0F172A;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.hws-dash-side-item { width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 12px; }
.hws-dash-side-item.active { background: #2563EB; color: #FFFFFF; }

.hws-dash-main { padding: 18px; background: #F8FAFC; }
.hws-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.hws-dash-search { width: 130px; height: 20px; border-radius: 6px; background: #E2E8F0; }
.hws-dash-user { width: 22px; height: 22px; border-radius: 50%; background: #2563EB; }

.hws-dash-chart-card {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    padding: 14px;
    margin-bottom: 12px;
}

.hws-dash-chart-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.hws-dash-stat-val { font-size: 1.1rem; font-weight: 800; color: #0F172A; }
.hws-dash-stat-badge { font-size: 0.72rem; font-weight: 700; color: #10B981; background: #D1FAE5; padding: 2px 6px; border-radius: 4px; }

.hws-dash-table { display: flex; flex-direction: column; gap: 6px; }
.hws-dash-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #FFFFFF; border-radius: 6px; border: 1px solid #F1F5F9; font-size: 0.75rem; }

/* Floating Live Analytics Badge */
.hws-floating-analytics-badge {
    position: absolute;
    top: -14px;
    right: -12px;
    background: #0F172A;
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 4;
}
.hws-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 8px #10B981; }

/* --- 03. MOBILE APPS VISUAL COMPOSITION --- */
.hws-mobile-composition {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
}

.hws-phone-primary {
    position: relative;
    width: 175px;
    height: 320px;
    background: #0F172A;
    border-radius: 32px;
    padding: 10px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    border: 3px solid #334155;
    z-index: 2;
}

.hws-phone-screen {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.hws-phone-island { width: 50px; height: 12px; background: #0F172A; border-radius: 10px; margin: 0 auto 12px; }

.hws-phone-app-hero { height: 90px; background: linear-gradient(135deg, #2563EB 0%, #38BDF8 100%); border-radius: 12px; margin-bottom: 12px; padding: 10px; color: #FFFFFF; font-weight: 700; font-size: 0.75rem; }

.hws-phone-app-card { background: #F8FAFC; border-radius: 10px; padding: 8px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }

.hws-phone-secondary {
    position: absolute;
    left: 20%;
    width: 155px;
    height: 280px;
    background: #1E293B;
    border-radius: 28px;
    padding: 8px;
    border: 2px solid #475569;
    opacity: 0.75;
    transform: rotate(-10deg) translateY(10px);
    z-index: 1;
}

/* Floating Notification Bubble */
.hws-floating-notification {
    position: absolute;
    top: 20px;
    right: 8%;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0F172A;
    z-index: 4;
}

/* --- 04. DIGITAL PRODUCTS VISUAL COMPOSITION --- */
.hws-product-ecosystem {
    position: relative;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hws-eco-card--center {
    width: 260px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.14);
    padding: 16px;
    z-index: 2;
}

.hws-eco-card--satellite-1 {
    position: absolute;
    top: 10px;
    left: 4%;
    width: 130px;
    background: #0F172A;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 10px;
    font-size: 0.72rem;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
    z-index: 3;
}

.hws-eco-card--satellite-2 {
    position: absolute;
    bottom: 15px;
    right: 4%;
    width: 140px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px;
    font-size: 0.72rem;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    z-index: 3;
}

/* Connected SVG Lines */
.hws-eco-svg-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Keyframe Animations */
@keyframes hwsFloatMain {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes hwsFloatSecondary {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@keyframes hwsFloatParticle {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(4px, -6px); }
}

@keyframes hwsPulseGlow {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .hws-service-explorer-tab,
    .hws-service-explorer-tab-title,
    .hws-service-explorer-tab-desc,
    .hws-vis-main-layer,
    .hws-vis-fg-layer,
    .hws-stage-particle,
    .hws-stage-ambient-glow { animation: none !important; transition: none !important; }
}

@media (max-width: 991.98px) {
    .hws-service-explorer { grid-template-columns: 1fr; gap: 2.5rem; }
    .hws-service-explorer-panels { order: 2; min-height: 22rem; }
    .hws-service-visual-stage { min-height: 22rem; }
}