/* =============================================================
   Propia — Homepage stylesheet  (homepage.css)

   Brand tokens — matched to the Propia logo's blue (logo.svg: #29aaff/#3db8ff
   → #0a1e8a, also used by the nav wordmark gradient and #hpScrollBar)
   ─── Primary    #133A93
   ─── Secondary  #2F8FEA
   ─── Accent     #F2C14E
   ─── Background #F7F9FA
   ─── Text       #1A1A1A
   ============================================================= */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    --hp-primary:      #133A93;
    --hp-primary-dark: #0D2B73;
    --hp-secondary:    #2F8FEA;
    --hp-accent:       #F2C14E;
    --hp-accent-dark:  #d4a73c;
    --hp-bg:           #F7F9FA;
    --hp-text:         #1A1A1A;
    --hp-muted:        #5a6a78;
    --hp-border:       #dde6ec;
    --hp-surface:      #ffffff;
    --hp-primary-tint: #E7EEFD;
    --hp-dark:         #0A1742;
    --hp-dark-card:    #11225E;
    --hp-radius:       0.875rem;
    --hp-radius-sm:    0.5rem;
    --hp-shadow-sm:    0 2px 12px rgba(19,58,147,.07);
    --hp-shadow:       0 4px 24px rgba(19,58,147,.10);
    --hp-shadow-lg:    0 12px 48px rgba(19,58,147,.16);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--hp-text);
    background: var(--hp-surface);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Applied while the mobile nav menu is open, to stop the page scrolling behind it */
body.hp-no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* ── Container ───────────────────────────────────────────────── */
.hp-container {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* ─── Scroll-progress bar ───────────────────────────────────────── */
#hpScrollBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #29aaff 0%, #0a1e8a 100%);
    z-index: 999;
    border-radius: 0 2px 2px 0;
    transition: width .08s linear;
    pointer-events: none;
}

/* ─
.hp-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
}
.hp-fade.hp-fade--d1 { transition-delay: .1s; }
.hp-fade.hp-fade--d2 { transition-delay: .2s; }
.hp-fade.hp-fade--d3 { transition-delay: .3s; }
.hp-fade.hp-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .hp-fade { opacity: 1; transform: none; transition: none; }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.hp-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    padding: .65rem 1.5rem;
    border-radius: var(--hp-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s, color .15s, box-shadow .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.hp-btn--lg { font-size: 1rem; padding: .8125rem 2rem; }

.hp-btn--primary {
    background: var(--hp-accent);
    color: var(--hp-primary);
    border-color: var(--hp-accent);
    font-weight: 700;
}
.hp-btn--primary:hover {
    background: var(--hp-accent-dark);
    border-color: var(--hp-accent-dark);
    color: var(--hp-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(242,193,78,.4);
}

.hp-btn--secondary {
    background: var(--hp-primary);
    color: #fff;
    border-color: var(--hp-primary);
}
.hp-btn--secondary:hover {
    background: var(--hp-primary-dark);
    border-color: var(--hp-primary-dark);
    color: #fff;
    transform: translateY(-2px);
}

.hp-btn--ghost {
    background: transparent;
    color: var(--hp-text);
    border-color: transparent;
}
.hp-btn--ghost:hover {
    background: var(--hp-primary-tint);
    color: var(--hp-primary);
}

.hp-btn--outline {
    background: transparent;
    color: var(--hp-primary);
    border-color: var(--hp-primary);
}
.hp-btn--outline:hover {
    background: var(--hp-primary);
    color: #fff;
    transform: translateY(-2px);
}

.hp-btn--outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.5);
}
.hp-btn--outline-white:hover {
    background: rgba(255,255,255,.12);
    border-color: #fff;
}

/* ── Section helpers ─────────────────────────────────────────── */
.hp-section { padding-block: 5rem; }
.hp-section--bg   { background: var(--hp-bg); }
.hp-section--dark { background: var(--hp-dark); }

.hp-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hp-secondary);
    margin-bottom: .75rem;
}
.hp-eyebrow--light { color: var(--hp-accent); }

