/**
 * Nipun India homepage — Premium SaaS layer (visual only).
 * Typography · white glow · depth · ambient background · micro-interactions
 */

/* ============================================================
   Design system tokens
   ============================================================ */
body.hp-home-page.hp-saas-premium {
    --hp-premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hp-premium-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hp-section-gap: clamp(4.5rem, 9vw, 7.5rem);
    --hp-section-y-premium: clamp(4.25rem, 8.5vw, 7rem);
    --hp-radius-premium: 20px;
    --hp-radius-card: 18px;
    --hp-shadow-lift:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 0 0 1px rgba(255, 255, 255, 0.55),
        0 4px 6px -2px rgba(0, 36, 67, 0.04),
        0 16px 40px -12px rgba(0, 36, 67, 0.1),
        0 32px 64px -24px rgba(49, 112, 222, 0.08);
    --hp-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 0 1px rgba(255, 255, 255, 0.65),
        0 8px 16px -4px rgba(0, 36, 67, 0.08),
        0 24px 48px -12px rgba(0, 36, 67, 0.14),
        0 0 48px -8px rgba(49, 112, 222, 0.12);
    --hp-white-glow: radial-gradient(ellipse 80% 55% at 50% -8%, rgba(255, 255, 255, 0.95) 0%, transparent 62%);
    --hp-glass-bg: linear-gradient(
        148deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.82) 42%,
        rgba(248, 252, 255, 0.88) 100%
    );
    --hp-glass-border: rgba(255, 255, 255, 0.72);
    --hp-glass-blur: blur(24px) saturate(1.55);
    position: relative;
    background: #eef2f7;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Ambient animated background
   ============================================================ */
.hp-ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hp-ambient-mesh {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 55% 45% at 12% 18%, rgba(49, 112, 222, 0.11) 0%, transparent 58%),
        radial-gradient(ellipse 48% 42% at 88% 12%, rgba(222, 49, 99, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 72% 78%, rgba(234, 173, 58, 0.06) 0%, transparent 58%),
        radial-gradient(ellipse 50% 40% at 8% 82%, rgba(49, 112, 222, 0.08) 0%, transparent 55%),
        linear-gradient(165deg, #eef2f7 0%, #f8fafc 38%, #f1f5f9 68%, #e8eef5 100%);
    animation: hp-mesh-drift 28s ease-in-out infinite alternate;
}

@keyframes hp-mesh-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-1.5%, 1%) scale(1.02); }
}

.hp-ambient-orbs {
    position: absolute;
    inset: 0;
}

.hp-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.55;
    will-change: transform;
}

.hp-ambient-orb--1 {
    top: 6%;
    left: -4%;
    width: min(42vw, 520px);
    height: min(42vw, 520px);
    background: radial-gradient(circle, rgba(49, 112, 222, 0.22) 0%, transparent 68%);
    animation: hp-orb-float-1 22s var(--hp-premium-ease) infinite alternate;
}

.hp-ambient-orb--2 {
    top: 38%;
    right: -6%;
    width: min(36vw, 440px);
    height: min(36vw, 440px);
    background: radial-gradient(circle, rgba(222, 49, 99, 0.14) 0%, transparent 68%);
    animation: hp-orb-float-2 26s var(--hp-premium-ease) infinite alternate;
}

.hp-ambient-orb--3 {
    bottom: 8%;
    left: 22%;
    width: min(32vw, 380px);
    height: min(32vw, 380px);
    background: radial-gradient(circle, rgba(234, 173, 58, 0.12) 0%, transparent 68%);
    animation: hp-orb-float-3 24s var(--hp-premium-ease) infinite alternate;
}

.hp-ambient-orb--4 {
    top: 62%;
    right: 18%;
    width: min(28vw, 320px);
    height: min(28vw, 320px);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.65) 0%, transparent 70%);
    animation: hp-orb-float-4 20s var(--hp-premium-ease) infinite alternate;
}

@keyframes hp-orb-float-1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(3%, 4%); }
}

@keyframes hp-orb-float-2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-4%, 3%); }
}

@keyframes hp-orb-float-3 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(2%, -3%); }
}

@keyframes hp-orb-float-4 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-2%, -2%); }
}

.hp-ambient-particles {
    position: absolute;
    inset: 0;
}

.hp-ambient-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    opacity: 0;
    animation: hp-particle-rise linear infinite;
}

