/* =================================================================
   Perkifi — Marketing site styles
   Built on the Perkifi Design System foundations.
   Foundations (tokens + type) are inlined below from the design
   system's colors_and_type.css so this file is self-contained;
   marketing-specific component/layout styles follow.
   ================================================================= */

/* ---------- Fonts (Google Fonts CDN) ----------
   Syne — display / headings · Montserrat — body · Inter — dense UI · JetBrains Mono — data */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Montserrat:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============ BRAND ============ */
  --perkifi-brand-blue:        #3B6EFF;
  --perkifi-brand-violet:      #985EEC;
  --perkifi-brand-purple:      #5731AA;
  --perkifi-brand-purple-deep: #380C73;

  --perkifi-gold-50:           #FDE9B0;
  --perkifi-gold-100:          #FDDB7F;
  --perkifi-gold:              #FDC52E;
  --perkifi-gold-deep:         #B88300;

  --perkifi-brand-gradient:    linear-gradient(135deg, #3B6EFF 0%, #985EEC 55%, #5731AA 100%);
  --perkifi-warm-gradient:     linear-gradient(135deg, #FDE9B0 0%, #FDDB7F 37%, #FDC52E 97%);

  /* ============ ACCENT FAMILY (the AI agents) ============ */
  --perkifi-accent-brand:       #a78bfa;
  --perkifi-accent-brand-hover: #8b5cf6;
  --perkifi-accent-creator:     #f472b6;
  --perkifi-accent-omni:        #38bdf8;
  --perkifi-accent-safety:      #34d399;
  --perkifi-accent-collab:      #fbbf24;
  --perkifi-accent-viral:       #c084fc;
  --perkifi-accent-risk:        #fb7185;

  /* ============ STATUS ============ */
  --perkifi-success: #34D399;
  --perkifi-warning: #FBBF24;
  --perkifi-danger:  #FB7185;
  --perkifi-info:    #38BDF8;

  /* ===== DARK SURFACE (landing / marketing / dashboard shell) ===== */
  --perkifi-bg-primary:    #0f0a18;
  --perkifi-bg-secondary:  #1a1530;
  --perkifi-bg-card:       #1e1838;
  --perkifi-bg-input:      #251f3c;
  --perkifi-bg-hover:      #29234a;

  --perkifi-text-primary:   #f1eff6;
  --perkifi-text-secondary: #a89fd4;
  --perkifi-text-muted:     #7c6fa8;

  --perkifi-border-subtle: #3d3558;
  --perkifi-border-hover:  rgba(167, 139, 250, 0.30);
  --perkifi-border-strong: rgba(167, 139, 250, 0.55);

  --perkifi-brand-bg:      rgba(167, 139, 250, 0.15);
  --perkifi-viral-bg:      rgba(192, 132, 252, 0.20);
  --perkifi-focus-glow:    0 0 24px rgba(167, 139, 250, 0.30);

  /* ============ ELEVATION / SHADOW ============ */
  --perkifi-shadow-xs:  0 1px 2px rgba(15, 10, 24, 0.06);
  --perkifi-shadow-sm:  0 2px 8px rgba(15, 10, 24, 0.08);
  --perkifi-shadow-md:  0 8px 24px rgba(15, 10, 24, 0.12);
  --perkifi-shadow-lg:  0 14px 36px rgba(0, 0, 0, 0.32);
  --perkifi-shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.40);
  --perkifi-shadow-glow:0 0 35px rgba(167, 139, 250, 0.35),
                        0 0 60px rgba(192, 132, 252, 0.20);

  /* ============ RADIUS ============ */
  --perkifi-radius-xs:  6px;
  --perkifi-radius-sm:  8px;
  --perkifi-radius-md:  12px;
  --perkifi-radius-lg:  14px;
  --perkifi-radius-xl:  18px;
  --perkifi-radius-2xl: 20px;
  --perkifi-radius-pill:100px;

  /* ============ SPACING (4px base) ============ */
  --perkifi-space-1:4px;  --perkifi-space-2:8px;  --perkifi-space-3:12px;
  --perkifi-space-4:16px; --perkifi-space-5:20px; --perkifi-space-6:24px;
  --perkifi-space-8:32px; --perkifi-space-10:40px;--perkifi-space-12:48px;
  --perkifi-space-16:64px;

  /* ============ MOTION ============ */
  --perkifi-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --perkifi-ease-soft: cubic-bezier(0.16, 1, 0.30, 1);
  --perkifi-dur-fast:  180ms;
  --perkifi-dur-base:  280ms;
  --perkifi-dur-slow:  480ms;

  /* ============ TYPE FAMILIES ============ */
  --perkifi-font-display: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --perkifi-font-body:    'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  --perkifi-font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --perkifi-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ============ TYPE SCALE (fluid — scales down on small screens) ============ */
  --perkifi-display-1-size:clamp(40px,6.5vw,72px); --perkifi-display-1-line:1.04; --perkifi-display-1-track:-0.02em;
  --perkifi-display-2-size:clamp(33px,5.5vw,56px); --perkifi-display-2-line:1.08; --perkifi-display-2-track:-0.02em;
  --perkifi-h1-size:clamp(27px,4vw,40px); --perkifi-h1-line:1.15; --perkifi-h1-track:-0.01em;
  --perkifi-h2-size:clamp(22px,3vw,28px); --perkifi-h2-line:1.20; --perkifi-h2-track:-0.01em;
  --perkifi-h3-size:clamp(19px,2.4vw,22px); --perkifi-h3-line:1.25;
  --perkifi-h4-size:18px; --perkifi-h4-line:1.35;
  --perkifi-body-size:16px; --perkifi-body-line:1.65;
  --perkifi-body-sm-size:14px; --perkifi-body-sm-line:1.55;
  --perkifi-caption-size:12px; --perkifi-caption-line:1.5;
  --perkifi-eyebrow-size:11px; --perkifi-eyebrow-track:0.14em;
}