.hp-section-title {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--hp-text);
}
.hp-section-title--light { color: #fff; }

.hp-section-sub {
    font-size: 1.0625rem;
    color: var(--hp-muted);
    max-width: 540px;
    margin-top: .75rem;
    line-height: 1.7;
}
.hp-section-sub--light { color: rgba(255,255,255,.7); }

.hp-section-header         { margin-bottom: 3.5rem; }
.hp-section-header--center { text-align: center; }
.hp-section-header--center .hp-section-sub { margin-inline: auto; }

/* =============================================================
   NAV
   ============================================================= */
.hp-nav {
    position: fixed;
    top: 1.25rem;
    /* Centered via inset + auto margins, NOT transform — a transform here would
       become the containing block for any position:fixed descendant (the mobile
       menu panel), silently breaking its full-viewport positioning. */
    left: 0;
    right: 0;
    margin-inline: auto;
    z-index: 200;
    width: calc(100% - 3rem);
    max-width: 1180px;
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-radius: 9999px;
    height: 64px;
    border: none;
    outline: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 4px 28px rgba(0,0,0,.10);
    transition: top .38s cubic-bezier(.16,1,.3,1),
                height .38s cubic-bezier(.16,1,.3,1),
                border-radius .38s cubic-bezier(.16,1,.3,1),
                box-shadow .38s cubic-bezier(.16,1,.3,1),
                background .38s cubic-bezier(.16,1,.3,1),
                width .38s cubic-bezier(.16,1,.3,1),
                max-width .38s cubic-bezier(.16,1,.3,1),
                outline-color .38s cubic-bezier(.16,1,.3,1);
    will-change: top, width, height, border-radius;
}

/* Scrolled state — flat bar, no border flash, slightly shorter for a snappier feel */
.hp-nav--scrolled {
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 58px;
    border-radius: 0;
    background: rgba(255,255,255,.78);
    outline: none;
    box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 2px 16px rgba(0,0,0,.06);
}

.hp-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-inline: 1.75rem;
}

.hp-nav__logo     { display: flex; align-items: center; flex-shrink: 0; }
.hp-nav__logo-img {
    height: 44px;
    width: auto;
    display: block;
    transition: height .38s cubic-bezier(.16,1,.3,1);
}
.hp-nav--scrolled .hp-nav__logo-img { height: 38px; }

.hp-nav__links {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.hp-nav__links a {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--hp-text);
    transition: color .2s;
    position: relative;
    padding-bottom: 2px;
}
.hp-nav__links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--hp-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.hp-nav__links a:hover,
.hp-nav__links a.hp-active { color: var(--hp-primary); }
.hp-nav__links a:hover::after,
.hp-nav__links a.hp-active::after { transform: scaleX(1); }

.hp-nav__actions { display: flex; align-items: center; gap: .75rem; }

.hp-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 201;
}
.hp-nav__burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--hp-text);
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease;
    transform-origin: center;
}
.hp-nav--open .hp-nav__burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hp-nav--open .hp-nav__burger span:nth-child(2) { opacity: 0; }
.hp-nav--open .hp-nav__burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile menu overlay — hidden entirely above the mobile breakpoint (see @media
   max-width:768px below for the actual fixed-overlay styling). */
.hp-mobile-menu { display: none; }

/* =============================================================
   HERO
   ============================================================= */
