/* =============================================================================
   NordicCast — Main stylesheet
   -----------------------------------------------------------------------------
   Table of contents
     01. Design tokens (dark + light themes)
     02. Base & typography
     03. Layout primitives & section furniture
     04. Buttons
     05. Badges, pills, chips
     06. Preloader, scroll progress, skip link
     07. Navbar
     08. Hero
     09. Logo marquee
     10. Feature cards
     11. Why-us / benefits / steps
     12. Statistics counters
     13. Testimonials slider
     14. Pricing
     15. FAQ accordion
     16. Contact & forms
     17. About / timeline / team
     18. Legal pages
     19. Error pages
     20. Footer
     21. Floating UI (back-to-top, cookie, popup)
     22. Animations & scroll reveal
     23. Responsive refinements
     24. Accessibility & print
   ============================================================================ */

/* =============================================================================
   01. DESIGN TOKENS
   ============================================================================ */

:root {
    /* Brand ------------------------------------------------------------
       The aurora ramp: cyan -> violet -> magenta on near-black. These are the
       same three stops the key-art generator paints with, so the artwork and
       the interface belong to one another. */
    --nc-cyan:    #22d3ee;
    --nc-violet:  #7c5cff;
    --nc-magenta: #ff4d8d;

    --nc-amber:  #fbbf24;   /* star ratings */
    --nc-rose:   #fb7185;   /* form errors */
    --nc-live:   #ff3b30;   /* the LIVE dot, and only that */
    --nc-gold:   #f5c451;   /* the award seal, and only that */

    /* Semantic aliases used throughout the stylesheet. */
    --nc-mint: var(--nc-cyan);
    --nc-blue: var(--nc-violet);

    --nc-gradient:      linear-gradient(120deg, #22d3ee 0%, #7c5cff 52%, #ff4d8d 100%);
    --nc-gradient-soft: linear-gradient(120deg, rgba(34,211,238,.16), rgba(124,92,255,.16) 50%, rgba(255,77,141,.16));

    /* Typography ------------------------------------------------------- */
    --nc-font-display: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --nc-font-ui:      'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nc-font-mono:    'SFMono-Regular', ui-monospace, Consolas, 'Liberation Mono', Menlo, monospace;

    /* Fluid type scale -------------------------------------------------- */
    --nc-fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);
    --nc-fs-h1:      clamp(2.1rem, 1.35rem + 3.1vw, 3.5rem);
    --nc-fs-h2:      clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
    --nc-fs-h3:      clamp(1.25rem, 1.08rem + 0.7vw, 1.6rem);
    --nc-fs-lead:    clamp(1.02rem, 0.97rem + 0.3vw, 1.19rem);

    /* Radii ------------------------------------------------------------- */
    --nc-r-xs:   8px;
    --nc-r-sm:   12px;
    --nc-r:      18px;
    --nc-r-lg:   24px;
    --nc-r-xl:   32px;
    --nc-r-pill: 999px;

    /* Spacing ----------------------------------------------------------- */
    --nc-section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
    --nc-gutter:    clamp(1rem, 0.6rem + 1.4vw, 1.75rem);

    /* Motion ------------------------------------------------------------ */
    --nc-ease:        cubic-bezier(.22, 1, .36, 1);
    --nc-ease-soft:   cubic-bezier(.33, .8, .25, 1);
    --nc-dur:         .38s;
    --nc-dur-slow:    .7s;

    /* Layout ------------------------------------------------------------ */
    --nc-header-h: 76px;
    --nc-maxw:     1240px;
}

/* --- Dark theme (default) ------------------------------------------------ */
[data-bs-theme="dark"] {
    --nc-bg:            #070910;
    --nc-bg-alt:        #0a0e17;
    --nc-bg-elevated:   #0e131d;
    --nc-surface:       rgba(255, 255, 255, .038);
    --nc-surface-hover: rgba(255, 255, 255, .062);
    --nc-surface-solid: #11161f;
    --nc-border:        rgba(255, 255, 255, .085);
    --nc-border-strong: rgba(255, 255, 255, .17);
    --nc-heading:       #ffffff;
    --nc-text:          #dde3ee;
    --nc-muted:         #93a0b5;
    --nc-faint:         #64718a;

    --nc-glass-bg:     rgba(11, 15, 23, .62);
    --nc-glass-border: rgba(255, 255, 255, .1);
    --nc-nav-bg:       rgba(7, 9, 16, .72);

    --nc-shadow-sm: 0 2px 8px rgba(0, 0, 0, .34);
    --nc-shadow:    0 18px 42px -18px rgba(0, 0, 0, .72);
    --nc-shadow-lg: 0 40px 90px -32px rgba(0, 0, 0, .85);
    --nc-glow:      0 0 0 1px rgba(124, 92, 255, .28), 0 22px 60px -24px rgba(124, 92, 255, .5);

    --nc-grid-line: rgba(255, 255, 255, .045);
    --nc-noise-opacity: .035;

    /* Bootstrap bridge */
    --bs-body-bg:      #070910;
    --bs-body-color:   #dde3ee;
    --bs-border-color: rgba(255, 255, 255, .1);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #93a0b5;
}

/* --- Light theme --------------------------------------------------------- */
[data-bs-theme="light"] {
    --nc-bg:            #f4f6fb;
    --nc-bg-alt:        #ffffff;
    --nc-bg-elevated:   #ffffff;
    --nc-surface:       rgba(255, 255, 255, .78);
    --nc-surface-hover: #ffffff;
    --nc-surface-solid: #ffffff;
    --nc-border:        rgba(13, 18, 28, .1);
    --nc-border-strong: rgba(13, 18, 28, .2);
    --nc-heading:       #0a0e16;
    --nc-text:          #313d4f;
    --nc-muted:         #5d6b7f;
    --nc-faint:         #8494a8;

    --nc-glass-bg:     rgba(255, 255, 255, .74);
    --nc-glass-border: rgba(13, 18, 28, .08);
    --nc-nav-bg:       rgba(255, 255, 255, .82);

    --nc-shadow-sm: 0 2px 8px rgba(15, 27, 45, .07);
    --nc-shadow:    0 18px 42px -20px rgba(15, 27, 45, .22);
    --nc-shadow-lg: 0 40px 90px -34px rgba(15, 27, 45, .3);
    --nc-glow:      0 0 0 1px rgba(124, 92, 255, .3), 0 22px 55px -26px rgba(124, 92, 255, .45);

    --nc-grid-line: rgba(13, 18, 28, .05);
    --nc-noise-opacity: .02;

    --bs-body-bg:      #f4f6fb;
    --bs-body-color:   #313d4f;
    --bs-border-color: rgba(13, 18, 28, .12);
    --bs-emphasis-color: #0a0e16;
    --bs-secondary-color: #5d6b7f;
}

/* =============================================================================
   02. BASE & TYPOGRAPHY
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nc-header-h) + 20px);
    -webkit-text-size-adjust: 100%;

    /*
     * Nothing may ever scroll sideways.
     *
     * `clip` rather than `hidden`: hidden would turn <html> into a scroll
     * container and break the sticky navbar, whereas clip just discards the
     * overflow. The individual causes (entrance transforms that start off-screen,
     * decorative aurora layers, negative slider margins) are all constrained
     * where they occur too — this is the last line of defence, not the only one.
     */
    overflow-x: clip;
}

body {
    margin: 0;
    background-color: var(--nc-bg);
    color: var(--nc-text);
    font-family: var(--nc-font-body);
    font-size: 1rem;
    line-height: 1.7;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color .4s var(--nc-ease), color .4s var(--nc-ease);
}

/* Ambient aurora glow behind the whole page */
body::before {
    content: '';
    position: fixed;
    inset: -30% -10% auto -10%;
    height: 90vh;
    background:
        radial-gradient(48% 46% at 22% 8%, rgba(34, 211, 238, .13), transparent 62%),
        radial-gradient(45% 44% at 78% 4%, rgba(255, 77, 141, .15), transparent 62%),
        radial-gradient(60% 50% at 50% 0%, rgba(124, 92, 255, .16), transparent 68%);
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
}

[data-bs-theme="light"] body::before { opacity: .62; }

/* Fine grid texture */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--nc-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--nc-grid-line) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(78% 60% at 50% 0%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(78% 60% at 50% 0%, #000 0%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

/* Everything real sits above the ambient layers */
.nc-header,
main,
.nc-footer,
.nc-back-to-top,
.nc-cookie,
.nc-popup,
.nc-progress { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nc-font-display);
    color: var(--nc-heading);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.028em;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: var(--nc-fs-h1); }
h2 { font-size: var(--nc-fs-h2); }
h3 { font-size: var(--nc-fs-h3); font-weight: 700; }
h4 { font-size: 1.14rem; font-weight: 700; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--nc-blue);
    text-decoration: none;
    transition: color var(--nc-dur) var(--nc-ease), opacity var(--nc-dur) var(--nc-ease);
}
a:hover { color: var(--nc-mint); }

img, svg, video { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }

::selection { background: rgba(124, 92, 255, .32); color: #fff; }

/* Custom scrollbar (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--nc-border-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--nc-border-strong);
    border: 3px solid transparent;
    border-radius: var(--nc-r-pill);
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--nc-blue); background-clip: content-box; }

/* Focus ring — visible for keyboards, invisible for mouse users */
:focus-visible {
    outline: 2px solid var(--nc-blue);
    outline-offset: 3px;
    border-radius: 6px;
}

/* =============================================================================
   03. LAYOUT PRIMITIVES & SECTION FURNITURE
   ============================================================================ */

/*
 * The container's side padding must never be smaller than half of the widest
 * row gutter in use (`g-5` = 3rem), otherwise Bootstrap's negative row margins
 * bleed past the viewport edge on narrow screens.
 */
.container { max-width: var(--nc-maxw); padding-inline: max(var(--nc-gutter), 1.5rem); }

.nc-section { padding-block: var(--nc-section-y); position: relative; }
.nc-section--tight { padding-block: calc(var(--nc-section-y) * .62); }
.nc-section--alt { background: var(--nc-bg-alt); }

/* Hairline divider between sections */
.nc-section--line::before {
    content: '';
    position: absolute;
    inset-inline: 8%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nc-border-strong), transparent);
}

.nc-section-head {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
}
.nc-section-head--start { margin-inline: 0; text-align: left; }

.nc-section-head__title { margin-bottom: .7rem; }

.nc-section-head__text {
    color: var(--nc-muted);
    font-size: var(--nc-fs-lead);
    margin-bottom: 0;
    text-wrap: pretty;
}

.nc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--nc-font-ui);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nc-mint);
    margin-bottom: 1rem;
}
.nc-eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--nc-gradient);
}
.nc-section-head:not(.nc-section-head--start) .nc-eyebrow::after {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--nc-gradient);
}

.nc-gradient-text {
    background: var(--nc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Keeps descenders from being clipped in Safari */
    padding-bottom: .06em;
}

.nc-lead { font-size: var(--nc-fs-lead); color: var(--nc-muted); }

/* Glass surface used by nearly every card in the design */
.nc-glass {
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-radius: var(--nc-r-lg);
}

/* Generic card */
.nc-card {
    position: relative;
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-r-lg);
    padding: clamp(1.4rem, 1.1rem + .9vw, 2rem);
    height: 100%;
    overflow: hidden;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition:
        transform var(--nc-dur) var(--nc-ease),
        border-color var(--nc-dur) var(--nc-ease),
        background-color var(--nc-dur) var(--nc-ease),
        box-shadow var(--nc-dur) var(--nc-ease);
}

/* Aurora sheen that fades in on hover */
.nc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--nc-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--nc-dur) var(--nc-ease);
    pointer-events: none;
}

/* Cursor-tracked spotlight (coordinates supplied by main.js) */
.nc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        420px circle at var(--mx, 50%) var(--my, 0%),
        rgba(124, 92, 255, .13),
        transparent 62%
    );
    opacity: 0;
    transition: opacity var(--nc-dur) var(--nc-ease);
    pointer-events: none;
}

.nc-card:hover {
    transform: translateY(-6px);
    background: var(--nc-surface-hover);
    box-shadow: var(--nc-shadow);
}
.nc-card:hover::before,
.nc-card:hover::after { opacity: 1; }

.nc-card__body { position: relative; z-index: 2; }

/* Icon tile */
.nc-icon-tile {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--nc-r-sm);
    background: var(--nc-gradient-soft);
    border: 1px solid var(--nc-border);
    color: var(--nc-mint);
    font-size: 1.4rem;
    margin-bottom: 1.15rem;
    transition: transform var(--nc-dur) var(--nc-ease), color var(--nc-dur) var(--nc-ease);
}
.nc-card:hover .nc-icon-tile {
    transform: translateY(-2px) rotate(-5deg) scale(1.06);
    color: var(--nc-blue);
}
.nc-icon-tile--lg { width: 62px; height: 62px; font-size: 1.65rem; }

/* =============================================================================
   04. BUTTONS
   ============================================================================ */

.btn,
.nc-btn-primary,
.nc-btn-outline,
.nc-btn-ghost {
    --bs-btn-focus-box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    padding: .78rem 1.4rem;
    border-radius: var(--nc-r-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .24s var(--nc-ease),
        box-shadow .3s var(--nc-ease),
        background-color .3s var(--nc-ease),
        border-color .3s var(--nc-ease),
        color .3s var(--nc-ease);
}

.btn i { font-size: 1.02em; line-height: 1; }

.nc-btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.nc-btn-sm { padding: .55rem 1.05rem; font-size: .86rem; }

/* Primary — gradient fill with a sliding sheen */
.nc-btn-primary {
    background: var(--nc-gradient);
    background-size: 190% 100%;
    background-position: 0% 50%;
    color: #05121f;
    box-shadow: 0 10px 26px -12px rgba(124, 92, 255, .8);
    transition: background-position .55s var(--nc-ease), transform .24s var(--nc-ease), box-shadow .3s var(--nc-ease);
}
.nc-btn-primary:hover,
.nc-btn-primary:focus-visible {
    color: #05121f;
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -14px rgba(124, 92, 255, .95);
}
.nc-btn-primary:active { transform: translateY(0) scale(.985); }

/* Travelling highlight */
.nc-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-18deg);
    transition: left .65s var(--nc-ease);
    z-index: -1;
}
.nc-btn-primary:hover::after { left: 115%; }

/* Outline */
.nc-btn-outline {
    background: transparent;
    color: var(--nc-heading);
    border-color: var(--nc-border-strong);
}
.nc-btn-outline:hover,
.nc-btn-outline:focus-visible {
    color: var(--nc-heading);
    border-color: var(--nc-blue);
    background: rgba(124, 92, 255, .1);
    transform: translateY(-2px);
}

/* Ghost */
.nc-btn-ghost {
    background: var(--nc-surface);
    color: var(--nc-text);
    border-color: var(--nc-border);
}
.nc-btn-ghost:hover,
.nc-btn-ghost:focus-visible {
    color: var(--nc-heading);
    background: var(--nc-surface-hover);
    border-color: var(--nc-border-strong);
}

/* Icon-only button */
.nc-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--nc-r-pill);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    color: var(--nc-text);
    font-size: 1.05rem;
    cursor: pointer;
    transition: all var(--nc-dur) var(--nc-ease);
}
.nc-icon-btn:hover {
    color: var(--nc-heading);
    border-color: var(--nc-border-strong);
    background: var(--nc-surface-hover);
    transform: translateY(-2px) rotate(12deg);
}

/* Theme toggle shows exactly one glyph per theme */
[data-bs-theme="dark"]  .nc-icon-btn__light,
[data-bs-theme="light"] .nc-icon-btn__dark { display: none; }

/* Inline button spinner */
.nc-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: nc-spin .7s linear infinite;
}
.is-loading .nc-spinner,
.btn.is-loading .nc-spinner { display: inline-block; }
.btn.is-loading { pointer-events: none; opacity: .82; }
.btn.is-loading .nc-btn__label { opacity: .6; }

@keyframes nc-spin { to { transform: rotate(360deg); } }

