/* Shared design system for mecidan-design.github.io
   Type: Geist only (Geist Mono for numerals). Scale: Tailwind steps.
   Spacing: 2 4 8 12 16 24 32 40 48 64 80 96 only.
   Motion: cubic-bezier(0.32,0.72,0,1) at 700ms or longer. */

:root{
  --bg:#000000;
  --surface:#181818;
  --raised:#1F1F1F;
  --line:#272727;
  --line-strong:#313131;
  --ink:#FFFFFF;
  --muted:#9B9B9B;
  --accent:#8FC7FF;
  --gold:#E8C77A;
  --violet:#C9A0FF;
  --ease:cubic-bezier(0.32,0.72,0,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);scroll-padding-top:96px}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif;
  font-size:1rem;line-height:1.5rem;font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
body.menu-open{overflow:hidden}
main{flex:1}
em{font-style:normal;font-weight:500;color:var(--ink)}
a{color:inherit}
h1,h2,h3{text-wrap:balance;font-weight:600}
p,li,summary{text-wrap:pretty}
img,svg,canvas{display:block;max-width:100%}
ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{width:100%;max-width:1024px;margin-inline:auto;padding-inline:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* skip link */
.skip{
  position:fixed;top:8px;left:8px;z-index:100;
  padding:8px 12px;border-radius:8px;background:var(--ink);color:var(--bg);
  font-size:.875rem;line-height:1.25rem;font-weight:600;text-decoration:none;
  transform:translateY(-200%);transition:transform 700ms var(--ease);
}
.skip:focus{transform:none}

/* ---------- type ---------- */
.eyebrow{
  font-size:.875rem;line-height:1.25rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}
.display{
  font-size:2.25rem;line-height:2.5rem;letter-spacing:-.025em;
  max-width:680px;
  background:linear-gradient(to right,#FFFFFF,#9B9B9B);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.sub{font-size:1.125rem;line-height:1.75rem;color:var(--muted);max-width:680px}
.h2{font-size:1.875rem;line-height:2.25rem;letter-spacing:-.02em;max-width:680px}
.h3{font-size:1.25rem;line-height:1.75rem;letter-spacing:-.01em}
.muted{color:var(--muted)}
.small{font-size:.875rem;line-height:1.25rem}
.mono{font-family:"Geist Mono",ui-monospace,monospace}
@media(min-width:768px){
  .display{font-size:3rem;line-height:1}
  .h2{font-size:2.25rem;line-height:2.5rem}
}
@media(min-width:1024px){
  .display{font-size:3.75rem;line-height:1}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 12px;border-radius:9999px;border:0;cursor:pointer;
  font:600 1rem/1.5rem "Geist",ui-sans-serif,system-ui,sans-serif;text-decoration:none;
  transition:all 700ms var(--ease);
}
.btn.sm{font-size:.875rem;line-height:1.25rem}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:#D9D9D9;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-ghost:hover{background:var(--raised);transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn i{font-size:1.25rem;line-height:1}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- floating island nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:center;margin-top:24px;padding-inline:16px;
  pointer-events:none;
}
.pill{
  pointer-events:auto;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:100%;margin-inline:auto;
  padding:8px 8px 8px 16px;border-radius:9999px;
  border:1px solid var(--line-strong);
  background:rgba(24,24,24,.6);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
}
.brand{
  font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--ink);
  text-decoration:none;white-space:nowrap;border-radius:9999px;
}
.menu-btn{
  position:relative;width:40px;height:40px;border-radius:9999px;border:0;cursor:pointer;
  background:var(--raised);color:var(--ink);flex:none;
  transition:all 700ms var(--ease);
}
.menu-btn:hover{background:var(--line-strong)}
.menu-btn:active{transform:scale(.98)}
.menu-btn span{
  position:absolute;left:12px;top:19px;width:16px;height:2px;border-radius:2px;background:currentColor;
  transition:all 700ms var(--ease);
}
.menu-btn span:nth-child(1){transform:translateY(-4px)}
.menu-btn span:nth-child(2){transform:translateY(4px)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}

.lang{display:flex;gap:2px;padding:2px;border-radius:9999px;background:var(--bg);border:1px solid var(--line)}
.lang button{
  appearance:none;border:0;cursor:pointer;background:transparent;color:var(--muted);
  font:600 .875rem/1.25rem "Geist",ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;
  padding:8px 12px;border-radius:9999px;transition:all 700ms var(--ease);
}
.lang button:hover{color:var(--ink)}
.lang button:active{transform:scale(.98)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.menu{
  position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);
  opacity:0;visibility:hidden;
  transition:opacity 700ms var(--ease),visibility 0s linear 700ms;
}
.menu.open{opacity:1;visibility:visible;transition-delay:0s}
.menu ul{display:flex;flex-direction:column;gap:8px;padding-inline:24px;width:100%;max-width:680px}
.menu li{overflow:hidden;padding-block:4px}
.menu a{
  display:flex;align-items:baseline;gap:12px;
  font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-.025em;
  color:var(--muted);text-decoration:none;
  transform:translateY(48px);opacity:0;
  transition:all 700ms var(--ease);
}
.menu.open a{transform:translateY(0);opacity:1}
.menu.open li:nth-child(1) a{transition-delay:100ms}
.menu.open li:nth-child(2) a{transition-delay:150ms}
.menu.open li:nth-child(3) a{transition-delay:200ms}
.menu.open li:nth-child(4) a{transition-delay:250ms}
.menu.open li:nth-child(5) a{transition-delay:300ms}
.menu.open li:nth-child(6) a{transition-delay:350ms}
.menu a:hover,.menu a:focus-visible{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink)}
.menu a[aria-current="page"]::after{
  content:"";width:8px;height:8px;border-radius:9999px;background:var(--accent);align-self:center;
}
@media(min-width:768px){.menu a{font-size:3rem;line-height:1}}