.hp-hero {
    position: relative;
    /* Pull the section up behind the floating nav so sky fills from top of viewport */
    margin-top: -90px;
    padding-top: calc(90px + 8rem);
    padding-bottom: 4.5rem;
    /* Fill the initial viewport (sky-through-buildings) on load. +90px compensates
       for the negative margin-top above, which otherwise shifts the box's bottom
       edge 90px above the true viewport bottom, revealing the next section early. */
    min-height: calc(100vh + 90px);
    display: flex;
    align-items: center;
    /* Deeper, more saturated blue at the very top (shows through between the
       cloud layers) easing down to a pale blue-white — deliberately NOT pure
       white until the very end, so the tint carries all the way down to where
       .hp-hero__ground's rooftops sit instead of leaving a stark white gap
       between the cloud scene and the community silhouette below it. */
    background: linear-gradient(180deg,
        #3aa0e0 0%,
        #6cbcec 10%,
        #9bd2f3 22%,
        #c2e3f7 36%,
        #d8ecf8 52%,
        #e8f3fa 70%,
        #f2f8fc 86%,
        #f9fbfd 100%);
    overflow: hidden;
}

/* Sky + cloud layer sits behind content. Height is capped with clamp() rather
   than tied to width (aspect-ratio) or the hero's own height (inset:0) — both
   of those blow up badly: aspect-ratio made the band 630px+ tall on a wide
   desktop window, inset:0 made it zoom-distort on a tall stacked mobile hero.
   A vw-based clamp scales gently with the viewport but never runs away. */
.hp-hero__sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Band extends to page-y ≈ (height - 90) below the viewport top edge, since
       .hp-hero has margin-top:-90px pulling its box 90px above the screen.
       The slice scale factor is max(width/1440, height/480) — on a narrow mobile
       width that's height-driven and SMALLER than desktop's width-driven scale,
       which makes the 90px clip threshold (90/scale, in viewBox units) LARGER on
       mobile than desktop. A 220px minimum was too short: it clipped the two
       farthest cloud layers entirely on narrow screens. 300px keeps the scale
       (and therefore the visible threshold) high enough for all 4 layers. */
    height: clamp(300px, 32vw, 420px);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.hp-hero__clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* No object-fit here on purpose — it overrides the SVG's own
       preserveAspectRatio="none" attribute (set in the markup), which is what
       stretches the artwork to exactly fill this box with zero cropping. That's
       the whole point: a crop-based approach can always crop the clouds out of
       frame at some aspect ratio; a stretch-based one never can. */
}

/* Community scene — a small, muted hint of rooftops anchored to the very bottom
   edge of the hero. Deliberately short (same clamp() approach as the sky band
   above) so it can never grow tall enough to reach the headline/CTA buttons. */
.hp-hero__ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: clamp(56px, 8vw, 120px);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.hp-hero__ground svg { display: block; width: 100%; height: 100%; }
/* Building windows — unlit by default; JS (Index.cshtml) randomly promotes a subset to
   .hp-lit on every page load, so the "which windows are lit" pattern differs on refresh. */
.hp-window { fill: #6a93b8; fill-opacity: .5; }
.hp-window.hp-lit { fill: #F2C14E; fill-opacity: .9; }

/* Slow ambient drift so the sky feels alive without being distracting */
.hp-hero__cloud-layer { animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.hp-hero__cloud-layer--far  { animation: hp-cloud-drift-far 70s infinite ease-in-out; }
.hp-hero__cloud-layer--near { animation: hp-cloud-drift-near 46s infinite ease-in-out; }

@keyframes hp-cloud-drift-far {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(22px); }
}
@keyframes hp-cloud-drift-near {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-34px); }
}

@media (prefers-reduced-motion: reduce) {
    .hp-hero__cloud-layer { animation: none; }
}

/* Lift content above the sky layer */
.hp-hero > .hp-container {
    position: relative;
    z-index: 1;
}

.hp-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: 4rem;
}

.hp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--hp-primary-tint);
    color: var(--hp-primary);
    font-size: .8125rem;
    font-weight: 600;
    padding: .375rem .875rem;
    border-radius: 2rem;
    border: 1px solid rgba(19,58,147,.15);
    margin-bottom: 1.5rem;
}

.hp-hero h1 {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--hp-text);
    margin-bottom: 1.25rem;
}
.hp-hero h1 em { font-style: normal; color: var(--hp-primary); }

.hp-hero__desc {
    font-size: 1.125rem;
    color: var(--hp-muted);
    max-width: 500px;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hp-hero__checklist {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-bottom: 2.25rem;
}
.hp-hero__checklist li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--hp-text);
}

.hp-hero__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hp-accent);
    color: var(--hp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 700;
}

.hp-hero__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* visual */
.hp-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-hero__device {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid var(--hp-border);
    box-shadow: var(--hp-shadow-lg);
    overflow: hidden;
    width: 100%;
}