/* Disabled */
.btn:disabled,
.btn.disabled { opacity: .55; pointer-events: none; }

/* =============================================================================
   05. BADGES, PILLS, CHIPS
   ============================================================================ */

.nc-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .9rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-ui);
    font-size: .8rem;
    font-weight: 600;
    color: var(--nc-text);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.nc-badge i { color: var(--nc-mint); font-size: .95em; }
.nc-badge--accent { border-color: rgba(124, 92, 255, .38); background: rgba(124, 92, 255, .11); }

.nc-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .26rem .68rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nc-muted);
}

/* Live "pulse" dot */
.nc-pulse {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nc-mint);
    flex: 0 0 7px;
}
.nc-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--nc-mint);
    animation: nc-ping 2s var(--nc-ease) infinite;
}
@keyframes nc-ping {
    0%   { transform: scale(1);   opacity: .8; }
    75%, 100% { transform: scale(3.2); opacity: 0; }
}

/* =============================================================================
   06. PRELOADER, SCROLL PROGRESS, SKIP LINK
   ============================================================================ */

.nc-skip-link {
    position: fixed;
    top: -80px;
    left: 16px;
    z-index: 2000;
    padding: .7rem 1.2rem;
    background: var(--nc-blue);
    color: #05121f;
    font-weight: 700;
    border-radius: var(--nc-r-sm);
    transition: top .25s var(--nc-ease);
}
.nc-skip-link:focus { top: 16px; color: #05121f; }

.nc-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.4rem;
    background: var(--nc-bg);
    transition: opacity .55s var(--nc-ease), visibility .55s var(--nc-ease);
}
.nc-preloader.is-done { opacity: 0; visibility: hidden; }

.nc-preloader__mark {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 46px;
}
.nc-preloader__mark .nc-bar {
    width: 6px;
    border-radius: var(--nc-r-pill);
    background: var(--nc-gradient);
    animation: nc-equalize 1.05s var(--nc-ease-soft) infinite;
}
.nc-preloader__mark .nc-bar:nth-child(1) { height: 16px; animation-delay: 0s; }
.nc-preloader__mark .nc-bar:nth-child(2) { height: 30px; animation-delay: .12s; }
.nc-preloader__mark .nc-bar:nth-child(3) { height: 46px; animation-delay: .24s; }
.nc-preloader__mark .nc-bar:nth-child(4) { height: 30px; animation-delay: .36s; }
.nc-preloader__mark .nc-bar:nth-child(5) { height: 16px; animation-delay: .48s; }

@keyframes nc-equalize {
    0%, 100% { transform: scaleY(.35); opacity: .55; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

.nc-preloader__text {
    margin: 0;
    font-family: var(--nc-font-display);
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--nc-muted);
}

/* Hide page content until the preloader is dismissed */
html.nc-loading body { overflow: hidden; }

.nc-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 1080;
    pointer-events: none;
}
.nc-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--nc-gradient);
    box-shadow: 0 0 14px rgba(124, 92, 255, .8);
    transition: width .1s linear;
}

/* =============================================================================
   07. NAVBAR
   ============================================================================ */

.nc-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.nc-navbar {
    padding-block: .85rem;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .35s var(--nc-ease), border-color .35s var(--nc-ease),
                padding .35s var(--nc-ease), box-shadow .35s var(--nc-ease);
}

/* .is-stuck is toggled by main.js once the page scrolls */
.nc-header.is-stuck .nc-navbar {
    padding-block: .55rem;
    background: var(--nc-nav-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: var(--nc-border);
    box-shadow: var(--nc-shadow-sm);
}

.nc-navbar .container { display: flex; align-items: center; gap: 1rem; }

.nc-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--nc-font-display);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.03em;
    color: var(--nc-heading);
    padding: 0;
}
.nc-brand:hover { color: var(--nc-heading); }
.nc-brand__mark {
    display: inline-grid;
    place-items: center;
    transition: transform .5s var(--nc-ease);
}
.nc-brand:hover .nc-brand__mark { transform: rotate(-8deg) scale(1.07); }

.nc-nav { gap: .12rem; }

.nc-nav .nav-link {
    position: relative;
    font-family: var(--nc-font-ui);
    font-weight: 600;
    font-size: .94rem;
    color: var(--nc-muted);
    padding: .5rem .95rem;
    border-radius: var(--nc-r-pill);
    transition: color var(--nc-dur) var(--nc-ease), background-color var(--nc-dur) var(--nc-ease);
}
.nc-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: .18rem;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--nc-gradient);
    transform: translateX(-50%);
    transition: width .32s var(--nc-ease);
}
.nc-nav .nav-link:hover { color: var(--nc-heading); }
.nc-nav .nav-link:hover::after { width: 42%; }
.nc-nav .nav-link.active { color: var(--nc-heading); }
.nc-nav .nav-link.active::after { width: 42%; }

.nc-nav-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
}

/* --- Language switcher --------------------------------------------------- */

.nc-langsel__btn {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .5rem .7rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    color: var(--nc-text);
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: all var(--nc-dur) var(--nc-ease);
}
.nc-langsel__btn:hover {
    color: var(--nc-heading);
    background: var(--nc-surface-hover);
    border-color: var(--nc-border-strong);
}
.nc-langsel__btn .bi-chevron-down {
    font-size: .62rem;
    opacity: .6;
    transition: transform var(--nc-dur) var(--nc-ease);
}
.nc-langsel__btn[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

.nc-langsel__code { letter-spacing: .04em; }

.nc-langsel__menu {
    background: var(--nc-bg-elevated);
    border: 1px solid var(--nc-border-strong);
    border-radius: var(--nc-r);
    box-shadow: var(--nc-shadow-lg);
    padding: .4rem;
    min-width: 200px;
}
.nc-langsel__menu .dropdown-header {
    color: var(--nc-faint);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .5rem .7rem .35rem;
}
.nc-langsel__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: var(--nc-r-xs);
    color: var(--nc-text);
    font-family: var(--nc-font-ui);
    font-weight: 600;
    font-size: .88rem;
}
.nc-langsel__menu .dropdown-item:hover,
.nc-langsel__menu .dropdown-item:focus {
    background: var(--nc-surface-hover);
    color: var(--nc-heading);
}
.nc-langsel__menu .dropdown-item.is-active { color: var(--nc-cyan); }
.nc-langsel__menu .dropdown-item.is-active .bi-check-lg { color: var(--nc-cyan); }

@media (max-width: 991.98px) {
    /* In the mobile drawer the switcher sits full width, before the buttons. */
    .nc-langsel { order: -1; width: 100%; margin-bottom: .5rem; }
    .nc-langsel__btn { width: 100%; justify-content: center; padding-block: .7rem; }
    .nc-langsel__menu { width: 100%; }
}

/* Animated hamburger */
.nc-toggler {
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
    border-radius: var(--nc-r-sm);
    padding: .5rem .6rem;
    box-shadow: none !important;
    margin-left: auto;
}
.nc-toggler__box { display: block; position: relative; width: 22px; height: 14px; }
.nc-toggler__inner,
.nc-toggler__inner::before,
.nc-toggler__inner::after {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--nc-heading);
    transition: transform .32s var(--nc-ease), opacity .2s var(--nc-ease), top .32s var(--nc-ease);
}
.nc-toggler__inner { top: 6px; }
.nc-toggler__inner::before { content: ''; top: -6px; }
.nc-toggler__inner::after  { content: ''; top: 6px; }

.nc-toggler[aria-expanded="true"] .nc-toggler__inner { transform: rotate(45deg); }
.nc-toggler[aria-expanded="true"] .nc-toggler__inner::before { top: 0; opacity: 0; }
.nc-toggler[aria-expanded="true"] .nc-toggler__inner::after  { top: 0; transform: rotate(-90deg); }

/* =============================================================================
   08. HERO
   ============================================================================ */

.nc-hero {
    position: relative;
    padding-top: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
    overflow: hidden;
}

.nc-hero__aurora {
    position: absolute;
    inset: -20% -20% auto -20%;
    height: 120%;
    pointer-events: none;
    z-index: 0;
}
.nc-hero__aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
    animation: nc-drift 22s var(--nc-ease-soft) infinite alternate;
}
.nc-hero__aurora span:nth-child(1) {
    width: 46vw; height: 46vw; left: 4%;  top: -8%;
    background: radial-gradient(circle, rgba(34, 211, 238, .55), transparent 68%);
}
.nc-hero__aurora span:nth-child(2) {
    width: 52vw; height: 52vw; right: 2%; top: -14%;
    background: radial-gradient(circle, rgba(255, 77, 141, .5), transparent 68%);
    animation-delay: -7s;
}
.nc-hero__aurora span:nth-child(3) {
    width: 60vw; height: 40vw; left: 22%; top: 18%;
    background: radial-gradient(circle, rgba(124, 92, 255, .45), transparent 70%);
    animation-delay: -13s;
}

@keyframes nc-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3%, 4%, 0) scale(1.09); }
    100% { transform: translate3d(-4%, -3%, 0) scale(.96); }
}

.nc-hero__inner { position: relative; z-index: 2; }

.nc-hero__title {
    font-size: var(--nc-fs-display);
    line-height: 1.04;
    letter-spacing: -.038em;
    margin-bottom: 1.2rem;
}

.nc-hero__text {
    font-size: clamp(1.04rem, .98rem + .42vw, 1.25rem);
    color: var(--nc-muted);
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: 2rem;
    text-wrap: pretty;
}

.nc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.nc-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    justify-content: center;
    font-size: .87rem;
    color: var(--nc-faint);
}
.nc-hero__meta span { display: inline-flex; align-items: center; gap: .42rem; }
.nc-hero__meta i { color: var(--nc-mint); }

/* Product mock-up ---------------------------------------------------------- */
.nc-hero__visual {
    position: relative;
    z-index: 2;
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
    perspective: 1600px;
}

.nc-mock {
    position: relative;
    border-radius: var(--nc-r-xl);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow: var(--nc-shadow-lg);
    overflow: hidden;
    transform: rotateX(7deg) translateY(0);
    transform-origin: top center;
    transition: transform 1s var(--nc-ease);
}
.nc-hero__visual:hover .nc-mock { transform: rotateX(0deg); }

.nc-mock__chrome {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--nc-border);
    background: var(--nc-surface);
}
.nc-mock__dots { display: flex; gap: .38rem; }
.nc-mock__dots i {
    width: 11px; height: 11px; border-radius: 50%; display: block;
    background: var(--nc-border-strong);
}
.nc-mock__dots i:nth-child(1) { background: #fb7185; }
.nc-mock__dots i:nth-child(2) { background: #fbbf24; }
.nc-mock__dots i:nth-child(3) { background: #22d3ee; }

.nc-mock__url {
    flex: 1;
    text-align: center;
    font-family: var(--nc-font-mono);
    font-size: .74rem;
    color: var(--nc-faint);
    background: var(--nc-bg);
    border-radius: var(--nc-r-pill);
    padding: .3rem .9rem;
    border: 1px solid var(--nc-border);
    max-width: 320px;
    margin-inline: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nc-mock__body { padding: clamp(1rem, .7rem + 1vw, 1.6rem); }

.nc-mock__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}

.nc-mock-stat {
    padding: 1rem 1.1rem;
    border-radius: var(--nc-r-sm);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
}
.nc-mock-stat__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--nc-faint);
    font-weight: 700;
    margin-bottom: .35rem;
}
.nc-mock-stat__value {
    font-family: var(--nc-font-ui);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--nc-heading);
    line-height: 1.1;
}
.nc-mock-stat__delta { font-size: .76rem; font-weight: 700; color: var(--nc-mint); }
.nc-mock-stat__delta--down { color: var(--nc-rose); }

/* Animated equaliser "waveform" */
.nc-wave {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3px;
    height: 130px;
    padding: 1rem 1.1rem;
    border-radius: var(--nc-r-sm);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    overflow: hidden;
}
.nc-wave span {
    flex: 1;
    min-width: 2px;
    border-radius: var(--nc-r-pill);
    background: var(--nc-gradient);
    opacity: .8;
    transform-origin: bottom;
    animation: nc-wave-pulse 1.6s var(--nc-ease-soft) infinite alternate;
}
@keyframes nc-wave-pulse {
    from { transform: scaleY(.28); opacity: .45; }
    to   { transform: scaleY(1);   opacity: .95; }
}

/* Floating glass tags around the mock-up */
.nc-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .95rem;
    border-radius: var(--nc-r);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--nc-shadow);
    font-family: var(--nc-font-ui);
    font-size: .82rem;
    font-weight: 700;
    color: var(--nc-heading);
    animation: nc-float 6s var(--nc-ease-soft) infinite alternate;
    z-index: 3;
}
.nc-float i { color: var(--nc-mint); font-size: 1.05rem; }
.nc-float small { display: block; font-weight: 500; font-size: .72rem; color: var(--nc-faint); }
.nc-float--tl { top: 8%;  left: -2%;  animation-delay: -1s; }
.nc-float--br { bottom: 12%; right: -2%; animation-delay: -3.5s; }

@keyframes nc-float {
    from { transform: translateY(-8px); }
    to   { transform: translateY(10px); }
}

/* =============================================================================
   08b. STREAMING UI — BILLBOARD, RAILS, POSTERS, LIVE TV, SPORT, DEVICES
   -----------------------------------------------------------------------------
   The patterns that make this read as a television service rather than a
   marketing brochure: a full-bleed billboard, horizontally scrolling content
   rails of poster art, a live channel grid and a fixture list.
   ============================================================================ */

/* --- Billboard ----------------------------------------------------------- */

.nc-billboard {
    position: relative;
    min-height: min(88vh, 820px);
    display: flex;
    align-items: flex-end;
    padding-top: calc(var(--nc-header-h) + 2rem);
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
    overflow: hidden;
    isolation: isolate;
}

/* Each slide is a stacked layer; only the active one is visible. */
.nc-billboard__slide {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 1.1s var(--nc-ease);
    pointer-events: none;
}
.nc-billboard__slide.is-active { opacity: 1; }

.nc-billboard__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    /* Very slow drift so a still image still feels alive. */
    animation: nc-kenburns 34s var(--nc-ease-soft) infinite alternate;
}
@keyframes nc-kenburns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); }
}

/* Scrims: one from the left for the copy, one from the bottom into the page. */
.nc-billboard__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--nc-bg) 0%,
        rgba(5, 6, 10, .92) 26%,
        rgba(5, 6, 10, .55) 52%,
        rgba(5, 6, 10, .15) 78%,
        transparent 100%);
}
.nc-billboard__slide::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(180deg, transparent, rgba(5, 6, 10, .85) 62%, var(--nc-bg) 100%);
}

.nc-billboard__inner { position: relative; z-index: 2; max-width: 40rem; }

.nc-billboard__kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--nc-font-ui);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nc-cyan);
    margin-bottom: .9rem;
}

.nc-billboard__title {
    font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.04em;
    margin-bottom: .8rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}

.nc-billboard__tagline {
    font-size: clamp(1.02rem, .96rem + .45vw, 1.28rem);
    color: var(--nc-text);
    margin-bottom: 1rem;
    text-wrap: pretty;
}

.nc-billboard__synopsis {
    color: var(--nc-muted);
    font-size: 1rem;
    margin-bottom: 1.6rem;
    max-width: 34rem;
    text-wrap: pretty;
}

.nc-billboard__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.4rem; }

/* Metadata row: match %, age chip, year, length, quality badges */
.nc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .85rem;
    font-family: var(--nc-font-ui);
    font-size: .87rem;
    color: var(--nc-muted);
    margin-bottom: 1.1rem;
}
.nc-meta__match { color: var(--nc-cyan); font-weight: 800; }
.nc-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--nc-faint); }

.nc-age {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    padding-inline: .35rem;
    border-radius: 5px;
    border: 1px solid var(--nc-border-strong);
    font-size: .74rem;
    font-weight: 800;
    color: var(--nc-text);
}

