/* Twelbe — "Blueprint" ------------------------------------------------------
   Light-first Swiss/technical grid. Hairline rules do all the spacing work.
   Radius is 0 everywhere; shadows exist on product cards only.
--------------------------------------------------------------------------- */

:root {
  --bg: #F2F1ED;
  --panel: #FFFFFF;
  --fg: #111114;
  --muted: #5C5C55;
  --line: #DBDAD4;
  --accent: #FF5C1A;
  --onaccent: #0B0B0B;
  --grid: rgba(0, 0, 0, .045);
  --shadow: 0 18px 40px -34px rgba(0, 0, 0, .4);
}

:root[data-theme="dark"] {
  --bg: #0C0C0E;
  --panel: #131316;
  --fg: #EDEDE8;
  --muted: #8B8B84;
  --line: rgba(255, 255, 255, .13);
  --grid: rgba(255, 255, 255, .05);
  --shadow: 0 18px 40px -30px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

body {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  min-height: 100vh;
}

a { color: var(--fg); text-decoration: none; }
input, button { font: inherit; color: inherit; }
::placeholder { color: var(--muted); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sheet {
  max-width: 1400px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.mark {
  width: 12px;
  height: 12px;
  background: var(--accent);
  display: block;
  flex: 0 0 auto;
}
.mark-sm { width: 9px; height: 9px; }

/* Header ------------------------------------------------------------------ */

.head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(14px, 2vw, 20px);
  border-right: 1px solid var(--line);
}

.wordmark {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  padding: 0 clamp(14px, 2vw, 22px);
  overflow: hidden;
}

.nav a {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s;
}
.nav a:hover { color: var(--fg); }

.theme-toggle {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color .25s, background .25s;
}
.theme-toggle:hover { color: var(--fg); background: var(--panel); }

.head-cta {
  display: flex;
  align-items: center;
  background: var(--accent);
  color: var(--onaccent);
  padding: 0 clamp(14px, 2vw, 22px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter .25s;
}
.head-cta:hover { filter: brightness(1.08); color: var(--onaccent); }

/* Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 0;
}

.mesh { position: absolute; pointer-events: none; }

.mesh-grid {
  inset: -70px 0;
  animation: creep 26s linear infinite;
  background-image:
    linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 64px),
    linear-gradient(to right, var(--grid) 0 1px, transparent 1px 64px);
  background-size: 64px 64px;
}

.mesh-bloom {
  inset: -20% -10% auto -10%;
  height: 70%;
  opacity: .5;
  filter: blur(80px);
  background: radial-gradient(28% 60% at 78% 40%, rgba(255, 92, 26, .28), transparent 72%);
}

@keyframes creep {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -64px, 0); }
}

.hero-row {
  position: relative;
  display: flex;
  align-items: stretch;
}

.rail { flex: 0 0 clamp(0px, 3vw, 44px); }
.rail-left { border-right: 1px solid var(--line); }
.rail-right {
  border-left: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  font-size: 12px;
  color: var(--muted);
}

.hero-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(18px, 3vw, 30px) clamp(14px, 2.4vw, 30px) 0;
}

.eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.display {
  margin: clamp(16px, 2.6vw, 28px) 0 0;
  font-size: clamp(2.1rem, 10.6vw, 9rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: .06em;
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 64px);
  align-items: flex-end;
  justify-content: space-between;
  margin: clamp(28px, 4.5vw, 54px) 0 0;
  padding: clamp(18px, 2.6vw, 28px) 0;
  border-top: 1px solid var(--line);
}

.lede {
  margin: 0;
  flex: 1 1 320px;
  max-width: 52ch;
  font-size: clamp(.82rem, 1.15vw, .95rem);
  line-height: 1.65;
  color: var(--muted);
  letter-spacing: .01em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--onaccent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: filter .25s, transform .25s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-2px); color: var(--onaccent); }

.quiet-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}
.quiet-link:hover { color: var(--fg); border-color: var(--accent); }

/* Section shell ----------------------------------------------------------- */

.block {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 0;
}

.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(14px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.block-head h2 {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Products ---------------------------------------------------------------- */

/* Four products: a 2x2 block. A three-column grid would strand the fourth
   card alone on its own row, and four columns would squeeze each card so
   narrow that the category label could no longer sit beside the wordmark. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 34px);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, background .5s;
}
/* Dividers sit between cards, never against the sheet edge. */
.card { border-right: 1px solid var(--line); }
.card:last-child { border-right: none; }

.card-worthzy:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow), 0 28px 70px -30px rgba(255, 92, 26, .5);
}
.card-tolk:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow), 0 28px 70px -30px rgba(150, 205, 190, .55);
}
.card-bodyflou:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow), 0 28px 70px -30px rgba(120, 220, 180, .5);
}
.card-seencam:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow), 0 28px 70px -30px rgba(240, 83, 45, .5);
}

