/* ————————————————————————————————————————————
   Pekdemir Labs — pekdemirlabs.com
   Implemented from "Pekdemir Labs Modern Redesign"
   (Claude Design · Pekdemir Labs.dc.html)
   ———————————————————————————————————————————— */

/* ——— Self-hosted fonts (no third-party requests) ——— */

@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/bricolage-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:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/bricolage-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 500;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-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:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-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;
}

/* ——— Tokens ——— */

:root{
  color-scheme:dark;
  --bg:#100E0D; --bg-2:#17130F;
  --surface:rgba(244,242,239,.045); --surface-2:rgba(244,242,239,.022);
  --line:rgba(244,242,239,.12); --line-2:rgba(244,242,239,.06);
  --text:#F4F2EF; --text-dim:#CEC7C0; --muted:#948C85;
  --accent:#E9A94E; --accent-ink:#231A0C;
  --shadow:0 34px 70px -30px rgba(0,0,0,.7);

  --c-hazne:#C6841F;
  --c-duskframe:#8B62E8;
  --c-petroglyphica-lab:#C6572F;
  --c-tap-counter:#16A093;
  --c-leather-pattern-house:#97633A;
  --c-readyloop:#4E7BE8;

  --font-display:'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FAF9F7; --bg-2:#FFFFFF;
  --surface:rgba(28,25,23,.03); --surface-2:rgba(28,25,23,.016);
  --line:rgba(28,25,23,.12); --line-2:rgba(28,25,23,.06);
  --text:#1B1815; --text-dim:#4B453F; --muted:#736A62;
  --accent:#B45309; --accent-ink:#FFFFFF;
  --shadow:0 34px 70px -34px rgba(28,20,10,.24);
}

/* ——— Base ——— */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

main{ flex:1; width:100%; }

.container{ max-width:1120px; margin-inline:auto; padding-inline:24px; width:100%; }
.container-app{ max-width:1000px; margin-inline:auto; padding-inline:24px; width:100%; }
.container-prose{ max-width:760px; margin-inline:auto; padding-inline:24px; width:100%; }

::selection{ background:var(--accent); color:var(--accent-ink); }

a{ color:var(--accent); text-decoration:none; }

img{ max-width:100%; height:auto; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.mono{ font-family:var(--font-mono); }

.kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.kicker-accent{ color:var(--accent); }

/* ——— Keyframes ——— */

@keyframes riseIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-16px) rotate(var(--r,0deg)); } }
@keyframes drift{
  0%,100%{ transform:translate(calc(var(--ox,0px) + var(--mx,0px)), var(--my,0px)) scale(1); }
  50%{ transform:translate(calc(var(--ox,0px) + var(--mx,0px) + 26px), calc(var(--my,0px) - 22px)) scale(1.06); }
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes glow{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

[data-anim]{ animation:riseIn .7s both; }

/* ——— Header ——— */

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:color-mix(in oklab, var(--bg) 74%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line);
}

.hdr-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:13px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--text);
}