.nc-tag {
    display: inline-flex;
    align-items: center;
    padding: .18rem .48rem;
    border-radius: 5px;
    border: 1px solid var(--nc-border-strong);
    font-family: var(--nc-font-ui);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--nc-muted);
}
.nc-tag--4k    { color: var(--nc-cyan);    border-color: rgba(34, 211, 238, .45); }
.nc-tag--hdr   { color: var(--nc-violet);  border-color: rgba(124, 92, 255, .45); }
.nc-tag--atmos { color: var(--nc-magenta); border-color: rgba(255, 77, 141, .45); }

/* Billboard slide selector */
.nc-billboard__dots {
    position: absolute;
    right: clamp(1rem, .6rem + 1.4vw, 2.4rem);
    bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.nc-billboard__dot {
    width: 3px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--nc-r-pill);
    background: var(--nc-border-strong);
    cursor: pointer;
    transition: background-color .35s var(--nc-ease), height .35s var(--nc-ease);
}
.nc-billboard__dot.is-active { background: var(--nc-gradient); height: 44px; }

/* --- LIVE badge ---------------------------------------------------------- */

.nc-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .2rem .55rem;
    border-radius: 5px;
    background: var(--nc-live);
    color: #fff;
    font-family: var(--nc-font-ui);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.5;
}
.nc-live-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    animation: nc-blink 1.8s var(--nc-ease) infinite;
}
@keyframes nc-blink { 0%, 60%, 100% { opacity: 1; } 80% { opacity: .25; } }

/* --- Content rails ------------------------------------------------------- */

.nc-rail { margin-bottom: clamp(2rem, 1.5rem + 1.6vw, 3.2rem); position: relative; }

.nc-rail__head {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    margin-bottom: 1rem;
    padding-inline: var(--nc-gutter);
}
.nc-rail__title {
    font-size: clamp(1.06rem, .98rem + .5vw, 1.35rem);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.nc-rail__title i { color: var(--nc-cyan); font-size: .95em; }
.nc-rail__sub {
    font-size: .84rem;
    color: var(--nc-faint);
    margin: 0;
    /* Hidden on small screens so the heading never wraps awkwardly. */
}

/* Arrow controls appear on hover, desktop only. */
.nc-rail__nav {
    margin-left: auto;
    display: flex;
    gap: .4rem;
    opacity: 0;
    transition: opacity .3s var(--nc-ease);
}
.nc-rail:hover .nc-rail__nav,
.nc-rail:focus-within .nc-rail__nav { opacity: 1; }

.nc-rail__btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
    color: var(--nc-text);
    font-size: .9rem;
    cursor: pointer;
    transition: all .25s var(--nc-ease);
}
.nc-rail__btn:hover { background: var(--nc-surface-hover); color: var(--nc-heading); transform: scale(1.08); }
.nc-rail__btn:disabled { opacity: .3; pointer-events: none; }

.nc-rail__viewport {
    display: flex;
    gap: clamp(.6rem, .4rem + .5vw, 1rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-inline: var(--nc-gutter);
    /* Room for the hover lift so cards are not clipped. */
    padding-block: .5rem 1.6rem;
}
.nc-rail__viewport::-webkit-scrollbar { display: none; }

/* --- Poster card --------------------------------------------------------- */

.nc-poster {
    position: relative;
    flex: 0 0 auto;
    width: clamp(140px, 10.5vw, 196px);
    scroll-snap-align: start;
    border-radius: var(--nc-r-sm);
    overflow: hidden;
    background: var(--nc-surface-solid);
    border: 1px solid var(--nc-border);
    cursor: pointer;
    transition: transform .35s var(--nc-ease), box-shadow .35s var(--nc-ease), border-color .35s var(--nc-ease);
}
.nc-poster:hover,
.nc-poster:focus-visible {
    transform: translateY(-8px) scale(1.045);
    border-color: var(--nc-border-strong);
    box-shadow: var(--nc-shadow-lg);
    z-index: 3;
}

.nc-poster__img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--nc-bg-alt);
}

/* Gradient wash + play button revealed on hover */
.nc-poster__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(5, 6, 10, .1) 0%, rgba(5, 6, 10, .78) 100%);
    opacity: 0;
    transition: opacity .3s var(--nc-ease);
}
.nc-poster:hover .nc-poster__overlay,
.nc-poster:focus-visible .nc-poster__overlay { opacity: 1; }

.nc-poster__play {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #05060a;
    font-size: 1.15rem;
    padding-left: 3px;
    transform: scale(.7);
    transition: transform .35s var(--nc-ease);
}
.nc-poster:hover .nc-poster__play { transform: scale(1); }

/* Corner flash: NEW / TOP 10 / EXCLUSIVE */
.nc-poster__badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
    padding: .18rem .45rem;
    border-radius: 4px;
    background: var(--nc-gradient);
    color: #05060a;
    font-family: var(--nc-font-ui);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.nc-poster__meta {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: .6rem .65rem;
    background: linear-gradient(180deg, transparent, rgba(5, 6, 10, .9));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--nc-ease), transform .3s var(--nc-ease);
}
.nc-poster:hover .nc-poster__meta,
.nc-poster:focus-visible .nc-poster__meta { opacity: 1; transform: none; }

.nc-poster__name {
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .84rem;
    color: #fff;
    line-height: 1.25;
    margin-bottom: .15rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nc-poster__sub {
    font-size: .7rem;
    color: rgba(255, 255, 255, .68);
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}
.nc-poster__sub .nc-meta__match { font-size: .7rem; }

/* Resume bar on the Continue watching rail */
.nc-poster__progress {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    height: 3px;
    background: rgba(255, 255, 255, .22);
}
.nc-poster__progress span {
    display: block;
    height: 100%;
    background: var(--nc-gradient);
}

/* --- Watch ticker ---------------------------------------------------------
   Two rows of key art drifting in opposite directions. The track holds the
   list twice and translates exactly -50%, so the loop is seamless.
   ------------------------------------------------------------------------ */

.nc-ticker {
    position: relative;
    display: grid;
    gap: clamp(.6rem, .45rem + .5vw, 1rem);
    /* Full-bleed out of the container so the art runs edge to edge. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.nc-ticker__row {
    display: flex;
    width: max-content;
    gap: clamp(.6rem, .45rem + .5vw, 1rem);
    /* Paused until the reveal adds .is-visible, so it starts in view. */
    animation: nc-ticker-left 64s linear infinite;
}
.nc-ticker__row--reverse { animation-name: nc-ticker-right; }

@keyframes nc-ticker-left  { from { transform: translate3d(0, 0, 0); }      to { transform: translate3d(-50%, 0, 0); } }
@keyframes nc-ticker-right { from { transform: translate3d(-50%, 0, 0); }   to { transform: translate3d(0, 0, 0); } }

.nc-ticker:hover .nc-ticker__row,
.nc-ticker:focus-within .nc-ticker__row { animation-play-state: paused; }

.nc-ticker__card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(120px, 12vw, 186px);
    border-radius: var(--nc-r-sm);
    overflow: hidden;
    border: 1px solid var(--nc-border);
    background: var(--nc-surface-solid);
    transition: transform .35s var(--nc-ease), border-color .35s var(--nc-ease), box-shadow .35s var(--nc-ease);
}
.nc-ticker__card:hover {
    transform: scale(1.06);
    border-color: var(--nc-border-strong);
    box-shadow: var(--nc-shadow-lg);
    z-index: 2;
}
.nc-ticker__card img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--nc-bg-alt);
}

/* Motion is decorative — hold it still when the OS asks. */
@media (prefers-reduced-motion: reduce) {
    .nc-ticker__row { animation: none; }
    .nc-ticker { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}

/* --- Comparison table ---------------------------------------------------- */

.nc-vs-wrap {
    overflow-x: auto;
    border-radius: var(--nc-r-lg);
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
}
.nc-vs-wrap:focus-visible {
    outline: 2px solid var(--nc-cyan);
    outline-offset: 3px;
}

/* Only worth saying when the table actually has to scroll. */
.nc-vs__swipe {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-size: .82rem;
    color: var(--nc-faint);
    margin-bottom: .75rem;
}
@media (max-width: 991.98px) {
    .nc-vs__swipe { display: flex; }
}

.nc-vs {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    margin: 0;
    font-size: .92rem;
}

.nc-vs th,
.nc-vs td {
    padding: .95rem 1.1rem;
    text-align: center;
    border-bottom: 1px solid var(--nc-border);
    vertical-align: middle;
}

.nc-vs thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--nc-bg-elevated);
    font-family: var(--nc-font-ui);
    font-weight: 800;
    font-size: .92rem;
    color: var(--nc-muted);
}
.nc-vs thead th:first-child { text-align: left; }

/* Our column: lit, bordered, and visually lifted out of the table. */
.nc-vs__ours {
    color: var(--nc-heading) !important;
    background: linear-gradient(180deg, rgba(124, 92, 255, .16), rgba(124, 92, 255, .06)) !important;
    box-shadow: inset 1px 0 0 rgba(124, 92, 255, .4), inset -1px 0 0 rgba(124, 92, 255, .4);
}
.nc-vs thead .nc-vs__ours {
    border-radius: var(--nc-r-sm) var(--nc-r-sm) 0 0;
    box-shadow: inset 1px 0 0 rgba(124, 92, 255, .4), inset -1px 0 0 rgba(124, 92, 255, .4), inset 0 1px 0 rgba(124, 92, 255, .4);
}
.nc-vs tbody tr:last-child .nc-vs__ours {
    border-radius: 0 0 var(--nc-r-sm) var(--nc-r-sm);
    box-shadow: inset 1px 0 0 rgba(124, 92, 255, .4), inset -1px 0 0 rgba(124, 92, 255, .4), inset 0 -1px 0 rgba(124, 92, 255, .4);
}

.nc-vs__brand {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 1rem;
}
.nc-vs__brand::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nc-gradient);
}

.nc-vs tbody th {
    text-align: left;
    font-weight: 600;
    font-family: var(--nc-font-body);
    color: var(--nc-text);
    white-space: nowrap;
}

/* Keep the row labels in view while the table is scrolled sideways. */
.nc-vs thead th:first-child,
.nc-vs tbody th {
    position: sticky;
    left: 0;
}
.nc-vs thead th:first-child { z-index: 3; background: var(--nc-bg-elevated); }
.nc-vs tbody th             { z-index: 1; background: var(--nc-surface); }
.nc-vs tbody tr:hover td:not(.nc-vs__ours) { background: var(--nc-surface-hover); }
.nc-vs tbody tr:last-child th,
.nc-vs tbody tr:last-child td { border-bottom: 0; }

.nc-vs td { color: var(--nc-muted); }
.nc-vs .bi-check-lg { font-size: 1.15rem; }
.nc-vs .bi-x-lg     { font-size: 1rem; }

/* Colour follows the meaning of the answer, not the shape of the icon. */
.nc-vs__good { color: var(--nc-cyan); }
.nc-vs__bad  { color: var(--nc-rose); opacity: .75; }

.nc-vs__note {
    font-size: .82rem;
    color: var(--nc-faint);
    text-align: center;
    margin-top: 1rem;
}

/* --- Why us cards -------------------------------------------------------- */

.nc-why {
    position: relative;
    height: 100%;
    padding: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
    border-radius: var(--nc-r-lg);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    overflow: hidden;
    transition: transform .35s var(--nc-ease), border-color .35s var(--nc-ease), box-shadow .35s var(--nc-ease);
}
.nc-why:hover {
    transform: translateY(-6px);
    border-color: var(--nc-border-strong);
    box-shadow: var(--nc-shadow);
}
.nc-why::before {
    content: '';
    position: absolute;
    inset: auto -30% -70% auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--nc-gradient-soft);
    filter: blur(38px);
    opacity: 0;
    transition: opacity .4s var(--nc-ease);
}
.nc-why:hover::before { opacity: 1; }

.nc-why__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--nc-r-sm);
    background: var(--nc-gradient-soft);
    border: 1px solid var(--nc-border);
    color: var(--nc-cyan);
    font-size: 1.35rem;
    margin-bottom: 1.1rem;
}
.nc-why h3 { position: relative; font-size: 1.08rem; margin-bottom: .45rem; }
.nc-why p  { position: relative; font-size: .93rem; color: var(--nc-muted); margin: 0; }

/* --- Category tiles (what the one subscription covers) -------------------- */

.nc-cat {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    height: 100%;
    border-radius: var(--nc-r);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    transition: transform .3s var(--nc-ease), border-color .3s var(--nc-ease), background-color .3s var(--nc-ease);
}
.nc-cat:hover {
    transform: translateY(-4px);
    border-color: var(--nc-border-strong);
    background: var(--nc-surface-hover);
}
.nc-cat__icon {
    flex: 0 0 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--nc-r-sm);
    background: var(--nc-gradient-soft);
    border: 1px solid var(--nc-border);
    color: var(--nc-cyan);
    font-size: 1.25rem;
}
.nc-cat__count {
    font-family: var(--nc-font-display);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--nc-heading);
    font-variant-numeric: tabular-nums;
}
.nc-cat__label { font-size: .85rem; color: var(--nc-muted); }

/* --- Player app chips ---------------------------------------------------- */

.nc-apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
}
.nc-app {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .95rem;
    border-radius: var(--nc-r-sm);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-ui);
    font-size: .84rem;
    font-weight: 600;
    color: var(--nc-muted);
    transition: color .25s var(--nc-ease), border-color .25s var(--nc-ease), transform .25s var(--nc-ease);
}
.nc-app:hover { color: var(--nc-heading); border-color: var(--nc-border-strong); transform: translateY(-2px); }
.nc-app i { color: var(--nc-cyan); font-size: 1rem; }

/* --- Live TV grid -------------------------------------------------------- */

.nc-channel {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    border-radius: var(--nc-r-sm);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    height: 100%;
    transition: transform .3s var(--nc-ease), border-color .3s var(--nc-ease), background-color .3s var(--nc-ease);
}
.nc-channel:hover {
    transform: translateY(-3px);
    background: var(--nc-surface-hover);
    border-color: var(--nc-border-strong);
}

.nc-channel__num {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--nc-r-xs);
    background: var(--nc-bg-alt);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-ui);
    font-weight: 800;
    font-size: .9rem;
    color: var(--nc-heading);
}

