:root{
  --bg:#000;
  --ink:#f3efe6;
  --soft:#aab1c5;
  --gold:#d4af37;
  --card:#0b0b0d;
  --line:rgba(255,255,255,.12);
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;min-height:100vh;
  background:var(--bg);
  color:var(--ink);font-family:var(--font-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* Header */
.top{padding:22px 0;}
.top-inner{display:flex;justify-content:space-between;align-items:center;}
.back{color:var(--soft);font-size:14px;transition:color .2s ease;}
.back:hover{color:var(--ink);}
.mark{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:17px;
}

/* Intro */
.intro{padding:34px 24px 20px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:600;color:var(--gold);margin:0 0 14px;
}
h1{
  font-family:var(--font-display);font-weight:600;line-height:1.1;margin:0 0 16px;
  font-size:clamp(32px,5.4vw,56px);max-width:820px;
}
.lede{color:var(--soft);font-size:18px;max-width:640px;margin:0 0 26px;}
.jump{display:flex;flex-wrap:wrap;gap:10px;}
.jump a{
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:500;color:var(--soft);
  transition:all .2s ease;
}
.jump a:hover,.jump a:focus-visible{background:var(--gold);border-color:var(--gold);color:#1a1405;outline:none;}

/* Projects */
.projects{display:grid;gap:34px;padding-top:34px;padding-bottom:70px;}
.project{
  display:grid;grid-template-columns:minmax(260px,.82fr) 1.3fr;
  background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  scroll-margin-top:24px;
}
.project:nth-child(even){grid-template-columns:1.3fr minmax(260px,.82fr);}
.project:nth-child(even) .visual{order:2;}
.visual{
  position:relative;min-height:340px;padding:26px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(420px 260px at 20% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 70%, #000), #000 85%);
  overflow:hidden;
}
.num{font-family:var(--font-display);font-size:15px;color:rgba(255,255,255,.55);letter-spacing:.08em;}
.wordmark{
  font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4.4vw,52px);line-height:1;
  color:#fff;letter-spacing:-.01em;
}
.glyph{align-self:center;display:flex;align-items:center;justify-content:center;gap:10px;}

/* Prevue: three little cards */
.glyph-prevue{flex-direction:column;gap:9px;}
.glyph-prevue i{
  font-style:normal;font-size:13px;font-weight:600;color:#1a1340;background:rgba(255,255,255,.92);
  padding:9px 26px;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.3);
}
.glyph-prevue i:nth-child(1){transform:translateX(-14px) rotate(-2deg);}
.glyph-prevue i:nth-child(2){transform:translateX(10px) rotate(1.5deg);background:var(--accent);color:#120d33;}
.glyph-prevue i:nth-child(3){transform:translateX(-4px) rotate(-1deg);}

/* Tymely: a running clock */
.glyph-tymely{flex-direction:column;gap:2px;}
.glyph-tymely b{
  font-family:var(--font-display);font-weight:600;font-size:clamp(46px,6vw,68px);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 6px 24px rgba(0,0,0,.35);
}
.glyph-tymely small{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);}

/* Tone: a waveform */
.glyph-tone{gap:6px;height:120px;}
.glyph-tone u{
  display:block;width:9px;border-radius:5px;text-decoration:none;background:rgba(255,255,255,.9);
  animation:wave 1.6s ease-in-out infinite;
}
.glyph-tone u:nth-child(1){height:30%;animation-delay:-.1s;}
.glyph-tone u:nth-child(2){height:55%;animation-delay:-.3s;}
.glyph-tone u:nth-child(3){height:80%;animation-delay:-.5s;}
.glyph-tone u:nth-child(4){height:45%;animation-delay:-.7s;}
.glyph-tone u:nth-child(5){height:95%;animation-delay:-.9s;}
.glyph-tone u:nth-child(6){height:60%;animation-delay:-1.1s;}
.glyph-tone u:nth-child(7){height:100%;animation-delay:-1.3s;}
.glyph-tone u:nth-child(8){height:50%;animation-delay:-1.5s;}
.glyph-tone u:nth-child(9){height:75%;animation-delay:-.2s;}
.glyph-tone u:nth-child(10){height:40%;animation-delay:-.6s;}
.glyph-tone u:nth-child(11){height:25%;animation-delay:-1s;}
@keyframes wave{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.45);}}

