/* notecode - the download site.
   The palette is the app's own. The app's editor, its installer window and
   this page are meant to look like one product, so the colours come from the
   same place rather than from a stock dark theme. */

:root {
  --void:    #07090F;
  --canvas:  #0B0E17;
  --surface: #11151F;
  --raised:  #161B27;
  --border:  #232A3A;
  --border2: #2E3750;
  --text:    #E8ECF5;
  --muted:   #939DB4;
  --dim:     #5F6980;
  --violet:  #A78BFA;
  --cyan:    #22D3EE;
  --mint:    #34D399;
  --amber:   #FBBF24;
  --rose:    #FB7185;

  --mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The same aurora the app draws behind its own panels, so the site and the
   app read as one thing. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(720px 420px at 6% -8%,  rgba(139,92,246,0.16), transparent 70%),
    radial-gradient(600px 340px at 98% 2%,  rgba(34,211,238,0.09), transparent 70%),
    radial-gradient(560px 420px at 50% 108%, rgba(139,92,246,0.07), transparent 72%);
}

body > * { position: relative; z-index: 1; }

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--text); }

code, pre { font-family: var(--mono); }

/* ------------------------------------------------------------------ header */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 28px;
  background: rgba(11, 14, 23, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--text); }

/* The mark is a small bracket and a dot: a cursor and a point of light. */
.mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(140deg, var(--violet), #6D4AD8 60%, var(--cyan));
  box-shadow: 0 0 0 1px rgba(167,139,250,0.35), 0 6px 18px -8px rgba(139,92,246,0.9);
  position: relative;
  flex: none;
}
.mark::after {
  content: "";
  position: absolute;
  inset: 6px 6px auto auto;
  width: 4px;
  height: 8px;
  border-radius: 1px;
  background: var(--void);
}

.word { font-size: 15px; }
.brand.small .mark { width: 18px; height: 18px; border-radius: 5px; }
.brand.small .mark::after { inset: 5px 4px auto auto; width: 3px; height: 6px; }

.nav { display: flex; gap: 22px; }
.nav a {
  color: var(--muted);
  font-size: 14px;
  transition: color .15s ease;
}
.nav a:hover { color: var(--text); }

/* -------------------------------------------------------------------- hero */

main { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.hero {
  padding: 88px 0 64px;
  max-width: 780px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px var(--violet);
}
.dot.mint { background: var(--mint); box-shadow: 0 0 10px var(--mint); }

h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 650;
}
.grad {
  background: linear-gradient(96deg, var(--violet) 8%, #C4B5FD 42%, var(--cyan) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 0 0 30px;
  max-width: 62ch;
  font-size: 17px;
  color: var(--muted);
}

/* ------------------------------------------------------------ the command */

.cmd {
  border: 1px solid var(--border2);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--raised), var(--surface));
  box-shadow: 0 20px 50px -30px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden;
}

.cmd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px 9px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(7, 9, 15, 0.4);
}

.shell {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border2);
  border-radius: 7px;
  background: var(--raised);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .15s ease;
}
.copy:hover { color: var(--text); border-color: var(--violet); }
.copy.done { color: var(--mint); border-color: var(--mint); }

.cmd-line {
  display: block;
  padding: 20px 20px 22px;
  font-size: 14.5px;
  color: var(--text);
  word-break: break-all;
  line-height: 1.5;
}
.ps { color: var(--violet); user-select: none; margin-right: 10px; }

.alt {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--dim);
}
.alt a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border2); text-underline-offset: 3px; }
.alt a:hover { color: var(--violet); }

.actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 550;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); color: inherit; }
.btn:active { transform: translateY(0); }

.btn.primary {
  background: linear-gradient(180deg, #8B5CF6, #6D4AD8);
  border-color: #7C5AF0;
  color: #fff;
  box-shadow: 0 10px 28px -14px rgba(139,92,246,0.95);
}
.btn.primary:hover { box-shadow: 0 16px 36px -14px rgba(139,92,246,1); color: #fff; }

.btn.ghost {
  background: var(--raised);
  border-color: var(--border2);
  color: var(--text);
}
.btn.ghost:hover { border-color: var(--violet); color: var(--text); }

.tag {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dim);
}

/* ------------------------------------------------------------------- steps */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 26px 0 76px;
}
.steps article {
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.steps .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  margin-bottom: 12px;
  background: rgba(167,139,250,0.13);
  border: 1px solid rgba(167,139,250,0.3);
  color: var(--violet);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
}
.steps h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; }
.steps p { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- sections */

.section { padding: 26px 0 76px; }
.section h2 {
  margin: 0 0 6px;
  font-size: 27px;
  letter-spacing: -0.02em;
  font-weight: 620;
}
.sub { margin: 0 0 26px; color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------------------- panes */

.panes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pane {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.pane:hover { border-color: var(--border2); transform: translateY(-2px); }
.pane-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(7,9,15,0.45);
}
.pane-bar .l { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); }
.pane-title {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.pane p { margin: 0; padding: 16px; font-size: 13.5px; color: var(--muted); }
.pane strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------- rea */

.rea {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: center;
  padding-top: 30px;
}
.rea h2 { margin-bottom: 16px; }
.rea-copy p { color: var(--muted); font-size: 15.5px; }
.rea-copy strong { color: var(--text); }
.rea-copy code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--cyan);
  font-size: 13px;
}
.rea-copy .btn { margin-top: 8px; }
.fineprint { font-size: 13px !important; color: var(--dim) !important; margin-top: 14px !important; }

.rea-card {
  border: 1px solid var(--border2);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--raised), var(--surface));
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.95);
  overflow: hidden;
}
.rea-card-head {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(7,9,15,0.4);
}
.rea-card pre {
  margin: 0;
  padding: 18px 20px 22px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text);
  overflow-x: auto;
}
.c-violet { color: var(--violet); }
.c-cyan { color: var(--cyan); }
.c-muted { color: var(--dim); }

/* ------------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.card-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }

.facts { list-style: none; margin: 0 0 20px; padding: 0; }
.facts li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.facts li span { color: var(--dim); }
.facts li b { color: var(--text); font-weight: 550; font-family: var(--mono); font-size: 12.5px; }
.card .btn { margin-top: auto; justify-content: center; }

/* ------------------------------------------------------------------ footer */

footer {
  border-top: 1px solid var(--border);
  background: var(--void);
}
.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 28px 40px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.foot p { margin: 0; color: var(--dim); font-size: 13.5px; }
.foot .nav { margin-left: auto; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .panes, .cards, .steps { grid-template-columns: repeat(2, 1fr); }
  .rea { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 660px) {
  .top { padding: 12px 18px; }
  .nav { gap: 16px; }
  main { padding: 0 18px; }
  .hero { padding: 56px 0 40px; }
  .panes, .cards, .steps { grid-template-columns: 1fr; }
  .foot .nav { margin-left: 0; }
  .cmd-line { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}