/* =================================================================
   SEMANTIC TYPE
   ================================================================= */
.perkifi-display-1,.perkifi-display-2,.perkifi-h1,.perkifi-h2,.perkifi-h3,.perkifi-h4{
  font-family:var(--perkifi-font-display);font-weight:700;margin:0;text-wrap:pretty}
.perkifi-display-1{font-size:var(--perkifi-display-1-size);line-height:var(--perkifi-display-1-line);letter-spacing:var(--perkifi-display-1-track);font-weight:800}
.perkifi-display-2{font-size:var(--perkifi-display-2-size);line-height:var(--perkifi-display-2-line);letter-spacing:var(--perkifi-display-2-track);font-weight:800}
.perkifi-h1{font-size:var(--perkifi-h1-size);line-height:var(--perkifi-h1-line);letter-spacing:var(--perkifi-h1-track)}
.perkifi-h2{font-size:var(--perkifi-h2-size);line-height:var(--perkifi-h2-line);letter-spacing:var(--perkifi-h2-track)}
.perkifi-h3{font-size:var(--perkifi-h3-size);line-height:var(--perkifi-h3-line);font-weight:600}
.perkifi-h4{font-size:var(--perkifi-h4-size);line-height:var(--perkifi-h4-line);font-weight:600}
.perkifi-body,.perkifi-body-sm,.perkifi-caption,.perkifi-eyebrow{font-family:var(--perkifi-font-body);margin:0;text-wrap:pretty}
.perkifi-body{font-size:var(--perkifi-body-size);line-height:var(--perkifi-body-line);font-weight:400}
.perkifi-body-sm{font-size:var(--perkifi-body-sm-size);line-height:var(--perkifi-body-sm-line);font-weight:400}
.perkifi-caption{font-size:var(--perkifi-caption-size);line-height:var(--perkifi-caption-line);font-weight:500}
.perkifi-eyebrow{font-size:var(--perkifi-eyebrow-size);letter-spacing:var(--perkifi-eyebrow-track);text-transform:uppercase;font-weight:700;color:var(--perkifi-text-muted)}

/* Signature italic-on-gradient — reserve for emphasized noun-phrases in display sizes */
.perkifi-italic-grad{
  background:linear-gradient(135deg,var(--perkifi-accent-omni),var(--perkifi-accent-brand),var(--perkifi-accent-creator));
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:perkifi-grad 5s ease infinite}
@keyframes perkifi-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.perkifi-mono{font-family:var(--perkifi-font-mono)}

/* =================================================================
   BASE / RESET
   ================================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  background:var(--perkifi-bg-primary);
  color:var(--perkifi-text-secondary);
  font-family:var(--perkifi-font-body);
  font-size:var(--perkifi-body-size);
  line-height:var(--perkifi-body-line);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* screen routing (prototype shortcut) */