.hp-hero__device-bar {
    background: var(--hp-primary);
    padding: .5625rem 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.hp-hero__device-dot { width: 10px; height: 10px; border-radius: 50%; }
.hp-hero__device-dot--r { background: #ff5f57; }
.hp-hero__device-dot--y { background: var(--hp-accent); }
.hp-hero__device-dot--g { background: #28c840; }

.hp-hero__device-img { display: block; width: 100%; height: auto; }

/* floating badges */
.hp-hero__float {
    position: absolute;
    background: var(--hp-surface);
    border-radius: var(--hp-radius-sm);
    box-shadow: 0 4px 20px rgba(19,58,147,.15);
    padding: .625rem .875rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--hp-border);
    z-index: 2;
}
.hp-hero__float--tl { top: -1.25rem;    left: -1.75rem; }
.hp-hero__float--br { bottom: -1.25rem; right: -1.75rem; }

.hp-hero__float-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hp-accent);
    color: var(--hp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    flex-shrink: 0;
}
.hp-hero__float-label      { font-weight: 700; font-size: .875rem; color: var(--hp-text); }
.hp-hero__float-label-sub  { font-size: .75rem; color: var(--hp-muted); font-weight: 400; }

/* =============================================================
   STATS STRIP
   ============================================================= */
.hp-stats {
    background: var(--hp-primary);
    padding-block: 3.5rem;
    color: #fff;
}

.hp-stats__grid {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.hp-stats__item { text-align: center; }

.hp-stats__num {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: .375rem;
    color: var(--hp-accent);
}

.hp-stats__label { font-size: .9375rem; opacity: .8; }

/* =============================================================
   PAIN CARDS  (dark background)
   ============================================================= */
.hp-pain {
    background: var(--hp-dark);
    padding-block: 5rem;
}

.hp-pain__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.hp-pain-card {
    background: var(--hp-dark-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--hp-radius);
    padding: 2rem 1.75rem;
    transition: transform .2s, border-color .2s;
}
.hp-pain-card:hover { transform: translateY(-4px); border-color: var(--hp-accent); }

.hp-pain-card__icon {
    width: 52px;
    height: 52px;
    border-radius: .75rem;
    background: rgba(242,193,78,.12);
    color: var(--hp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.hp-pain-card h3 {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .625rem;
}

.hp-pain-card p {
    font-size: .9375rem;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
}

/* =============================================================
   FEATURES GRID
   ============================================================= */
.hp-features { padding-block: 5rem; background: var(--hp-bg); }

.hp-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.hp-feature-card {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 2rem 1.75rem;
    transition: box-shadow .2s, transform .2s;
}
.hp-feature-card:hover { box-shadow: var(--hp-shadow); transform: translateY(-3px); }

.hp-feature-card__icon {
    width: 52px;
    height: 52px;
    border-radius: .75rem;
    background: var(--hp-primary-tint);
    color: var(--hp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    margin-bottom: 1.25rem;
}

.hp-feature-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--hp-text);
}

.hp-feature-card p {
    font-size: .9375rem;
    color: var(--hp-muted);
    line-height: 1.65;
}

/* =============================================================
   PLATFORM SHOWCASE  (two-column)
   ============================================================= */
.hp-showcase { padding-block: 5rem; }

.hp-showcase__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 5rem;
}

.hp-showcase__device {
    background: var(--hp-surface);
    border-radius: 1rem;
    border: 1px solid var(--hp-border);
    box-shadow: var(--hp-shadow-lg);
    overflow: hidden;
}

.hp-showcase__device-bar {
    background: var(--hp-primary);
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.hp-showcase__dot { width: 10px; height: 10px; border-radius: 50%; }
.hp-showcase__dot--r { background: #ff5f57; }
.hp-showcase__dot--y { background: var(--hp-accent); }
.hp-showcase__dot--g { background: #28c840; }

.hp-showcase__device-img { display: block; width: 100%; }

.hp-showcase__benefits {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.hp-showcase__benefit { display: flex; gap: 1rem; align-items: flex-start; }

.hp-showcase__benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: .625rem;
    background: var(--hp-primary-tint);
    color: var(--hp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.hp-showcase__benefit h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--hp-text);
}

.hp-showcase__benefit p {
    font-size: .9375rem;
    color: var(--hp-muted);
    line-height: 1.6;
}

/* =============================================================
   HOW IT WORKS
   ============================================================= */
.hp-how { padding-block: 5rem; background: var(--hp-bg); }

.hp-how__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 3.5rem;
    position: relative;
}

.hp-how__steps::before {
    content: '';
    position: absolute;
    top: 27px;
    left: calc(12.5% + 1rem);
    right: calc(12.5% + 1rem);
    height: 2px;
    background: linear-gradient(90deg, var(--hp-accent), rgba(242,193,78,.15));
    z-index: 0;
}

.hp-how__step { text-align: center; padding: 0 .75rem; position: relative; z-index: 1; }

.hp-how__step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--hp-primary);
    color: var(--hp-accent);
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 1.375rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    border: 3px solid var(--hp-bg);
    box-shadow: 0 0 0 4px var(--hp-primary-tint);
}

.hp-how__step h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--hp-text);
}

