/* =========================================================
   ABOUT.ME.CSS — consolidated, de-duped, production-ready
   Palette: light theme, accent fuchsia #EC3B83
   ========================================================= */

/* =================== TOKENS =================== */
:root{
  --paper:#FFFFFF; --ink:#0D0F13; --slate:#6B7280; --mist:#F6F7FB;
  --accent:#EC3B83; --ring:#8AB4FF; --success:#1DB954;
  --radius:16px; --grid:22px; --speed:200ms; --ease:cubic-bezier(.2,.8,.2,1);
}

/* =================== BASE =================== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink) }
body{
  font:400 16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block }
a{ text-decoration:none; color:inherit }
.wrap{ max-width:1120px; margin:0 auto; padding:0 20px }
.section{ padding:48px 0 }
.section-head{ text-align:center; margin:0 0 18px }
.section-head h2{ font:700 clamp(22px,2.8vw,30px)/1.2 Poppins,Inter,sans-serif; margin:0 0 6px }
.section-head .kicker{ color:var(--slate); font:600 14px/1.6 Inter; margin:0 }
:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; border-radius:10px }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{
  position:fixed; left:16px; top:12px; width:auto; height:auto;
  padding:8px 10px; background:#000; color:#fff; z-index:10002; border-radius:8px
}

/* =================== HEADER =================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:color-mix(in oklab,var(--paper) 86%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid color-mix(in oklab,var(--ink) 10%,transparent);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px }
.brand{ display:flex; align-items:center; gap:10px }
.brand img{
  display:block; max-height:56px; width:auto; object-fit:contain; object-position:center;
}
.brand-name{ font:700 16px/1 Inter }
.controls{ display:flex; align-items:center; gap:10px }

/* Icon button (speaker / hamburger) */
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid #E6E7EB; background:#fff; border-radius:10px; cursor:pointer;
  transition: transform .18s, box-shadow .18s, background-color .18s, color .18s, border-color .18s;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.06) }

/* Speaker state (never camouflages) */
#speakerBtn .ic-off{ display:none }
#speakerBtn[data-state="off"]{
  color:var(--accent); background:#fff0f6; border-color:#ffd0e6;
}
#speakerBtn[data-state="off"] .ic-on{ display:none }
#speakerBtn[data-state="off"] .ic-off{ display:inline }

/* Hamburger (tight bars, morph to X) */
.hamburger-btn{ position:relative }
.hamburger,.hamburger::before,.hamburger::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink); border-radius:2px;
  transition: transform .22s ease, opacity .22s ease;
}
.hamburger::before{ transform:translateY(-5px) }
.hamburger::after { transform:translateY(5px) }
.hamburger-btn[aria-expanded="true"] .hamburger{ transform:scaleX(0); opacity:0 }
.hamburger-btn[aria-expanded="true"] .hamburger::before{ transform:rotate(45deg) }
.hamburger-btn[aria-expanded="true"] .hamburger::after { transform:rotate(-45deg) }

