/* ============================================================
   LOOP — Multi-brand loyalty app · Case study
   system.css · design tokens, layout, narrative sections
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --bg-soft:#F6F5F2;
  --bg-card:#FFFFFF;
  --ink:#0D0D0F;
  --slate:#6E6E73;
  --slate-soft:#A6A6AB;
  --border:#ECEAE5;
  --border-soft:#F4F2EE;
  --accent:#7B0593;
  --accent-hover:#67047B;
  --accent-soft:#F4E9FA;
  --accent-bright:#C77DFF;
  --surface-dark:#0D0D0F;
  --text-on-dark:#F6F5F2;

  --radius:16px;
  --radius-sm:12px;
  --radius-lg:22px;
  --pill:999px;

  --sh-sm:0 1px 2px rgba(13,13,13,.04), 0 2px 8px rgba(13,13,13,.04);
  --sh:0 8px 30px rgba(13,13,13,.06);
  --sh-lg:0 18px 50px rgba(13,13,13,.10), 0 6px 18px rgba(13,13,13,.05);

  --font-display:'Hanken Grotesk', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:'Spline Sans Mono', ui-monospace, monospace;

  --maxw:1140px;
  --pad-x:clamp(22px, 5vw, 56px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* spacing scale — 4px base grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#fff;}

img{max-width:100%; display:block;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:72px; display:flex; align-items:center;
  background:color-mix(in srgb, #FFFFFF 72%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.nav__inner{
  width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo{
  font-family:var(--font-display); font-weight:800; font-size:18px;
  letter-spacing:-.02em; color:var(--ink); white-space:nowrap;
}
.nav__mark{
  width:24px; height:24px; flex:none; position:relative;
  display:grid; place-items:center;
}
.nav__mark svg{width:24px; height:24px; display:block;}
.nav__right{display:flex; align-items:center; gap:30px;}
.nav__links{
  display:flex; align-items:center; gap:28px; list-style:none;
}
.nav__links a{
  font-family:var(--font-body); font-size:15px; font-weight:500;
  color:var(--ink); display:inline-flex; align-items:center; gap:7px;
  transition:color .25s var(--ease);
}
.nav__links a:hover{color:var(--accent);}
.nav__back .arrow{display:inline-block; transition:transform .25s var(--ease);}
.nav__back:hover .arrow{transform:translateX(-3px);}
.lang{
  display:inline-flex; align-items:center; gap:2px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.06em;
  border:1px solid var(--border); border-radius:var(--pill); padding:3px;
}
.lang button{
  background:none; border:none; color:var(--slate); font:inherit;
  padding:4px 10px; border-radius:var(--pill); cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.lang button.active{background:var(--accent); color:#fff;}

@media (max-width:680px){
  .nav__links{gap:18px;}
  .nav__inner{gap:14px;}
}
@media (max-width:560px){
  .nav__back span:last-child{display:none;}
}

/* ============================================================
   SECTION TABS (sticky shortcuts — like the Cocos case)
   ============================================================ */
.topbar{
  position:sticky; top:72px; z-index:100;
  background:color-mix(in srgb, #FFFFFF 82%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.topbar-in{
  max-width:var(--maxw); margin:0 auto; padding:11px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.topbar-mark{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-family:var(--font-display); font-weight:800; font-size:17px;
  letter-spacing:-.02em; color:var(--ink);
}
.topbar-mark .nav__mark{width:20px; height:20px;}
.topbar-mark .nav__mark svg{width:20px; height:20px;}
.secnav{display:flex; align-items:center; gap:2px;}
.secnav a{
  font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--slate);
  padding:7px 11px; border-radius:8px; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.secnav a .sn-num{color:var(--slate-soft); font-size:11px;}
.secnav a:hover{color:var(--ink); background:var(--accent-soft);}
.secnav a.active{color:var(--accent); background:var(--accent-soft);}
.secnav a.active .sn-num{color:var(--accent);}

@media (max-width:1080px){
  .topbar-in{justify-content:flex-start; gap:18px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
  .topbar-in::-webkit-scrollbar{display:none;}
}
@media (max-width:680px){
  .topbar-mark span:last-child{display:none;}
}

/* ============================================================
   LAYOUT SCAFFOLD
   ============================================================ */
.case{padding-top:72px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);}
.block{padding:116px 0;}
.block-tight{padding:92px 0;}

.hr-soft{height:1px; background:var(--border); max-width:var(--maxw); margin:0 auto;}

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; color:var(--slate);
}
.eyebrow .num{color:var(--accent); font-weight:600;}
.eyebrow .bar{width:28px; height:2px; background:var(--accent); border-radius:2px;}

.section-head{max-width:740px; margin-bottom:56px;}
.section-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px, 5vw, 48px); line-height:1.06; letter-spacing:-.03em;
  margin:20px 0 0; text-wrap:balance;
}
.section-lead{
  font-size:clamp(17px,2vw,19px); line-height:1.6; color:var(--slate);
  margin:20px 0 0; max-width:660px; text-wrap:pretty;
}
.section-lead b{color:var(--ink); font-weight:600;}
.accent{color:var(--accent);}