.hp-how__step p {
    font-size: .9375rem;
    color: var(--hp-muted);
    line-height: 1.65;
}

/* =============================================================
   PRICING
   ============================================================= */
.hp-pricing { padding-block: 5rem; }

.hp-pricing__grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 3.5rem;
}

.hp-pricing-card {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 2.5rem 2rem;
    width: 320px;
    transition: box-shadow .2s, transform .2s;
}
.hp-pricing-card:hover { box-shadow: var(--hp-shadow); transform: translateY(-3px); }

.hp-pricing-card--featured {
    background: var(--hp-primary);
    border-color: var(--hp-primary);
    color: #fff;
    transform: scale(1.03);
    box-shadow: var(--hp-shadow-lg);
}
.hp-pricing-card--featured:hover { transform: scale(1.03) translateY(-3px); }

.hp-pricing-card__badge {
    display: inline-block;
    background: var(--hp-accent);
    color: var(--hp-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .25rem .75rem;
    border-radius: 2rem;
    margin-bottom: 1.5rem;
}

.hp-pricing-card__plan {
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hp-secondary);
    margin-bottom: .5rem;
}
.hp-pricing-card--featured .hp-pricing-card__plan { color: rgba(255,255,255,.7); }

.hp-pricing-card__price {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 2.75rem;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--hp-text);
    margin-bottom: .25rem;
}
.hp-pricing-card--featured .hp-pricing-card__price { color: var(--hp-accent); }

.hp-pricing-card__period {
    font-size: .875rem;
    color: var(--hp-muted);
    margin-bottom: 1.75rem;
}
.hp-pricing-card--featured .hp-pricing-card__period { color: rgba(255,255,255,.6); }

.hp-pricing-card__features {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 2rem;
    border-top: 1px solid var(--hp-border);
    padding-top: 1.5rem;
}
.hp-pricing-card--featured .hp-pricing-card__features { border-color: rgba(255,255,255,.15); }

.hp-pricing-card__feature {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9375rem;
    color: var(--hp-text);
}
.hp-pricing-card--featured .hp-pricing-card__feature { color: rgba(255,255,255,.9); }

.hp-pricing-card__check { color: var(--hp-secondary); flex-shrink: 0; }
.hp-pricing-card--featured .hp-pricing-card__check { color: var(--hp-accent); }

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.hp-testimonials { padding-block: 5rem; background: var(--hp-bg); }

.hp-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.hp-testimonial-card {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: box-shadow .2s, transform .2s;
}
.hp-testimonial-card:hover { box-shadow: var(--hp-shadow); transform: translateY(-2px); }

.hp-testimonial-card__stars {
    display: flex;
    gap: .2rem;
    color: var(--hp-accent);
    font-size: 1rem;
}

.hp-testimonial-card__quote {
    font-size: .9375rem;
    color: var(--hp-muted);
    line-height: 1.7;
    font-style: italic;
    flex: 1;
}

.hp-testimonial-card__author { display: flex; align-items: center; gap: .75rem; }

.hp-testimonial-card__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hp-primary-tint);
    color: var(--hp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9375rem;
    flex-shrink: 0;
}

.hp-testimonial-card__name { font-weight: 700; font-size: .9375rem; color: var(--hp-text); }
.hp-testimonial-card__role { font-size: .8125rem; color: var(--hp-muted); }

/* =============================================================
   CTA BAND
   ============================================================= */
.hp-cta-band {
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-secondary) 100%);
    padding-block: 5rem;
    text-align: center;
    color: #fff;
}

.hp-cta-band h2 {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.625rem);
    font-weight: 900;
    letter-spacing: -.025em;
    margin-bottom: 1rem;
}