.nc-channel__body { min-width: 0; flex: 1; }
.nc-channel__top {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .18rem;
    flex-wrap: wrap;
}
.nc-channel__name {
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .92rem;
    color: var(--nc-heading);
}
.nc-channel__cat { font-size: .7rem; color: var(--nc-faint); }
.nc-channel__now {
    font-size: .83rem;
    color: var(--nc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nc-channel__next { font-size: .74rem; color: var(--nc-faint); margin-top: .12rem; }

.nc-channel__bar {
    height: 3px;
    border-radius: var(--nc-r-pill);
    background: var(--nc-border);
    overflow: hidden;
    margin-top: .45rem;
}
.nc-channel__bar span { display: block; height: 100%; background: var(--nc-gradient); }

/* --- EPG grid ------------------------------------------------------------ */

.nc-epg {
    border-radius: var(--nc-r-lg);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    overflow: hidden;
}

.nc-epg__head {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: .7rem 1rem .7rem calc(150px + 1rem);
    border-bottom: 1px solid var(--nc-border);
    background: var(--nc-bg-alt);
}
.nc-epg__label {
    font-family: var(--nc-font-ui);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nc-faint);
}

.nc-epg__row {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    padding: .5rem 1rem .5rem 0;
    border-bottom: 1px solid var(--nc-border);
}
.nc-epg__row:last-child { border-bottom: 0; }

.nc-epg__channel {
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding-left: 1rem;
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .82rem;
    color: var(--nc-heading);
}
.nc-epg__channel .nc-live-badge { font-size: .56rem; padding: .1rem .35rem; }

.nc-epg__track { display: flex; flex: 1; gap: .35rem; min-width: 0; }

.nc-epg__item {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: .5rem .65rem;
    border-radius: var(--nc-r-xs);
    background: var(--nc-bg-alt);
    border: 1px solid var(--nc-border);
    font-size: .78rem;
    color: var(--nc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .25s var(--nc-ease), color .25s var(--nc-ease), border-color .25s var(--nc-ease);
}
.nc-epg__item:hover { background: var(--nc-surface-hover); color: var(--nc-heading); border-color: var(--nc-border-strong); }

/* The programme currently airing. */
.nc-epg__item.is-now {
    background: linear-gradient(120deg, rgba(34, 211, 238, .16), rgba(124, 92, 255, .16));
    border-color: rgba(124, 92, 255, .42);
    color: var(--nc-heading);
    font-weight: 600;
}

@media (max-width: 767.98px) {
    /* The guide becomes a vertical list; a 150px label column plus four
       programmes cannot survive a phone. */
    .nc-epg__head { display: none; }
    .nc-epg__row { flex-direction: column; gap: .4rem; padding: .8rem 1rem; }
    .nc-epg__channel { flex: none; padding-left: 0; }
    .nc-epg__track { overflow-x: auto; scrollbar-width: none; }
    .nc-epg__track::-webkit-scrollbar { display: none; }
    .nc-epg__item { flex: 0 0 auto !important; }
}

/* --- Sport fixtures ------------------------------------------------------ */

.nc-fixture {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: var(--nc-r-sm);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    transition: border-color .3s var(--nc-ease), transform .3s var(--nc-ease);
}
.nc-fixture:hover { border-color: var(--nc-border-strong); transform: translateX(3px); }
.nc-fixture--live { border-color: rgba(255, 59, 48, .35); background: rgba(255, 59, 48, .05); }

.nc-fixture__time {
    flex: 0 0 84px;
    font-family: var(--nc-font-ui);
    font-weight: 800;
    font-size: .9rem;
    color: var(--nc-heading);
    text-align: center;
}
.nc-fixture__body { flex: 1; min-width: 0; }
.nc-fixture__comp {
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nc-faint);
    font-weight: 700;
    margin-bottom: .18rem;
}
.nc-fixture__teams {
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .96rem;
    color: var(--nc-heading);
}
.nc-fixture__note { font-size: .8rem; color: var(--nc-muted); margin-top: .12rem; }
.nc-fixture__right { text-align: right; flex-shrink: 0; }
.nc-fixture__channel { font-size: .76rem; color: var(--nc-faint); margin-top: .35rem; }

/* --- Device showcase ----------------------------------------------------- */

.nc-device {
    display: flex;
    gap: .9rem;
    padding: 1.1rem;
    border-radius: var(--nc-r);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    height: 100%;
    transition: transform .3s var(--nc-ease), border-color .3s var(--nc-ease);
}
.nc-device:hover { transform: translateY(-4px); border-color: var(--nc-border-strong); }
.nc-device__icon {
    flex: 0 0 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--nc-r-xs);
    background: var(--nc-gradient-soft);
    border: 1px solid var(--nc-border);
    color: var(--nc-cyan);
    font-size: 1.2rem;
}
.nc-device h3 { font-size: .98rem; margin-bottom: .25rem; }
.nc-device p { font-size: .83rem; color: var(--nc-muted); margin: 0; line-height: 1.55; }

/* A stylised TV + laptop + phone lockup, drawn entirely in CSS. */
.nc-screens {
    position: relative;
    display: grid;
    place-items: end center;
    min-height: 300px;
    padding-bottom: 2rem;
}
.nc-screens__tv {
    position: relative;
    width: min(100%, 480px);
    aspect-ratio: 16 / 10;
    border-radius: 14px 14px 4px 4px;
    background: var(--nc-bg-alt);
    border: 3px solid var(--nc-border-strong);
    box-shadow: var(--nc-shadow-lg);
    overflow: hidden;
}
.nc-screens__tv::after {
    content: '';
    position: absolute;
    inset: auto 0 -18px 0;
    height: 18px;
    background: linear-gradient(180deg, var(--nc-border-strong), transparent);
    clip-path: polygon(42% 0, 58% 0, 62% 100%, 38% 100%);
}
.nc-screens__tv img { width: 100%; height: 100%; object-fit: cover; }

.nc-screens__phone {
    position: absolute;
    right: 2%;
    bottom: 0;
    width: min(23%, 104px);
    aspect-ratio: 9 / 19;
    border-radius: 14px;
    background: var(--nc-bg-alt);
    border: 3px solid var(--nc-border-strong);
    box-shadow: var(--nc-shadow-lg);
    overflow: hidden;
}
.nc-screens__phone img { width: 100%; height: 100%; object-fit: cover; }

.nc-screens__tablet {
    position: absolute;
    left: 0;
    bottom: 6%;
    width: min(30%, 150px);
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background: var(--nc-bg-alt);
    border: 3px solid var(--nc-border-strong);
    box-shadow: var(--nc-shadow);
    overflow: hidden;
}
.nc-screens__tablet img { width: 100%; height: 100%; object-fit: cover; }

/* --- Genre tiles --------------------------------------------------------- */

.nc-genre {
    position: relative;
    display: block;
    border-radius: var(--nc-r-sm);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--nc-border);
    transition: transform .3s var(--nc-ease), border-color .3s var(--nc-ease);
}
.nc-genre:hover { transform: translateY(-4px); border-color: var(--nc-border-strong); }
.nc-genre img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--nc-ease);
}
.nc-genre:hover img { transform: scale(1.08); }
.nc-genre__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 6, 10, .25), rgba(5, 6, 10, .88));
}
.nc-genre__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: .85rem;
}
.nc-genre__name {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .94rem;
    color: #fff;
}
.nc-genre__name i { color: var(--nc-cyan); }
.nc-genre__count { font-size: .74rem; color: rgba(255, 255, 255, .62); margin-top: .1rem; }

/* =============================================================================
   08d. IPTV LANDING PATTERNS
   -----------------------------------------------------------------------------
   Promo bar, hero stat counters, trust strip, country coverage tiles,
   prepaid pack cards and the payment-method row.
   ============================================================================ */

/* --- Promo announcement bar ---------------------------------------------- */

.nc-promo {
    position: relative;
    z-index: 2;
    background: var(--nc-gradient);
    color: #05060a;
    font-family: var(--nc-font-ui);
    font-size: .84rem;
    font-weight: 700;
}
.nc-promo__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem 1.4rem;
    padding: .5rem var(--nc-gutter);
    text-align: center;
}
.nc-promo span { display: inline-flex; align-items: center; gap: .4rem; }
.nc-promo a {
    color: #05060a;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 800;
}
.nc-promo a:hover { color: #05060a; opacity: .75; }

/* --- Hero: live text over the artwork ------------------------------------ */

.nc-hero-award {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-top: clamp(2.5rem, 2rem + 3vw, 5rem);
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* The photograph. Anchored right on desktop so the television sits beside the
   headline; centred and dimmed further on narrow screens, where the copy has
   to run straight across it. */
.nc-hero-award__bg {
    position: absolute;
    inset: 0 0 0 auto;
    width: 62%;
    z-index: -2;
}
.nc-hero-award__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

/* Two scrims: a left-to-right fade that guarantees headline contrast, and a
   bottom fade that hands off to the page background. */
.nc-hero-award__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            var(--nc-bg) 0%,
            var(--nc-bg) 26%,
            rgba(5, 6, 10, .82) 42%,
            rgba(5, 6, 10, .35) 60%,
            rgba(5, 6, 10, .15) 100%),
        linear-gradient(0deg, var(--nc-bg) 4%, rgba(5, 6, 10, .55) 30%, transparent 52%);
}

.nc-hero-award__copy { max-width: 40rem; }

.nc-hero-award__title {
    font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.15rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    margin: 1rem 0 0;
    text-wrap: balance;
}

.nc-hero-award__text {
    margin-top: 1.15rem;
    font-size: clamp(1rem, .95rem + .35vw, 1.16rem);
    color: var(--nc-muted);
    max-width: 34rem;
}

.nc-hero-award .nc-hero__actions { margin-top: 1.9rem; }
.nc-hero-award .nc-hero-stats    { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.nc-hero-stat__icon {
    display: block;
    font-size: 1.35rem;
    color: var(--nc-cyan);
    margin-bottom: .5rem;
}

/* The right-hand cards overlap the lit television, so they carry their own
   backing rather than relying on the page behind them. */
.nc-hero-award .nc-hero-stat {
    background: rgba(8, 10, 16, .74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .09);
}

@media (max-width: 991.98px) {
    .nc-hero-award__bg { width: 100%; }
    .nc-hero-award__bg img { object-position: center 38%; }
    .nc-hero-award__scrim {
        background:
            linear-gradient(180deg, rgba(5, 6, 10, .72) 0%, rgba(5, 6, 10, .88) 55%, var(--nc-bg) 100%);
    }
    .nc-hero-award__copy { max-width: none; }
}

/* --- Hero ---------------------------------------------------------------- */

.nc-hero-iptv {
    position: relative;
    overflow: hidden;
    padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.nc-hero-iptv__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.nc-hero-iptv__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 34%;
    opacity: .82;
}
.nc-hero-iptv__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Enough scrim for AA contrast on the headline, while the key art stays visible. */
    background:
        linear-gradient(180deg, rgba(5, 6, 10, .3) 0%, rgba(5, 6, 10, .55) 42%, rgba(5, 6, 10, .88) 78%, var(--nc-bg) 100%),
        radial-gradient(70% 65% at 50% 0%, rgba(124, 92, 255, .2), transparent 72%);
}

.nc-hero-iptv__title {
    /* Sized to hold two lines inside the half-width copy column; a third line
       pushes the buttons below the fold on a laptop. */
    font-size: clamp(1.95rem, 1.25rem + 2.2vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.nc-hero-iptv__text {
    font-size: clamp(1rem, .95rem + .4vw, 1.16rem);
    color: var(--nc-muted);
    max-width: 46rem;
    margin-bottom: 1.6rem;
}

/* The hero is a two-column split on desktop: copy left, hardware right. */
.nc-hero-iptv__copy { text-align: left; }

@media (max-width: 991.98px) {
    .nc-hero-iptv__copy { text-align: center; }
    .nc-hero-iptv__text { margin-inline: auto; }
}

.nc-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 991.98px) {
    .nc-flags { justify-content: center; }
    .nc-hero-iptv .nc-hero__actions { justify-content: center; }
}
.nc-flags span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--nc-text);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
/* Flags are inline SVG; a hairline keeps the white-field ones (Finland,
   Faroe, Greenland) from bleeding into a light background. */
.nc-flag {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
    flex-shrink: 0;
}

/* Hero counter grid */
.nc-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .8rem;
    max-width: 900px;
    margin: 2.5rem auto 0;
}
.nc-hero-stat {
    padding: 1.15rem .9rem;
    border-radius: var(--nc-r);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    text-align: center;
}
.nc-hero-stat__value {
    font-family: var(--nc-font-display);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    background: var(--nc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
    margin-bottom: .3rem;
}
.nc-hero-stat__label {
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nc-faint);
    margin: 0;
}

/* --- Hero device lockup --------------------------------------------------
   A television showing the actual interface, with a phone overlapping it and
   floating status chips. This is the piece that tells a first-time visitor
   what the product is before they read a word.
   ------------------------------------------------------------------------ */

.nc-lockup {
    position: relative;
    padding-bottom: 5.5rem;   /* room for the TV stand and the phone */
    perspective: 1800px;
}

/* Glow pooled behind the screen */
.nc-lockup::before {
    content: '';
    position: absolute;
    inset: 4% -12% 18% -12%;
    background: var(--nc-gradient-soft);
    filter: blur(60px);
    opacity: .85;
    pointer-events: none;
}

.nc-lockup__tv {
    position: relative;
    border-radius: 16px;
    padding: 10px 10px 12px;
    background: linear-gradient(160deg, #23293a, #0c0f18 60%);
    box-shadow:
        0 40px 90px -30px rgba(0, 0, 0, .9),
        0 0 0 1px var(--nc-border-strong);
    transform: rotateX(6deg) rotateY(-2deg);
    transform-origin: 50% 100%;
    transition: transform 1s var(--nc-ease);
}
.nc-lockup:hover .nc-lockup__tv { transform: rotateX(0deg) rotateY(0deg); }

.nc-lockup__screen {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background: var(--nc-bg-alt);
}

/* Screen sheen */
.nc-lockup__tv::after {
    content: '';
    position: absolute;
    inset: 10px 10px 12px;
    border-radius: 8px;
    background: linear-gradient(112deg, rgba(255, 255, 255, .1) 0%, transparent 34%, transparent 66%, rgba(255, 255, 255, .05) 100%);
    pointer-events: none;
}

/* Stand */
.nc-lockup__stand {
    position: absolute;
    left: 50%;
    bottom: 3.2rem;
    transform: translateX(-50%);
    width: 26%;
    height: 34px;
    background: linear-gradient(180deg, #1b2130, #0b0e16);
    clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
.nc-lockup__foot {
    position: absolute;
    left: 50%;
    bottom: 2.7rem;
    transform: translateX(-50%);
    width: 42%;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(180deg, #222939, #0b0e16);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .9);
}

/* Phone, overlapping the lower-right corner */
.nc-lockup__phone {
    position: absolute;
    right: -1%;
    bottom: 0;
    width: 20%;
    max-width: 132px;
    border-radius: 20px;
    padding: 6px;
    background: linear-gradient(160deg, #262c3d, #0b0e16 60%);
    box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .95), 0 0 0 1px var(--nc-border-strong);
    transform: rotate(-4deg);
    transition: transform .8s var(--nc-ease);
}
.nc-lockup:hover .nc-lockup__phone { transform: rotate(0deg) translateY(-6px); }
.nc-lockup__phone img {
    display: block;
    width: 100%;
    border-radius: 14px;
    background: var(--nc-bg-alt);
}

/* Floating status chips */
.nc-lockup__chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    border-radius: var(--nc-r);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--nc-shadow);
    font-family: var(--nc-font-ui);
    font-size: .78rem;
    font-weight: 700;
    color: var(--nc-heading);
    white-space: nowrap;
    animation: nc-float 6s var(--nc-ease-soft) infinite alternate;
}
.nc-lockup__chip i { font-size: 1rem; color: var(--nc-cyan); }
.nc-lockup__chip small {
    display: block;
    font-weight: 500;
    font-size: .68rem;
    color: var(--nc-faint);
}
/* Straddling the screen edge, not sitting on top of the picture. */
.nc-lockup__chip--tl { top: 4%;   left: -13%;  animation-delay: -1s; }
.nc-lockup__chip--bl { bottom: 26%; left: -15%; animation-delay: -3.5s; }
.nc-lockup__chip--tr { top: 30%;  right: -11%; animation-delay: -2.2s; }

@media (max-width: 1399.98px) {
    .nc-lockup__chip--tl { left: -8%; }
    .nc-lockup__chip--bl { left: -9%; }
    .nc-lockup__chip--tr { right: -6%; }
}

@media (max-width: 1199.98px) {
    .nc-lockup__chip { font-size: .72rem; padding: .5rem .7rem; }
    .nc-lockup__chip--tl { left: -4%; }
    .nc-lockup__chip--bl { left: -4%; }
    .nc-lockup__chip--tr { right: -3%; }
}

@media (max-width: 991.98px) {
    .nc-lockup { margin-top: 2.5rem; padding-bottom: 4rem; }
    .nc-lockup__tv { transform: none; }
    .nc-lockup__chip--tl,
    .nc-lockup__chip--bl,
    .nc-lockup__chip--tr { display: none; }
}

@media (max-width: 575.98px) {
    .nc-lockup__phone { width: 24%; right: 2%; }
}

/* --- Trust strip --------------------------------------------------------- */

.nc-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .8rem;
    padding: 1.1rem;
    border-radius: var(--nc-r-lg);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
}
.nc-trust__item { display: flex; align-items: center; gap: .75rem; }
.nc-trust__item i { font-size: 1.35rem; color: var(--nc-cyan); flex-shrink: 0; }
.nc-trust__title {
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .9rem;
    color: var(--nc-heading);
    line-height: 1.3;
}
.nc-trust__text { font-size: .78rem; color: var(--nc-faint); }

/* --- Award / ranking note -------------------------------------------------
   A full-bleed band on generated artwork, with the gold laurel seal beside the
   claim. Deliberately loud — it is the one place on the page that shouts.
   ------------------------------------------------------------------------ */

.nc-award {
    position: relative;
    overflow: hidden;
    border-radius: var(--nc-r-xl);
    isolation: isolate;
}

.nc-award__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}

