/* ==========================================================================
   Portfolio page
   Everything is scoped under .pf so it cannot leak into other pages.
   The hero and closing wear ConduitWorx's own navy + mint; each project
   chapter overrides --a / --a2 / --bg / --bg2 / --fg / --mut inline with that
   product's palette (see templates/section-portfolio.php).
   ========================================================================== */

.pf {
    --cw: #45f9ab;
    --cw2: #00d4aa;
    --navy: #0d1522;
    --navy2: #1a2a3f;
    --display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);

    position: relative;
    background: var(--navy);
    color: #fff;
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: clip;
}

.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf img { max-width: 100%; display: block; }
.pf h1, .pf h2, .pf h3, .pf h6 { padding: 0; }

.pf-wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.pf-grad {
    background: linear-gradient(120deg, var(--cw) 0%, var(--cw2) 50%, #7cf5ff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pf-shine 6s linear infinite;
}

@keyframes pf-shine { to { background-position: -200% center; } }

.pf-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cw);
}

.pf-h2 {
    font-family: var(--display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #fff;
    margin: 14px 0 18px;
}

/* ---------------------------- Progress + rail ---------------------------- */

.pf-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1001;
    pointer-events: none;
}

.pf-progress span {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, var(--cw), var(--cw2), #6C5CE7, #C6A25C, #c4542a, #E0262B, #1DC973, #a855f7);
}

.pf-rail {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(40px);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.pf-rail.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }

.pf-rail-dot {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--a);
    background: transparent;
    transition: transform .3s var(--ease), background .3s;
}

.pf-rail-dot:hover, .pf-rail-dot.is-active { background: var(--a); transform: scale(1.35); box-shadow: 0 0 16px var(--a); }

.pf-rail-label {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translate(8px, -50%);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(13, 21, 34, .85);
    backdrop-filter: blur(8px);
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s var(--ease);
}

.pf-rail-dot:hover .pf-rail-label, .pf-rail-dot.is-active .pf-rail-label { opacity: 1; transform: translate(0, -50%); }

/* ---------------------------------- HERO --------------------------------- */

.pf-hero {
    position: relative;
    min-height: calc(100vh - 75px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, var(--navy2) 0%, var(--navy) 55%, #070b12 100%);
    isolation: isolate;
    padding: 120px 0 140px;
}

.pf-hero-canvas, .pf-close-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.pf-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(69, 249, 171, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69, 249, 171, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
    animation: pf-grid 20s linear infinite;
}

@keyframes pf-grid { to { background-position: 64px 64px, 64px 64px; } }

.pf-hero-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 820px;
    max-height: 820px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(69, 249, 171, .18), transparent 62%);
    filter: blur(30px);
    z-index: -1;
    animation: pf-breathe 8s ease-in-out infinite;
}

@keyframes pf-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; }
    50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.pf-hero-inner {
    position: relative;
    text-align: center;
    max-width: 1000px;
    padding: 0 24px;
}

.pf-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 14px;
    border: 1px solid rgba(69, 249, 171, .35);
    border-radius: 999px;
    background: rgba(69, 249, 171, .08);
    color: var(--cw);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    animation: pf-rise 1s var(--ease) both;
}

.pf-badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cw);
    box-shadow: 0 0 0 0 rgba(69, 249, 171, .7);
    animation: pf-ping 2s infinite;
}

@keyframes pf-ping {
    0%   { box-shadow: 0 0 0 0 rgba(69, 249, 171, .7); }
    70%  { box-shadow: 0 0 0 12px rgba(69, 249, 171, 0); }
    100% { box-shadow: 0 0 0 0 rgba(69, 249, 171, 0); }
}

.pf-hero-title {
    font-family: var(--display);
    font-size: clamp(2.8rem, 8.4vw, 7rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.045em;
    color: #fff;
    margin: 30px 0 28px;
}

.pf-line { display: block; }

.pf-shine {
    background: linear-gradient(120deg, var(--cw) 0%, var(--cw2) 35%, #ffffff 50%, var(--cw2) 65%, var(--cw) 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pf-shine 5s linear infinite;
    padding-bottom: .08em;
}

/* Words are split by JS; each one rises in on its own. */
.pf-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.6em) rotateX(-60deg);
    transform-origin: 50% 100%;
    filter: blur(10px);
    animation: pf-word 1s var(--ease) forwards;
    animation-delay: calc(var(--w) * 90ms + 200ms);
}

.pf-shine .pf-word { -webkit-text-fill-color: transparent; background: inherit; -webkit-background-clip: text; background-clip: text; }

@keyframes pf-word { to { opacity: 1; transform: none; filter: blur(0); } }

.pf-hero-sub {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    color: rgba(255, 255, 255, .72);
    animation: pf-rise 1s .9s var(--ease) both;
}

@keyframes pf-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.pf-scroll-cue {
    position: absolute;
    bottom: 34px;
    left: 50%;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 14px;
}

