/* ================================================================
   LearnCPRToday — Shared Stylesheet
   Brook Gibson, RDH · AHA Training Site
   Built on WPS v6 effects + Elite Starter token system.
   Theme system: 5 palettes + 5 font pairs, dark mode, heart cursor.
   ================================================================ */

/* ---- FONT PAIR IMPORTS (all 5 loaded; switcher swaps the vars) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=DM+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&family=Open+Sans:wght@400;500;600;700&family=Roboto+Slab:wght@400;500;700;800&family=Sora:wght@500;600;700;800&display=swap');

/* ================================================================
   TOKENS — default palette "Clinical Trust", default font "Editorial"
   Palettes override --brand*, fonts override --font*.
================================================================ */
:root{
  /* brand palette (Clinical Trust default) */
  --brand:        #0A6EBD;
  --brand-dark:   #075394;
  --brand-deep:   #0B2F52;
  --accent:       #00A6A6;
  --accent-soft:  #E3F4F4;
  --brand-soft:   #E8F2FB;

  /* neutrals */
  --ink:      #12202E;
  --ink-mid:  #3A4A5A;
  --ink-soft: #64748B;
  --line:     #E2E8F0;
  --paper:    #FFFFFF;
  --paper-2:  #F6F9FC;
  --paper-3:  #EEF3F8;

  /* semantic */
  --heart:   #E63757;   /* the CPR heart red — used sparingly */
  --success: #10B981;
  --warn:    #F59E0B;

  /* fonts (Editorial default: Fraunces + DM Sans) */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-util:    'DM Sans', system-ui, sans-serif;

  /* scale */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;
  --sh-sm: 0 2px 10px rgba(11,47,82,.06);
  --sh-md: 0 12px 34px rgba(11,47,82,.10);
  --sh-lg: 0 28px 70px rgba(11,47,82,.16);
  --nav-h: 74px;
  --wrap: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ============ 5 COLOR PALETTES ============ */
[data-palette="clinical"]{
  --brand:#0A6EBD; --brand-dark:#075394; --brand-deep:#0B2F52;
  --accent:#00A6A6; --accent-soft:#E3F4F4; --brand-soft:#E8F2FB;
}
[data-palette="lifeline"]{
  --brand:#C8102E; --brand-dark:#9E0C24; --brand-deep:#2A1013;
  --accent:#1F2933; --accent-soft:#EEF1F4; --brand-soft:#FBE9EC;
  --heart:#C8102E;
}
[data-palette="calm"]{
  --brand:#2E8B8B; --brand-dark:#226E6E; --brand-deep:#123536;
  --accent:#C98A5E; --accent-soft:#F6ECE2; --brand-soft:#E4F0EF;
}
[data-palette="heartbeat"]{
  --brand:#FF5A5F; --brand-dark:#E23F52; --brand-deep:#2C2036;
  --accent:#3AA0D8; --accent-soft:#E3F1FA; --brand-soft:#FFE9E9;
  --heart:#FF5A5F;
}
[data-palette="midnight"]{
  --brand:#123B6B; --brand-dark:#0C2B4E; --brand-deep:#0A1F38;
  --accent:#C9A227; --accent-soft:#F6EFD8; --brand-soft:#E7EDF5;
}

/* ============ 5 FONT PAIRINGS ============ */
[data-font="clean"]   { --font-display:'Inter',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-util:'Inter',system-ui,sans-serif; }
[data-font="editorial"]{ --font-display:'Fraunces',Georgia,serif;   --font-body:'DM Sans',system-ui,sans-serif; --font-util:'DM Sans',system-ui,sans-serif; }
[data-font="friendly"] { --font-display:'Poppins',system-ui,sans-serif; --font-body:'Open Sans',system-ui,sans-serif; --font-util:'Open Sans',system-ui,sans-serif; }
[data-font="institutional"]{ --font-display:'Roboto Slab',Georgia,serif; --font-body:'DM Sans',system-ui,sans-serif; --font-util:'DM Sans',system-ui,sans-serif; }
[data-font="tech"]     { --font-display:'Sora',system-ui,sans-serif;   --font-body:'Inter',system-ui,sans-serif; --font-util:'Inter',system-ui,sans-serif; }

/* ============ DARK MODE ============ */
[data-theme="dark"]{
  --ink:#EAF1F8; --ink-mid:#C4D2E0; --ink-soft:#93A6B8;
  --line:#26374A; --paper:#0E1C2A; --paper-2:#132433; --paper-3:#17293A;
  --brand-soft:#132A40; --accent-soft:#14312F;
  --sh-sm:0 2px 12px rgba(0,0,0,.4); --sh-md:0 14px 38px rgba(0,0,0,.5); --sh-lg:0 30px 74px rgba(0,0,0,.6);
}
[data-theme="dark"] .navbar{ background:rgba(14,28,42,.82); }
[data-theme="dark"] .hero-photo-panel{ filter:brightness(.9); }
[data-theme="dark"] img.soft{ filter:brightness(.94); }

/* ================================================================
   BASE
================================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink); background:var(--paper);
  line-height:1.65; font-size:16px;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.08; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
a{ color:var(--brand); text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px); }
section{ position:relative; }
.eyebrow{
  font-family:var(--font-util); text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; font-weight:700; color:var(--brand);
  display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand); display:inline-block; }
.lead{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-mid); }

@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:280ms ease both vt-out; }
::view-transition-new(root){ animation:340ms ease 80ms both vt-in; }
@keyframes vt-out{ to{opacity:0; transform:translateY(-14px);} }
@keyframes vt-in{ from{opacity:0; transform:translateY(14px);} }

/* ================================================================
   BUTTONS
================================================================ */
.btn{
  font-family:var(--font-util); font-weight:700; font-size:.98rem;
  padding:.92rem 1.7rem; border-radius:var(--r-pill); border:2px solid transparent;
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space:nowrap; text-align:center;
}
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--sh-sm); }
.btn-primary:hover{ background:var(--brand-dark); box-shadow:var(--sh-md); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--brand); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brand); background:var(--brand-soft); }
.btn-light{ background:#fff; color:var(--brand-deep); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-heart{ background:var(--heart); color:#fff; }
.btn-heart:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-lg{ padding:1.05rem 2.1rem; font-size:1.05rem; }

/* ================================================================
   NAVBAR
================================================================ */
.navbar{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:900;
  display:flex; align-items:center;
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent; transition:box-shadow .3s, border-color .3s, background .3s;
}
.navbar.scrolled{ box-shadow:var(--sh-sm); border-color:var(--line); }
.nav-inner{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px); width:100%; display:flex; align-items:center; gap:1.2rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.24rem; color:var(--ink); letter-spacing:-.02em; }
.brand-mark{ width:38px; height:38px; flex-shrink:0; }
.brand b{ color:var(--brand); }
.nav-links{ display:flex; align-items:center; gap:1.6rem; margin-left:auto; }
.nav-links a{ font-family:var(--font-util); font-weight:600; font-size:.94rem; color:var(--ink-mid); transition:color .2s; }
.nav-links a:hover{ color:var(--brand); }
.nav-cta{ display:flex; align-items:center; gap:.7rem; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; margin-left:auto; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; border-radius:2px; }
@media(max-width:940px){
  .nav-links{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:flex-start;
    background:var(--paper); padding:1.2rem clamp(20px,5vw,40px) 1.8rem; gap:1.1rem; margin-left:0;
    border-bottom:1px solid var(--line); box-shadow:var(--sh-md); transform:translateY(-120%); transition:transform .35s var(--ease); }
  .nav-links.open{ transform:translateY(0); }
  .nav-links .nav-cta{ flex-direction:column; align-items:stretch; width:100%; }
  .nav-links .btn{ width:100%; justify-content:center; }
  .nav-toggle{ display:block; }
}