/* Scrim: heavy on the left where the text sits, lighter on the right. */
.nc-award::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Dark enough for AA contrast on the copy, light enough that the artwork
       is still visibly there rather than a flat black panel. */
    background:
        linear-gradient(100deg, rgba(5, 6, 10, .9) 0%, rgba(5, 6, 10, .72) 45%, rgba(5, 6, 10, .3) 100%),
        radial-gradient(60% 90% at 18% 50%, rgba(245, 196, 81, .2), transparent 70%);
}

/* Gold hairline, so the band reads as a distinct award panel. */
.nc-award::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(245, 196, 81, .3);
    pointer-events: none;
}

.nc-award__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    padding: clamp(1.8rem, 1.4rem + 2vw, 3.2rem);
}

.nc-award__seal {
    flex: 0 0 auto;
    width: clamp(140px, 13vw, 210px);
    height: auto;
    /* The halo the generator deliberately does not bake in. */
    filter: drop-shadow(0 0 26px rgba(245, 196, 81, .45));
    animation: nc-seal-breathe 5s var(--nc-ease-soft) infinite alternate;
}
@keyframes nc-seal-breathe {
    from { transform: scale(1) rotate(-1.5deg); }
    to   { transform: scale(1.045) rotate(1.5deg); }
}

.nc-award__body { min-width: 0; }

.nc-award__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--nc-font-ui);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nc-gold, #f5c451);
    margin-bottom: .7rem;
}
.nc-award__eyebrow i { font-size: .9rem; }

.nc-award__title {
    font-size: clamp(1.5rem, 1.15rem + 1.9vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: .8rem;
}
.nc-award__title span {
    background: linear-gradient(100deg, #f5c451, #ffe296 55%, #d69e36);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nc-award__text {
    color: var(--nc-text);
    font-size: clamp(.95rem, .92rem + .25vw, 1.06rem);
    max-width: 46rem;
    margin-bottom: 1.2rem;
}

.nc-award__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.4rem;
}

.nc-award__stars {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--nc-font-ui);
    font-size: .88rem;
    font-weight: 700;
    color: var(--nc-heading);
}
.nc-award__stars i { color: #f5c451; font-size: .92rem; letter-spacing: .05em; }

.nc-award__households {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    color: var(--nc-muted);
}
.nc-award__households i { color: var(--nc-cyan); }

@media (max-width: 767.98px) {
    .nc-award__inner { flex-direction: column; text-align: center; }
    .nc-award__meta { justify-content: center; }
    .nc-award__eyebrow { justify-content: center; }
    .nc-award::before {
        background:
            linear-gradient(180deg, rgba(5, 6, 10, .8) 0%, rgba(5, 6, 10, .92) 100%),
            radial-gradient(70% 50% at 50% 20%, rgba(245, 196, 81, .18), transparent 70%);
    }
}

/* --- Country coverage tiles ---------------------------------------------- */

.nc-country {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    height: 100%;
    border-radius: var(--nc-r);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    transition: transform .3s var(--nc-ease), border-color .3s var(--nc-ease), background-color .3s var(--nc-ease);
}
.nc-country:hover {
    transform: translateY(-4px);
    border-color: var(--nc-border-strong);
    background: var(--nc-surface-hover);
}
.nc-country__flag { flex-shrink: 0; display: inline-flex; }
.nc-country__body { min-width: 0; }
.nc-country__name {
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .98rem;
    color: var(--nc-heading);
    line-height: 1.25;
}
.nc-country__native { font-size: .76rem; color: var(--nc-faint); }
.nc-country__note {
    font-size: .78rem;
    color: var(--nc-muted);
    margin-top: .3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nc-country__count {
    margin-left: auto;
    flex-shrink: 0;
    text-align: right;
    font-family: var(--nc-font-ui);
}
.nc-country__count b {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--nc-cyan);
    line-height: 1;
}
.nc-country__count small { font-size: .66rem; color: var(--nc-faint); text-transform: uppercase; letter-spacing: .06em; }

/* --- Prepaid pack cards -------------------------------------------------- */

.nc-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.4rem, 1.2rem + .8vw, 2rem);
    border-radius: var(--nc-r-lg);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    text-align: center;
    transition: transform .35s var(--nc-ease), border-color .35s var(--nc-ease), box-shadow .35s var(--nc-ease);
}
.nc-pack:hover { transform: translateY(-6px); border-color: var(--nc-border-strong); box-shadow: var(--nc-shadow); }

.nc-pack--featured {
    border-color: rgba(124, 92, 255, .5);
    background: linear-gradient(180deg, rgba(124, 92, 255, .1), var(--nc-surface) 48%);
    box-shadow: var(--nc-glow);
}
.nc-pack--featured:hover { transform: translateY(-9px); }

.nc-pack__flag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: .28rem .9rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-gradient);
    color: #05060a;
    font-family: var(--nc-font-ui);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nc-pack__name {
    font-size: 1.1rem;
    margin-bottom: .15rem;
}
.nc-pack__duration {
    font-family: var(--nc-font-ui);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nc-cyan);
    margin-bottom: 1.2rem;
}

.nc-pack__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .2rem;
    margin-bottom: .3rem;
}
.nc-pack__currency { font-size: 1.2rem; font-weight: 700; color: var(--nc-muted); }
.nc-pack__amount {
    font-family: var(--nc-font-display);
    font-size: clamp(2.3rem, 1.9rem + 1.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--nc-heading);
    font-variant-numeric: tabular-nums;
}
.nc-pack__cents { font-size: 1.3rem; font-weight: 800; color: var(--nc-heading); }

.nc-pack__permonth { font-size: .84rem; color: var(--nc-muted); margin-bottom: .5rem; }
.nc-pack__save {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: var(--nc-r-pill);
    background: rgba(34, 211, 238, .14);
    color: var(--nc-cyan);
    font-size: .74rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
}
.nc-pack__save--empty { visibility: hidden; }

.nc-pack__conn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem;
    border-radius: var(--nc-r-sm);
    background: var(--nc-bg-alt);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-ui);
    font-size: .86rem;
    font-weight: 700;
    color: var(--nc-text);
    margin-bottom: 1.2rem;
}
.nc-pack__conn i { color: var(--nc-cyan); }

.nc-pack .btn { width: 100%; }

/* --- Device selector ----------------------------------------------------- */

.nc-devsel-wrap { text-align: center; margin-bottom: clamp(2rem, 1.6rem + 1.4vw, 3rem); }

.nc-devsel {
    display: inline-flex;
    gap: .3rem;
    padding: .4rem;
    max-width: 100%;
    border-radius: var(--nc-r-pill);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: var(--nc-shadow);
    /* Scrolls rather than wraps on a narrow phone. */
    overflow-x: auto;
    scrollbar-width: none;
}
.nc-devsel::-webkit-scrollbar { display: none; }

.nc-devsel__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    padding: .7rem 1.15rem;
    border: 0;
    border-radius: var(--nc-r-pill);
    background: transparent;
    color: var(--nc-muted);
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s var(--nc-ease), background-color .3s var(--nc-ease), transform .25s var(--nc-ease);
}
.nc-devsel__btn i { font-size: 1rem; opacity: .75; }
.nc-devsel__btn:hover { color: var(--nc-heading); background: var(--nc-surface); }

.nc-devsel__btn.is-active {
    color: #05060a;
    background: var(--nc-gradient);
    box-shadow: 0 8px 22px -10px rgba(124, 92, 255, .9);
}
.nc-devsel__btn.is-active i { opacity: 1; }

.nc-devsel__count { font-size: 1rem; }

.nc-devsel__hint {
    font-size: .82rem;
    color: var(--nc-faint);
    margin: 1rem 0 0;
}
.nc-devsel__hint i { color: var(--nc-cyan); }

/* --- Price panels -------------------------------------------------------- */

/* Hidden only when JavaScript is driving the selector; without it every tier
   stays on the page so all twenty prices remain reachable. */
html.nc-js .nc-price-panel.is-hidden { display: none; }

.nc-price-panel { animation: nc-panel-in .45s var(--nc-ease) both; }
@keyframes nc-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.nc-price-panel__title {
    text-align: center;
    font-size: 1.15rem;
    margin-bottom: 1.6rem;
}
.nc-price-panel__title span {
    display: block;
    font-family: var(--nc-font-body);
    font-size: .88rem;
    font-weight: 400;
    color: var(--nc-muted);
    margin-top: .25rem;
    letter-spacing: 0;
}
/* With JS the selector already names the tier, so the heading is redundant. */
html.nc-js .nc-price-panel__title { display: none; }

/* --- Pricing card -------------------------------------------------------- */

.nc-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.5rem, 1.3rem + .8vw, 2rem);
    border-radius: var(--nc-r-lg);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    backdrop-filter: blur(20px) saturate(165%);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .4s var(--nc-ease),
        border-color .4s var(--nc-ease),
        box-shadow .4s var(--nc-ease);
}

/* Aurora hairline that fades in on hover. */
.nc-plan-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: var(--nc-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s var(--nc-ease);
}

.nc-plan-card:hover,
.nc-plan-card:focus-within {
    transform: translateY(-8px);
    box-shadow: var(--nc-shadow-lg);
}
.nc-plan-card:hover::before,
.nc-plan-card:focus-within::before { opacity: 1; }

/* Soft gradient bloom behind the price, brightening on hover. */
.nc-plan-card__glow {
    position: absolute;
    inset: -60% -30% auto -30%;
    height: 150%;
    z-index: -1;
    background: var(--nc-gradient-soft);
    filter: blur(50px);
    opacity: .55;
    transition: opacity .45s var(--nc-ease);
    pointer-events: none;
}
.nc-plan-card:hover .nc-plan-card__glow { opacity: 1; }

/* The 12-month card ships pre-lit. */
.nc-plan-card--best {
    border-color: rgba(124, 92, 255, .5);
    box-shadow: var(--nc-glow);
}
.nc-plan-card--best .nc-plan-card__glow { opacity: .95; }
.nc-plan-card--best:hover { transform: translateY(-11px); }

.nc-plan-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .95rem;
    border-radius: 0 0 var(--nc-r-sm) var(--nc-r-sm);
    background: var(--nc-gradient);
    color: #05060a;
    font-family: var(--nc-font-ui);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.nc-plan-card__badge i { font-size: .72rem; }

/* Every card reserves the badge strip, not just the badged one — otherwise the
   12-month card's content (and its whole feature list) sits lower than its
   neighbours and the row stops lining up. */
.nc-plan-card__head { margin-top: 1.05rem; margin-bottom: 1.1rem; }

.nc-plan-card__devices {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .24rem .7rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-ui);
    font-size: .74rem;
    font-weight: 700;
    color: var(--nc-cyan);
    margin-bottom: .7rem;
}

.nc-plan-card__duration {
    font-size: 1.18rem;
    margin: 0;
    letter-spacing: -.02em;
}

.nc-plan-card__price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .12rem;
    margin-bottom: .35rem;
}
.nc-plan-card__currency {
    font-family: var(--nc-font-ui);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--nc-muted);
    margin-top: .55rem;
}
.nc-plan-card__amount {
    font-family: var(--nc-font-display);
    font-size: clamp(2.8rem, 2.3rem + 1.8vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
    background: var(--nc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nc-plan-card__permonth { font-size: .86rem; color: var(--nc-muted); margin-bottom: .55rem; }

.nc-plan-card__save {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: var(--nc-r-pill);
    background: rgba(34, 211, 238, .14);
    color: var(--nc-cyan);
    font-family: var(--nc-font-ui);
    font-size: .74rem;
    font-weight: 800;
    margin-bottom: 1.3rem;
}
.nc-plan-card__save.is-empty { background: var(--nc-surface); color: var(--nc-faint); }

.nc-plan-card__cta { width: 100%; }

.nc-plan-card__list {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--nc-border);
    display: grid;
    gap: .62rem;
    text-align: left;
}
.nc-plan-card__list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .87rem;
    line-height: 1.45;
    color: var(--nc-text);
}
.nc-plan-card__list i {
    color: var(--nc-cyan);
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

/* --- All-prices matrix --------------------------------------------------- */

.nc-price-matrix td.is-best {
    color: var(--nc-cyan);
    font-weight: 800;
}
.nc-price-matrix tbody th { white-space: nowrap; }

@media (max-width: 575.98px) {
    .nc-devsel__word { display: none; }
    .nc-devsel__btn { padding-inline: .95rem; }
}

/* --- Payment methods ----------------------------------------------------- */

.nc-payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}
.nc-payment {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1rem;
    border-radius: var(--nc-r-sm);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-ui);
    font-size: .84rem;
    font-weight: 600;
    color: var(--nc-muted);
    transition: color .25s var(--nc-ease), border-color .25s var(--nc-ease), transform .25s var(--nc-ease);
}
.nc-payment:hover { color: var(--nc-heading); border-color: var(--nc-border-strong); transform: translateY(-2px); }
.nc-payment i { font-size: 1.05rem; color: var(--nc-cyan); }

/* --- Final call-to-action band ------------------------------------------- */

.nc-cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--nc-r-xl);
    padding: clamp(2rem, 1.6rem + 2vw, 3.4rem);
    text-align: center;
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.nc-cta-band::before {
    content: '';
    position: absolute;
    inset: -70% -20% auto -20%;
    height: 220%;
    background: var(--nc-gradient-soft);
    filter: blur(60px);
    pointer-events: none;
}
.nc-cta-band > * { position: relative; z-index: 2; }
.nc-cta-band h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem); margin-bottom: .7rem; }
.nc-cta-band p { color: var(--nc-muted); max-width: 42rem; margin-inline: auto; margin-bottom: 1.6rem; }
.nc-cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

@media (max-width: 575.98px) {
    .nc-cta-band__actions .btn { width: 100%; }
    .nc-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .nc-country__note { white-space: normal; }
}

/* =============================================================================
   09. LOGO MARQUEE
   ============================================================================ */

.nc-logos { padding-block: clamp(2rem, 1.4rem + 2vw, 3.2rem); }

.nc-logos__label {
    text-align: center;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nc-faint);
    margin-bottom: 1.6rem;
}

.nc-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.nc-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    width: max-content;
    animation: nc-marquee 34s linear infinite;
}
.nc-marquee:hover .nc-marquee__track { animation-play-state: paused; }

@keyframes nc-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.nc-logo-mark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--nc-font-display);
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: -.02em;
    color: var(--nc-faint);
    white-space: nowrap;
    opacity: .75;
    transition: color var(--nc-dur) var(--nc-ease), opacity var(--nc-dur) var(--nc-ease);
}
.nc-logo-mark i { font-size: 1.15rem; }
.nc-logo-mark:hover { color: var(--nc-heading); opacity: 1; }

/* =============================================================================
   10. FEATURE CARDS
   ============================================================================ */

.nc-feature-card .nc-card__tag {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nc-faint);
    z-index: 2;
}
.nc-feature-card h3 { margin-bottom: .55rem; font-size: 1.16rem; }
.nc-feature-card p { color: var(--nc-muted); font-size: .95rem; margin: 0; }

/* Bento layout for the features page */
.nc-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem;
}
.nc-bento > * { grid-column: span 2; }
.nc-bento > .nc-bento--wide { grid-column: span 3; }
.nc-bento > .nc-bento--full { grid-column: span 6; }

/* =============================================================================
   11. WHY-US / BENEFITS / STEPS
   ============================================================================ */