.pf-scroll-cue span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--cw);
    animation: pf-cue 1.8s ease-in-out infinite;
}

@keyframes pf-cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* Shared by the Two Farm reel strip. */
@keyframes pf-marquee { to { transform: translateX(-50%); } }

/* --------------------------------- INDEX --------------------------------- */

.pf-index {
    padding: 130px 0 120px;
    background: radial-gradient(80% 60% at 50% 0%, var(--navy2), var(--navy) 70%);
}

.pf-index-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.pf-index-head p { margin: 0; font-size: 1.12rem; color: rgba(255, 255, 255, .66); }

.pf-index-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.pf-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 26px 24px 30px;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background:
        radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--a) 28%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg2) 70%, #0d1522), #0b111b);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .5s var(--ease), border-color .4s, box-shadow .5s;
}

.pf-tile:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--a) 60%, transparent);
    box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--a) 45%, transparent);
    color: #fff;
}

.pf-tile-num { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--a); }
.pf-tile-kind { margin-top: 26px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.pf-tile-name { margin-top: 6px; font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.pf-tile-tag { margin-top: auto; padding-top: 18px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .65); }

.pf-tile-bar {
    position: absolute;
    left: 0; bottom: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--a), var(--a2));
    transform: scaleX(.18);
    transform-origin: 0 50%;
    transition: transform .6s var(--ease);
}

.pf-tile:hover .pf-tile-bar { transform: scaleX(1); }

/* -------------------------------- CHAPTERS ------------------------------- */

.pf-chapter {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 130px 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--fg);
    background: radial-gradient(120% 100% at 15% 0%, var(--bg2) 0%, var(--bg) 60%);
}

.pf-chapter.is-flip { background: radial-gradient(120% 100% at 85% 0%, var(--bg2) 0%, var(--bg) 60%); }

/* A thin seam of the project's colour where one chapter hands over to the next. */
.pf-chapter::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--a), transparent);
    opacity: .6;
}

.pf-chapter-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.pf-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .28;
    will-change: transform;
}

.pf-orb-a { width: 520px; height: 520px; background: var(--a);  top: -12%; right: -8%;  animation: pf-orb-a 22s ease-in-out infinite; }
.pf-orb-b { width: 420px; height: 420px; background: var(--a2); bottom: -14%; left: -8%; animation: pf-orb-b 26s ease-in-out infinite; opacity: .16; }

.is-light .pf-orb-a { opacity: .18; }
.is-light .pf-orb-b { opacity: .22; }

@keyframes pf-orb-a { 50% { transform: translate(-80px, 90px) scale(1.2); } }
@keyframes pf-orb-b { 50% { transform: translate(90px, -60px) scale(.85); } }

.pf-chapter-num {
    position: absolute;
    top: 50%;
    right: -2vw;
    transform: translateY(calc(-50% + var(--shift, 0px)));
    font-family: var(--display);
    font-size: clamp(14rem, 34vw, 32rem);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 2px color-mix(in srgb, var(--a) 22%, transparent);
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.is-flip .pf-chapter-num { right: auto; left: -2vw; }

.pf-chapter-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 72px;
    align-items: center;
}

/* Grid items default to min-width:auto, which lets the reel strip's
   max-content track blow the column wide open. */
.pf-chapter-inner > * { min-width: 0; }

.is-flip .pf-copy   { order: 2; }
.is-flip .pf-visual { order: 1; }

.pf-copy-head { display: flex; align-items: center; gap: 16px; }

.pf-logo {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    padding: 8px;
    background: color-mix(in srgb, var(--fg) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--a) 40%, transparent);
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--a) 60%, transparent);
}

.pf-logo img { max-height: 100%; width: auto; object-fit: contain; }
.pf-chapter-twofarms .pf-logo { width: 150px; background: #fff; }
.pf-chapter-mooirivier .pf-logo { width: 150px; background: #fff; }
.pf-chapter-lifebeacon .pf-logo,
.pf-chapter-sentinel .pf-logo { padding: 0; overflow: hidden; }
.pf-chapter-lifebeacon .pf-logo img,
.pf-chapter-sentinel .pf-logo img { width: 100%; height: 100%; }

.pf-logo-mono {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 50%, #000));
}

.pf-kind { display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--a); }
.pf-sector { display: block; margin-top: 2px; font-size: 14px; color: var(--mut); }

.pf-name {
    font-family: var(--display);
    font-size: clamp(3rem, 7vw, 5.6rem);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.045em;
    color: var(--fg);
    margin: 30px 0 12px;
}

.pf-tagline {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 20px;
    background: linear-gradient(90deg, var(--a), var(--a2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pf-summary { margin: 0 0 26px; font-size: 1.06rem; color: color-mix(in srgb, var(--fg) 78%, transparent); max-width: 560px; }

.pf-features { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 11px; }

.pf-features li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .98rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--fg) 86%, transparent);
}

.pf-check {
    flex: 0 0 auto;
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--a) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--a) 55%, transparent);
}