/* =================== DRAWER (SIDE PANEL) =================== */
.drawer{ position:fixed; inset:0; z-index:9999; pointer-events:none }
.drawer.open{ pointer-events:auto }
.drawer .scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.28); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .18s ease;
}
.drawer.open .scrim{ opacity:1 }
.drawer .panel{
  position:absolute; top:0; right:0; height:100%; width:min(320px,86vw);
  background:#fff; border-left:1px solid #ececf1; box-shadow:-24px 0 80px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform .24s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open .panel{ transform:translateX(0) }
body.drawer-open{ overflow:hidden }

.panel-head{
  display:flex; align-items:center; gap:10px; padding:12px 12px;
  border-bottom:1px dashed #ffd0e6;
}
.panel-mark{ color:var(--accent); font-size:18px }
.panel-head h2{
  margin:0; font:800 14px/1 Inter,system-ui,sans-serif; letter-spacing:.06em; color:var(--ink); text-transform:uppercase;
}
.panel-close{
  margin-left:auto; width:32px; height:32px; border-radius:10px; border:1px solid #ececf1; background:#fff; color:#6B7280;
  display:grid; place-items:center; cursor:pointer;
  transition: transform .18s, background-color .18s, color .18s, box-shadow .18s;
}
.panel-close:hover{ transform:rotate(90deg); background:#fff0f6; color:var(--accent); box-shadow:0 8px 24px rgba(236,59,131,.14) }

.panel-links{ display:flex; flex-direction:column; padding:10px }
.panel-links a{
  display:flex; align-items:center; gap:10px; padding:12px 10px;
  border-radius:12px; color:var(--ink); border:1px solid transparent;
  transition: background-color .18s, transform .18s, border-color .18s;
}
.panel-links a .i{ width:22px; display:inline-grid; place-items:center; opacity:.9 }
.panel-links a:hover{
  background:#fff0f6; border-color:#ffd0e6; transform:translateX(2px);
  box-shadow:0 8px 24px rgba(236,59,131,.10);
}
/* stagger on open */
.drawer.open .panel-links a{ animation:link-in .28s ease both }
.panel-links a:nth-child(1){ animation-delay:.02s }
.panel-links a:nth-child(2){ animation-delay:.06s }
.panel-links a:nth-child(3){ animation-delay:.10s }
@keyframes link-in{ from{opacity:0; transform:translateX(8px)} to{opacity:1; transform:translateX(0)} }

/* =================== INTRO =================== */
.intro{ padding:42px 0 10px }
.intro .grid{
  display:grid; grid-template-columns:360px 1fr; gap:28px; align-items:center;
}
@media (max-width:880px){ .intro .grid{ grid-template-columns:1fr } }
.portrait{
  position:relative; overflow:hidden; border-radius:8px; border:1px solid #ececf1; background:#fff;
  aspect-ratio: 4 / 5;
}
.intro h1{ font:700 clamp(26px,3.2vw,38px)/1.16 Poppins,Inter,sans-serif; margin:.1em 0 .35em }
.intro p{ color:var(--ink); margin:.2em 0 1em }
.quick-tells{ display:grid; gap:8px; padding:0; list-style:none }
.quick-tells li{
  background:#fff; border:1px solid #ececf1; border-radius:12px; padding:10px 12px;
  font:600 13px/1.5 Inter; color:var(--slate);
}

/* =================== OFF-CANVAS ME (TILES) =================== */
.tiles{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grid);
}
@media (max-width:1024px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:720px){  .tiles{ grid-template-columns:1fr } }
.tile{
  position:relative; border:1px solid #ececf1; border-radius:16px; overflow:hidden; background:#fff;
  transition: transform .2s, box-shadow .2s;
}
.tile:hover{ box-shadow:0 12px 40px rgba(0,0,0,.08); transform:translateY(-2px) }
.tile .img{ aspect-ratio:4/3; background:#fafafa; display:grid; place-items:center }
.tile .cap{ padding:12px 12px 14px; color:var(--ink); font:400 14px/1.55 Inter }

/* =================== VIGNETTES =================== */
.vignettes{ display:grid; gap:10px; max-width:860px; margin:0 auto }
.vignette{
  display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid #ececf1; border-radius:14px; padding:12px 14px;
}
.ding{ width:14px; height:14px; border-radius:99px; background:#ddd; margin-top:4px }
.vignette.in .ding{ background:var(--accent); box-shadow:0 0 0 3px #ffe3f0 }

/* =================== PRINCIPLES =================== */
.principles{ display:grid; gap:10px; max-width:900px; margin:0 auto; padding:0; list-style:none }
.principles li{ background:#fff; border:1px solid #ececf1; border-radius:12px; padding:12px }
.principles strong{ color:var(--accent) }

/* =================== BEYOND DESIGN =================== */
.beyond{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid);
}
@media (max-width:1024px){ .beyond{ grid-template-columns:1fr 1fr } }
@media (max-width:720px){  .beyond{ grid-template-columns:1fr } }
.card{ background:#fff; border:1px solid #ececf1; border-radius:16px; padding:16px }
.card h3{ font:700 16px/1.2 Inter; color:var(--accent); margin:0 0 6px }
.card p{ margin:.25em 0; color:var(--ink) }
.card ul{ margin:.5em 0 0; padding-left:18px; color:var(--slate) }

/* =================== PERKS + CHAT-CLOUD CURSOR =================== */
.perks{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid); position:relative;
}
@media (max-width:1024px){ .perks{ grid-template-columns:1fr 1fr } }
@media (max-width:720px){  .perks{ grid-template-columns:1fr } }
.perk{
  background:#fff; border:1px solid #ececf1; border-radius:16px; padding:14px 16px;
  display:flex; gap:12px; align-items:flex-start; position:relative;
}
.perk .badge{
  width:34px; height:34px; border-radius:10px; background:#fff0f6; border:1px solid #ffd0e6;
  display:grid; place-items:center; color:var(--accent); font:700 14px/1 Inter;
}
/* cursor bubble prompt */
.perks-area{ position:relative }
.perks-area.cursor-off{ cursor:none }
.chat-cloud{
  position:fixed; left:-1000px; top:-1000px; z-index:9999;
  background:#fff; border:1px solid #ffd0e6; color:var(--accent);
  padding:8px 10px; border-radius:14px 14px 14px 4px;
  box-shadow:0 10px 30px rgba(236,59,131,.18);
  font:700 12px/1.2 Inter; pointer-events:none; transition:transform .08s var(--ease);
}
.chat-cloud::after{
  content:""; position:absolute; left:8px; bottom:-6px;
  border-width:6px; border-style:solid; border-color:#ffd0e6 transparent transparent transparent;
  filter:drop-shadow(0 2px 0 #ffd0e6);
}
.chat-cloud span{ display:block; white-space:nowrap }

/* =================== REVEAL / PETALS / CURSOR DOT =================== */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.petal{
  position:fixed; width:10px; height:10px; pointer-events:none;
  background:var(--accent); border-radius:999px; filter:blur(.2px); opacity:.9; z-index:9998;
}
.cursor-dot{
  position:fixed; width:10px; height:10px; border:2px solid var(--accent);
  border-radius:999px; transform:translate(-50%,-50%); pointer-events:none;
  transition:transform .15s, opacity .2s; mix-blend-mode:multiply; opacity:.6; z-index:9999;
}

/* =================== WARNING CTA (FOOTER) =================== */
.finale-warning{
  background: linear-gradient(180deg,#fff,#fff0f6);
  border-top:1px solid #ececf1;
  padding:56px 0 42px;
}
.warn-card{
  background:#fff; border:2px solid #ffd9ea; border-radius:16px; padding:18px 16px;
  position:relative; overflow:hidden;
}
.warn-head{ display:flex; gap:10px; align-items:center; justify-content:center; text-align:center }
.warn-ic{ color:var(--accent); display:inline-grid; place-items:center }
.finale-warning h2{ margin:0; font:700 clamp(18px,2.4vw,26px)/1.25 Poppins,Inter,sans-serif }
.warn-sub{
  margin:8px auto 0; text-align:center; color:var(--slate);
  font:600 14px/1.6 Inter; max-width:760px;
}
/* CTA row */
.finale-warning .cta-row{
  display:flex; justify-content:center; align-items:center;
  gap:12px; margin:16px 0 10px; flex-wrap:wrap;
}
.finale-warning .btn{
  border:1px solid #ffd0e6; background:#fff; color:var(--ink);
  border-radius:12px; padding:12px 16px; font:700 14px/1 Inter; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  vertical-align:middle; display:inline-flex; align-items:center; gap:8px;
}
.finale-warning .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(236,59,131,.12) }
.finale-warning .btn.primary{ background:var(--accent); color:#fff; border-color:transparent }
.finale-warning .btn.ghost{ background:transparent; color:var(--accent) }
/* animated values strip */
.warn-strip{
  position:relative; overflow:hidden; margin:16px 0 0; padding:10px 0;
  border-top:1px dashed #ffd0e6; border-bottom:1px dashed #ffd0e6; background:#fff;
}
.warn-track{
  display:flex; gap:24px; white-space:nowrap; color:var(--accent);
  font:800 11px/1 Inter,system-ui,sans-serif; letter-spacing:.12em;
  animation:warn-marquee 14s linear infinite; will-change:transform;
}
@keyframes warn-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.finale-warning .rights{ text-align:center; color:var(--slate); font:600 13px/1.6 Inter; margin:12px 0 0 }
@media (max-width:560px){ .warn-head{ align-items:flex-start } .warn-ic{ margin-top:2px } }

/* =================== PREMIUM SCRIPT DIALOGS =================== */
.script-dlg{ border:none; padding:0; width:min(720px,92vw); background:transparent }
.script-dlg::backdrop{
  background:color-mix(in oklab, black 22%, transparent);
  backdrop-filter: blur(6px) saturate(120%);
  animation: dlg-backdrop-in .22s ease;
}
@keyframes dlg-backdrop-in{ from{opacity:0} to{opacity:1} }

.dlg-card{
  position:relative; background:#fff; border:1px solid #ececf1; border-radius:16px;
  box-shadow:0 40px 120px rgba(13,15,19,.18), 0 8px 24px rgba(13,15,19,.10);
  overflow:clip; transform-origin:50% 38%;
  animation: dlg-pop-in .26s var(--ease);
}
@keyframes dlg-pop-in{ from{transform:translateY(8px) scale(.98); opacity:0} to{transform:translateY(0) scale(1); opacity:1} }

.dlg-close{
  position:absolute; top:10px; right:10px; width:34px; height:34px;
  border-radius:10px; border:1px solid #ececf1; background:#fff; color:#6B7280;
  display:grid; place-items:center; cursor:pointer;
  transition: transform .18s, background-color .18s, color .18s, box-shadow .18s;
}
.dlg-close:hover{ transform:rotate(90deg); background:#fff0f6; color:var(--accent); box-shadow:0 8px 24px rgba(236,59,131,.14) }

.dlg-h{ padding:18px 18px 10px; text-align:left }
.dlg-pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font:700 11px/1 Inter,system-ui,sans-serif; letter-spacing:.04em;
  background:#fff0f6; color:var(--accent); border:1px solid #ffd0e6; margin-bottom:8px;
}
.dlg-h h3{ margin:0 0 6px; font:700 clamp(18px,2.2vw,22px)/1.3 Poppins,Inter,sans-serif; color:var(--ink) }
.dlg-h p{ margin:0; color:var(--slate); font:600 13px/1.6 Inter }

.dlg-b{ padding:10px 18px 14px }
.script-block{
  margin:0; padding:14px;
  background:linear-gradient(180deg,#fff,#fffafc);
  border:1px solid #ececf1; border-radius:12px;
  font:600 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:#2a2f35; white-space:pre-wrap; user-select:text; position:relative;
  box-shadow:inset 0 0 0 1px #fff;
}
.script-block::before{
  content:""; position:absolute; top:-6px; left:16px; width:54px; height:12px;
  background:#fff; border:1px solid #ececf1; border-bottom:none; border-radius:8px 8px 0 0;
}

.dlg-f{
  padding:10px 18px 18px; display:flex; gap:10px; justify-content:flex-end; align-items:center;
}
.dlg-f .btn{
  border:1px solid #ffd0e6; background:#fff; color:var(--ink);
  border-radius:10px; padding:10px 14px; font:700 13px/1 Inter,system-ui,sans-serif; cursor:pointer;
  transition: transform .18s, box-shadow .18s, background-color .18s, color .18s, border-color .18s;
}
.dlg-f .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(236,59,131,.12) }
.dlg-f .btn.primary{ background:var(--accent); color:#fff; border-color:transparent }
.dlg-f .btn.ghost{ background:#fff; color:var(--accent) }

/* Copy success + micro FX */
.btn.success{ background:#22c55e !important; border-color:transparent !important; color:#fff !important }
.script-block.flash{
  animation: flash 600ms ease; outline:2px solid #ffd0e6; outline-offset:2px;
}
@keyframes flash{ 0%{ box-shadow:0 0 0 0 rgba(236,59,131,.35) } 100%{ box-shadow:0 0 0 12px rgba(236,59,131,0) } }
.confetti{
  position:absolute; pointer-events:none; width:8px; height:6px;
  background:#fff; border:1px solid #ffd0e6; border-radius:2px; box-shadow:0 1px 0 rgba(236,59,131,.25);
}