@keyframes hp-particle-rise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }
    8% { opacity: 0.7; }
    92% { opacity: 0.35; }
    100% {
        opacity: 0;
        transform: translateY(-120vh) scale(1);
    }
}

body.hp-saas-premium > *:not(.hp-ambient-bg) {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Typography hierarchy — clean weights
   ============================================================ */
.hp-saas-premium h1 {
    font-family: var(--hp-font-hero, 'Inter', 'Nunito Sans', system-ui, sans-serif);
    font-weight: 700 !important;
    letter-spacing: -0.028em;
    line-height: 1.1;
}

.hp-saas-premium h2,
.hp-saas-premium .section-head h2,
.hp-saas-premium .hp-reviews-head h2,
.hp-saas-premium .hp-seo-hub-head h2,
.hp-saas-premium .hp-states-overview-head h2,
.hp-saas-premium .hp-why-head h2,
.hp-saas-premium .partner-reg-copy h2,
.hp-saas-premium .hp-demo-head h2,
.hp-saas-premium .hp-schools-head h2,
.hp-saas-premium .hp-gallery-head h2,
.hp-saas-premium .hp-faq-head h2,
.hp-saas-premium .hp-problems .section-head h2,
.hp-saas-premium .hp-modules-intro h2 {
    font-weight: 600 !important;
    letter-spacing: -0.022em;
    line-height: 1.18;
}

.hp-saas-premium h3,
.hp-saas-premium .hp-module-card h3,
.hp-saas-premium .hp-resource-card h3,
.hp-saas-premium .hp-why-card h3,
.hp-saas-premium .hp-school-stat-card h3,
.hp-saas-premium .hp-cred-info-title {
    font-weight: 600 !important;
    letter-spacing: -0.015em;
    line-height: 1.28;
}

.hp-saas-premium p,
.hp-saas-premium li,
.hp-saas-premium .hp-hero-desc,
.hp-saas-premium .section-head p,
.hp-saas-premium .hp-resource-problem-text,
.hp-saas-premium .hp-resource-solve-text {
    font-weight: 400;
    line-height: 1.68;
}

.hp-saas-premium .kicker,
.hp-saas-premium .hp-hero-kicker,
.hp-saas-premium .hp-reviews-kicker,
.hp-saas-premium .hp-modules-kicker {
    font-weight: 500 !important;
    letter-spacing: 0.14em;
}

.hp-saas-premium .hp-btn,
.hp-saas-premium .btn,
.hp-saas-premium .hp-nav-link-top,
.hp-saas-premium label {
    font-weight: 500;
}

.hp-saas-premium .hp-btn-primary,
.hp-saas-premium .btn-primary,
.hp-saas-premium .demo-submit {
    font-weight: 600 !important;
}

/* Normalize extra-bold outliers */
.hp-saas-premium .hp-logo-name,
.hp-saas-premium .hp-ticker-badge {
    font-weight: 600 !important;
}
.hp-saas-premium .hp-reviews-stat strong,
.hp-saas-premium .hp-modules-cta-count strong,
.hp-saas-premium .hp-heading-dark,
.hp-saas-premium .hp-heading-pink {
    font-weight: 600 !important;
}

.hp-saas-premium .hp-hero-copy h1,
.hp-saas-premium #home.hp-hero-powerschool .hp-hero-copy h1 {
    font-weight: 700 !important;
}

/* ============================================================
   Section spacing & visual separation
   ============================================================ */
.hp-saas-premium .hp-section,
.hp-saas-premium main > section:not(#home):not(#story-video):not(.hp-story-video):not(.hp-hero) {
    padding-top: var(--hp-section-y-premium) !important;
    padding-bottom: var(--hp-section-y-premium) !important;
}

/* Video sections — full bleed, no section padding */
.hp-saas-premium #home,
.hp-saas-premium #story-video,
.hp-saas-premium .hp-story-video.hp-story-video--has-video {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #0a1628 !important;
}

.hp-saas-premium main > .hp-section + .hp-section,
.hp-saas-premium main > section.hp-story-video + .hp-section,
.hp-saas-premium main > .hp-credentials-band + section {
    border-top: none;
}

.hp-saas-premium .hp-section-divider {
    display: block;
    width: min(720px, 88%);
    height: 1px;
    margin: 0 auto;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(49, 112, 222, 0.18) 22%,
        rgba(222, 49, 99, 0.14) 50%,
        rgba(49, 112, 222, 0.18) 78%,
        transparent 100%
    );
    opacity: 0.85;
}

