/* ================================================================
   PORTFOLIO PAGE — Ultra-Modern with Filter
   ================================================================ */
.pf-page { font-family: var(--font-display); }

/* ── Hero ── */
.pf-hero { background:#0A0B0D; padding:72px 0 64px; position:relative; overflow:hidden; }
.pf-hero__bg { position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 60% at 30% 50%,rgba(253,201,15,.06) 0%,transparent 65%),radial-gradient(ellipse 50% 50% at 80% 20%,rgba(210,106,4,.05) 0%,transparent 60%); }
.pf-hero__inner { position:relative;z-index:1; }
.pf-bread { display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.4);margin-bottom:20px; }
.pf-bread a { color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s; } .pf-bread a:hover{color:#FDC90F;} .pf-bread span{color:rgba(255,255,255,.25);} .pf-bread span:last-child{color:rgba(255,255,255,.7);}
.pf-hero__title { font-size:clamp(32px,5vw,64px);font-weight:800;color:#fff;letter-spacing:-.035em;line-height:1.1;margin:0 0 16px; }
.pf-gold { color:#FDC90F; }
.pf-hero__sub { font-size:16px;color:rgba(255,255,255,.55);line-height:1.7;max-width:560px;margin:0 0 36px; }
.pf-hero__stats { display:flex;align-items:center;gap:28px;flex-wrap:wrap; }
.pf-stat { text-align:left; }
.pf-stat__n { font-size:26px;font-weight:900;color:#FDC90F;display:block;line-height:1; }
.pf-stat__l { font-size:11px;color:rgba(255,255,255,.4);font-weight:600;text-transform:uppercase;letter-spacing:.07em;display:block;margin-top:3px; }
.pf-stat-div { width:1px;height:36px;background:rgba(255,255,255,.12); }

/* ── Main section ── */
.pf-main { padding:56px 0 80px;background:#F8FAFC; }

/* Filter bar */
.pf-filters {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:20px;
}
.pf-filter {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:8px 16px;
    background:#fff;
    border:1.5px solid #E5EBF0;
    border-radius:100px;
    font-family:var(--font-display);
    font-size:13px;
    font-weight:600;
    color:#64748B;
    cursor:pointer;
    transition:all .2s;
    white-space:nowrap;
}
.pf-filter:hover { border-color:#0A0B0D;color:#0A0B0D; }
.pf-filter.active { background:#0A0B0D;border-color:#0A0B0D;color:#fff; }
.pf-filter__count { font-size:11px;background:rgba(255,255,255,.2);border-radius:100px;padding:1px 7px;font-weight:700; }
.pf-filter.active .pf-filter__count { background:rgba(255,255,255,.18); }

/* Search */
.pf-search-wrap { position:relative;margin-bottom:32px; }
.pf-search-icon { position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9CA3AF;pointer-events:none; }
.pf-search {
    width:100%;
    padding:13px 16px 13px 44px;
    background:#fff;
    border:1.5px solid #E5EBF0;
    border-radius:12px;
    font-family:var(--font-display);
    font-size:14px;
    color:#0A0B0D;
    outline:none;
    transition:all .2s;
    box-sizing:border-box;
}
.pf-search:focus { border-color:#FDC90F;box-shadow:0 0 0 3px rgba(253,201,15,.1); }
.pf-search::placeholder { color:#9CA3AF; }

/* Grid */
.pf-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

/* Card */
.pf-card {
    display:flex;
    flex-direction:column;
    padding:20px;
    border-radius:14px;
    border:1.5px solid #E5EBF0;
    background:#fff;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:all .25s cubic-bezier(.34,1.56,.64,1);
    min-height:190px;
}
.pf-card::before {
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    border-radius:14px 14px 0 0;
    background:#E5EBF0;
    transition:background .25s;
}
.pf-card:hover { border-color:transparent;transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.1); }
.pf-card--blue:hover::before    { background:linear-gradient(90deg,#3B82F6,#6366F1); }
.pf-card--navy:hover::before    { background:linear-gradient(90deg,#1E3A8A,#3B82F6); }
.pf-card--purple:hover::before  { background:linear-gradient(90deg,#7C3AED,#A855F7); }
.pf-card--pink:hover::before    { background:linear-gradient(90deg,#EC4899,#F43F5E); }
.pf-card--dark:hover::before    { background:linear-gradient(90deg,#0A0B0D,#374151); }
.pf-card--green:hover::before   { background:linear-gradient(90deg,#10B981,#34D399); }
.pf-card--orange:hover::before  { background:linear-gradient(90deg,#D26A04,#FDC90F); }
.pf-card--red:hover::before     { background:linear-gradient(90deg,#EF4444,#F97316); }
.pf-card--violet:hover::before  { background:linear-gradient(90deg,#8B5CF6,#D946EF); }
.pf-card--teal:hover::before    { background:linear-gradient(90deg,#0D9488,#06B6D4); }
.pf-card--amber:hover::before   { background:linear-gradient(90deg,#FDC90F,#F59E0B); }
.pf-card--sky:hover::before     { background:linear-gradient(90deg,#0EA5E9,#38BDF8); }
.pf-card--rose:hover::before    { background:linear-gradient(90deg,#F43F5E,#FB7185); }
.pf-card--lime:hover::before    { background:linear-gradient(90deg,#65A30D,#84CC16); }
.pf-card--indigo:hover::before  { background:linear-gradient(90deg,#4338CA,#818CF8); }
.pf-card--slate:hover::before   { background:linear-gradient(90deg,#475569,#64748B); }

.pf-card__top { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.pf-card__num { font-size:11px;font-weight:800;color:#CBD5E1;letter-spacing:.04em; }
.pf-card__tag { font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#64748B;background:#F1F5F9;border:1px solid #E2E8F0;padding:3px 10px;border-radius:100px;transition:all .25s;white-space:nowrap; }
.pf-card:hover .pf-card__tag { background:#0A0B0D;color:#fff;border-color:#0A0B0D; }

.pf-card__name { font-size:14.5px;font-weight:800;color:#0A0B0D;letter-spacing:-.02em;line-height:1.3;margin:0 0 4px; }
.pf-card__type { font-size:11.5px;font-weight:600;color:#94A3B8;margin:0 0 8px; }
.pf-card__desc { font-size:12.5px;color:#64748B;line-height:1.6;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

.pf-card__foot { display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid #F1F5F9;margin-top:12px;gap:8px; }
.pf-card__url { font-size:11px;font-weight:600;color:#94A3B8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;transition:color .25s; }
.pf-card:hover .pf-card__url { color:#D26A04; }
.pf-card__arrow { width:26px;height:26px;border-radius:50%;background:#F1F5F9;border:1px solid #E2E8F0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#94A3B8;flex-shrink:0;transition:all .25s; }
.pf-card:hover .pf-card__arrow { background:#0A0B0D;border-color:#0A0B0D;color:#fff;transform:rotate(-45deg); }

/* Hidden card */
.pf-card.pf-hidden { display:none; }

/* No results */
.pf-no-results { text-align:center;padding:80px 24px; }
.pf-no-results__ico { font-size:48px;display:block;margin-bottom:16px; }
.pf-no-results h3 { font-size:22px;font-weight:800;color:#0A0B0D;margin:0 0 8px; }
.pf-no-results p { font-size:14px;color:#64748B;margin:0 0 20px; }
.pf-no-results__btn { padding:10px 24px;background:#0A0B0D;color:#fff;border:none;border-radius:100px;font-family:var(--font-display);font-size:13.5px;font-weight:700;cursor:pointer;transition:all .25s; }
.pf-no-results__btn:hover { background:#D26A04; }

/* ── CTA ── */
.pf-cta { padding:64px 0;background:#0A0B0D;border-top:1px solid rgba(255,255,255,.06); }
.pf-cta__inner { display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; }
.pf-cta__eye { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#D26A04;margin:0 0 8px;display:flex;align-items:center;gap:7px; }
.pf-cta__eye::before { content:'';width:16px;height:2px;background:#FDC90F;border-radius:2px;display:inline-block; }
.pf-cta__title { font-size:clamp(22px,2.8vw,36px);font-weight:800;color:#fff;letter-spacing:-.025em;margin:0 0 10px; }
.pf-cta__sub { font-size:14.5px;color:rgba(255,255,255,.5);line-height:1.65;margin:0;max-width:440px; }
.pf-cta__btns { display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0; }
.pf-cta__btn-primary { display:inline-flex;align-items:center;gap:7px;padding:12px 24px;background:linear-gradient(135deg,#FDC90F,#F5B800);color:#0A0B0D;border-radius:100px;font-size:13.5px;font-weight:800;text-decoration:none;transition:all .25s; }
.pf-cta__btn-primary:hover { background:linear-gradient(135deg,#D26A04,#c05c00);color:#fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(210,106,4,.35); }
.pf-cta__btn-ghost { display:inline-flex;align-items:center;gap:7px;padding:12px 22px;background:transparent;color:rgba(255,255,255,.7);border:1.5px solid rgba(255,255,255,.2);border-radius:100px;font-size:13.5px;font-weight:700;text-decoration:none;transition:all .25s; }
.pf-cta__btn-ghost:hover { border-color:#fff;color:#fff;background:rgba(255,255,255,.06); }

/* Responsive */
@media(max-width:1199px){.pf-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:767px){.pf-hero{padding:44px 0 52px;}.pf-grid{grid-template-columns:repeat(2,1fr);gap:10px;}.pf-hero__stats{gap:16px;}.pf-stat__n{font-size:22px;}.pf-cta__inner{flex-direction:column;align-items:flex-start;}.pf-main{padding:40px 0 60px;}}
@media(max-width:479px){.pf-grid{grid-template-columns:1fr;}}