/* Pop: balloons */
.glyph-pop{gap:0;align-items:flex-end;height:140px;}
.glyph-pop em{
  display:block;border-radius:50% 50% 48% 48%;background:var(--accent);position:relative;
  box-shadow:inset -8px -10px 0 rgba(0,0,0,.14), 0 10px 22px rgba(0,0,0,.28);
  animation:bob 4s ease-in-out infinite;
}
.glyph-pop em::after{
  content:'';position:absolute;left:50%;bottom:-26px;width:1.5px;height:26px;background:rgba(255,255,255,.6);
}
.glyph-pop em:nth-child(1){width:54px;height:66px;background:#ffd24f;margin-right:-6px;animation-delay:-.4s;}
.glyph-pop em:nth-child(2){width:98px;height:118px;z-index:1;}
.glyph-pop em:nth-child(3){width:58px;height:70px;background:#5cc8ff;margin-left:-8px;animation-delay:-1.4s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* Body */
.body{padding:34px 36px 36px;display:flex;flex-direction:column;}
.kind{margin:0 0 10px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--accent);}
.body h2{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.6vw,42px);line-height:1.08;margin:0 0 6px;}
.tagline{margin:0 0 22px;font-family:var(--font-display);font-size:19px;color:var(--soft);font-style:italic;}
.body h3{
  margin:18px 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);
}
.body p{margin:0;color:#d5d9e6;font-size:16px;max-width:640px;}
.links{margin-top:26px;}
.btn{
  display:inline-block;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14.5px;
  background:var(--accent);color:#11112a;transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.4);outline:none;}

/* Footer */
.foot{padding:10px 24px 70px;color:var(--soft);}
.foot p{margin:0 0 6px;}
.foot a{color:var(--ink);border-bottom:1px solid var(--gold);}
.foot .small{font-size:13px;opacity:.7;}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .glyph-tone u,.glyph-pop em{animation:none;}
}

@media (max-width:820px){
  .project,.project:nth-child(even){grid-template-columns:1fr;}
  .project:nth-child(even) .visual{order:0;}
  .visual{min-height:240px;}
  .body{padding:26px 22px 28px;}
}

/* ===== Prevue theme: the app's own palette (black, white, warm night glow) ===== */
.theme-prevue{background:#000;border-color:rgba(255,255,255,.14);}
.theme-prevue .visual{
  background:#000;
  border-right:1px solid rgba(255,255,255,.12);
  align-items:center;justify-content:center;
}
.theme-prevue .num{position:absolute;top:26px;left:26px;}
.prevue-stage{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;}
.prevue-mark{width:112px;height:auto;display:block;}
.pv-word{font-family:'Inter',var(--font-body);font-weight:600;letter-spacing:.22em;color:#fff;}
.pv-word-lg{font-size:24px;padding-left:.22em;}
.prevue-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px;}
.prevue-chips i{
  font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#d9dae0;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);padding:7px 14px;border-radius:999px;
}
.pv-lockup{display:inline-flex;align-items:center;gap:12px;}
.pv-lockup .pv-mark{width:30px;height:auto;flex:none;}
.pv-lockup .pv-word{font-size:30px;line-height:1;}
.theme-prevue h2.brandname{margin:4px 0 10px;font-size:inherit;}
.theme-prevue h3{color:#fff;opacity:1;}
.theme-prevue .tagline{font-family:var(--font-body);font-style:normal;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:#a3a3a3;}
.theme-prevue .body p{color:#d4d4d4;}
.theme-prevue .btn{background:#fff;color:#000;font-weight:700;}
.theme-prevue .btn:hover,.theme-prevue .btn:focus-visible{box-shadow:0 10px 26px rgba(255,255,255,.18);}

/* ===== Tymely theme: near-black, lime, Sora + JetBrains Mono ===== */
.theme-tymely{background:#050505;border-color:#262626;font-family:'Sora',var(--font-body);}
.theme-tymely .visual{
  background:
    radial-gradient(300px 300px at 50% 50%, rgba(163,230,53,.13), transparent 70%),
    #0a0a0a;
  border-right:1px solid #262626;align-items:center;justify-content:center;
}
.theme-tymely:nth-child(even) .visual{border-right:0;border-left:1px solid #262626;}
.theme-tymely .num{position:absolute;top:26px;left:26px;color:#8a8a8a;font-family:'JetBrains Mono',monospace;}
.theme-tymely .kind{color:#A3E635;font-family:'JetBrains Mono',monospace;letter-spacing:.14em;}
.theme-tymely h3{color:#A3E635;font-family:'JetBrains Mono',monospace;letter-spacing:.14em;}
.theme-tymely .body p{color:#c9c9c9;}
.theme-tymely .tagline{font-family:'Sora',var(--font-body);font-style:normal;font-weight:600;color:#fff;font-size:18px;}
.theme-tymely .btn{background:#A3E635;color:#050505;font-weight:700;font-family:'Sora',var(--font-body);}
.ty-logo{display:inline-flex;align-items:center;gap:9px;}
.ty-logo .ty-mark{width:28px;height:28px;flex:none;}
.logo-word{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.02em;text-transform:lowercase;color:#fff;font-size:20px;line-height:1;}
.logo-word b{color:#A3E635;font-weight:700;}
.ty-logo-lg .ty-mark{width:44px;height:44px;}
.ty-logo-lg .logo-word{font-size:36px;}
.theme-tymely h2.brandname{margin:2px 0 8px;font-size:inherit;}

.phone{
  width:min(280px,100%);border:1px solid #262626;border-radius:44px;background:#050505;padding:10px;
  box-shadow:0 0 0 1px #000, 0 30px 60px rgba(0,0,0,.6), 0 0 80px rgba(163,230,53,.10);
}
.phone-in{border:1px solid rgba(38,38,38,.7);border-radius:35px;padding:22px 18px 20px;background:#050505;}
.phone .ty-logo{display:flex;justify-content:center;}
.ty-nums{display:flex;justify-content:space-between;align-items:flex-end;margin:26px 0 8px;}
.ty-nums .r{text-align:right;}
.lbl{margin:0 0 4px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a;}
.num-big{margin:0;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:26px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;}
.num-big.lime{color:#A3E635;}
.ty-qr{aspect-ratio:1/1;width:100%;border:1px solid #262626;border-radius:16px;padding:6px;opacity:.92;overflow:hidden;}
.ty-qr svg{width:100%;height:100%;display:block;border-radius:10px;}
.ty-note{margin:8px 0 0;min-height:16px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#8a8a8a;}
.ty-note.lime{color:#A3E635;}
.ty-stop{margin-top:14px;height:44px;display:grid;place-items:center;border:2px solid #fff;border-radius:16px;font-weight:600;font-size:14px;color:#fff;}
@media (max-width:820px){.theme-tymely .visual{border-left:0;border-right:0;border-bottom:1px solid #262626;}.theme-prevue .visual{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);}}

/* ===== Lucid theme: void black, navy fog, teal ===== */
.theme-lucid{background:#030507;border-color:rgba(157,180,198,.18);font-family:'Hanken Grotesk',var(--font-body);}
.theme-lucid .visual{
  background:
    radial-gradient(320px 260px at 50% 40%, rgba(53,230,212,.16), transparent 70%),
    radial-gradient(420px 320px at 80% 90%, rgba(13,34,66,.9), transparent 70%),
    #030507;
  border-right:1px solid rgba(157,180,198,.14);align-items:center;justify-content:center;overflow:hidden;
}
.theme-lucid .visual::before{
  content:'';position:absolute;inset:-30%;
  background:radial-gradient(closest-side, rgba(53,230,212,.10), transparent 70%);
  animation:lucidDrift 14s ease-in-out infinite alternate;
}
@keyframes lucidDrift{from{transform:translate(-8%,-6%) scale(1);}to{transform:translate(10%,8%) scale(1.15);}}
.theme-lucid .num{position:absolute;top:26px;left:26px;color:#88a0ae;font-family:'IBM Plex Mono',monospace;z-index:1;}
.theme-lucid h3{color:#35e6d4;font-family:'IBM Plex Mono',monospace;letter-spacing:.14em;}
.theme-lucid .body p{color:#cfe0e6;}
.theme-lucid .tagline{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;color:#9db4c6;font-size:23px;}
.theme-lucid h2.brandname{margin:0 0 4px;font-size:inherit;}
.lc-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:clamp(34px,4.2vw,50px);letter-spacing:.34em;color:#e4f0f3;text-shadow:0 0 24px rgba(53,230,212,.45);}
.theme-lucid .btn{background:#35e6d4;color:#021214;font-weight:800;box-shadow:0 0 28px rgba(53,230,212,.3);}
.phone-lucid{position:relative;z-index:1;border-color:rgba(157,180,198,.22);background:#030507;box-shadow:0 0 0 1px #000, 0 30px 60px rgba(0,0,0,.6), 0 0 80px rgba(53,230,212,.12);}
.phone-lucid .phone-in{background:linear-gradient(#030507,#081830 140%);border-color:rgba(157,180,198,.14);padding:34px 18px 22px;}
.lc-word{margin:0 0 14px;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:26px;letter-spacing:.2em;color:#e4f0f3;text-shadow:0 0 18px rgba(53,230,212,.5);}
.lc-line{margin:0 0 22px;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:16px;line-height:1.35;color:#9db4c6;}
.lc-field{border:1px solid rgba(157,180,198,.22);border-radius:12px;padding:12px 14px;color:#88a0ae;font-size:13px;margin-bottom:10px;background:rgba(3,5,7,.55);}
.lc-btn{display:grid;place-items:center;height:42px;border:1px solid rgba(157,180,198,.28);border-radius:12px;color:#e4f0f3;font-weight:600;font-size:13.5px;}
.lc-primary{background:#35e6d4;color:#021214;border-color:#35e6d4;font-weight:800;box-shadow:0 0 24px rgba(53,230,212,.35);margin-bottom:10px;}
.lc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:820px){.theme-lucid .visual{border-right:0;border-bottom:1px solid rgba(157,180,198,.14);}}
@media (prefers-reduced-motion:reduce){.theme-lucid .visual::before{animation:none;}}