/* =====================================================================
   PPC ADVERTISING PAGE — PREMIUM DESIGN SYSTEM
   Brand: #E1831F · #FFB703 · #01224B · #B1BBC4 · #000000
   Fonts: Sora (display) · DM Sans (body)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── Tokens ── */
:root {
    --pri:          #E1831F;
    --pri-dark:     #c4701a;
    --pri-light:    #FFB703;
    --navy:         #01224B;
    --navy-2:       #021c3a;
    --silver:       #B1BBC4;
    --black:        #000000;

    --bg:           #030911;
    --bg-alt:       #060f1d;
    --card:         rgba(1,34,75,.28);
    --card-border:  rgba(225,131,31,.16);

    --white:        #ffffff;
    --muted:        #B1BBC4;
    --dim:          rgba(177,187,196,.65);

    --fd:           'Sora', sans-serif;
    --fb:           'DM Sans', sans-serif;

    --sp:           120px;   /* section-padding */
    --cw:           1280px;  /* container-width */

    --t-fast:       .18s ease;
    --t:            .3s  ease;
    --t-slow:       .5s  ease;

    --glow:         0 0 48px rgba(225,131,31,.28);
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: var(--fb);
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { display:block; max-width:100%; }
a   { text-decoration:none; }

.container-ppc {
    max-width: var(--cw);
    margin: 0 auto;
    padding: 0 32px;
}

/* ══════════════════════════════════════════
   BETWEEN-SECTION SHORTCODE WRAPPER
══════════════════════════════════════════ */
.ppc-between-section {
    padding: 0;          /* shortcode controls its own spacing */
    position: relative;
    z-index: 2;
}

/* ══════════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════════ */
.ppc-section-hdr {
    text-align: center;
    max-width: 740px;
    margin: 0 auto 64px;
}

.section-label {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(225,131,31,.1);
    border: 1px solid rgba(225,131,31,.28);
    border-radius: 100px;
    color: var(--pri-light);
    font-family: var(--fd);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.section-title {
    font-family: var(--fd);
    font-size: clamp(1.85rem, 3.6vw, 2.6rem);
    font-weight: 900;
    line-height: 1.18;
    color: var(--white);
    letter-spacing: -.018em;
    margin-bottom: 16px;
}

.section-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--silver);
    max-width: 620px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-ppc,
.btn-ppc-outline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    font-family: var(--fd);
    font-size: .95rem;
    font-weight: 700;
    border-radius: 10px;
    overflow: hidden;
    transition: all var(--t);
    cursor: pointer;
    border: none;
    letter-spacing: .01em;
    white-space: nowrap;
}

.btn-ppc {
    background: linear-gradient(135deg, var(--pri) 0%, var(--pri-dark) 100%);
    color: var(--white);
    box-shadow: 0 6px 24px rgba(225,131,31,.32);
}
.btn-ppc::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    transition: left .48s ease;
}
.btn-ppc:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(225,131,31,.5); }
.btn-ppc:hover::before { left: 100%; }

.btn-ppc-outline {
    background: rgba(225,131,31,.06);
    color: var(--white);
    border: 2px solid rgba(225,131,31,.3);
}
.btn-ppc-outline:hover {
    background: rgba(225,131,31,.12);
    border-color: var(--pri);
    transform: translateY(-2px);
}

.btn-ppc-content { position: relative; z-index: 1; }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.ppc-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--sp) 0;
    background: linear-gradient(140deg, var(--black) 0%, var(--navy) 55%, #020c1e 100%);
    overflow: hidden;
}

.ppc-hero-mesh {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse at 14% 22%, rgba(225,131,31,.22) 0%, transparent 52%),
        radial-gradient(ellipse at 86% 78%, rgba(255,183,3,.14) 0%, transparent 52%),
        radial-gradient(ellipse at 50% 50%, rgba(1,34,75,.55) 0%, transparent 68%);
    filter: blur(72px);
}

.ppc-hero-inner {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.ppc-hero-content {
    display: flex; flex-direction: column; gap: 28px;
    animation: hFadeL .7s ease-out both;
}

.ppc-hero-visual {
    animation: hFadeR .7s ease-out .08s both;
}

@keyframes hFadeL { from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:none} }
@keyframes hFadeR { from{opacity:0;transform:translateX(28px)}  to{opacity:1;transform:none} }