/* ---------- scroll reveal ---------- */
html.js .rv{
  opacity:0;transform:translateY(64px);filter:blur(12px);
  transition:all 900ms var(--ease);
}
html.js .rv.in{opacity:1;transform:none;filter:blur(0)}
html.js .rv.done{transition-delay:0ms !important}

/* ---------- sections ---------- */
.sec{padding-block:64px}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.hero{padding-top:96px;padding-bottom:64px}
.hero-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.actions{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:768px){
  .sec{padding-block:96px}
  .hero{padding-bottom:96px}
}

/* proof stats */
.stats{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:8px}
.stat{display:flex;align-items:baseline;gap:8px}
.stat b{font-family:"Geist Mono",ui-monospace,monospace;font-size:1.5rem;line-height:2rem;font-weight:500;color:var(--ink)}
.stat span{font-size:.875rem;line-height:1.25rem;color:var(--muted);max-width:24ch}

/* cards */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
}
.grid2,.grid3{display:grid;gap:16px}
@media(min-width:768px){
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.pad{padding:24px}
.icon-box{
  width:40px;height:40px;border-radius:8px;background:var(--raised);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  font-size:1.5rem;line-height:1;margin-bottom:16px;
}
.card .h3{margin-bottom:8px}
.card p{color:var(--muted)}
.card p b{color:var(--ink);font-weight:600}
.num{font-family:"Geist Mono",ui-monospace,monospace;font-size:.875rem;line-height:1.25rem;color:var(--accent);margin-bottom:16px;display:block}

/* hero staircase figure */
.stairs{margin-top:48px;padding:24px;border-radius:16px}
.stairs svg{width:100%;height:auto;overflow:visible}
.stairs .path{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2400ms var(--ease);
}
.stairs .ghost{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 8}
.stairs.go .path{stroke-dashoffset:0}
.stairs .dot{fill:var(--ink);opacity:0;transition:opacity 900ms var(--ease) 1800ms}
.stairs.go .dot{opacity:1}
.stairs .pulse{fill:none;stroke:var(--ink);stroke-width:1;opacity:0}
.stairs.go .pulse{animation:pulse 3000ms var(--ease) 2400ms infinite}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.5)}}
.stairs .pulse{transform-box:fill-box;transform-origin:center}
.legend{display:flex;justify-content:space-between;gap:16px;margin-top:16px;flex-wrap:wrap}
.legend span{font-size:.875rem;line-height:1.25rem;color:var(--muted)}
.legend b{color:var(--ink);font-weight:600}

/* ---------- tagline reveal ---------- */
.tagline{padding-block:96px;border-block:1px solid var(--line)}
.tagline p{
  font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-.025em;
  max-width:680px;
}
@media(min-width:768px){.tagline p{font-size:3rem;line-height:1}}
.w{color:rgba(255,255,255,.3);transition:color 900ms var(--ease)}
.w.on{color:var(--ink)}