.nc-reason {
    display: flex;
    gap: 1.1rem;
    padding: 1.35rem;
    border-radius: var(--nc-r);
    border: 1px solid transparent;
    transition: border-color var(--nc-dur) var(--nc-ease), background-color var(--nc-dur) var(--nc-ease);
}
.nc-reason:hover { background: var(--nc-surface); border-color: var(--nc-border); }
.nc-reason__icon {
    flex: 0 0 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--nc-r-sm);
    background: var(--nc-gradient-soft);
    border: 1px solid var(--nc-border);
    color: var(--nc-mint);
    font-size: 1.24rem;
}
.nc-reason h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.nc-reason p { color: var(--nc-muted); font-size: .93rem; margin: 0; }

/* Benefit card with an oversized metric */
.nc-benefit {
    position: relative;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    border-radius: var(--nc-r-lg);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    height: 100%;
    overflow: hidden;
    transition: transform var(--nc-dur) var(--nc-ease), box-shadow var(--nc-dur) var(--nc-ease),
                border-color var(--nc-dur) var(--nc-ease);
}
.nc-benefit:hover {
    transform: translateY(-6px);
    border-color: var(--nc-border-strong);
    box-shadow: var(--nc-shadow);
}
.nc-benefit__metric {
    font-family: var(--nc-font-display);
    font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    margin-bottom: .7rem;
    background: var(--nc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.nc-benefit h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.nc-benefit p { color: var(--nc-muted); font-size: .93rem; margin: 0; }

/* Steps ------------------------------------------------------------------- */
.nc-steps { position: relative; }

/* Connecting line behind the step cards (desktop only) */
.nc-steps::before {
    content: '';
    position: absolute;
    top: 46px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nc-border-strong) 15%, var(--nc-border-strong) 85%, transparent);
}

.nc-step { position: relative; text-align: center; padding: 0 .6rem; }

.nc-step__num {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin-bottom: 1.3rem;
    border-radius: var(--nc-r-lg);
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    font-family: var(--nc-font-display);
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--nc-heading);
    transition: transform var(--nc-dur) var(--nc-ease), border-color var(--nc-dur) var(--nc-ease);
    z-index: 2;
}
.nc-step__num i {
    position: absolute;
    inset: auto -8px -8px auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--nc-r-xs);
    background: var(--nc-gradient);
    color: #05121f;
    font-size: .88rem;
}
.nc-step:hover .nc-step__num { transform: translateY(-5px); border-color: var(--nc-blue); }
.nc-step h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.nc-step p { color: var(--nc-muted); font-size: .93rem; margin: 0; }

/* =============================================================================
   12. STATISTICS COUNTERS
   ============================================================================ */

.nc-stats {
    position: relative;
    border-radius: var(--nc-r-xl);
    padding: clamp(2rem, 1.4rem + 2.4vw, 3.4rem) clamp(1.2rem, .8rem + 1.6vw, 2.6rem);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    overflow: hidden;
}
.nc-stats::before {
    content: '';
    position: absolute;
    inset: -60% -10% auto -10%;
    height: 160%;
    background: var(--nc-gradient-soft);
    filter: blur(60px);
    opacity: .6;
    pointer-events: none;
}

.nc-stat { position: relative; text-align: center; z-index: 2; }
.nc-stat__icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--nc-r-sm);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    color: var(--nc-mint);
    font-size: 1.2rem;
    margin-bottom: .9rem;
}
.nc-stat__value {
    font-family: var(--nc-font-display);
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3.05rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--nc-heading);
    margin-bottom: .35rem;
    font-variant-numeric: tabular-nums;
}
.nc-stat__label {
    font-size: .87rem;
    color: var(--nc-muted);
    font-weight: 500;
    margin: 0;
}

/* Vertical rules between stats on wide screens */
@media (min-width: 768px) {
    .nc-stats .col-6:not(:last-child) .nc-stat::after {
        content: '';
        position: absolute;
        right: calc(var(--bs-gutter-x) * -.5);
        top: 12%;
        height: 76%;
        width: 1px;
        background: var(--nc-border);
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .nc-stats .col-6:nth-child(2n) .nc-stat::after { display: none; }
}

/* =============================================================================
   13. TESTIMONIALS SLIDER
   ============================================================================ */

.nc-slider { position: relative; }

.nc-slider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: .5rem 1.5rem;
    margin-inline: calc(var(--nc-gutter) * -1);
    padding-inline: var(--nc-gutter);
}
.nc-slider__viewport::-webkit-scrollbar { display: none; }

.nc-slider__track { display: flex; gap: 1.15rem; }

.nc-slide {
    flex: 0 0 min(420px, 86vw);
    scroll-snap-align: center;
}

.nc-quote {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    border-radius: var(--nc-r-lg);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    transition: transform var(--nc-dur) var(--nc-ease), border-color var(--nc-dur) var(--nc-ease),
                box-shadow var(--nc-dur) var(--nc-ease);
}
.nc-quote:hover {
    transform: translateY(-5px);
    border-color: var(--nc-border-strong);
    box-shadow: var(--nc-shadow);
}

.nc-quote__stars { color: var(--nc-amber); font-size: .92rem; margin-bottom: 1rem; letter-spacing: .1em; }

.nc-quote__text {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--nc-text);
    margin-bottom: 1.5rem;
    flex: 1;
    text-wrap: pretty;
}
.nc-quote__text::before { content: '“'; color: var(--nc-blue); font-weight: 800; }
.nc-quote__text::after  { content: '”'; color: var(--nc-blue); font-weight: 800; }

.nc-quote__author { display: flex; align-items: center; gap: .85rem; }

.nc-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    font-family: var(--nc-font-ui);
    font-weight: 800;
    font-size: .9rem;
    color: #05121f;
    background: var(--nc-gradient);
    letter-spacing: .02em;
}
.nc-avatar--c0 { background: linear-gradient(135deg, #22d3ee, #7c5cff); }
.nc-avatar--c1 { background: linear-gradient(135deg, #7c5cff, #ff4d8d); }
.nc-avatar--c2 { background: linear-gradient(135deg, #ff4d8d, #fb7185); }
.nc-avatar--c3 { background: linear-gradient(135deg, #fbbf24, #fb7185); }
.nc-avatar--c4 { background: linear-gradient(135deg, #22d3ee, #fbbf24); }
.nc-avatar--c5 { background: linear-gradient(135deg, #7c5cff, #22d3ee); }

.nc-quote__name { font-family: var(--nc-font-ui); font-weight: 700; color: var(--nc-heading); line-height: 1.3; }
.nc-quote__role { font-size: .82rem; color: var(--nc-faint); }

.nc-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: .5rem;
}

.nc-slider__dots { display: flex; gap: .45rem; }
.nc-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--nc-r-pill);
    background: var(--nc-border-strong);
    cursor: pointer;
    transition: width .3s var(--nc-ease), background-color .3s var(--nc-ease);
}
.nc-slider__dot.is-active { width: 26px; background: var(--nc-gradient); }

/* =============================================================================
   14. PRICING
   ============================================================================ */

.nc-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    margin-inline: auto;
}
.nc-toggle__btn {
    border: 0;
    background: transparent;
    color: var(--nc-muted);
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .88rem;
    padding: .5rem 1.15rem;
    border-radius: var(--nc-r-pill);
    cursor: pointer;
    transition: color .3s var(--nc-ease), background-color .3s var(--nc-ease);
}
.nc-toggle__btn.is-active { color: #05121f; background: var(--nc-gradient); }
.nc-toggle__save {
    font-size: .68rem;
    font-weight: 800;
    padding: .1rem .42rem;
    border-radius: var(--nc-r-pill);
    background: rgba(34, 211, 238, .18);
    color: var(--nc-mint);
    margin-left: .35rem;
}
.nc-toggle__btn.is-active .nc-toggle__save { background: rgba(5, 18, 31, .18); color: #05121f; }

.nc-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    border-radius: var(--nc-r-lg);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    transition: transform var(--nc-dur) var(--nc-ease), border-color var(--nc-dur) var(--nc-ease),
                box-shadow var(--nc-dur) var(--nc-ease);
}
.nc-plan:hover { transform: translateY(-6px); border-color: var(--nc-border-strong); box-shadow: var(--nc-shadow); }

.nc-plan--featured {
    border-color: rgba(124, 92, 255, .45);
    background: linear-gradient(180deg, rgba(124, 92, 255, .09), var(--nc-surface) 45%);
    box-shadow: var(--nc-glow);
}
.nc-plan--featured:hover { transform: translateY(-9px); }

.nc-plan__flag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: .28rem .85rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-gradient);
    color: #05121f;
    font-family: var(--nc-font-ui);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nc-plan__name { font-size: 1.16rem; margin-bottom: .2rem; }
.nc-plan__tagline { font-size: .86rem; color: var(--nc-faint); margin-bottom: 1.3rem; }

.nc-plan__price { display: flex; align-items: baseline; gap: .3rem; margin-bottom: .35rem; }
.nc-plan__currency { font-size: 1.3rem; font-weight: 700; color: var(--nc-muted); font-family: var(--nc-font-ui); }
.nc-plan__amount {
    font-family: var(--nc-font-display);
    font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--nc-heading);
    font-variant-numeric: tabular-nums;
    transition: opacity .25s var(--nc-ease);
}
.nc-plan__period { font-size: .9rem; color: var(--nc-faint); font-weight: 500; }
.nc-plan__note { font-size: .8rem; color: var(--nc-faint); margin-bottom: 1.4rem; min-height: 1.2em; }

.nc-plan .btn { width: 100%; margin-bottom: 1.5rem; }

.nc-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.nc-plan__list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .91rem;
    color: var(--nc-text);
    line-height: 1.55;
}
.nc-plan__list i { flex: 0 0 auto; margin-top: .22rem; font-size: .95rem; }
.nc-plan__list .bi-check-circle-fill { color: var(--nc-mint); }
.nc-plan__list .nc-plan__off { color: var(--nc-faint); }
.nc-plan__list .nc-plan__off i { color: var(--nc-faint); opacity: .6; }

.nc-plan__divider { height: 1px; background: var(--nc-border); margin: 1.2rem 0; }

/* Comparison matrix ------------------------------------------------------- */
.nc-matrix-wrap {
    overflow-x: auto;
    border-radius: var(--nc-r-lg);
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
}
.nc-matrix { width: 100%; min-width: 720px; border-collapse: collapse; margin: 0; }
.nc-matrix th,
.nc-matrix td {
    padding: .95rem 1.15rem;
    text-align: center;
    border-bottom: 1px solid var(--nc-border);
    font-size: .9rem;
    vertical-align: middle;
}
.nc-matrix thead th {
    position: sticky;
    top: 0;
    background: var(--nc-bg-elevated);
    font-family: var(--nc-font-ui);
    font-weight: 800;
    color: var(--nc-heading);
    font-size: .95rem;
    z-index: 2;
}
.nc-matrix tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--nc-text);
    font-family: var(--nc-font-body);
    white-space: nowrap;
}
.nc-matrix tbody tr:last-child th,
.nc-matrix tbody tr:last-child td { border-bottom: 0; }
.nc-matrix tbody tr:hover { background: var(--nc-surface-hover); }
.nc-matrix .bi-check-lg { color: var(--nc-mint); font-size: 1.1rem; }
.nc-matrix .bi-dash-lg  { color: var(--nc-faint); opacity: .55; }
.nc-matrix th.is-featured { color: var(--nc-blue); }

/* =============================================================================
   15. FAQ ACCORDION
   ============================================================================ */

.nc-faq { max-width: 860px; margin-inline: auto; }

.nc-faq .accordion-item {
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-r) !important;
    margin-bottom: .8rem;
    overflow: hidden;
    transition: border-color var(--nc-dur) var(--nc-ease), background-color var(--nc-dur) var(--nc-ease);
}
.nc-faq .accordion-item:hover { border-color: var(--nc-border-strong); }
.nc-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(124, 92, 255, .4);
    background: var(--nc-surface-hover);
}

.nc-faq .accordion-button {
    background: transparent;
    color: var(--nc-heading);
    font-family: var(--nc-font-display);
    font-weight: 700;
    font-size: 1.02rem;
    padding: 1.15rem 1.3rem;
    box-shadow: none !important;
    gap: .8rem;
}
.nc-faq .accordion-button:not(.collapsed) { color: var(--nc-heading); background: transparent; }

/* Replace the Bootstrap chevron with a rotating plus sign */
.nc-faq .accordion-button::after {
    content: '\F4FE'; /* bi-plus-lg */
    font-family: 'bootstrap-icons';
    background-image: none !important;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    color: var(--nc-blue);
    font-size: .8rem;
    transition: transform .35s var(--nc-ease), background-color .35s var(--nc-ease), color .35s var(--nc-ease);
}
.nc-faq .accordion-button:not(.collapsed)::after {
    transform: rotate(135deg);
    background: var(--nc-gradient);
    color: #05121f;
    border-color: transparent;
}

.nc-faq .accordion-body {
    padding: 0 1.3rem 1.3rem;
    color: var(--nc-muted);
    font-size: .96rem;
    line-height: 1.75;
}

/* Category filter buttons */
.nc-faq-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 2.2rem;
}
.nc-faq-filter {
    padding: .5rem 1.1rem;
    border-radius: var(--nc-r-pill);
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
    color: var(--nc-muted);
    font-family: var(--nc-font-ui);
    font-weight: 600;
    font-size: .86rem;
    cursor: pointer;
    transition: all var(--nc-dur) var(--nc-ease);
}
.nc-faq-filter:hover { color: var(--nc-heading); border-color: var(--nc-border-strong); }
.nc-faq-filter.is-active { color: #05121f; background: var(--nc-gradient); border-color: transparent; }

.nc-faq-empty { text-align: center; color: var(--nc-faint); padding: 2rem 0; }

/* =============================================================================
   16. CONTACT & FORMS
   ============================================================================ */

.nc-form-card {
    padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
    border-radius: var(--nc-r-xl);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: var(--nc-shadow);
}

.nc-field { margin-bottom: 1.15rem; position: relative; }

.nc-label {
    display: block;
    font-family: var(--nc-font-ui);
    font-size: .85rem;
    font-weight: 700;
    color: var(--nc-text);
    margin-bottom: .45rem;
}
.nc-label .nc-req { color: var(--nc-rose); margin-left: .15rem; }
.nc-label .nc-opt { color: var(--nc-faint); font-weight: 500; font-size: .78rem; margin-left: .3rem; }

.form-control,
.form-select {
    background-color: var(--nc-bg-alt);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-r-sm);
    color: var(--nc-heading);
    font-family: var(--nc-font-body);
    font-size: .96rem;
    padding: .8rem 1rem;
    transition: border-color .25s var(--nc-ease), box-shadow .25s var(--nc-ease), background-color .25s var(--nc-ease);
}
.form-control::placeholder { color: var(--nc-faint); opacity: 1; }

.form-control:focus,
.form-select:focus {
    background-color: var(--nc-bg-alt);
    border-color: var(--nc-blue);
    color: var(--nc-heading);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, .16);
    outline: 0;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a0b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 15px 11px;
}
.form-select option { background-color: var(--nc-bg-elevated); color: var(--nc-heading); }

textarea.form-control { min-height: 148px; resize: vertical; line-height: 1.65; }

/* Icon inside an input */
.nc-input-icon { position: relative; }
.nc-input-icon > i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nc-faint);
    font-size: 1rem;
    pointer-events: none;
    transition: color .25s var(--nc-ease);
}
.nc-input-icon .form-control,
.nc-input-icon .form-select { padding-left: 2.7rem; }
.nc-input-icon:focus-within > i { color: var(--nc-blue); }

/* Validation states */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--nc-rose);
    background-image: none;
    padding-right: 1rem;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(251, 113, 133, .16); }

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--nc-mint);
    background-image: none;
    padding-right: 1rem;
}
.form-control.is-valid:focus,
.form-select.is-valid:focus { box-shadow: 0 0 0 4px rgba(34, 211, 238, .16); }

.nc-error {
    display: none;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--nc-rose);
    margin-top: .4rem;
}
.nc-error.is-shown { display: flex; animation: nc-shake .4s var(--nc-ease); }

@keyframes nc-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.nc-counter-hint { font-size: .78rem; color: var(--nc-faint); text-align: right; margin-top: .35rem; }
.nc-counter-hint.is-warning { color: var(--nc-amber); }