.hp-saas-premium .section-head,
.hp-saas-premium .hp-reviews-head,
.hp-saas-premium .hp-modules-intro {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* White sections — premium illuminated surfaces */
.hp-saas-premium .hp-problems,
.hp-saas-premium .hp-section:not(.hp-credentials-band):not(.hp-modules--fedena):not(.hp-reviews--trendy):not(.hp-seo-hub--editorial):not(.hp-states-overview--atlas) {
    position: relative;
    isolation: isolate;
}

.hp-saas-premium .hp-problems::before,
.hp-saas-premium .hp-partner-band::before,
.hp-saas-premium .hp-demo-band::before,
.hp-saas-premium .hp-schools-band::before,
.hp-saas-premium .hp-gallery-band::before,
.hp-saas-premium .hp-why-band::before,
.hp-saas-premium .hp-faq-band::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--hp-white-glow);
}

.hp-saas-premium .hp-problems .container,
.hp-saas-premium .hp-partner-band .container,
.hp-saas-premium .hp-demo-band .container,
.hp-saas-premium .hp-schools-band .container,
.hp-saas-premium .hp-gallery-band .container,
.hp-saas-premium .hp-why-band .container,
.hp-saas-premium .hp-faq-band .container {
    position: relative;
    z-index: 1;
}

.hp-saas-premium .hp-problems {
    background:
        var(--hp-white-glow),
        linear-gradient(180deg, #ffffff 0%, #fafcff 48%, #f4f8fc 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -40px 80px -40px rgba(49, 112, 222, 0.04);
}

.hp-saas-premium .hp-section:not(.hp-credentials-band):not(.hp-modules--fedena):not(.hp-problems):not(.hp-reviews--trendy):not(.hp-seo-hub--editorial):not(.hp-states-overview--atlas):not(.hp-partner-band--classic) {
    background:
        var(--hp-white-glow),
        linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
}

/* ============================================================
   Hero — depth, glow, entrance
   ============================================================ */
.hp-saas-premium .hp-hero.hp-hero-powerschool {
    position: relative;
    isolation: isolate;
}

.hp-saas-premium .hp-hero.hp-hero-powerschool::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 36, 67, 0.12) 100%);
}

.hp-saas-premium #home.hp-hero-video-full.hp-hero-powerschool::after {
    display: none;
}

.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy--classic::before,
.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy::before {
    display: none !important;
    content: none !important;
}

.hp-saas-premium .hp-hero-copy {
    position: relative;
    z-index: 4;
}

.hp-saas-premium .hp-hero-copy::before {
    content: "";
    position: absolute;
    inset: -24px -32px;
    z-index: -1;
    border-radius: 28px;
    background: radial-gradient(ellipse 90% 80% at 20% 50%, rgba(255, 255, 255, 0.14) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
}

.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy::before {
    display: none !important;
    content: none !important;
}

.hp-saas-premium .hp-hero-copy.hp-hero-enter {
    animation: hp-hero-enter 0.9s var(--hp-premium-ease-out) both;
}

.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy.hp-hero-enter {
    animation: none;
}

.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy.hp-hero-enter > * {
    animation: hp-hero-enter-video 0.7s var(--hp-premium-ease-out) both;
}

.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy.hp-hero-enter > *:nth-child(1) { animation-delay: 0.06s; }
.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy.hp-hero-enter > *:nth-child(2) { animation-delay: 0.14s; }
.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy.hp-hero-enter > *:nth-child(3) { animation-delay: 0.22s; }
.hp-saas-premium #home.hp-hero-video-full .hp-hero-copy.hp-hero-enter > *:nth-child(4) { animation-delay: 0.3s; }
.hp-saas-premium #story-video.hp-story-video--has-video .hp-story-copy.hp-hero-enter {
    animation: none;
}

.hp-saas-premium #story-video.hp-story-video--has-video .hp-story-copy.hp-hero-enter > * {
    animation: hp-hero-enter-video 0.7s var(--hp-premium-ease-out) both;
}

.hp-saas-premium #story-video.hp-story-video--has-video .hp-story-copy.hp-hero-enter > *:nth-child(1) { animation-delay: 0.06s; }
.hp-saas-premium #story-video.hp-story-video--has-video .hp-story-copy.hp-hero-enter > *:nth-child(2) { animation-delay: 0.14s; }
.hp-saas-premium #story-video.hp-story-video--has-video .hp-story-copy.hp-hero-enter > *:nth-child(3) { animation-delay: 0.22s; }
.hp-saas-premium #story-video.hp-story-video--has-video .hp-story-copy.hp-hero-enter > *:nth-child(4) { animation-delay: 0.3s; }
.hp-saas-premium #story-video.hp-story-video--has-video .hp-story-copy.hp-hero-enter > *:nth-child(5) { animation-delay: 0.38s; }

