/* kobalt site — shared styles for every page on kobaltdev.ltd */
:root {
  --kobalt: #2447F5; --kobalt-2: #1A37D2; --kobalt-soft: #8D9FFF;
  /* spacing scale: every gap on the site comes from here */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(96px, 12vw, 160px);
  --radius: 14px;
  --bg: #F5F6F9; --bg-2: #FFFFFF; --fg: #0A0B10; --muted: #4F5566; --faint: #7A8091;
  --line: #DCDFE7; --line-2: #C7CBD6; --accent: #2447F5; --glow: rgba(36, 71, 245, .16); --pos: #0E9F6E;
  --scrub-dim: .16;
}
:root[data-theme="dark"] {
  --bg: #08090D; --bg-2: #0F1117; --fg: #F4F5F8; --muted: #A2A8B7; --faint: #6F7586;
  --line: #1E212B; --line-2: #2C303C; --accent: #8D9FFF; --glow: rgba(36, 71, 245, .32); --pos: #34D399; --scrub-dim: .2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08090D; --bg-2: #0F1117; --fg: #F4F5F8; --muted: #A2A8B7; --faint: #6F7586;
    --line: #1E212B; --line-2: #2C303C; --accent: #8D9FFF; --glow: rgba(36, 71, 245, .32); --pos: #34D399; --scrub-dim: .2;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.6 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .2s, color .2s; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.display { font-family: "Unbounded", system-ui, sans-serif; font-weight: 700; letter-spacing: -.03em; }
.accent { color: var(--accent); }
/* the name "kobalt" is always set in the brand face */
.kb { font-family: "Unbounded", system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: .94em; }
.blue { color: var(--kobalt); }
:root[data-theme="dark"] .blue { color: var(--kobalt-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blue { color: var(--kobalt-soft); } }

/* ---------- header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: 64px; }
.brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.lockup { height: 20px; width: auto; }
.lk-dark { display: none; }
:root[data-theme="dark"] .lk-light { display: none; } :root[data-theme="dark"] .lk-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lk-light { display: none; } :root:not([data-theme="light"]) .lk-dark { display: block; } }
.crumb { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-weight: 500; font-size: 15px; white-space: nowrap; }
.crumb::before { content: ""; width: 1px; height: 18px; background: var(--line-2); }
.top nav { display: flex; align-items: center; gap: var(--s2); }
.top nav .link { padding: var(--s2) var(--s3); border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.top nav .link:hover { color: var(--fg); background: var(--bg-2); }
.icon-btn { appearance: none; border: 1px solid var(--line-2); background: transparent; color: var(--fg); width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn:hover { border-color: var(--faint); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 48px; padding: 0 var(--s5); border-radius: 10px; font-weight: 500; font-size: 15px; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn svg { width: 14px; height: 14px; transition: transform .15s; }
.btn:hover svg { transform: translateX(3px); }
.btn.primary { background: var(--kobalt); color: #fff; }
.btn.primary:hover { background: var(--kobalt-2); }
.btn.ghost { border: 1px solid var(--line-2); color: var(--fg); }
.btn.ghost:hover { border-color: var(--faint); }
.btn.text { padding: 0 var(--s3); color: var(--accent); }
.btn.text:hover { background: color-mix(in srgb, var(--kobalt) 8%, transparent); }
.btn.text:hover svg { transform: translate(2px, -2px); }
.acct { gap: var(--s2); padding: 0 var(--s3) 0 var(--s3); }
.acct.in { padding-left: 4px; }
.acct img, .acct .ini { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.acct .ini { background: var(--kobalt); color: #fff; display: grid; place-items: center; font: 700 10px "Unbounded", system-ui, sans-serif; }
.acct .pic { position: relative; display: block; width: 26px; height: 26px; flex: none; }
.acct .pic .deco { position: absolute; width: 32px; height: 32px; left: -3px; top: -3px; border-radius: 0; pointer-events: none; }
.acct .nm { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.btn.sm { height: 36px; padding: 0 var(--s4); font-size: 14px; border-radius: 8px; }
.actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ---------- sections */
section { padding-top: var(--section); }
.eyebrow { display: block; color: var(--accent); margin-bottom: var(--s4); }
h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; max-width: 18ch; }
.sub { color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); max-width: 52ch; margin-top: var(--s5); }
.section-head { margin-bottom: var(--s7); }

/* ---------- product frame */
.frame { border: 1px solid var(--line-2); border-radius: var(--radius); background: #0B0C11; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 80px -30px rgba(8, 10, 30, .45); }
.chrome { display: flex; align-items: center; gap: var(--s3); height: 38px; padding: 0 var(--s4); border-bottom: 1px solid #1E212B; background: #10121A; }
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: #2A2E3A; display: block; }
.chrome .dots { display: flex; gap: 6px; flex: none; }
.chrome .url { flex: 1; max-width: 340px; margin: 0 auto; height: 24px; border-radius: 6px; background: #181B24; color: #8B91A1; font: 12px/24px "JetBrains Mono", monospace; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 var(--s3); }
.chrome .sp { width: 46px; flex: none; }
.shot { aspect-ratio: 16 / 10; background: #0B0C11; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.caption { margin-top: var(--s4); font-size: 13px; color: var(--faint); }

/* ---------- closing band */
.closing { margin-top: var(--section); border-radius: 20px; background: var(--kobalt); color: #fff; padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.closing h2 { max-width: 15ch; }
.closing p { color: rgba(255,255,255,.8); margin-top: var(--s4); max-width: 44ch; }
.closing .btn { background: #fff; color: #0A0B10; }
.closing .btn:hover { background: #E8EBFF; }
.closing .mark { position: absolute; right: -40px; bottom: -60px; height: 280px; width: auto; opacity: .14; z-index: -1; }

/* ---------- footer */
footer { margin-top: var(--s8); border-top: 1px solid var(--line); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s6); padding-bottom: var(--s6); color: var(--faint); font-size: 14px; }
footer nav { display: flex; gap: var(--s5); flex-wrap: wrap; }
footer nav a { color: var(--muted); }
footer nav a:hover { color: var(--fg); }

/* ---------- scroll effects (only when JS runs; content is visible without it) */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .wi { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 45ms); }
.js [data-split].in .wi { transform: none; }
.js [data-scrub] .sw { opacity: var(--scrub-dim); transition: opacity .25s linear; }
.js [data-scrub] .sw.on { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js [data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-split] .wi, .js .reveal { transform: none !important; opacity: 1 !important; transition: none !important; }
  .js [data-scrub] .sw { opacity: 1 !important; }
  .js [data-parallax] { transform: none !important; }
}

@media (max-width: 640px) {
  .top nav .link { display: none; }
  .acct .nm { display: none; }
  .acct.in { padding: 0 4px; }
  .crumb { font-size: 14px; }
  .actions .btn { flex: 1 1 100%; }
  .closing { grid-template-columns: 1fr; }
  .closing .btn { width: 100%; }
  .closing .mark { height: 170px; right: -70px; bottom: -40px; opacity: .1; }
  footer .wrap { flex-direction: column; align-items: flex-start; }
}