/* Consent checkbox */
.nc-consent { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1.3rem; }
.nc-consent .form-check-input {
    margin: .2rem 0 0;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: var(--nc-bg-alt);
    border: 1px solid var(--nc-border-strong);
    border-radius: 5px;
    cursor: pointer;
}
.nc-consent .form-check-input:checked { background-color: var(--nc-blue); border-color: var(--nc-blue); }
.nc-consent .form-check-input:focus { box-shadow: 0 0 0 4px rgba(124, 92, 255, .16); border-color: var(--nc-blue); }
.nc-consent label { font-size: .86rem; color: var(--nc-muted); line-height: 1.55; cursor: pointer; }

/* Honeypot — visually gone but not display:none (some bots skip those) */
.nc-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Result banner under the form */
.nc-form-result {
    display: none;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem 1.15rem;
    border-radius: var(--nc-r-sm);
    font-size: .93rem;
    margin-bottom: 1.2rem;
    border: 1px solid transparent;
}
.nc-form-result.is-shown { display: flex; animation: nc-fade-in .4s var(--nc-ease); }
.nc-form-result i { font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; }
.nc-form-result--success { background: rgba(34, 211, 238, .1); border-color: rgba(34, 211, 238, .34); color: var(--nc-mint); }
.nc-form-result--error   { background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .34); color: var(--nc-rose); }
.nc-form-result--info    { background: rgba(124, 92, 255, .1);  border-color: rgba(124, 92, 255, .34);  color: var(--nc-blue); }
.nc-form-result strong { color: inherit; }

/* Contact channel cards */
.nc-channel {
    display: flex;
    gap: 1rem;
    padding: 1.3rem;
    border-radius: var(--nc-r);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    transition: transform var(--nc-dur) var(--nc-ease), border-color var(--nc-dur) var(--nc-ease);
    height: 100%;
}
.nc-channel:hover { transform: translateY(-4px); border-color: var(--nc-border-strong); }
.nc-channel__icon {
    flex: 0 0 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--nc-r-sm);
    background: var(--nc-gradient-soft);
    border: 1px solid var(--nc-border);
    color: var(--nc-mint);
    font-size: 1.22rem;
}
.nc-channel h3 { font-size: 1rem; margin-bottom: .3rem; }
.nc-channel p { font-size: .87rem; color: var(--nc-muted); margin: 0 0 .5rem; }
.nc-channel a { font-family: var(--nc-font-ui); font-weight: 700; font-size: .9rem; }

/* Map placeholder */
.nc-map {
    position: relative;
    border-radius: var(--nc-r-lg);
    overflow: hidden;
    border: 1px solid var(--nc-border);
    background: var(--nc-bg-alt);
    min-height: 300px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
}
.nc-map__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--nc-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--nc-grid-line) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .9;
}
.nc-map__glow {
    position: absolute;
    inset: auto;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(124, 92, 255, .22), transparent 68%);
    filter: blur(30px);
}
.nc-map__content { position: relative; z-index: 2; }
.nc-map__pin {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--nc-gradient);
    color: #05121f;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    animation: nc-bob 3s var(--nc-ease-soft) infinite alternate;
    box-shadow: 0 12px 32px -10px rgba(124, 92, 255, .8);
}
@keyframes nc-bob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

/* Newsletter (footer + popup) */
.nc-newsletter__row {
    display: flex;
    gap: .5rem;
    padding: .35rem;
    border-radius: var(--nc-r-pill);
    background: var(--nc-bg-alt);
    border: 1px solid var(--nc-border);
    transition: border-color .25s var(--nc-ease), box-shadow .25s var(--nc-ease);
}
.nc-newsletter__row:focus-within { border-color: var(--nc-blue); box-shadow: 0 0 0 4px rgba(124, 92, 255, .14); }
.nc-newsletter__row .form-control {
    background: transparent;
    border: 0;
    padding: .55rem .95rem;
    font-size: .92rem;
    box-shadow: none !important;
    min-width: 0;
}
.nc-newsletter__row .btn { flex-shrink: 0; padding-inline: 1.25rem; }
.nc-newsletter__feedback { font-size: .82rem; margin-top: .55rem; min-height: 1.2em; }
.nc-newsletter__feedback.is-ok    { color: var(--nc-mint); }
.nc-newsletter__feedback.is-error { color: var(--nc-rose); }

/* =============================================================================
   17. ABOUT / TIMELINE / TEAM
   ============================================================================ */

.nc-page-hero {
    position: relative;
    padding-top: clamp(3rem, 2rem + 4vw, 5rem);
    padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    text-align: center;
    overflow: hidden;
}
.nc-page-hero__title { margin-bottom: .9rem; }
.nc-page-hero__text { color: var(--nc-muted); font-size: var(--nc-fs-lead); max-width: 46rem; margin-inline: auto; }

.nc-breadcrumb {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    font-size: .84rem;
    color: var(--nc-faint);
}
.nc-breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.nc-breadcrumb li + li::before { content: '/'; color: var(--nc-border-strong); }
.nc-breadcrumb a { color: var(--nc-muted); }
.nc-breadcrumb a:hover { color: var(--nc-blue); }
.nc-breadcrumb [aria-current] { color: var(--nc-heading); font-weight: 600; }

/* Timeline */
.nc-timeline { position: relative; padding-left: 2.4rem; }
.nc-timeline::before {
    content: '';
    position: absolute;
    left: 9px;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: linear-gradient(180deg, var(--nc-mint), var(--nc-blue) 50%, var(--nc-violet));
    opacity: .45;
    border-radius: 2px;
}
.nc-timeline__item { position: relative; padding-bottom: 2.1rem; }
.nc-timeline__item:last-child { padding-bottom: 0; }
.nc-timeline__item::before {
    content: '';
    position: absolute;
    left: -2.4rem;
    top: .45rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nc-bg);
    border: 2px solid var(--nc-blue);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, .13);
}
.nc-timeline__year {
    display: inline-block;
    font-family: var(--nc-font-ui);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--nc-mint);
    margin-bottom: .3rem;
}
.nc-timeline__item h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.nc-timeline__item p { color: var(--nc-muted); font-size: .94rem; margin: 0; }

/* Team */
.nc-member { text-align: center; padding: 1.7rem 1.2rem; }
.nc-member .nc-avatar {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    font-size: 1.6rem;
    margin: 0 auto 1.1rem;
    transition: transform var(--nc-dur) var(--nc-ease);
}
.nc-card:hover .nc-member .nc-avatar,
.nc-member:hover .nc-avatar { transform: scale(1.07) rotate(-4deg); }
.nc-member h3 { font-size: 1.04rem; margin-bottom: .18rem; }
.nc-member__role {
    font-family: var(--nc-font-ui);
    font-size: .8rem;
    font-weight: 700;
    color: var(--nc-blue);
    margin-bottom: .6rem;
}
.nc-member p { font-size: .88rem; color: var(--nc-muted); margin: 0; }

/* Values grid */
.nc-value { padding: 1.5rem; border-radius: var(--nc-r); border: 1px solid var(--nc-border); background: var(--nc-surface); height: 100%; }
.nc-value i { font-size: 1.5rem; color: var(--nc-mint); margin-bottom: .8rem; display: block; }
.nc-value h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.nc-value p { font-size: .9rem; color: var(--nc-muted); margin: 0; }

/* =============================================================================
   18. LEGAL PAGES
   ============================================================================ */

.nc-legal { max-width: 820px; }
.nc-legal h2 {
    font-size: 1.45rem;
    margin-top: 2.6rem;
    margin-bottom: .9rem;
    scroll-margin-top: calc(var(--nc-header-h) + 24px);
}
.nc-legal h2:first-of-type { margin-top: 0; }
.nc-legal h3 { font-size: 1.08rem; margin-top: 1.7rem; margin-bottom: .55rem; }
.nc-legal p,
.nc-legal li { color: var(--nc-muted); font-size: .97rem; line-height: 1.8; }
.nc-legal ul, .nc-legal ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.nc-legal li { margin-bottom: .5rem; }
.nc-legal strong { color: var(--nc-heading); font-weight: 600; }

.nc-legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--nc-r);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    font-size: .87rem;
    color: var(--nc-muted);
    margin-bottom: 2.4rem;
}
.nc-legal-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.nc-legal-meta i { color: var(--nc-mint); }

/* Sticky table of contents */
.nc-toc {
    position: sticky;
    top: calc(var(--nc-header-h) + 24px);
    padding: 1.3rem;
    border-radius: var(--nc-r);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
}
.nc-toc h2 {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nc-faint);
    margin: 0 0 .9rem;
}
.nc-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.nc-toc a {
    display: block;
    padding: .45rem .7rem;
    border-radius: var(--nc-r-xs);
    font-size: .88rem;
    color: var(--nc-muted);
    border-left: 2px solid transparent;
    transition: all .25s var(--nc-ease);
}
.nc-toc a:hover { color: var(--nc-heading); background: var(--nc-surface-hover); }
.nc-toc a.is-active { color: var(--nc-blue); border-left-color: var(--nc-blue); background: rgba(124, 92, 255, .07); }

/* =============================================================================
   19. ERROR PAGES
   ============================================================================ */

.nc-error-page {
    position: relative;
    min-height: 78vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
    /* Contains the decorative .nc-hero__aurora layer, which is wider than the page. */
    overflow: hidden;
}
.nc-error-code {
    font-family: var(--nc-font-display);
    font-size: clamp(6rem, 3rem + 16vw, 13rem);
    font-weight: 800;
    line-height: .88;
    letter-spacing: -.06em;
    background: var(--nc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .4rem;
    animation: nc-glitch 6s var(--nc-ease) infinite;
}
@keyframes nc-glitch {
    0%, 92%, 100% { opacity: 1; transform: translate(0); }
    93% { opacity: .75; transform: translate(-2px, 1px); }
    95% { opacity: 1;   transform: translate(2px, -1px); }
    97% { opacity: .82; transform: translate(-1px, 0); }
}
.nc-error-page h1 { font-size: var(--nc-fs-h2); margin-bottom: .8rem; }
.nc-error-page p { color: var(--nc-muted); font-size: var(--nc-fs-lead); max-width: 34rem; margin-inline: auto; }
.nc-error-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

.nc-error-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 2.6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--nc-border);
}

/* Debug panel (development only) */
.nc-debug {
    text-align: left;
    max-width: 900px;
    margin: 2.5rem auto 0;
    padding: 1.3rem;
    border-radius: var(--nc-r);
    background: rgba(251, 113, 133, .07);
    border: 1px solid rgba(251, 113, 133, .3);
    font-family: var(--nc-font-mono);
    font-size: .8rem;
    color: var(--nc-text);
    overflow-x: auto;
}
.nc-debug h2 { font-size: .95rem; color: var(--nc-rose); margin-bottom: .8rem; font-family: var(--nc-font-ui); }
.nc-debug pre { margin: 0; white-space: pre-wrap; word-break: break-word; color: var(--nc-muted); }

/* =============================================================================
   20. FOOTER
   ============================================================================ */

.nc-footer {
    position: relative;
    margin-top: var(--nc-section-y);
    padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
    padding-bottom: 2rem;
    border-top: 1px solid var(--nc-border);
    background: var(--nc-bg-alt);
    overflow: hidden;
}
.nc-footer__glow {
    position: absolute;
    inset: auto -10% -60% -10%;
    height: 100%;
    background: radial-gradient(50% 60% at 50% 100%, rgba(124, 92, 255, .16), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}

.nc-footer-cta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.8rem;
    padding: clamp(1.8rem, 1.4rem + 1.6vw, 3rem);
    border-radius: var(--nc-r-xl);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--nc-shadow);
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
    overflow: hidden;
}
.nc-footer-cta::before {
    content: '';
    position: absolute;
    inset: -80% -20% auto -20%;
    height: 200%;
    background: var(--nc-gradient-soft);
    filter: blur(60px);
    opacity: .8;
    pointer-events: none;
}
.nc-footer-cta__text { position: relative; z-index: 2; flex: 1 1 340px; }
.nc-footer-cta__title { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.05rem); margin-bottom: .5rem; }
.nc-footer-cta__sub { color: var(--nc-muted); margin: 0; font-size: .98rem; }
.nc-footer-cta__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .8rem; }

.nc-footer__main { position: relative; z-index: 2; padding-bottom: 2.5rem; }
.nc-brand--footer { margin-bottom: 1.1rem; }
.nc-footer__about { color: var(--nc-muted); font-size: .92rem; margin-bottom: 1.8rem; max-width: 34ch; }

.nc-footer__heading {
    font-family: var(--nc-font-ui);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--nc-heading);
    margin-bottom: .9rem;
}
.nc-footer__note { font-size: .84rem; color: var(--nc-faint); margin-bottom: .9rem; }

.nc-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.nc-footer__links a {
    color: var(--nc-muted);
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color var(--nc-dur) var(--nc-ease), transform var(--nc-dur) var(--nc-ease);
}
.nc-footer__links a:hover { color: var(--nc-heading); transform: translateX(4px); }

.nc-footer__bottom {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--nc-border);
}
.nc-footer__copy,
.nc-footer__made { font-size: .84rem; color: var(--nc-faint); margin: 0; }
.nc-footer__made i { color: var(--nc-mint); }
.nc-footer__sep { margin-inline: .45rem; opacity: .5; }

.nc-social { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.nc-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--nc-r-sm);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    color: var(--nc-muted);
    font-size: 1rem;
    transition: all var(--nc-dur) var(--nc-ease);
}
.nc-social a:hover {
    color: #05121f;
    background: var(--nc-gradient);
    border-color: transparent;
    transform: translateY(-3px);
}

/* =============================================================================
   21. FLOATING UI
   ============================================================================ */

.nc-back-to-top {
    position: fixed;
    right: clamp(1rem, .6rem + 1vw, 1.8rem);
    bottom: clamp(1rem, .6rem + 1vw, 1.8rem);
    z-index: 1040;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--nc-r-sm);
    border: 1px solid var(--nc-glass-border);
    background: var(--nc-glass-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: var(--nc-heading);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.9);
    transition: all .4s var(--nc-ease);
}
.nc-back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.nc-back-to-top:hover {
    color: #05121f;
    background: var(--nc-gradient);
    border-color: transparent;
    transform: translateY(-3px);
}

/* Cookie banner */
.nc-cookie {
    position: fixed;
    left: clamp(1rem, .6rem + 1vw, 1.8rem);
    right: clamp(1rem, .6rem + 1vw, 1.8rem);
    bottom: clamp(1rem, .6rem + 1vw, 1.8rem);
    z-index: 1060;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    max-width: 720px;
    margin-inline: auto;
    padding: 1.15rem 1.35rem;
    border-radius: var(--nc-r-lg);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow: var(--nc-shadow-lg);
    transform: translateY(140%);
    transition: transform .55s var(--nc-ease);
}
.nc-cookie.is-visible { transform: none; }
.nc-cookie[hidden] { display: none; }
.nc-cookie__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--nc-r-sm);
    background: var(--nc-gradient-soft);
    border: 1px solid var(--nc-border);
    color: var(--nc-amber);
    font-size: 1.2rem;
}
.nc-cookie__body { flex: 1 1 280px; }
.nc-cookie__title { font-size: 1rem; margin-bottom: .25rem; }
.nc-cookie__text { font-size: .86rem; color: var(--nc-muted); margin: 0; line-height: 1.6; }
.nc-cookie__actions { display: flex; gap: .55rem; flex-wrap: wrap; }

/* Newsletter popup */
.nc-popup {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--nc-ease), visibility .4s var(--nc-ease);
}
.nc-popup[hidden] { display: none; }
.nc-popup.is-open { opacity: 1; visibility: visible; }

.nc-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 10, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.nc-popup__card {
    position: relative;
    width: min(480px, 100%);
    padding: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
    border-radius: var(--nc-r-xl);
    background: var(--nc-bg-elevated);
    border: 1px solid var(--nc-border-strong);
    box-shadow: var(--nc-shadow-lg);
    text-align: center;
    overflow: hidden;
    transform: translateY(24px) scale(.96);
    transition: transform .5s var(--nc-ease);
}
.nc-popup.is-open .nc-popup__card { transform: none; }