/* fade-up reveal */
.fade-up{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.fade-up.in{opacity:1; transform:translateY(0);}
.fade-up.d1{transition-delay:.06s;}
.fade-up.d2{transition-delay:.12s;}
.fade-up.d3{transition-delay:.18s;}

/* ============================================================
   01 · THE BRIEF (hero)
   ============================================================ */
.case-hero{padding:104px 0 96px;}
.hero-eyebrow{margin-bottom:30px;}
.case-hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(44px, 8vw, 78px); line-height:1.02; letter-spacing:-.035em;
  margin:0; max-width:15ch; text-wrap:balance;
}
.case-hero h1 .grad{
  background:linear-gradient(100deg, var(--accent), #C77DFF);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.case-hero .challenge{
  font-size:clamp(18px,2.2vw,21px); line-height:1.6; color:var(--slate);
  max-width:620px; margin:28px 0 0; text-wrap:pretty;
}
.case-hero .challenge b{color:var(--ink); font-weight:600;}
.case-hero .impact-line{margin:30px 0 0; max-width:620px;}
.case-hero .impact-line .ik{display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); font-weight:600; margin-bottom:11px;}
.case-hero .impact-line .iv{display:block; font-size:21px; font-weight:700; line-height:1.4; letter-spacing:-.015em; color:var(--ink); text-wrap:balance;}
.case-hero .impact-line .iv b{color:var(--accent); font-weight:700;}

.hero-pills{display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 0;}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--ink);
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--pill);
  padding:9px 16px; box-shadow:var(--sh-sm);
}
.tag .pip{width:7px; height:7px; border-radius:50%; background:var(--accent);}

.meta-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; margin:54px 0 0; box-shadow:var(--sh-sm);
}
.meta-item{background:var(--bg-card); padding:22px 24px;}
.meta-item .k{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--slate-soft); margin-bottom:9px;
}
.meta-item .v{font-size:15px; font-weight:600; color:var(--ink); line-height:1.4;}

.brief-callout{
  margin:48px 0 0; padding:28px 32px;
  background:var(--surface-dark); color:var(--text-on-dark); border-radius:var(--radius);
  box-shadow:var(--sh-lg); position:relative; overflow:hidden;
}
.brief-callout::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent-bright);
}
.brief-callout .bc-k{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--accent-bright); margin-bottom:12px;
}
.brief-callout p{font-size:18px; line-height:1.55; font-weight:500; max-width:62ch; text-wrap:pretty;}
.brief-callout p b{color:#fff; font-weight:700;}

@media (max-width:820px){ .meta-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .meta-grid{grid-template-columns:1fr;} }

/* ============================================================
   02 · USER PERSONA
   ============================================================ */
.persona{
  display:grid; grid-template-columns:300px 1fr; gap:0;
  background:var(--surface-dark); color:var(--text-on-dark);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--sh-lg);
}
.persona-left{
  padding:42px 36px; display:flex; flex-direction:column; gap:22px;
  border-right:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(199,125,255,.12), transparent 60%);
}
.persona-avatar{
  width:104px; height:104px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:42px;
  border:2px solid var(--accent);
}
.persona-id .pname{font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:-.02em; line-height:1;}
.persona-id .pmeta{font-family:var(--font-mono); font-size:12px; color:var(--accent-bright); margin-top:10px; letter-spacing:.06em;}
.persona-quote{
  margin-top:auto; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:18px; line-height:1.4; font-style:italic; color:#fff; text-wrap:pretty;
  position:relative;
}
.persona-quote::before{
  content:"\201C"; font-family:Georgia,serif; font-size:64px; line-height:0;
  color:var(--accent-bright); position:absolute; top:30px; left:-4px; opacity:.6;
}
.persona-quote span{position:relative;}