@keyframes hp-hero-enter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hp-hero-enter-video {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hp-saas-premium .hp-hero-kicker--pill {
    font-weight: 500 !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 4px 20px rgba(0, 0, 0, 0.12);
}

.hp-saas-premium .hp-hero-trust-chip {
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.25s var(--hp-premium-ease), box-shadow 0.25s var(--hp-premium-ease);
}

.hp-saas-premium .hp-hero-trust-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

/* ============================================================
   Glass cards — lifted, glowing, hover
   ============================================================ */
.hp-saas-premium .hp-glass-card {
    border-radius: var(--hp-radius-card);
    background: var(--hp-glass-bg);
    border: 1px solid var(--hp-glass-border);
    box-shadow: var(--hp-shadow-lift);
    backdrop-filter: var(--hp-glass-blur);
    -webkit-backdrop-filter: var(--hp-glass-blur);
    transition:
        transform 0.35s var(--hp-premium-ease),
        box-shadow 0.35s var(--hp-premium-ease),
        border-color 0.35s var(--hp-premium-ease);
    will-change: transform;
}

.hp-saas-premium .hp-glass-card-shine {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, transparent 42%),
        radial-gradient(ellipse 100% 70% at 50% -25%, rgba(255, 255, 255, 0.85) 0%, transparent 58%),
        linear-gradient(118deg, transparent 44%, rgba(255, 255, 255, 0.35) 50%, transparent 56%);
    opacity: 1;
}

.hp-saas-premium .hp-glass-card:hover,
.hp-saas-premium .hp-glass-card:focus-within {
    transform: translateY(-6px) scale(1.008);
    box-shadow: var(--hp-shadow-hover);
    border-color: rgba(255, 255, 255, 0.88);
}

/* Problem / resource cards */
.hp-saas-premium .hp-resource-card {
    position: relative;
    border-radius: var(--hp-radius-card);
    background:
        linear-gradient(160deg, #ffffff 0%, #fafcff 100%);
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: var(--hp-shadow-lift);
    transition:
        transform 0.35s var(--hp-premium-ease),
        box-shadow 0.35s var(--hp-premium-ease),
        border-color 0.35s var(--hp-premium-ease);
    overflow: hidden;
}

.hp-saas-premium .hp-resource-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 55%);
    opacity: 0.85;
    z-index: 0;
}

.hp-saas-premium .hp-resource-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hp-shadow-hover);
    border-color: rgba(49, 112, 222, 0.18);
}

.hp-saas-premium .hp-resource-card.hp-card-enter {
    animation: hp-card-enter 0.65s var(--hp-premium-ease-out) both;
}

@keyframes hp-card-enter {
    from {
        transform: translateY(20px) scale(0.985);
    }
    to {
        transform: translateY(0) scale(1);
    }
}

/* Module cards on dark band */
.hp-saas-premium .hp-module-card.hp-glass-card:hover {
    transform: translateY(-8px) scale(1.012);
}

/* Review cards */
.hp-saas-premium .hp-review-card {
    border-radius: var(--hp-radius-card);
    transition:
        transform 0.35s var(--hp-premium-ease),
        box-shadow 0.35s var(--hp-premium-ease);
}

.hp-saas-premium .hp-review-card:hover {
    transform: translateY(-5px) scale(1.006);
}

/* ============================================================
   Buttons — standardized enterprise finish
   ============================================================ */
.hp-saas-premium .hp-btn,
.hp-saas-premium .btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition:
        transform 0.25s var(--hp-premium-ease),
        box-shadow 0.25s var(--hp-premium-ease),
        background 0.25s var(--hp-premium-ease);
}

.hp-saas-premium .hp-btn-primary,
.hp-saas-premium .btn-primary {
    font-weight: 600 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 8px 24px rgba(222, 49, 99, 0.32);
}

.hp-saas-premium .hp-btn-primary:hover,
.hp-saas-premium .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 14px 32px rgba(222, 49, 99, 0.38);
}

.hp-saas-premium .hp-btn:active,
.hp-saas-premium .btn:active {
    transform: translateY(0) scale(0.98);
}

/* ============================================================
   Header — glass premium
   ============================================================ */