/* Badge */
.ppc-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 20px;
    background: rgba(225,131,31,.1);
    border: 1px solid rgba(225,131,31,.3);
    border-radius: 100px;
    width: fit-content;
    animation: float 3s ease-in-out infinite;
}
.badge-pulse {
    width: 7px; height: 7px;
    background: var(--pri); border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px var(--pri);
}
.ppc-badge-text { font-family:var(--fd); font-size:13px; font-weight:700; color:var(--white); }

/* Title */
.ppc-hero-title {
    font-family: var(--fd);
    font-size: clamp(2.1rem, 5vw, 3.3rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--white);
    letter-spacing: -.022em;
}
.ppc-title-gradient {
    display: block;
    background: linear-gradient(135deg, var(--pri) 0%, var(--pri-light) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.ppc-hero-desc { font-size:1.1rem; line-height:1.8; color:var(--silver); max-width:520px; }

.ppc-cta-group { display:flex; gap:14px; flex-wrap:wrap; }

/* Trust badges — dynamic row */
.ppc-trust-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.trust-badge-link {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 16px;
    background: rgba(1,34,75,.45);
    border: 1px solid rgba(177,187,196,.13);
    border-radius: 11px;
    transition: all var(--t);
}
.trust-badge-link:hover {
    background: rgba(225,131,31,.1);
    border-color: rgba(225,131,31,.35);
    transform: translateY(-2px);
}
.trust-badge-link img { width:36px; height:36px; object-fit:contain; flex-shrink:0; border-radius:5px; }
.trust-badge-stars  { font-size:11px; letter-spacing:2px; margin-bottom:2px; }
.trust-badge-text   { font-size:12px; color:var(--silver); line-height:1.3; }

/* Hero image */
.ppc-media-container {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), var(--glow);
}
.ppc-media-glow {
    position: absolute; top:-20%; left:-20%; width:140%; height:140%;
    background: radial-gradient(circle, rgba(225,131,31,.22) 0%, transparent 65%);
    filter: blur(40px); z-index:-1;
    animation: gp 4s ease-in-out infinite;
}
.ppc-hero-img { width:100%; height:auto; object-fit:cover; }

/* Scroll indicator */
.scroll-indicator {
    position: absolute; bottom:36px; left:50%; transform:translateX(-50%);
    display: flex; flex-direction:column; align-items:center; gap:9px;
    color:var(--silver); font-size:10px; text-transform:uppercase; letter-spacing:2px;
    z-index:10; animation:bounce 2s ease-in-out infinite;
}
.scroll-line { width:2px; height:36px; background:linear-gradient(to bottom,var(--pri),transparent); }

/* ══════════════════════════════════════════
   WHY SECTION
══════════════════════════════════════════ */
.ppc-why {
    padding: var(--sp) 0;
    background: var(--bg-alt);
}

/* ── Desktop: auto-fit grid ── */
.ppc-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap: 20px;
}

.ppc-why-card {
    padding: 30px 26px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    transition: all var(--t);
    position: relative;
    overflow: hidden;
}
.ppc-why-card::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:3px;
    background: linear-gradient(90deg,var(--pri),var(--pri-light));
    transform: scaleX(0);
    transition: transform var(--t);
}
.ppc-why-card:hover::before { transform:scaleX(1); }
.ppc-why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(225,131,31,.38);
    box-shadow: 0 14px 40px rgba(225,131,31,.14);
}

.ppc-why-icon {
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg,var(--pri),var(--pri-dark));
    border-radius: 12px;
    color: var(--white);
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(225,131,31,.3);
}
.ppc-why-icon img { width:26px; height:26px; object-fit:contain; }

.ppc-why-title { font-family:var(--fd); font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.ppc-why-desc  { font-size:.9rem; line-height:1.7; color:var(--muted); }

/* Dots — hidden on desktop, shown on mobile via media query */
.ppc-why-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.ppc-why-dot {
    width:7px; height:7px;
    border-radius:50%;
    background: rgba(177,187,196,.3);
    border:none; cursor:pointer;
    padding:0;
    transition: all var(--t);
}
.ppc-why-dot.active {
    background: var(--pri);
    width: 20px;
    border-radius: 4px;
    box-shadow: 0 0 7px rgba(225,131,31,.55);
}

/* ══════════════════════════════════════════
   AD PLATFORMS — Tabs (desktop) / Accordion (mobile)
══════════════════════════════════════════ */
.ppc-platforms {
    padding: var(--sp) 0;
    background: var(--bg);
}

/* ── Desktop tab shell ── */
.ppc-tabs-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--card);
}

