/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/* ==========================================================================
   Qder.ai — the landing page, on the layout system measured off qoder.com/en.

   WHAT WAS TAKEN AND WHAT WAS NOT

   Taken: the LAYOUT GRAMMAR, measured off the live site at a 1280px viewport
   rather than guessed — a 64px-tall sticky header on the page's own ground
   colour with no border and no blur, sections capped at 1440px with 84px/64px
   padding, a 36px/48px headline at weight 500 (restrained, not a hero shout),
   a subhead that sits to the RIGHT of the headline column and is right-
   aligned, 36px pill buttons at 14px/500, a centred 32px/42px section title
   over a 632px centred subhead, a pill tab strip, and 1040x480 product cards
   at 16px radius on a hairline border with no shadow.

   Not taken: their colours, their fonts' role in their brand, their words,
   their product imagery, their logo, their name. Every colour here is from
   Qder's own brand.css, every image is our own file, and every product
   surface on this page is our real interface rebuilt as markup.

   The one exception the founder asked for is the typeface: Instrument Sans,
   which is Google's under the SIL Open Font License and free for anyone to
   use — it is not theirs to lend. Self-hosted here, as this platform
   self-hosts Heebo and Assistant, so the page renders with no third-party
   request.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Qder's own accent and neutrals, straight from public/brand.css. */
  --cobalt:       #0B3FD9;
  --cobalt-press: #0830A8;
  --cobalt-lift:  #3767ED;
  --cobalt-wash:  #EDF2FE;
  --cobalt-line:  #C7D5FB;
  --cobalt-deep:  #0A2FA6;

  --ink:    #080D1C;
  --ink-2:  #1F2942;
  --body:   #4A5570;
  --muted:  #7A849C;
  --line:   #E4E9F4;
  --line-2: #F0F3FA;
  --bg:     #FFFFFF;
  --ground: #F7F9FE;   /* their page ground, in our blue-leaning neutral */
  --card:   #F9FBFF;

  --ok:   #0E7C4A;
  --warn: #A15C00;
  --crit: #C0341D;
  --ok-bg:   #E6F4F1;
  --warn-bg: #FFF4DC;
  --crit-bg: #FDE8E8;

  /* The measured geometry. */
  --shell: 1440px;
  --gutter: 64px;
  --section-y: 84px;
  --nav-h: 64px;
  --r-card: 16px;
  --r-pill: 32px;
  --r-win: 12px;

  /* Latin from Instrument Sans, Hebrew from Assistant: both are loaded with
     unicode-range, so the browser picks per character with no help from us.
     Heebo is here for the one thing it is better at — a heavy Hebrew number. */
  /* One family in two scripts: Instrument Sans carries the Latin, IBM Plex
     Sans Hebrew the Hebrew (its faces claim only the Hebrew range), so a mixed
     line — "₪1,190 לסניף" — comes out in one voice. Both are declared in
     /next.css, which this page loads first. */
  --font: "Instrument Sans", "Plex Hebrew", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: 0; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

/* --------------------------------------------------------------- the strip */

/* 32px tall, the page's accent wash, one sentence and a way out of it. */
.strip {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  background: var(--cobalt-wash);
  color: var(--cobalt-deep);
  font-size: 13px;
  font-weight: 500;
}
.strip a { text-decoration: underline; text-underline-offset: 2px; }
.strip button {
  /* The trailing edge, whichever way the page reads. */
  position: absolute; inset-inline-end: 18px;
  background: none; border: 0; cursor: pointer;
  color: var(--cobalt-deep); font-size: 15px; line-height: 1; padding: 4px;
}
.strip-wrap { position: relative; }

/* ---------------------------------------------------------- the highlight */

/*
 * A selection should not be the browser's blue.
 *
 * The chrome — the bar, the strip, the nav — is furniture, not content, so a
 * stray tap-drag there leaves nothing behind at all: white on the ink that is
 * already there. In the body a selection still has to be visible to be
 * useful, so it gets our own wash instead of the operating system's blue.
 */
.bar ::selection, .strip ::selection, .nav ::selection,
.bar::selection, .strip::selection, .nav::selection {
  background: #FFFFFF;
  color: var(--ink);
}
::selection { background: var(--cobalt-wash); color: var(--ink); }

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