.screen{display:none}
.screen.active{display:block;animation:perkifi-panelIn var(--perkifi-dur-slow) var(--perkifi-ease-soft)}
@keyframes perkifi-panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--perkifi-font-display);font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:var(--perkifi-radius-lg);
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--perkifi-dur-base) var(--perkifi-ease),
             box-shadow var(--perkifi-dur-base) var(--perkifi-ease),
             opacity var(--perkifi-dur-base) var(--perkifi-ease);
}
.btn-primary{background:linear-gradient(135deg,var(--perkifi-accent-brand),var(--perkifi-accent-brand-hover));color:#fff;box-shadow:0 4px 20px rgba(167,139,250,.30)}
.btn-secondary{background:transparent;color:var(--perkifi-text-primary);border-color:var(--perkifi-border-subtle)}
.btn-ghost{background:transparent;color:var(--perkifi-text-secondary)}
.btn-warm{background:var(--perkifi-warm-gradient);color:#1a1530;box-shadow:0 4px 20px rgba(253,197,46,.25)}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn-primary:hover{box-shadow:0 8px 28px rgba(167,139,250,.42)}
.btn-secondary:hover{border-color:var(--perkifi-border-strong);color:#fff}
.btn-warm:hover{box-shadow:0 8px 28px rgba(253,197,46,.38)}
.btn:active{transform:scale(.97);transition-duration:100ms}
.btn-sm{padding:9px 16px;font-size:13px;white-space:nowrap}

/* =================================================================
   NAV (fixed top, solid — no glass-morphism)
   ================================================================= */
.nav{position:sticky;top:0;z-index:40;background:var(--perkifi-bg-secondary);border-bottom:1px solid var(--perkifi-border-subtle)}
.nav .inner{display:flex;align-items:center;gap:22px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--perkifi-font-display);font-weight:800;color:var(--perkifi-text-primary);font-size:20px;letter-spacing:-.02em;cursor:pointer}
.brand-logo{width:30px;height:30px;object-fit:contain;display:inline-block}
.nav .links{display:flex;gap:22px;margin-left:14px}
.nav .links a{font-size:15px;color:var(--perkifi-text-secondary);font-weight:500;cursor:pointer;transition:color var(--perkifi-dur-fast) var(--perkifi-ease)}
.nav .links a:hover{color:var(--perkifi-accent-brand)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.switch{font-family:var(--perkifi-font-body);font-size:13px;color:var(--perkifi-text-muted);border:1px dashed var(--perkifi-border-subtle);padding:7px 13px;border-radius:var(--perkifi-radius-pill);cursor:pointer;transition:.16s var(--perkifi-ease)}
.switch:hover{color:var(--perkifi-accent-brand);border-color:var(--perkifi-border-strong)}
@media(max-width:900px){.nav .links{display:none}}
@media(max-width:480px){.nav .inner{gap:12px}.nav .brand-wordmark{height:26px}.switch{display:none}}

/* =================================================================
   HERO — purple bokeh + 3-stop overlay (CSS-recreated)
   ================================================================= */
.hero{padding:96px 0 44px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(42% 55% at 18% 18%,rgba(152,94,236,.38),transparent 60%),
  radial-gradient(38% 48% at 82% 12%,rgba(59,110,255,.30),transparent 60%),
  radial-gradient(46% 52% at 72% 82%,rgba(192,132,252,.22),transparent 62%),
  radial-gradient(30% 42% at 8% 92%,rgba(253,197,46,.10),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(15,10,24,.30) 0%,rgba(15,10,24,.55) 55%,rgba(15,10,24,.92) 100%)}
.hero .wrap{position:relative;z-index:1}
@media(max-width:760px){.hero{padding:64px 0 36px}}
.hero-pulse{background:var(--perkifi-bg-card);border:1px solid var(--perkifi-border-subtle);color:var(--perkifi-text-secondary);
  padding:6px 14px 6px 12px;border-radius:var(--perkifi-radius-pill);font-size:12px;font-weight:500;
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px}
.hero-pulse .pulse{width:6px;height:6px;background:var(--perkifi-accent-brand);border-radius:50%;box-shadow:0 0 10px var(--perkifi-accent-brand);animation:perkifi-pulse 2s infinite}
@keyframes perkifi-pulse{50%{opacity:.5;transform:scale(1.25)}}
/* headlines run the full measure — no artificial wrap cap */
.hero h1{max-width:none}
.lead{font-size:clamp(16px,2.2vw,19px);color:var(--perkifi-text-secondary);max-width:60ch;margin:22px 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:flex;gap:48px;flex-wrap:wrap;margin-top:52px;padding-top:32px;border-top:1px solid var(--perkifi-border-subtle)}
@media(max-width:760px){.stats{gap:26px;margin-top:40px}}
.stat b{display:block;font-family:var(--perkifi-font-display);font-size:28px;color:var(--perkifi-text-primary);font-weight:800}
.stat span{font-size:13px;color:var(--perkifi-text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* =================================================================
   SECTIONS
   ================================================================= */
section{padding:72px 0}
@media(max-width:760px){section{padding:52px 0}.wrap{padding:0 18px}.final-cta{padding:44px 24px}.price{padding:26px}}
.soft{background:var(--perkifi-bg-secondary)}
.sec-head{max-width:62ch;margin-bottom:40px}
.kicker{display:block;font-family:var(--perkifi-font-body);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--perkifi-accent-brand);margin-bottom:12px}
.sec-head h2{color:var(--perkifi-text-primary);margin-bottom:12px}
.sec-head p{font-size:17px;color:var(--perkifi-text-secondary)}

/* =================================================================
   GRID + CARDS
   ================================================================= */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g3,.g2{grid-template-columns:1fr}}

.card{background:var(--perkifi-bg-card);border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-lg);padding:26px;position:relative;overflow:hidden;
  transition:background var(--perkifi-dur-base) var(--perkifi-ease),border-color var(--perkifi-dur-base) var(--perkifi-ease),box-shadow var(--perkifi-dur-base) var(--perkifi-ease)}
/* hover animates within the card — the frame stays planted and nothing
   paints outside it (no drop-shadow, no transform) */
.card:hover{background:var(--perkifi-bg-hover);border-color:var(--perkifi-border-hover)}
.card h3{font-family:var(--perkifi-font-display);font-size:18px;color:var(--perkifi-text-primary);font-weight:700;margin-bottom:8px}
.card p{font-size:15px;color:var(--perkifi-text-secondary)}
/* Top-rule accent for categorised tiles (replaces decorative emoji) */
.card.top-rule::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c,var(--perkifi-accent-brand));transition:height var(--perkifi-dur-base) var(--perkifi-ease),box-shadow var(--perkifi-dur-base) var(--perkifi-ease)}
.card.top-rule:hover::before{height:4px;box-shadow:0 2px 16px var(--c,var(--perkifi-accent-brand))}
.card .dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--perkifi-accent-brand));margin-bottom:16px;box-shadow:0 0 12px var(--c,var(--perkifi-accent-brand))}
/* Agent tiles keep their semantic emoji (a brand asset).
   width:max-content shrinks the box to the glyph so hover transforms
   pivot on the emoji itself, not an invisible full-width block. */