/* Every row is full with an even number of cards, so the divider is simply
   dropped on the right-hand column. */
.card:nth-child(2n) { border-right: none; }

@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
  .card { border-right: none; }
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.slot {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-live { background: var(--accent); color: var(--onaccent); padding: 4px 8px; }
.tag-dev  { border: 1px solid var(--line); color: var(--muted); padding: 3px 8px; }

.app-icon {
  width: 52px;
  height: 52px;
  display: block;
  border: 1px solid var(--line);
  margin-top: clamp(10px, 2vw, 22px);
}

.product-name {
  margin: clamp(12px, 2vw, 22px) 0 0;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: .9;
  letter-spacing: -.045em;
  font-weight: 700;
  text-transform: uppercase;
  /* Baseline row so the category sits beside the wordmark, and drops to
     its own line only when the card is too narrow to hold both. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
}

/* App Store category line — quiet, never competing with the wordmark. */
.product-kind {
  /* Just under a third of the wordmark. em locks the ratio to the parent's
     clamp() at every breakpoint. A true .3333em overflows the three-up card
     by 3px (SEENCAM) and 13px (Worthzy) in this monospace face, which forces
     the label onto its own line; .3em keeps it on the baseline beside the
     wordmark and is indistinguishable at this size. */
  font-size: .3em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
}

/* The wordmark's closing period, in accent. */
.product-name .dot { color: var(--accent); }

.product-desc {
  margin: 0;
  font-size: clamp(.8rem, 1.05vw, .9rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 38ch;
}

.card-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-top: auto;
  padding-top: clamp(18px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

.datum {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.8;
}
.datum b { color: var(--fg); font-weight: 400; }

.go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  font-size: 14px;
  transition: background .25s, color .25s, border-color .25s;
}
.go:hover { background: var(--accent); color: var(--onaccent); border-color: var(--accent); }

/* How we work ------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.step { padding: clamp(20px, 3vw, 34px); }
.step:not(:last-child) { border-right: 1px solid var(--line); }

.step-num {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: clamp(24px, 4vw, 48px);
}

.step h3 {
  margin: 0 0 12px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: -.01em;
  font-weight: 700;
  text-transform: uppercase;
}

.step p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 32ch;
}

/* Contact ----------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.contact-left {
  padding: clamp(24px, 3.6vw, 44px) clamp(14px, 2.4vw, 30px);
  border-right: 1px solid var(--line);
}

.invite {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: .85rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 34ch;
}

.email {
  display: inline-block;
  font-size: clamp(1.15rem, 3.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 700;
  text-transform: uppercase;
  transition: color .25s;
}
.email:hover { color: var(--accent); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-form input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: clamp(18px, 2.6vw, 26px) clamp(14px, 2.4vw, 30px);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  outline: none;
  transition: background .25s;
}
.contact-form input:focus { background: var(--panel); }
.contact-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.contact-form input[aria-invalid="true"] { border-bottom-color: var(--accent); }

.contact-form button {
  background: var(--accent);
  border: 0;
  color: var(--onaccent);
  padding: clamp(18px, 2.6vw, 26px) clamp(14px, 2.4vw, 30px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: filter .25s;
}
.contact-form button:hover { filter: brightness(1.08); }

.form-done {
  padding: clamp(18px, 2.6vw, 26px) clamp(14px, 2.4vw, 30px);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Footer ------------------------------------------------------------------ */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(14px, 2.4vw, 30px);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-weight: 700;
}

.foot-links { display: flex; gap: 18px; }
.foot-links a { color: var(--muted); transition: color .25s; }
.foot-links a:hover { color: var(--accent); }

/* Reveal ------------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].in { opacity: 1; transform: none; }

/* No JS: never leave the page invisible. The `js` class is set in <head>. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-mesh] { animation: none !important; }
  html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }