@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/static/fonts/SpaceGrotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/static/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/static/fonts/JetBrainsMono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* View Transitions API DISABLED 2026-07-08: cross-document navigation:auto made
   Safari snapshot the whole page on every nav (crossfade "flash" + stall, worse on
   the heavier operator console). navigation:none restores plain instant navigation. */
@view-transition{navigation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation-name:vtFadeOut}
::view-transition-new(root){animation-name:vtFadeIn}
@keyframes vtFadeOut{to{opacity:0;transform:translateY(-6px) scale(.998)}}
@keyframes vtFadeIn{from{opacity:0;transform:translateY(8px) scale(.998)}}
/* Persistent elements that stay across navigation - assign view-transition-name
   so they morph in place rather than crossfade with the rest of the page. */
.brand{view-transition-name:eb-brand}
.nav{view-transition-name:eb-nav}
.site-footer{view-transition-name:eb-footer}
/* Faster, less aggressive animation when the user opts out of motion. */
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
:root{
  --bg:#020508;--bg2:#050d18;--panel:#0b1524;--panel2:#101e30;
  --line:rgba(59,91,255,.18);--line2:rgba(255,255,255,.06);
  /* Editorial / fintech-clean palette (cobalt + electric cyan). --gold/--gold2/--gold3 kept as token names for minimal churn; values re-aimed at the new accent family. */
  --gold:#5EE2FF;--gold2:#A6C0FF;--gold3:rgba(59,91,255,.08);
  --primary:#3B5BFF;--primary-fg:#ffffff;
  --ig-sunglow:#A6C0FF;--ig-orange:#5EE2FF;--ig-hot:#3B5BFF;--ig-grape:#1E2A6B;--ig-blue:#6FA8FF;
  --text:#eef2ff;--muted:rgba(238,242,255,.68);--muted2:rgba(238,242,255,.44);
  --ok:#6ee7b7;--ok2:rgba(110,231,183,.12);
  --warn:#fcd34d;--danger:#fca5a5;
  --shadow:0 40px 100px rgba(0,0,0,.55);
  --shadow-sm:0 8px 32px rgba(0,0,0,.35);
  --r:28px;--r-sm:18px;--r-xs:12px;

  /* v2 design tokens (2026-04-23) — premium redesign */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r1:6px;--r2:10px;--r3:14px;--r4:20px;--r5:28px;
  --e1:0 1px 2px rgba(0,0,0,.3);
  --e2:0 4px 12px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.2);
  --e3:0 12px 28px rgba(0,0,0,.4),0 4px 8px rgba(0,0,0,.25);
  --e4:0 24px 60px rgba(0,0,0,.5);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* accent scale — cobalt+cyan editorial. --accent-lime keeps its name but is now electric cyan. */
  --accent-lime:#5EE2FF;--accent-lime-fg:#04141a;
  --accent-sky:#5EE2FF;--accent-violet:#6366F1;--accent-rose:#3B5BFF;
  --accent-emerald:#6ee7b7;--accent-amber:#E0A458;
  --glass-1-bg:rgba(255,255,255,.04);--glass-1-bd:rgba(255,255,255,.08);
  --glass-2-bg:rgba(255,255,255,.07);--glass-2-bd:rgba(255,255,255,.12);
  --grad-ig:linear-gradient(135deg,#3B5BFF 0%,#5EE2FF 100%);
  --grad-ig-story:conic-gradient(from 45deg,#3B5BFF,#5EE2FF,#A6C0FF,#3B5BFF);
  --grad-gold:linear-gradient(135deg,#A6C0FF 0%,#3B5BFF 100%);
  --grad-lime:linear-gradient(135deg,#5EE2FF 0%,#3B5BFF 100%);
  --grad-sky:linear-gradient(135deg,#3B5BFF 0%,#5EE2FF 100%);
  --grad-violet:linear-gradient(135deg,#3B5BFF 0%,#1E2A6B 100%);
  --grad-success:linear-gradient(135deg,#86efac 0%,#16a34a 100%);
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
/* overflow-x:clip, never hidden: hidden computes overflow-y:auto and promotes body
   to a scroll container, which kills position:sticky on the nav (worst on mobile).
   clip suppresses sideways scroll identically without creating a scroll container. */
html,body{margin:0;padding:0;overflow-x:clip;max-width:100%;
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(59,91,255,.10), transparent),
    radial-gradient(ellipse 60% 30% at 85% 20%, rgba(99,102,241,.08), transparent),
    radial-gradient(ellipse 70% 35% at 15% 65%, rgba(94,226,255,.06), transparent),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  color:var(--text);
  font-family:var(--font-display);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Layout - true widescreen, edge-to-edge with breathing padding */
.wrap{max-width:100%;margin:0 auto;padding:28px clamp(20px, 3.2vw, 96px) 100px;position:relative;z-index:1}

/* Nav */
.nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap;
     padding:14px 20px;border-radius:999px;
     background:rgba(255,255,255,.025);border:1px solid var(--line2);
     backdrop-filter:blur(12px);}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand-mark{display:flex;align-items:center;flex-shrink:0;transition:filter .2s}
.brand:hover .brand-mark{filter:drop-shadow(0 0 8px rgba(59,91,255,.40))}
.brand-word{font-size:17px;font-weight:900;letter-spacing:-.025em;line-height:1;user-select:none}
.brand-stra{color:rgba(166,192,255,.48)}
.brand-clipper{color:#A6C0FF}
.navlinks{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Buttons & pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;
      border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;
      border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--muted);
      transition:background .15s,border-color .15s,color .15s}
.pill:hover{background:rgba(255,255,255,.08);color:var(--text)}
.pill.active{background:rgba(59,91,255,.12);border-color:rgba(59,91,255,.28);color:var(--gold2)}
.pill-ghost{background:transparent;border-color:transparent;color:var(--muted2)}
.pill-ghost:hover{color:var(--text);background:rgba(255,255,255,.06)}
.pill-cta{background:var(--grad-ig);background-size:220% 220%;background-position:0% 50%;color:#fff;font-weight:800;border-color:rgba(59,91,255,.5);text-shadow:0 1px 0 rgba(0,0,0,.22);transition:background-position .8s var(--ease-out),filter .2s,box-shadow .2s}
.pill-cta:hover{background-position:100% 50%;filter:brightness(1.06);box-shadow:0 6px 20px rgba(59,91,255,.38)}
@media (prefers-reduced-motion:reduce){.pill-cta{transition:none}.pill-cta:hover{background-position:0% 50%}}
.nav-toggle-input{display:none}
.nav-toggle-btn{display:none;flex-direction:column;gap:4px;padding:8px;cursor:pointer;border:none;background:transparent}
.nav-toggle-btn span{display:block;width:20px;height:2px;background:var(--muted);border-radius:2px;transition:transform .2s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     border-radius:999px;padding:12px 22px;font-size:14px;font-weight:800;
     border:1px solid rgba(59,91,255,.35);
     background:linear-gradient(135deg,rgba(59,91,255,.28) 0%,rgba(59,91,255,.12) 100%);
     color:var(--text);cursor:pointer;transition:all .15s;letter-spacing:.01em}
.btn:hover{background:linear-gradient(135deg,rgba(59,91,255,.40) 0%,rgba(59,91,255,.20) 100%);
           border-color:rgba(59,91,255,.55);transform:translateY(-1px);box-shadow:0 8px 24px rgba(59,91,255,.18)}
.btn.secondary{background:rgba(255,255,255,.05);border-color:var(--line2);
               color:var(--muted)}
.btn.secondary:hover{background:rgba(255,255,255,.09);color:var(--text)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted2)}
.btn.ghost:hover{color:var(--text)}
.btn.danger-btn{background:rgba(252,165,165,.10);border-color:rgba(252,165,165,.25);color:var(--danger)}
button.btn{font:inherit}

/* Cards */
.card{
  background:linear-gradient(160deg,rgba(16,30,48,.97) 0%,rgba(8,16,28,.97) 100%);
  border:1px solid var(--line2);border-radius:var(--r);padding:28px;
  box-shadow:var(--shadow-sm);
}
.card-gold{border-color:rgba(59,91,255,.20);
  background:linear-gradient(160deg,rgba(59,91,255,.04) 0%,rgba(8,16,28,.97) 60%)}

/* Campaign cards */
.campaign-card{
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(16,30,48,.97),rgba(8,16,28,.97));
  border:1px solid var(--line2);border-radius:24px;padding:22px;
  position:relative;overflow:hidden;
  transition:border-color .2s,transform .18s,box-shadow .2s;
  cursor:pointer;
}
.campaign-card::before{
  content:'';position:absolute;inset:0;border-radius:24px;
  background:linear-gradient(135deg,rgba(59,91,255,.06) 0%,transparent 60%);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.campaign-card:hover{border-color:rgba(59,91,255,.32);transform:translateY(-2px);
                     box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 0 1px rgba(59,91,255,.10)}
.campaign-card:hover::before{opacity:1}
.campaign-card.open{border-left:3px solid var(--gold)}
.campaign-card.review{border-left:3px solid var(--warn);border-color:rgba(252,211,77,.18)}
.cc-eyebrow{display:flex;gap:6px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.cc-title{font-size:17px;font-weight:800;line-height:1.25;margin-bottom:10px}
.cc-brief{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:16px;
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px;
         border-top:1px solid var(--line2)}
.cc-meta-item{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted2)}
.cc-meta-item strong{color:var(--text);font-weight:700}

/* Eyebrow badges */
.eyebrow{display:inline-flex;padding:5px 10px;border-radius:999px;
         background:rgba(59,91,255,.10);border:1px solid rgba(59,91,255,.20);
         color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
       font-size:11px;font-weight:700;border:1px solid}
.badge.open{color:var(--ok);border-color:rgba(110,231,183,.25);background:rgba(110,231,183,.08)}
.badge.review{color:var(--warn);border-color:rgba(252,211,77,.25);background:rgba(252,211,77,.07)}
.badge.draft{color:var(--muted2);border-color:var(--line2);background:rgba(255,255,255,.03)}
.badge.closed{color:var(--muted2);border-color:var(--line2);background:rgba(255,255,255,.03)}
.badge.enrolled{color:#93c5fd;border-color:rgba(147,197,253,.25);background:rgba(147,197,253,.08)}
.badge.submitted{color:var(--warn);border-color:rgba(252,211,77,.25);background:rgba(252,211,77,.07)}
.badge.approved{color:var(--ok);border-color:rgba(110,231,183,.25);background:rgba(110,231,183,.08)}
.badge.credited{color:var(--gold2);border-color:rgba(59,91,255,.25);background:rgba(59,91,255,.08)}
.badge.rejected,.badge.denied,.badge.no_proof{color:#f87171;border-color:rgba(248,113,113,.25);background:rgba(248,113,113,.07)}
.badge.flagged{color:#fbbf24;border-color:rgba(251,191,36,.25);background:rgba(251,191,36,.07)}

/* Proof tag box */
.proof-tag-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:linear-gradient(135deg,rgba(59,91,255,.10),rgba(59,91,255,.04));
  border:1px solid rgba(59,91,255,.22);border-radius:var(--r-xs);
  padding:16px 18px;font-size:15px;font-weight:700;color:var(--gold2);
  letter-spacing:.04em;word-break:break-all;line-height:1.5;
  position:relative;
}
.proof-tag-box .ptag-label{display:block;font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:6px}
.proof-tag-big{font-size:22px;font-weight:900}

/* Layout grids */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}
.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}
.span-9{grid-column:span 9}.span-12{grid-column:span 12}
.camp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

/* Typography */
h1{font-size:clamp(34px,5.5vw,62px);line-height:.96;margin:18px 0 16px;font-weight:900;
   letter-spacing:-.02em}
h2{margin:0;font-weight:800}
h3{margin:0 0 10px;font-weight:700;font-size:16px}
.lede{font-size:17px;line-height:1.6;color:var(--muted);max-width:640px}
.muted{color:var(--muted)} .muted2{color:var(--muted2)}
.mini{font-size:12px;color:var(--muted2)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Metrics */
.metric{padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.025);border:1px solid var(--line2)}
.metric .k{font-size:32px;font-weight:900;margin-top:8px;letter-spacing:-.02em}
.metric .label{font-size:12px;font-weight:700;color:var(--muted2);letter-spacing:.05em;text-transform:uppercase}

/* Forms */
form.stack{display:grid;gap:16px}
.field{display:grid;gap:8px}
label{font-size:12px;font-weight:700;color:var(--gold2);letter-spacing:.04em;text-transform:uppercase}
.req-mark{color:var(--err,#fb7185);margin-left:2px;font-weight:800}
input,textarea,select{width:100%;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);color:var(--text);padding:14px 16px;font:inherit;font-size:14px;
  transition:border-color .15s,background .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(59,91,255,.40);
  background:rgba(255,255,255,.06)}
select option{background:#0b1524;color:#eef2ff}
textarea{min-height:130px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.note{font-size:12px;color:var(--muted2);line-height:1.5}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* List rows */
.list{display:grid;gap:10px}
.row{display:flex;justify-content:space-between;gap:14px;align-items:center;
     padding:16px 20px;border-radius:var(--r-sm);background:rgba(255,255,255,.025);
     border:1px solid var(--line2);transition:border-color .15s}
.row:hover{border-color:rgba(59,91,255,.18)}

/* Notices */
.notice{padding:14px 17px;border-radius:var(--r-sm);
        border:1px solid rgba(252,165,165,.22);background:rgba(252,165,165,.07);
        color:#ffd7d7;margin-bottom:16px;font-size:14px}
.success{border-color:rgba(110,231,183,.24);background:rgba(110,231,183,.07);color:#d0fdf4}
.warn-box{border-color:rgba(252,211,77,.22);background:rgba(252,211,77,.07);color:#fefce8}

/* Auth shell */
.auth-shell{max-width:680px;margin:0 auto}

/* Steps */
.steps{display:grid;gap:12px}
.step{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;
      border-radius:var(--r-sm);background:rgba(255,255,255,.025);border:1px solid var(--line2)}
.step.done{border-color:rgba(110,231,183,.15);background:rgba(110,231,183,.03)}
/* Social proof stats */
.stat{min-width:120px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;
       padding:16px 20px;display:flex;flex-direction:column;align-items:center;gap:4px}
.stat b{font-size:22px;font-weight:900;color:var(--gold2);font-variant-numeric:tabular-nums}

.step-n{flex-shrink:0;width:36px;height:36px;border-radius:999px;
        background:linear-gradient(180deg,rgba(59,91,255,.22),rgba(59,91,255,.10));
        border:1px solid rgba(59,91,255,.28);display:flex;align-items:center;
        justify-content:center;font-weight:800;color:var(--gold2);font-size:13px;margin-top:2px}
.step.done .step-n{background:linear-gradient(180deg,rgba(110,231,183,.22),rgba(110,231,183,.10));
                    border-color:rgba(110,231,183,.28);color:var(--ok)}

/* Onboarding bar */
.ob-bar{display:flex;border-radius:14px;overflow:hidden;border:1px solid var(--line2);margin-bottom:24px}
.ob-step{flex:1;padding:12px 10px;text-align:center;background:rgba(255,255,255,.02);
         border-right:1px solid var(--line2);font-size:11px;font-weight:700;color:var(--muted2);line-height:1.4}
.ob-step:last-child{border-right:0}
.ob-step.done{background:rgba(110,231,183,.07);color:var(--ok)}
.ob-step.active{background:rgba(59,91,255,.09);color:var(--gold2)}
.ob-step .ob-icon{font-size:14px;display:block;margin-bottom:3px}

/* Delivery card (existing) */
.delivery-card{padding:20px 22px;border-radius:22px;
               background:linear-gradient(180deg,rgba(59,91,255,.04),rgba(59,91,255,.01));
               border:1px solid rgba(59,91,255,.12);margin-bottom:12px}
.delivery-type{display:inline-flex;align-items:center;border-radius:999px;padding:5px 11px;
               font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
               background:rgba(59,91,255,.12);border:1px solid rgba(59,91,255,.22);
               color:var(--gold2);margin-bottom:10px}
/* Delivery timeline */
.tl-bar{display:flex;gap:0;justify-content:space-between;position:relative}
.tl-bar::before{content:'';position:absolute;top:7px;left:16px;right:16px;height:2px;background:var(--line2);z-index:0}
.tl-dot{display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1;flex:1}
.tl-circle{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);background:var(--bg);flex-shrink:0}
.tl-label{font-size:9px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em}
.tl-dot.done .tl-circle{background:var(--ok);border-color:var(--ok)}
.tl-dot.done .tl-label{color:var(--ok)}
.tl-dot.active .tl-circle{background:var(--gold2);border-color:var(--gold2);box-shadow:0 0 6px rgba(59,91,255,.4)}
.tl-dot.active .tl-label{color:var(--gold2)}

.hashtag-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
             background:rgba(59,91,255,.07);border:1px solid rgba(59,91,255,.15);
             border-radius:var(--r-xs);padding:12px 15px;font-size:13px;color:var(--gold2);
             margin-top:12px;word-break:break-all;line-height:1.5}
.credits-card{padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.025);
              border:1px solid var(--line2);margin-bottom:10px}

/* Section title */
.section-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin-bottom:18px}
.section-title h2{margin:0;font-size:22px}

/* Tags / status */
.tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;
     font-size:11px;font-weight:800;border:1px solid rgba(255,255,255,.10)}
.ok{color:var(--ok)} .warn{color:var(--warn)} .danger{color:var(--danger)}

/* Progress bar */
.progress{height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.progress>span{display:block;height:100%;
               background:linear-gradient(90deg,rgba(59,91,255,.6),rgba(59,91,255,1));
               border-radius:999px;transition:width .4s}

/* Proof / audience grids */
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.proof-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid var(--line2)}
.proof-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Empty state */
.empty-state{padding:40px 28px;text-align:center;border-radius:var(--r-sm);
             border:1px dashed rgba(255,255,255,.08);color:var(--muted2)}
.empty-state .es-icon{font-size:32px;margin-bottom:12px}

/* Stats table */
.stats-table{width:100%;border-collapse:collapse;font-size:13px}
.stats-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;
                 color:var(--muted2);letter-spacing:.06em;text-transform:uppercase;
                 border-bottom:1px solid var(--line2)}
.stats-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.stats-table tr:hover td{background:rgba(255,255,255,.02)}

/* Leaderboard */
.lb-row{display:flex;align-items:center;gap:14px;padding:12px 16px;
        border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line2);
        margin-bottom:8px}
.lb-rank{flex-shrink:0;width:28px;height:28px;border-radius:999px;
         background:rgba(59,91,255,.12);border:1px solid rgba(59,91,255,.22);
         display:flex;align-items:center;justify-content:center;
         font-size:12px;font-weight:800;color:var(--gold2)}
.lb-rank.r1{background:rgba(255,215,0,.18);border-color:rgba(255,215,0,.35);color:#ffd700}
.lb-rank.r2{background:rgba(192,192,192,.12);border-color:rgba(192,192,192,.25);color:#c0c0c0}
.lb-rank.r3{background:rgba(205,127,50,.12);border-color:rgba(205,127,50,.25);color:#cd7f32}

/* Hero landing */
.hero-landing{margin-bottom:28px}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-bottom:28px}

/* Countdown */
.countdown{display:inline-flex;gap:8px;align-items:baseline}
.countdown .cd-val{font-size:20px;font-weight:900;color:var(--gold2)}
.countdown .cd-unit{font-size:11px;color:var(--muted2)}

@media(max-width:960px){
  .hero-split,.camp-grid,.grid{grid-template-columns:1fr}
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-12{grid-column:span 12}
  .wrap{padding:16px 14px 70px}
  h1{font-size:38px}
  .row{flex-direction:column;align-items:flex-start}
  .proof-grid,.form-grid{grid-template-columns:1fr}
  .ob-step{font-size:10px;padding:9px 5px}
  .nav{border-radius:20px}
  .nav-toggle-btn{display:flex}
  .navlinks{display:none;flex-direction:column;width:100%;gap:4px;padding-top:8px}
  .nav-toggle-input:checked ~ .navlinks{display:flex}
  .navlinks .pill{padding:8px 14px;font-size:13px;width:100%;text-align:center;justify-content:center}
}
/* Mobile GPU: disable heavy blur filters and reduce animations */
@media(max-width:960px){
  .lp-orb{display:none!important}
  .orb{display:none!important}
  .lp-nav,.nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(5,5,16,.95)!important}
  .lp-mq-track{animation-duration:120s!important}
  .lp-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .lp-steps .lp-step,.lp-stats .lp-stat{opacity:1!important;transform:none!important;animation:none!important}
}
@media(max-width:640px){
  /* Prevent iOS zoom on input focus */
  input,select,textarea{font-size:16px!important}
  h1{font-size:26px;line-height:1.2}
  h2{font-size:18px}
  .btn{padding:10px 16px;font-size:13px}
  .pill{padding:5px 10px;font-size:11px}
  .card{padding:18px 14px;border-radius:16px}
  .nav{padding:8px 12px;gap:8px;border-radius:16px;flex-wrap:wrap;align-items:center}
  .nav .brand{order:1;flex:0 0 auto}
  .nav .wallet-chip{order:2;flex:0 0 auto;margin-left:auto}
  .nav .nav-toggle-btn{display:flex;order:3;flex:0 0 auto}
  .navlinks{display:none;order:4;flex-basis:100%;flex-direction:column;width:100%;gap:4px;padding-top:8px}
  .nav-toggle-input:checked ~ .navlinks{display:flex}
  .navlinks .pill{padding:8px 14px;font-size:13px;width:100%;text-align:center;justify-content:center}
  .wrap{padding:10px 8px 56px}
  .hero-split{gap:14px}
  .auth-shell .card{padding:18px 12px}
  .form-grid{gap:10px}
  .muted{font-size:12px}
  .stat{min-width:auto;padding:10px 12px}
  .stat b{font-size:15px}
  .brand-word{font-size:15px}
  .section-title{flex-direction:column;gap:4px;align-items:flex-start}
  .ob-stepper{gap:2px;flex-wrap:wrap}
  .ob-step{min-width:0;font-size:9px;padding:7px 4px}
}

/* ══════════════════════════════════════════════════════
   PREMIUM ADMIN PANEL — visual upgrade layer
   ══════════════════════════════════════════════════════ */

/* ── Ambient floating orbs (landing-page effect in admin) ── */
.admin-ambience{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.admin-ambience .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.25;will-change:transform}
.admin-ambience .orb-1{width:520px;height:420px;top:-10%;left:-8%;
  background:radial-gradient(circle,rgba(59,91,255,.38),transparent 70%);animation:admOrb1 22s ease-in-out infinite}
.admin-ambience .orb-2{width:440px;height:380px;bottom:4%;right:-6%;
  background:radial-gradient(circle,rgba(94,226,255,.24),transparent 70%);animation:admOrb2 28s ease-in-out infinite}
@keyframes admOrb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,40px) scale(1.1)}}
@keyframes admOrb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,-30px) scale(1.08)}}

