/* Process page-specific styles */

/* ============================================
   PULSE RINGS + PARTICLE CANVAS
   ============================================ */

/* Pulse rings — fixed, full page, behind nav/sections */
#pulse-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Particle canvas — lives INSIDE .process-split, absolutely positioned */
#circuit-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.page-header, .guarantee, .faq-home, .cta, .footer, .nav {
    position: relative;
    z-index: 3;
}

/* process-split: overflow:clip clips visually WITHOUT creating a scroll
   container — this is critical so position:sticky still works inside */
.process-split {
    position: relative;
    z-index: 3;
    overflow: clip;
    padding: 80px 0 120px;
}

/* Content sits above the canvas */
.process-split > .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   SPLIT SCROLL LAYOUT
   ============================================ */
.ps-track {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
}

/* LEFT sticky panel */
.ps-sticky {
    position: sticky;
    top: 88px;
    height: calc(100vh - 130px);
    min-height: 520px;
    max-height: 780px;
    align-self: start;
    display: flex;
    flex-direction: column;
}

.ps-stage {
    position: relative;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(8,6,14,0.9);
    border: 1px solid rgba(255,107,40,0.18);
    box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
}

/* Crossfading background photos */
.ps-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.7s cubic-bezier(.22,.85,.28,1), transform 1.4s cubic-bezier(.22,.85,.28,1);
    will-change: opacity, transform;
    z-index: 0;
}
.ps-image.is-on { opacity: 1; transform: scale(1); }

/* Subtle grain texture over photos */
.ps-stage-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.5;
}

/* Dark fade at bottom so caption is always legible */
.ps-stage::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.92) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Animation panels sit above photos, below caption */
.ps-anim {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
    z-index: 3;
}
.ps-anim.is-on { opacity: 1; pointer-events: auto; }