/* ---------- work cards ---------- */
.works{display:flex;flex-direction:column;gap:24px}
.work{padding:8px}
.media{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:var(--raised);width:100%}
.media::before{
  content:"";position:absolute;inset:0;background:var(--line);
  animation:skel 2400ms var(--ease) infinite;
}
@keyframes skel{0%,100%{opacity:.35}50%{opacity:.75}}
.media iframe{position:absolute;top:0;left:0;width:1280px;height:720px;border:0;background:var(--bg);transform-origin:top left;pointer-events:none}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg)}
.media .cover{position:absolute;inset:0;z-index:2;border-radius:8px}
.work-body{padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.claim{font-size:1.125rem;line-height:1.75rem;font-weight:500;color:var(--accent);max-width:42ch}
.work-body p.desc{color:var(--muted);max-width:60ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:.75rem;line-height:1rem;font-weight:500;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:6px;padding:4px 8px;
}
@media(min-width:900px){
  .work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
}

/* ---------- link tiles (philosophy page) ---------- */
.tile{
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:24px;text-decoration:none;color:inherit;
  transition:all 700ms var(--ease);
}
.tile:hover,.tile:focus-visible{border-color:var(--accent);background:var(--raised)}
html.js .tile.in:hover{transform:translateY(-4px)}
.tile:active{transform:scale(.98)}
.tile.flag{grid-column:1 / -1}
.tile .label{font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:block}
.tile h3{margin-bottom:8px}
.tile p{font-size:.875rem;line-height:1.25rem;color:var(--muted)}
.open{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--accent)}
.open i{font-size:1.25rem;transition:all 700ms var(--ease)}
.tile:hover .open i{transform:translate(4px,-4px)}
.tile.gold:hover{border-color:var(--gold)}
.tile.gold .open{color:var(--gold)}
.tile.violet:hover{border-color:var(--violet)}
.tile.violet .open{color:var(--violet)}
@media(max-width:767px){.tile.flag{grid-column:auto}}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:8px;max-width:680px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;transition:all 700ms var(--ease)}
.faq details[open]{border-color:var(--line-strong);background:var(--raised)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px;font-size:1rem;line-height:1.5rem;font-weight:600;border-radius:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;font-size:1.25rem;color:var(--muted);transition:all 700ms var(--ease)}
.faq details[open] summary i{transform:rotate(45deg);color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq .ans{padding:0 16px 16px;color:var(--muted)}

/* ---------- final cta ---------- */
.cta{padding:32px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.cta .status{min-height:1.25rem;font-size:.875rem;line-height:1.25rem;color:var(--muted)}
.cta .status.err{color:#FF9B8F}
@media(min-width:768px){.cta{padding:64px}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:48px}
.foot-in{display:flex;flex-direction:column;gap:24px}
.foot nav ul{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{font-size:.875rem;line-height:1.25rem;color:var(--muted);text-decoration:none;transition:all 700ms var(--ease)}
.foot a:hover,.foot a:focus-visible{color:var(--ink)}
.foot a[aria-current="page"]{color:var(--ink)}
.foot .copyright{font-size:.875rem;line-height:1.25rem;color:var(--muted)}

/* ---------- legal / 404 ---------- */
.prose{max-width:680px;padding-top:96px;padding-bottom:96px;display:flex;flex-direction:column;gap:16px}
.prose h2{font-size:1.5rem;line-height:2rem;letter-spacing:-.01em;margin-top:32px}
.prose p,.prose li{color:var(--muted)}
.prose ul{list-style:disc;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.prose a{color:var(--accent)}
.err404{min-height:80vh;display:flex;flex-direction:column;justify-content:center;gap:24px;align-items:flex-start;padding-top:96px;padding-bottom:96px}
.err404 .code{font-family:"Geist Mono",ui-monospace,monospace;font-size:3.75rem;line-height:1;color:var(--accent);font-weight:500}

@media(max-width:560px){
  .wrap{padding-inline:16px}
  .brand{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;transition-delay:0ms !important}
  html.js .rv{opacity:1;transform:none;filter:none}
  .w{color:var(--ink)}
  .stairs .path{stroke-dashoffset:0}
  .stairs .dot{opacity:1}
}

/* ---------- language switch: hide the other language ---------- */
html[data-lang="en"] [data-l="es"],
html[data-lang="es"] [data-l="en"]{display:none !important}
@media(max-width:420px){.pill .brand{display:none}}