.pf-check::after {
    content: '';
    position: absolute;
    left: 6px; top: 2.5px;
    width: 5px; height: 10px;
    border: solid var(--a);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.pf-stat {
    padding: 16px 16px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--fg) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
    backdrop-filter: blur(6px);
}

.pf-stat strong { display: block; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: var(--a); letter-spacing: -.02em; }
.pf-stat > span { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.35; color: var(--mut); }

.pf-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.pf-stack li {
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg);
    background: color-mix(in srgb, var(--a) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--a) 35%, transparent);
}

/* The visual column. .pf-tilt is rotated by JS toward the pointer. */
.pf-visual { position: relative; perspective: 1400px; }

.pf-tilt {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s var(--ease);
}

/* -------------------------------- Reveal --------------------------------- */

.pf.js [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
    transition-delay: var(--delay, 0ms);
}

.pf.js .pf-visual[data-reveal] { transform: translateY(60px) scale(.94); }

.pf.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ==========================================================================
   Project mock-ups (pfv-*)
   ========================================================================== */

.pfv-window {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
    transform: translateZ(40px);
}

.pfv-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: #1b1b24;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
}

.pfv-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.pfv-bar i:nth-child(2) { background: #febc2e; }
.pfv-bar i:nth-child(3) { background: #28c840; }
.pfv-bar > span { margin-left: 10px; }

.pfv-rings { position: absolute; inset: -12%; z-index: -1; pointer-events: none; }
.pfv-rings span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--a) 40%, transparent);
    animation: pfv-ring 6s linear infinite;
}
.pfv-rings span:nth-child(2) { animation-delay: 2s; }
.pfv-rings span:nth-child(3) { animation-delay: 4s; }

@keyframes pfv-ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }

/* ---- Titan ---- */