header {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--ground);
}
.nav {
  max-width: var(--shell);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav .brand { display: flex; align-items: center; gap: 8px; margin-inline-end: 8px; }
.nav .brand img { height: 22px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a, .nav .quiet {
  font-size: 14px; font-weight: 500; line-height: 18px; color: var(--body);
  transition: color .15s var(--ease);
}
.nav-links a:hover, .nav .quiet:hover { color: var(--ink); }
.nav .right { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }

/* Their nav pill: a near-white fill on a hairline, not the accent. */
.pill-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 20px;
  background: #FAFBFF; border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 14px; font-weight: 500; color: var(--body);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.pill-quiet:hover { border-color: var(--cobalt-line); color: var(--ink); }

/*
 * `hidden` means hidden.
 *
 * `.btn { display: inline-flex }` outranks the user agent's `[hidden] {
 * display: none }`, so a button the script had hidden — step one's "Back", the
 * passkey button on a device without one — stayed on screen. This is the one
 * place `!important` is the right tool: the attribute is the instruction.
 */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 20px;
  border-radius: var(--r-pill);
  font-family: inherit; font-size: 14px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: var(--cobalt-press); }
.btn-ghost { background: transparent; border-color: #D8DFF0; color: var(--ink); }
.btn-ghost:hover { border-color: var(--cobalt-line); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

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

.hero { padding: 48px var(--gutter) 56px; max-width: var(--shell); margin: 0 auto; }
.hero .eyebrows { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 26px; }
.hero .eyebrows a {
  font-size: 13px; font-weight: 500; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.hero .eyebrows a:hover { color: var(--cobalt); }
.hero .eyebrows .tag {
  color: var(--cobalt-deep); background: var(--cobalt-wash);
  border-radius: 999px; padding: 2px 8px; font-size: 12px;
}

/* The headline column and the description column, as they do it: headline
   left at 772px, description a narrow right-aligned column beside the CTAs. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 772px) minmax(0, 411px); gap: 40px; align-items: end; }
.hero h1 { font-size: 36px; line-height: 48px; }
.hero .ctas { display: flex; gap: 12px; margin-top: 28px; }
/* Aligned to the OUTER edge, which is the right in English and the left in
   Hebrew — `end` says that once instead of twice. */
.hero-desc { font-size: 16px; line-height: 22px; color: var(--muted); text-align: end; align-self: end; padding-bottom: 4px; }

/* The band the hero demo sits in.
 *
 * Theirs is a saturated mid-green field with two darker blades cutting across
 * it, and the product window is CROPPED by the band's bottom edge rather than
 * sitting inside it — that crop is most of why the hero reads as a window onto
 * something larger. Same geometry here, in cobalt, with the blades drawn from
 * our own accent rather than tinted from theirs.
 */
.band {
  position: relative;
  margin-top: 44px;
  background: linear-gradient(158deg, var(--cobalt-lift) 0%, var(--cobalt) 46%, var(--cobalt-deep) 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Two blades, rotated, soft-edged: the shapes read at a glance and cost
   nothing to paint. */
.band::before,
.band::after {
  content: ""; position: absolute; z-index: -1;
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
}
.band::before { width: 1500px; height: 320px; left: -240px; top: -130px; transform: rotate(-11deg); }
.band::after  { width: 1200px; height: 260px; right: -300px; bottom: -90px; transform: rotate(-11deg); background: rgba(8, 13, 28, .10); }

.band-inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 64px var(--gutter) 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 28px;
}
/* The crop. The product runs out of the coloured field; the section below
   cuts it off, which is the whole effect. */
.band-inner > * { margin-bottom: -40px; }

/* The wide surface behind the hero phone: shown from 1000px up, because two
   product surfaces side by side need the width to mean anything. */
/*
 * The wide surface behind the hero phone.
 *
 * It SHRINKS rather than being clipped: the band crops the composition at the
 * bottom on purpose, and a window sliced down its side looks like a mistake
 * instead of a crop. Hidden below 900px, where two surfaces side by side stop
 * meaning anything.
 */
.band-desk { display: none; }
@media (min-width: 900px) {
  .band-desk { display: block; flex: 1 1 auto; min-width: 0; max-width: 640px; }
}
/* The one width where the two would collide: give the phone less and the
   window less, rather than letting either leave the band. */
@media (min-width: 900px) and (max-width: 1180px) {
  .band-inner { gap: 18px; padding-inline: 32px; }
  .band-desk { max-width: min(58vw, 560px); }
}

/* The diner hero's prompt box: the page's one input, and a door into the
   conversation rather than a form that collects something. */
.ask-box {
  margin-top: 26px;
  display: flex; align-items: center; gap: 8px;
  max-width: 560px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 14px 30px -26px rgba(8, 13, 28, .45);
}
:root[dir="rtl"] .ask-box { padding: 6px 18px 6px 6px; }
.ask-box:focus-within { border-color: var(--cobalt-line); }
.ask-box input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 16px; color: var(--ink); padding: 10px 0;
}
.ask-box input::placeholder { color: var(--muted); }
.ask-box .go {
  flex: 0 0 auto; height: 40px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--cobalt); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.ask-box .go:hover { background: var(--cobalt-press); }
.ask-hint { margin-top: 10px; font-size: 13px; color: var(--muted); }

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

.white { background: var(--bg); }
.section-head { text-align: center; max-width: 632px; margin: 0 auto 36px; }
.section-head h2 { font-size: 32px; line-height: 42px; }
.section-head p { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--muted); }

/* The pill tab strip, centred. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.tab {
  height: 36px; padding: 0 20px;
  display: inline-flex; align-items: center;
  background: var(--ground); border: 1px solid transparent; border-radius: 9999px;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--muted);
  cursor: pointer; transition: all .18s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--bg); border-color: var(--line); color: var(--ink); }

/* ------------------------------------------------------- the product row */

/*
 * A filmstrip, not a slideshow.
 *
 * This is the part of qoder.com that carries the section: the cards sit in ONE
 * ROW that runs off both edges of the viewport, the active one is centred, and
 * the neighbours are cut by the screen rather than hidden. You can see that
 * there is more, and you can drag to it. A card that swaps in place says
 * nothing about what else exists.
 *
 * Built on scroll snapping rather than JavaScript positioning: a touch swipe,
 * a trackpad, a shift-wheel and the tab strip all drive the same mechanism,
 * and nothing has to be re-implemented per input device.
 */
.family {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Full-bleed: the row escapes the section's gutters so the neighbouring
     cards are cut by the VIEWPORT, which is what makes the strip read. */
  margin-inline: calc(var(--gutter) * -1);
  padding-block: 4px 18px;
  /* Half a viewport minus half a card, so the first and last can still centre. */
  padding-inline: max(var(--gutter), calc(50% - 520px));
  scrollbar-width: none;
}
.family::-webkit-scrollbar { display: none; }

/* 1040x480 at 16px radius on a hairline, no shadow — measured off theirs. */
.product {
  flex: 0 0 min(1040px, 86vw);
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  min-height: 480px;
  padding: 36px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  /* A card that is not the one being read steps back. */
  opacity: .55;
  transition: opacity .35s var(--ease);
}
.product[data-active="true"] { opacity: 1; }
.product .eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 500; color: var(--body);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px;
}
.product h3 { font-size: 28px; line-height: 34px; margin: 14px 0 2px; }
.product .tagline { font-size: 16px; font-weight: 500; color: var(--body); }
.product p.copy { margin-top: 14px; font-size: 15px; line-height: 23px; color: var(--body); }
.product .go { margin-top: 20px; }

/*
 * The coloured field the product sits on.
 *
 * Theirs puts each window on a green gradient panel inside the card, with the
 * window inset and the field showing past it — that is what stops a row of
 * screenshots looking like a row of screenshots. Ours is the same idea in
 * cobalt, and the blades match the hero band so the page has one accent
 * language rather than two.
 */
.product .stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 400px; min-width: 0;
  padding: 26px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--cobalt-lift) 0%, var(--cobalt) 55%, var(--cobalt-deep) 100%);
  overflow: hidden;
}
.product .stage::before {
  content: ""; position: absolute; z-index: 0;
  width: 900px; height: 210px; left: -120px; top: -70px;
  transform: rotate(-11deg);
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
}
.product .stage > * { position: relative; z-index: 1; max-width: 100%; }