.hp-saas-premium .hp-header {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 4px 24px -8px rgba(0, 36, 67, 0.08);
}

.hp-saas-premium .hp-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 40px -12px rgba(0, 36, 67, 0.12);
}

/* ============================================================
   Scroll reveal — slide-up fade
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .hp-saas-premium .hp-reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 0.7s var(--hp-premium-ease),
            transform 0.7s var(--hp-premium-ease);
    }

    .hp-saas-premium .hp-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .hp-saas-premium .section-head.hp-reveal-child,
    .hp-saas-premium .hp-reviews-head.hp-reveal-child {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 0.6s var(--hp-premium-ease),
            transform 0.6s var(--hp-premium-ease);
    }

    .hp-saas-premium .is-visible .section-head.hp-reveal-child,
    .hp-saas-premium .is-visible .hp-reviews-head.hp-reveal-child,
    .hp-saas-premium .section-head.hp-reveal-child.is-visible,
    .hp-saas-premium .hp-reviews-head.hp-reveal-child.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-saas-premium .hp-ambient-mesh,
    .hp-saas-premium .hp-ambient-orb,
    .hp-saas-premium .hp-ambient-particle {
        animation: none !important;
    }

    .hp-saas-premium .hp-reveal,
    .hp-saas-premium .hp-resource-card.hp-card-enter,
    .hp-saas-premium .hp-hero-copy.hp-hero-enter {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .hp-saas-premium .hp-glass-card:hover,
    .hp-saas-premium .hp-resource-card:hover {
        transform: none;
    }
}

/* ============================================================
   Credentials panel — luxury white glow
   ============================================================ */
.hp-saas-premium .hp-credentials-panel--premium {
    border-radius: var(--hp-radius-premium);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 24px 64px -16px rgba(0, 36, 67, 0.18),
        0 0 80px -20px rgba(234, 173, 58, 0.12);
}

/* ============================================================
   Forms — elevated panels
   ============================================================ */
.hp-saas-premium .hp-demo-panel,
.hp-saas-premium .hp-partner-form-panel,
.hp-saas-premium .hp-faq-panel {
    border-radius: var(--hp-radius-premium);
}

.hp-saas-premium .demo-form input,
.hp-saas-premium .demo-form select,
.hp-saas-premium .demo-form textarea {
    border-radius: 12px;
    border-color: rgba(226, 232, 240, 0.95);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hp-saas-premium .demo-form input:focus,
.hp-saas-premium .demo-form select:focus,
.hp-saas-premium .demo-form textarea:focus {
    border-color: rgba(49, 112, 222, 0.45);
    box-shadow: 0 0 0 3px rgba(49, 112, 222, 0.12);
    outline: none;
}

/* Modules dark band — depth orbs enhanced */
.hp-saas-premium .hp-modules--refined {
    position: relative;
    isolation: isolate;
}

.hp-saas-premium .hp-modules--refined .hp-mod-orb {
    filter: blur(64px);
    opacity: 0.75;
}

.hp-saas-premium .hp-modules-intro h2 .hp-heading-light {
    font-weight: 500 !important;
    opacity: 0.92;
}

.hp-saas-premium .hp-credentials-heading {
    font-weight: 600 !important;
}

/* Back to top — glass lift */
.hp-saas-premium .hp-back-top {
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 8px 24px rgba(0, 36, 67, 0.18);
    transition: transform 0.25s var(--hp-premium-ease), box-shadow 0.25s var(--hp-premium-ease);
}

.hp-saas-premium .hp-back-top:hover {
    transform: translateY(-3px);
}

/* Section divider spacing */
.hp-saas-premium .hp-section-divider {
    margin-top: clamp(0.5rem, 2vw, 1.25rem);
    margin-bottom: clamp(0.5rem, 2vw, 1.25rem);
}

/* Main — transparent so ambient mesh peeks between sections */
.hp-saas-premium main {
    background: transparent;
}

/* Story video — editorial headline rhythm */
.hp-saas-premium #story-video .hp-story-copy h2,
.hp-saas-premium #story-video #hp-story-heading {
    font-family: var(--hp-font-hero, 'Inter', 'Nunito Sans', system-ui, sans-serif);
    font-weight: 700 !important;
    font-size: clamp(1.65rem, 3.2vw, 2.65rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.028em;
}

.hp-saas-premium #story-video .hp-story-copy h2 br {
    display: block;
    content: "";
    margin-top: 0.08em;
}