.pfv-titan { background: #14141F; }
.pfv-titan-body { display: grid; grid-template-columns: 74px 1fr; min-height: 360px; }

.pfv-titan-side { display: flex; flex-direction: column; gap: 12px; padding: 18px 14px; background: #0B0B12; }
.pfv-titan-side b { font-family: var(--display); font-size: 12px; letter-spacing: .15em; color: #8F82F0; margin-bottom: 8px; }
.pfv-titan-side span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.pfv-titan-side span.on { background: #6C5CE7; }

.pfv-titan-main { padding: 22px; display: flex; flex-direction: column; gap: 16px; }

.pfv-readout {
    position: relative;
    padding: 22px 22px 18px;
    border-radius: 14px;
    background: #000;
    border: 1px solid rgba(0, 230, 118, .3);
    box-shadow: inset 0 0 40px rgba(0, 230, 118, .12);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pfv-readout-val {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 700;
    color: #00E676;
    text-shadow: 0 0 18px rgba(0, 230, 118, .7);
    font-variant-numeric: tabular-nums;
}

.pfv-readout em { font-style: normal; color: #00E676; opacity: .7; font-weight: 700; }

.pfv-readout-state {
    position: absolute;
    right: 14px;
    top: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    padding: 3px 8px;
    border-radius: 4px;
    color: #ffc107;
    background: rgba(255, 193, 7, .12);
    transition: color .3s, background .3s;
}

.pfv-readout-state.is-stable { color: #00E676; background: rgba(0, 230, 118, .14); }

.pfv-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pfv-split span { padding: 10px; border-radius: 10px; background: #1C1C2B; color: #fff; font-weight: 700; font-size: 14px; }
.pfv-split em { display: block; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9A9AB4; font-weight: 600; }
.pfv-split .net { background: linear-gradient(135deg, #6C5CE7, #4B3FC4); }
.pfv-split .net em { color: #d9d4ff; }

.pfv-titan-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.pfv-cam {
    position: relative;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(160deg, #2a2a3c, #111118);
}

.pfv-cam span {
    position: absolute;
    left: 14%; right: 14%; bottom: 10px;
    height: 32px;
    border-radius: 6px 12px 4px 4px;
    background: linear-gradient(#3b3b52, #25253a);
    animation: pfv-truck 6s ease-in-out infinite;
}

@keyframes pfv-truck { 0% { transform: translateX(-130%); } 30%, 80% { transform: translateX(0); } 100% { transform: translateX(130%); } }

.pfv-cam em, .pfv-sign em { position: absolute; left: 8px; top: 6px; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .1em; color: #ff5252; }
.pfv-sign { position: relative; height: 74px; border-radius: 10px; background: #F5F5F9; }
.pfv-sign em { color: #4B3FC4; }
.pfv-sign svg { position: absolute; inset: 18px 10px 8px; width: calc(100% - 20px); height: calc(100% - 26px); }
.pfv-sign path { fill: none; stroke: #14141c; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: pfv-draw 4s ease-in-out infinite; }

@keyframes pfv-draw { 0% { stroke-dashoffset: 400; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.pfv-ticket {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(108, 92, 231, .12);
    border: 1px dashed rgba(143, 130, 240, .5);
    color: #cfc9ff;
    font-size: 13px;
}

.pfv-ticket b { margin-left: auto; color: #fff; font-family: var(--display); }

/* ---- Agrology ---- */

.pfv-agro {
    position: relative;
    height: 480px;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(#1a1c14, #262c1a 55%, #3a3f22);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(221, 169, 51, .25);
}

.pfv-agro-sky { position: absolute; inset: 0 0 45% 0; background: radial-gradient(90% 90% at 70% 100%, rgba(240, 208, 64, .35), transparent 60%); }

.pfv-agro-sun {
    position: absolute;
    right: 7%;
    top: 7%;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, #f0d040, #DDA933 60%, transparent 62%);
    box-shadow: 0 0 80px 20px rgba(240, 208, 64, .35);
}

.pfv-drone {
    position: absolute;
    left: 50%;
    top: 16%;
    width: 60%;
    transform: translateX(-50%);
    animation: pfv-hover 4s ease-in-out infinite, pfv-sweep 12s ease-in-out infinite;
    z-index: 2;
}

@keyframes pfv-hover { 50% { margin-top: 14px; } }
@keyframes pfv-sweep { 0%, 100% { left: 38%; } 50% { left: 62%; } }

.pfv-drone svg { width: 100%; overflow: visible; }
.pfv-drone svg * { fill: #DDA933; stroke: #DDA933; }
.pfv-drone svg path[stroke-width] { fill: none; }
.pfv-drone .tank { fill: #1c1c1c; stroke: #DDA933; stroke-width: 2; }
.pfv-rotor ellipse { fill: rgba(240, 208, 64, .35); stroke: none; transform-box: fill-box; transform-origin: center; animation: pfv-spin .12s linear infinite; }

@keyframes pfv-spin { 50% { transform: scaleX(.2); } }

.pfv-spray { position: absolute; left: 20%; right: 20%; top: 72%; height: 180px; }

.pfv-spray i {
    position: absolute;
    top: 0;
    left: calc(var(--d) * 7.2%);
    width: 3px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(rgba(180, 230, 255, .9), rgba(180, 230, 255, 0));
    animation: pfv-drop 1.1s linear infinite;
    animation-delay: calc(var(--d) * -83ms);
}

@keyframes pfv-drop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(170px) translateX(calc((var(--d) - 7) * 4px)); opacity: 0; } }

.pfv-field {
    position: absolute;
    left: -20%; right: -20%; bottom: 0;
    height: 44%;
    perspective: 400px;
    overflow: hidden;
}

.pfv-field span {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 7%;
    height: 100%;
    margin-left: calc((var(--r) - 4) * 11% - 3.5%);
    background: repeating-linear-gradient(#4f5f2c 0 12px, #79865d 12px 24px);
    transform-origin: 50% 100%;
    transform: rotateX(62deg);
    opacity: .9;
    animation: pfv-rows 3s linear infinite;
}

@keyframes pfv-rows { to { background-position: 0 24px; } }

.pfv-scan {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f0d040, transparent);
    box-shadow: 0 0 20px #f0d040;
    animation: pfv-scan 3.5s ease-in-out infinite;
}

@keyframes pfv-scan { 0%, 100% { top: 5%; } 50% { top: 95%; } }

.pfv-agro-hud {
    position: absolute;
    left: 18px; top: 18px;
    display: flex;
    gap: 10px;
    z-index: 3;
}

.pfv-agro-hud div {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15, 15, 26, .7);
    border: 1px solid rgba(221, 169, 51, .35);
    backdrop-filter: blur(8px);
    color: #fff;
}

.pfv-agro-hud em { display: block; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #DDA933; }
.pfv-agro-hud b { font-family: var(--display); font-size: 22px; }
.pfv-agro-hud i { font-style: normal; margin-left: 3px; color: rgba(255, 255, 255, .6); font-size: 13px; }

/* ---- Namigration ---- */

.pfv-nam { position: relative; display: grid; place-items: center; min-height: 500px; }

.pfv-globe { position: relative; width: min(420px, 90%); aspect-ratio: 1; }
.pfv-halo {
    position: absolute;
    inset: -4%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 164, 55, .35), transparent 65%);
    filter: blur(20px);
    animation: pf-breathe-soft 5s ease-in-out infinite;
}

@keyframes pf-breathe-soft { 50% { transform: scale(1.12); opacity: .6; } }

/* The logo's globe fills the square box; the wordmark under it is clipped off.
   (The source image is 1513x1790 with the circle's centre at 42% height.) */
.pfv-nam-logo {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    max-width: none;
    clip-path: circle(45.7% at 50% 42.3%);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
    animation: pfv-float-flat 7s ease-in-out infinite;
}

@keyframes pfv-float-flat { 50% { transform: translateY(-10px); } }

.pfv-orbit { position: absolute; inset: -7%; border-radius: 50%; border: 1px dashed rgba(212, 164, 55, .35); animation: pfv-orbit 14s linear infinite; }

.pfv-plane {
    position: absolute;
    top: -16px;
    left: 50%;
    margin-left: -14px;
    font-size: 28px;
    line-height: 1;
    color: #d4a437;
    text-shadow: 0 0 16px rgba(212, 164, 55, .8);
    transform: rotate(0deg);
}

@keyframes pfv-orbit { to { transform: rotate(360deg); } }

.pfv-orbit-2 { inset: -16%; border-style: solid; border-color: rgba(198, 79, 46, .25); animation-duration: 30s; animation-direction: reverse; }

.pfv-visas { position: absolute; inset: 0; pointer-events: none; }

.pfv-visas span {
    position: absolute;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #0f2744;
    background: linear-gradient(135deg, #fbe89a, #d4a437);
    box-shadow: 0 10px 30px -8px rgba(212, 164, 55, .6);
    opacity: 0;
    animation: pfv-visa 12s var(--ease) infinite;
    animation-delay: calc(var(--i) * 2s);
}

.pfv-visas span:nth-child(1) { top: 8%;  left: 2%; }
.pfv-visas span:nth-child(2) { top: 18%; right: 0; }
.pfv-visas span:nth-child(3) { bottom: 22%; left: 0; }
.pfv-visas span:nth-child(4) { bottom: 8%; right: 4%; }
.pfv-visas span:nth-child(5) { top: 48%; right: -4%; }
.pfv-visas span:nth-child(6) { top: 44%; left: -4%; }

@keyframes pfv-visa {
    0%        { opacity: 0; transform: translateY(14px) scale(.9); }
    4%, 30%   { opacity: 1; transform: none; }
    36%, 100% { opacity: 0; transform: translateY(-14px) scale(.95); }
}

/* ---- LifeBeacon ---- */

.pfv-lb { position: relative; display: grid; place-items: center; min-height: 600px; }

.pfv-pulse { position: absolute; width: 440px; height: 440px; max-width: 100%; }
.pfv-pulse span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(195, 38, 47, .55);
    animation: pfv-pulse 3s ease-out infinite;
}
.pfv-pulse span:nth-child(2) { animation-delay: 1s; }
.pfv-pulse span:nth-child(3) { animation-delay: 2s; }

@keyframes pfv-pulse { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }

.pfv-phone {
    position: relative;
    width: 260px;
    border-radius: 40px;
    padding: 10px;
    background: linear-gradient(145deg, #2b3a4b, #0b1219);
    box-shadow: 0 60px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(198, 162, 92, .4), inset 0 0 0 2px rgba(255, 255, 255, .05);
    transform: translateZ(60px);
    animation: pfv-float 6s ease-in-out infinite;
}

.pfv-phone img { border-radius: 30px; }

@keyframes pfv-float { 50% { transform: translateZ(60px) translateY(-14px); } }

.pfv-ecg { position: absolute; left: -10%; right: -10%; top: 50%; width: 120%; height: 80px; transform: translateY(-50%); z-index: -1; }
.pfv-ecg path {
    fill: none;
    stroke: #C6A25C;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    filter: drop-shadow(0 0 6px rgba(198, 162, 92, .8));
    animation: pfv-ecg 3s linear infinite;
}

@keyframes pfv-ecg { to { stroke-dashoffset: -700; } }

.pfv-toast {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 12px 44px;
    border-radius: 14px;
    background: rgba(22, 35, 47, .88);
    border: 1px solid rgba(198, 162, 92, .45);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12.5px;
    transform: translateZ(90px);
    opacity: 0;
    animation: pfv-toast 8s var(--ease) infinite;
}

.pfv-toast::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px; height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background: #C3262F;
    box-shadow: 0 0 12px #C3262F;
}

.pfv-toast b { font-size: 14px; color: #D9BC82; }
.pfv-toast span { color: rgba(255, 255, 255, .7); }
.pfv-toast-a { top: 16%; right: 0; }
.pfv-toast-b { bottom: 16%; left: 0; animation-delay: 1.6s; }
.pfv-toast-b::before { background: #1DC973; box-shadow: 0 0 12px #1DC973; }

@keyframes pfv-toast {
    0%        { opacity: 0; transform: translateZ(90px) translateY(20px) scale(.9); }
    8%, 60%   { opacity: 1; transform: translateZ(90px); }
    70%, 100% { opacity: 0; transform: translateZ(90px) translateY(-10px); }
}

/* ---- Two Farm Tours ---- */

.pfv-tf {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: #0e1217;
    box-shadow: 0 50px 90px -30px rgba(23, 29, 37, .55), 0 0 0 1px rgba(196, 84, 42, .25);
}

.pfv-tf-hero { position: relative; height: 380px; overflow: hidden; }
.pfv-tf-hero img { width: 100%; height: 100%; object-fit: cover; animation: pfv-kenburns 18s ease-in-out infinite alternate; }

@keyframes pfv-kenburns { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.25) translate(-4%, -3%); } }

.pfv-tf-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    background: linear-gradient(transparent 30%, rgba(14, 18, 23, .85));
    color: #faf5ee;
}

.pfv-tf-coord { font-family: 'Courier New', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; color: #e3b463; }
.pfv-tf-overlay b { font-family: var(--display); font-size: 2.2rem; line-height: 1.05; letter-spacing: -.02em; margin-top: 6px; }
.pfv-tf-overlay em { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 1.4rem; color: #ec9a6a; }

.pfv-reels { padding: 16px 0; overflow: hidden; background: #12171e; }
.pfv-reels-track { display: flex; gap: 12px; width: max-content; animation: pf-marquee 26s linear infinite; }

.pfv-reel {
    position: relative;
    width: 92px;
    height: 150px;
    border-radius: 14px;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(242, 234, 224, .12);
}

.pfv-reel img { width: 100%; height: 100%; object-fit: cover; }

.pfv-reel i {
    position: absolute;
    left: 50%; top: 50%;
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: rgba(250, 245, 238, .85);
}

.pfv-reel i::after {
    content: '';
    position: absolute;
    left: 12px; top: 9px;
    border-left: 9px solid #c4542a;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.pfv-tf-price {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 16px;
    border-radius: 14px;
    background: #c4542a;
    color: #faf5ee;
    box-shadow: 0 14px 30px -10px rgba(196, 84, 42, .8);
    transform: rotate(4deg);
    animation: pfv-bob 5s ease-in-out infinite;
}

.pfv-tf-price span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.pfv-tf-price b { font-family: var(--display); font-size: 18px; }

@keyframes pfv-bob { 50% { transform: rotate(-2deg) translateY(-6px); } }

/* ---- Mooirivier ---- */

.pfv-mr { background: #1e1e1e; }
.pfv-mr .pfv-bar { background: #111; }

.pfv-net {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}

.pfv-net b { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; transition: background .3s; }
.pfv-net .on  { color: #22c55e; }
.pfv-net .off { color: #F6B51A; display: none; }

/* JS flips .is-offline every few seconds: the app keeps working either way. */
.pfv-mr.is-offline .pfv-net b    { background: #F6B51A; }
.pfv-mr.is-offline .pfv-net .on  { display: none; }
.pfv-mr.is-offline .pfv-net .off { display: inline; }

.pfv-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; position: relative; }

.pfv-col { padding: 10px; border-radius: 12px; background: #2a2a2a; min-height: 230px; display: flex; flex-direction: column; gap: 8px; }
.pfv-col h6 { margin: 0 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a3a3a3; }

.pfv-card {
    position: relative;
    padding: 10px 10px 10px 16px;
    border-radius: 9px;
    background: #3a3a3a;
    font-size: 12px;
    line-height: 1.35;
    color: #f5f5f5;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .7);
}

.pfv-card i { position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: #E0262B; }
.pfv-card.c2 i { background: #F6B51A; }
.pfv-card.c3 i { background: #1e40af; }
.pfv-card.done { opacity: .55; text-decoration: line-through; }

/* One card travels To do → In progress → Done, over and over. */
.pfv-mover { z-index: 2; animation: pfv-move 9s var(--ease) infinite; }
.pfv-mover i { background: #F6B51A; }

@keyframes pfv-move {
    0%, 12%  { transform: translate(0, 0) rotate(0); }
    20%      { transform: translate(calc(50% + 15px), -26px) rotate(-4deg); box-shadow: 0 30px 40px -12px rgba(0, 0, 0, .8); }
    30%, 45% { transform: translate(calc(100% + 30px), 0) rotate(0); }
    53%      { transform: translate(calc(150% + 45px), -26px) rotate(4deg); box-shadow: 0 30px 40px -12px rgba(0, 0, 0, .8); }
    62%, 88% { transform: translate(calc(200% + 60px), 0) rotate(0); opacity: 1; }
    95%      { opacity: 0; transform: translate(calc(200% + 60px), 0); }
    100%     { opacity: 0; transform: translate(0, 0); }
}

.pfv-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 16px 18px; }
.pfv-cal span { height: 26px; border-radius: 7px; background: #2a2a2a; }
.pfv-cal .busy { background: linear-gradient(135deg, rgba(224, 38, 43, .6), rgba(246, 181, 26, .5)); }
.pfv-cal .today { box-shadow: 0 0 0 2px #F6B51A; animation: pfv-today 2s ease-in-out infinite; }

@keyframes pfv-today { 50% { box-shadow: 0 0 0 2px #F6B51A, 0 0 18px #F6B51A; } }

.pfv-mr-logo {
    position: absolute;
    width: 58%;
    right: -4%;
    bottom: -16%;
    padding: 6px 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
    transform: translateZ(90px) rotate(-3deg);
    animation: pfv-bob 6s ease-in-out infinite;
}

/* ---- Breach ---- */

.pfv-br { background: #07140e; }
.pfv-br .pfv-bar { background: #0B321F; }

.pfv-br-body { display: grid; grid-template-columns: 62px 1fr; min-height: 380px; }
.pfv-br-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0; background: #0a1f15; }
.pfv-br-side b {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: #1DC973;
    color: #07140e;
    font-family: var(--display);
    margin-bottom: 8px;
}
.pfv-br-side span { width: 22px; height: 6px; border-radius: 3px; background: rgba(185, 248, 217, .15); }
.pfv-br-side span.on { background: #1DC973; }

.pfv-br-main { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.pfv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pfv-kpis div { padding: 12px; border-radius: 10px; background: rgba(29, 201, 115, .08); border: 1px solid rgba(29, 201, 115, .2); }
.pfv-kpis em { display: block; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8fb3a1; }
.pfv-kpis b { font-family: var(--display); font-size: 24px; color: #ECFEF5; }

.pfv-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

.pfv-chart span {
    flex: 1;
    height: var(--h);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(#1DC973, rgba(29, 201, 115, .2));
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 1s var(--ease);
}

.is-in .pfv-chart span { transform: scaleY(1); }
.is-in .pfv-chart span:nth-child(2)  { transition-delay: .05s; }
.is-in .pfv-chart span:nth-child(3)  { transition-delay: .1s; }
.is-in .pfv-chart span:nth-child(4)  { transition-delay: .15s; }
.is-in .pfv-chart span:nth-child(5)  { transition-delay: .2s; }
.is-in .pfv-chart span:nth-child(6)  { transition-delay: .25s; }
.is-in .pfv-chart span:nth-child(7)  { transition-delay: .3s; }
.is-in .pfv-chart span:nth-child(8)  { transition-delay: .35s; }
.is-in .pfv-chart span:nth-child(9)  { transition-delay: .4s; }
.is-in .pfv-chart span:nth-child(10) { transition-delay: .45s; }
.is-in .pfv-chart span:nth-child(11) { transition-delay: .5s; }
.is-in .pfv-chart span:nth-child(12) { transition-delay: .55s; }

.pfv-tickets { display: flex; flex-direction: column; gap: 6px; }

.pfv-tickets div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    font-size: 12.5px;
    color: #ECFEF5;
    animation: pfv-ticket 6s var(--ease) infinite;
}

.pfv-tickets div:nth-child(2) { animation-delay: .3s; }
.pfv-tickets div:nth-child(3) { animation-delay: .6s; }

@keyframes pfv-ticket { 0% { transform: translateX(30px); opacity: 0; } 10%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }

.pfv-tickets i { width: 8px; height: 8px; border-radius: 50%; }
.pfv-tickets .p-high   { background: #fbbf24; }
.pfv-tickets .p-urgent { background: #f87171; box-shadow: 0 0 10px #f87171; }
.pfv-tickets .p-low    { background: #1DC973; }
.pfv-tickets em { margin-left: auto; font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(29, 201, 115, .14); color: #1DC973; }

/* ---- Sentinel ---- */

.pfv-sn { position: relative; display: grid; place-items: center; min-height: 560px; }

.pfv-sn-shield { position: absolute; width: 70%; max-width: 380px; opacity: .9; z-index: -1; }
.pfv-sn-shield svg { width: 100%; animation: pfv-shield 6s ease-in-out infinite; }
.pfv-sn-shield path { fill: rgba(99, 102, 241, .08); stroke: rgba(168, 85, 247, .45); stroke-width: 1.5; }
.pfv-sn-shield .k { fill: rgba(168, 85, 247, .25); stroke: none; }

@keyframes pfv-shield { 50% { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(168, 85, 247, .5)); } }

.pfv-sn-pop {
    width: 340px;
    max-width: 100%;
    padding: 18px;
    border-radius: 20px;
    background: rgba(27, 31, 43, .92);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), 0 0 80px -20px rgba(99, 102, 241, .5);
    transform: translateZ(60px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #e8eaf0;
}

.pfv-sn-head { display: flex; align-items: center; gap: 10px; }
.pfv-sn-head img { width: 30px; height: 30px; border-radius: 8px; }
.pfv-sn-head b { font-family: var(--display); font-size: 17px; }
.pfv-sn-lock { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(52, 211, 153, .14); color: #34d399; }

.pfv-sn-item, .pfv-sn-totp, .pfv-sn-gen, .pfv-sn-health {
    padding: 12px;
    border-radius: 12px;
    background: #232838;
    border: 1px solid rgba(255, 255, 255, .06);
}

.pfv-sn-item { display: flex; align-items: center; gap: 10px; }
.pfv-sn-fav { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #6366f1, #a855f7); font-weight: 800; }
.pfv-sn-item b { display: block; font-size: 13.5px; }
.pfv-sn-item em, .pfv-sn-totp em, .pfv-sn-gen em, .pfv-sn-health em { font-style: normal; font-size: 11px; color: #9aa3bd; }
.pfv-sn-fill {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    animation: pfv-fill 3s ease-in-out infinite;
}

@keyframes pfv-fill { 50% { box-shadow: 0 0 0 5px rgba(99, 102, 241, .25); } }

.pfv-sn-totp { display: flex; align-items: center; gap: 12px; }
.pfv-sn-totp svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.pfv-sn-totp circle { fill: none; stroke-width: 4; }
.pfv-sn-totp .bg { stroke: #2c3245; }
.pfv-sn-totp .fg { stroke: #a855f7; stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.pfv-sn-totp b { display: block; font-family: 'Courier New', ui-monospace, monospace; font-size: 24px; letter-spacing: .08em; color: #fff; }

.pfv-sn-gen code {
    display: block;
    margin: 4px 0 8px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 15px;
    color: #c4b5fd;
    background: none;
    padding: 0;
    word-break: break-all;
}

.pfv-sn-meter { height: 6px; border-radius: 3px; background: #2c3245; overflow: hidden; }
.pfv-sn-meter span { display: block; height: 100%; width: 92%; background: linear-gradient(90deg, #fbbf24, #34d399); animation: pfv-meter 3s ease-in-out infinite; }
.pfv-sn-gen small { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; color: #34d399; }

@keyframes pfv-meter { 0% { width: 10%; } 40%, 100% { width: 94%; } }

.pfv-sn-health { display: flex; align-items: baseline; gap: 6px; }
.pfv-sn-health b { margin-left: auto; font-family: var(--display); font-size: 22px; color: #34d399; }
.pfv-sn-health i { font-style: normal; color: #6b7391; font-size: 12px; }

/* -------------------------------- CLOSING -------------------------------- */

.pf-close {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 140px 0 150px;
    background: radial-gradient(100% 80% at 50% 100%, var(--navy2), var(--navy) 60%, #070b12);
}

.pf-caps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pf-cap {
    position: relative;
    padding: 30px 28px;
    border-radius: 22px;
    background:
        radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(69, 249, 171, .14), transparent 70%),
        rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    transition: transform .5s var(--ease), border-color .4s;
}

.pf-cap:hover { transform: translateY(-6px); border-color: rgba(69, 249, 171, .4); }

.pf-cap-icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(69, 249, 171, .2), rgba(0, 212, 170, .05));
    border: 1px solid rgba(69, 249, 171, .35);
}

.pf-cap-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--cw); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-cap h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: #fff; margin: 22px 0 8px; }
.pf-cap p { margin: 0; font-size: .97rem; color: rgba(255, 255, 255, .62); }

.pf-sign {
    margin: 110px 0 0;
    text-align: center;
    font-family: var(--display);
    font-size: clamp(2.4rem, 7vw, 6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    color: #fff;
}

.pf-sign span { display: block; }

/* ------------------------------- Responsive ------------------------------ */

@media (max-width: 1100px) {
    .pf-index-grid { grid-template-columns: repeat(2, 1fr); }
    .pf-chapter-inner { grid-template-columns: 1fr; gap: 56px; }
    .is-flip .pf-copy, .is-flip .pf-visual { order: 0; }
    .pf-visual { max-width: 620px; width: 100%; margin: 0 auto; }
    .pf-caps { grid-template-columns: repeat(2, 1fr); }
    .pf-rail { display: none; }
}

@media (max-width: 640px) {
    .pf-hero { padding: 80px 0 110px; }
    .pf-index, .pf-close { padding: 90px 0; }
    .pf-index-grid, .pf-caps { grid-template-columns: 1fr; }
    .pf-tile { min-height: 200px; }
    .pf-chapter { padding: 90px 0; min-height: 0; }
    .pf-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .pf-stat { padding: 12px 10px; }
    .pfv-agro { height: 380px; }
    .pfv-titan-body { grid-template-columns: 1fr; }
    .pfv-titan-side { display: none; }
    .pfv-br-body { grid-template-columns: 1fr; }
    .pfv-br-side { display: none; }
    .pfv-kanban { gap: 6px; padding: 10px; }
    .pfv-col { padding: 7px; min-height: 200px; }
    .pfv-card { font-size: 10.5px; padding: 8px 6px 8px 11px; }
    .pfv-nam { min-height: 400px; }
    .pfv-visas span { font-size: 11px; padding: 6px 10px; }
    .pfv-lb { min-height: 520px; }
    .pfv-phone { width: 220px; }
    .pfv-toast-a { right: -4px; }
    .pfv-toast-b { left: -4px; }
    .pf-sign { margin-top: 70px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf *, .pf *::before, .pf *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .pf-word { opacity: 1; transform: none; filter: none; }
    .pf.js [data-reveal] { opacity: 1; transform: none; filter: none; }
}