/* ==========================================================================
   Orbot — Light Hero / CTA Section
   File: public/css/p0-hero-light.css
   Prefix: p0hl-   (zero conflicts with Bootstrap, orbot-base, p0-light.css)

   Palette mirrors p0-light.css tokens:
     bg          #F5F6FA
     surface     #FFFFFF
     brand       #3623E8
     brand-mid   #4F3EF0
     brand-light #6C47FF
     brand-pale  #EEECFD
     text-1      #0F0F1A
     text-2      #3B3D52
     text-3      #7E8199
   ========================================================================== */
@media (max-width: 576px) {
    .p0hl-sub {
        font-size: .88rem;
        line-height: 1.7;
        padding: 0 .5rem;
    }
}

/* ── Root tokens (scoped so they don't bleed) ─────────────────────────────── */
.p0hl-page {
    --p0hl-bg          : #F5F6FA;
    --p0hl-surface     : #FFFFFF;
    --p0hl-border      : #E4E6F0;
    --p0hl-border-soft : #EFF0F8;
    --p0hl-brand       : #3623E8;
    --p0hl-brand-mid   : #4F3EF0;
    --p0hl-brand-light : #6C47FF;
    --p0hl-brand-pale  : #EEECFD;
    --p0hl-text-1      : #0F0F1A;
    --p0hl-text-2      : #3B3D52;
    --p0hl-text-3      : #7E8199;

    /* Shadows */
    --p0hl-shadow-sm   : 0 1px 3px rgba(54,35,232,.05), 0 4px 14px rgba(54,35,232,.06);
    --p0hl-shadow-md   : 0 2px 6px rgba(54,35,232,.07), 0 12px 36px rgba(54,35,232,.09);
    --p0hl-shadow-lg   : 0 4px 12px rgba(54,35,232,.09), 0 24px 64px rgba(54,35,232,.13);

    /* Radii */
    --p0hl-r-sm  : 8px;
    --p0hl-r-md  : 14px;
    --p0hl-r-lg  : 20px;
    --p0hl-r-xl  : 28px;
    --p0hl-r-full: 999px;

    background-color: var(--p0hl-bg);
    color: var(--p0hl-text-2);
    font-family: 'Inter', 'Nunito', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    isolation: isolate;
}

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


/* ==========================================================================
   HEADING SECTION  (text block above the canvas)
   ========================================================================== */
.p0hl-head {
    padding: clamp(3.5rem, 1vw, 6rem) clamp(1.25rem, 5vw, 5rem) 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Eyebrow pill */
.p0hl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--p0hl-brand);
    background: var(--p0hl-brand-pale);
    border: 1px solid rgba(54, 35, 232, .15);
    border-radius: var(--p0hl-r-full);
    padding: .28rem .85rem;
    margin-bottom: 1.5rem;
}

.p0hl-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--p0hl-brand);
    animation: p0hl-pulse 2.2s ease-in-out infinite;
}

@keyframes p0hl-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%      { opacity: .45; transform: scale(.75);  }
}

/* Main heading */
.p0hl-heading {
    font-size: clamp(2.2rem, 5vw, 3.9rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.035em;
    color: var(--p0hl-text-1);
    margin: 0 auto 1.2rem;
    max-width: 720px;
}

/* Brand-coloured word */
.p0hl-heading-accent {
    color: var(--p0hl-brand);
}

/* Sub-copy */
.p0hl-sub {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--p0hl-text-3);
    max-width: 480px;
    margin: 0 auto 0.25rem;
}


/* ==========================================================================
   CANVAS WRAP  (the animated flow section)
   ========================================================================== */
.p0hl-canvas-wrap {
    position: relative;
    overflow: hidden;
    /* Light surface — canvas draws its own bg via JS edge-fade */
    background: var(--p0hl-bg);
    height: clamp(320px, 40vw, 480px);
}

#p0hl-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}


/* ==========================================================================
   LOGO — liquid fill stack
   ========================================================================== */
.p0hl-btn-wrap {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#p0hl-btn {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#p0hl-logo-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    cursor: pointer;

    /* Soft brand-coloured glow — much lighter than the dark version */
    filter:
        drop-shadow(0 0 16px rgba(54, 35, 232, .18))
        drop-shadow(0 0 48px rgba(108, 71, 255, .10));

    transition: filter .5s ease, transform .5s ease;
}

#p0hl-logo-wrap:hover {
    filter:
        drop-shadow(0 0 24px rgba(54, 35, 232, .35))
        drop-shadow(0 0 72px rgba(108, 71, 255, .20));
    transform: scale(1.06);
}

#p0hl-logo-wrap:active {
    transform: scale(.97);
    transition: transform .12s ease;
}

/* Layer 1 — 3-D base shell */
#p0hl-logo-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    display: block;
}

/* Layer 2 — liquid canvas (JS clips to shape) */
#p0hl-logo-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: block;
}

/* Layer 3 — crisp edge overlay */
#p0hl-logo-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 3;
    display: none;
    mix-blend-mode: multiply;   /* light-mode blend: darkens rather than lightens */
    opacity: .85;
}


/* ==========================================================================
   FEATURE PILLS ROW  (below the canvas, above backers)
   ========================================================================== */
.p0hl-pills-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: 1.75rem clamp(1.25rem, 5vw, 5rem) 0;
    position: relative;
    z-index: 2;
}

.p0hl-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--p0hl-text-2);
    background: var(--p0hl-surface);
    border: 1px solid var(--p0hl-border);
    border-radius: var(--p0hl-r-full);
    padding: .32rem .85rem;
    box-shadow: var(--p0hl-shadow-sm);
    white-space: nowrap;
}

.p0hl-feature-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--p0hl-brand);
    flex-shrink: 0;
}


/* ==========================================================================
   CTA BUTTONS  (optional — shown below pills on mobile)
   ========================================================================== */
.p0hl-cta-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1.5rem clamp(1.25rem, 5vw, 5rem) 0;
}

.p0hl-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.5rem;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--p0hl-brand);
    border: none;
    border-radius: var(--p0hl-r-sm);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(54,35,232,.28), 0 1px 2px rgba(54,35,232,.18);
    transition: background .18s, transform .18s, box-shadow .18s;
}
.p0hl-btn-primary:hover {
    background: var(--p0hl-brand-mid);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(54,35,232,.35);
    color: #fff;
    text-decoration: none;
}

.p0hl-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.3rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--p0hl-text-2);
    background: var(--p0hl-surface);
    border: 1px solid var(--p0hl-border);
    border-radius: var(--p0hl-r-sm);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--p0hl-shadow-sm);
    transition: border-color .18s, box-shadow .18s, color .18s;
}
.p0hl-btn-ghost:hover {
    border-color: rgba(54,35,232,.3);
    color: var(--p0hl-brand);
    box-shadow: 0 4px 16px rgba(54,35,232,.1);
    text-decoration: none;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
    .p0hl-canvas-wrap { height: clamp(260px, 55vw, 360px); }
    #p0hl-logo-wrap   { width: 88px; height: 88px; }
    .p0hl-pills-row   { gap: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .p0hl-eyebrow-dot { animation: none; }
    #p0hl-logo-wrap   { transition: none; }
}



/* Heartbeat — remove old hover zoom so JS takes full control */
#p0hl-logo-wrap {
    transform-origin: center center;
    will-change: transform;
}