/* ── Card entrance animation (staggered) ── */
.adm-card-enter{opacity:0;transform:translateY(20px) scale(.98);animation:admCardIn .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes admCardIn{to{opacity:1;transform:none}}
.adm-card-enter:nth-child(2){animation-delay:.06s}
.adm-card-enter:nth-child(3){animation-delay:.12s}
.adm-card-enter:nth-child(4){animation-delay:.18s}
.adm-card-enter:nth-child(5){animation-delay:.24s}
.adm-card-enter:nth-child(6){animation-delay:.30s}
.adm-card-enter:nth-child(7){animation-delay:.36s}
.adm-card-enter:nth-child(8){animation-delay:.42s}

/* ── Gradient text for KPI values ── */
.k-glow{background:var(--grad-ig);background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-text-ig{background:var(--grad-ig);background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}

/* ── Premium metric cards ── */
.metric-card{background:linear-gradient(160deg,rgba(16,30,48,.97),rgba(8,16,28,.97));
  border:1px solid var(--line2);border-radius:20px;padding:22px 20px;position:relative;overflow:hidden;
  transition:border-color .25s,transform .2s,box-shadow .25s}
.metric-card::before{content:'';position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(135deg,rgba(59,91,255,.05) 0%,transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.metric-card:hover{border-color:rgba(59,91,255,.22);transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(0,0,0,.35),0 0 0 1px rgba(59,91,255,.08)}
.metric-card:hover::before{opacity:1}
.metric-card .mc-label{font-size:11px;font-weight:700;color:var(--muted2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.metric-card .mc-value{font-size:28px;font-weight:900;line-height:1;letter-spacing:-.02em}

/* ── Enrollment / delivery card premium ── */
.enr-card{padding:20px;border-radius:18px;
  background:linear-gradient(160deg,rgba(16,30,48,.7),rgba(8,16,28,.85));
  border:1px solid var(--line2);margin-bottom:12px;position:relative;overflow:hidden;
  transition:border-color .2s,transform .18s,box-shadow .25s;
  content-visibility:auto;contain-intrinsic-size:0 220px}
.enr-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,91,255,.15),transparent);opacity:0;transition:opacity .25s}
.enr-card:hover{border-color:rgba(59,91,255,.18);transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(0,0,0,.3)}
.enr-card:hover::after{opacity:1}

/* ── Proof thumbnail with glow ── */
.proof-thumb{width:110px;height:110px;object-fit:cover;border-radius:14px;border:1px solid var(--line2);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.proof-thumb:hover{transform:scale(1.05);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 20px rgba(59,91,255,.08)}

/* ── Shimmer button effect ── */
.btn-shimmer{position:relative;overflow:hidden}
.btn-shimmer::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(243,217,141,.12),transparent);
  transform:skewX(-18deg);animation:btnShimmer 4s 1.5s ease-in-out infinite}
@keyframes btnShimmer{0%,100%{left:-60%}40%,60%{left:140%}}

/* ── Status pill glow on hover ── */
.badge.open:hover{box-shadow:0 0 12px rgba(110,231,183,.2)}
.badge.submitted:hover{box-shadow:0 0 12px rgba(252,211,77,.2)}
.badge.approved:hover{box-shadow:0 0 12px rgba(110,231,183,.2)}
.badge.credited:hover{box-shadow:0 0 12px rgba(59,91,255,.25)}
.badge.rejected:hover{box-shadow:0 0 12px rgba(248,113,113,.2)}
.badge.flagged:hover{box-shadow:0 0 12px rgba(251,191,36,.2)}

/* ── Table row hover stripe ── */
.stats-table tbody tr{transition:background .15s,transform .12s}
.stats-table tbody tr:hover{background:rgba(59,91,255,.03)!important}

/* ── Filter pill bar animation ── */
#campFilter .pill{transition:all .2s cubic-bezier(.16,1,.3,1)}
#campFilter .pill:hover{transform:translateY(-1px)}
#campFilter .pill.active{box-shadow:0 4px 14px rgba(59,91,255,.18)}

/* ── Section title underline accent ── */
.section-title h2{position:relative;display:inline-block}
.section-title h2::after{content:'';position:absolute;bottom:-4px;left:0;width:40px;height:2px;
  background:linear-gradient(90deg,var(--gold2),transparent);border-radius:2px;opacity:.6}

/* ── Approve/reject action area ── */
.action-strip{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--line2)}

/* ── Notice card with subtle left bar ── */
.notice-bar{position:relative;padding-left:18px;border-radius:12px;padding:12px 14px 12px 20px}
.notice-bar::before{content:'';position:absolute;top:8px;bottom:8px;left:0;width:3px;border-radius:3px}
.notice-bar.notice-ok::before{background:var(--ok)}
.notice-bar.notice-warn::before{background:var(--warn)}
.notice-bar.notice-err::before{background:#f87171}

/* ── Glassmorphism card variant ── */
.card-glass{background:rgba(16,30,48,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r);color:#eef2ff}

/* ── Pulsing live indicator ── */
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px rgba(110,231,183,.5);animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* ── Smooth number counting (CSS-only tabular) ── */
.num-mono{font-variant-numeric:tabular-nums}

/* ── Scrollbar styling ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(59,91,255,.15);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(59,91,255,.3)}

/* ── Reduce motion ── */
@media(prefers-reduced-motion:reduce){
  .admin-ambience,.adm-card-enter,.btn-shimmer::after,.pulse-dot{animation:none!important}
  .adm-card-enter{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════
   v2 utility layer — glass, elevation, icons, media, data viz
   ══════════════════════════════════════════════════════ */

/* Glass surfaces */
.glass{background:var(--glass-1-bg);border:1px solid var(--glass-1-bd);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-radius:var(--r4)}
.glass-strong{background:var(--glass-2-bg);border:1px solid var(--glass-2-bd);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-radius:var(--r4)}
@supports not (backdrop-filter: blur(1px)){
  .glass,.glass-strong{background:#0f1a2c;border-color:var(--line2)}
}

/* Elevation ladder */
.surface-e1{box-shadow:var(--e1)}
.surface-e2{box-shadow:var(--e2)}
.surface-e3{box-shadow:var(--e3)}
.surface-e4{box-shadow:var(--e4)}
.hover-lift{transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--e3)}

/* Icons — Lucide sprite consumer */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:14px;height:14px}
.ico-md{width:18px;height:18px}
.ico-lg{width:22px;height:22px}
.ico-xl{width:28px;height:28px}

/* Staggered card entrance driven by --i (set inline on each card) */
.stagger>*{opacity:0;transform:translateY(14px);animation:admCardIn .45s var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * 40ms)}
@media(prefers-reduced-motion:reduce){
  .stagger>*{animation:none;opacity:1;transform:none}
}

/* Sparkline inline SVG */
.sparkline{display:inline-block;vertical-align:middle;overflow:visible}
.sparkline path.line{fill:none;stroke-width:1.75}
.sparkline path.area{stroke:none;opacity:.22}

/* Donut ring */
.donut{transform:rotate(-90deg);overflow:visible}
.donut circle.track{fill:none;stroke:var(--line2);stroke-width:8}
.donut circle.fill{fill:none;stroke:var(--gold);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease-out)}

/* Progress bar */
.progress{position:relative;height:6px;border-radius:999px;background:var(--line2);overflow:hidden}
.progress>span{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--grad-gold);transition:width .4s var(--ease-out)}
.progress.lime>span{background:var(--grad-lime)}
.progress.success>span{background:var(--grad-success)}
.progress.primary>span,.progress.growth>span{background:var(--grad-ig);background-size:220% 100%;animation:igSweep 6s ease-in-out infinite}

/* Hero strip (large section header with accent-word) */
.hero-strip{position:relative;padding:var(--s7) var(--s5);text-align:center;border-radius:var(--r5);
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(59,91,255,.08),transparent 70%),var(--glass-2-bg);
  border:1px solid var(--glass-2-bd);overflow:hidden}