/* ================================================================
   HERO
================================================================ */
.hero{ padding:calc(var(--nav-h) + clamp(40px,7vw,84px)) 0 clamp(50px,7vw,90px); position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero h1{ font-size:clamp(2.5rem,5.4vw,4.1rem); font-weight:900; letter-spacing:-.035em; }
.hero h1 .accentword{ color:var(--brand); font-style:italic; }
.hero .lead{ margin:1.4rem 0 2rem; max-width:34ch; }
.hero-ctas{ display:flex; gap:.9rem; flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:1.5rem; margin-top:2.3rem; flex-wrap:wrap; }
.trust-badge-svg{ height:64px; width:auto; filter:drop-shadow(0 6px 16px rgba(11,47,82,.12)); }
.trust-mini{ font-family:var(--font-util); font-size:.82rem; color:var(--ink-soft); max-width:20ch; line-height:1.4; }
.trust-mini b{ color:var(--ink); }

.hero-photo-wrap{ position:relative; }
.hero-photo-panel{
  position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg);
  aspect-ratio:4/5;
}
.hero-photo-panel img{ width:100%; height:100%; object-fit:cover; }
.hero-float-card{
  position:absolute; bottom:-22px; left:-22px; background:var(--paper); border-radius:var(--r-lg);
  padding:1rem 1.25rem; box-shadow:var(--sh-md); display:flex; align-items:center; gap:.85rem;
  border:1px solid var(--line);
}
.hero-float-card .pulse-dot{ width:42px; height:42px; border-radius:50%; background:var(--heart);
  display:grid; place-items:center; color:#fff; flex-shrink:0; animation:beat 1.2s var(--ease) infinite; }
.hero-float-card .fc-num{ font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--ink); line-height:1; }
.hero-float-card .fc-lbl{ font-family:var(--font-util); font-size:.76rem; color:var(--ink-soft); }
@keyframes beat{ 0%,100%{transform:scale(1);} 15%{transform:scale(1.18);} 30%{transform:scale(1);} 45%{transform:scale(1.12);} }
.h-ring{ position:absolute; border-radius:50%; pointer-events:none; will-change:transform; }
.hr1{ width:520px;height:520px; top:-160px; right:-160px; border:1px solid var(--brand-soft); }
.hr2{ width:300px;height:300px; bottom:-80px; left:-120px; border:1px solid var(--accent-soft); }

