:root{
  --bg:#07080a; --ink:#ecedf1; --dim:rgba(236,237,241,.58);
  --dimmer:rgba(236,237,241,.45); --line:rgba(255,255,255,.075);
  --red:#fa3a52;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --display:'Chakra Petch',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ambient */
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 55% at 50% -8%,rgba(120,130,170,.13),transparent 62%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{position:relative;z-index:1;max-width:1248px;margin:0 auto;padding:0 clamp(24px,5vw,96px)}

.meta{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:clamp(10px,1.4vw,12px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dimmer)}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}

/* ---- logo lockup ---- */
.logo{display:inline-flex;align-items:flex-end;line-height:1;white-space:nowrap}
.logo b{
  font-family:'Poppins',system-ui,sans-serif;font-weight:700;
  font-size:var(--logo-size);letter-spacing:-.01em;color:#f3f4f7;
}
.logo svg{
  height:calc(var(--logo-size) * .78);width:auto;
  margin-left:calc(var(--logo-size) * -.20);
  margin-bottom:calc(var(--logo-size) * 0.1);
  flex:none;
}

/* ---- header ---- */
header{padding-top:clamp(40px,6vw,96px)}
.hero{margin-top:clamp(48px,8vw,96px)}
.hero .logo{--logo-size:clamp(52px,10vw,120px)}
.tagline{margin:clamp(24px,4vw,38px) 0 0;max-width:620px;
  font-size:clamp(17px,2.2vw,20px);line-height:1.6;color:rgba(236,237,241,.58);text-wrap:pretty}
.cta{margin-top:clamp(30px,4vw,52px);display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);
  font-size:14px;color:rgba(236,237,241,.9);
  transition:background .3s,border-color .3s,color .3s}
.btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26)}
.btn span{color:rgba(236,237,241,.45)}
.btn.ghost{background:none;border-color:rgba(255,255,255,.055);color:var(--dim)}
.btn.ghost:hover{color:var(--ink);border-color:rgba(255,255,255,.16)}

/* ---- work ---- */
#work{padding-top:clamp(72px,12vw,132px);scroll-margin-top:24px}
.rule{border-top:1px solid var(--line);padding-top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer);
  display:flex;justify-content:space-between;align-items:baseline}
.grid{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}

.card{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:34px 34px 0;border-radius:18px;background:var(--tint),#0c0e12;
  border:1px solid var(--line);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s}
.card:hover{transform:translateY(-5px);border-color:var(--edge);box-shadow:0 30px 70px -34px var(--halo)}
.card .top-line{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-grad)}
.card .bloom{position:absolute;top:-96px;left:50%;transform:translateX(-50%);
  width:440px;height:190px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,var(--halo),transparent 70%)}
.card>*:not(.bloom):not(.top-line){position:relative}
.card-head{display:flex;align-items:flex-start;justify-content:space-between}
.mark{width:62px;height:62px;border-radius:14px;overflow:hidden;border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;flex:none}
.mark img{width:100%;height:100%;object-fit:cover}
.mark.pad{background:#0a0a1a;box-shadow:inset 0 0 30px var(--halo)}
.mark.pad img{width:46px;height:46px;object-fit:contain}
.mark.word{width:auto;padding:0 20px;background:#0b0d12;box-shadow:inset 0 0 30px var(--halo);
  font-family:'Cinzel',serif;font-weight:600;font-size:21px;letter-spacing:.26em;
  color:#e9a83c;text-shadow:0 0 18px rgba(233,168,60,.35)}
.idx{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(236,237,241,.35)}
.card h2{margin:28px 0 0;font-family:var(--display);font-weight:600;font-size:25px;
  letter-spacing:.03em;color:#f0f1f4;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chip{padding:4px 11px 5px;border-radius:999px;border:1px solid var(--edge);background:var(--chip-bg);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.card p{margin:12px 0 0;font-size:15px;line-height:1.68;color:var(--dim);text-wrap:pretty;flex:1}
.card footer{margin-top:26px;padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.card footer span:first-child{color:rgba(236,237,241,.48)}
.card footer span:last-child{color:var(--accent)}

.ghost-card{margin-top:22px;padding:30px 34px;border-radius:18px;border:1px dashed rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.ghost-card .plus{width:46px;height:46px;border-radius:12px;border:1px dashed rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:rgba(236,237,241,.24);font-size:20px;flex:none}
.ghost-card .l{display:flex;align-items:center;gap:22px}
.ghost-card .t{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:.03em;color:rgba(236,237,241,.62)}
.ghost-card .s{margin-top:5px;font-size:14px;color:rgba(236,237,241,.45)}
.ghost-card .r{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,237,241,.38)}

/* ---- footer ---- */
.site-foot{margin-top:clamp(80px,14vw,140px);padding:40px 0 60px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.site-foot .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer)}
.site-foot .mail{display:inline-block;margin-top:14px;font-family:var(--display);font-weight:500;
  font-size:clamp(21px,3.4vw,31px);letter-spacing:.02em;color:#eceef2;
  border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:4px;transition:border-color .3s}
.site-foot .mail:hover{border-color:rgba(255,255,255,.6)}
.site-foot .r{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:rgba(236,237,241,.45);line-height:2}
.site-foot .r a{transition:color .3s}
.site-foot .r a:hover{color:var(--ink)}

/* ---- legal pages ---- */
.legal{max-width:720px;padding-top:clamp(48px,8vw,88px);padding-bottom:96px}
.legal .logo{--logo-size:34px}
.legal h1{margin:clamp(40px,7vw,72px) 0 8px;font-family:var(--display);font-weight:600;
  font-size:clamp(30px,5vw,44px);letter-spacing:.02em;color:#f3f4f7}
.legal .upd{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}
.legal h2{margin:44px 0 10px;font-family:var(--display);font-weight:600;font-size:19px;
  letter-spacing:.03em;color:#e6e8ec}
.legal p,.legal li{font-size:16px;line-height:1.75;color:rgba(236,237,241,.62);text-wrap:pretty}
.legal ul{padding-left:20px;margin:10px 0}
.legal li{margin:6px 0}
.legal a:not(.btn):not(.logo){color:#ff8496;border-bottom:1px solid rgba(255,132,150,.35)}
.legal a:not(.btn):not(.logo):hover{border-color:#ff8496}
.legal .back{margin-top:56px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dim);transition:color .3s}
.legal .back:hover{color:var(--ink)}

@media (max-width:560px){
  .card{padding:26px 24px 0}
  .card p{min-height:0}
  .site-foot .r{text-align:left}
}