/* Full logo (figure + wordmark) recolored to the theme via CSS mask */
.brand-logo{
  display:block;
  background:var(--accent);
  -webkit-mask-image:url('../brand/logo-full.svg');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url('../brand/logo-full.svg');
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.brand-logo-hdr{ width:121px; height:36px; }
.brand-logo-ftr{ width:107px; height:32px; }
.brand-logo-404{ width:241px; height:72px; }

.nav-mid{ display:flex; gap:28px; align-items:center; }
.nav-mid a{ font-size:14px; color:var(--muted); transition:color .2s ease; }
.nav-mid a:hover{ color:var(--text); }

.hdr-right{ display:flex; align-items:center; gap:10px; }

.hdr-contact{
  font-size:13.5px;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 15px;
  transition:border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.hdr-contact:hover{ border-color:var(--accent); color:var(--accent); }

.theme-toggle{
  width:38px; height:38px;
  border-radius:11px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:border-color .2s ease, background .2s ease;
  padding:0;
}
.theme-toggle:hover{ border-color:var(--accent); }

.ic-sun{ display:inline-flex; }
.ic-moon{ display:none; }
:root[data-theme="light"] .ic-sun{ display:none; }
:root[data-theme="light"] .ic-moon{ display:inline-flex; }

/* ——— Buttons ——— */

.btn-accent{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--accent);
  color:var(--accent-ink);
  padding:14px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-accent:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -14px var(--accent);
  filter:brightness(1.04);
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  padding:14px 22px;
  border-radius:999px;
  font-weight:500;
  font-size:15px;
  transition:border-color .25s ease, color .25s ease;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ——— Hero ——— */

.hero{ padding-block:clamp(44px,7vw,88px) clamp(28px,4vw,44px); }

.hero-cols{ display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,60px); align-items:center; }
.hero-copy{ flex:1 1 430px; min-width:300px; }

.hero-kicker{ display:flex; align-items:center; gap:10px; }
.hero-kicker::before{ content:""; width:22px; height:1px; background:var(--muted); display:inline-block; }

h1.display{
  margin-top:20px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.5rem,6.2vw,4.6rem);
  line-height:1.02;
  letter-spacing:-.032em;
  text-wrap:balance;
}
h1.display em{ font-style:normal; color:var(--accent); }

.hero-lede{
  margin-top:22px;
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.6;
  color:var(--text-dim);
  max-width:36rem;
  text-wrap:pretty;
}

.hero-ctas{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }

.hero-tags{
  margin-top:26px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
}

/* Floating app cluster */