.ppc-tabs-nav {
    display: flex; flex-direction:column;
    border-right: 1px solid var(--card-border);
    padding: 10px 0;
    background: rgba(1,34,75,.22);
}

.ppc-tab-btn {
    display: flex; align-items:center; gap:12px;
    padding: 15px 20px;
    background: none; border: none;
    border-left: 3px solid transparent;
    cursor: pointer; text-align:left;
    color: var(--silver);
    font-family: var(--fb); font-size:.88rem; font-weight:600;
    transition: all var(--t);
}
.ppc-tab-btn:hover { color:var(--white); background:rgba(225,131,31,.06); }
.ppc-tab-btn.active {
    color: var(--white);
    background: rgba(225,131,31,.1);
    border-left-color: var(--pri);
}

.tab-btn-icon {
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(225,131,31,.1);
    border: 1px solid rgba(225,131,31,.18);
    border-radius: 8px; flex-shrink:0;
    transition: all var(--t);
}
.ppc-tab-btn.active .tab-btn-icon { background:var(--pri); border-color:var(--pri); }
.ppc-tab-btn.active .tab-btn-icon img,
.ppc-tab-btn.active .tab-btn-icon svg { filter:brightness(0) invert(1); }
.tab-btn-icon img { width:18px; height:18px; object-fit:contain; }
.tab-btn-label { font-size:.88rem; }

.ppc-tabs-panels { position:relative; }

.ppc-tab-panel { display:none; grid-template-columns:1fr 1fr; }
.ppc-tab-panel.active { display:grid; }

.tab-panel-img {
    position:relative; overflow:hidden;
    min-height:300px;
    background: var(--navy-2);
}
.tab-panel-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.ppc-tab-panel:hover .tab-panel-img img { transform:scale(1.03); }
.tab-panel-img-ph {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
}
.tab-panel-img-ph svg { width:48px; height:48px; opacity:.25; color:var(--silver); }

.tab-panel-body {
    padding: 40px 36px;
    display:flex; flex-direction:column; justify-content:center; gap:12px;
}
.tab-panel-num   { font-family:var(--fd); font-size:2.8rem; font-weight:900; color:rgba(225,131,31,.1); line-height:1; }
.tab-panel-title { font-family:var(--fd); font-size:1.5rem; font-weight:800; color:var(--white); }
.tab-panel-tagline { font-size:.875rem; font-weight:600; color:var(--pri-light); letter-spacing:.3px; }
.tab-panel-desc  { font-size:.93rem; line-height:1.75; color:var(--silver); }

/* ── Mobile accordion ── */
.ppc-accord { display:none; }

.ppc-accord-item {
    border: 1px solid var(--card-border);
    border-radius: 13px;
    overflow: hidden;
    margin-bottom: 9px;
    background: var(--card);
    transition: border-color var(--t);
}
.ppc-accord-item.open { border-color: rgba(225,131,31,.38); }

.ppc-accord-hdr {
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding: 16px 18px;
    background:none; border:none; cursor:pointer;
    font-family:var(--fd); font-size:.95rem; font-weight:700; color:var(--white);
    text-align:left;
    transition: color var(--t);
}
.ppc-accord-hdr:hover { color:var(--pri-light); }
.ppc-accord-hdr-left { display:flex; align-items:center; gap:10px; }

.ppc-accord-icon {
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(225,131,31,.1);
    border: 1px solid rgba(225,131,31,.18);
    border-radius: 8px; flex-shrink:0;
}
.ppc-accord-icon img { width:16px; height:16px; object-fit:contain; }

.ppc-accord-chevron { color:var(--silver); transition:transform var(--t); flex-shrink:0; }
.ppc-accord-item.open .ppc-accord-chevron { transform:rotate(180deg); color:var(--pri); }

