/* ============ MacLoveKit — Calm Editorial ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-text);color:var(--color-text);background:#f2f0ec;line-height:var(--leading-normal)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,video{max-width:100%;height:auto;display:block}
ul{list-style:none}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6)}
.wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.005em}

:root{
  --bg-canvas:#f2f0ec;
  --bg-card:#ffffff;
  --bg-ink:#0e0e10;
  --accent:#c9f24b; /* single accent — lime */
}

/* ================= HEADER ================= */
.header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background 300ms var(--ease-out),border-color 300ms;border-bottom:1px solid transparent}
.header.scrolled{background:rgba(242,240,236,0.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:rgba(14,14,16,0.06)}
.header .inner{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-0.02em}
.logo img{width:28px;height:28px;border-radius:7px}
.nav{display:flex;align-items:center;gap:var(--space-8)}
.nav a{font-size:14px;font-weight:500;color:rgba(14,14,16,0.62);transition:color 150ms}
.nav a:hover,.nav a.active{color:var(--bg-ink)}
.nav-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:10px 18px;border-radius:9999px;background:var(--bg-ink);color:#fff;transition:transform 200ms,background 200ms}
.nav-cta:hover{transform:translateY(-1px);background:#000}

/* ================= HERO ================= */
.hero{position:relative;padding:160px var(--space-6) var(--space-20);overflow:hidden}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.9}
.hero-lines .ln{stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawLine 3s var(--ease-out) forwards}
.hero-lines .ln1{animation-delay:0.2s}
.hero-lines .ln2{animation-delay:0.5s}
.hero-lines .ln3{animation-delay:0.8s}
.hero-lines .ln4{animation-delay:1.1s;animation-duration:3.5s}
@keyframes drawLine{to{stroke-dashoffset:0}}
.hero-lines .ln1,.hero-lines .ln2,.hero-lines .ln3{animation:drawLine 3s var(--ease-out) forwards, float 14s ease-in-out infinite 3.5s}
.hero-lines .ln2{animation:drawLine 3s var(--ease-out) 0.5s forwards, float 16s ease-in-out infinite 4s}
.hero-lines .ln3{animation:drawLine 3s var(--ease-out) 0.8s forwards, float 18s ease-in-out infinite 4.5s}
.hero-lines .ln4{animation:drawLine 3.5s var(--ease-out) 1.1s forwards, pulse-line 6s ease-in-out infinite 5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse-line{0%,100%{opacity:0.7}50%{opacity:1}}
.hero-lines .dot-glide{filter:drop-shadow(0 0 8px var(--accent));opacity:0;animation:fadeIn 1s 4.5s forwards}
@keyframes fadeIn{to{opacity:1}}

.hero-inner{max-width:var(--container-wide);margin:0 auto;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;background:#fff;border:1px solid rgba(14,14,16,0.08);border-radius:9999px;font-size:12px;font-weight:500;color:var(--bg-ink);margin-bottom:var(--space-8);box-shadow:0 1px 2px rgba(14,14,16,0.04)}
.hero-badge .dot{width:20px;height:20px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;color:var(--bg-ink)}
.hero-badge .muted{color:rgba(14,14,16,0.45)}

.hero h1{font-family:var(--font-display);font-size:clamp(44px,7.5vw,120px);font-weight:700;line-height:0.98;letter-spacing:-0.04em;color:var(--bg-ink);max-width:1200px}
.hero h1 .line{display:block}
.hero h1 .serif{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em;padding-right:0.1em}
.rotating-wrap{display:inline-block;vertical-align:baseline;position:relative;min-width:6ch;height:1em}
.rotating-word{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em;transition:opacity 600ms,transform 600ms var(--ease-out),filter 600ms;opacity:0;transform:translateY(14px);filter:blur(8px);color:var(--bg-ink)}
.rotating-word.active,.rotating-word.active.init{opacity:1;transform:translateY(0);filter:blur(0)}
.rotating-word.exit{opacity:0;transform:translateY(-14px);filter:blur(8px)}

.hero-row{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:end;margin-top:var(--space-10)}
.hero .sub{font-size:17px;line-height:1.55;color:rgba(14,14,16,0.62);max-width:480px}
.hero-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;background:var(--bg-ink);color:#fff;border-radius:9999px;font-size:14px;font-weight:600;transition:transform 200ms var(--ease-out)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary .arr{width:22px;height:22px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--bg-ink);margin-left:2px;margin-right:-8px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;background:transparent;border:1px solid rgba(14,14,16,0.15);color:var(--bg-ink);border-radius:9999px;font-size:14px;font-weight:600;transition:background 200ms}
.btn-ghost:hover{background:#fff}

/* Trust chip */
.trust-chip{display:inline-flex;align-items:center;gap:14px;margin-top:var(--space-10);padding:12px 14px 12px 12px;background:#fff;border:1px solid rgba(14,14,16,0.08);border-radius:9999px;box-shadow:0 6px 20px rgba(14,14,16,0.04);max-width:520px}
.trust-chip .tc-ico{width:36px;height:36px;border-radius:9999px;background:var(--bg-ink);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-chip .tc-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.trust-chip .tc-txt strong{font-size:13px;font-weight:600;color:var(--bg-ink);letter-spacing:-0.005em}
.trust-chip .tc-txt span{font-size:12px;color:rgba(14,14,16,0.55);line-height:1.4}
.trust-chip .tc-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--bg-ink);padding:6px 12px;border-radius:9999px;background:var(--bg-canvas);transition:background 150ms}
.trust-chip .tc-link:hover{background:#e8e6e1}

/* ================= APP STRIP (under hero) ================= */
.app-strip{margin-top:var(--space-16);display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:var(--container-wide);margin-left:auto;margin-right:auto;padding:0 var(--space-6)}
.strip-card{aspect-ratio:16/9;border-radius:22px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:#fff;border:1px solid rgba(14,14,16,0.06);transition:transform 300ms var(--ease-out),box-shadow 300ms}
.strip-card .icwrap{width:52px;height:52px;border-radius:13px;font-size:20px}
.strip-card .nm{font-size:18px}
.strip-card .tg{font-size:13px;margin-top:4px}
.strip-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(14,14,16,0.12)}
.strip-card.dark{background:var(--bg-ink);color:#fff;border-color:transparent}
.strip-card.accent{background:var(--accent);color:var(--bg-ink);border-color:transparent}
.strip-card .icwrap{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:16px;background:rgba(14,14,16,0.06)}
.strip-card.dark .icwrap{background:rgba(255,255,255,0.1)}
.strip-card.accent .icwrap{background:rgba(14,14,16,0.12)}
.strip-card .nm{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:-0.01em}
.strip-card .tg{font-size:11px;opacity:0.55;margin-top:2px;line-height:1.35}

/* ================= SECTION SHELL ================= */
.section{padding:var(--space-24) 0}
.section-head{max-width:var(--container-wide);margin:0 auto var(--space-12);padding:0 var(--space-6);display:grid;grid-template-columns:2fr 1fr;gap:var(--space-8);align-items:end}
.section-head h2{font-family:var(--font-display);font-size:clamp(40px,6vw,88px);font-weight:700;letter-spacing:-0.04em;line-height:0.98;color:var(--bg-ink)}
.section-head h2 .serif{padding:0 0.06em}
.section-head .aside{max-width:360px;color:rgba(14,14,16,0.6);font-size:14px;line-height:1.6}
.section-head .aside .arrow-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-3);color:var(--bg-ink);font-weight:600;transition:gap 150ms}
.section-head .aside .arrow-link:hover{gap:10px}
.eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(14,14,16,0.45);margin-bottom:var(--space-4)}

/* ================= APPS BENTO ================= */
.chips{display:flex;gap:8px;flex-wrap:wrap;max-width:var(--container-wide);margin:0 auto var(--space-8);padding:0 var(--space-6)}
.chip{padding:9px 16px;border-radius:9999px;font-size:13px;font-weight:500;background:#fff;color:rgba(14,14,16,0.6);border:1px solid rgba(14,14,16,0.08);transition:all 200ms var(--ease-out)}
.chip.active{background:var(--bg-ink);color:#fff;border-color:var(--bg-ink)}
.chip:hover:not(.active){color:var(--bg-ink);border-color:rgba(14,14,16,0.2)}
.chip .count{opacity:0.5;margin-left:6px;font-size:11px}

.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px;gap:14px;max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.bc{position:relative;border-radius:22px;overflow:hidden;cursor:pointer;transition:transform 400ms var(--ease-out),box-shadow 400ms;display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:#fff;border:1px solid rgba(14,14,16,0.06)}
.bc:hover{transform:translateY(-3px);box-shadow:0 20px 50px -10px rgba(14,14,16,0.12)}
.bc[data-size="hero"]{grid-column:span 4;grid-row:span 3;background:var(--bg-ink);color:#fff;border-color:transparent}
.bc[data-size="tall"]{grid-column:span 2;grid-row:span 3}
.bc[data-size="wide"]{grid-column:span 4;grid-row:span 2;background:var(--bg-ink);color:#fff;border-color:transparent}
.bc[data-size="reg"]{grid-column:span 3;grid-row:span 2}
.bc[data-size="small"]{grid-column:span 2;grid-row:span 2}

/* Lumaspace video wallpaper layers */
.art-luma-video{position:absolute;inset:0;border-radius:22px;overflow:hidden;z-index:1;opacity:0.55}
.vid-layer{position:absolute;inset:-20%;background-size:cover;background-position:center;filter:blur(0px)}
.vid-layer.l1{background:radial-gradient(ellipse at 30% 40%,#6b5cff,transparent 55%),radial-gradient(ellipse at 70% 60%,#ff5c9e,transparent 55%),#1a1a2e;animation:luma1 18s ease-in-out infinite alternate}
.vid-layer.l2{background:radial-gradient(ellipse at 50% 20%,#00d4ff,transparent 50%),radial-gradient(ellipse at 80% 80%,#ffb347,transparent 55%);mix-blend-mode:screen;opacity:0.55;animation:luma2 22s ease-in-out infinite alternate}
.vid-layer.l3{background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.12),transparent 40%);animation:luma3 14s ease-in-out infinite alternate}
@keyframes luma1{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.1) translate(-4%,3%)}}
@keyframes luma2{0%{transform:scale(1.05) translate(2%,-2%)}100%{transform:scale(1) translate(-3%,4%)}}
@keyframes luma3{0%{transform:translate(0,0)}100%{transform:translate(6%,-3%)}}
.bc[data-app="lumaspace"] .top-row,.bc[data-app="lumaspace"] .body{position:relative;z-index:2}

/* Renameit AI rows — long loop animation */
.art-rename.rn-anim{position:relative;z-index:2;margin:14px -4px 10px;flex:1;min-height:180px;display:flex;flex-direction:column;gap:6px;font-family:ui-monospace,Menlo,monospace;font-size:10px;overflow:hidden}
.rn-row{position:relative;display:flex;align-items:center;gap:8px;justify-content:space-between;background:rgba(14,14,16,0.04);border:1px solid rgba(14,14,16,0.06);border-radius:6px;padding:5px 9px;color:rgba(14,14,16,0.7);white-space:nowrap;overflow:hidden;min-height:24px}
.rn-name{position:relative;overflow:hidden;flex:1}
.rn-old,.rn-new{display:block;transition:transform 600ms var(--ease-out),opacity 600ms}
.rn-new{position:absolute;inset:0;opacity:0;transform:translateY(12px);color:var(--bg-ink);font-weight:500}
.rn-tag{font-family:var(--font-text);font-size:9px;font-weight:700;padding:2px 6px;background:var(--accent);color:var(--bg-ink);border-radius:4px;letter-spacing:0.04em;opacity:0;transform:scale(0.6);transition:opacity 300ms,transform 300ms var(--ease-out)}
/* AI scan beam */
.rn-scan{position:absolute;top:0;left:-20%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,242,75,0.35),transparent);pointer-events:none;z-index:3;animation:rnScan 10s ease-in-out infinite}
@keyframes rnScan{
  0%,100%{transform:translateX(0);opacity:0}
  5%{opacity:1}
  50%{transform:translateX(300%);opacity:1}
  55%{opacity:0}
}
/* Row-by-row reveal: each row has strike → ai phase timed off common 10s cycle */
@keyframes rnRow{
  0%,9%{}
  12%{}
  14%{opacity:1}
  90%,100%{}
}
@keyframes rnOldOut{0%,9%{opacity:1;transform:translateY(0)}14%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes rnNewIn {0%,9%{opacity:0;transform:translateY(12px)}14%,100%{opacity:1;transform:translateY(0)}}
@keyframes rnTag   {0%,11%{opacity:0;transform:scale(0.6)}16%,100%{opacity:1;transform:scale(1)}}

.rn-row.r1 .rn-old{animation:rnOldOut 10s 1.2s infinite both}
.rn-row.r1 .rn-new{animation:rnNewIn  10s 1.2s infinite both}
.rn-row.r1 .rn-tag{animation:rnTag    10s 1.2s infinite both}
.rn-row.r2 .rn-old{animation:rnOldOut 10s 2.4s infinite both}
.rn-row.r2 .rn-new{animation:rnNewIn  10s 2.4s infinite both}
.rn-row.r2 .rn-tag{animation:rnTag    10s 2.4s infinite both}
.rn-row.r3 .rn-old{animation:rnOldOut 10s 3.6s infinite both}
.rn-row.r3 .rn-new{animation:rnNewIn  10s 3.6s infinite both}
.rn-row.r3 .rn-tag{animation:rnTag    10s 3.6s infinite both}
.rn-row.r4 .rn-old{animation:rnOldOut 10s 4.8s infinite both}
.rn-row.r4 .rn-new{animation:rnNewIn  10s 4.8s infinite both}
.rn-row.r4 .rn-tag{animation:rnTag    10s 4.8s infinite both}
/* Reset at loop end so the "before" state returns cleanly */
@keyframes rnReset{0%,94%{}100%{}}

/* Smartly — scan + progress ring + item list */
.art-smart-anim{position:relative;z-index:2;margin:14px 0 10px;flex:1;display:flex;align-items:center;gap:18px;min-height:140px}
.sm-ring{position:relative;width:130px;height:130px;flex-shrink:0}
.sm-ring svg{width:100%;height:100%}
.sm-prog{animation:smProg 9s ease-in-out infinite}
@keyframes smProg{
  0%,8%{stroke-dashoffset:264}
  75%,100%{stroke-dashoffset:80}
}
.sm-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sm-lbl b{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--bg-ink);line-height:1}
.sm-lbl b span{font-size:11px;font-weight:600;margin-left:2px;opacity:0.6}
.sm-lbl .sm-caption{font-size:9px;color:rgba(14,14,16,0.5);font-weight:500;letter-spacing:0.06em;text-transform:uppercase}
.sm-num{animation:smNum 9s steps(1,end) infinite}
.sm-caption{animation:smCap 9s steps(1,end) infinite}
@keyframes smNum{
  0%,5%{content:'0.0'}
  10%{}
  20%{}
  30%{}
  80%,100%{}
}
.sm-list{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.sm-item{display:flex;align-items:center;gap:8px;font-size:10.5px;color:rgba(14,14,16,0.75);padding:5px 8px;background:rgba(14,14,16,0.03);border-radius:6px;opacity:0;transform:translateY(6px)}
.sm-tick{width:14px;height:14px;border-radius:50%;background:var(--accent);color:var(--bg-ink);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sm-lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-sz{font-family:ui-monospace,Menlo,monospace;font-weight:600;color:var(--bg-ink);font-size:10px}
@keyframes smItem{0%,15%{opacity:0;transform:translateY(6px)}25%{opacity:1;transform:translateY(0)}85%{opacity:1}95%,100%{opacity:0;transform:translateY(-4px)}}
.sm-item.i1{animation:smItem 9s 1.0s infinite both}
.sm-item.i2{animation:smItem 9s 1.8s infinite both}
.sm-item.i3{animation:smItem 9s 2.6s infinite both}
.sm-item.i4{animation:smItem 9s 3.4s infinite both}

/* JS replaces ring number and caption text since CSS can't animate text content */

/* Focos — typed prompt → timer config → countdown */
.art-focos.fc-anim{position:relative;z-index:2;margin:14px 0 10px;flex:1;min-height:140px;display:flex;flex-direction:column;gap:8px}
.fc-chat{padding:9px 13px;border-radius:14px;font-size:11.5px;line-height:1.4;opacity:0;transform:translateY(8px)}
.fc-chat.you{background:var(--accent);color:var(--bg-ink);align-self:flex-end;font-weight:500;border-bottom-right-radius:4px;max-width:85%;display:inline-flex;align-items:baseline}
.fc-chat.bot{background:rgba(14,14,16,0.04);border:1px solid rgba(14,14,16,0.06);color:var(--bg-ink);align-self:flex-start;display:flex;align-items:baseline;gap:6px;border-bottom-left-radius:4px;max-width:85%}
.fc-type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:fcType 12s steps(48,end) infinite}
.fc-caret{display:inline-block;width:1px;background:var(--bg-ink);margin-left:1px;align-self:stretch;animation:fcCaret 12s infinite,fcBlink 0.6s steps(2,start) infinite}
@keyframes fcType{0%{width:0}18%{width:0}35%{width:100%}80%{width:100%}85%,100%{width:100%}}
@keyframes fcCaret{0%,15%{opacity:0}18%{opacity:1}35%{opacity:1}36%,100%{opacity:0}}
@keyframes fcBlink{50%{opacity:0}}
.fc-timer{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-0.02em}
.fc-meta{font-size:10px;color:rgba(14,14,16,0.5)}
.fc-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(201,242,75,0.3);margin-right:6px}
@keyframes fcShow{0%,6%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:translateY(0)}88%,100%{opacity:1;transform:translateY(0)}}
@keyframes fcShow2{0%,36%{opacity:0;transform:translateY(8px)}40%{opacity:1;transform:translateY(0)}88%,100%{opacity:1;transform:translateY(0)}}
@keyframes fcShow3{0%,62%{opacity:0;transform:translateY(8px)}66%{opacity:1;transform:translateY(0)}88%,100%{opacity:1;transform:translateY(0)}}
.fc-s1{animation:fcShow  12s infinite both}
.fc-s2{animation:fcShow2 12s infinite both}
.fc-s3{animation:fcShow3 12s infinite both}

/* per-app subtle accent — only on tiny strip & icon tint */
.bc .accent-rail{position:absolute;top:0;left:0;right:0;height:3px;opacity:0.8}
.bc[data-app="lumaspace"] .accent-rail,
.bc[data-app="renameit"] .accent-rail,
.bc[data-app="smartly"] .accent-rail,
.bc[data-app="focos"] .accent-rail{display:none}

.bc .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);position:relative;z-index:2}
.bc .id{display:flex;align-items:center;gap:12px}
.bc .icwrap{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;background:rgba(14,14,16,0.05);color:var(--bg-ink);flex-shrink:0}
.bc[data-size="hero"] .icwrap,.bc[data-size="wide"] .icwrap{background:rgba(255,255,255,0.1);color:#fff}
.bc[data-app="lumaspace"] .icwrap{color:#7c3aed}
.bc[data-app="renameit"] .icwrap{color:#2563eb}
.bc[data-app="smartly"] .icwrap{color:#059669}
.bc[data-size="hero"][data-app="lumaspace"] .icwrap,.bc[data-size="wide"][data-app="lumaspace"] .icwrap{color:#c4b5fd}
.bc[data-size="hero"][data-app="renameit"] .icwrap,.bc[data-size="wide"][data-app="renameit"] .icwrap{color:#93c5fd}
.bc[data-size="hero"][data-app="smartly"] .icwrap,.bc[data-size="wide"][data-app="smartly"] .icwrap{color:#6ee7b7}

.bc .nm{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.1;letter-spacing:-0.02em}
.bc[data-size="hero"] .nm{font-size:22px}
.bc .tg{font-size:12px;opacity:0.55;margin-top:3px;font-weight:500}
.bc .status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(14,14,16,0.04);border-radius:9999px;font-size:11px;font-weight:600;color:rgba(14,14,16,0.6)}
.bc[data-size="hero"] .status,.bc[data-size="wide"] .status{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.8)}
.bc .status .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(201,242,75,0.3)}
.bc .status.live .pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}

.bc .body{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--space-4)}
.bc .dsc{font-size:14px;line-height:1.55;opacity:0.75;max-width:440px}
.bc[data-size="hero"] .dsc{font-size:16px;line-height:1.5;max-width:480px}
.bc[data-size="reg"] .dsc,.bc[data-size="small"] .dsc{font-size:13px;line-height:1.5}

.bc .actions{display:flex;align-items:center;gap:12px;position:relative;z-index:2;margin-top:auto}
.bc .btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:9999px;font-size:13px;font-weight:600;transition:all 200ms}
.bc .btn.primary{background:var(--accent);color:var(--bg-ink);border:1px solid transparent}
.bc[data-size="hero"] .btn.primary,.bc[data-size="wide"] .btn.primary{background:var(--accent);color:var(--bg-ink)}
.bc .btn.primary:hover{transform:translateY(-1px)}
.bc .btn.ghost{background:transparent;border:1px solid rgba(14,14,16,0.12);color:var(--bg-ink)}
.bc[data-size="hero"] .btn.ghost,.bc[data-size="wide"] .btn.ghost{border-color:rgba(255,255,255,0.2);color:#fff}
.bc .arrow-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;opacity:0.7;transition:gap 200ms,opacity 200ms}
.bc:hover .arrow-link{gap:8px;opacity:1}

/* Card art — subtle, monochrome */
.art-luma{position:absolute;top:50%;right:-20%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,0.18),transparent 70%);transform:translateY(-50%);pointer-events:none;z-index:1}

/* Lumaspace animated video-ish background */
.art-luma-video{position:absolute;inset:0;border-radius:22px;overflow:hidden;z-index:1;opacity:0.55}
.vid-layer{position:absolute;inset:-20%;background-size:cover;background-position:center}
.vid-layer.l1{background:radial-gradient(ellipse at 30% 40%,#6b5cff,transparent 55%),radial-gradient(ellipse at 70% 60%,#ff5c9e,transparent 55%),#1a1a2e;animation:luma1 18s ease-in-out infinite alternate}
.vid-layer.l2{background:radial-gradient(ellipse at 50% 20%,#00d4ff,transparent 50%),radial-gradient(ellipse at 80% 80%,#ffb347,transparent 55%);mix-blend-mode:screen;opacity:0.55;animation:luma2 22s ease-in-out infinite alternate}
.vid-layer.l3{background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.12),transparent 40%);animation:luma3 14s ease-in-out infinite alternate}
@keyframes luma1{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.1) translate(-4%,3%)}}
@keyframes luma2{0%{transform:scale(1.05) translate(2%,-2%)}100%{transform:scale(1) translate(-3%,4%)}}
@keyframes luma3{0%{transform:translate(0,0)}100%{transform:translate(6%,-3%)}}
.bc[data-app="lumaspace"] .top-row,.bc[data-app="lumaspace"] .body{position:relative;z-index:2}

/* ============ Renameit — file grid + cursor + lasso + context menu story ============ */
.art-rename.rn-anim{position:relative;z-index:3;margin:16px 0 12px;flex:1;min-height:200px;border-radius:14px;background:linear-gradient(180deg,rgba(14,14,16,0.02),rgba(14,14,16,0.04));border:1px solid rgba(14,14,16,0.05)}
.rn-grid{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px;overflow:hidden;border-radius:6px}
.rn-file{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 4px 6px;background:#fff;border:1.5px solid transparent;border-radius:8px;transition:border-color 250ms,background 250ms;min-height:58px}
.rn-file.sel{border-color:var(--bg-ink);background:#fafaf7}
.rn-icon{width:26px;height:32px;position:relative;border-radius:3px 3px 2px 2px}
.rn-icon::after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;background:rgba(255,255,255,0.65);clip-path:polygon(0 0,100% 100%,0 100%)}
.rn-ico-img{background:#60a5fa}
.rn-ico-img::before{content:"";position:absolute;inset:4px 3px 3px 3px;background:radial-gradient(circle at 30% 40%,#fff 2px,transparent 2.5px),linear-gradient(180deg,#bfdbfe 0 60%,#93c5fd 60%);border-radius:2px;clip-path:polygon(0 60%,30% 40%,55% 60%,75% 45%,100% 65%,100% 100%,0 100%)}
.rn-ico-doc{background:#f3f4f6;border:1px solid #d1d5db}
.rn-ico-doc::before{content:"";position:absolute;inset:8px 5px auto 5px;height:2px;background:#9ca3af;box-shadow:0 5px 0 #9ca3af,0 10px 0 #9ca3af,0 15px 0 #9ca3af}
.rn-ico-aud{background:#a78bfa}
.rn-ico-aud::before{content:"♪";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700}
.rn-ico-key{background:#f87171}
.rn-ico-key::before{content:"";position:absolute;inset:8px 4px;background:linear-gradient(90deg,#fff 60%,transparent 60%),linear-gradient(90deg,transparent 0 40%,#fff 40% 85%,transparent 85%);background-size:100% 3px;background-repeat:no-repeat;background-position:0 0,0 6px}
.rn-fname{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:rgba(14,14,16,0.65);text-align:center;position:relative;width:100%;height:14px;line-height:14px;padding:0 2px}
.rn-old,.rn-new{position:absolute;left:0;right:0;top:0;bottom:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;transition:opacity 400ms,transform 400ms var(--ease-out)}
.rn-new{opacity:0;transform:translateY(6px);color:var(--bg-ink);font-weight:700}

/* Cursor — left/top in container %; transform only nudges for click feedback */
.rn-cursor{position:absolute;z-index:10;width:18px;height:18px;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.2));opacity:0;left:0;top:0;animation:rnCursor 11s ease-in-out infinite;transform-origin:2px 2px}
@keyframes rnCursor{
  0%,4%{left:82%;top:80%;opacity:0;transform:scale(1)}
  7%{left:82%;top:80%;opacity:1;transform:scale(1)}
  /* drift to top-left of grid to start lasso */
  14%{left:6%;top:12%;opacity:1;transform:scale(1)}
  /* drag lasso across to bottom-right */
  26%{left:88%;top:82%;opacity:1;transform:scale(1)}
  /* pause with selection */
  32%{left:88%;top:82%;opacity:1;transform:scale(1)}
  /* right-click: small press */
  34%{left:88%;top:82%;opacity:1;transform:scale(0.85)}
  35%{left:88%;top:82%;opacity:1;transform:scale(1)}
  /* move down to "Rename with AI" row */
  40%{left:70%;top:78%;opacity:1;transform:scale(1)}
  /* click press */
  42%{left:70%;top:78%;opacity:1;transform:scale(0.85)}
  43%{left:70%;top:78%;opacity:1;transform:scale(1)}
  /* drift off */
  50%{left:95%;top:105%;opacity:0;transform:scale(1)}
  100%{left:95%;top:105%;opacity:0;transform:scale(1)}
}

/* Lasso selection rectangle */
.rn-lasso{position:absolute;left:12px;top:18px;width:0;height:0;border:1.5px solid var(--bg-ink);background:rgba(14,14,16,0.06);border-radius:2px;pointer-events:none;z-index:4;opacity:0;animation:rnLasso 11s ease-in-out infinite}
@keyframes rnLasso{
  0%,13%{opacity:0;width:0;height:0}
  14%{opacity:1;width:0;height:0}
  26%{opacity:1;width:92%;height:84%}
  30%{opacity:1;width:92%;height:84%}
  32%{opacity:0;width:92%;height:84%}
  100%{opacity:0;width:0;height:0}
}

/* Selection state on files */
@keyframes rnSel{0%,15%{}24%,48%{}50%,100%{}}
.rn-file{animation:rnFileSel 11s ease-in-out infinite}
@keyframes rnFileSel{
  0%,20%{border-color:transparent;background:#fff}
  26%,48%{border-color:var(--bg-ink);background:#fafaf7}
  50%,100%{border-color:transparent;background:#fff}
}

/* Context menu */
.rn-menu{position:absolute;right:8%;bottom:10%;z-index:6;background:#fff;border:1px solid rgba(14,14,16,0.12);border-radius:8px;box-shadow:0 10px 30px rgba(14,14,16,0.18);padding:4px;min-width:140px;font-size:10px;opacity:0;transform:scale(0.85) translateY(4px);transform-origin:top right;animation:rnMenu 11s ease-in-out infinite}
.rn-menu-row{padding:5px 10px;color:var(--bg-ink);border-radius:5px;white-space:nowrap;display:flex;align-items:center}
.rn-menu-row.rn-menu-hl{background:var(--accent);color:var(--bg-ink);font-weight:600;animation:rnMenuHl 11s ease-in-out infinite}
@keyframes rnMenu{
  0%,31%{opacity:0;transform:scale(0.85) translateY(4px)}
  34%{opacity:1;transform:scale(1) translateY(0)}
  44%{opacity:1;transform:scale(1) translateY(0)}
  46%,100%{opacity:0;transform:scale(0.85) translateY(4px)}
}
@keyframes rnMenuHl{
  0%,36%{background:var(--accent)}
  40%{background:var(--bg-ink);color:#fff}
  44%{background:var(--accent);color:var(--bg-ink)}
  100%{background:var(--accent)}
}

/* Filename flip: old → new, after menu click, staggered */
@keyframes rnOldOut{0%,48%{opacity:1;transform:translateY(0)}54%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes rnNewIn{0%,48%{opacity:0;transform:translateY(6px)}54%,100%{opacity:1;transform:translateY(0)}}
.rn-file .rn-old{animation:rnOldOut 11s ease-in-out infinite}
.rn-file .rn-new{animation:rnNewIn 11s ease-in-out infinite}
.rn-file.f1 .rn-old,.rn-file.f1 .rn-new{animation-delay:0s}
.rn-file.f2 .rn-old,.rn-file.f2 .rn-new{animation-delay:0.15s}
.rn-file.f3 .rn-old,.rn-file.f3 .rn-new{animation-delay:0.3s}
.rn-file.f4 .rn-old,.rn-file.f4 .rn-new{animation-delay:0.45s}
.rn-file.f5 .rn-old,.rn-file.f5 .rn-new{animation-delay:0.6s}
.rn-file.f6 .rn-old,.rn-file.f6 .rn-new{animation-delay:0.75s}

/* ============ Smartly — scan + clean story (in-flow) ============ */
.art-smart-anim{position:relative;z-index:2;margin:14px 0 10px;flex:1;display:flex;align-items:center;gap:18px;min-height:140px;padding:8px 4px}
.sm-ring{position:relative;width:120px;height:120px;flex-shrink:0}
.sm-ring svg{width:100%;height:100%;overflow:visible}
/* Ring: fills during scan (0→264→0), then drains during cleaning (0→264 again) */
/* circumference = 2π·42 ≈ 263.89 */
.sm-prog{animation:smProg 13s cubic-bezier(.5,0,.4,1) infinite}
@keyframes smProg{
  0%,4%   {stroke-dashoffset:264;stroke:var(--accent)}
  48%,52% {stroke-dashoffset:0;  stroke:var(--accent)}
  /* switch to cleaning: stroke shifts, ring drains */
  58%     {stroke-dashoffset:0;  stroke:#0e0e10}
  94%,100%{stroke-dashoffset:264;stroke:#0e0e10}
}
.sm-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.sm-num{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--bg-ink);line-height:1}
.sm-num span{font-size:10px;font-weight:600;margin-left:2px;opacity:0.6}
.sm-caption{font-size:9px;color:rgba(14,14,16,0.5);font-weight:500;letter-spacing:0.06em;text-transform:uppercase}

/* Sparkle removed — keeping animation calm and serious */
.sm-spark{display:none}

/* File list — each item cleanly fades + rises, collapsing its space so items below flow up */
.sm-list{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;position:relative}
.sm-item{display:flex;align-items:center;gap:8px;font-size:10.5px;color:rgba(14,14,16,0.75);padding:5px 8px;background:rgba(14,14,16,0.03);border-radius:6px;opacity:0;max-height:26px;overflow:hidden}
.sm-tick{width:14px;height:14px;border-radius:50%;background:var(--accent);color:var(--bg-ink);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 200ms}
.sm-lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-sz{font-family:ui-monospace,Menlo,monospace;font-weight:600;color:var(--bg-ink);font-size:10px}

/* One animation per item: enters during scan, then at its cleaning moment fades up + collapses.
   The collapse (max-height 26→0, padding/margin/gap to 0) lets siblings below flow up naturally. */
.sm-item.i1{animation:smItemFly1 13s infinite both}
.sm-item.i2{animation:smItemFly2 13s infinite both}
.sm-item.i3{animation:smItemFly3 13s infinite both}
.sm-item.i4{animation:smItemFly4 13s infinite both}

/* Shared cleaning exit: fade + rise 8px, then collapse the space so list tightens upward */
@keyframes smItemFly1{
  0%,3%   {opacity:0;transform:translateY(8px);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  8%,50%  {opacity:1;transform:translateY(0);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  /* 54%: begin exit — fade+rise */
  54%     {opacity:1;transform:translateY(0);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  60%     {opacity:0;transform:translateY(-8px);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  /* 64%: collapse space (siblings flow up) */
  64%,100%{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-5px}
}
@keyframes smItemFly2{
  0%,6%   {opacity:0;transform:translateY(8px);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  12%,62% {opacity:1;transform:translateY(0);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  62%     {opacity:1;transform:translateY(0);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  68%     {opacity:0;transform:translateY(-8px);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  72%,100%{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-5px}
}
@keyframes smItemFly3{
  0%,9%   {opacity:0;transform:translateY(8px);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  16%,70% {opacity:1;transform:translateY(0);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  70%     {opacity:1;transform:translateY(0);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  76%     {opacity:0;transform:translateY(-8px);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  80%,100%{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-5px}
}
@keyframes smItemFly4{
  0%,12%  {opacity:0;transform:translateY(8px);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  20%,78% {opacity:1;transform:translateY(0);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  78%     {opacity:1;transform:translateY(0);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  84%     {opacity:0;transform:translateY(-8px);max-height:26px;padding-top:5px;padding-bottom:5px;margin-bottom:0}
  88%,100%{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-5px}
}

/* ============ Focos chat (in-flow) ============ */
.art-focos.fc-anim{position:relative;z-index:2;margin:14px 0 10px;flex:1;min-height:160px;display:flex;flex-direction:column;gap:8px;padding:4px 0}
.fc-chat{border-radius:14px;font-size:11.5px;line-height:1.4}
/* Typed balloon: outer chat anchors right; inner .fc-type controls width via ch-steps so the balloon genuinely widens with the text */
.fc-chat.you{align-self:flex-end;color:var(--bg-ink);font-weight:500;max-width:92%;padding:0;background:transparent;border:0}
.fc-type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;background:var(--accent);padding:9px 13px;border-radius:14px;border-bottom-right-radius:4px;animation:fcType 12s steps(35,end) infinite;vertical-align:bottom}
.fc-caret{display:inline-block;width:1px;height:14px;background:var(--bg-ink);margin-left:-4px;vertical-align:middle;animation:fcCaret 12s infinite,fcBlink 0.55s steps(2,start) infinite}
@keyframes fcType{0%,12%{width:0}30%{width:35ch}85%,100%{width:35ch}}
@keyframes fcCaret{0%,10%{opacity:0}13%,30%{opacity:1}32%,100%{opacity:0}}
@keyframes fcBlink{50%{opacity:0}}

.fc-chat.bot{background:rgba(14,14,16,0.04);border:1px solid rgba(14,14,16,0.06);color:var(--bg-ink);align-self:flex-start;display:flex;align-items:baseline;gap:8px;border-bottom-left-radius:4px;padding:10px 14px;max-width:85%}
.fc-timer{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.fc-meta{font-size:10px;color:rgba(14,14,16,0.5);text-transform:uppercase;letter-spacing:0.06em}

/* Player card */
.fc-player{align-self:stretch;background:rgba(14,14,16,0.04);border:1px solid rgba(14,14,16,0.06);border-radius:14px;padding:9px 11px;display:flex;align-items:center;gap:10px}
.fc-play{width:28px;height:28px;border-radius:50%;background:var(--bg-ink);color:#fff;display:flex;align-items:center;justify-content:center;border:0;flex-shrink:0;cursor:pointer}
.fc-tracks{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.fc-track{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--bg-ink)}
.fc-tr-ic{width:14px;text-align:center;color:rgba(14,14,16,0.55);font-size:11px}
.fc-tr-nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.fc-eq i{display:block;width:2px;background:var(--accent);border-radius:1px}
.fc-eq i:nth-child(1){animation:fcEq 900ms ease-in-out infinite}
.fc-eq i:nth-child(2){animation:fcEq 700ms 100ms ease-in-out infinite}
.fc-eq i:nth-child(3){animation:fcEq 1100ms 200ms ease-in-out infinite}
.fc-eq i:nth-child(4){animation:fcEq 800ms 50ms ease-in-out infinite}
.fc-eq.r i:nth-child(1){animation:fcEq 1200ms 60ms ease-in-out infinite}
.fc-eq.r i:nth-child(2){animation:fcEq 900ms 200ms ease-in-out infinite}
.fc-eq.r i:nth-child(3){animation:fcEq 1050ms 120ms ease-in-out infinite}
.fc-eq.r i:nth-child(4){animation:fcEq 750ms 0ms ease-in-out infinite}
@keyframes fcEq{0%,100%{height:2px}50%{height:10px}}

.fc-s1{opacity:0;transform:translateY(8px);animation:fcShow1 12s infinite both}
.fc-s2{opacity:0;transform:translateY(8px);animation:fcShow2 12s infinite both}
.fc-s3{opacity:0;transform:translateY(8px);animation:fcShow3 12s infinite both}
@keyframes fcShow1{0%,2%{opacity:0;transform:translateY(8px)}6%,95%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes fcShow2{0%,32%{opacity:0;transform:translateY(8px)}36%,95%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes fcShow3{0%,38%{opacity:0;transform:translateY(8px)}42%,95%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}

.art-soon{position:absolute;top:50%;right:24px;transform:translateY(-50%);font-family:var(--font-serif);font-style:italic;font-size:80px;color:rgba(14,14,16,0.06);pointer-events:none;z-index:1}

/* ================= INLINE DETAIL ================= */
.inline-detail{grid-column:1/-1;grid-row:span 3;background:#fff;border-radius:22px;padding:var(--space-10);display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-10);overflow:hidden;border:1px solid rgba(14,14,16,0.06);position:relative;animation:expand 500ms var(--ease-out)}
@keyframes expand{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.inline-detail .info h3{font-family:var(--font-display);font-size:40px;font-weight:700;letter-spacing:-0.03em;line-height:1;margin-bottom:var(--space-4)}
.inline-detail .info h3 .serif{padding:0 0.06em}
.inline-detail .info p.lead{font-size:16px;line-height:1.55;color:rgba(14,14,16,0.7);margin-bottom:var(--space-6)}
.feature-list{display:grid;gap:10px;margin-bottom:var(--space-6)}
.feat{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--bg-canvas);border-radius:10px}
.feat .bullet{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent);color:var(--bg-ink);font-size:11px;font-weight:700}
.feat .txt .name{font-weight:600;font-size:13px;line-height:1.3;color:var(--bg-ink)}
.feat .txt .desc{font-size:12px;color:rgba(14,14,16,0.55);line-height:1.5;margin-top:2px}
.inline-detail .actions{display:flex;gap:10px;flex-wrap:wrap}
.inline-detail .actions .btn{padding:12px 20px;border-radius:9999px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.inline-detail .actions .btn.primary{background:var(--bg-ink);color:#fff}
.inline-detail .actions .btn.ghost{background:transparent;border:1px solid rgba(14,14,16,0.12);color:var(--bg-ink)}
.inline-detail .preview{border-radius:16px;overflow:hidden;aspect-ratio:4/3;position:relative;background:var(--bg-ink)}
.inline-detail .close-btn{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:9999px;background:var(--bg-canvas);border:1px solid rgba(14,14,16,0.08);display:flex;align-items:center;justify-content:center;transition:background 150ms;z-index:3}
.inline-detail .close-btn:hover{background:#e8e6e1}

/* ================= STATS STRIP (lovable-style) ================= */
.stats{padding:var(--space-16) 0}
.stats-head{max-width:var(--container-wide);margin:0 auto var(--space-10);padding:0 var(--space-6);text-align:center}
.stats-head h2{font-family:var(--font-display);font-size:clamp(40px,6vw,88px);font-weight:700;letter-spacing:-0.04em;line-height:0.98;color:var(--bg-ink)}
.stats-head h2 .serif{padding:0 0.06em}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.stat{padding:40px 28px;border-radius:22px;background:var(--bg-ink);color:#fff;position:relative;overflow:hidden}
.stat.accent{background:var(--accent);color:var(--bg-ink)}
.stat .num{font-family:var(--font-display);font-size:72px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.stat .num .serif{font-size:0.5em;font-weight:400;opacity:0.7;padding-left:0.1em}
.stat .lbl{font-size:13px;opacity:0.65;margin-top:8px;max-width:240px;line-height:1.5}
.stat.accent .lbl{opacity:0.75}

/* ================= PHILOSOPHY ================= */
.philosophy{padding:var(--space-24) 0}
.phil-inner{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.princ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--space-12)}
.princ{padding:36px 28px;border-radius:22px;background:#fff;border:1px solid rgba(14,14,16,0.06);display:flex;flex-direction:column;gap:14px;min-height:260px}
.princ .num{font-family:var(--font-serif);font-style:italic;font-size:36px;color:rgba(14,14,16,0.25);line-height:1}
.princ h4{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-0.02em;line-height:1.2}
.princ h4 .serif{padding:0 0.04em}
.princ p{font-size:14px;line-height:1.6;color:rgba(14,14,16,0.6);margin-top:auto}

/* ================= STUDIO (atmospheric photo strips) ================= */
.studio{padding:var(--space-20) 0 var(--space-16);overflow:hidden}
.studio-head{max-width:var(--container-wide);margin:0 auto var(--space-10);padding:0 var(--space-6);display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.studio-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(14,14,16,0.4)}
.studio-head h3{font-family:var(--font-display);font-size:clamp(28px,3.2vw,44px);font-weight:700;letter-spacing:-0.025em;line-height:1.1;color:var(--bg-ink);max-width:560px;text-align:right}
.studio-head h3 .serif{padding:0 0.04em}

/* Full-bleed strip: break out of container */
.strip{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;padding:8px 0;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.strip-top{margin-bottom:18px}

.strip-track{display:flex;gap:16px;width:max-content;will-change:transform}
.strip-top .strip-track{animation:stripLeft 70s linear infinite}
.strip-bot .strip-track{animation:stripRight 80s linear infinite}
@keyframes stripLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes stripRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Individual "photo" — FIXED HEIGHT, variable width. Future real images cover-fit. */
.sn{flex-shrink:0;height:200px;width:260px;border-radius:14px;background:var(--bg,#ddd);background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(14,14,16,0.04) inset,0 8px 24px -12px rgba(14,14,16,0.18)}
/* soft vignette + grain-ish dot pattern to feel photographic */
.sn::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 25%,rgba(255,255,255,0.25),transparent 55%),radial-gradient(ellipse at 75% 80%,rgba(0,0,0,0.18),transparent 55%)}
.sn::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.08) 1px,transparent 1.2px);background-size:3px 3px;mix-blend-mode:overlay;opacity:0.6}

/* Warm, filmic color palette — studio life vibe */
.sn-a{--bg:url(/images/ourteam/ourteam-a.jpg)}       /* golden hour desk */
.sn-b{--bg:url(/images/ourteam/ourteam-b.jpg)}       /* teal screen glow */
.sn-c{--bg:url(/images/ourteam/ourteam-c.jpg)}       /* morning window */
.sn-d{--bg:url(/images/ourteam/ourteam-d.jpg)}       /* evening monitor */
.sn-e{--bg:url(/images/ourteam/ourteam-e.jpg)}       /* coffee steam */
.sn-f{--bg:url(/images/ourteam/ourteam-f.jpg)}       /* plant corner */
.sn-g{--bg:url(/images/ourteam/ourteam-g.jpg)}                    /* dusk sky */
.sn-h{--bg:url(/images/ourteam/ourteam-h.jpg)}        /* late night */
.sn-i{--bg:url(/images/ourteam/ourteam-i.jpg)}        /* warm paper */
.sn-j{--bg:url(/images/ourteam/ourteam-j.jpg)}                    /* deep green */
.sn-k{--bg:url(/images/ourteam/ourteam-k.jpg)}        /* parchment + rust */
.sn-l{--bg:url(/images/ourteam/ourteam-l.jpg)}        /* cool morning */
.sn-m{--bg:url(/images/ourteam/ourteam-m.jpg)}        /* keyboard light */
.sn-n{--bg:url(/images/ourteam/ourteam-n.jpg)}        /* sunset wall */
.sn-o{--bg:url(/images/ourteam/ourteam-o.jpg)}        /* pastel morning */
.sn-p{--bg:url(/images/ourteam/ourteam-p.jpg)}        /* dusk film */

/* Width varies for casual rhythm; height stays constant (200px) */
.strip-top .sn:nth-child(3n+1){width:220px}
.strip-top .sn:nth-child(3n+2){width:160px}
.strip-top .sn:nth-child(3n+3){width:320px}
.strip-bot .sn:nth-child(3n+1){width:300px}
.strip-bot .sn:nth-child(3n+2){width:200px}
.strip-bot .sn:nth-child(3n+3){width:180px}

@media (max-width:720px){
  .studio-head{flex-direction:column;align-items:flex-start}
  .studio-head h3{text-align:left}
  .sn{height:150px}
  .strip-top .sn:nth-child(3n+1){width:170px}
  .strip-top .sn:nth-child(3n+2){width:130px}
  .strip-top .sn:nth-child(3n+3){width:240px}
  .strip-bot .sn:nth-child(3n+1){width:220px}
  .strip-bot .sn:nth-child(3n+2){width:160px}
  .strip-bot .sn:nth-child(3n+3){width:140px}
}

/* ================= TESTIMONIALS ================= */
.tests{padding:var(--space-24) 0}
.tests-head{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-8);align-items:end;max-width:var(--container-wide);margin:0 auto var(--space-12);padding:0 var(--space-6)}
.tests-head h2{font-family:var(--font-display);font-size:clamp(40px,6vw,88px);font-weight:700;letter-spacing:-0.04em;line-height:0.98}
.tests-head h2 .serif{padding:0 0.06em}
.tests-head .right{display:flex;align-items:center;gap:16px;justify-content:flex-end}
.tests-head .count{font-size:13px;color:rgba(14,14,16,0.45)}
.arrows{display:flex;gap:8px}
.arrow{width:44px;height:44px;border-radius:9999px;border:1px solid rgba(14,14,16,0.12);background:transparent;display:flex;align-items:center;justify-content:center;transition:all 200ms}
.arrow:hover{background:var(--bg-ink);color:#fff;border-color:var(--bg-ink)}

.tests-track{overflow-x:auto;overflow-y:hidden;max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6);-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
.tests-track::-webkit-scrollbar{display:none}
.tests-slider{display:flex;gap:14px;will-change:transform}
.tests-slider .test-card{scroll-snap-align:start}
.test-card{flex-shrink:0;width:400px;padding:32px;background:#fff;border:1px solid rgba(14,14,16,0.06);border-radius:22px;display:flex;flex-direction:column;gap:18px;position:relative;min-height:300px}
.test-card.dark{background:var(--bg-ink);color:#fff;border-color:transparent}
.test-card .qmark{font-family:var(--font-serif);font-style:italic;font-size:60px;line-height:0.5;color:rgba(14,14,16,0.2)}
.test-card.dark .qmark{color:rgba(255,255,255,0.35)}
.test-card p{font-size:17px;line-height:1.5;font-weight:400}
.test-card .author{display:flex;align-items:center;gap:12px;margin-top:auto}
.test-card .avatar{width:40px;height:40px;border-radius:9999px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--bg-ink);font-weight:700;font-size:13px}
.test-card .author .n{font-size:13px;font-weight:600;line-height:1.2}
.test-card .author .r{font-size:12px;opacity:0.55;margin-top:2px}
.test-card .app-tag{position:absolute;top:24px;right:24px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:9999px;background:rgba(14,14,16,0.05);color:rgba(14,14,16,0.6)}
.test-card.dark .app-tag{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.7)}

/* ================= PRE-FOOTER ================= */
.pre-cta{padding:var(--space-20) 0}
.pre-cta-inner{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6);background:var(--bg-ink);color:#fff;border-radius:28px;padding:80px 40px;text-align:center;position:relative;overflow:hidden}
.pre-cta-inner h2{font-family:var(--font-display);font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-0.035em;line-height:1.05;max-width:800px;margin:0 auto var(--space-5)}
.pre-cta-inner h2 .serif{padding:0 0.04em;color:var(--accent)}
.pre-cta-inner p{font-size:16px;line-height:1.55;color:rgba(255,255,255,0.62);max-width:460px;margin:0 auto var(--space-8)}
.pre-cta-inner .btn-primary{background:var(--accent);color:var(--bg-ink)}
.pre-cta-inner .btn-primary .arr{background:var(--bg-ink);color:var(--accent)}

/* ================= FOOTER ================= */
footer{position:relative;padding:var(--space-16) 0 var(--space-8);background:var(--bg-canvas)}
.footer-inner{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.footer-mega{font-family:var(--font-display);font-size:clamp(60px,16vw,220px);font-weight:700;letter-spacing:-0.05em;line-height:0.88;color:var(--bg-ink);margin-bottom:var(--space-12)}
.footer-mega .serif{padding:0 0.05em;font-weight:400}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-10);padding-bottom:var(--space-10);border-bottom:1px solid rgba(14,14,16,0.08)}
.footer-left .footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4)}
.footer-left .footer-logo img{width:36px;height:36px;border-radius:9px}
.footer-left .footer-logo span{font-family:var(--font-display);font-size:18px;font-weight:700}
.footer-left p{font-size:14px;color:rgba(14,14,16,0.6);line-height:1.6;max-width:280px;margin-bottom:var(--space-4)}
.email-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:#fff;border:1px solid rgba(14,14,16,0.08);border-radius:10px;color:var(--bg-ink);font-size:13px;width:fit-content;transition:background 200ms}
.email-chip:hover{background:#fafaf7}
.footer-col h4{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(14,14,16,0.4);margin-bottom:var(--space-4)}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--bg-ink);transition:opacity 150ms}
.footer-col a:hover{opacity:0.55}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-6)}
.footer-bottom .left{display:flex;gap:var(--space-4);flex-wrap:wrap}
.footer-bottom a,.footer-bottom span{font-size:12px;color:rgba(14,14,16,0.5)}
.social-row{display:flex;gap:8px}
.footer-bottom .social-row a{width:34px;height:34px;border-radius:9999px;background:#fff;border:1px solid rgba(14,14,16,0.08);display:flex;align-items:center;justify-content:center;color:var(--bg-ink);font-size:14px;opacity:1;transition:all 200ms}
.footer-bottom .social-row a:hover{background:var(--bg-ink);color:#fff;border-color:var(--bg-ink)}

/* ================= AOS ================= */
.aos{opacity:0;transform:translateY(20px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.aos.in{opacity:1;transform:translateY(0)}
.aos[data-delay="1"]{transition-delay:70ms}
.aos[data-delay="2"]{transition-delay:140ms}
.aos[data-delay="3"]{transition-delay:210ms}
.aos[data-delay="4"]{transition-delay:280ms}
.aos[data-delay="5"]{transition-delay:350ms}

/* ================= TWEAKS ================= */
.tweaks{position:fixed;bottom:24px;right:24px;z-index:300;width:300px;background:#fff;border:1px solid rgba(14,14,16,0.08);border-radius:18px;box-shadow:0 20px 60px rgba(14,14,16,0.15);padding:18px;display:none;flex-direction:column;gap:14px}
.tweaks.show{display:flex}
.tweaks h3{font-family:var(--font-display);font-size:13px;font-weight:700;display:flex;justify-content:space-between;align-items:center;color:var(--bg-ink)}
.tweaks h3 button{font-size:20px;color:rgba(14,14,16,0.5);line-height:1}
.tweaks .group{display:flex;flex-direction:column;gap:6px}
.tweaks .group label{font-size:10px;font-weight:700;color:rgba(14,14,16,0.4);text-transform:uppercase;letter-spacing:0.1em}
.tweaks .opts{display:flex;gap:6px;flex-wrap:wrap}
.tweaks .opt{padding:7px 12px;font-size:12px;font-weight:500;border-radius:8px;background:var(--bg-canvas);color:rgba(14,14,16,0.7);transition:all 150ms;cursor:pointer;border:1px solid transparent}
.tweaks .opt.active{background:var(--bg-ink);color:#fff}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){
  .hero h1{font-size:clamp(42px,9vw,84px)}
  .hero-row{grid-template-columns:1fr;gap:var(--space-6)}
  .hero-ctas{justify-content:flex-start}
  .app-strip{grid-template-columns:repeat(3,1fr)}
  .bento{grid-template-columns:repeat(6,1fr)}
  .bc[data-size="hero"]{grid-column:span 4;grid-row:span 2}
  .bc[data-size="tall"]{grid-column:span 2;grid-row:span 2}
  .bc[data-size="wide"]{grid-column:span 4}
  .bc[data-size="reg"],.bc[data-size="small"]{grid-column:span 2}
  .inline-detail{grid-template-columns:1fr}
  .stats-grid,.princ-grid{grid-template-columns:1fr}
  .section-head,.tests-head{grid-template-columns:1fr}
  .tests-head .right{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .nav{display:none}
  .header .inner{height:60px;padding:0 var(--space-4)}
  .nav-cta{padding:9px 14px;font-size:12px}
  .logo{font-size:16px}
  .logo img{width:26px;height:26px}

  /* ===== HERO ===== */
  .hero{padding:92px var(--space-4) var(--space-12)}
  .hero h1{font-size:clamp(40px,11.5vw,56px);letter-spacing:-0.035em;line-height:1}
  .hero-badge{font-size:11px;padding:5px 12px 5px 5px;margin-bottom:var(--space-6)}
  .hero-badge .dot{width:18px;height:18px}
  .hero-row{margin-top:var(--space-6);gap:var(--space-5)}
  .hero .sub{font-size:15px;line-height:1.5}
  .hero-ctas{gap:10px;width:100%}
  .hero-ctas .btn-primary,.hero-ctas .btn-ghost{padding:13px 20px;font-size:13px;flex:1;justify-content:center}
  .trust-chip{max-width:100%;gap:10px;padding:10px 12px 10px 10px;margin-top:var(--space-6)}
  .trust-chip .tc-ico{width:32px;height:32px}
  .trust-chip .tc-txt strong{font-size:12px}
  .trust-chip .tc-txt span{font-size:11px}
  .trust-chip .tc-link{font-size:11px;padding:5px 10px}

  /* ===== APP STRIP ===== */
  .app-strip{margin-top:var(--space-10);grid-template-columns:repeat(2,1fr);gap:10px;padding:0 var(--space-4)}
  .strip-card{padding:16px;aspect-ratio:auto;min-height:110px;border-radius:16px}
  .strip-card .icwrap{width:34px;height:34px;border-radius:9px;font-size:14px}
  .strip-card .nm{font-size:13px}
  .strip-card .tg{font-size:10.5px}

  /* ===== SECTIONS ===== */
  .section{padding:var(--space-16) 0}
  .section-head{margin-bottom:var(--space-8);padding:0 var(--space-4);gap:var(--space-4)}
  .section-head h2{font-size:clamp(34px,9vw,52px);line-height:1.02}
  .section-head .aside{font-size:13.5px}

  /* ===== BENTO ===== */
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px;padding:0 var(--space-4)}
  .bc{padding:20px;min-height:auto;border-radius:20px}
  .bc[data-size="hero"],.bc[data-size="tall"],.bc[data-size="wide"],.bc[data-size="reg"],.bc[data-size="small"]{grid-column:span 1;grid-row:auto}
  .bc[data-size="hero"]{min-height:340px}
  .bc .body .dsc{font-size:13px}
  .bc .icwrap{width:36px;height:36px;font-size:14px}
  .bc .nm{font-size:15px}
  .bc .tg{font-size:11px}
  /* Renameit grid: tighten file cards; ensure art has enough room */
  .art-rename.rn-anim{min-height:260px}
  .rn-grid{grid-template-columns:repeat(3,1fr);gap:5px}
  .rn-file{padding:7px 6px;min-height:54px}
  .rn-fname{font-size:8.5px}
  /* Smartly: stack ring + list on very small screens */
  .art-smart-anim{gap:12px;min-height:auto}
  .sm-ring{width:110px;height:110px}
  .sm-lbl b{font-size:20px}
  /* Focos: keep comfortable spacing */
  .art-focos.fc-anim{min-height:auto}

  /* ===== STATS ===== */
  .stats{padding:var(--space-12) 0}
  .stats-head{margin-bottom:var(--space-6);padding:0 var(--space-4)}
  .stats-head h2{font-size:clamp(34px,9vw,52px)}
  .stats-grid{padding:0 var(--space-4);gap:10px}
  .stat{padding:28px 22px;border-radius:18px}
  .stat .num{font-size:52px}
  .stat .lbl{font-size:12.5px}

  /* ===== PHILOSOPHY ===== */
  .philosophy{padding:var(--space-16) 0}
  .phil-inner{padding:0 var(--space-4)}
  .princ-grid{gap:10px;margin-top:var(--space-8)}
  .princ{padding:24px 22px;min-height:auto;gap:10px;border-radius:18px}
  .princ .num{font-size:28px}
  .princ h4{font-size:18px}
  .princ p{font-size:13px}

  /* ===== STUDIO strips ===== */
  .studio{padding:var(--space-12) 0}
  .studio-head{padding:0 var(--space-4);margin-bottom:var(--space-6)}
  .studio-head h3{font-size:26px}
  .sn{height:120px}
  .strip-top .sn:nth-child(3n+1){width:150px}
  .strip-top .sn:nth-child(3n+2){width:110px}
  .strip-top .sn:nth-child(3n+3){width:200px}
  .strip-bot .sn:nth-child(3n+1){width:180px}
  .strip-bot .sn:nth-child(3n+2){width:140px}
  .strip-bot .sn:nth-child(3n+3){width:120px}

  /* ===== TESTIMONIALS ===== */
  .tests{padding:var(--space-16) 0}
  .tests-head{padding:0 var(--space-4);margin-bottom:var(--space-8);gap:var(--space-4)}
  .tests-head h2{font-size:clamp(34px,9vw,52px)}
  .arrow{width:40px;height:40px}
  .tests-track{padding:0 var(--space-4)}
  .test-card{width:calc(100vw - 48px);padding:24px;min-height:260px;border-radius:20px}
  .test-card p{font-size:15px}

  /* ===== PRE-CTA ===== */
  .pre-cta{padding:var(--space-12) 0}
  .pre-cta-inner{padding:48px 24px;border-radius:22px;margin:0 var(--space-4);max-width:calc(100% - 32px)}
  .pre-cta-inner h2{font-size:clamp(30px,8vw,44px)}
  .pre-cta-inner p{font-size:14px}

  /* ===== FOOTER ===== */
  footer{padding:var(--space-10) 0 var(--space-6)}
  .footer-inner{padding:0 var(--space-4)}
  .footer-mega{font-size:clamp(48px,18vw,90px);margin-bottom:var(--space-8)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .footer-left{grid-column:1/-1}
  .footer-left p{max-width:none}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .footer-bottom .left{flex-direction:column;gap:4px}
  .footer-bottom .left span:nth-child(2),.footer-bottom .left span:nth-child(4){display:none}

  /* ===== TWEAKS panel mobile ===== */
  .tweaks{width:calc(100vw - 24px);right:12px;bottom:12px;max-width:340px}
}