/* SkillCI — shared design system (light, Apple/Airbnb-clean).
   Warm monochrome, hairline borders, ultra-soft shadows, quiet motion. */
:root{
  --bg:#ffffff;
  --bg-alt:#fbfbfd;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:rgba(0,0,0,.09);
  --line-2:rgba(0,0,0,.06);
  --card:#ffffff;
  --accent:#4f46e5;        /* indigo — used sparingly, for links/marks */
  --accent-ink:#4338ca;
  --code-bg:#f5f5f7;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 24px -8px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lift:0 12px 40px -12px rgba(0,0,0,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Plus Jakarta Sans",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code,pre,kbd{font-family:var(--mono)}
::selection{background:#dcd9fb}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---- floating clean nav ---- */
.nav{position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-2)}
.nav .inner{max-width:var(--maxw); margin:0 auto; height:56px; padding:0 24px; display:flex; align-items:center; gap:16px}
.nav .brand{display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.3px; font-size:17px; color:var(--ink)}
.nav .brand:hover{text-decoration:none}
.nav .brand img{width:26px;height:26px; border-radius:7px}
.nav .brand b{color:var(--accent)}
.nav .sp{flex:1}
.nav .links{display:flex; gap:4px; align-items:center}
.nav .links a{color:var(--ink-2); font-size:14.5px; font-weight:550; padding:8px 12px; border-radius:8px;
  transition:color .2s var(--ease), background .2s var(--ease)}
.nav .links a:hover{color:var(--ink); background:rgba(0,0,0,.04); text-decoration:none}
.nav .links a.cta{background:var(--ink); color:#fff; padding:8px 16px; border-radius:999px}
.nav .links a.cta:hover{background:#000}
@media(max-width:680px){ .nav .links a.hideable{display:none} }

/* ---- buttons (Apple-pill, clean) ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:16px;
  padding:13px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; line-height:1;
  transition:transform .16s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease)}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.98)}
.btn .ico{transition:transform .2s var(--ease)}
.btn.primary{background:var(--ink); color:#fff}
.btn.primary:hover{background:#000}
.btn.primary:hover .ico{transform:translateX(3px)}
.btn.ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:rgba(0,0,0,.22); box-shadow:var(--shadow-sm)}

/* ---- eyebrow ---- */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line-2); padding:40px 0; color:var(--ink-3); font-size:14px; background:var(--bg-alt)}
.footer .inner{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.footer .sp{flex:1}
.footer a{color:var(--ink-2); font-weight:550}
.footer a:hover{color:var(--ink)}
.footer img{width:22px;height:22px;border-radius:6px}

/* ---- quiet scroll reveals (progressive enhancement) ---- */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
  .js .reveal.in{opacity:1; transform:none}
  .js .reveal[data-d="1"]{transition-delay:.08s}
  .js .reveal[data-d="2"]{transition-delay:.16s}
  .js .reveal[data-d="3"]{transition-delay:.24s}
}