.hp-cta-band p {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.8);
    max-width: 500px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

.hp-cta-band__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* =============================================================
   FOOTER
   ============================================================= */
.hp-footer {
    background: var(--hp-dark);
    color: rgba(255,255,255,.6);
    padding-block: 4.5rem 2.5rem;
}

.hp-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.hp-footer__logo-img {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: 1.25rem;
}

.hp-footer__tagline {
    font-size: .9375rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,.5);
}

.hp-footer__col-title {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    margin-bottom: 1rem;
}

.hp-footer__col-links { display: flex; flex-direction: column; gap: .625rem; }
.hp-footer__col-links a {
    font-size: .9375rem;
    color: rgba(255,255,255,.55);
    transition: color .15s;
}
.hp-footer__col-links a:hover { color: var(--hp-accent); }

.hp-footer__contact-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9375rem;
    color: rgba(255,255,255,.55);
    margin-bottom: .75rem;
}
.hp-footer__contact-item i { color: var(--hp-accent); flex-shrink: 0; }
.hp-footer__contact-item a { color: rgba(255,255,255,.55); transition: color .15s; }
.hp-footer__contact-item a:hover { color: var(--hp-accent); }

.hp-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.hp-footer__copy { font-size: .875rem; color: rgba(255,255,255,.4); }

.hp-footer__legal { display: flex; gap: 1.5rem; }
.hp-footer__legal a {
    font-size: .875rem;
    color: rgba(255,255,255,.4);
    transition: color .15s;
}
.hp-footer__legal a:hover { color: var(--hp-accent); }

/* =============================================================
   HONEYPOT  (visually hidden but rendered — display:none is skipped by bots)
   ============================================================= */
.hp-honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* =============================================================
   COOKIE BANNER
   ============================================================= */
.hp-cookie {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: rgba(10,23,66,.97);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,.09);
    padding-block: 1.125rem;
    transform: translateY(100%);
    transition: transform .42s cubic-bezier(.16,1,.3,1);
}
.hp-cookie--visible  { transform: translateY(0); }
.hp-cookie--hiding   { transform: translateY(100%); }

.hp-cookie__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.hp-cookie__text {
    flex: 1;
    min-width: 220px;
    font-size: .9375rem;
    color: rgba(255,255,255,.7);
    line-height: 1.5;
}
.hp-cookie__text strong {
    color: #fff;
    font-weight: 700;
    margin-right: .4rem;
}

.hp-cookie__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.hp-cookie__link {
    font-size: .875rem;
    color: rgba(255,255,255,.45);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.2);
    transition: color .15s;
}
.hp-cookie__link:hover { color: var(--hp-accent); }

.hp-cookie__btn {
    font-size: .875rem;
    padding: .5rem 1.25rem;
}

/* =============================================================
   LOGIN OVERLAY
   ============================================================= */
/* Above the cookie banner (z-index 9000) — sign-in should win if both are open. */
/* No opacity/transition here, and never add will-change: both promote this to its own
   compositing layer, which isolates backdrop-filter's view on the child below to only what's
   painted inside this element's own subtree (i.e. nearly nothing) — verified: an opacity
   transition on this element left the backdrop completely unblurred for the transition's
   full duration, only "snapping" to blurred once the transition finished and the layer was
   torn down. pointer-events is a discrete (non-animated) toggle, so it's safe here. */
.hp-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: none;
}
.hp-login-overlay.hp-open { pointer-events: auto; }

/* Opacity fade lives on the backdrop itself (not the ancestor above) — see the comment on
   .hp-login-overlay for why. The opening-lag issue is otherwise handled by deferring the
   iframe's src assignment (see openOverlay in Index.cshtml) so it doesn't compete with this
   transition for the main thread. */
.hp-login-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,23,66,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .25s ease;
}
.hp-login-overlay.hp-open .hp-login-overlay__backdrop { opacity: 1; }

/* No background/shadow/radius of its own — Login.cshtml supplies exactly one white card
   (it drops its own grey page-background when it detects it's embedded, see its
   html.hp-embedded rules) and that card's own styling is the only "panel" chrome the user
   sees. Two nested boxes here would just double up the framing. */