/* Caption + dots overlaid at bottom of stage */
.ps-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 28px 28px 24px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ps-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ps-caption-num {
    font-family: var(--mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

.ps-caption-label {
    font-family: var(--mono, monospace);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    text-align: right;
}

.ps-dots { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.ps-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-family: var(--mono, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    cursor: default;
}
.ps-dot.is-on {
    color: #fff;
    border-color: rgba(255,92,53,0.5);
    background: rgba(255,92,53,0.12);
}
.ps-dot i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0;
    transition: background 0.35s, box-shadow 0.35s;
}
.ps-dot.is-on i {
    background: #ff5c35;
    box-shadow: 0 0 8px rgba(255,92,53,0.7);
}
.ps-dot b {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: var(--mono, monospace);
}

/* RIGHT scrolling stream */
.ps-stream { flex: 1; display: flex; flex-direction: column; gap: 0; }

/* Per-card color tokens */
article.ps-step[data-step="01"] { --step-glow: 56,189,248;   --step-glow-hex: #38bdf8; }
article.ps-step[data-step="02"] { --step-glow: 0,200,90;     --step-glow-hex: #00c85a; }
article.ps-step[data-step="03"] { --step-glow: 255,107,40;   --step-glow-hex: #ff6b28; }

/* Animatable border-angle property (CSS Houdini) */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes ps-border-spin {
    to { --border-angle: 360deg; }
}

article.ps-step {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Dark glass background — no photo */
    background: rgba(8, 6, 20, 0.82);
    /* Translucent base border — spinning glow overlays via ::before */
    border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 24px;
    /* Scroll-in animation */
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.65s cubic-bezier(.16,1,.3,1),
                transform 0.65s cubic-bezier(.16,1,.3,1),
                box-shadow 0.4s ease;
    /* isolate so ::before z-index is scoped */
    isolation: isolate;
}
article.ps-step:last-child { margin-bottom: 0; }

/* Looping glow border — comet chasing the perimeter.
   Lives on .ps-stream wrapper so overflow:hidden on the article doesn't clip it. */
.ps-step-border-glow {
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    padding: 1px;
    background: conic-gradient(
        from var(--border-angle),
        transparent 0%,
        transparent 65%,
        rgba(var(--step-glow), 0.9) 82%,
        rgba(var(--step-glow), 1)   90%,
        rgba(var(--step-glow), 0.9) 97%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ps-border-spin 4s linear infinite;
    pointer-events: none;
    z-index: 10;
}

article.ps-step.is-active {
    opacity: 1;
    transform: translateX(0);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5),
                0 0 40px rgba(var(--step-glow), 0.12),
                0 0 80px rgba(var(--step-glow), 0.06);
}

article.ps-step.was-active {
    opacity: 0.5;
    transform: translateX(0);
}

/* Animation showcase container — centered at top of card */
.ps-step-anim {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 32px 16px;
    flex-shrink: 0;
    /* Subtle per-card color wash at the top */
    background: radial-gradient(
        ellipse 180px 120px at 50% 0%,
        rgba(var(--step-glow), 0.07) 0%,
        transparent 70%
    );
}

/* Step text content */
.ps-step-content {
    position: relative;
    z-index: 2;
    padding: 8px 32px 32px;
}

/* ============================================
   MINI ANIMATIONS — step card showcase widgets
   ============================================ */
.ps-step-mini {
    position: relative;
    width: 210px;
    height: 210px;
    pointer-events: none;
    border-radius: 18px;
    background: rgba(5,5,14,0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--step-glow, 255,255,255), 0.18);
    box-shadow: 0 0 30px rgba(var(--step-glow, 255,255,255), 0.08),
                inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    flex-shrink: 0;
}

/* Mini radar */
.mini-radar-canvas { width: 100%; height: 100%; display: block; }

/* Mini browser mockup */
.mini-mockup {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mini-mock-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.mm-dot { width: 5px; height: 5px; border-radius: 50%; }
.mm-r { background: #ff5f57; }
.mm-y { background: #febc2e; }
.mm-g { background: #28c840; }

.mini-mock-screen { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.mini-mock-hero { display: flex; flex-direction: column; gap: 5px; padding: 8px 7px 6px; background: rgba(255,92,53,0.08); border-radius: 6px; }
.mm-line { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.18); width: 80%; animation: build-in .5s ease forwards; opacity: 0; animation-delay: .3s; }
.mm-short { width: 55%; background: rgba(255,255,255,0.1); animation-delay: .5s; }
.mm-btn { width: 36px; height: 9px; border-radius: 4px; background: rgba(255,92,53,0.5); animation: build-in .5s ease forwards; opacity: 0; animation-delay: .7s; }
.mini-mock-cards { display: flex; gap: 5px; }
.mini-mock-cards div { flex: 1; height: 30px; border-radius: 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); animation: build-in .5s ease forwards; opacity: 0; }
.mini-mock-cards div:nth-child(1) { animation-delay: .9s; }
.mini-mock-cards div:nth-child(2) { animation-delay: 1.05s; }
.mini-mock-cards div:nth-child(3) { animation-delay: 1.2s; }

.mm-badge {
    position: absolute;
    font-size: 0.48rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.03em;
    animation: badge-pop .4s cubic-bezier(.34,1.56,.64,1) forwards;
    opacity: 0;
}
.mm-badge-1 {
    background: rgba(255,92,53,0.15);
    border: 1px solid rgba(255,92,53,0.3);
    color: rgba(255,140,80,1);
    right: 8px; top: 44px;
    animation-delay: 1.4s;
}
.mm-badge-2 {
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.25);
    color: rgba(100,200,255,1);
    left: 8px; bottom: 28px;
    animation-delay: 1.7s;
}

/* Mini stats */
.mini-stats {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
}
.mini-stats-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.mini-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #00a550;
    box-shadow: 0 0 7px rgba(0,165,80,0.9);
    animation: dot-blink 1.5s ease-in-out infinite;
}
.mini-live-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00a550;
}
.mini-stat-num {
    font-family: var(--display);
    font-size: 2.2rem;
    font-weight: 800;
    color: #ff6b28;
    line-height: 1;
    letter-spacing: -1.5px;
    text-shadow: 0 0 20px rgba(255,107,40,0.5);
}
.mini-stat-label {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
}
.mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 48px;
    margin-top: 6px;
}
.mini-bars div {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(0,165,80,0.7) 0%, rgba(0,165,80,0.3) 100%);
    height: 0%;
    transition: height 0.6s cubic-bezier(.34,1.2,.64,1);
}
.mini-bars div:last-child {
    background: linear-gradient(180deg, #00a550 0%, rgba(0,165,80,0.5) 100%);
    box-shadow: 0 0 10px rgba(0,165,80,0.5);
}
.mini-bars.active div:nth-child(1) { height: var(--h); transition-delay: .05s; }
.mini-bars.active div:nth-child(2) { height: var(--h); transition-delay: .12s; }
.mini-bars.active div:nth-child(3) { height: var(--h); transition-delay: .20s; }
.mini-bars.active div:nth-child(4) { height: var(--h); transition-delay: .28s; }
.mini-bars.active div:nth-child(5) { height: var(--h); transition-delay: .36s; }
.mini-trend {
    font-size: 0.6rem;
    font-weight: 700;
    color: #00a550;
    opacity: 0.85;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.ps-num-inline {
    font-family: var(--display);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--accent);
    opacity: 0.6;
    margin-bottom: 6px;
    display: block;
}

/* Radar canvas fills its parent */
#radar-canvas { width: 100%; height: 100%; display: block; }

/* Browser mockup inside ps-anim */
.ps-anim .ps-mockup {
    width: 85%;
    animation: mockup-float 6s ease-in-out infinite;
}

/* Stats panel inside ps-anim */
.ps-anim .ps-stats {
    width: 88%;
    background: rgba(8,8,18,0.9);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 24px;
}

/* ============================================
   SHARED STEP CONTENT STYLES
   ============================================ */
.ps-label {
    display:inline-block;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--accent);
    opacity:.75;
    margin-bottom:12px;
}

article.ps-step h3 {
    font-family:var(--display);
    font-size:1.55rem;
    font-weight:700;
    letter-spacing:-.4px;
    color:#fff;
    margin-bottom:12px;
    line-height:1.2;
}

.ps-step-content > p {
    font-size:.9rem;
    color:rgba(255,255,255,.9);
    line-height:1.75;
    margin-bottom:22px;
    max-width:520px;
}

.ps-list {display:flex;flex-direction:column;gap:9px;list-style:none;padding:0;margin:0}
.ps-list li {
    font-size:.8rem;
    color:#7ec9a0;
    padding-left:18px;
    position:relative;
    line-height:1.5;
}
.ps-list li::before {
    content:'✓';
    position:absolute;
    left:0;top:0;
    color:#00a550;
    font-weight:700;
    font-size:.75rem;
    text-shadow:0 0 10px rgba(0,165,80,.5);
}

/* Staggered checklist */
.ps-list--stagger li {
    opacity:0;
    transform:translateX(-10px);
    transition:opacity .4s ease, transform .4s ease;
}

.ps-list--stagger.ps-list--active li:nth-child(1) { opacity:1;transform:none;transition-delay:.0s }
.ps-list--stagger.ps-list--active li:nth-child(2) { opacity:1;transform:none;transition-delay:.12s }
.ps-list--stagger.ps-list--active li:nth-child(3) { opacity:1;transform:none;transition-delay:.24s }

/* ============================================
   MOCKUP — FLOATING BROWSER WINDOW
   ============================================ */
.ps-mockup {
    position:relative;
    flex-shrink:0;
}

@keyframes mockup-float {
    0%,100% { transform:translateY(0px); }
    50%      { transform:translateY(-8px); }
}

.psm-window {
    background:#0a0a14;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
}

.psm-titlebar {
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:5px;
    background:rgba(255,255,255,.03);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.psm-dot {width:7px;height:7px;border-radius:50%}
.psm-dot--r { background:#ff5f57 }
.psm-dot--y { background:#febc2e }
.psm-dot--g { background:#28c840 }

.psm-urlbar {
    flex:1;
    height:14px;
    border-radius:4px;
    background:rgba(255,255,255,.06);
    margin-left:6px;
    position:relative;
    overflow:hidden;
}

.psm-urlbar::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
    animation:url-shimmer 3s ease-in-out infinite;
}

@keyframes url-shimmer {
    0%   { transform:translateX(-100%); }
    100% { transform:translateX(200%); }
}

.psm-screen {display:flex;flex-direction:column;gap:0;overflow:hidden}

/* Hero banner inside mockup */
.psm-hero {
    padding:14px 12px 10px;
    background:linear-gradient(135deg,rgba(255,92,53,.12),rgba(255,92,53,.04));
    display:flex;
    flex-direction:column;
    gap:5px;
    border-bottom:1px solid rgba(255,255,255,.04);
}

.psm-hero-line {
    height:6px;
    border-radius:3px;
    background:rgba(255,255,255,.18);
    width:80%;
    animation:build-in .5s ease forwards;
    opacity:0;
    animation-delay:.4s;
}

.psm-hero-line--short {
    width:55%;
    background:rgba(255,255,255,.1);
    animation-delay:.6s;
}

.psm-hero-btn {
    width:42px;
    height:10px;
    border-radius:5px;
    background:rgba(255,92,53,.5);
    margin-top:4px;
    animation:build-in .5s ease forwards;
    opacity:0;
    animation-delay:.8s;
}

.psm-section {padding:10px 12px;display:flex;flex-direction:column;gap:6px}

.psm-cards-row {display:flex;gap:5px}

.psm-card {
    flex:1;
    height:32px;
    border-radius:5px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    animation:build-in .5s ease forwards;
    opacity:0;
}

.psm-card:nth-child(1) { animation-delay:1s }
.psm-card:nth-child(2) { animation-delay:1.2s }
.psm-card:nth-child(3) { animation-delay:1.4s }

.psm-footer-bar {
    height:18px;
    background:rgba(255,255,255,.02);
    border-top:1px solid rgba(255,255,255,.04);
    animation:build-in .5s ease forwards;
    opacity:0;
    animation-delay:1.6s;
}

@keyframes build-in {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Floating badge pills */
.psm-badge {
    position:absolute;
    display:flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    border-radius:20px;
    font-size:.6rem;
    font-weight:700;
    letter-spacing:.5px;
    white-space:nowrap;
    opacity:0;
    animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}

.psm-badge svg {
    opacity:.8;
    flex-shrink:0;
}

.psm-badge--1 {
    background:rgba(255,92,53,.15);
    border:1px solid rgba(255,92,53,.3);
    color:rgba(255,140,80,1);
    right:-18px;
    top:12px;
    animation-delay:1.8s;
}

.psm-badge--2 {
    background:rgba(56,189,248,.12);
    border:1px solid rgba(56,189,248,.25);
    color:rgba(100,200,255,1);
    right:-22px;
    bottom:38px;
    animation-delay:2.1s;
}

.psm-badge--3 {
    background:rgba(52,211,153,.1);
    border:1px solid rgba(52,211,153,.25);
    color:rgba(100,230,180,1);
    left:-16px;
    bottom:18px;
    animation-delay:2.4s;
}

@keyframes badge-pop {
    from { opacity:0; transform:scale(.7) translateY(6px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}

/* Gentle badge hover float */
.psm-badge--1 { animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1) forwards, badge-drift-1 5s ease-in-out 2.3s infinite }
.psm-badge--2 { animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1) 2.1s forwards, badge-drift-2 5.5s ease-in-out 2.6s infinite }
.psm-badge--3 { animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1) 2.4s forwards, badge-drift-3 4.5s ease-in-out 2.9s infinite }

@keyframes badge-drift-1 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-4px)} }
@keyframes badge-drift-2 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(4px)} }
@keyframes badge-drift-3 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-3px)} }