.ppc-accord-body {
    max-height: 0; overflow:hidden;
    transition: max-height .38s ease, padding .38s ease;
    padding: 0 18px;
}
.ppc-accord-item.open .ppc-accord-body { max-height:800px; padding:0 18px 20px; }

.ppc-accord-img {
    width:100%; border-radius:10px; margin-bottom:14px;
    object-fit:cover; aspect-ratio:16/9;
}
.ppc-accord-tagline { font-size:.83rem; font-weight:600; color:var(--pri-light); margin-bottom:8px; }
.ppc-accord-desc    { font-size:.88rem; line-height:1.7; color:var(--silver); }

.platform-cta-wrap  { margin-top:52px; text-align:center; }
.platform-cta-note  { margin-top:14px; font-size:.9rem; color:var(--dim); }

/* ══════════════════════════════════════════
   CASE STUDIES
══════════════════════════════════════════ */
.ppc-cases {
    padding: var(--sp) 0;
    background: var(--bg-alt);
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
    gap: 20px;
}

.case-card {
    position:relative;
    border-radius:18px; overflow:hidden;
    background: var(--card);
    border: 1px solid var(--card-border);
    transition: all var(--t);
    display:block; color:inherit;
}
.case-card:hover {
    transform: translateY(-6px);
    border-color: rgba(225,131,31,.4);
    box-shadow: 0 18px 50px rgba(225,131,31,.15);
}
.case-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform var(--t-slow); }
.case-card:hover .case-thumb { transform:scale(1.04); }
.case-thumb-ph {
    width:100%; aspect-ratio:16/9;
    background: var(--navy);
    display:flex; align-items:center; justify-content:center;
}
.case-thumb-ph svg { width:44px; height:44px; opacity:.25; color:var(--silver); }
.case-body  { padding:22px; }
.case-badge {
    display:inline-block; padding:3px 11px;
    background:rgba(225,131,31,.1); border:1px solid rgba(225,131,31,.22);
    border-radius:100px; color:var(--pri-light);
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
    margin-bottom:10px;
}
.case-title  { font-family:var(--fd); font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:7px; line-height:1.35; }
.case-excerpt{ font-size:.88rem; line-height:1.65; color:var(--silver); margin-bottom:16px; }
.case-stats  { display:flex; gap:14px; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(177,187,196,.1); }
.case-stat   { display:flex; flex-direction:column; gap:3px; }
.case-stat-val {
    font-family:var(--fd); font-size:1.25rem; font-weight:900;
    background:linear-gradient(135deg,var(--pri),var(--pri-light));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.case-stat-lbl { font-size:.75rem; color:var(--silver); font-weight:500; }
.case-arrow {
    position:absolute; top:16px; right:16px;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(225,131,31,.12); border:1px solid rgba(225,131,31,.25);
    border-radius:50%; color:var(--pri);
    opacity:0; transform:translateY(5px);
    transition:all var(--t);
}
.case-card:hover .case-arrow { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════
   PROCESS — alternating timeline
══════════════════════════════════════════ */
.ppc-process {
    padding: var(--sp) 0;
    background: var(--bg);
}

.ppc-timeline {
    position: relative;
    padding-bottom: 16px;
}

.ppc-tl-line {
    position: absolute;
    left: 50%; top:0; bottom:0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(225,131,31,.55) 8%,
        rgba(225,131,31,.55) 92%,
        transparent 100%);
}

.ppc-tl-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 50%;
    padding-bottom: 48px;
}

.tl-left  { padding-right:68px; justify-content:flex-end; }
.tl-right { padding-left:68px;  margin-left:50%; }

.ppc-tl-dot {
    position: absolute; top:0;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg,var(--pri),var(--pri-dark));
    border-radius:50%;
    font-family:var(--fd); font-size:.75rem; font-weight:900; color:var(--white);
    z-index:2;
    box-shadow: 0 0 0 6px rgba(225,131,31,.13), var(--glow);
}
.tl-left  .ppc-tl-dot { right:calc(-22px); }
.tl-right .ppc-tl-dot { left:calc(-22px);  }