/* height starts at a sane default for the spinner phase, then main.js resizes it to the
   iframe's actual content height on load (and on any client-side change, e.g. validation
   errors appearing) — see fitPanelToContent() — so the modal grows to fit instead of the
   iframe ever getting its own internal scrollbar. max-height is still the hard cap for
   very short viewports. */
.hp-login-overlay__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 424px;
    height: 540px;
    max-height: 90vh;
    overflow: visible;
    transform: translateY(16px) scale(.97);
    opacity: 0;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease, height .2s ease;
}
.hp-login-overlay.hp-open .hp-login-overlay__panel { transform: translateY(0) scale(1); opacity: 1; }

.hp-login-overlay__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* [hidden] alone loses to the plain class rule above: both have specificity (0,1,0), and an
   author rule always wins a same-specificity tie against the browser's built-in [hidden] {
   display:none } rule — so frame.hidden = true from JS was silently having no visual effect
   at all. Adding the attribute to the selector raises specificity to (0,2,0) so this actually
   wins. */
.hp-login-overlay__frame[hidden] {
    display: none;
}

.hp-login-overlay__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--hp-muted);
    font-size: .9rem;
    cursor: pointer;
    transition: color .15s;
}
/* Same fix as .hp-login-overlay__frame[hidden] above: this element's own display:flex has the
   same specificity as the browser's built-in [hidden] { display:none } rule and would win the
   tie as an author rule, silently no-opping closeBtn.hidden = true/false from JS. */
.hp-login-overlay__close[hidden] {
    display: none;
}
.hp-login-overlay__close:hover { color: #ef4444; }
.hp-login-overlay__close:active { color: #dc2626; }
.hp-login-overlay__close:focus-visible {
    outline: 2px solid var(--hp-primary);
    outline-offset: 2px;
}

.hp-login-overlay__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* [hidden] alone would lose to the plain class rule above (both specificity 0,1,0, and an
   author rule always wins a same-specificity tie against the browser's built-in [hidden] {
   display:none } rule) — see the identical fix on .hp-login-overlay__frame and
   .hp-login-overlay__close. Adding the attribute to the selector raises specificity to
   (0,2,0) so this actually wins. */
.hp-login-overlay__loading[hidden] {
    display: none;
}

.hp-login-overlay__loading-logo {
    width: 130px;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Positioned absolutely within the (fixed-size, centered) .hp-login-overlay__loading wrapper
   so it forms a ring around the logo rather than sitting below it — both share the same
   center point, with the ring's diameter larger than the logo so there's a visible gap. */
/* A conic-gradient + radial-gradient mask (rather than a flat border-top-color trick) so the
   ring actually sweeps through the same two blues as the logo's own gradient (#1a73e8 →
   #4dabf7), instead of the site's darker --hp-primary. The mask punches out everything except
   a thin ring at the edge, since conic-gradient alone would fill a solid disc. */
.hp-login-overlay__spinner-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 190px;
    height: 190px;
    margin: -95px 0 0 -95px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(26,115,232,0) 0deg, #1a73e8 90deg, #4dabf7 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: hp-login-spin .7s linear infinite;
}
@keyframes hp-login-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .hp-cookie__inner    { gap: 1rem; }
    .hp-cookie__actions  { width: 100%; }
    .hp-cookie__btn      { flex: 1; justify-content: center; }
}

/* =============================================================
   CONTACT
   ============================================================= */
.hp-contact { background: var(--hp-dark); padding-block: 5rem; }

.hp-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    align-items: flex-start;
}

.hp-contact__intro { padding-top: .5rem; }

.hp-contact__intro h2 {
    font-family: 'Nunito','Inter',sans-serif;
    font-size: clamp(1.75rem,3.5vw,2.375rem);
    font-weight: 900;
    letter-spacing: -.025em;
    color: #fff;
    margin-bottom: 1rem;
}