/* ============================================
   STATS WIDGET
   ============================================ */
.pss-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.pss-title {
    font-family:var(--display);
    font-size:.62rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
}

.pss-live {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:.58rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#00a550;
}

.pss-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#00a550;
    box-shadow:0 0 6px rgba(0,165,80,.8);
    animation:dot-blink 1.5s ease-in-out infinite;
}

@keyframes dot-blink {
    0%,100% { opacity:1; box-shadow:0 0 6px rgba(0,165,80,.8); }
    50%      { opacity:.4; box-shadow:none; }
}

.pss-metrics {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
}

.pss-metric {
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:10px 8px;
    background:rgba(255,255,255,.03);
    border-radius:9px;
    border:1px solid rgba(255,255,255,.05);
}

.pss-num {
    font-family:var(--display);
    font-size:1.1rem;
    font-weight:800;
    line-height:1;
    letter-spacing:-.5px;
}

.pss-num--orange { color:#ff6b28; text-shadow:0 0 14px rgba(255,107,40,.4); }
.pss-num--blue   { color:#38bdf8; text-shadow:0 0 14px rgba(56,189,248,.4); }
.pss-num--green  { color:#00a550; text-shadow:0 0 14px rgba(0,165,80,.4); }

.pss-metric .pss-label {
    font-size:.58rem;
    font-weight:600;
    letter-spacing:.5px;
    color:rgba(255,255,255,.3);
    text-transform:uppercase;
    line-height:1.3;
}

/* Bar chart */
.pss-chart {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:14px;
}

.pss-bars {
    display:flex;
    align-items:flex-end;
    gap:4px;
    height:52px;
}

.pss-bar {
    flex:1;
    border-radius:3px 3px 0 0;
    background:linear-gradient(180deg,rgba(0,165,80,.7) 0%,rgba(0,165,80,.3) 100%);
    height:0%;
    transition:height .6s cubic-bezier(.34,1.2,.64,1);
    position:relative;
}

.pss-bar:last-child {
    background:linear-gradient(180deg,#00a550 0%,rgba(0,165,80,.5) 100%);
    box-shadow:0 0 10px rgba(0,165,80,.4);
}

.pss-bars--active .pss-bar:nth-child(1) { height:var(--h); transition-delay:.05s }
.pss-bars--active .pss-bar:nth-child(2) { height:var(--h); transition-delay:.15s }
.pss-bars--active .pss-bar:nth-child(3) { height:var(--h); transition-delay:.25s }
.pss-bars--active .pss-bar:nth-child(4) { height:var(--h); transition-delay:.35s }
.pss-bars--active .pss-bar:nth-child(5) { height:var(--h); transition-delay:.45s }
.pss-bars--active .pss-bar:nth-child(6) { height:var(--h); transition-delay:.55s }

.pss-months {
    display:flex;
    justify-content:space-between;
}

.pss-months span {
    font-size:.52rem;
    font-weight:600;
    letter-spacing:.5px;
    color:rgba(255,255,255,.2);
    flex:1;
    text-align:center;
}

.pss-chart-footer {
    padding-top:4px;
    border-top:1px solid rgba(255,255,255,.05);
}

.pss-trend {
    font-size:.6rem;
    font-weight:700;
    letter-spacing:.5px;
    color:#00a550;
    opacity:.8;
}

/* ============================================
   FAQ — divider accordion
   ============================================ */
.faq-home {padding:100px 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);position:relative;overflow:hidden;}

#faq-grid-canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    opacity:1;
}

.faq-home .container { position:relative; z-index:1; }
.faq-grid {
    display:flex;
    flex-direction:column;
    max-width:760px;
    margin:48px auto 0;
    border-top:1px solid rgba(255,255,255,.07);
}

.faq-q {
    border-bottom:1px solid rgba(255,255,255,.07);
    cursor:pointer;
}

.faq-q summary {
    padding:28px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    list-style:none;
    gap:24px;
    cursor:pointer;
}

.faq-q summary::-webkit-details-marker {display:none}

.faq-q summary > span {
    font-family:var(--display);
    font-size:1.05rem;
    font-weight:600;
    color:rgba(255,255,255,.65);
    letter-spacing:-.2px;
    flex:1;
    transition:color .25s var(--ease);
}

.faq-q:hover summary > span,
.faq-q[open] summary > span { color:#fff }

.faq-icon {
    width:28px;
    height:28px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    color:rgba(255,255,255,.3);
    flex-shrink:0;
    transition:.35s var(--ease);
}

.faq-q[open] .faq-icon {
    transform:rotate(45deg);
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:0 0 14px rgba(255,92,53,.25);
}

.faq-q > p {
    padding:0 48px 28px 0;
    font-size:.93rem;
    color:#b8d0f0;
    line-height:1.85;
    margin:0;
    max-width:640px;
    animation:faq-slide .3s var(--ease);
}

.faq-q > p strong {color:#fff;font-weight:600}

@keyframes faq-slide {
    from {opacity:0;transform:translateY(-6px)}
    to   {opacity:1;transform:translateY(0)}
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 860px) {
    .ps-track { grid-template-columns: 1fr; }
    .ps-sticky { position: relative; top: 0; height: 340px; min-height: 300px; }
    article.ps-step { min-height: 380px; }
    .ps-step-mini { width: 175px; height: 175px; }
    .ps-step-anim { padding: 24px 24px 12px; }
}

@media (max-width: 640px) {
    .process-split { padding: 48px 0 80px; }
    article.ps-step h3 { font-size: 1.25rem; }
    article.ps-step > p { font-size: .86rem; }
    .ps-step-mini { width: 150px; height: 150px; }
    .mini-stat-num { font-size: 1.75rem; }
    .ps-step-content { padding: 6px 24px 24px; }
}