.card .agent-emoji{font-size:24px;display:block;width:max-content;line-height:1;margin-bottom:14px}
.tag{display:inline-block;font-family:var(--perkifi-font-display);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--perkifi-accent-brand);background:var(--perkifi-brand-bg);padding:4px 10px;border-radius:var(--perkifi-radius-pill);margin-top:14px}

/* =================================================================
   SECTION CALLOUT BANNER (gradient)
   ================================================================= */
.callout-banner{background:var(--perkifi-brand-gradient);color:#fff;border-radius:var(--perkifi-radius-xl);padding:26px 30px;display:flex;align-items:center;gap:18px;margin-bottom:34px;box-shadow:var(--perkifi-shadow-md)}
.callout-banner .glyph{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.18);font-size:22px}
.callout-banner h3{font-family:var(--perkifi-font-display);color:#fff;font-size:19px;font-weight:700;margin-bottom:3px}
.callout-banner p{color:rgba(255,255,255,.9);font-size:15px}
@media(max-width:600px){.callout-banner{flex-direction:column;align-items:flex-start}}

/* =================================================================
   TRUST BAR
   ================================================================= */
.trust-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--perkifi-border-subtle);border-bottom:1px solid var(--perkifi-border-subtle)}
.trust-bar .label{font-size:11px;font-weight:700;color:var(--perkifi-text-muted);text-transform:uppercase;letter-spacing:.1em;margin-right:8px;white-space:nowrap}
.trust-tag{font-family:var(--perkifi-font-display);font-size:13px;font-weight:600;color:var(--perkifi-text-secondary);background:var(--perkifi-bg-card);border:1px solid var(--perkifi-border-subtle);padding:7px 15px;border-radius:var(--perkifi-radius-pill)}

/* =================================================================
   NUMBERED VALUE LIST
   ================================================================= */
.numbered-list{display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.numbered-list{grid-template-columns:1fr}}
.numbered-item{display:flex;gap:18px;align-items:flex-start}
.numbered-item .num{flex:0 0 auto;font-family:var(--perkifi-font-display);font-size:15px;font-weight:800;color:#fff;background:var(--perkifi-brand-gradient);width:42px;height:42px;border-radius:var(--perkifi-radius-md);display:grid;place-items:center}
.numbered-item h3{font-family:var(--perkifi-font-display);font-size:17px;color:var(--perkifi-text-primary);font-weight:700;margin-bottom:4px}
.numbered-item p{font-size:15px;color:var(--perkifi-text-secondary)}

/* =================================================================
   STEP FLOW
   ================================================================= */
.step-flow{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.step-flow{grid-template-columns:1fr}}
.step-item{background:var(--perkifi-bg-card);border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-lg);padding:24px;position:relative}
.step-item .step-tag{font-family:var(--perkifi-font-display);font-size:11px;font-weight:700;color:var(--perkifi-accent-brand);text-transform:uppercase;letter-spacing:.08em}
.step-item h3{font-family:var(--perkifi-font-display);font-size:17px;color:var(--perkifi-text-primary);font-weight:700;margin:8px 0 6px}
.step-item p{font-size:14px;color:var(--perkifi-text-secondary)}

/* =================================================================
   ADVANTAGE / STAT BANNER (gradient)
   ================================================================= */
.adv-banner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:var(--perkifi-brand-gradient);color:#fff;border-radius:var(--perkifi-radius-2xl);padding:46px}
@media(max-width:760px){.adv-banner{grid-template-columns:1fr}}
.adv-stat{text-align:center}
.adv-stat b{display:block;font-family:var(--perkifi-font-display);font-size:24px;font-weight:800;margin-bottom:6px}
.adv-stat span{font-size:14px;color:rgba(255,255,255,.85)}

/* =================================================================
   TESTIMONIALS (dashed placeholder treatment)
   ================================================================= */
.testimonial-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.testimonial-grid{grid-template-columns:1fr}}
.testimonial-card{background:var(--perkifi-bg-card);border:1px dashed var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-lg);padding:24px}
.testimonial-card .quote{font-size:15px;color:var(--perkifi-text-secondary);font-style:italic;margin-bottom:16px}
.testimonial-card .who b{display:block;color:var(--perkifi-text-primary);font-size:14px}
.testimonial-card .who span{font-size:13px;color:var(--perkifi-text-muted)}
.placeholder-note{display:inline-block;margin-top:14px;font-family:var(--perkifi-font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--perkifi-text-muted);background:rgba(124,111,168,.16);padding:4px 10px;border-radius:var(--perkifi-radius-pill)}

/* =================================================================
   FINAL CTA BANNER
   ================================================================= */
