:root { color-scheme:dark; --bg:#111012; --surface:#19171b; --surface-2:#211e23; --text:#f4f0eb; --muted:#ada6aa; --faint:#736d72; --line:rgba(244,240,235,.12); --accent:#d06c61; --plum:#8d657f; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 80% 8%,rgba(141,101,127,.16),transparent 33rem),radial-gradient(circle at -5% 70%,rgba(208,108,97,.08),transparent 30rem); }
a { color:inherit; }
.site-header,main,footer { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { font-size:22px; font-weight:850; letter-spacing:-.055em; text-decoration:none; }.wordmark span { color:var(--accent); }
nav { display:flex; align-items:center; gap:30px; } nav a { color:var(--muted); font-size:13px; text-decoration:none; } nav a:hover { color:var(--text); }
.nav-contact { padding:9px 15px; border:1px solid var(--line); border-radius:999px; color:var(--text); }
.hero { min-height:calc(100vh - 82px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr); align-items:center; gap:clamp(50px,7vw,100px); padding:58px 0 68px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }.eyebrow span { width:28px; height:1px; background:var(--accent); }
h1 { margin:0; font-size:clamp(68px,8.4vw,108px); font-weight:760; line-height:.81; letter-spacing:-.075em; } h1 em { color:transparent; font-style:normal; -webkit-text-stroke:1.4px var(--text); }
.hero-lead { max-width:535px; margin:34px 0 30px; color:var(--muted); font-size:clamp(17px,1.8vw,21px); line-height:1.55; }
.hero-contact { max-width:350px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.hero-contact>span { display:block; margin-bottom:8px; color:var(--faint); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero-contact a { display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--text); font-size:14px; font-weight:700; text-decoration:none; }
.hero-contact a:hover { color:var(--accent); }
.hero-contact b { font-size:18px; }
.hero-projects { padding:24px; border:1px solid var(--line); border-radius:28px; background:rgba(25,23,27,.7); box-shadow:0 36px 100px rgba(0,0,0,.24); backdrop-filter:blur(16px); }
.projects-label { display:flex; justify-content:space-between; margin:0 3px 18px; color:var(--text); font-size:13px; font-weight:700; }.projects-label span { color:var(--faint); font:10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.app-card { position:relative; display:grid; grid-template-columns:82px 1fr 28px; align-items:center; gap:22px; min-height:164px; padding:24px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface-2); text-decoration:none; transition:transform 180ms ease,border-color 180ms ease,background 180ms ease; }
.app-card + .app-card { margin-top:12px; }.app-card:hover { transform:translateY(-3px); border-color:rgba(244,240,235,.23); background:#262228; }
.app-card::after { content:""; position:absolute; right:-65px; bottom:-100px; width:210px; height:210px; border-radius:50%; opacity:.1; pointer-events:none; }.app-card-cw::after { background:#a65f50; }.app-card-owrx::after { background:#6f536d; }
.app-card img { position:relative; z-index:1; width:82px; height:82px; border-radius:21px; object-fit:cover; box-shadow:0 14px 35px rgba(0,0,0,.32); }
.app-copy { position:relative; z-index:1; }.app-copy span { color:var(--faint); font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.app-copy h2 { margin:5px 0 7px; font-size:clamp(25px,2.7vw,32px); line-height:1; letter-spacing:-.04em; }.app-copy p { max-width:340px; margin:0; color:var(--muted); font-size:13px; }
.app-card>b { position:relative; z-index:1; color:var(--accent); font-size:20px; transition:transform 180ms ease; }.app-card:hover>b { transform:translate(3px,-3px); }
.projects-note { margin:17px 4px 0; color:var(--faint); font-size:11px; }
footer { min-height:105px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; border-top:1px solid var(--line); color:var(--faint); font-size:11px; } footer span:last-child { justify-self:end; }
:focus-visible { outline:3px solid rgba(208,108,97,.45); outline-offset:4px; }
@media(max-width:940px){
  .hero{grid-template-columns:1fr;min-height:0;padding:72px 0;gap:56px}
  .hero-copy{width:100%;max-width:650px;margin-inline:auto;text-align:center}
  .hero-copy .eyebrow{justify-content:center}
  .hero-lead{margin-inline:auto}
  .hero-contact{margin-inline:auto;text-align:left}
  .hero-projects{max-width:700px;width:100%;margin-inline:auto}
}
@media(max-width:660px){
  .site-header,main,footer{width:min(calc(100% - 32px),var(--max))}
  .site-header{min-height:72px}
  .hero{padding:54px 0 58px;gap:44px}
  h1{font-size:clamp(64px,22vw,86px)}
  .hero-lead{margin-top:28px;font-size:17px}
  .hero-contact{max-width:320px;margin-top:26px}
  .hero-projects{padding:14px;border-radius:22px}
  .projects-label{margin:4px 4px 14px}
  .app-card{grid-template-columns:66px minmax(0,1fr) 20px;gap:15px;min-height:145px;padding:18px 15px;border-radius:17px}
  .app-card img{width:66px;height:66px;border-radius:17px}
  .app-copy{min-width:0}
  .app-copy h2{font-size:24px}
  .app-copy p{font-size:12px}
  footer{grid-template-columns:1fr;padding:25px 0;gap:5px;text-align:center}
  footer .wordmark,footer span{justify-self:center}
  footer span:last-child{justify-self:center}
}
@media(max-width:380px){
  .site-header,main,footer{width:calc(100% - 24px)}
  nav a{font-size:12px}
  .hero{padding-top:46px}
  h1{font-size:clamp(58px,21vw,72px)}
  .hero-lead{font-size:16px}
  .hero-projects{padding:12px}
  .projects-label{align-items:center}
  .app-card{grid-template-columns:1fr;justify-items:center;gap:12px;min-height:0;padding:24px 20px;text-align:center}
  .app-card img{width:72px;height:72px;border-radius:18px}
  .app-copy h2{margin-top:6px;font-size:25px}
  .app-copy p{max-width:245px;font-size:13px;line-height:1.5}
  .app-card>b{position:absolute;top:19px;right:19px}
  .projects-note{text-align:center;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.app-card,.app-card>b{transition:none}}