/* ------------------------------------------------------------------- bento */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px;
}
.tile h4 { font-size: 17px; line-height: 24px; }
.tile p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--body); }
.tile .ico {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--cobalt-wash); color: var(--cobalt);
  display: grid; place-items: center; margin-bottom: 14px;
}
.tile .ico svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- partners */

.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; }
.partners img { height: 26px; width: auto; opacity: .65; filter: grayscale(1); transition: opacity .2s var(--ease), filter .2s var(--ease); }
.partners img:hover { opacity: 1; filter: none; }

/* ----------------------------------------------------------------- pricing */

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px; display: flex; flex-direction: column;
}
.plan.lead { border-color: var(--cobalt-line); background: #FBFCFF; }
.plan .name { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan .price { font-size: 30px; line-height: 38px; margin-top: 8px; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan .per { font-size: 13px; color: var(--muted); margin-top: 2px; }
.plan ul { margin-top: 16px; display: grid; gap: 8px; }
.plan li { font-size: 14px; color: var(--body); display: flex; gap: 8px; }
.plan li::before { content: "·"; color: var(--cobalt); font-weight: 700; }
.plan .btn { margin-top: auto; align-self: flex-start; margin-top: 20px; }

/* -------------------------------------------------------------------- close */

.close-cta {
  background: var(--ink); color: #fff; border-radius: var(--r-card);
  padding: 56px; text-align: center;
}
.close-cta h2 { color: #fff; font-size: 32px; line-height: 42px; }
.close-cta p { margin: 12px auto 24px; max-width: 520px; color: #B9C2D8; font-size: 16px; }
.close-cta .btn-ghost { border-color: rgba(255,255,255,.28); color: #fff; }

/* -------------------------------------------------------------------- faq

   Ten answers a restaurateur actually asks for, in a two-column list of
   <details> so the page stays short and the one they want opens in place.
   Native disclosure rather than a scripted accordion: it works before the
   JavaScript arrives, it is announced correctly, and Ctrl-F finds a closed
   answer — which a scripted one hides from the browser's own search. */

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; align-items: start; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

.qa {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg); padding: 0 20px;
  transition: border-color .15s var(--ease);
}
.qa[open] { border-color: var(--cobalt-line); }
.qa summary {
  list-style: none; cursor: pointer;
  padding: 16px 0; font-size: 16px; font-weight: 500; color: var(--ink);
  display: flex; align-items: baseline; gap: 12px;
}
.qa summary::-webkit-details-marker { display: none; }
/* The sign, drawn rather than typed: a plus that becomes a minus, on the far
   side of the reading direction. */
.qa summary::after {
  content: ""; inline-size: 11px; block-size: 11px; flex: 0 0 auto;
  margin-inline-start: auto; align-self: center;
  background:
    linear-gradient(var(--muted), var(--muted)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) center / 1.5px 100% no-repeat;
  transition: transform .2s var(--ease);
}
.qa[open] summary::after { background: linear-gradient(var(--cobalt), var(--cobalt)) center / 100% 1.5px no-repeat; }
.qa p { padding-bottom: 18px; margin-top: -2px; font-size: 14.5px; line-height: 22px; color: var(--body); max-width: 60ch; }

.close-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

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

footer { background: #F9FAFE; border-top: 1px solid var(--line); }
.foot {
  max-width: var(--shell); margin: 0 auto; padding: 56px var(--gutter) 28px;
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px;
}
.foot h5 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.foot a { display: block; font-size: 14px; color: var(--body); padding: 4px 0; }
.foot a:hover { color: var(--cobalt); }
.foot .about p { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 280px; }
.foot .about img { height: 24px; }
.legal {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter) 40px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 13px; color: var(--muted);
}

/* ------------------------------------------------------------------ motion */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------- narrower */

@media (max-width: 1100px) {
  :root { --gutter: 32px; --section-y: 64px; }
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-desc { text-align: start; }
  .product { grid-template-columns: 1fr; padding: 28px; min-height: 0; }
  .grid-3, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; --section-y: 48px; }
  .hero h1 { font-size: 30px; line-height: 40px; }
  /* The headline's own line break is a desktop decision; a phone knows
     better where to wrap 30px type in 375px. */
  .hero h1 br { display: none; }
  /* The strip becomes two lines on a phone, so it stops pretending to be a
     32px bar and the dismiss moves out of the text's way. */
  .strip { height: auto; min-height: 32px; padding: 7px 34px; text-align: center; flex-wrap: wrap; }
  .strip button { top: 4px; inset-inline-end: 8px; }
  .section-head h2, .close-cta h2 { font-size: 26px; line-height: 34px; }
  .btn, .pill-quiet, .tab { height: 44px; }        /* a thumb, not a cursor */
  .nav-links { display: none; }
  .grid-3, .plans { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .close-cta { padding: 32px 22px; }
  .partners { gap: 24px; }
}