.final-cta{background:var(--perkifi-brand-gradient);color:#fff;border-radius:var(--perkifi-radius-2xl);padding:60px 44px;text-align:center;position:relative;overflow:hidden}
.final-cta h2{color:#fff}
.final-cta p{color:rgba(255,255,255,.92);max-width:56ch;margin:14px auto 28px}
.final-cta .cta-row{justify-content:center}
.final-cta .btn-secondary{border-color:rgba(255,255,255,.5);color:#fff}
.final-cta .btn-secondary:hover{border-color:#fff}

/* =================================================================
   OUR STORY / QUOTE BLOCK + TEAM
   ================================================================= */
.quote-block{border-left:3px solid var(--perkifi-accent-brand);padding:6px 0 6px 22px;font-family:var(--perkifi-font-display);font-size:20px;color:var(--perkifi-text-primary);font-style:italic;font-weight:600;margin:22px 0;line-height:1.5;max-width:58ch}
.team-grid{display:grid;gap:18px;grid-template-columns:repeat(5,1fr)}
@media(max-width:960px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.team-grid{grid-template-columns:repeat(2,1fr)}}
.team-card{background:var(--perkifi-bg-card);border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-lg);padding:22px}
.team-avatar{width:52px;height:52px;border-radius:50%;background:var(--perkifi-brand-gradient);color:#fff;font-family:var(--perkifi-font-display);font-weight:800;font-size:16px;display:grid;place-items:center;margin-bottom:14px}
.team-card h3{font-family:var(--perkifi-font-display);font-size:16px;color:var(--perkifi-text-primary);font-weight:700;margin-bottom:2px}
.team-role{display:block;font-family:var(--perkifi-font-display);font-size:10px;font-weight:700;color:var(--perkifi-accent-brand);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.team-card p{font-size:13px;color:var(--perkifi-text-secondary);margin-bottom:10px}
.team-tags{display:flex;gap:6px;flex-wrap:wrap}
.team-tags .tag{margin-top:0;font-size:10px}

/* =================================================================
   PRICING
   ================================================================= */
.price{background:var(--perkifi-bg-card);border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-2xl);padding:34px;position:relative}
.price .kicker{margin-bottom:6px}
.price .amt{font-family:var(--perkifi-font-display);font-size:44px;color:var(--perkifi-text-primary);font-weight:800;margin-top:6px}
.price .amt span{font-family:var(--perkifi-font-body);font-size:16px;color:var(--perkifi-text-muted);font-weight:500}
.price ul{list-style:none;margin:22px 0 26px}
.price li{padding:8px 0 8px 28px;position:relative;font-size:15px;color:var(--perkifi-text-secondary)}
.price li::before{content:"→";position:absolute;left:0;color:var(--perkifi-accent-brand);font-weight:700}
.price .btn{width:100%;justify-content:center}
/* featured tier — gradient border + glow (the "selected" treatment) */
.price-featured{background:linear-gradient(var(--perkifi-bg-card),var(--perkifi-bg-card)) padding-box,var(--perkifi-brand-gradient) border-box;border:2px solid transparent;box-shadow:var(--perkifi-shadow-glow)}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--perkifi-brand-gradient);color:#fff;font-family:var(--perkifi-font-display);font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 16px;border-radius:var(--perkifi-radius-pill);white-space:nowrap}
/* warm/premium tier accents */
.price-warm .amt{color:var(--perkifi-gold)}
.price-warm li::before{color:var(--perkifi-gold)}

/* =================================================================
   CONTACT FORM (dark inputs)
   ================================================================= */
.form{background:var(--perkifi-bg-card);border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-xl);padding:30px;box-shadow:var(--perkifi-shadow-md)}
.form label{display:block;font-size:13px;font-weight:600;color:var(--perkifi-text-secondary);margin:14px 0 6px}
.form input,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-md);background:var(--perkifi-bg-input);color:var(--perkifi-text-primary);font:inherit;font-size:15px;outline:none;transition:border-color var(--perkifi-dur-fast) var(--perkifi-ease),box-shadow var(--perkifi-dur-fast) var(--perkifi-ease)}
.form input::placeholder,.form textarea::placeholder{color:var(--perkifi-text-muted)}
.form input:focus,.form textarea:focus{border-color:var(--perkifi-accent-brand);box-shadow:0 0 0 4px rgba(167,139,250,.18)}
.form .note{font-size:12px;color:var(--perkifi-text-muted);margin-top:14px}

/* Embedded HubSpot form — styled to match the dark surface */
.hs-form,.hs-form fieldset{max-width:none!important;width:100%!important}
.hs-form .hs-form-field{margin-bottom:14px}
.hs-form .hs-form-field>label{display:block;font-size:13px;font-weight:600;color:var(--perkifi-text-secondary);margin:0 0 6px}
.hs-form .hs-form-field>label .hs-form-required{color:var(--perkifi-accent-risk)}
.hs-form .hs-field-desc{font-size:12px;color:var(--perkifi-text-muted);margin:0 0 6px}
.hs-form .hs-input{width:100%!important;box-sizing:border-box;padding:12px 14px;border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-md);background:var(--perkifi-bg-input);color:var(--perkifi-text-primary);font:inherit;font-size:15px;outline:none;transition:border-color var(--perkifi-dur-fast) var(--perkifi-ease),box-shadow var(--perkifi-dur-fast) var(--perkifi-ease)}
.hs-form textarea.hs-input{min-height:96px}
.hs-form .hs-input:focus{border-color:var(--perkifi-accent-brand);box-shadow:0 0 0 4px rgba(167,139,250,.18)}
.hs-form .hs-input::placeholder{color:var(--perkifi-text-muted)}
.hs-form select.hs-input{appearance:none}
.hs-form .inputs-list{list-style:none;margin:0;padding:0}
.hs-form .hs-error-msg,.hs-form .hs-error-msgs label{color:var(--perkifi-danger)!important;font-size:12px}
.hs-form .legal-consent-container,.hs-form .legal-consent-container p,.hs-form .legal-consent-container span{color:var(--perkifi-text-muted)!important;font-size:12px}
.hs-form .hs-button{display:inline-flex;align-items:center;gap:8px;font-family:var(--perkifi-font-display);font-weight:700;font-size:15px;padding:13px 24px;border-radius:var(--perkifi-radius-lg);border:none;cursor:pointer;background:linear-gradient(135deg,var(--perkifi-accent-brand),var(--perkifi-accent-brand-hover));color:#fff;box-shadow:0 4px 20px rgba(167,139,250,.30);margin-top:10px;transition:transform var(--perkifi-dur-base) var(--perkifi-ease),box-shadow var(--perkifi-dur-base) var(--perkifi-ease)}
.hs-form .hs-button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 28px rgba(167,139,250,.42)}