@media(max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo-wrap{ max-width:440px; margin:0 auto; }
  .hero .lead{ max-width:none; }
}

/* ================================================================
   TRUST STRIP (marquee)
================================================================ */
.strip{ background:var(--brand-deep); color:#fff; padding:.9rem 0; overflow:hidden; }
.strip-track{ display:flex; gap:2.5rem; white-space:nowrap; animation:marq 30s linear infinite; }
.strip-track span{ font-family:var(--font-util); font-weight:600; font-size:.92rem; opacity:.92; display:inline-flex; gap:2.5rem; }
.strip-track span::after{ content:"·"; opacity:.5; }
@keyframes marq{ to{ transform:translateX(-50%);} }

/* ================================================================
   SECTION SHELL
================================================================ */
.sec{ padding:clamp(56px,8vw,110px) 0; }
.sec-head{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin:.7rem 0 .8rem; }
.sec-head h2 em{ color:var(--brand); font-style:italic; }
.alt{ background:var(--paper-2); }
.deep{ background:var(--brand-deep); color:#fff; }
.deep h2,.deep h3{ color:#fff; }
.deep .lead{ color:rgba(255,255,255,.82); }
.deep .eyebrow{ color:#fff; }
.deep .eyebrow::before{ background:var(--accent); }

/* ================================================================
   PROBLEM / VALUE CARDS
================================================================ */
.grid{ display:grid; gap:1.3rem; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .g3,.g4{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .g2,.g3,.g4{ grid-template-columns:1fr;} }

.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem 1.5rem; transition:transform .3s var(--ease), box-shadow .3s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.card .ic{ width:48px; height:48px; border-radius:14px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; margin-bottom:1rem; }
.card h3{ font-size:1.18rem; margin-bottom:.5rem; }
.card p{ font-size:.96rem; color:var(--ink-mid); }
.deep .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.deep .card p{ color:rgba(255,255,255,.78); }
.deep .card .ic{ background:rgba(255,255,255,.12); color:#fff; }

/* ================================================================
   COURSES
================================================================ */
.course-cat{ margin-bottom:2.4rem; }
.course-cat h3{ font-size:1.15rem; display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; color:var(--ink); }
.course-cat h3 .tag{ font-family:var(--font-util); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--brand); background:var(--brand-soft); padding:.28rem .6rem; border-radius:var(--r-pill); }
.course-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.course{ background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--r-md);
  padding:1.1rem 1.2rem; transition:transform .25s var(--ease), box-shadow .25s; }
.course:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); }
.course b{ display:block; font-family:var(--font-util); font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:.25rem; }
.course span{ font-size:.86rem; color:var(--ink-soft); }
.course.flag{ border-left-color:var(--heart); background:linear-gradient(180deg,var(--brand-soft),var(--paper)); }

/* ================================================================
   HOW IT WORKS
================================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; counter-reset:s; }
@media(max-width:780px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 1.6rem 1.6rem; }
.step .num{ font-family:var(--font-display); font-weight:900; font-size:2.6rem; color:var(--brand); opacity:.22; line-height:1; }
.step h3{ font-size:1.24rem; margin:.4rem 0 .5rem; }
.step p{ color:var(--ink-mid); font-size:.96rem; }
.step .connect{ position:absolute; top:2.9rem; right:-.85rem; color:var(--brand); opacity:.4; z-index:2; }
@media(max-width:780px){ .step .connect{ display:none; } }

/* ================================================================
   ABOUT BROOK — split
================================================================ */
.split{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split.rev{ grid-template-columns:1.08fr .92fr; }
@media(max-width:840px){ .split,.split.rev{ grid-template-columns:1fr; } }
.split-photo{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:4/5; }
.split-photo img{ width:100%; height:100%; object-fit:cover; }
.about-cred{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.6rem; }
.about-cred div{ }
.about-cred .n{ font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--brand); line-height:1; }
.about-cred .l{ font-family:var(--font-util); font-size:.82rem; color:var(--ink-soft); }
.sig{ font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--ink); margin-top:1.2rem; }

/* ================================================================
   STATS band
================================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
@media(max-width:700px){ .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; } }
.stat .stat-num{ font-family:var(--font-display); font-weight:900; font-size:clamp(2.4rem,4.5vw,3.4rem); color:#fff; line-height:1; display:block; }
.stat .stat-lbl{ font-family:var(--font-util); font-size:.86rem; color:rgba(255,255,255,.72); margin-top:.4rem; }

/* ================================================================
   EMPLOYER / GROUP TRAINING
================================================================ */
.employer{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media(max-width:840px){ .employer{ grid-template-columns:1fr; } }
.employer-list{ list-style:none; margin:1.4rem 0 1.8rem; }
.employer-list li{ display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; font-size:1rem; color:var(--ink-mid); }
.employer-list li svg{ color:var(--success); flex-shrink:0; margin-top:3px; }
.deep .employer-list li{ color:rgba(255,255,255,.85); }
.employer-photo{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:1/1; }
.employer-photo img{ width:100%;height:100%;object-fit:cover; }

/* ================================================================
   INSTRUCTORS teaser
================================================================ */
.inst-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem; }
.inst{ text-align:center; }
.inst-ph{ aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-3); box-shadow:var(--sh-sm);
  display:grid; place-items:center; margin-bottom:.8rem; }