.ppc-tl-card {
    padding: 24px 26px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    transition: all var(--t);
    max-width: 400px; width:100%;
}
.ppc-tl-card:hover {
    border-color: rgba(225,131,31,.4);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(225,131,31,.12);
}
.ppc-tl-title { font-family:var(--fd); font-size:1rem; font-weight:700; color:var(--white); margin-bottom:7px; }
.ppc-tl-desc  { font-size:.88rem; line-height:1.7; color:var(--silver); }

/* ══════════════════════════════════════════
   TESTIMONIALS — 4-line clamp + read more
══════════════════════════════════════════ */
.ppc-testimonials {
    padding: var(--sp) 0;
    background: var(--bg-alt);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
    gap: 20px;
}

.testimonial-card {
    padding: 32px 28px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    transition: all var(--t);
    display:flex; flex-direction:column; gap:18px;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(225,131,31,.36);
    box-shadow: 0 14px 44px rgba(225,131,31,.12);
}
.testimonial-stars { font-size:15px; letter-spacing:2px; }

.testimonial-body { flex:1; display:flex; flex-direction:column; gap:8px; }

/* 4-line clamp */
.testimonial-text {
    font-size:.97rem; line-height:1.75;
    color: var(--silver);
    font-style: italic;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all var(--t-slow);
}
.testimonial-text.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Read more button */
.testi-read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pri-light);
    font-family: var(--fb);
    font-size: .82rem;
    font-weight: 600;
    padding: 0;
    transition: color var(--t);
}
.testi-read-more:hover { color:var(--pri); }

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

.author-avatar {
    width:46px; height:46px; border-radius:50%; overflow:hidden;
    border:2px solid rgba(225,131,31,.3); flex-shrink:0;
}
.author-avatar img { width:100%; height:100%; object-fit:cover; }

.author-avatar-ph {
    width:46px; height:46px; border-radius:50%;
    background:linear-gradient(135deg,var(--pri),var(--pri-light));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--fd); font-size:1.1rem; font-weight:700; color:var(--white);
    flex-shrink:0;
}
.author-name { font-family:var(--fd); font-size:.93rem; font-weight:700; color:var(--white); }
.author-role { font-size:.8rem; color:var(--dim); margin-top:2px; }

/* ══════════════════════════════════════════
   FAQ
══════════════════════════════════════════ */
.ppc-faq { padding: var(--sp) 0; background: var(--bg); }

.faq-list {
    max-width: 800px; margin:0 auto;
    display:flex; flex-direction:column; gap:12px;
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 13px;
    overflow:hidden;
    transition: border-color var(--t);
}
.faq-item.open { border-color:rgba(225,131,31,.38); }

.faq-q {
    width:100%; padding:20px 24px;
    background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    text-align:left;
    font-family:var(--fd); font-size:.97rem; font-weight:600; color:var(--white);
    transition: color var(--t);
}
.faq-q:hover { color:var(--pri-light); }
.faq-icon {
    flex-shrink:0; width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(225,131,31,.1); border-radius:50%; color:var(--pri);
    transition:transform var(--t), background var(--t);
}
.faq-item.open .faq-icon { transform:rotate(45deg); background:var(--pri); color:var(--white); }

.faq-a {
    max-height:0; overflow:hidden;
    transition: max-height .38s ease, padding .38s ease;
    padding:0 24px;
}
.faq-item.open .faq-a { max-height:500px; padding:0 24px 20px; }
.faq-a p { font-size:.92rem; line-height:1.75; color:var(--silver); }