/* =================================================================
   FOOTER
   ================================================================= */
footer{border-top:1px solid var(--perkifi-border-subtle);padding:52px 0 64px;background:var(--perkifi-bg-secondary)}
.fcols{display:flex;gap:50px;flex-wrap:wrap;justify-content:space-between}
.fcol h4{font-family:var(--perkifi-font-display);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--perkifi-text-muted);margin-bottom:12px}
.fcol a{display:block;font-size:14px;color:var(--perkifi-text-secondary);padding:4px 0;cursor:pointer;transition:color var(--perkifi-dur-fast) var(--perkifi-ease)}
.fcol a:hover{color:var(--perkifi-accent-brand)}
.fbottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--perkifi-border-subtle);font-size:13px;color:var(--perkifi-text-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* =================================================================
   CHOOSER (persona picker)
   ================================================================= */
.chooser{min-height:100vh;display:grid;place-items:center;padding:56px 24px;position:relative;overflow:hidden}
.chooser::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(46% 42% at 80% 0%,rgba(152,94,236,.30),transparent 60%),
  radial-gradient(42% 42% at 8% 100%,rgba(59,110,255,.22),transparent 60%),
  radial-gradient(30% 34% at 92% 96%,rgba(253,197,46,.08),transparent 60%)}
.chooser .inner{position:relative;text-align:center;max-width:940px}
.choose-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media(max-width:760px){.choose-cards{grid-template-columns:1fr}}
/* persona card = 2px gradient-border wrapper, flat inner */
.choose-card{padding:2px;border-radius:var(--perkifi-radius-xl);background:linear-gradient(135deg,var(--perkifi-accent-brand),var(--perkifi-accent-viral),var(--perkifi-accent-creator));cursor:pointer;
  transition:transform var(--perkifi-dur-base) var(--perkifi-ease),box-shadow var(--perkifi-dur-base) var(--perkifi-ease)}