.inst-ph img{ width:100%;height:100%;object-fit:cover; }
.inst-ph .ph-face{ color:var(--brand); opacity:.35; }
.inst b{ font-family:var(--font-util); font-weight:700; display:block; color:var(--ink); }
.inst span{ font-size:.84rem; color:var(--ink-soft); }

/* ================================================================
   TESTIMONIALS
================================================================ */
.reviews-head{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:.5rem; }
.stars{ color:#F5A623; letter-spacing:2px; font-size:1.2rem; }
.g-rating{ font-family:var(--font-util); color:var(--ink-soft); font-size:.9rem; }
.g-rating b{ color:var(--ink); }
.rev-grid{ columns:3; column-gap:1.3rem; }
@media(max-width:900px){ .rev-grid{ columns:2; } }
@media(max-width:600px){ .rev-grid{ columns:1; } }
.rev{ break-inside:avoid; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.4rem 1.4rem; margin-bottom:1.3rem; box-shadow:var(--sh-sm); }
.rev .stars{ font-size:.95rem; margin-bottom:.6rem; }
.rev p{ font-size:.96rem; color:var(--ink); margin-bottom:.8rem; }
.rev .who{ display:flex; align-items:center; gap:.6rem; }
.rev .av{ width:34px;height:34px;border-radius:50%; background:var(--brand); color:#fff; display:grid;place-items:center;
  font-family:var(--font-util); font-weight:700; font-size:.85rem; }
.rev .who b{ font-family:var(--font-util); font-size:.9rem; }
.rev .who span{ font-size:.76rem; color:var(--ink-soft); }
.rev-note{ text-align:center; font-size:.82rem; color:var(--ink-soft); margin-top:.4rem; }

/* ================================================================
   FAQ
================================================================ */
.faq{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:1.3rem 0;
  font-family:var(--font-display); font-weight:600; font-size:1.12rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-q .chev{ flex-shrink:0; transition:transform .3s var(--ease); color:var(--brand); }
.faq-item.open .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 0 1.3rem; color:var(--ink-mid); font-size:1rem; max-width:70ch; }

/* ================================================================
   CTA band + KIDS teaser
================================================================ */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:.8rem; }
.cta-band .lead{ max-width:52ch; margin:0 auto 2rem; }
.cta-band .btn{ margin:0 .4rem .6rem; }