/* Testimonials — premium glass bento */
.hp-saas-premium .hp-reviews--trendy {
    position: relative;
    isolation: isolate;
}

.hp-saas-premium .hp-reviews--trendy .hp-review-card {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 16px 40px -12px rgba(0, 0, 0, 0.28);
}

.hp-saas-premium .hp-reviews--trendy .hp-review-card:hover {
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 24px 48px -10px rgba(0, 0, 0, 0.35),
        0 0 40px -8px rgba(49, 112, 222, 0.2);
}

.hp-saas-premium .hp-reviews-stat {
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hp-saas-premium .hp-reviews-stat strong {
    font-weight: 600 !important;
}

/* Gallery — frame lift */
.hp-saas-premium .hp-gallery-item {
    border-radius: var(--hp-radius-card);
    transition:
        transform 0.35s var(--hp-premium-ease),
        box-shadow 0.35s var(--hp-premium-ease);
}

.hp-saas-premium .hp-gallery-item:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--hp-shadow-hover);
}

/* Footer CTA — illuminated band */
.hp-saas-premium .hp-footer-cta {
    position: relative;
    isolation: isolate;
}

.hp-saas-premium .hp-footer-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
}

.hp-saas-premium .hp-footer-cta-title {
    font-weight: 600 !important;
}

/* Floating white section cards — subtle edge glow on wide screens */
@media (min-width: 901px) {
    .hp-saas-premium .hp-problems,
    .hp-saas-premium .hp-partner-band,
    .hp-saas-premium .hp-demo-band,
    .hp-saas-premium .hp-schools-band,
    .hp-saas-premium .hp-gallery-band,
    .hp-saas-premium .hp-why-band,
    .hp-saas-premium .hp-faq-band {
        margin-left: clamp(0.5rem, 2vw, 1.5rem);
        margin-right: clamp(0.5rem, 2vw, 1.5rem);
        border-radius: clamp(16px, 2vw, 24px);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.65),
            0 24px 64px -32px rgba(0, 36, 67, 0.12);
    }
}

/* ============================================================
   Mobile refinements
   ============================================================ */
@media (max-width: 768px) {
    .hp-saas-premium .hp-section,
    .hp-saas-premium main > section {
        padding-top: clamp(3.25rem, 10vw, 4.5rem) !important;
        padding-bottom: clamp(3.25rem, 10vw, 4.5rem) !important;
    }

    .hp-saas-premium .hp-glass-card:hover,
    .hp-saas-premium .hp-resource-card:hover,
    .hp-saas-premium .hp-review-card:hover {
        transform: none;
    }

    .hp-ambient-orb {
        filter: blur(48px);
        opacity: 0.4;
    }
}

/* ============================================================
   Final polish — SEO hub, states atlas, FAQ, credentials
   ============================================================ */
.hp-saas-premium.hp-ready .hp-reveal {
    will-change: opacity, transform;
}

.hp-saas-premium .hp-seo-hub--editorial,
.hp-saas-premium .hp-states-overview--atlas {
    position: relative;
    isolation: isolate;
}

.hp-saas-premium .hp-seo-hub--editorial .hp-seo-hub-card--glass,
.hp-saas-premium .hp-states-overview--atlas .hp-states-overview-card--glass {
    transition:
        transform 0.35s var(--hp-premium-ease),
        box-shadow 0.35s var(--hp-premium-ease);
}

.hp-saas-premium .hp-seo-hub--editorial .hp-seo-hub-card--glass:hover,
.hp-saas-premium .hp-states-overview--atlas .hp-states-overview-card--glass:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 16px 40px -12px rgba(0, 36, 67, 0.12);
}

.hp-saas-premium .hp-faq-item {
    border-radius: 12px;
    transition: background 0.2s ease;
}

.hp-saas-premium .hp-faq-item[open] {
    background: rgba(248, 252, 255, 0.85);
}

.hp-saas-premium .hp-faq-item summary {
    font-weight: 600;
    cursor: pointer;
}

.hp-saas-premium .hp-credentials-band--refined {
    position: relative;
    isolation: isolate;
}

.hp-saas-premium .hp-credentials-band--refined::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(234, 173, 58, 0.08) 0%, transparent 62%);
}

.hp-saas-premium .hp-credentials-band--refined .hp-credentials-panel {
    position: relative;
    z-index: 1;
}

.hp-saas-premium .hp-section-divider {
    position: relative;
    z-index: 2;
    background-color: transparent;
}