/* ══════════════════════════════════════════
   FINAL CTA
══════════════════════════════════════════ */
.ppc-final-cta {
    padding: var(--sp) 0;
    background: var(--bg-alt);
    position:relative; overflow:hidden;
}
.ppc-cta-mesh {
    position:absolute; inset:0;
    background:
        radial-gradient(circle at 25% 50%,rgba(225,131,31,.18) 0%,transparent 55%),
        radial-gradient(circle at 75% 50%,rgba(255,183,3,.12) 0%,transparent 55%);
    filter:blur(80px);
}
.ppc-cta-box {
    position:relative; z-index:2;
    text-align:center; max-width:760px; margin:0 auto;
    padding:64px 52px;
    background:rgba(1,34,75,.32);
    border:2px solid rgba(225,131,31,.3);
    border-radius:24px;
    box-shadow:0 24px 60px rgba(0,0,0,.5), var(--glow);
}
.ppc-cta-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:70px; height:70px;
    background:linear-gradient(135deg,var(--pri),var(--pri-light));
    border-radius:16px; color:var(--white); margin-bottom:24px;
    box-shadow:0 10px 32px rgba(225,131,31,.42);
}
.ppc-cta-title { font-family:var(--fd); font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:900; color:var(--white); margin-bottom:16px; line-height:1.2; }
.ppc-cta-desc  { font-size:1.05rem; line-height:1.8; color:var(--silver); margin-bottom:32px; }
.ppc-cta-btns  { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */
@keyframes float  { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-8px)} }
@keyframes pulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(1.3)} }
@keyframes gp     { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(9px)} }

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET  ≤1024px
══════════════════════════════════════════ */
@media (max-width:1024px) {
    :root { --sp:80px; }

    .ppc-hero-inner { grid-template-columns:1fr; gap:48px; }
    .ppc-hero-visual { order:-1; }
    @keyframes hFadeL { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
    @keyframes hFadeR { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

    /* Tab shell shrinks to smaller nav */
    .ppc-tabs-wrap { grid-template-columns:200px 1fr; }

    /* Timeline stacks */
    .ppc-tl-line  { left:24px; transform:none; }
    .ppc-tl-item,
    .tl-left,
    .tl-right     { width:100%; margin-left:0; padding-left:64px; padding-right:0; justify-content:flex-start; }
    .tl-left  .ppc-tl-dot,
    .tl-right .ppc-tl-dot { left:2px; right:auto; }
    .ppc-tl-card  { max-width:100%; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE  ≤768px
══════════════════════════════════════════ */
@media (max-width:768px) {
    :root { --sp:56px; }
    .container-ppc { padding:0 16px; }

    /* Hero */
    .ppc-hero-title { font-size:1.9rem; }
    .ppc-hero-desc  { font-size:.97rem; }
    .ppc-cta-group  { flex-direction:column; }
    .btn-ppc,
    .btn-ppc-outline { width:100%; padding:15px 24px; justify-content:center; }
    .ppc-trust-badges { gap:8px; }
    .trust-badge-link { padding:9px 13px; }

    /* WHY — horizontal snap scroll */
    .ppc-why-grid {
        /* Switch from grid to horizontal scroll-snap */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding-bottom: 8px;     /* space for scrollbar if any */
        /* Hide native scrollbar */
        scrollbar-width: none;
    }
    .ppc-why-grid::-webkit-scrollbar { display:none; }

    .ppc-why-card {
        /* Each card takes ~85% of screen width, centred */
        flex: 0 0 82%;
        scroll-snap-align: start;
        /* Remove AOS animation on mobile to avoid jank inside slider */
    }

    /* Show dots on mobile */
    .ppc-why-dots { display:flex; }

    /* Platforms: hide tabs, show accordion */
    .ppc-tabs-wrap { display:none; }
    .ppc-accord    { display:block; }

    /* Timeline stacks (already handled at 1024, ensure mobile is clean) */
    .ppc-tl-line  { left:20px; }
    .ppc-tl-item,
    .tl-left,
    .tl-right     { width:100%; margin-left:0; padding-left:56px; padding-right:0; }
    .tl-left  .ppc-tl-dot,
    .tl-right .ppc-tl-dot { left:0; right:auto; }
    .ppc-tl-dot   { width:38px; height:38px; font-size:.7rem; }

    /* Cases, testimonials single column */
    .cases-grid,
    .testimonials-grid { grid-template-columns:1fr; }

    /* CTA box */
    .ppc-cta-box { padding:40px 20px; }

    /* Section header */
    .section-title { font-size:1.65rem; }
    .ppc-section-hdr { margin-bottom:48px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — SMALL  ≤480px
══════════════════════════════════════════ */
@media (max-width:480px) {
    :root { --sp:44px; }
    .container-ppc { padding:0 14px; }
    .ppc-cta-box { padding:34px 16px; }
    .scroll-indicator { display:none; }
    .ppc-why-card { flex:0 0 90%; }
    .tab-panel-body { padding:28px 22px; }
}

/* ══════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* ══════════════════════════════════════════
   OUR TEAM — two-row alternating slider
══════════════════════════════════════════ */
.ppc-team {
    padding: var(--sp) 0;
    background: var(--bg);
}

.ppc-team-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ppc-team-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ppc-team-row::-webkit-scrollbar { display: none; }

/* Base card */
.ppc-tm-card {
    flex: 0 0 172px;
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(225,131,31,.15);
    background: rgba(1,34,75,.35);
    position: relative;
    scroll-snap-align: start;
    transition: all var(--t);
    cursor: default;
}
.ppc-tm-card:hover {
    border-color: rgba(225,131,31,.5);
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(225,131,31,.14);
}

/* Short (row 2) */
.ppc-tm-card.short { height: 180px; }

/* Featured — taller + wider + glow border */
.ppc-tm-card.feat {
    flex: 0 0 200px;
    height: 260px;
    border-color: rgba(225,131,31,.38);
    box-shadow: 0 0 28px rgba(225,131,31,.16);
}
.ppc-tm-card.short.feat { height: 210px; }

/* Image */
.ppc-tm-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ppc-tm-card:hover img { transform: scale(1.05); }

/* Initials placeholder */
.ppc-tm-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--fd);
    font-size: 40px; font-weight: 900;
    color: rgba(255,255,255,.1);
    background: linear-gradient(145deg, rgba(1,34,75,.85) 0%, rgba(225,131,31,.12) 100%);
}
.ppc-tm-card.feat .ppc-tm-ph { font-size: 50px; }
.ppc-tm-card.short .ppc-tm-ph { font-size: 32px; }

/* Lead badge */
.ppc-tm-badge {
    position: absolute; top: 12px; right: 12px;
    background: linear-gradient(135deg, var(--pri), var(--pri-light));
    border-radius: 6px;
    padding: 3px 10px;
    font-family: var(--fd);
    font-size: 10px; font-weight: 800;
    color: var(--white);
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* Name + role overlay */
.ppc-tm-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 10px 14px 13px;
    background: linear-gradient(to top, rgba(2,12,28,.95) 0%, transparent 100%);
}
.ppc-tm-name {
    font-family: var(--fd);
    font-size: 13px; font-weight: 700;
    color: var(--white); line-height: 1.2;
}
.ppc-tm-card.feat .ppc-tm-name { font-size: 15px; }
.ppc-tm-role {
    font-size: 11px; font-weight: 600;
    color: var(--pri-light);
    margin-top: 3px; letter-spacing: .3px;
}
.ppc-tm-card.feat .ppc-tm-role { font-size: 12px; }

/* Nav */
.ppc-team-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
}

.ppc-team-dots { display: flex; gap: 8px; }

.ppc-tm-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(177,187,196,.25);
    border: none; cursor: pointer; padding: 0;
    transition: all var(--t);
}
.ppc-tm-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--pri);
    box-shadow: 0 0 8px rgba(225,131,31,.5);
}