.choose-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--perkifi-shadow-glow)}
.choose-card .persona-inner{background:var(--perkifi-bg-card);border-radius:16px;padding:38px 32px;text-align:left;height:100%}
.choose-card .emoji{font-size:34px;display:block;line-height:1;margin-bottom:20px}
.choose-card .plabel{display:block;font-family:var(--perkifi-font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.choose-card h3{font-family:var(--perkifi-font-display);font-size:24px;color:var(--perkifi-text-primary);font-weight:800;margin-bottom:10px}
.choose-card p{font-size:16px;color:var(--perkifi-text-secondary);margin-bottom:22px;min-height:52px}
.choose-card.for-brand .plabel{color:var(--perkifi-accent-brand)}
.choose-card.for-creator{background:linear-gradient(135deg,var(--perkifi-accent-creator),var(--perkifi-accent-viral),var(--perkifi-accent-brand))}
.choose-card.for-creator .plabel{color:var(--perkifi-accent-creator)}
/* quick benefit scan inside each persona card */
.choose-list{list-style:none;margin:0 0 24px;display:flex;flex-direction:column;gap:8px}
.choose-list li{position:relative;padding-left:24px;font-size:14px;color:var(--perkifi-text-secondary)}
.choose-list li::before{content:"✓";position:absolute;left:0;font-family:var(--perkifi-font-display);font-weight:800;color:var(--perkifi-accent-safety)}
.choose-card.for-creator .choose-list li::before{color:var(--perkifi-accent-creator)}
/* shared credibility strip under the cards */
.chooser-meta{margin-top:40px}
.chooser-tagline{font-family:var(--perkifi-font-display);font-weight:700;font-size:17px;color:var(--perkifi-text-primary);margin-bottom:18px}
.chooser-platforms{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.chooser-platforms .label{font-size:11px;font-weight:700;color:var(--perkifi-text-muted);text-transform:uppercase;letter-spacing:.1em;margin-right:4px}
.chooser-links{margin-top:22px;font-size:14px;color:var(--perkifi-text-muted)}
.chooser-links a{color:var(--perkifi-text-secondary);border-bottom:1px solid var(--perkifi-border-subtle);padding-bottom:1px;cursor:pointer;transition:color var(--perkifi-dur-fast) var(--perkifi-ease),border-color var(--perkifi-dur-fast) var(--perkifi-ease)}
.chooser-links a:hover{color:var(--perkifi-accent-brand);border-color:var(--perkifi-accent-brand)}

/* =================================================================
   BLOG
   ================================================================= */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.chip{font-family:var(--perkifi-font-display);font-size:13px;font-weight:700;letter-spacing:.03em;padding:8px 16px;border-radius:var(--perkifi-radius-pill);border:1px solid var(--perkifi-border-subtle);background:transparent;color:var(--perkifi-text-secondary);cursor:pointer;transition:.16s var(--perkifi-ease)}
.chip:hover{border-color:var(--perkifi-border-strong);color:var(--perkifi-text-primary)}
.chip.on{background:var(--perkifi-brand-gradient);color:#fff;border-color:transparent}
.post-card{display:flex;flex-direction:column;cursor:pointer}
.post-meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--perkifi-text-muted);margin-bottom:12px;flex-wrap:wrap}
.post-card h3{font-family:var(--perkifi-font-display);font-size:20px;margin-bottom:10px}
.post-card .more{margin-top:auto;color:var(--perkifi-accent-brand);font-weight:600;font-size:14px;padding-top:14px}
.feature-post{grid-column:1/-1;background:var(--perkifi-brand-gradient);border:none}
.feature-post h3{font-size:26px;color:#fff}
.feature-post p{color:rgba(255,255,255,.92);font-size:16px}
.feature-post .post-meta{color:rgba(255,255,255,.85)}
.feature-post .tag{background:rgba(255,255,255,.2);color:#fff}
.feature-post .more{color:#fff}
.article{max-width:720px;margin:0 auto}
.article h1{font-family:var(--perkifi-font-display);font-size:clamp(30px,4vw,42px);color:var(--perkifi-text-primary);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:14px 0 20px}
.article .body p{font-size:17px;color:var(--perkifi-text-secondary);margin:0 0 18px}
.article .body h2{font-family:var(--perkifi-font-display);font-size:24px;color:var(--perkifi-text-primary);margin:32px 0 10px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--perkifi-accent-brand);font-weight:600;cursor:pointer;font-size:15px;margin-bottom:8px}
.back:hover{text-decoration:underline}

/* =================================================================
   LOGO (wordmark lockup)
   ================================================================= */
/* the inline <svg><use> has no viewBox, so it defaults to 300px wide —
   aspect-ratio pins the rendered width to the wordmark's true proportions */
.brand-wordmark{height:32px;width:auto;aspect-ratio:1308/420;display:inline-block;color:var(--perkifi-text-primary)}
.nav .brand-wordmark{height:32px}
footer .brand-wordmark{height:32px}

/* =================================================================
   COMPARISON / CONS LIST (Today's options)
   ================================================================= */
.con-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px}
.con-list li{position:relative;padding-left:24px;font-size:14px;color:var(--perkifi-text-secondary)}
.con-list li::before{content:"✕";position:absolute;left:0;color:var(--perkifi-accent-risk);font-weight:800}
.card .col-label{font-family:var(--perkifi-font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--perkifi-text-muted)}

/* =================================================================
   SOLUTION PIPELINE (VET → SCORE → ACTIVATE → MONITOR → OPTIMIZE)
   ================================================================= */
.pipeline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:0 auto}
.pipeline .stage{display:inline-flex;align-items:center;gap:8px;font-family:var(--perkifi-font-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--perkifi-brand-gradient);padding:11px 20px;border-radius:var(--perkifi-radius-pill);box-shadow:0 4px 16px rgba(167,139,250,.25)}
.pipeline .stage svg{width:15px;height:15px;flex:0 0 auto}
/* small icons in the solution input/outcome pills */
.io-col .pill-list span{display:flex;align-items:center;gap:9px}
.io-col .pill-list span svg{width:15px;height:15px;flex:0 0 auto;color:var(--perkifi-accent-brand)}
.pipeline .arrow{color:var(--perkifi-accent-brand);font-weight:800;font-size:18px}

/* inputs → outcomes */
.io-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center}
@media(max-width:760px){.io-grid{grid-template-columns:1fr}.io-grid .io-mid{transform:rotate(90deg)}}
.io-col h4{font-family:var(--perkifi-font-display);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--perkifi-text-muted);margin-bottom:14px}
.io-col .pill-list{display:flex;flex-direction:column;gap:8px}
.io-col .pill-list span{background:var(--perkifi-bg-input);border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-md);padding:10px 14px;font-size:14px;color:var(--perkifi-text-primary)}
.io-mid{font-size:26px;color:var(--perkifi-accent-brand);text-align:center}

/* market TAM/SAM/SOM */
.market-num{font-family:var(--perkifi-font-display);font-weight:800;font-size:34px;color:#fff;margin-bottom:2px}

/* =================================================================
   VETTING LAYER DIAGRAM — agents sit on top of one horizontal
   vetting platform that runs under every lifecycle stage
   ================================================================= */
.vet-layer{margin-top:26px}
.vet-agents{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
@media(max-width:760px){.vet-agents{grid-template-columns:repeat(2,1fr)}}
.vet-chip{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--perkifi-font-display);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--perkifi-text-primary);background:var(--perkifi-bg-card);border:1px solid var(--perkifi-border-subtle);border-radius:var(--perkifi-radius-md);padding:14px 10px;text-align:center}
.vet-base{background:var(--perkifi-brand-gradient);border-radius:var(--perkifi-radius-lg);padding:18px 24px;text-align:center;box-shadow:var(--perkifi-shadow-md)}
.vet-base b{display:block;font-family:var(--perkifi-font-display);font-weight:800;font-size:16px;letter-spacing:.02em;color:#fff}
.vet-base span{font-size:13px;color:rgba(255,255,255,.88)}

/* =================================================================
   FLAIR — scroll reveal, ambient motion, micro-interactions.
   JS applies .reveal/.in and removes both after the entrance runs,
   so component hover styles are untouched afterwards; without JS
   nothing is hidden and the page renders fully.
   ================================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--perkifi-ease-soft) var(--rd,0s),transform .65s var(--perkifi-ease-soft) var(--rd,0s)}
.reveal.in{opacity:1;transform:none}
/* cards enter within their own footprint (scale-up-in-place, no slide) */
.card.reveal{transform:scale(.965)}
.card.reveal.in{transform:none}
.pipeline .stage.reveal{transform:scale(.72)}
.pipeline .arrow.reveal{transform:translateX(-8px)}
.vet-base.reveal{transform:scaleX(.4)}   /* the vetting layer extends horizontally into place */
.pipeline .stage.reveal.in,.pipeline .arrow.reveal.in,.vet-base.reveal.in{transform:none}

/* ambient drift on the hero / chooser bokeh */
.hero::before,.chooser::before{inset:-48px;animation:perkifi-drift 22s ease-in-out infinite alternate}
.chooser::before{animation-duration:30s}
@keyframes perkifi-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-26px,0) scale(1.07)}}