.nc-popup__glow {
    position: absolute;
    inset: -60% -20% auto -20%;
    height: 120%;
    background: var(--nc-gradient-soft);
    filter: blur(50px);
    pointer-events: none;
}
.nc-popup__card > *:not(.nc-popup__glow) { position: relative; z-index: 2; }

.nc-popup__close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
    color: var(--nc-muted);
    font-size: .85rem;
    cursor: pointer;
    transition: all .3s var(--nc-ease);
}
.nc-popup__close:hover { color: var(--nc-heading); transform: rotate(90deg); border-color: var(--nc-border-strong); }

.nc-popup__title { font-size: 1.45rem; margin: 1rem 0 .6rem; }
.nc-popup__text { font-size: .93rem; color: var(--nc-muted); margin-bottom: 1.5rem; }
.nc-popup__dismiss {
    background: none;
    border: 0;
    color: var(--nc-faint);
    font-size: .82rem;
    margin-top: 1rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.nc-popup__dismiss:hover { color: var(--nc-muted); }

/* =============================================================================
   22. ANIMATIONS & SCROLL REVEAL
   ============================================================================ */

/*
 * Scroll reveal.
 *
 * The hidden state is scoped to `html.nc-js`, a class the inline script in
 * includes/header.php adds before first paint. Content is therefore visible by
 * default and only animates when JavaScript is actually running — so a blocked
 * script, a failed IntersectionObserver or an element the observer never sees
 * can never leave a section permanently invisible.
 */
html.nc-js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity var(--nc-dur-slow) var(--nc-ease),
        transform var(--nc-dur-slow) var(--nc-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
html.nc-js [data-reveal="left"]  { transform: translateX(-32px); }
html.nc-js [data-reveal="right"] { transform: translateX(32px); }
html.nc-js [data-reveal="scale"] { transform: scale(.94); }
html.nc-js [data-reveal="fade"]  { transform: none; }

html.nc-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@keyframes nc-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Hero entrance sequence */
.nc-anim-up {
    animation: nc-hero-in .9s var(--nc-ease) both;
    animation-delay: var(--anim-delay, 0ms);
}
@keyframes nc-hero-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

/* Gradient text that slowly shifts */
.nc-gradient-text--animated {
    background-size: 220% 100%;
    animation: nc-gradient-shift 9s var(--nc-ease-soft) infinite alternate;
}
@keyframes nc-gradient-shift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

/* =============================================================================
   23. RESPONSIVE REFINEMENTS
   ============================================================================ */

@media (max-width: 1199.98px) {
    .nc-float { display: none; }
}

@media (max-width: 991.98px) {
    :root { --nc-header-h: 68px; }

    /* Mobile nav becomes a glass drawer */
    .navbar-collapse {
        margin-top: .9rem;
        padding: 1.1rem;
        border-radius: var(--nc-r-lg);
        background: var(--nc-glass-bg);
        border: 1px solid var(--nc-glass-border);
        -webkit-backdrop-filter: blur(20px) saturate(170%);
        backdrop-filter: blur(20px) saturate(170%);
        box-shadow: var(--nc-shadow);
    }
    .nc-nav { gap: .1rem; margin-bottom: 1rem !important; }
    .nc-nav .nav-link { padding: .7rem .9rem; font-size: 1rem; border-radius: var(--nc-r-sm); }
    .nc-nav .nav-link::after { display: none; }
    .nc-nav .nav-link:hover,
    .nc-nav .nav-link.active { background: var(--nc-surface); }

    .nc-nav-actions { margin-left: 0; width: 100%; }
    .nc-nav-actions .btn { flex: 1; }
    .nc-nav-actions .nc-icon-btn { flex: 0 0 42px; }

    .nc-steps::before { display: none; }
    .nc-bento > *,
    .nc-bento > .nc-bento--wide { grid-column: span 3; }

    .nc-toc { position: static; margin-bottom: 2rem; }
}

@media (max-width: 991.98px) {
    .nc-rail__sub { display: none; }
    .nc-rail__nav { display: none; }
    .nc-billboard__dots { flex-direction: row; right: auto; left: var(--nc-gutter); bottom: 1.2rem; }
    .nc-billboard__dot { width: 26px; height: 3px; }
    .nc-billboard__dot.is-active { width: 44px; height: 3px; }
}

@media (max-width: 767.98px) {
    :root { --nc-section-y: 3.6rem; }

    body::after { background-size: 46px 46px; }

    /* Billboard: shorter, and the scrim goes bottom-up rather than left-in. */
    .nc-billboard { min-height: 78vh; align-items: flex-end; }
    .nc-billboard__slide::before {
        background: linear-gradient(180deg, rgba(5, 6, 10, .55) 0%, rgba(5, 6, 10, .2) 35%, rgba(5, 6, 10, .9) 100%);
    }
    .nc-billboard__img { object-position: center 22%; }
    .nc-billboard__actions .btn { flex: 1 1 100%; }
    .nc-billboard__synopsis { display: none; }

    .nc-poster { width: clamp(124px, 34vw, 150px); }

    .nc-fixture { flex-wrap: wrap; gap: .6rem 1rem; }
    .nc-fixture__time { flex-basis: 64px; text-align: left; }
    .nc-fixture__right { text-align: left; width: 100%; }

    .nc-screens { min-height: 220px; }
    .nc-screens__phone { width: 26%; }
    .nc-screens__tablet { display: none; }

    .nc-hero { padding-top: 2.5rem; }
    .nc-hero__actions .btn { width: 100%; }
    .nc-hero__meta { gap: .9rem 1.2rem; font-size: .82rem; }

    .nc-mock { transform: none; }
    .nc-mock__url { display: none; }

    .nc-bento > *,
    .nc-bento > .nc-bento--wide,
    .nc-bento > .nc-bento--full { grid-column: span 6; }

    .nc-footer-cta { flex-direction: column; align-items: flex-start; text-align: left; }
    .nc-footer-cta__actions { width: 100%; }
    .nc-footer-cta__actions .btn { flex: 1; }

    .nc-footer__bottom { flex-direction: column; text-align: center; }

    .nc-cookie { flex-direction: column; align-items: flex-start; text-align: left; }
    /*
     * Once the banner stacks, the main axis is vertical — the 280px flex-basis
     * that gives the text a sensible minimum width on desktop would otherwise
     * become a 280px minimum *height*, leaving a large empty gap.
     */
    .nc-cookie__body { flex: 0 0 auto; width: 100%; }
    .nc-cookie__actions { width: 100%; }
    .nc-cookie__actions .btn { flex: 1; }

    .nc-slide { flex-basis: min(340px, 88vw); }

    .nc-timeline { padding-left: 1.9rem; }
    .nc-timeline__item::before { left: -1.9rem; width: 16px; height: 16px; }
    .nc-timeline::before { left: 7px; }
}

@media (max-width: 575.98px) {
    .nc-error-code { font-size: 5.5rem; }
    .nc-stats { border-radius: var(--nc-r-lg); }
    .nc-quote__text { font-size: .96rem; }
}

/* Large screens get a little more air */
@media (min-width: 1400px) {
    :root { --nc-maxw: 1280px; }
}

/* =============================================================================
   24. ACCESSIBILITY & PRINT
   ============================================================================ */

/* Respect the OS "reduce motion" setting: keep the design, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    html.nc-js [data-reveal] { opacity: 1 !important; transform: none !important; }
    .nc-marquee__track { animation: none; }
    .nc-preloader { display: none; }
    .nc-billboard__img { animation: none; }
}

/* Windows high-contrast / forced-colors mode */
@media (forced-colors: active) {
    .nc-card,
    .nc-plan,
    .nc-quote { border: 1px solid CanvasText; }
    .nc-btn-primary { border: 1px solid CanvasText; }
}

@media print {
    body::before,
    body::after,
    .nc-header,
    .nc-preloader,
    .nc-progress,
    .nc-back-to-top,
    .nc-cookie,
    .nc-popup,
    .nc-footer-cta,
    .nc-hero__aurora { display: none !important; }

    body { background: #fff !important; color: #000 !important; }
    h1, h2, h3, h4 { color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .85em; }

    .nc-card,
    .nc-plan,
    .nc-quote { border: 1px solid #ccc !important; background: #fff !important; break-inside: avoid; }
    .nc-gradient-text,
    .nc-benefit__metric,
    .nc-error-code { -webkit-text-fill-color: #000 !important; color: #000 !important; }
}


/* ============================================================================
   22. WHATSAPP SALES INTEGRATION
   ----------------------------------------------------------------------------
   Buttons, the floating launcher and the large contact panels. The brand colour
   is WhatsApp's own #25D366 / #128C7E so the control is instantly recognisable.
   ============================================================================ */

:root {
    --nc-wa-green:      #25d366;
    --nc-wa-green-dark: #128c7e;
    --nc-wa-corner:     clamp(1rem, .6rem + 1vw, 1.8rem);
    --nc-wa-size:       58px;
}

/* --- Buttons ------------------------------------------------------------- */

.nc-wa-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .78rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--nc-font-ui);
    font-weight: 700;
    font-size: .96rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .28s var(--nc-ease), box-shadow .28s var(--nc-ease),
                filter .28s var(--nc-ease), background-color .28s var(--nc-ease);
}

.nc-wa-btn i { font-size: 1.15em; }

.nc-wa-btn--solid {
    background: linear-gradient(135deg, var(--nc-wa-green) 0%, var(--nc-wa-green-dark) 100%);
    color: #04140f;
    box-shadow: 0 8px 22px rgba(37, 211, 102, .28);
}
.nc-wa-btn--solid:hover,
.nc-wa-btn--solid:focus-visible {
    color: #04140f;
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 14px 34px rgba(37, 211, 102, .42);
}

.nc-wa-btn--soft {
    background: rgba(37, 211, 102, .12);
    border-color: rgba(37, 211, 102, .42);
    color: var(--nc-wa-green);
}
.nc-wa-btn--soft:hover,
.nc-wa-btn--soft:focus-visible {
    color: #04140f;
    background: var(--nc-wa-green);
    border-color: var(--nc-wa-green);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, .32);
}

.nc-wa-btn--sm    { padding: .5rem 1rem;     font-size: .84rem; gap: .45rem; }
.nc-wa-btn--lg    { padding: 1.02rem 2.1rem; font-size: 1.06rem; }
.nc-wa-btn--block { display: flex; width: 100%; }

.nc-wa-btn:active { transform: translateY(0) scale(.985); }

.nc-wa-btn:focus-visible {
    outline: 2px solid var(--nc-wa-green);
    outline-offset: 3px;
}

/* Ripple. The span is injected by main.js at the pointer position, then removed
   when the animation finishes. */
.nc-wa-ripple {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .45);
    animation: nc-wa-ripple .62s var(--nc-ease) forwards;
    pointer-events: none;
}
@keyframes nc-wa-ripple {
    to { transform: scale(2.6); opacity: 0; }
}

/* Loading state, held briefly while the WhatsApp tab opens. */
.nc-wa-btn__spinner {
    display: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: nc-wa-spin .7s linear infinite;
}
@keyframes nc-wa-spin { to { transform: rotate(360deg); } }

.nc-wa-btn.is-loading                     { pointer-events: none; }
.nc-wa-btn.is-loading .nc-wa-btn__spinner { display: block; }
.nc-wa-btn.is-loading i                   { display: none; }

/* --- Floating launcher --------------------------------------------------- */

.nc-wa-float {
    position: fixed;
    right: var(--nc-wa-corner);
    bottom: var(--nc-wa-corner);
    z-index: 1045;
    display: grid;
    place-items: center;
    width: var(--nc-wa-size);
    height: var(--nc-wa-size);
    border-radius: 50%;
    color: #04140f;
    font-size: 1.6rem;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(37, 211, 102, .92), rgba(18, 140, 126, .92));
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .38), 0 4px 14px rgba(37, 211, 102, .34);
    transition: transform .3s var(--nc-ease), box-shadow .3s var(--nc-ease);
}
.nc-wa-float:hover,
.nc-wa-float:focus-visible {
    color: #04140f;
    transform: scale(1.09) rotate(-6deg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 6px 20px rgba(37, 211, 102, .5);
}
.nc-wa-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Pulse ring: a short burst every six seconds rather than a constant throb. */
.nc-wa-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--nc-wa-green);
    animation: nc-wa-pulse 6s var(--nc-ease) infinite;
    pointer-events: none;
}
@keyframes nc-wa-pulse {
    0%   { transform: scale(1);    opacity: .8; }
    12%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* Tooltip */
.nc-wa-float__tip {
    position: absolute;
    right: calc(100% + .7rem);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    padding: .55rem .9rem;
    border-radius: var(--nc-r-sm);
    background: var(--nc-glass-bg);
    border: 1px solid var(--nc-glass-border);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: var(--nc-heading);
    font-family: var(--nc-font-ui);
    font-size: .82rem;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--nc-ease), transform .28s var(--nc-ease), visibility .28s;
    pointer-events: none;
}
.nc-wa-float:hover .nc-wa-float__tip,
.nc-wa-float:focus-visible .nc-wa-float__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Stack the existing back-to-top button above the launcher so neither covers
   the other. Both are positioned from --nc-wa-corner, so they move together. */
.nc-back-to-top {
    bottom: calc(var(--nc-wa-corner) + var(--nc-wa-size) + .7rem);
}

@media (max-width: 575.98px) {
    :root { --nc-wa-size: 54px; }
    /* Touch screens have no hover, so the tooltip would never appear; the same
       wording is carried on aria-label. */
    .nc-wa-float__tip { display: none; }
}

/* --- Large conversion panel ---------------------------------------------- */

.nc-wa-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--nc-r-lg);
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    border: 1px solid rgba(37, 211, 102, .28);
    background:
        radial-gradient(120% 140% at 8% 0%, rgba(37, 211, 102, .16), transparent 58%),
        var(--nc-surface);
    text-align: center;
}

.nc-wa-panel__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    font-size: 1.9rem;
    color: #04140f;
    background: linear-gradient(135deg, var(--nc-wa-green), var(--nc-wa-green-dark));
    box-shadow: 0 10px 26px rgba(37, 211, 102, .32);
}

.nc-wa-panel__title {
    font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
    margin-bottom: .7rem;
}

.nc-wa-panel__text {
    color: var(--nc-muted);
    max-width: 44rem;
    margin: 0 auto 1.6rem;
    font-size: .98rem;
}

.nc-wa-panel__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 1.4rem;
    margin-top: 1.3rem;
    font-size: .85rem;
    color: var(--nc-faint);
}
.nc-wa-panel__meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.nc-wa-panel__meta i { color: var(--nc-wa-green); }

.nc-wa-panel__number {
    font-family: var(--nc-font-ui);
    font-weight: 700;
    color: var(--nc-heading);
    text-decoration: none;
    letter-spacing: .01em;
}
.nc-wa-panel__number:hover { color: var(--nc-wa-green); }

/* --- Pricing card pairing ------------------------------------------------ */

/* WhatsApp is the only order route, so its button is the card's main CTA.
   The horizontal padding is trimmed and the label sized so "Order on WhatsApp"
   stays on one line inside a four-across card; it still wraps cleanly rather
   than overflowing if a translation runs longer. */
.nc-plan-card__cta {
    padding-block: .92rem;
    padding-inline: .8rem;
    font-size: .93rem;
    line-height: 1.25;
    gap: .45rem;
}

/* Two cards across in a narrow container is the tightest the label ever gets.
   The longer translations ("Beställ på WhatsApp") need a little more room here
   than the English does. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .nc-plan-card__cta {
        padding-inline: .55rem;
        font-size: .85rem;
        gap: .35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nc-wa-float::before { animation: none; }
    .nc-wa-ripple        { display: none; animation: none; }
    .nc-wa-btn:hover,
    .nc-wa-float:hover   { transform: none; }
}

@media print {
    .nc-wa-float { display: none !important; }
}