/* ===================================================================
   Cybrid "continuous surface" flow template
   -------------------------------------------------------------------
   Turns the page into one living field instead of stacked boxes:
   a fixed ambient aurora + the global network (js/hero-fx.js) sit
   behind transparent sections so everything flows together.
   Built generically so it can become the template for other pages.
   =================================================================== */

/* ---- Global network canvas (full viewport, behind content) ---- */
.cy-network {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.9;
}

/* ---- Ambient aurora: a calm, drifting color field behind it all ---- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(46% 38% at 16% 12%, rgba(0, 192, 250, 0.13), transparent 62%),
        radial-gradient(44% 40% at 85% 26%, rgba(1, 94, 234, 0.16), transparent 62%),
        radial-gradient(58% 50% at 52% 68%, rgba(0, 150, 234, 0.11), transparent 64%),
        radial-gradient(50% 46% at 12% 88%, rgba(0, 192, 250, 0.09), transparent 60%),
        radial-gradient(54% 48% at 88% 92%, rgba(1, 94, 234, 0.12), transparent 62%);
}
@media (prefers-reduced-motion: no-preference) {
    body::after {
        content: "";
        position: fixed;
        inset: -25%;
        z-index: -3;
        pointer-events: none;
        background:
            radial-gradient(38% 34% at 28% 30%, rgba(0, 192, 250, 0.10), transparent 60%),
            radial-gradient(36% 32% at 72% 64%, rgba(1, 94, 234, 0.11), transparent 60%);
        filter: blur(6px);
        animation: cyAurora 30s ease-in-out infinite alternate;
    }
}
@keyframes cyAurora {
    0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
    100% { transform: translate3d(5%, 4%, 0) scale(1.14); }
}

/* ---- Make the page borderless: hero + sections share the field ---- */
html body #home.hero {
    background: transparent !important;
    isolation: auto !important;
}
/* drop the hero's hard bottom seam / divider — it melts into the field */
html body #home.hero::after,
html body #home.hero::before {
    display: none !important;
}

html body .trust-snapshot,
html body .capability-showcase,
html body .capability-panel,
html body .services-section,
html body .portfolio-preview-section,
html body .about-us {
    background: transparent !important;
}

/* Brighter, larger hero focal glow now that the hero is open */
.hero .hero-orb { opacity: 0.62; }
.hero .hero-orb--cyan { width: 420px; height: 420px; }
.hero .hero-orb--blue { width: 520px; height: 520px; }

/* ---- Bigger hero logo ---- */
html body .hero-logo img {
    width: 440px !important;
    max-width: 440px !important;
    filter: drop-shadow(0 24px 54px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 36px rgba(0, 192, 250, 0.18)) !important;
}

/* ---- Frosted-glass cards that float on the field (less "boxy") ---- */
html body .trust-card,
html body .capability-card,
html body .portfolio-preview-card,
html body .workflow-preview {
    background: linear-gradient(160deg, rgba(20, 27, 40, 0.62), rgba(12, 17, 26, 0.52)) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42) !important;
}

/* ---- Airier vertical rhythm so sections breathe and blend ---- */
html body .trust-snapshot,
html body .capability-showcase,
html body .portfolio-preview-section,
html body .about-us {
    padding-top: 104px !important;
    padding-bottom: 104px !important;
}

/* ---- Responsive logo sizing ---- */
@media (max-width: 768px) {
    html body .hero-logo img { width: 320px !important; max-width: 320px !important; }
    html body .trust-snapshot,
    html body .capability-showcase,
    html body .portfolio-preview-section,
    html body .about-us { padding-top: 76px !important; padding-bottom: 76px !important; }
}
@media (max-width: 480px) {
    html body .hero-logo img { width: 260px !important; max-width: 260px !important; }
}

/* ===================================================================
   Custom Cybrid icon chips (js/cy-icons.js) — match the 42/34px chip
   look of the original glyphs, in the brand's line style.
   =================================================================== */
.cy-ico {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(0, 192, 250, 0.10);
    border: 1px solid rgba(0, 192, 250, 0.24);
    vertical-align: middle;
}
.cy-ico .cy-glyph { width: 22px; height: 22px; display: block; }
.trust-card .cy-ico,
.capability-card .cy-ico { margin-bottom: 16px; }
.preview-build-item .cy-ico { width: 34px; height: 34px; }
.preview-build-item .cy-ico .cy-glyph { width: 18px; height: 18px; }

/* The in-mockup "Get Free Consultation" is now a real link — keep it
   looking like the button it always did (no underline). */
a.preview-primary-action { text-decoration: none; }

/* ===================================================================
   Template applied site-wide: transparent heroes + section wrappers so
   every page shares the same continuous network/aurora field as home.
   (html body specificity intentionally beats the dark-redesign theme.)
   =================================================================== */
html body .services-hero,
html body .about-hero,
html body .portfolio-hero,
html body .contact-hero,
html body .pricing-hero,
html body .blog-hero,
html body .faq-hero {
    background: transparent !important;
    isolation: auto !important;
}
html body .services-hero::after, html body .services-hero::before,
html body .about-hero::after, html body .about-hero::before,
html body .portfolio-hero::after, html body .portfolio-hero::before,
html body .contact-hero::after, html body .contact-hero::before,
html body .pricing-hero::after, html body .pricing-hero::before,
html body .blog-hero::after, html body .blog-hero::before,
html body .faq-hero::after, html body .faq-hero::before {
    display: none !important;
}

html body .story-section,
html body .core-values-section,
html body .founder-section,
html body .portfolio-container,
html body .process-container,
html body .contact-methods,
html body .why-choose-us,
html body .faq-container,
html body .faq-section,
html body .faq-quick-link,
html body .faq-cta,
html body .blog-container,
html body .pricing-container,
html body .services-grid-section,
html body .services-cta-section,
html body .about-cta-section,
html body .cta-section {
    background: transparent !important;
}

/* ===================================================================
   Secondary-page heroes were locked to min-height:620px, leaving a big
   empty void under content-light heroes (portfolio, faq, blog, pricing).
   Size them to their content with consistent breathing room instead.
   =================================================================== */
html body .services-hero,
html body .about-hero,
html body .portfolio-hero,
html body .contact-hero,
html body .pricing-hero,
html body .blog-hero,
html body .faq-hero {
    min-height: auto !important;
}
html body .portfolio-hero,
html body .pricing-hero,
html body .blog-hero,
html body .faq-hero,
html body .about-hero,
html body .services-hero {
    padding-bottom: 72px !important;
}

/* With min-height removed, restore top spacing so hero content clears the
   fixed navbar (contact keeps its own larger padding for the form). */
html body .services-hero,
html body .about-hero,
html body .portfolio-hero,
html body .pricing-hero,
html body .blog-hero,
html body .faq-hero {
    padding-top: 124px !important;
}