.ppc-team-arrows { display: flex; gap: 10px; }

.ppc-tm-arr {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(225,131,31,.08);
    border: 1px solid rgba(225,131,31,.25);
    color: var(--pri);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    transition: all var(--t);
}
.ppc-tm-arr:hover { background: var(--pri); color: var(--white); border-color: var(--pri); }
.ppc-tm-arr:disabled { opacity: .28; cursor: default; pointer-events: none; }

/* ── Mobile: smaller cards, same layout ── */
@media (max-width: 768px) {
    .ppc-tm-card       { flex: 0 0 140px; height: 185px; border-radius: 14px; }
    .ppc-tm-card.short { height: 152px; }
    .ppc-tm-card.feat  { flex: 0 0 160px; height: 215px; }
    .ppc-tm-card.short.feat { height: 178px; }
    .ppc-tm-ph { font-size: 30px; }
    .ppc-tm-card.feat .ppc-tm-ph { font-size: 38px; }
    .ppc-tm-name { font-size: 11.5px; }
    .ppc-tm-role { font-size: 10px; }
}
@media (max-width: 480px) {
    .ppc-tm-card       { flex: 0 0 120px; height: 162px; }
    .ppc-tm-card.short { height: 136px; }
    .ppc-tm-card.feat  { flex: 0 0 140px; height: 190px; }
}