.hero-cluster{
  flex:1 1 380px;
  min-width:300px;
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.blob{
  position:absolute;
  background:radial-gradient(circle at 50% 46%, color-mix(in oklab, var(--accent) 40%, transparent), transparent 68%);
  filter:blur(30px);
  animation:drift 16s ease-in-out infinite;
  pointer-events:none;
}

/* Extra fog layers — counter-parallax against the mouse offset (--mx/--my set by site.js) */
.blob::before,
.blob::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.blob::before{
  background:radial-gradient(circle at 32% 62%, color-mix(in oklab, var(--fog-2, #8B62E8) 16%, transparent), transparent 60%);
  transform:translate(calc(var(--mx,0px) * -0.55), calc(var(--my,0px) * -0.55)) scale(1.15);
}
.blob::after{
  background:radial-gradient(circle at 68% 32%, color-mix(in oklab, var(--fog-3, #C6572F) 14%, transparent), transparent 56%);
  transform:translate(calc(var(--mx,0px) * 0.5), calc(var(--my,0px) * 0.5)) scale(1.08);
}

.cluster-blob{ inset:8% 12%; --fog-2:#8B62E8; --fog-3:#C6572F; }

.tile{
  position:absolute;
  border-radius:27%;
  border:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:800;
  color:#fff;
  animation:floaty 6s ease-in-out infinite;
  transition:filter .3s ease, transform .3s ease;
}
.tile:hover{
  animation-play-state:paused;
  transform:scale(1.06) rotate(var(--r,0deg));
  filter:brightness(1.08) saturate(1.08);
}

.tl-hazne{ --r:-5deg; top:2%; left:5%; width:106px; height:106px; font-size:44px; z-index:2; background:var(--c-hazne); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 22px 38px -14px #C6841Fbb; animation-duration:5.6s; }
.tl-duskframe{ --r:5deg; top:5%; right:5%; width:90px; height:90px; font-size:37px; background:var(--c-duskframe); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 20px 34px -14px #8B62E8bb; animation-duration:6.2s; animation-delay:.5s; }
.tl-petroglyphica-lab{ --r:-2deg; top:30%; left:30%; width:122px; height:122px; font-size:50px; z-index:3; background:var(--c-petroglyphica-lab); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 26px 46px -16px #C6572Fbb; animation-duration:5.2s; animation-delay:.25s; }
.tl-readyloop{ --r:7deg; top:39%; right:2%; width:86px; height:86px; font-size:35px; background:var(--c-readyloop); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 20px 34px -14px #4E7BE8bb; animation-duration:6.6s; animation-delay:.8s; }
.tl-tap-counter{ --r:5deg; top:57%; left:3%; width:80px; height:80px; font-size:33px; background:var(--c-tap-counter); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 20px 34px -14px #16A093bb; animation-duration:6s; animation-delay:.65s; }
.tl-leather-pattern-house{ --r:-4deg; bottom:3%; left:42%; width:84px; height:84px; font-size:34px; background:var(--c-leather-pattern-house); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 20px 34px -14px #97633Abb; animation-duration:5.8s; animation-delay:1s; }

/* ——— Marquee ——— */

.marquee{
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  background:var(--surface-2);
  overflow:hidden;
  padding:15px 0;
  margin-top:8px;
}
.marquee-track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:marquee 34s linear infinite;
}
.marquee-track span{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ——— Sections ——— */

.section{ padding-block:clamp(52px,8vw,96px); }

.sec-head{ max-width:40rem; }
.sec-head h2{
  margin-top:14px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.9rem,4vw,2.9rem);
  letter-spacing:-.028em;
  line-height:1.08;
}
.sec-head p{
  margin-top:14px;
  color:var(--text-dim);
  font-size:1.05rem;
  line-height:1.6;
  text-wrap:pretty;
}

/* ——— App cards ——— */

.apps-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:16px;
}

.app-card{
  text-align:left;
  cursor:pointer;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px 22px 20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:212px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.app-card:hover{
  transform:translateY(-6px);
  background:var(--bg-2);
  border-color:var(--app-c);
  box-shadow:0 26px 46px -24px var(--app-glow);
}

.card-hazne{ --app-c:var(--c-hazne); --app-glow:#C6841F80; }
.card-duskframe{ --app-c:var(--c-duskframe); --app-glow:#8B62E880; }
.card-petroglyphica-lab{ --app-c:var(--c-petroglyphica-lab); --app-glow:#C6572F80; }
.card-tap-counter{ --app-c:var(--c-tap-counter); --app-glow:#16A09380; }
.card-leather-pattern-house{ --app-c:var(--c-leather-pattern-house); --app-glow:#97633A80; }
.card-readyloop{ --app-c:var(--c-readyloop); --app-glow:#4E7BE880; }

.app-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }

.app-icon{
  width:58px; height:58px;
  border-radius:16px;
  background:var(--app-c);
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 22px -10px var(--app-glow);
  flex:none;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 10px;
  white-space:nowrap;
}
.badge-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--app-c, var(--accent));
  display:inline-block;
  animation:glow 2.4s ease-in-out infinite;
}

.app-card-body{ display:flex; flex-direction:column; gap:6px; }

.app-cat{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.app-card h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-.02em;
  line-height:1.1;
}

.app-card-body p{ color:var(--text-dim); font-size:.95rem; line-height:1.5; }

.app-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:.9rem;
  color:var(--accent);
}

/* ——— Studio ——— */

.studio{ border-top:1px solid var(--line); background:var(--surface-2); }

.studio-cols{ display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,72px); }
.studio-main{ flex:1 1 400px; min-width:300px; }
.studio-main h2{
  margin-top:14px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.9rem,4vw,2.9rem);
  letter-spacing:-.028em;
  line-height:1.08;
}
.studio-main p{
  margin-top:14px;
  color:var(--text-dim);
  font-size:1.06rem;
  line-height:1.65;
  text-wrap:pretty;
}
.studio-main p:first-of-type{ margin-top:20px; }

.stats{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.stat{
  flex:1 1 130px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  background:var(--bg-2);
}
.stat-n{
  font-family:var(--font-display);
  font-weight:800;
  font-size:2rem;
  letter-spacing:-.02em;
  color:var(--accent);
}
.stat-l{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}

.values{ flex:1 1 300px; min-width:280px; display:flex; flex-direction:column; gap:14px; }
.value{
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  background:var(--bg-2);
}
.value-n{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.value h3{
  margin-top:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.22rem;
  letter-spacing:-.015em;
}
.value p{ margin-top:8px; color:var(--text-dim); font-size:.96rem; line-height:1.55; }

/* ——— Contact ——— */

.contact-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--surface);
  padding:clamp(30px,5vw,60px);
  text-align:center;
}
.contact-blob{
  top:-40%; left:50%;
  transform:translateX(-50%);
  --ox:-50%;
  width:520px; height:520px;
  max-width:120%;
  background:radial-gradient(circle, color-mix(in oklab, var(--accent) 34%, transparent), transparent 62%);
  filter:blur(20px);
  --fog-2:#F0C36E; --fog-3:#C6572F;
}
.contact-inner{ position:relative; }
.contact-inner h2{
  margin-top:14px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.8rem,4vw,2.7rem);
  letter-spacing:-.028em;
  line-height:1.1;
}
.contact-inner > p{
  margin:14px auto 0;
  max-width:34rem;
  color:var(--text-dim);
  font-size:1.05rem;
  line-height:1.6;
  text-wrap:pretty;
}
.contact-inner .btn-accent{ margin-top:26px; }

.chips{ margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.chip{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 14px;
}

/* ——— Footer ——— */

.site-footer{ border-top:1px solid var(--line); margin-top:8px; }

.footer-cols{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  justify-content:space-between;
  align-items:flex-start;
  padding-block:clamp(36px,5vw,52px);
}

.footer-brand{ max-width:22rem; }
.footer-brand p{
  margin-top:14px;
  font-size:.86rem;
  line-height:1.65;
  color:var(--muted);
}

.footer-nav{ display:flex; gap:48px; flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:11px; }
.footer-col-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.footer-col a{ font-size:.9rem; color:var(--text-dim); transition:color .2s ease; }
.footer-col a:hover{ color:var(--accent); }

.footer-bottom{ border-top:1px solid var(--line-2); }
.footer-bottom-inner{
  padding-block:18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
  font-size:.8rem;
  color:var(--muted);
}
.footer-domain{ font-family:var(--font-mono); letter-spacing:.06em; }

/* ——— App detail page ——— */

.app-main{ padding-block:clamp(26px,4vw,48px) clamp(48px,8vw,88px); }

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--muted);
  transition:color .2s ease;
}
.back:hover{ color:var(--text); }

.app-hero{ display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,56px); align-items:center; margin-top:28px; }
.app-hero-copy{ flex:1 1 340px; min-width:290px; }

.app-kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--app-c, var(--accent));
}

.app-head{ display:flex; align-items:center; gap:18px; margin-top:16px; }

.app-icon-lg{
  width:76px; height:76px;
  border-radius:21px;
  background:var(--app-c);
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:34px;
  color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28), 0 18px 32px -14px var(--app-glow);
  flex:none;
}

.app-head h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem,5vw,3rem);
  letter-spacing:-.03em;
  line-height:1;
}

.app-sub{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

.app-lede{
  margin-top:22px;
  font-size:clamp(1.05rem,1.6vw,1.18rem);
  line-height:1.62;
  color:var(--text-dim);
  text-wrap:pretty;
}

.app-meta-row{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }

.store-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#0a0a0a;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:11px 18px;
  opacity:.9;
}
.store-badge-text{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.store-badge-top{ font-size:10px; opacity:.75; font-family:var(--font-mono); letter-spacing:.05em; }
.store-badge-main{ font-size:17px; font-weight:600; letter-spacing:-.01em; }

/* Phone mockup */

.app-hero-visual{ flex:1 1 260px; min-width:240px; display:flex; justify-content:center; }

.phone{
  --r:0deg;
  animation:floaty 6.5s ease-in-out infinite;
  width:248px;
  max-width:72vw;
  aspect-ratio:9 / 19;
  border-radius:42px;
  padding:9px;
  background:var(--bg-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.phone-has-shot{ aspect-ratio: 1320 / 2868; }
.phone-shot{
  width:100%;
  height:100%;
  border-radius:34px;
  object-fit:cover;
  display:block;
}
.phone-notch{
  position:absolute;
  top:16px; left:50%;
  transform:translateX(-50%);
  width:62px; height:6px;
  border-radius:99px;
  background:var(--line);
  z-index:2;
}
.phone-screen{
  height:100%;
  border-radius:34px;
  overflow:hidden;
  background:linear-gradient(160deg, var(--app-c), color-mix(in oklab, var(--app-c) 52%, #000));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:20px;
}
.phone-icon{
  width:88px; height:88px;
  border-radius:24px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(4px);
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:44px;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.phone-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:#fff;
  letter-spacing:-.01em;
}
.phone-cap{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

/* Resources & developer table */

.res-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.res-section{ margin-top:clamp(40px,6vw,64px); }
.dev-section{ margin-top:clamp(36px,5vw,56px); }

.res-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:14px;
}

.res-card{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  background:var(--surface);
  color:var(--text);
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.res-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  background:var(--bg-2);
}
.res-ic{
  width:40px; height:40px;
  border-radius:11px;
  background:var(--surface-2);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--accent);
  flex:none;
}
.res-card-copy{ flex:1; }
.res-title{ display:block; font-weight:600; font-size:.98rem; }
.res-desc{ display:block; font-size:.84rem; color:var(--muted); margin-top:2px; }
.res-chev{ color:var(--muted); flex:none; }

.dev-table{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--surface);
}
.dev-table > div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  font-size:.94rem;
}
.dev-table > div:last-child{ border-bottom:0; }
.dev-table dt{ color:var(--muted); flex:none; }
.dev-table dd{ font-weight:500; text-align:right; overflow-wrap:anywhere; }
.dev-table dd a{ font-weight:500; }

/* ——— Prose (legal & support pages) ——— */

.prose-main{ padding-block:clamp(26px,4vw,48px) clamp(48px,8vw,88px); }

.prose h1{
  margin-top:26px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.9rem,4vw,2.5rem);
  letter-spacing:-.028em;
  line-height:1.05;
}

.pagemeta{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--muted);
}

.prose h2{
  margin:2.4em 0 .6em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:-.015em;
}
.prose h3{
  margin:1.6em 0 .4em;
  font-weight:600;
  font-size:1rem;
}
.prose p{ margin:.65em 0; line-height:1.7; color:var(--text-dim); }
.prose > p:first-of-type{ margin-top:1.6em; }
.prose p a:hover{ text-decoration:underline; }
.prose ul{ margin:.65em 0; padding-left:1.3em; color:var(--text-dim); line-height:1.7; }
.prose li{ margin:.3em 0; }
.prose li::marker{ color:var(--muted); }
.prose .dev-table{ margin-block:1.4em 1.8em; }
.prose .btn-accent{ margin-top:10px; }

/* ——— 404 ——— */

.center-hero{
  min-height:70svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-block:64px;
}
.center-hero h1{
  margin-top:26px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.2rem,6vw,3.4rem);
  letter-spacing:-.03em;
}
.center-hero p{
  margin-top:16px;
  color:var(--text-dim);
  font-size:1.1rem;
  max-width:30rem;
  text-wrap:pretty;
}
.center-hero .btn-accent{ margin-top:30px; }

/* ——— Responsive ——— */

@media (max-width:780px){
  .nav-mid{ display:none; }
  .hero-cluster{ min-height:340px; }
}
@media (max-width:520px){
  .hdr-contact{ display:none; }
}

/* ——— Motion preferences ——— */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .rev{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}