/* sheen sweep on primary + warm buttons */
.btn-primary,.btn-warm{position:relative;overflow:hidden}
.btn-primary::after,.btn-warm::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);opacity:0;transition:left .6s var(--perkifi-ease),opacity .3s var(--perkifi-ease);pointer-events:none}
.btn-primary:hover::after,.btn-warm:hover::after{left:125%;opacity:1}

/* nav: gradient underline on hover + shadow once scrolled */
.nav .links a{position:relative}
.nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;background:var(--perkifi-brand-gradient);transition:right .3s var(--perkifi-ease)}
.nav .links a:hover::after{right:0}
.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* agent emoji lift + chooser emoji idle float */
.card .agent-emoji{transition:transform var(--perkifi-dur-base) var(--perkifi-ease)}
.card:hover .agent-emoji{transform:translateY(-4px) rotate(-8deg) scale(1.18)}
.choose-card .emoji{animation:perkifi-float 5.5s ease-in-out infinite}
.choose-card.for-creator .emoji{animation-delay:2.7s}
@keyframes perkifi-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* trust tags warm in place on hover */
.trust-tag{transition:border-color var(--perkifi-dur-fast) var(--perkifi-ease),color var(--perkifi-dur-fast) var(--perkifi-ease),background var(--perkifi-dur-fast) var(--perkifi-ease)}
.trust-tag:hover{border-color:var(--perkifi-border-strong);color:var(--perkifi-text-primary)}

/* pipeline stages brighten in place */
.pipeline .stage{transition:filter var(--perkifi-dur-base) var(--perkifi-ease)}
.pipeline .stage:hover{filter:brightness(1.18)}

/* periodic light sweep across the vetting-platform layer */
.vet-base{position:relative;overflow:hidden}
.vet-base::after{content:"";position:absolute;top:0;bottom:0;width:42%;left:-55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);transform:skewX(-16deg);animation:perkifi-sweep 5.5s ease-in-out infinite}
@keyframes perkifi-sweep{0%,18%{left:-55%}60%,100%{left:130%}}

/* gradient surfaces slowly breathe (reuses the perkifi-grad keyframes) */
.final-cta,.feature-post,.callout-banner{background-size:170% 170%;animation:perkifi-grad 9s ease infinite}

/* cursor spotlight on cards — hover-capable devices only; JS feeds --mx/--my */
@media(hover:hover){
  .card::after,.price::after,.choose-card .persona-inner::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--perkifi-ease);background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,.13),transparent 65%)}
  .card:hover::after,.price:hover::after,.choose-card:hover .persona-inner::after{opacity:1}
  .choose-card .persona-inner{position:relative}
}

/* hovering an agent lights the vetting layer it runs on — glow stays inside the bar */
.vet-base{transition:box-shadow .35s var(--perkifi-ease),filter .35s var(--perkifi-ease)}
.vet-base.lit{box-shadow:inset 0 0 42px rgba(255,255,255,.14);filter:brightness(1.1) saturate(1.08)}
.vet-chip{transition:border-color var(--perkifi-dur-base) var(--perkifi-ease),background var(--perkifi-dur-base) var(--perkifi-ease)}
.vet-chip:hover{border-color:var(--perkifi-border-strong);background:var(--perkifi-bg-hover)}

/* wordmark gives a tiny nod on hover */
.brand svg{transition:transform .3s var(--perkifi-ease)}
.brand:hover svg{transform:translateY(-1px) rotate(-2deg) scale(1.04)}

/* site-wide cursor glow — a soft light that trails the pointer and
   brightens over interactive elements. JS creates the element only on
   fine-pointer, hover-capable, motion-ok devices. */
.cursor-glow{position:fixed;left:0;top:0;width:820px;height:820px;margin:-410px 0 0 -410px;border-radius:50%;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle,rgba(152,94,236,.11) 0%,rgba(59,110,255,.055) 35%,transparent 68%);will-change:transform;transition:opacity .5s var(--perkifi-ease),filter .35s var(--perkifi-ease)}
.cursor-glow.on{opacity:1}
.cursor-glow.boost{filter:brightness(1.7) saturate(1.15)}

/* =================================================================
   REDUCED MOTION — disable transforms & animation per DS guidance
   ================================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover,.choose-card:hover{transform:none}
}