.hero-strip::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1px 1px at 25% 30%,rgba(255,255,255,.06) 50%,transparent),
    radial-gradient(1px 1px at 75% 70%,rgba(255,255,255,.04) 50%,transparent);opacity:.5}
.hero-strip h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0 0 var(--s3);
  font-size:clamp(28px,3vw + 20px,48px)}
.hero-strip .accent{background:var(--grad-ig);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
.hero-strip .sub{color:var(--muted);font-size:15px;max-width:520px;margin:0 auto var(--s5)}
.hero-strip .pill-row{display:inline-flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;margin-bottom:var(--s4)}

/* Stat pill (inline on hero-strip) — icon + big number + uppercase label */
.stat-pill{display:inline-flex;align-items:center;gap:var(--s3);padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-1-bd)}
.stat-pill .sp-ico{display:inline-flex;width:22px;height:22px;border-radius:7px;background:var(--gold3);color:var(--gold);align-items:center;justify-content:center}
.stat-pill .sp-n{font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--text)}
.stat-pill .sp-l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}

/* Media card — Apify autoplay muted video primitive */
.media-card{position:relative;border-radius:var(--r3);overflow:hidden;background:#000;isolation:isolate}
.media-card video,.media-card img{display:block;width:100%;height:100%;object-fit:cover}
/* poster fades out smoothly once video loads */
.media-card img.mc-poster{transition:opacity .3s ease;pointer-events:none}
.media-card .mc-overlay{position:absolute;inset:auto 0 0 0;padding:var(--s4) var(--s3) var(--s3);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));color:#fff;pointer-events:none}
.media-card .mc-overlay .mc-t{font-weight:700;font-size:14px;line-height:1.2}
.media-card .mc-overlay .mc-m{font-size:12px;color:rgba(255,255,255,.8);margin-top:2px}
.media-card .mc-mute,.media-card .mc-ext{position:absolute;width:28px;height:28px;border-radius:8px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;z-index:2;filter:drop-shadow(0 1px 3px #000)}
.media-card .mc-mute{top:8px;left:8px}
.media-card .mc-ext{top:8px;right:8px;text-decoration:none}
.media-card .mc-fallback{aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:900;color:#fff}

/* Pill tones */
.pill-lime{background:rgba(181,232,83,.15);border-color:rgba(181,232,83,.35);color:#d9ff8a}
.pill-sky{background:rgba(125,211,252,.15);border-color:rgba(125,211,252,.35);color:#bae6fd}
.pill-violet{background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.35);color:#ddd6fe}
.pill-rose{background:rgba(251,113,133,.15);border-color:rgba(251,113,133,.35);color:#fecdd3}
.pill-emerald{background:rgba(110,231,183,.15);border-color:rgba(110,231,183,.35);color:#a7f3d0}
.pill-amber{background:rgba(251,191,36,.15);border-color:rgba(251,191,36,.35);color:#fde68a}
.pill-gold-outline{background:transparent;border-color:rgba(59,91,255,.45);color:var(--gold2)}

/* Breadcrumb */
.breadcrumb{display:flex;gap:var(--s2);align-items:center;font-size:13px;color:var(--muted2);margin-bottom:var(--s4)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb .sep{opacity:.4}

/* Tab bar (icon + label) */
.tabs{display:flex;gap:var(--s2);padding:var(--s1);border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line2);margin-bottom:var(--s5)}
.tabs a{display:inline-flex;align-items:center;gap:var(--s2);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.tabs a:hover{color:var(--text)}
.tabs a.active{background:rgba(59,91,255,.14);color:var(--gold2)}

/* Podium (leaderboard) */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:var(--s4);align-items:end;margin:var(--s5) 0 var(--s6)}
.podium-card{padding:var(--s5);border-radius:var(--r4);text-align:center;
  background:linear-gradient(160deg,rgba(16,30,48,.8),rgba(8,16,28,.9));border:1px solid var(--line2)}
.podium-card.rank-1{border-color:rgba(181,232,83,.45);box-shadow:0 0 40px rgba(181,232,83,.18),var(--e3);transform:translateY(-10px)}
.podium-card.rank-2{border-color:rgba(125,211,252,.35)}
.podium-card.rank-3{border-color:rgba(238,242,255,.1)}
.podium-hex{display:inline-flex;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;font-weight:900;color:#fff;margin-top:var(--s3)}
.podium-card.rank-1 .podium-hex{background:var(--grad-lime);color:#0a1a00;box-shadow:0 4px 14px rgba(181,232,83,.35)}
.podium-card.rank-2 .podium-hex{background:var(--grad-sky)}
.podium-card.rank-3 .podium-hex{background:linear-gradient(135deg,#94a3b8,#475569)}

/* Rankings table */
.rank-table{width:100%;border-collapse:separate;border-spacing:0 4px}
.rank-table thead th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);text-align:left;padding:10px 14px}
.rank-table tbody td{padding:14px;background:rgba(255,255,255,.02);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.rank-table tbody td:first-child{border-left:1px solid var(--line2);border-radius:10px 0 0 10px}
.rank-table tbody td:last-child{border-right:1px solid var(--line2);border-radius:0 10px 10px 0}
.rank-table tbody tr:hover td{background:rgba(59,91,255,.04)}
.rank-table .rank-primary{color:var(--gold2);font-family:var(--font-mono);font-weight:600}

/* ══════════════════════════════════════════════════════
   v3 premium+perf layer (2026-04-23 study)
   - oklch palette upgrade (progressive)
   - aurora v2 (third orb, drift)
   - gradient-border cards, cursor-follow glow, noise overlay
   - @starting-style entries, content-visibility for long lists
   ══════════════════════════════════════════════════════ */

/* oklch palette — only applied on browsers that support it; sRGB fallback keeps rest intact */
@supports (color: oklch(50% 0.2 250)){
  :root{
    --gold:oklch(86% .13 218);--gold2:oklch(80% .07 274);
    --accent-lime:oklch(86% .13 218);--accent-lime-fg:oklch(20% .04 220);
    --accent-sky:oklch(86% .13 218);--accent-violet:oklch(58% .20 277);
    --accent-rose:oklch(54% .25 268);--accent-emerald:oklch(82% .13 158);
    --accent-amber:oklch(72% .08 80);
  }
  /* Light-mode accents remapped in oklch: L46 for decorative (4.5:1 on off-white), L38 for text (7:1) */
  [data-theme="light"]{
    --gold:oklch(46% .22 264);--gold2:oklch(38% .20 264);
  }
}

/* Aurora v2 — third drifting orb + softer drift on existing */
.admin-ambience .orb-3{width:380px;height:380px;top:36%;left:40%;
  background:radial-gradient(circle,rgba(99,102,241,.22),transparent 70%);
  animation:admOrb3 32s ease-in-out infinite;border-radius:50%;filter:blur(110px);opacity:.32;
  mix-blend-mode:screen;position:absolute;will-change:transform}
@keyframes admOrb3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(35px,-45px) scale(1.12)}}

/* Noise/grain overlay — 4% opacity SVG turbulence, mix-blend overlay */
.noise-layer{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* Gradient-border card — conic border via padding-box/border-box trick */
.gb-card{position:relative;border:1px solid transparent;border-radius:var(--r4);
  background:linear-gradient(160deg,rgba(16,30,48,.94),rgba(8,16,28,.96)) padding-box,
             conic-gradient(from 140deg at 50% 50%,rgba(59,91,255,.38),rgba(110,231,183,.22),rgba(125,211,252,.22),rgba(59,91,255,.38)) border-box}

/* Cursor-follow glow — sets --mx/--my via tiny pointer listener in shell.
   Scoped to .glow-card so it doesn't clobber existing ::before/::after on card classes.
   The shell JS also auto-tags .metric-card/.campaign-card/.enr-card/.hero-strip with
   a background-image-driven glow using the same vars (see radial-gradient below). */
.glow-card{position:relative;overflow:hidden}
.glow-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(59,91,255,.14),transparent 45%);
  transition:opacity .25s var(--ease-out);border-radius:inherit;z-index:0}
.glow-card:hover::before{opacity:1}
.glow-card>*{position:relative;z-index:1}


/* Live pulse — emerald (connected/live) */
.pulse-dot-live{width:8px;height:8px;border-radius:50%;background:var(--accent-emerald);
  box-shadow:0 0 0 0 rgba(110,231,183,.7);animation:pulseLive 1.8s ease-out infinite;display:inline-block}
@keyframes pulseLive{0%{box-shadow:0 0 0 0 rgba(110,231,183,.55)}70%{box-shadow:0 0 0 10px rgba(110,231,183,0)}100%{box-shadow:0 0 0 0 rgba(110,231,183,0)}}

/* @starting-style entry animations for popover/dialog/modal */
dialog[open],.modal-open,[popover]:popover-open{transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
@starting-style{
  dialog[open],.modal-open,[popover]:popover-open{opacity:0;transform:translateY(8px) scale(.98)}
}

/* content-visibility — skip rendering off-screen cards on long lists */
.cv-auto .enr-card,.cv-auto .campaign-card,.cv-auto .metric-card{content-visibility:auto;contain-intrinsic-size:auto 260px}

/* Hero-strip gets gradient-border + cursor glow automatically */
.hero-strip{position:relative;overflow:hidden}
.hero-strip::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(59,91,255,.18),transparent 40%);
  transition:opacity .3s var(--ease-out)}
.hero-strip:hover::after{opacity:1}

/* Tabular nums everywhere numbers live */
.k-glow,.mc-value,.metric .k,.num-mono,.sp-n,.rank-primary,.cd-val{font-variant-numeric:tabular-nums}

/* text-wrap polish */
h1,h2,h3,.cc-title,.section-title h2{text-wrap:balance}
p,.cc-brief,.lede,.sub,.mini{text-wrap:pretty}

/* ── IG-native v3 (2026-04-24) — story rings, hot tone, gradient borders ── */
/* Story-ring avatar wrapper: 2px conic gradient border with 2px inner gap. */
.avatar-ring{position:relative;display:inline-block;padding:3px;border-radius:50%;
  background:var(--grad-ig-story);isolation:isolate}
.avatar-ring::before{content:'';position:absolute;inset:1px;border-radius:50%;background:var(--bg);z-index:0}
.avatar-ring>*{position:relative;z-index:1;display:block;border-radius:50%}
@media (prefers-reduced-motion:reduce){.avatar-ring{background:var(--grad-gold)}}

/* Animated sweeping gradient used on hero/CTAs. Paused in reduced-motion. */
@keyframes igSweep{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.k-glow,.grad-text-ig,.hero-strip .accent{animation:igSweep 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.k-glow,.grad-text-ig,.hero-strip .accent{animation:none}}

/* Hot pill — for "trending/featured" callouts. White text, solid gradient, bold. */
.pill-hot,.badge.hot{background:var(--grad-ig);background-size:220% 220%;color:#fff;font-weight:700;
  border:1px solid rgba(255,255,255,.18);text-shadow:0 1px 0 rgba(0,0,0,.22);
  padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
  animation:igSweep 7s ease-in-out infinite;box-shadow:0 4px 14px rgba(59,91,255,.28)}
@media (prefers-reduced-motion:reduce){.pill-hot,.badge.hot{animation:none}}

/* Trending pulse dot — magenta ring pulse, distinct from emerald "live" dot. */
.pulse-dot-hot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--primary);position:relative}
.pulse-dot-hot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(59,91,255,.6);
  animation:pulseHot 1.8s ease-out infinite}
@keyframes pulseHot{0%{transform:scale(.7);opacity:1}100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.pulse-dot-hot::after{animation:none;opacity:0}}

/* Gradient-border IG card — for "featured" campaigns + trending deliveries. */
.gb-ig{position:relative;border:2px solid transparent;border-radius:var(--r3);
  background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad-ig) border-box;
  background-size:100% 100%,220% 220%;
  transition:transform .2s var(--ease-out),box-shadow .3s var(--ease-out);
  animation:igSweep 12s ease-in-out infinite}
.gb-ig:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(59,91,255,.22),0 0 0 1px rgba(59,91,255,.18)}
@media (prefers-reduced-motion:reduce){.gb-ig{animation:none;transition:none}.gb-ig:hover{transform:none}}

/* Primary button tokenized — was referencing gold; now IG-native. */
.btn.primary,.btn-primary{background:var(--grad-ig);background-size:220% 220%;background-position:0% 50%;
  color:#fff;font-weight:800;border:1px solid rgba(255,255,255,.12);text-shadow:0 1px 0 rgba(0,0,0,.22);
  transition:background-position .8s var(--ease-out),filter .2s,box-shadow .2s,transform .15s}
.btn.primary:hover,.btn-primary:hover{background-position:100% 50%;filter:brightness(1.06);
  box-shadow:0 8px 24px rgba(59,91,255,.32);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn.primary,.btn-primary{transition:none}
  .btn.primary:hover,.btn-primary:hover{transform:none;background-position:0% 50%}}

/* Reduced-data: strip all ambience + noise for mobile data-saver. */
@media (prefers-reduced-data:reduce){
  .admin-ambience,.noise-layer{display:none!important}
  .pill-cta,.btn.primary,.btn-primary,.pill-hot,.badge.hot{animation:none;background:var(--primary);background-size:100% 100%}
  .k-glow,.grad-text-ig,.hero-strip .accent{animation:none;background:var(--primary);-webkit-background-clip:text}
}

/* Reduce motion honors new pieces too */
@media(prefers-reduced-motion:reduce){
  .admin-ambience .orb-3,.pulse-dot-live{animation:none!important}
  .glow-card::before{display:none}
}

/* ══════════════════════════════════════════════════════
   Mobile manager polish (2026-04-26)
   Goal: smooth Campaign Manager flow on phones.
   - Wide tables scroll horizontally inside their card
   - Podium / rank-table collapse on narrow widths
   - Tabs scroll instead of wrap
   - 44px minimum tap targets on nav + actions
   - Form action rows stack cleanly
   - Wallet chip never crowds the brand
   ══════════════════════════════════════════════════════ */
@media(max-width:720px){
  .stats-table,.rank-table{display:block;width:100%;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;white-space:nowrap}
  .stats-table thead,.stats-table tbody,.stats-table tr,
  .rank-table thead,.rank-table tbody,.rank-table tr{display:revert}
  .stats-table th,.stats-table td{padding:9px 12px;font-size:12px}
  .rank-table thead th,.rank-table tbody td{padding:10px 12px;font-size:12px}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
}

@media(max-width:640px){
  .podium{grid-template-columns:1fr;gap:10px;margin:var(--s4) 0 var(--s5)}
  .podium-card{padding:var(--s4)}
  .podium-card.rank-1{transform:none;box-shadow:var(--e2)}

  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-bottom:var(--s4);padding:3px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex-shrink:0;white-space:nowrap;padding:9px 14px;font-size:12px}

  .navlinks .pill{padding:12px 16px;font-size:14px;min-height:44px;width:100%;
    justify-content:flex-start;text-align:left;letter-spacing:0}
  .navlinks form{width:100%}
  .navlinks form .pill{width:100%;justify-content:flex-start}
  .nav-toggle-btn{padding:12px;min-width:44px;min-height:44px}
  .nav-toggle-btn span{width:22px}

  .actions{gap:8px}
  .actions .btn{flex:1 1 calc(50% - 4px);min-width:0;padding:11px 14px;font-size:13px}
  .action-strip{flex-direction:column;align-items:stretch;gap:10px;padding-top:14px}
  .action-strip>*,.action-strip form{width:100%}
  .action-strip form .btn{width:100%}

  .enr-card{padding:14px}
  .delivery-card{padding:14px;border-radius:18px}
  .lb-row{padding:10px 12px;gap:10px}
}

@media(max-width:480px){
  .proof-thumb{width:84px;height:84px;border-radius:12px}
  .nav .wallet-chip{font-size:12px;padding:6px 10px}
  .brand-word{font-size:14px}
  .metric{padding:14px 16px;border-radius:16px}
  .metric .k{font-size:24px}
  .metric-card .mc-value{font-size:22px}
}

@media(max-width:360px){
  .nav{gap:6px}
  .nav .wallet-chip{order:4;flex-basis:100%;justify-content:center;margin-left:0}
  .nav .nav-toggle-btn{margin-left:auto}
  .navlinks{order:5}
}

/* ══════════════════════════════════════════════════════
   Theme toggle (2026-04-27) - light/dark with persistence
   ══════════════════════════════════════════════════════ */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(255,255,255,.04);
  color:var(--muted);cursor:pointer;flex-shrink:0;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.theme-toggle:hover{background:rgba(255,255,255,.10);color:var(--text);border-color:rgba(59,91,255,.32);transform:rotate(12deg)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* Light theme - bright luminous gaming-style palette */
[data-theme="light"]{
  --bg:#f7faff;--bg2:#e8eefb;--panel:#ffffff;--panel2:#eef3ff;
  --line:rgba(59,91,255,.22);--line2:rgba(20,12,40,.10);
  --text:#160a2a;--muted:rgba(22,10,42,.74);--muted2:rgba(22,10,42,.52);
  --shadow:0 30px 80px rgba(59,91,255,.18);
  --shadow-sm:0 10px 28px rgba(59,91,255,.12);
  --glass-1-bg:rgba(255,255,255,.62);--glass-1-bd:rgba(20,12,40,.10);
  --glass-2-bg:rgba(255,255,255,.78);--glass-2-bd:rgba(20,12,40,.14);
  --warn:#b45309;--ok:#059669;--danger:#be123c;--err:#be123c;
  --ok2:rgba(5,150,105,.10);
  /* Accent tokens remapped for WCAG AA on cool off-white: #1d4ed8=4.5:1 decorative, #1e40af=7:1 text */
  --gold:#1d4ed8;--gold2:#1e40af;--gold3:rgba(29,78,216,.12);
  color-scheme:light;
}
[data-theme="light"] html,
[data-theme="light"] body{
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%,rgba(166,192,255,.55),transparent),
    radial-gradient(ellipse 60% 30% at 88% 18%,rgba(59,91,255,.20),transparent),
    radial-gradient(ellipse 70% 35% at 12% 65%,rgba(99,102,241,.18),transparent),
    radial-gradient(ellipse 90% 50% at 50% 100%,rgba(94,226,255,.18),transparent),
    linear-gradient(180deg,#eef2f9 0%,#e4eaf5 100%) !important;
  color:#0a1628;
}
/* Clipping Culture blueprint grid overlay - cobalt 64px lattice with top/bottom mask */
[data-theme="light"] body{position:relative}
[data-theme="light"] body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(0,85,254,1) 1px,transparent 0),
    linear-gradient(90deg,rgba(0,85,254,1) 1px,transparent 0);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  opacity:.045;
}
[data-theme="light"] body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(0,85,254,.18) 0%,transparent 55%),
    radial-gradient(circle at 92% 100%,rgba(0,85,254,.10) 0%,transparent 60%);
}
[data-theme="light"] body > *{position:relative;z-index:1}
/* Primary CTA cobalt glow - matches CC "Book a call" drop shadow */
[data-theme="light"] .pill-cta,
[data-theme="light"] .btn.primary,
[data-theme="light"] .btn-primary,
[data-theme="light"] button[type="submit"].primary,
[data-theme="light"] .cta-primary{
  box-shadow:0 6px 20px -4px rgba(0,85,254,.55),0 1px 0 rgba(255,255,255,.25) inset;
}
[data-theme="light"] .pill-cta:hover,
[data-theme="light"] .btn.primary:hover,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .cta-primary:hover{
  box-shadow:0 10px 28px -4px rgba(0,85,254,.65),0 1px 0 rgba(255,255,255,.30) inset;
}
/* Nav always stays dark — brand logo keeps editorial cobalt accent on its dark background */
[data-theme="light"] .nav{background:rgba(5,5,16,.88)!important;border-color:rgba(59,91,255,.08)!important}
[data-theme="light"] .nav .pill{background:rgba(255,255,255,.09);color:rgba(255,255,255,.80);border-color:rgba(255,255,255,.11)}
[data-theme="light"] .nav .pill:hover{background:rgba(255,255,255,.16);color:#fff}
[data-theme="light"] .nav .pill.active{background:rgba(59,91,255,.18);color:#A6C0FF;border-color:rgba(59,91,255,.32)}
[data-theme="light"] .nav .pill-ghost{color:rgba(255,255,255,.62)}
[data-theme="light"] .nav .pill-ghost:hover{background:rgba(255,255,255,.10);color:#fff}
[data-theme="light"] .nav .nav-toggle-btn span{background:rgba(255,255,255,.70)}
[data-theme="light"] .pill{background:rgba(255,255,255,.65);color:#3a1f5c;border-color:rgba(20,12,40,.12)}
[data-theme="light"] .pill:hover{background:#fff;color:#160a2a}
[data-theme="light"] .pill.active{background:rgba(59,91,255,.14);color:#1e40af;border-color:rgba(59,91,255,.32)}
[data-theme="light"] .pill-ghost{background:transparent;color:rgba(22,10,42,.62)}
[data-theme="light"] .pill-ghost:hover{background:rgba(255,255,255,.55);color:#160a2a}
[data-theme="light"] .pill-cta{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.18)}
[data-theme="light"] .card{background:linear-gradient(160deg,#ffffff 0%,#eef3ff 100%);border-color:rgba(20,12,40,.10);box-shadow:0 10px 40px rgba(59,91,255,.10)}
[data-theme="light"] .card-gold{border-color:rgba(59,91,255,.28);background:linear-gradient(160deg,#eef3ff 0%,#ffffff 60%)}
[data-theme="light"] .campaign-card{background:linear-gradient(160deg,#ffffff,#eef3ff);border-color:rgba(20,12,40,.10);box-shadow:0 8px 28px rgba(59,91,255,.08)}
[data-theme="light"] .campaign-card:hover{border-color:rgba(59,91,255,.36);box-shadow:0 16px 48px rgba(59,91,255,.18)}
[data-theme="light"] .row{background:rgba(255,255,255,.65);border-color:rgba(20,12,40,.10)}
[data-theme="light"] .row:hover{border-color:rgba(59,91,255,.28)}
[data-theme="light"] .metric{background:rgba(255,255,255,.78);border-color:rgba(20,12,40,.10)}
/* Premium metric cards: adopt the cream/white gradient in light theme so the
   inner mc-label / mc-value / mini text (which uses --muted2 / --text) stays
   readable. Without this override the card keeps its dark-blue gradient and
   the labels render dark-on-dark. */
[data-theme="light"] .metric-card{
  background:linear-gradient(160deg,#ffffff 0%,#eef3ff 100%)!important;
  border-color:rgba(20,12,40,.10);
  box-shadow:0 8px 28px rgba(59,91,255,.08);
}
[data-theme="light"] .metric-card::before{
  background:linear-gradient(135deg,rgba(59,91,255,.06) 0%,transparent 60%);
}
[data-theme="light"] .metric-card:hover{
  border-color:rgba(59,91,255,.28);
  box-shadow:0 12px 36px rgba(59,91,255,.18),0 0 0 1px rgba(59,91,255,.10);
}
[data-theme="light"] .metric-card .mc-label{color:rgba(22,10,42,.62)}
[data-theme="light"] .metric-card .mc-value{color:#160a2a}
[data-theme="light"] .metric-card .mini{color:rgba(22,10,42,.62)!important}
/* Enrollment / delivery cards on light theme: the renderer uses an inline
   dark gradient via .enr-card so the per-row stripe still pops; here we
   normalize the background, border, and inner muted text. */
[data-theme="light"] .enr-card{
  background:linear-gradient(160deg,#ffffff 0%,#eef3ff 100%);
  border-color:rgba(20,12,40,.10);
}
[data-theme="light"] .enr-card:hover{
  border-color:rgba(59,91,255,.28);
  box-shadow:0 10px 30px rgba(59,91,255,.12);
}
[data-theme="light"] .badge.draft,[data-theme="light"] .badge.closed{background:rgba(20,12,40,.04);color:rgba(22,10,42,.58)}
[data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select{background:rgba(255,255,255,.92);color:#160a2a;border-color:rgba(20,12,40,.16)}
[data-theme="light"] input:focus,[data-theme="light"] textarea:focus,[data-theme="light"] select:focus{background:#fff;border-color:rgba(59,91,255,.50)}
[data-theme="light"] select option{background:#fff;color:#160a2a}
[data-theme="light"] label{color:#1e40af}
[data-theme="light"] .notice{background:rgba(190,18,60,.06);border-color:rgba(190,18,60,.18);color:#7a0e2c}
[data-theme="light"] .notice.success{background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.20);color:#055e3d}
/* Brand logo always golden (nav is always dark) */
[data-theme="light"] .brand-stra{color:rgba(166,192,255,.48)!important}
[data-theme="light"] .brand-clipper{color:#A6C0FF!important}
[data-theme="light"] .admin-ambience .orb,[data-theme="light"] .noise-layer{opacity:.22;mix-blend-mode:multiply}
[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.72);border-color:rgba(20,12,40,.14);color:#3a1f5c}
[data-theme="light"] .theme-toggle:hover{background:#fff;color:#1e40af}
/* Wallet chip - amber tint on light bg */
[data-theme="light"] #wallet-chip{background:linear-gradient(135deg,rgba(29,78,216,.14),rgba(30,64,175,.08))!important;border-color:rgba(30,64,175,.30)!important}
/* Secondary button: dark-theme uses 5% white which is invisible on light bg.
   Override with a soft white pane + dark navy text so the CTA stays legible. */
[data-theme="light"] .btn.secondary{background:rgba(255,255,255,.78);border-color:rgba(20,12,40,.14);color:#0a1628}
[data-theme="light"] .btn.secondary:hover{background:#fff;border-color:rgba(30,64,175,.30);color:#0a1628}
/* Landing hero text: pin explicit colors so the headline + subtext stay
   readable in light mode even if the gradient/theme tokens shift. */
[data-theme="light"] .lp-hero h1{color:#0a1628}
[data-theme="light"] .lp-hero .lede{color:rgba(10,22,40,.72)}

/* Footer - shared on every page */
.site-footer{
  margin-top:64px;padding:40px 24px 28px;border-top:1px solid var(--line2);
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  font-size:13px;color:var(--muted2);
}
.site-footer .ft-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.site-footer .ft-links a{color:var(--muted);transition:color .15s}
.site-footer .ft-links a:hover{color:var(--text)}
.site-footer .ft-mark{display:flex;align-items:center;gap:10px;font-weight:700}
.site-footer .ft-meta{font-size:12px;color:var(--muted2);line-height:1.5;max-width:560px}
@media(max-width:640px){.site-footer{grid-template-columns:1fr;text-align:center}.site-footer .ft-links{justify-content:center}}

/* Legal pages (terms / privacy / disclaimer) */
.legal-page{max-width:780px;margin:0 auto}
.legal-page h1{font-size:clamp(28px,4vw,44px);margin:0 0 12px}
.legal-page .legal-meta{font-size:13px;color:var(--muted2);margin-bottom:32px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.legal-page h2{font-size:20px;margin:32px 0 12px;font-weight:800;letter-spacing:-.01em}
.legal-page h3{font-size:15px;margin:20px 0 8px;font-weight:700;color:var(--gold2)}
.legal-page p,.legal-page li{font-size:15px;line-height:1.7;color:var(--text);margin:10px 0}
.legal-page ul,.legal-page ol{padding-left:24px;margin:12px 0}
.legal-page strong{color:var(--gold2);font-weight:700}
.legal-page .legal-callout{padding:16px 20px;border-radius:14px;background:rgba(59,91,255,.08);border:1px solid rgba(59,91,255,.20);margin:20px 0}
[data-theme="light"] .legal-page strong{color:#1e40af}
[data-theme="light"] .legal-page h3{color:#1e40af}
[data-theme="light"] .legal-page .legal-callout{background:rgba(59,91,255,.06);border-color:rgba(59,91,255,.24)}

/* =====================================================================
 * Clipping Culture parity pack v2 - 2026-05-06
 * Adds: hover-lift + inner top-glow on cards, tracking-tight headings,
 * polished button micro-interactions, focus rings, page-load stagger,
 * scroll-reveal (Chrome 115+ animation-timeline), section tag word,
 * marquee utility, gradient text utility.
 * Reduced motion fully respected. Light + dark theme aware.
 * ===================================================================== */

/* Hover-lift across all interactive cards */
.card,.campaign-card,.metric,.metric-card,.row,.podium-card,.glow-card,.enr-card{
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s ease}
.card:hover,.campaign-card:hover,.metric:hover,.metric-card:hover,.row:hover,.podium-card:hover,.enr-card:hover{
  transform:translateY(-3px)}

/* Inner top-glow on metric tiles - CC cinematic "lit-from-above" effect */
[data-theme="light"] .metric-card,[data-theme="light"] .metric{
  box-shadow:0 8px 28px rgba(59,91,255,.08),0 -16px 80px -32px rgba(0,85,254,.18) inset!important}
[data-theme="light"] .metric-card:hover,[data-theme="light"] .metric:hover{
  box-shadow:0 14px 36px rgba(59,91,255,.16),0 -20px 96px -32px rgba(0,85,254,.30) inset,0 0 0 1px rgba(0,85,254,.18)!important}

/* Headings: tracking-tight + premium weight (CC parity) */
h1,h2,h3{letter-spacing:-.02em}
h1{font-weight:800}
h2{font-weight:800}
h3{font-weight:700}

/* Button micro-interactions - lift + arrow shift on hover */
.btn:active{transform:translateY(0);transition-duration:.06s}
.pill-cta:active{transform:translateY(0);transition-duration:.06s}
.btn:focus-visible,.pill:focus-visible,.pill-cta:focus-visible{
  outline:2px solid rgba(0,85,254,.55);outline-offset:3px}

/* Inputs - cobalt focus ring */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
[data-theme="light"] input:focus,[data-theme="light"] textarea:focus,[data-theme="light"] select:focus{
  box-shadow:0 0 0 4px rgba(0,85,254,.12),0 0 0 1px rgba(0,85,254,.50) inset}
input:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 4px rgba(94,226,255,.10),0 0 0 1px rgba(94,226,255,.45) inset}

/* Section tag word - tiny uppercase cobalt caption above section titles */
.section-tag{display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#5EE2FF;margin-bottom:10px}
.section-tag::before{content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;box-shadow:0 0 12px currentColor}
[data-theme="light"] .section-tag{color:#0055fe}

/* Gradient text utility - applies CC cobalt-to-light-blue sweep on word */
.grad-text{background:linear-gradient(135deg,#3B5BFF 0%,#5EE2FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
[data-theme="light"] .grad-text{background:linear-gradient(135deg,#0055fe 0%,#3B5BFF 100%);
  -webkit-background-clip:text;background-clip:text}

/* Page-load stagger entrance for metric rows */
@keyframes cc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cc-rise>*{animation:cc-rise .55s var(--ease-out) both}
.cc-rise>*:nth-child(1){animation-delay:.05s}
.cc-rise>*:nth-child(2){animation-delay:.12s}
.cc-rise>*:nth-child(3){animation-delay:.19s}
.cc-rise>*:nth-child(4){animation-delay:.26s}
.cc-rise>*:nth-child(5){animation-delay:.33s}
.cc-rise>*:nth-child(6){animation-delay:.40s}
.cc-rise>*:nth-child(7){animation-delay:.47s}
.cc-rise>*:nth-child(8){animation-delay:.54s}

/* Scroll-reveal - native CSS view timeline (Chrome 115+, graceful fallback elsewhere) */
@supports (animation-timeline:view()){
  .cc-reveal{animation:cc-rise .8s var(--ease-out) both;
    animation-timeline:view();animation-range:entry 0% cover 18%}
}

/* Marquee - infinite horizontal scroll, masked edges (CC partner-logos pattern) */
.cc-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cc-marquee-track{display:flex;gap:40px;width:max-content;
  animation:cc-marquee 40s linear infinite}
.cc-marquee:hover .cc-marquee-track{animation-play-state:paused}
@keyframes cc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Reduced-motion guards - kill all animations + transforms */
@media(prefers-reduced-motion:reduce){
  .card,.campaign-card,.metric,.metric-card,.row,.podium-card,.enr-card,.btn{transition:none}
  .card:hover,.campaign-card:hover,.metric:hover,.metric-card:hover,.row:hover,.enr-card:hover{transform:none}
  .cc-rise>*{animation:none;opacity:1;transform:none}
  .cc-reveal{animation:none}
  .cc-marquee-track{animation:none}
}

/* ════════════════════════════════════════════════════════════════════
   v3 signature artifacts (2026-05-08): progress ring, state icons,
   waveform, gyro-tilt extension. Used by _c_progress_ring, _c_state_icon,
   _c_waveform helpers in partners_web.py.
   ════════════════════════════════════════════════════════════════════ */

/* Progress ring with milestone pulses */
.crpr-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.crpr-svg{overflow:visible;display:block}
.crpr-track{fill:none;stroke:var(--line2)}
.crpr-fill{fill:none;stroke:var(--gold);stroke-linecap:round;
  transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.crpr-ms{fill:var(--bg2);stroke:var(--line2);stroke-width:1.5}
.crpr-ms-on{fill:var(--gold);stroke:var(--gold);
  filter:drop-shadow(0 0 5px var(--gold))}
.crpr-label{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted2);text-align:center}
[data-theme="light"] .crpr-track{stroke:rgba(10,22,40,.10)}
[data-theme="light"] .crpr-ms{fill:#fff;stroke:rgba(10,22,40,.18)}
[data-theme="light"] .crpr-ms-on{fill:var(--gold2);stroke:var(--gold2);
  filter:drop-shadow(0 0 4px var(--gold2))}
@media(prefers-reduced-motion:reduce){
  .crpr-fill{transition:none}
  .crpr-svg animate{display:none}
  .crpr-ms-on{filter:none}
}

/* State icon - mounts with a soft pop */
.cs-icon{display:inline-block;flex-shrink:0;vertical-align:-3px}
@keyframes cs-icon-pop{
  0%{opacity:0;transform:scale(.5)}
  60%{opacity:1;transform:scale(1.10)}
  100%{opacity:1;transform:scale(1)}
}
.cs-icon-pop{animation:cs-icon-pop .42s cubic-bezier(.16,1,.3,1) both;
  transform-origin:center;transform-box:fill-box}
@media(prefers-reduced-motion:reduce){
  .cs-icon-pop{animation:none}
}

/* Waveform - 5 bars used during proof-submission verifying state */
.cs-wave{display:inline-flex;align-items:flex-end;gap:3px;
  vertical-align:middle;color:var(--cw-c,var(--gold));height:var(--cw-h,28px)}
.cs-wave i{display:inline-block;width:3px;height:30%;
  background:currentColor;border-radius:2px;
  animation:cs-wave-bar 1.05s ease-in-out infinite;
  animation-delay:calc(var(--cw-i,0) * .12s)}
.cs-wave-lbl{display:inline-block;margin-left:8px;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted2);align-self:center}
@keyframes cs-wave-bar{
  0%,100%{height:25%;transform:translateY(0)}
  50%{height:100%;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .cs-wave i{animation:none;height:55%}
}

/* Gyro-tilt subtle ambient sway (paired with the inline pointer-tilt JS in
   _render_shell). Applied automatically on mobile when DeviceOrientation
   permission is granted. The CSS only sets the transform target; JS feeds
   the live values. */
.gyro-sway{transform:perspective(800px) rotateX(var(--gyro-x,0deg)) rotateY(var(--gyro-y,0deg));
  transition:transform .25s ease-out;will-change:transform}
@media(prefers-reduced-motion:reduce){
  .gyro-sway{transform:none}
}

/* ════════════════════════════════════════════════════════════════════
   Light theme premium polish (2026-05-08 v3): cinematic 4-stop
   ambient bg, inner-top-highlight on panels, iridescent active state,
   refined CTA gradient with cobalt-to-cyan sweep + inner reflection,
   premium shadow stack with cobalt tint. Dark theme untouched.
   ════════════════════════════════════════════════════════════════════ */

/* Cinematic body background - 4 ambient pools (cobalt + warm peach + cyan + soft cobalt-light) */
[data-theme="light"] body{
  background:
    radial-gradient(ellipse 60% 28% at 22% -8%, rgba(0,85,254,.16), transparent 60%),
    radial-gradient(ellipse 50% 25% at 88% 8%, rgba(255,200,150,.14), transparent 65%),
    radial-gradient(ellipse 65% 30% at 8% 88%, rgba(94,226,255,.16), transparent 65%),
    radial-gradient(ellipse 55% 28% at 92% 96%, rgba(166,192,255,.14), transparent 65%),
    linear-gradient(180deg, #f3f6fc 0%, #e6ecf6 100%) !important;
}

/* Panel surface: white with inner-top-glow (light from above) + cobalt-tinted depth shadow */
[data-theme="light"] .card,
[data-theme="light"] .metric,
[data-theme="light"] .metric-card,
[data-theme="light"] .panel,
[data-theme="light"] .stat,
[data-theme="light"] .enr-card,
[data-theme="light"] .campaign-card,
[data-theme="light"] .lp-stat,
[data-theme="light"] .sub-card,
[data-theme="light"] .lp-trust-stat,
[data-theme="light"] .delivery-card,
[data-theme="light"] .credits-card,
[data-theme="light"] .sp-card,
[data-theme="light"] .pd-card{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,1) 0%, rgba(252,254,255,.94) 70%),
    linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%) !important;
  border-color: rgba(20,12,40,.07) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -22px 44px -22px rgba(0,85,254,.14) inset,
    0 12px 28px -16px rgba(10,22,40,.10),
    0 4px 12px -4px rgba(10,22,40,.05) !important;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .metric:hover,
[data-theme="light"] .metric-card:hover,
[data-theme="light"] .panel:hover,
[data-theme="light"] .stat:hover,
[data-theme="light"] .enr-card:hover,
[data-theme="light"] .campaign-card:hover,
[data-theme="light"] .lp-stat:hover,
[data-theme="light"] .sub-card:hover,
[data-theme="light"] .lp-trust-stat:hover,
[data-theme="light"] .sp-card:hover{
  border-color: rgba(0,85,254,.22) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -28px 56px -22px rgba(0,85,254,.22) inset,
    0 22px 44px -16px rgba(0,85,254,.18),
    0 0 0 1px rgba(0,85,254,.10) !important;
}

/* Pills: pearl bg + cobalt active state.
   IMPORTANT: nav stays dark in light theme, so nav-scoped pills need their own
   light-on-dark rules below. The :not(.nav *):not(.lp-nav *) exclusion keeps
   body-context pills (filters, tabs, in-card pills) on the pearl style. */
[data-theme="light"] .pill:not(.nav *):not(.lp-nav *){
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(248,250,254,.92)) !important;
  border-color: rgba(20,12,40,.10) !important;
  color: rgba(10,22,40,.78);
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 1px 2px rgba(10,22,40,.04);
}
[data-theme="light"] .pill:not(.nav *):not(.lp-nav *):hover{
  background: linear-gradient(180deg, #ffffff, #f3f6fc) !important;
  border-color: rgba(0,85,254,.22) !important;
  color: #0a1628;
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 4px 10px rgba(0,85,254,.10);
}
[data-theme="light"] .pill.active:not(.nav *):not(.lp-nav *){
  background: linear-gradient(135deg, rgba(0,85,254,.10), rgba(94,226,255,.10)) !important;
  border-color: rgba(0,85,254,.34) !important;
  color: #003ec1 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(0,85,254,.12),
    0 4px 12px rgba(0,85,254,.14) !important;
}

/* Nav pill polish (light theme, but nav itself stays dark) */
[data-theme="light"] .nav .pill,
[data-theme="light"] .lp-nav .pill{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(238,242,255,.82) !important;
  box-shadow: none !important;
}
[data-theme="light"] .nav .pill:hover,
[data-theme="light"] .lp-nav .pill:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(166,192,255,.25) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(166,192,255,.18) !important;
}
[data-theme="light"] .nav .pill.active,
[data-theme="light"] .lp-nav .pill.active,
.nav .pill.active,
.lp-nav .pill.active{
  background: linear-gradient(135deg, #3B5BFF 0%, #5468ff 100%) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1px rgba(166,192,255,.22),
    0 6px 18px -2px rgba(59,91,255,.55) !important;
}
.nav .pill.active svg,
.lp-nav .pill.active svg,
[data-theme="light"] .nav .pill.active svg,
[data-theme="light"] .lp-nav .pill.active svg{
  stroke: #ffffff !important;
}
[data-theme="light"] .nav .pill-ghost,
[data-theme="light"] .lp-nav .pill-ghost{
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(238,242,255,.62) !important;
  box-shadow: none !important;
}
[data-theme="light"] .nav .pill-ghost:hover,
[data-theme="light"] .lp-nav .pill-ghost:hover{
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}
/* Wallet chip stays on its own gradient + glow tokens */
[data-theme="light"] .nav .pill.wallet-chip{
  background: linear-gradient(135deg, rgba(59,91,255,.28), rgba(166,192,255,.18)) !important;
  border-color: rgba(166,192,255,.55) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(59,91,255,.30), inset 0 0 8px rgba(166,192,255,.18) !important;
}
/* Brand word - keep cobalt-light readable on dark nav in light mode */
[data-theme="light"] .nav .brand-word,
[data-theme="light"] .lp-nav .brand-word{
  color: #A6C0FF !important;
}
[data-theme="light"] .nav .brand-stra,
[data-theme="light"] .lp-nav .brand-stra{
  color: rgba(166,192,255,.48) !important;
}
[data-theme="light"] .nav .brand-clipper,
[data-theme="light"] .lp-nav .brand-clipper{
  color: #A6C0FF !important;
}
/* Theme toggle in nav - keep visible against dark nav */
[data-theme="light"] .nav .theme-toggle,
[data-theme="light"] .lp-nav .theme-toggle{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #FEDA75 !important;
}
[data-theme="light"] .nav .theme-toggle:hover,
[data-theme="light"] .lp-nav .theme-toggle:hover{
  background: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}
/* Hamburger toggle bars */
[data-theme="light"] .nav .nav-toggle-btn span,
[data-theme="light"] .lp-nav .nav-toggle-btn span{
  background: rgba(238,242,255,.82) !important;
}

/* Primary CTAs: cobalt-to-cyan gradient with inner reflection + premium glow */
[data-theme="light"] .btn.primary,
[data-theme="light"] .btn-primary,
[data-theme="light"] .pill-cta,
[data-theme="light"] .btn.cta-pulse,
[data-theme="light"] .btn-magnet{
  background: linear-gradient(135deg, #0055fe 0%, #1746e8 50%, #5EE2FF 100%) !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;
  border-color: rgba(0,85,254,.35) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.32) inset,
    0 6px 20px -4px rgba(0,85,254,.55),
    0 0 0 1px rgba(0,85,254,.22) !important;
}
[data-theme="light"] .btn.primary:hover,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .pill-cta:hover,
[data-theme="light"] .btn.cta-pulse:hover{
  background-position: 100% 50% !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.42) inset,
    0 10px 28px -4px rgba(0,85,254,.66),
    0 0 0 1px rgba(0,85,254,.32) !important;
  transform: translateY(-1px);
}

/* Iridescent horizontal rules */
[data-theme="light"] hr{
  background: linear-gradient(90deg, transparent, rgba(0,85,254,.30), rgba(94,226,255,.20), transparent) !important;
}

/* Selection + scrollbar polish */
[data-theme="light"] ::selection{
  background: rgba(0,85,254,.18) !important;
  color: #0a1628 !important;
}
[data-theme="light"] ::-webkit-scrollbar-thumb{
  background: rgba(0,85,254,.18) !important;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{
  background: rgba(0,85,254,.34) !important;
}

/* Brand mark drop-shadow for depth on light bg */
[data-theme="light"] .brand:hover .brand-mark{
  filter: drop-shadow(0 0 12px rgba(0,85,254,.42)) drop-shadow(0 4px 8px rgba(0,85,254,.20)) !important;
}

/* Section tag dot pulse on light for cinematic emphasis */
[data-theme="light"] .section-tag::before{
  background: linear-gradient(135deg, #0055fe, #5EE2FF);
  box-shadow: 0 0 12px #0055fe, 0 0 20px rgba(0,85,254,.42);
}

/* Notice / success / warn boxes - polished pastels */
[data-theme="light"] .notice{
  background: linear-gradient(180deg, rgba(248,233,236,.95), rgba(255,242,244,.90)) !important;
  border-color: rgba(190,18,60,.18) !important;
  color: #7a0e2c !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
[data-theme="light"] .notice.success{
  background: linear-gradient(180deg, rgba(232,248,240,.95), rgba(244,253,246,.92)) !important;
  border-color: rgba(5,150,105,.20) !important;
  color: #055e3d !important;
}
[data-theme="light"] .warn-box{
  background: linear-gradient(180deg, rgba(252,243,210,.95), rgba(255,250,232,.92)) !important;
  border-color: rgba(180,83,9,.22) !important;
  color: #78350f !important;
}

/* === WOW WIDESCREEN: cinematic edge aurora === */
/* Pseudo-rails on the body bleed off the viewport edges and fill 4K monitors with brand glow */
body{position:relative}
body::before, body::after{
  content:"";
  position:fixed;
  top:0; bottom:0;
  width: clamp(120px, 14vw, 320px);
  pointer-events:none;
  z-index:0;
  filter: blur(38px);
  opacity:.55;
  transition: opacity .4s ease;
  will-change: opacity;
}
body::before{
  left:0;
  background:
    radial-gradient(70% 55% at 0% 35%, color-mix(in oklab, oklch(70% .18 258) 38%, transparent) 0%, transparent 78%),
    radial-gradient(50% 45% at 0% 80%, color-mix(in oklab, oklch(75% .15 200) 26%, transparent) 0%, transparent 80%);
}
body::after{
  right:0;
  background:
    radial-gradient(70% 55% at 100% 30%, color-mix(in oklab, oklch(75% .15 200) 32%, transparent) 0%, transparent 78%),
    radial-gradient(50% 45% at 100% 78%, color-mix(in oklab, oklch(70% .18 258) 26%, transparent) 0%, transparent 80%);
}
[data-theme="light"] body::before, [data-theme="light"] body::after{ opacity:.32 }
@media(max-width: 1180px){ body::before, body::after{ display:none } }
@media (prefers-reduced-motion: reduce){ body::before, body::after{ transition:none } }

/* Lift content above aurora */
.nav, .lp-nav, .site-footer, main, .lp-hero, .hero-strip{ position:relative; z-index:2 }

/* Ultrawide rails: hairline vertical accents pinned to the viewport edges */
@media(min-width: 1820px){
  .wrap::before, .wrap::after{
    content:"";
    position:fixed;
    top: 18vh; bottom: 18vh;
    width:1px;
    pointer-events:none;
    z-index:1;
    background: linear-gradient(to bottom, transparent 0%, rgba(166,192,255,.18) 30%, rgba(166,192,255,.18) 70%, transparent 100%);
    opacity:.7;
  }
  .wrap::before{ left: clamp(12px, 1.6vw, 36px) }
  .wrap::after{ right: clamp(12px, 1.6vw, 36px); background: linear-gradient(to bottom, transparent 0%, rgba(94,226,255,.14) 30%, rgba(94,226,255,.14) 70%, transparent 100%) }
  [data-theme="light"] .wrap::before, [data-theme="light"] .wrap::after{ opacity:.4 }
}

/* ===== v4 signature artifacts (2026-05-11) ===== */

/* 1. CONIC-GLOW PODIUM — animated border ring on leaderboard #1 card */
@property --pd-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes pd-conic-spin{to{--pd-a:360deg}}
.pd-card.pd-center{overflow:visible}
.pd-card.pd-center::before{
  content:'';position:absolute;inset:-1px;border-radius:19px;
  background:conic-gradient(from var(--pd-a),#3B5BFF 0deg,#5EE2FF 80deg,rgba(59,91,255,.12) 140deg,rgba(59,91,255,.12) 320deg,#3B5BFF 360deg);
  /* Static ring: the 8s spin was cut with the rest of the always-running motion
     (partner feedback: no spinning gradients anywhere in the app). */
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;z-index:0}
.pd-card.pd-center>*{position:relative;z-index:1}
@supports not (background:conic-gradient(from 1deg,red,blue)){.pd-card.pd-center::before{display:none}}
@media(prefers-reduced-motion:reduce){.pd-card.pd-center::before{animation:none;background:rgba(59,91,255,.3)}}

/* 2. BREATH-PULSE DONUT — 4s ease-in-out scale on approval-rate donut */
@keyframes breath-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.breath-donut{display:inline-block;transform-origin:center}
.breath-donut svg{animation:breath-pulse 4s ease-in-out infinite;transform-origin:center}
@media(prefers-reduced-motion:reduce){.breath-donut svg{animation:none}}

/* 3. REEL PARALLAX CARDS — 9:16 proof gallery with depth tilt + shadow stack */
.reel-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:16px 0}
.reel-card{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:#0a0a14;border:1px solid rgba(255,255,255,.08);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.38),0 8px 24px rgba(0,0,0,.26),0 16px 40px rgba(0,0,0,.16),
             0 28px 52px rgba(0,0,0,.10),0 0 0 1px rgba(59,91,255,.06);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),filter .3s;
  will-change:transform}
.reel-card:hover{transform:translateY(-4px) scale(1.04);filter:saturate(1.14);
  box-shadow:0 4px 12px rgba(0,0,0,.46),0 12px 32px rgba(0,0,0,.34),0 24px 56px rgba(0,0,0,.22),
             0 40px 72px rgba(59,91,255,.12),0 0 0 1px rgba(59,91,255,.26)}
.reel-card .mc-wrap,.reel-card video,.reel-card img{width:100%;height:100%;object-fit:cover;display:block}
.reel-card-footer{position:absolute;bottom:0;left:0;right:0;padding:16px 10px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%);z-index:3;pointer-events:none}
.reel-card-title{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.reel-card-meta{display:flex;gap:6px;margin-top:3px;font-size:10px;
  color:rgba(255,255,255,.60);font-variant-numeric:tabular-nums}
.reel-card-badge{position:absolute;top:8px;left:8px;z-index:3}
[data-theme="light"] .reel-card{background:#eef2fa;border-color:rgba(20,12,40,.12)}
[data-theme="light"] .reel-card:hover{border-color:rgba(59,91,255,.30)}

/* 4. EARNINGS GLOW-FLASH — entrance animation on earnings KPI */
@keyframes earn-flash{
  0%{opacity:.3;filter:brightness(1.8) drop-shadow(0 0 14px rgba(59,91,255,.65))}
  35%{opacity:1;filter:brightness(1.25) drop-shadow(0 0 7px rgba(59,91,255,.35))}
  100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}}
.earn-kpi{animation:earn-flash 1.5s cubic-bezier(.16,1,.3,1) both;animation-play-state:paused}
.earn-kpi.earn-visible{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.earn-kpi{animation:none}}

/* 5. CAMPAIGN ORBIT — canvas container + legend */
.orbit-wrap{position:relative;width:100%;aspect-ratio:1/1;max-width:460px;margin:0 auto 20px;
  border-radius:16px;overflow:hidden;background:rgba(5,5,20,.55);
  border:1px solid rgba(59,91,255,.12)}
[data-theme="light"] .orbit-wrap{background:rgba(238,243,255,.70);border-color:rgba(59,91,255,.18)}
.orbit-wrap canvas{width:100%;height:100%;display:block}
.orbit-legend{position:absolute;bottom:10px;left:10px;right:10px;display:flex;
  gap:10px;flex-wrap:wrap;justify-content:center}
.orbit-legend span{font-size:9px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.52);display:flex;align-items:center;gap:4px;text-transform:uppercase}
[data-theme="light"] .orbit-legend span{color:rgba(22,10,42,.48)}
.orbit-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* 6. CONTAINER QUERIES — campaign card responsive layout */
.card-wrapper{container-type:inline-size;container-name:card}
@container card (min-width:380px){
  .card-wrapper .metric-row{display:flex;align-items:center;gap:16px}
  .card-wrapper .metric .k{font-size:28px}
}

/* earn-kpi IntersectionObserver hook (fires once; added by _render_shell v4 patch) */