.kids-teaser{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center;
  background:linear-gradient(135deg,var(--brand-soft),var(--accent-soft)); border-radius:var(--r-xl); padding:clamp(2rem,5vw,3.5rem); }
@media(max-width:760px){ .kids-teaser{ grid-template-columns:1fr; text-align:center; } }
.kids-teaser h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
.kids-heart{ display:grid; place-items:center; }
.kids-heart svg{ width:min(230px,60vw); height:auto; filter:drop-shadow(0 14px 30px rgba(230,55,87,.28)); animation:beat 1.2s var(--ease) infinite; }

/* ================================================================
   FOOTER
================================================================ */
.footer{ background:var(--brand-deep); color:rgba(255,255,255,.8); padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
@media(max-width:760px){ .footer-top{ grid-template-columns:1fr; gap:1.8rem; } }
.footer .brand{ color:#fff; margin-bottom:.8rem; }
.footer p{ font-size:.92rem; max-width:34ch; }
.footer h4{ color:#fff; font-family:var(--font-util); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.footer-links{ display:flex; flex-direction:column; gap:.6rem; }
.footer-links a{ color:rgba(255,255,255,.78); font-size:.94rem; }
.footer-links a:hover{ color:#fff; }
.footer-partner{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md);
  padding:1rem 1.2rem; font-size:.9rem; }
.footer-partner a{ color:#fff; font-weight:600; text-decoration:underline; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.14); padding-top:1.6rem; display:flex; justify-content:space-between;
  align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-bottom small{ font-size:.82rem; color:rgba(255,255,255,.6); }
/* discreet app-entry icons */
.app-icons{ display:flex; gap:.6rem; }
.app-icons a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
  display:grid; place-items:center; transition:.25s; }
.app-icons a:hover{ background:rgba(255,255,255,.18); color:#fff; transform:translateY(-2px); }

/* ================================================================
   REVEAL ANIMATIONS
================================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.text-reveal{ overflow:hidden; display:inline-block; }
.text-reveal-inner{ display:inline-block; transform:translateY(105%); transition:transform .85s var(--ease); }
.text-reveal.revealed .text-reveal-inner{ transform:translateY(0); }
.img-reveal-wrap{ position:relative; overflow:hidden; }
.img-reveal-inner{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease); }
.img-reveal-inner.revealed{ clip-path:inset(0 0 0 0); }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .text-reveal-inner{ transform:none; }
  .img-reveal-inner{ clip-path:none; }
}

/* ================================================================
   THEME SWITCHER (bottom-left floating)
================================================================ */
.theme-fab{
  position:fixed; left:22px; bottom:22px; z-index:1000;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--brand); color:#fff; box-shadow:var(--sh-md);
  display:grid; place-items:center; transition:transform .3s var(--ease);
}
.theme-fab:hover{ transform:scale(1.08) rotate(8deg); }
.theme-panel{
  position:fixed; left:22px; bottom:88px; z-index:1000; width:min(340px,calc(100vw - 44px));
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:1.3rem; transform:translateY(16px) scale(.96); opacity:0; pointer-events:none;
  transition:transform .3s var(--ease), opacity .3s var(--ease); max-height:min(78vh,640px); overflow-y:auto;
}
.theme-panel.open{ transform:none; opacity:1; pointer-events:auto; }
.theme-panel h5{ font-family:var(--font-util); font-size:.72rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink-soft); margin:1.1rem 0 .7rem; }
.theme-panel h5:first-child{ margin-top:0; }
.tp-title{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.2rem; }
.tp-sub{ font-size:.8rem; color:var(--ink-soft); margin-bottom:.4rem; }
.pal-row{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.pal{ border:1.5px solid var(--line); border-radius:var(--r-md); padding:.6rem .7rem; cursor:pointer; background:var(--paper);
  text-align:left; transition:.2s; }
.pal:hover{ border-color:var(--brand); }
.pal.active{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.pal .sw{ display:flex; gap:4px; margin-bottom:.4rem; }
.pal .sw i{ width:16px; height:16px; border-radius:5px; display:block; }
.pal b{ font-family:var(--font-util); font-size:.82rem; display:block; color:var(--ink); }
.pal span{ font-size:.7rem; color:var(--ink-soft); }
.fonts-list{ display:flex; flex-direction:column; gap:.4rem; }
.fnt{ border:1.5px solid var(--line); border-radius:var(--r-md); padding:.55rem .8rem; cursor:pointer; background:var(--paper);
  text-align:left; transition:.2s; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.fnt:hover{ border-color:var(--brand); }
.fnt.active{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.fnt .fn-name{ font-weight:700; font-size:.9rem; color:var(--ink); }
.fnt .fn-desc{ font-size:.72rem; color:var(--ink-soft); }
.tp-toggles{ display:flex; flex-direction:column; gap:.7rem; margin-top:.4rem; padding-top:1rem; border-top:1px solid var(--line); }
.tp-check{ display:flex; align-items:center; gap:.6rem; cursor:pointer; font-family:var(--font-util); font-size:.9rem; color:var(--ink); }
.tp-check input{ width:18px; height:18px; accent-color:var(--brand); cursor:pointer; }
.tp-reset{ margin-top:.9rem; width:100%; font-size:.82rem; padding:.5rem; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer; color:var(--ink-mid); font-family:var(--font-util); }
.tp-reset:hover{ background:var(--paper-3); }

/* heart cursor toggle */
body.heart-cursor, body.heart-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23E63757' stroke='white' stroke-width='1.5' d='M16 28C16 28 4 20 4 11.5C4 7 7.5 4 11 4C13.5 4 15.2 5.5 16 7C16.8 5.5 18.5 4 21 4C24.5 4 28 7 28 11.5C28 20 16 28 16 28Z'/%3E%3C/svg%3E") 16 16, auto;
}

/* utility */
.center{ text-align:center; }
.mt-sm{ margin-top:1rem; } .mt-md{ margin-top:2rem; }
img.soft{ transition:filter .4s; }