.hp-contact__intro p {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hp-contact__detail {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9375rem;
    color: rgba(255,255,255,.55);
    margin-bottom: .875rem;
}
.hp-contact__detail i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(242,193,78,.12);
    color: var(--hp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.hp-contact__form-card {
    background: var(--hp-dark-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--hp-radius);
    padding: 2.5rem;
}

.hp-contact__field { margin-bottom: 1.25rem; }

.hp-contact__label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    margin-bottom: .4rem;
}

.hp-contact__input,
.hp-contact__textarea {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--hp-radius-sm);
    color: #fff;
    font-family: inherit;
    font-size: .9375rem;
    padding: .7rem 1rem;
    transition: border-color .2s, background .2s;
    outline: none;
}
.hp-contact__input::placeholder,
.hp-contact__textarea::placeholder { color: rgba(255,255,255,.28); }
.hp-contact__input:focus,
.hp-contact__textarea:focus {
    border-color: var(--hp-secondary);
    background: rgba(255,255,255,.09);
}

.hp-contact__textarea { resize: vertical; min-height: 130px; }

.hp-contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hp-contact__submit { width: 100%; justify-content: center; margin-top: .5rem; }

.hp-contact__success { text-align: center; padding: 2.5rem 1rem; color: #fff; }
.hp-contact__success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(242,193,78,.12);
    color: var(--hp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
}
.hp-contact__success h3 { font-size: 1.375rem; font-weight: 700; margin-bottom: .5rem; }
.hp-contact__success p { font-size: .9375rem; color: rgba(255,255,255,.6); }

.hp-contact__val {
    font-size: .8125rem;
    color: #fc8181;
    margin-top: .3rem;
    display: block;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
    .hp-hero__inner { grid-template-columns: 1fr; text-align: center; }
    .hp-hero__desc  { margin-inline: auto; }
    .hp-hero__checklist { align-items: center; }
    .hp-hero__actions   { justify-content: center; }
    .hp-hero__visual    { max-width: 580px; margin-inline: auto; }
    .hp-hero__float--tl { top: -1rem; left: 0; }
    .hp-hero__float--br { bottom: -1rem; right: 0; }

    .hp-showcase__inner { grid-template-columns: 1fr; gap: 3rem; }

    .hp-contact__inner  { grid-template-columns: 1fr; gap: 2.5rem; }
    .hp-contact__row    { grid-template-columns: 1fr; }

    .hp-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

    .hp-how__steps::before { display: none; }
}

@media (max-width: 768px) {
    .hp-nav {
        width: calc(100% - 2rem);
        top: 0.75rem;
    }
    .hp-nav--scrolled {
        width: 100%;
        top: 0;
    }
    .hp-nav__links   { display: none; }
    .hp-nav__actions { display: none; }
    .hp-nav__burger  { display: flex; }

    /* Mobile menu overlay (separate element, see markup comment for why) — animated
       with opacity/transform instead of an abrupt display:none/flex jump. */
    .hp-mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 199;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px);
        transition: opacity .3s cubic-bezier(.16,1,.3,1),
                    transform .3s cubic-bezier(.16,1,.3,1),
                    visibility 0s linear .3s;
    }
    .hp-mobile-menu--open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .32s cubic-bezier(.16,1,.3,1) .04s,
                    transform .32s cubic-bezier(.16,1,.3,1) .04s,
                    visibility 0s linear 0s;
    }

    .hp-mobile-menu__links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        flex: 1;
        padding: 2rem 2rem 4rem;
        gap: 1.75rem;
    }
    .hp-mobile-menu__links a {
        font-size: 1.375rem;
        font-weight: 600;
        color: var(--hp-text);
        display: inline-block;
        transition: color .2s, transform .2s;
    }
    .hp-mobile-menu__links a:hover {
        color: var(--hp-primary);
        transform: translateX(6px);
    }

    .hp-mobile-menu__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0 1.5rem 2.5rem;
        gap: .75rem;
    }

    .hp-section  { padding-block: 3.5rem; }
    /* Top padding must clear the -90px negative margin above PLUS the floating
       nav pill's own height/offset, or content overlaps/hides behind the nav. */
    .hp-hero     { padding-top: calc(90px + 6rem); padding-bottom: 3rem; min-height: auto; }
    .hp-stats__grid { gap: 2rem; }

    .hp-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .hp-footer__bottom { flex-direction: column; text-align: center; }

    .hp-pricing-card--featured { transform: none; }
    .hp-pricing-card--featured:hover { transform: translateY(-3px); }
    .hp-pricing__grid { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
    .hp-hero h1         { font-size: 2rem; }
    .hp-hero__float     { display: none; }
    .hp-how__steps      { grid-template-columns: 1fr; }
}