.persona-right{padding:42px 40px; display:grid; grid-template-columns:1fr 1fr; gap:34px;}
.persona-block .pb-k{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--accent-bright); margin-bottom:16px;
  display:flex; align-items:center; gap:9px;
}
.persona-block .pb-k svg{width:15px; height:15px; flex:none;}
.persona-block.full{grid-column:1 / -1; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.1);}
.persona-block p{font-size:15px; line-height:1.6; color:#C9C9CE;}
.persona-list{display:flex; flex-direction:column; gap:13px;}
.persona-list li{
  list-style:none; display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; line-height:1.45; color:#D8D8DC;
}
.persona-list li .li-ico{
  width:22px; height:22px; flex:none; border-radius:7px; margin-top:1px;
  display:grid; place-items:center; background:rgba(199,125,255,.16); color:var(--accent-bright);
}
.persona-list li .li-ico svg{width:13px; height:13px;}
.persona-list.frust li .li-ico{background:rgba(255,255,255,.08); color:#fff;}

@media (max-width:880px){
  .persona{grid-template-columns:1fr;}
  .persona-left{border-right:none; border-bottom:1px solid rgba(255,255,255,.08);}
  .persona-quote{margin-top:22px;}
}
@media (max-width:560px){ .persona-right{grid-template-columns:1fr; gap:26px;} }

/* ============================================================
   03 · BENCHMARKING
   ============================================================ */
.bench{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--bg-card); box-shadow:var(--sh-sm);
}
.bench-row{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  border-bottom:1px solid var(--border);
}
.bench-row:last-child{border-bottom:none;}
.bench-cell{padding:20px 22px; display:flex; align-items:center; gap:10px; min-height:64px;}
.bench-cell + .bench-cell{border-left:1px solid var(--border);}
.bench-row.head .bench-cell{background:var(--bg-soft); align-items:flex-end; min-height:auto; padding:22px;}
.bench-cap{font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.35; text-wrap:pretty;}
.bench-app{
  font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em;
}
.bench-app .sub{display:block; font-family:var(--font-mono); font-size:10px; color:var(--slate-soft); letter-spacing:.04em; font-weight:400; margin-top:4px; text-transform:uppercase;}
.bench-row.head .bench-cell.loop{background:var(--surface-dark);}
.bench-row.head .bench-cell.loop .bench-app{color:#fff; display:inline-flex; align-items:center; gap:8px;}
.bench-cell.loopcol{background:var(--accent-soft);}
.bench-row.head .bench-cell.crit{color:var(--slate); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:500;}

.mk{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;}
.mk svg{width:16px; height:16px;}
.mk.yes{background:var(--accent); color:#fff;}
.mk.part{background:#EDEDED; color:var(--slate);}
.mk.no{background:transparent; color:#D2D2D2;}
.mk-label{font-size:12.5px; color:var(--slate); font-weight:500;}

.bench-note{
  margin-top:28px; padding:26px 30px; border-radius:var(--radius);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  display:flex; gap:18px; align-items:flex-start;
}
.bench-note .bn-ico{
  width:40px; height:40px; flex:none; border-radius:11px; background:var(--accent); color:#fff;
  display:grid; place-items:center;
}
.bench-note .bn-ico svg{width:20px; height:20px;}
.bench-note .bn-k{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-hover); margin-bottom:7px; font-weight:600;}
.bench-note p{font-size:15.5px; line-height:1.55; color:var(--ink); text-wrap:pretty;}
.bench-note p b{font-weight:700;}

.bench-legend{display:flex; gap:24px; margin-top:20px; flex-wrap:wrap;}
.bench-legend span{display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--slate); font-weight:500;}
.bench-legend .mk{width:24px; height:24px;}

@media (max-width:820px){
  .bench{overflow-x:auto;}
  .bench-row{grid-template-columns:1.6fr repeat(4, minmax(96px,1fr)); min-width:680px;}
}

/* ============================================================
   04 · DESIGN DECISIONS
   ============================================================ */
.decisions{display:flex; flex-direction:column; gap:24px;}
.decision{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:42px 44px; box-shadow:var(--sh-sm);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.decision:hover{box-shadow:var(--sh); transform:translateY(-3px);}
.decision.flip .dec-visual{order:-1;}
.dec-num{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--accent);
  letter-spacing:.06em; margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.dec-num .dn-box{
  width:30px; height:30px; border-radius:9px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:13px;
}
.decision h3{font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.02em; line-height:1.1; margin-bottom:14px; text-wrap:balance;}
.decision p{font-size:15.5px; line-height:1.62; color:var(--slate); text-wrap:pretty;}
.decision p .q{color:var(--ink); font-weight:600;}

/* decision visuals */
.dec-visual{
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:34px; min-height:220px;
}

/* visual: points → currency */
.dv-translate{text-align:center;}
.dv-translate .pts{font-family:var(--font-mono); font-size:15px; color:var(--slate); letter-spacing:.04em;}
.dv-translate .arrow{font-size:24px; color:var(--accent); margin:10px 0;}
.dv-translate .dollar{font-family:var(--font-display); font-weight:800; font-size:54px; letter-spacing:-.03em; color:var(--ink); line-height:1;}
.dv-translate .dollar .approx{color:var(--accent);}

/* visual: expiry alert chip */
.dv-expiry{width:100%; max-width:280px;}
.dv-alert{
  background:var(--surface-dark); color:#fff; border-radius:var(--radius); padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start; box-shadow:var(--sh);
}
.dv-alert .da-ico{width:34px; height:34px; flex:none; border-radius:10px; background:var(--accent); display:grid; place-items:center;}
.dv-alert .da-ico svg{width:18px; height:18px;}
.dv-alert .da-t{font-size:14px; font-weight:700; line-height:1.3;}
.dv-alert .da-d{font-size:12px; color:#B5B5BA; margin-top:5px; line-height:1.4;}
.dv-alert .da-d b{color:var(--accent-bright); font-weight:700;}

/* visual: unified tiles */
.dv-tiles{width:100%; display:flex; flex-direction:column; gap:9px;}
.dv-total{font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:-.02em; margin-bottom:6px;}
.dv-total small{font-family:var(--font-mono); font-size:11px; color:var(--slate); font-weight:400; display:block; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px;}
.dv-tile{
  display:flex; align-items:center; gap:12px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 13px;
}
.dv-tile .dvt-logo{width:28px; height:28px; border-radius:8px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:13px; flex:none;}
.dv-tile .dvt-name{font-size:13px; font-weight:600; flex:1;}
.dv-tile .dvt-val{font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--accent);}

/* visual: redemption feed mini */
.dv-feed{width:100%; display:flex; flex-direction:column; gap:9px;}
.dv-redeem{
  display:flex; align-items:center; gap:12px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px;
}
.dv-redeem .dvr-body{flex:1;}
.dv-redeem .dvr-t{font-size:13px; font-weight:600;}
.dv-redeem .dvr-s{font-family:var(--font-mono); font-size:11px; color:var(--slate); margin-top:2px;}
.dv-redeem .dvr-cta{font-size:11px; font-weight:700; color:#fff; background:var(--accent); padding:6px 12px; border-radius:var(--pill);}

@media (max-width:820px){
  .decision, .decision.flip{grid-template-columns:1fr; gap:30px; padding:32px 26px;}
  .decision.flip .dec-visual{order:0;}
}

/* ============================================================
   07 · OUTCOME
   ============================================================ */
.outcome{background:var(--bg); color:var(--ink);}
.outcome .eyebrow{color:var(--slate);}
.outcome .section-title{color:var(--ink);}
.outcome .section-lead{color:var(--slate);}
.outcome .section-lead b{color:var(--ink);}

.deliverables{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:14px 0 48px;
}
.deliv{
  background:var(--bg-soft); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px 20px;
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.deliv:hover{background:#fff; transform:translateY(-3px); box-shadow:var(--sh-sm);}
.deliv .dl-ico{width:38px; height:38px; border-radius:11px; background:var(--accent); color:#fff; display:grid; place-items:center; margin-bottom:16px;}
.deliv .dl-ico svg{width:19px; height:19px;}
.deliv .dl-t{font-size:14.5px; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:var(--ink);}
.deliv .dl-d{font-size:12.5px; color:var(--slate); margin-top:7px; line-height:1.45;}

.next-step{
  display:flex; gap:20px; align-items:flex-start;
  background:rgba(199,125,255,.1); border:1px solid rgba(199,125,255,.26);
  border-radius:var(--radius); padding:28px 32px;
}
.next-step .ns-ico{width:42px; height:42px; flex:none; border-radius:12px; background:var(--accent); color:#fff; display:grid; place-items:center;}
.next-step .ns-ico svg{width:21px; height:21px;}
.next-step .ns-k{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); margin-bottom:8px; font-weight:600;}
.next-step p{font-size:16px; line-height:1.55; color:var(--slate); text-wrap:pretty; max-width:64ch;}
.next-step p b{color:var(--ink); font-weight:700;}

@media (max-width:880px){ .deliverables{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .deliverables{grid-template-columns:1fr;} }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--surface-dark); color:#fff; padding:64px 0 56px;
  border-top:1px solid rgba(255,255,255,.08);
}
.foot .wrap{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;}
.foot__mark{display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-.02em;}
.foot__mark svg{width:30px; height:30px;}
.foot p{font-size:14px; color:#8A8A90; max-width:480px; line-height:1.6;}
.foot .foot-tag{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:#6E6E73;}
.foot a{color:#FFFFFF; font-weight:600;}

/* closing metric cards — matches Cocos / Luna / Despegar */
.ba-metrics-block{padding-top:0;}
.ba-mlabel{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-soft);}
.ba-metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.ba-metric{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--sh-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.ba-metric:hover{transform:translateY(-4px); box-shadow:var(--sh);}
.ba-metric .bm-k{font-size:13px; color:var(--slate); font-weight:600; line-height:1.4; margin-bottom:16px; min-height:36px;}
.ba-metric .bm-row{display:flex; align-items:center; gap:12px;}
.ba-metric .bm-before{font-family:var(--font-mono); font-size:2rem; font-weight:500; color:#C9C4CF; line-height:1;}
.ba-metric .bm-arrow{font-family:var(--font-mono); font-size:1.5rem; font-weight:500; color:#C9C4CF;}
.ba-metric .bm-after{font-family:var(--font-mono); font-size:3rem; font-weight:700; letter-spacing:-.03em; color:var(--accent); line-height:1;}
@media (max-width:880px){ .ba-metrics{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .ba-metrics{grid-template-columns:1fr;} }

/* AI process — dark panel (matches Cocos / Luna / Despegar) */
.ia-section{background:linear-gradient(160deg,#2E0537,#150019); color:#fff; border-radius:var(--radius-lg); padding:80px 70px; position:relative; overflow:hidden;}
.ia-section::before{content:""; position:absolute; right:-80px; bottom:-80px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(199,125,255,.22), transparent 65%);}
.ia-section .eyebrow{color:#9A9AA0; position:relative;}
.ia-section .eyebrow .num{color:var(--accent-bright);}
.ia-section h2{font-family:var(--font-display); font-size:clamp(30px,3.4vw,40px); font-weight:800; letter-spacing:-.025em; line-height:1.08; margin:20px 0 0; color:#fff; position:relative;}
.ia-lead{font-size:18px; color:#B5B5BA; line-height:1.6; max-width:64ch; margin:18px 0 0; position:relative;}
.ia-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:54px; position:relative;}
.ia-step{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:26px 24px; position:relative;}
.ia-step .istep-n{font-family:var(--font-mono); font-size:12px; color:var(--accent-bright); font-weight:600; letter-spacing:.1em; margin-bottom:16px;}
.ia-step .istep-ic{width:42px; height:42px; border-radius:12px; background:rgba(199,125,255,.16); display:flex; align-items:center; justify-content:center; color:var(--accent-bright); margin-bottom:16px;}
.ia-step .istep-ic svg{width:21px; height:21px;}
.ia-step h4{font-family:var(--font-display); font-size:17px; letter-spacing:-.02em; margin-bottom:9px; color:#fff;}
.ia-step p{font-size:13.5px; color:rgba(255,255,255,.68); line-height:1.55;}
.ia-step .istep-tool{margin-top:14px; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:7px;}
.ia-step .istep-tool .tp{width:5px; height:5px; border-radius:50%; background:var(--accent-bright);}
@media (max-width:1080px){ .ia-steps{grid-template-columns:repeat(2,1fr);} .ia-section{padding:56px 38px;} }
@media (max-width:560px){ .ia-steps{grid-template-columns:1fr;} }

/* ============================================================
   REDUCED MOTION + NO-ANIM FALLBACK
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .fade-up{opacity:1 !important; transform:none !important;}
}
body.no-anim .fade-up{opacity:1 !important; transform:none !important; transition:none !important;}