/* =====================================================
   BD PORTFOLIO PAGE
   ===================================================== */

.bd-portfolio-page { overflow-x: hidden; }

/* Shared section typography */
.pf-section-head { text-align: center; margin-bottom: 48px; }
.pf-section-head h2 {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #111827;
    margin-bottom: 10px;
}
.pf-section-head p { color: #6b7280; font-size: 16px; margin-bottom: 16px; }
.pf-section-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient( 90deg, #ff4da6, #2563eb );
    border-radius: 99px;
    margin: 0 auto;
}
.pf-left-title {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 28px;
}

/* ===================================================
   HERO
=================================================== */
.pf-hero {
    background: linear-gradient( 135deg, #060e25 0%, #0b1a3e 60%, #061530 100% );
    padding: 80px 0 100px;
    min-height: calc( 90vh - 120px );
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.pf-hero-bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient( circle, rgba( 37, 99, 235, 0.18 ) 0%, transparent 70% );
    top: 50%;
    right: 5%;
    transform: translateY( -50% );
    pointer-events: none;
}

.pf-hero-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

/* Hero left */
.pf-intro-label {
    display: inline-block;
    color: #fbbf24;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pf-hero-title {
    font-size: 74px;
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 22px;
}

.pf-name-white  { color: #ffffff; display: block; }
.pf-name-yellow { color: #fbbf24; font-style: italic; display: block; }

.pf-hero-desc {
    color: rgba( 255, 255, 255, 0.72 );
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 26px;
    max-width: 480px;
}

.pf-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}

.pf-skill-tags span {
    padding: 6px 18px;
    border: 1.5px solid rgba( 255, 255, 255, 0.28 );
    border-radius: 999px;
    color: rgba( 255, 255, 255, 0.82 );
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur( 4px );
}

.pf-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

.pf-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient( 90deg, #ff4da6, #2563eb );
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.pf-btn-primary:hover { opacity: 0.88; color: #fff; transform: translateY( -2px ); }

.pf-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border: 2px solid rgba( 255, 255, 255, 0.38 );
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.pf-btn-outline:hover { border-color: #fff; background: rgba( 255, 255, 255, 0.06 ); color: #fff; }

/* Hero right */
.pf-hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.pf-avatar-wrap { position: relative; width: 280px; height: 280px; }

.pf-avatar-ring {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: linear-gradient( 135deg, #1e3a6e 0%, #2563eb 100% );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 14px rgba( 37, 99, 235, 0.14 ), 0 0 0 28px rgba( 37, 99, 235, 0.07 );
    position: relative;
    z-index: 2;
}

.pf-avatar-img {
    font-size: 110px;
    color: rgba( 255, 255, 255, 0.6 );
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
}
.pf-avatar-photo {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    border-radius: 50%; display: block;
}

/* Use a real image via WordPress media if uploaded */
.pf-avatar-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.pf-avatar-decoration {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.pf-dec-1 {
    width: 24px;
    height: 24px;
    background: #fbbf24;
    top: 10%;
    right: -10px;
    box-shadow: 0 0 0 6px rgba( 251, 191, 36, 0.2 );
}

.pf-dec-2 {
    width: 16px;
    height: 16px;
    background: #ff4da6;
    bottom: 15%;
    left: -8px;
    box-shadow: 0 0 0 5px rgba( 255, 77, 166, 0.2 );
}

/* Stats */
.pf-stats-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.pf-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-radius: 14px;
}

.pf-stat-card strong {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.pf-stat-card span { font-size: 13px; font-weight: 700; }
.pf-stat-card > div > p { font-size: 12px; margin: 3px 0 0 0; opacity: 0.85; }
.pf-stat-card > i { font-size: 26px; opacity: 0.6; }

.pf-stat-green { background: #16a34a; color: #fff; }
.pf-stat-lime  { background: #65a30d; color: #fff; }
.pf-stat-blue  { background: #1d4ed8; color: #fff; }

/* ===================================================
   SERVICES
=================================================== */
.pf-services { padding: 80px 0; background: #f8f9fb; }

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

.pf-svc-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pf-svc-card:hover {
    transform: translateY( -4px );
    box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.09 );
}

.pf-svc-dark {
    background: #0a1a38;
    border-color: transparent;
    color: #e2e8f0;
}

.pf-svc-icon {
    font-size: 28px;
    margin-bottom: 14px;
    color: #ff4da6;
}

.pf-svc-dark .pf-svc-icon { color: #fbbf24; }

.pf-svc-card h4 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 12px 0;
    color: #111827;
}

.pf-svc-dark h4 { color: #fff; }

.pf-svc-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pf-svc-card ul li {
    font-size: 13px;
    color: #6b7280;
    padding-left: 14px;
    position: relative;
}

.pf-svc-card ul li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #ff4da6;
    font-weight: 700;
}

.pf-svc-dark ul li { color: rgba( 226, 232, 240, 0.75 ); }
.pf-svc-dark ul li::before { color: #fbbf24; }

/* ===================================================
   TESTIMONIALS
=================================================== */
.pf-testimonials { padding: 80px 0; background: #fff; }

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

.pf-testi-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #f0f0f0;
    transition: box-shadow 0.2s;
}

.pf-testi-card:hover { box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.08 ); }

.pf-testi-stars { color: #f59e0b; font-size: 16px; margin-bottom: 14px; display: flex; gap: 3px; }

.pf-testi-text {
    font-size: 14px;
    color: #374151;
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 20px;
}

.pf-testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pf-testi-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient( 135deg, #ff4da6, #2563eb );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.pf-testi-author strong { display: block; font-size: 14px; color: #111827; }
.pf-testi-author span   { font-size: 12px; color: #9ca3af; }

/* ===================================================
   CLIENT REVIEWS
=================================================== */
.pf-client-reviews { padding: 80px 0; background: #f3f4f6; }

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

.pf-review-card {
    background: #0a1a38;
    border-radius: 16px;
    padding: 28px;
    color: #e2e8f0;
}

.pf-review-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pf-review-avatar {
    width: 44px;
    height: 44px;
    background: rgba( 255, 255, 255, 0.1 );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba( 255, 255, 255, 0.7 );
    flex-shrink: 0;
}

.pf-review-top strong { font-size: 14px; color: #fff; display: block; }

.pf-review-badge {
    display: inline-block;
    background: rgba( 251, 191, 36, 0.2 );
    color: #fbbf24;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pf-review-stars {
    margin-left: auto;
    color: #f59e0b;
    font-size: 13px;
    display: flex;
    gap: 2px;
}

.pf-review-card p { font-size: 14px; color: rgba( 226, 232, 240, 0.82 ); line-height: 1.75; }

/* ===================================================
   WHAT I DO (Accordion)
=================================================== */
.pf-what-i-do { padding: 80px 0; background: #fff; }

.pf-wid-inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 60px;
    align-items: start;
}

.pf-wid-left h2 {
    font-size: 32px;
    font-weight: 900;
    color: #111827;
    margin-bottom: 14px;
}

.pf-wid-left p { color: #6b7280; line-height: 1.75; }

/* Accordion */
.pf-acc-item {
    border-bottom: 2px solid #f3f4f6;
}

.pf-acc-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    gap: 16px;
    transition: color 0.2s;
}

.pf-acc-toggle:hover { color: #ff4da6; }
.pf-acc-item.open .pf-acc-toggle { color: #ff4da6; }

.pf-acc-icon {
    flex-shrink: 0;
    font-size: 14px;
    color: #9ca3af;
    transition: transform 0.25s, color 0.2s;
}

.pf-acc-item.open .pf-acc-icon {
    transform: rotate( 45deg );
    color: #ff4da6;
}

.pf-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s;
}

.pf-acc-item.open .pf-acc-body { max-height: 200px; }

.pf-acc-body p {
    padding: 0 0 18px 0;
    color: #6b7280;
    line-height: 1.75;
    font-size: 15px;
}

/* ===================================================
   SKILLS
=================================================== */
.pf-skills { padding: 80px 0; background: #f8f9fb; }

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

.pf-skill-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pf-skill-label span { font-size: 13px; font-weight: 700; color: #374151; }
.pf-skill-pct { color: #ff4da6 !important; }

.pf-skill-track {
    height: 7px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}

.pf-skill-fill {
    height: 100%;
    background: linear-gradient( 90deg, #ff4da6, #2563eb );
    border-radius: 99px;
    transition: width 1.2s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* ===================================================
   PROCESS
=================================================== */
.pf-process { padding: 80px 0; background: #fff; }

.pf-process-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pf-process-left h2 {
    font-size: 30px;
    font-weight: 900;
    color: #111827;
    margin-bottom: 16px;
}

.pf-process-left p { color: #6b7280; line-height: 1.75; margin-bottom: 28px; }

.pf-btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: #111827;
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}

.pf-btn-dark:hover { background: #1f2937; color: #fff; }

.pf-process-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pf-proc-step {
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.pf-proc-num {
    display: block;
    font-size: 36px;
    font-weight: 900;
    opacity: 0.22;
    line-height: 1;
    margin-bottom: 10px;
}

.pf-proc-step h4 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-proc-step p { font-size: 13px; line-height: 1.65; margin: 0; }

.pf-proc-yellow { background: #fbbf24; color: #111; }
.pf-proc-green  { background: #4ade80; color: #111; }
.pf-proc-pink   { background: #f472b6; color: #fff; }
.pf-proc-teal   { background: #2dd4bf; color: #111; }

/* ===================================================
   CTA DISCUSS
=================================================== */
.pf-cta-discuss {
    padding: 100px 0;
    background: linear-gradient( 135deg, #f8f9fb 0%, #fff 100% );
    text-align: center;
}

.pf-cta-icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 28px;
}

.pf-cta-icon-ring {
    width: 80px;
    height: 80px;
    background: linear-gradient( 135deg, #ff4da6, #2563eb );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

.pf-cta-ring-outer {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 2px solid rgba( 255, 77, 166, 0.2 );
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    animation: pf-ring-pulse 2s ease-in-out infinite;
}

@keyframes pf-ring-pulse {
    0%, 100% { transform: translate( -50%, -50% ) scale( 1 ); opacity: 1; }
    50%       { transform: translate( -50%, -50% ) scale( 1.15 ); opacity: 0.5; }
}

.pf-cta-discuss h2 {
    font-size: 32px;
    font-weight: 900;
    color: #111827;
    margin-bottom: 20px;
}

.pf-cta-meta {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    color: #6b7280;
    font-size: 14px;
}

.pf-cta-meta span { display: flex; align-items: center; gap: 6px; }
.pf-cta-meta i { color: #ff4da6; }

.pf-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.pf-btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border: 2px solid #e5e7eb;
    color: #374151;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.pf-btn-outline-dark:hover { border-color: #ff4da6; color: #ff4da6; }

/* ===================================================
   CONTACT FORM
=================================================== */
.pf-contact { padding: 80px 0; background: #f3f4f6; }

.pf-contact-card {
    background: #0a1a38;
    border-radius: 24px;
    padding: 50px;
    max-width: 900px;
    margin: 0 auto;
}

.pf-contact-header {
    text-align: center;
    margin-bottom: 36px;
}

.pf-contact-header h2 {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
}

.pf-contact-header p { color: rgba( 255, 255, 255, 0.6 ); }

.pf-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.pf-field-full { grid-column: 1 / -1; }

.pf-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: rgba( 255, 255, 255, 0.75 );
    margin-bottom: 6px;
}

.pf-req { color: #ff4da6; }

.pf-form-field input,
.pf-form-field select,
.pf-form-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba( 255, 255, 255, 0.1 );
    border-radius: 10px;
    font-size: 14px;
    color: #e2e8f0;
    background: rgba( 255, 255, 255, 0.06 );
    transition: border-color 0.2s;
    box-sizing: border-box;
    appearance: none;
}

.pf-form-field input::placeholder,
.pf-form-field textarea::placeholder { color: rgba( 255, 255, 255, 0.3 ); }

.pf-form-field input:focus,
.pf-form-field select:focus,
.pf-form-field textarea:focus {
    border-color: #ff4da6;
    outline: none;
    background: rgba( 255, 255, 255, 0.09 );
}

.pf-form-field select option { background: #0a1a38; color: #e2e8f0; }

.pf-form-status {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.pf-form-status.pf-success { background: rgba( 16, 185, 129, 0.15 ); color: #6ee7b7; border: 1px solid rgba( 16, 185, 129, 0.3 ); }
.pf-form-status.pf-error   { background: rgba( 239, 68, 68, 0.15 );  color: #fca5a5; border: 1px solid rgba( 239, 68, 68, 0.3 ); }

.pf-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient( 90deg, #ff4da6, #2563eb );
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 10px;
    transition: opacity 0.2s, transform 0.2s;
}

.pf-submit-btn:hover    { opacity: 0.88; transform: translateY( -2px ); }
.pf-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ===================================================
   NEWS FEEDS
=================================================== */
.pf-news { padding: 80px 0; background: #fff; }

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

.pf-news-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pf-news-card:hover {
    transform: translateY( -4px );
    box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.08 );
}

.pf-news-thumb { display: block; }
.pf-news-thumb img { width: 100% !important; height: 200px !important; object-fit: cover; display: block; }

.pf-news-body { padding: 20px; }
.pf-news-date { font-size: 12px; color: #9ca3af; display: block; margin-bottom: 8px; }

.pf-news-body h4 { font-size: 16px; font-weight: 700; margin: 0 0 10px 0; }
.pf-news-body h4 a { text-decoration: none; color: #111827; }
.pf-news-body h4 a:hover { color: #ff4da6; }

.pf-news-body p { font-size: 14px; color: #6b7280; line-height: 1.65; margin-bottom: 16px; }

.pf-news-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff4da6;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.2s;
}

.pf-news-more:hover { gap: 10px; }

/* ===================================================
   RESPONSIVE
=================================================== */
@media ( max-width: 1200px ) {
    .pf-services-grid { grid-template-columns: repeat( 3, 1fr ); }
    .pf-skills-grid   { grid-template-columns: repeat( 3, 1fr ); }
}

@media ( max-width: 1024px ) {
    .pf-hero-title    { font-size: 58px; }
    .pf-hero-inner    { gap: 40px; }
    .pf-process-inner { gap: 40px; }
    .pf-wid-inner     { gap: 40px; }
}

@media ( max-width: 900px ) {
    .pf-testi-grid  { grid-template-columns: 1fr; }
    .pf-reviews-grid { grid-template-columns: 1fr; }
    .pf-news-grid   { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 768px ) {
    .pf-hero-inner    { grid-template-columns: 1fr; text-align: center; }
    .pf-hero-visual   { order: -1; }
    .pf-hero-desc     { max-width: 100%; }
    .pf-skill-tags    { justify-content: center; }
    .pf-hero-btns     { justify-content: center; }
    .pf-hero-title    { font-size: 52px; }
    .pf-stats-cards   { flex-direction: row; flex-wrap: wrap; }
    .pf-stat-card     { flex: 1; min-width: 130px; }

    .pf-services-grid { grid-template-columns: repeat( 2, 1fr ); }
    .pf-skills-grid   { grid-template-columns: repeat( 2, 1fr ); }

    .pf-wid-inner     { grid-template-columns: 1fr; gap: 32px; }
    .pf-process-inner { grid-template-columns: 1fr; gap: 40px; }

    .pf-contact-card  { padding: 32px 24px; }
    .pf-form-grid     { grid-template-columns: 1fr; }
}

@media ( max-width: 600px ) {
    .pf-hero-title    { font-size: 40px; }
    .pf-services-grid { grid-template-columns: 1fr; }
    .pf-process-right { grid-template-columns: 1fr; }
    .pf-news-grid     { grid-template-columns: 1fr; }
    .pf-skills-grid   { grid-template-columns: 1fr 1fr; }
    .pf-avatar-ring   { width: 200px; height: 200px; }
    .pf-avatar-wrap   { width: 200px; height: 200px; }
    .pf-avatar-img    { font-size: 80px; }
    .pf-cta-meta      { flex-direction: column; align-items: center; gap: 10px; }
    .pf-cta-discuss h2 { font-size: 24px; }
}

/* ===================================================
   DARK MODE
=================================================== */
body.dark-mode .pf-section-head h2 { color: #f1f5f9; }
body.dark-mode .pf-left-title      { color: #f1f5f9; }
body.dark-mode .pf-services        { background: #0f172a; }
body.dark-mode .pf-testimonials    { background: #0f172a; }
body.dark-mode .pf-client-reviews  { background: #1e293b; }
body.dark-mode .pf-what-i-do       { background: #0f172a; }
body.dark-mode .pf-skills          { background: #1e293b; }
body.dark-mode .pf-process         { background: #0f172a; }
body.dark-mode .pf-cta-discuss     { background: linear-gradient( 135deg, #1e293b, #0f172a ); }
body.dark-mode .pf-cta-discuss h2  { color: #f1f5f9; }
body.dark-mode .pf-news            { background: #0f172a; }

body.dark-mode .pf-svc-card:not(.pf-svc-dark) { background: #1e293b; border-color: rgba(255,255,255,0.08); }
body.dark-mode .pf-svc-card:not(.pf-svc-dark) h4 { color: #e2e8f0; }
body.dark-mode .pf-svc-card:not(.pf-svc-dark) ul li { color: #94a3b8; }

body.dark-mode .pf-testi-card { background: #1e293b; border-color: rgba(255,255,255,0.06); }
body.dark-mode .pf-testi-author strong { color: #e2e8f0; }
body.dark-mode .pf-testi-text  { color: #94a3b8; }

body.dark-mode .pf-acc-toggle   { color: #e2e8f0; }
body.dark-mode .pf-acc-item     { border-bottom-color: rgba(255,255,255,0.08); }
body.dark-mode .pf-acc-body p   { color: #94a3b8; }
body.dark-mode .pf-wid-left h2  { color: #f1f5f9; }
body.dark-mode .pf-wid-left p   { color: #94a3b8; }
body.dark-mode .pf-process-left h2 { color: #f1f5f9; }
body.dark-mode .pf-process-left p  { color: #94a3b8; }

body.dark-mode .pf-skill-label span { color: #cbd5e1; }
body.dark-mode .pf-skill-track { background: rgba(255,255,255,0.1); }

body.dark-mode .pf-news-card { background: #1e293b; border-color: rgba(255,255,255,0.08); }
body.dark-mode .pf-news-body h4 a { color: #e2e8f0; }
body.dark-mode .pf-news-body p { color: #94a3b8; }

body.dark-mode .pf-contact { background: #1e293b; }

/* =====================================================
   MODALS — Hire Me & View Me
   ===================================================== */
.pf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba( 0, 0, 0, 0.72 );
    backdrop-filter: blur( 6px );
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.pf-modal-overlay.pf-modal-open {
    opacity: 1;
    pointer-events: all;
}

.pf-modal-box {
    background: #fff;
    border-radius: 20px;
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    transform: scale( 0.92 ) translateY( 20px );
    transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 );
    box-shadow: 0 32px 80px rgba( 0, 0, 0, 0.35 );
}

.pf-modal-overlay.pf-modal-open .pf-modal-box {
    transform: scale( 1 ) translateY( 0 );
}

.pf-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #374151;
    transition: background 0.2s, color 0.2s;
}

.pf-modal-close:hover { background: #ff4da6; color: #fff; }

.pf-modal-header {
    text-align: center;
    margin-bottom: 28px;
}

.pf-modal-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient( 135deg, #ff4da6, #2563eb );
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin: 0 auto 16px;
}

.pf-modal-header h3 {
    font-size: 22px;
    font-weight: 900;
    color: #111827;
    margin: 0 0 6px 0;
}

.pf-modal-header p { color: #6b7280; font-size: 14px; margin: 0; }

/* Modal form uses dark card internally — make it light */
.pf-modal-form .pf-form-field label     { color: #374151; }
.pf-modal-form .pf-form-field input,
.pf-modal-form .pf-form-field select,
.pf-modal-form .pf-form-field textarea {
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
}
.pf-modal-form .pf-form-field input::placeholder,
.pf-modal-form .pf-form-field textarea::placeholder { color: #9ca3af; }
.pf-modal-form .pf-form-field input:focus,
.pf-modal-form .pf-form-field select:focus,
.pf-modal-form .pf-form-field textarea:focus {
    border-color: #ff4da6;
    background: #fff;
}
.pf-modal-form .pf-form-field select option { background: #fff; color: #111827; }

/* View Me modal */
.pf-view-box { max-width: 560px; }

.pf-view-profile {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.pf-view-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient( 135deg, #ff4da6, #2563eb );
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    border: 3px solid rgba( 255, 77, 166, 0.3 );
}

.pf-view-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pf-view-info h3 { font-size: 20px; font-weight: 900; color: #111827; margin: 0 0 4px; }
.pf-view-role {
    display: inline-block;
    background: linear-gradient( 90deg, #ff4da6, #2563eb );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
}

.pf-view-info p { color: #6b7280; font-size: 14px; line-height: 1.65; margin: 0; }

.pf-view-skills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.pf-view-skill {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pf-vs-pink   { background: rgba( 255, 77, 166, 0.1 ); color: #ff4da6;  border: 1px solid rgba( 255, 77, 166, 0.3 ); }
.pf-vs-blue   { background: rgba( 37, 99, 235, 0.1 );  color: #2563eb;  border: 1px solid rgba( 37, 99, 235, 0.3 ); }
.pf-vs-purple { background: rgba( 124, 58, 237, 0.1 ); color: #7c3aed; border: 1px solid rgba( 124, 58, 237, 0.3 ); }
.pf-vs-green  { background: rgba( 22, 163, 74, 0.1 );  color: #16a34a;  border: 1px solid rgba( 22, 163, 74, 0.3 ); }

.pf-view-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;
    padding: 16px 0;
}

.pf-view-stats > div {
    flex: 1;
    text-align: center;
    padding: 0 12px;
    border-right: 1px solid #f0f0f0;
}

.pf-view-stats > div:last-child { border-right: none; }
.pf-view-stats strong { display: block; font-size: 22px; font-weight: 900; color: #111827; }
.pf-view-stats span   { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; }

.pf-cv-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient( 90deg, #ff4da6, #2563eb );
    color: #fff;
    border-radius: 50px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.pf-cv-download-btn:hover { opacity: 0.88; color: #fff; transform: translateY( -2px ); }

.pf-cv-note {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 12px;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
}

.pf-cv-note a { color: #ff4da6; }

/* =====================================================
   HERO — enlarged avatar, pulse rings, typewriter, tags
   ===================================================== */

/* Override avatar sizes */
.pf-avatar-wrap { width: 420px !important; height: 420px !important; }
.pf-avatar-ring {
    width: 360px !important;
    height: 360px !important;
    background: none !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    padding: 4px;
}

.pf-avatar-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient( from 0deg, #ff4da6, #fbbf24, #2563eb, #10b981, #ff4da6 );
    animation: pf-ring-spin 7s linear infinite;
    z-index: 0;
}

@keyframes pf-ring-spin {
    from { transform: rotate( 0deg ); }
    to   { transform: rotate( 360deg ); }
}

.pf-avatar-img {
    width: 100% !important;
    height: 100% !important;
    background: #0b1a3e;
    font-size: 120px !important;
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

/* Pulse rings */
.pf-av-pulse {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: pf-av-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

.pf-av-p1 {
    width: 410px;
    height: 410px;
    border: 2px solid rgba( 255, 77, 166, 0.35 );
    transform: translate( -50%, -50% );
    animation-delay: 0s;
}

.pf-av-p2 {
    width: 460px;
    height: 460px;
    border: 2px solid rgba( 37, 99, 235, 0.22 );
    transform: translate( -50%, -50% );
    animation-delay: 1.5s;
}

@keyframes pf-av-pulse {
    0%, 100% { opacity: 0.8; transform: translate( -50%, -50% ) scale( 0.97 ); }
    50%       { opacity: 0.3; transform: translate( -50%, -50% ) scale( 1 ); }
}

/* Floating badges */
.pf-float-badge {
    position: absolute;
    background: rgba( 255, 255, 255, 0.12 );
    backdrop-filter: blur( 10px );
    border: 1px solid rgba( 255, 255, 255, 0.25 );
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    animation: pf-float 3s ease-in-out infinite;
    z-index: 10;
    white-space: nowrap;
}

.pf-float-badge i { font-size: 18px; color: #fbbf24; }
.pf-float-badge strong { display: block; font-size: 16px; font-weight: 900; line-height: 1; }
.pf-float-badge small  { font-size: 10px; opacity: 0.75; }

.pf-fb-1 { top: 8%; right: -20px; animation-delay: 0s; }
.pf-fb-2 { bottom: 12%; left: -20px; animation-delay: 1.5s; }

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

/* Typewriter */
.pf-typewriter-wrap { display: inline; }
.pf-cursor {
    display: inline-block;
    animation: pf-blink 0.8s step-end infinite;
    font-style: normal;
    font-weight: 900;
    color: #fbbf24;
}

@keyframes pf-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Colorful skill tags */
.pf-tag-pink   { border: 1.5px solid #ff4da6 !important; color: #ff4da6 !important; box-shadow: 0 0 10px rgba( 255, 77, 166, 0.2 ); transition: box-shadow 0.2s; }
.pf-tag-blue   { border: 1.5px solid #2563eb !important; color: #60a5fa !important; box-shadow: 0 0 10px rgba( 37, 99, 235, 0.2 ); transition: box-shadow 0.2s; }
.pf-tag-purple { border: 1.5px solid #7c3aed !important; color: #a78bfa !important; box-shadow: 0 0 10px rgba( 124, 58, 237, 0.2 ); transition: box-shadow 0.2s; }
.pf-tag-green  { border: 1.5px solid #16a34a !important; color: #4ade80 !important; box-shadow: 0 0 10px rgba( 22, 163, 74, 0.2 ); transition: box-shadow 0.2s; }

.pf-tag-pink:hover   { box-shadow: 0 0 18px rgba( 255, 77, 166, 0.55 ); }
.pf-tag-blue:hover   { box-shadow: 0 0 18px rgba( 37, 99, 235, 0.55 ); }
.pf-tag-purple:hover { box-shadow: 0 0 18px rgba( 124, 58, 237, 0.55 ); }
.pf-tag-green:hover  { box-shadow: 0 0 18px rgba( 22, 163, 74, 0.55 ); }

/* button reset for hero CTA buttons */
button.pf-btn-primary,
button.pf-btn-outline,
button.pf-btn-dark {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: inherit;
}

button.pf-btn-outline {
    border: 2px solid rgba( 255, 255, 255, 0.38 );
    background: transparent;
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s, background 0.2s;
}

button.pf-btn-outline:hover { border-color: #fff; background: rgba( 255, 255, 255, 0.06 ); }
button.pf-btn-dark { background: #111827; font-size: 15px; }
button.pf-btn-dark:hover { background: #1f2937; }

/* =====================================================
   SERVICES — icon box + accent top border
   ===================================================== */
.pf-svc-card {
    position: relative;
    overflow: hidden;
}

.pf-svc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var( --sc, linear-gradient( 90deg, #ff4da6, #2563eb ) );
    border-radius: 16px 16px 0 0;
}

.pf-svc-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var( --sc, #ff4da6 );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.pf-svc-card:hover .pf-svc-icon-box { transform: scale( 1.1 ) rotate( -4deg ); }

/* Remove old icon styles */
.pf-svc-icon { display: none; }

/* =====================================================
   TESTIMONIALS SLIDER
   ===================================================== */
.pf-testi-slider { overflow: hidden; position: relative; }

.pf-testi-track {
    display: flex;
    transition: transform 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.pf-testi-slide {
    flex: 0 0 calc( 33.333% - 16px );
    margin-right: 24px;
}

.pf-testi-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.pf-testi-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.pf-testi-prev,
.pf-testi-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.pf-testi-prev:hover,
.pf-testi-next:hover { background: #ff4da6; border-color: #ff4da6; color: #fff; }

.pf-testi-dots { display: flex; gap: 8px; align-items: center; }

.pf-testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.pf-testi-dot.active { background: #ff4da6; transform: scale( 1.4 ); }

/* =====================================================
   CLIENT REVIEWS — video support
   ===================================================== */
.pf-review-video {
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.pf-review-video iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.pf-review-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* =====================================================
   WHAT I DO — colorful cards
   ===================================================== */
.pf-what-i-do { padding: 80px 0; background: #fff; }

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

.pf-wid-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 28px;
    position: relative;
    transition: transform 0.22s, box-shadow 0.22s;
    overflow: hidden;
}

.pf-wid-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient( 90deg, var( --wc, #ff4da6 ), var( --wg, #ff0080 ) );
    border-radius: 20px 20px 0 0;
}

.pf-wid-card:hover {
    transform: translateY( -6px );
    box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.1 );
}

.pf-wid-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient( 135deg, var( --wc, #ff4da6 ), var( --wg, #ff0080 ) );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 20px;
    transition: transform 0.22s;
}

.pf-wid-card:hover .pf-wid-card-icon { transform: rotate( -5deg ) scale( 1.08 ); }

.pf-wid-card h4 {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 10px;
}

.pf-wid-card p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.72;
    margin: 0;
}

.pf-wid-card-bar {
    height: 3px;
    border-radius: 99px;
    background: linear-gradient( 90deg, var( --wc, #ff4da6 ), var( --wg, #ff0080 ) );
    margin-top: 20px;
    width: 40px;
    transition: width 0.4s;
}

.pf-wid-card:hover .pf-wid-card-bar { width: 100%; }

/* =====================================================
   SKILLS — card design
   ===================================================== */
.pf-skills { padding: 80px 0; background: #f8f9fb; }

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

.pf-skill-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: transform 0.22s, box-shadow 0.22s;
}

.pf-skill-card:hover {
    transform: translateY( -4px );
    box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.1 );
}

.pf-skill-card-top {
    background: var( --sk, #ff4da6 );
    background: linear-gradient( 135deg, var( --sk, #ff4da6 ), color-mix( in srgb, var( --sk, #ff4da6 ) 70%, #000 ) );
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pf-skill-icon-wrap {
    width: 46px;
    height: 46px;
    background: rgba( 255, 255, 255, 0.22 );
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.pf-skill-pct-badge {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    opacity: 0.95;
}

.pf-skill-card-body { padding: 18px; }

.pf-skill-card-body h4 {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 12px;
}

.pf-skill-card .pf-skill-track {
    height: 10px !important;
    background: #f3f4f6;
    border-radius: 99px;
    overflow: hidden;
}

.pf-skill-card .pf-skill-fill {
    height: 100%;
    background: var( --sk, #ff4da6 );
    background: linear-gradient( 90deg, var( --sk, #ff4da6 ), color-mix( in srgb, var( --sk, #ff4da6 ) 60%, #fff ) );
    border-radius: 99px;
    transition: width 1.2s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* Hide old skill items if they survive */
.pf-skill-item { display: none; }

/* =====================================================
   RESPONSIVE — new elements
   ===================================================== */
@media ( max-width: 1100px ) {
    .pf-skills-grid { grid-template-columns: repeat( 3, 1fr ); }
    .pf-wid-cards   { grid-template-columns: repeat( 2, 1fr ); }
    .pf-testi-slide { flex: 0 0 calc( 50% - 12px ); }
}

@media ( max-width: 768px ) {
    .pf-avatar-wrap { width: 300px !important; height: 300px !important; }
    .pf-avatar-ring { width: 260px !important; height: 260px !important; }
    .pf-av-p1 { width: 310px; height: 310px; }
    .pf-av-p2 { width: 350px; height: 350px; }
    .pf-float-badge { display: none; }
    .pf-skills-grid { grid-template-columns: repeat( 2, 1fr ); }
    .pf-wid-cards   { grid-template-columns: 1fr; }
    .pf-testi-slide { flex: 0 0 100%; }
}

@media ( max-width: 480px ) {
    .pf-modal-box { padding: 28px 20px; }
    .pf-view-profile { flex-direction: column; align-items: center; text-align: center; }
    .pf-view-skills-row { justify-content: center; }
    .pf-skills-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   DARK MODE — new elements
   ===================================================== */
body.dark-mode .pf-modal-box       { background: #1e293b; color: #e2e8f0; }
body.dark-mode .pf-modal-header h3 { color: #f1f5f9; }
body.dark-mode .pf-modal-close     { background: #334155; color: #e2e8f0; }
body.dark-mode .pf-modal-close:hover { background: #ff4da6; color: #fff; }

body.dark-mode .pf-modal-form .pf-form-field label { color: rgba( 255,255,255,0.75 ); }
body.dark-mode .pf-modal-form .pf-form-field input,
body.dark-mode .pf-modal-form .pf-form-field select,
body.dark-mode .pf-modal-form .pf-form-field textarea {
    border-color: rgba( 255,255,255,0.12 );
    background: rgba( 255,255,255,0.06 );
    color: #e2e8f0;
}
body.dark-mode .pf-modal-form .pf-form-field select option { background: #1e293b; }

body.dark-mode .pf-view-info h3    { color: #f1f5f9; }
body.dark-mode .pf-view-stats strong { color: #f1f5f9; }
body.dark-mode .pf-view-stats      { border-color: rgba(255,255,255,0.08); }
body.dark-mode .pf-view-stats > div { border-color: rgba(255,255,255,0.08); }
body.dark-mode .pf-cv-note         { border-color: rgba(255,255,255,0.15); color: #94a3b8; }

body.dark-mode .pf-testi-prev,
body.dark-mode .pf-testi-next  { background: #1e293b; border-color: rgba(255,255,255,0.12); color: #e2e8f0; }
body.dark-mode .pf-testi-dot   { background: rgba(255,255,255,0.2); }

body.dark-mode .pf-what-i-do { background: #0f172a; }
body.dark-mode .pf-wid-card  { background: #1e293b; border-color: rgba(255,255,255,0.07); }
body.dark-mode .pf-wid-card h4 { color: #f1f5f9; }
body.dark-mode .pf-wid-card p  { color: #94a3b8; }

body.dark-mode .pf-skills { background: #0f172a; }
body.dark-mode .pf-skill-card { background: #1e293b; border-color: rgba(255,255,255,0.07); }
body.dark-mode .pf-skill-card-body h4 { color: #f1f5f9; }
body.dark-mode .pf-skill-card .pf-skill-track { background: rgba(255,255,255,0.1); }

body.dark-mode .pf-section-head p { color: #94a3b8; }