/* invata.ai — „caiet cu pătrățele”
   Hârtie albă cu grilă albastră, cerneală de pix, marker galben, notițe de mână pe margine.
   Scris de mână, fără framework, ca să fie ușor de citit și de modificat. */

:root {
  --paper: #fcfcfa;
  --grid: #e3eaf5;
  --margin: #eba5a5;
  --ink: #18233d;
  --ink-soft: #3c475f;
  --muted: #667085;
  --pen: #2045c8;
  --pen-dark: #16349b;
  --marker: #ffe36e;
  --rule: #cdd5e2;
  --card: #ffffff;
  --ok: #24724a;
  --warn: #9b4d16;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font: 18px/1.6 var(--body);
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) {
  /* linia roșie de margine, ca la caiet */
  body::before { content: ""; position: fixed; top: 0; bottom: 0; left: 72px; width: 2px; background: var(--margin); opacity: .7; pointer-events: none; z-index: 0; }
}
img { max-width: 100%; height: auto; }
a { color: var(--pen); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--pen-dark); }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px)); position: relative; z-index: 1; }
@media (min-width: 900px) { .wrap { padding-left: 120px; } }
.narrow { max-width: 760px; }

h1, h2, h3 { font-family: var(--display); line-height: 1.1; letter-spacing: -.015em; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(38px, 6.2vw, 68px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; }
h3 { font-size: 21px; font-weight: 700; }
p { margin: 0; }
.lead { font-size: clamp(19px, 2.2vw, 22px); color: var(--ink-soft); max-width: 36em; }
.muted { color: var(--muted); }
.small { font-size: 15px; }

/* marker galben, ușor strâmb, ca tras de mână */
.mark { background: linear-gradient(100deg, transparent 0 2%, var(--marker) 3% 96%, transparent 98%) no-repeat 0 62% / 100% 58%; padding: 0 .08em; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .mark.anim { background-size: 0% 58%; animation: mark .9s .4s cubic-bezier(.3,.7,.2,1) forwards; }
  @keyframes mark { to { background-size: 100% 58%; } }
}
/* notiță de mână pe margine */
.note { font-family: var(--hand); font-size: 25px; line-height: 1.1; color: var(--pen); font-weight: 600; }
.note-red { color: #c2412d; }

/* ---------- antet ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(252,252,250,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }
.logo { font: 800 22px var(--display); color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.logo span { color: var(--pen); }
.top nav { display: flex; align-items: center; gap: 22px; font-size: 16px; }
.top nav a:not(.btn) { color: var(--ink-soft); text-decoration: none; }
@media (max-width: 640px) { .top nav a:not(.btn) { display: none; } }

/* ---------- butoane ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 18px var(--body); text-decoration: none; padding: 15px 26px; border-radius: 10px; border: 2px solid var(--ink); background: var(--pen); color: #fff; box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s; cursor: pointer; }
.btn:hover { color: #fff; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.small { font-size: 15px; padding: 9px 16px; box-shadow: 3px 3px 0 var(--ink); }
.btn.ghost { background: var(--card); color: var(--ink); }
.btn.ghost:hover { color: var(--ink); }
.btn.block { display: flex; width: 100%; }
.btn[aria-disabled="true"] { opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; }

/* ---------- secțiuni ---------- */
section { padding: 72px 0; }
.kicker { font: 600 14px var(--mono); letter-spacing: .04em; color: var(--muted); margin-bottom: 14px; }

/* hero */
.hero { padding: 64px 0 56px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero h1 { margin-bottom: 22px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font: 500 14px var(--mono); color: var(--muted); }

/* foaia din dreapta: un exercițiu rezolvat */
.sheet { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 26px 26px 22px; box-shadow: 0 1px 0 var(--rule), 0 18px 40px -22px rgba(24,35,61,.35); transform: rotate(-.8deg); }
.sheet::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(2deg); background: rgba(255,227,110,.75); border: 1px solid rgba(0,0,0,.04); }
.sheet .label { font: 600 13px var(--mono); color: var(--muted); }
.sheet .bad { margin: 8px 0 18px; font: 15px/1.5 var(--mono); color: var(--muted); text-decoration: line-through; text-decoration-color: #c2412d; }
.sheet pre { margin: 8px 0 0; font: 14px/1.65 var(--mono); white-space: pre-wrap; color: var(--ink); }
.sheet pre b { color: var(--pen); font-weight: 600; }
.sheet .note { position: absolute; right: -6px; bottom: -40px; transform: rotate(-4deg); }
@media (max-width: 959px) { .sheet { transform: none; } .sheet .note { position: static; display: block; margin-top: 14px; transform: none; } }

/* rezultate (ce poți face după) */
.outcomes { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 28px; counter-reset: o; }
@media (min-width: 860px) { .outcomes { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.outcomes li { counter-increment: o; border-top: 2px solid var(--ink); padding-top: 16px; }
.outcomes li::before { content: counter(o); display: block; font: 800 44px/1 var(--display); color: var(--pen); margin-bottom: 10px; }
.outcomes p { color: var(--ink-soft); margin-top: 8px; }

/* cuprins */
.toc { list-style: none; padding: 0; margin: 34px 0 0; border-top: 2px solid var(--ink); }
.toc li { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.toc .n { font: 800 22px var(--display); color: var(--pen); }
.toc h3 { font-size: 20px; }
.toc .dots { display: flex; align-items: baseline; gap: 10px; }
.toc .dots::after { content: ""; flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-5px); min-width: 20px; }
.toc .min { font: 500 14px var(--mono); color: var(--muted); white-space: nowrap; }
.toc p { grid-column: 2 / -1; color: var(--ink-soft); font-size: 16px; }
.toc .free { grid-column: 2 / -1; font-weight: 600; font-size: 16px; }

/* exemplul concret */
.example { display: grid; gap: 22px; margin-top: 34px; align-items: start; }
.example > *, .hero-grid > *, .two > *, .prices > * { min-width: 0; }
@media (min-width: 900px) { .example { grid-template-columns: .8fr 1.2fr; } }
.msg { background: #eef3ff; border: 1px solid #cfdaf7; border-radius: 16px 16px 16px 4px; padding: 18px 20px; font-size: 17px; }
.msg .who { font: 600 13px var(--mono); color: var(--muted); margin-bottom: 6px; }
.offer { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 22px 24px; box-shadow: 0 16px 34px -24px rgba(24,35,61,.4); }
.offer h3 { font-size: 19px; }
.offer .tbl { overflow-x: auto; margin: 16px 0; }
.offer table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 420px; }
.offer th, .offer td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.offer th { font: 600 13px var(--mono); color: var(--muted); }
.offer .rec { color: var(--pen); }
.offer td.price { font-weight: 700; font-variant-numeric: tabular-nums; }

/* pentru cine */
.two { display: grid; gap: 36px; margin-top: 30px; }
@media (min-width: 860px) { .two { grid-template-columns: 1fr 1fr; gap: 56px; } }
.checklist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 32px; color: var(--ink-soft); }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: -1px; font: 700 20px var(--hand); color: var(--ok); }
.checklist.no li::before { content: "✗"; color: #c2412d; }

/* autor */
.author { display: grid; gap: 24px; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 28px; }
@media (min-width: 720px) { .author:has(> .photo) { grid-template-columns: auto 1fr; gap: 32px; } }
.author .photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--ink); }
.author .role { font: 500 14px var(--mono); color: var(--muted); margin-top: 4px; }
.author p.bio { margin-top: 12px; color: var(--ink-soft); max-width: 40em; }

/* prețuri */
.prices { display: grid; gap: 22px; margin-top: 34px; }
@media (min-width: 820px) { .prices { grid-template-columns: 1fr 1fr; } }
.price-card { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; }
.price-card.featured { box-shadow: 6px 6px 0 var(--pen); }
.price-card .tag { position: absolute; top: -16px; right: 18px; transform: rotate(3deg); background: var(--marker); border: 2px solid var(--ink); padding: 2px 12px; font: 700 22px var(--hand); }
.price-card h3 { font-size: 22px; }
.amount { font: 800 56px/1 var(--display); margin: 14px 0 4px; letter-spacing: -.03em; }
.amount small { font: 500 17px var(--body); color: var(--muted); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 10px; flex: 1; }
.price-card li { padding-left: 26px; position: relative; color: var(--ink-soft); }
.skills { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .skills { grid-template-columns: 1fr 1fr; } }
.skills li { min-width: 0; background: var(--card); border: 2px solid var(--ink); border-radius: 8px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.skills code { font: 600 14px var(--mono); color: var(--pen); overflow-wrap: anywhere; }
.skills p { color: var(--ink-soft); font-size: 15px; }
.box.make, .box.needs { margin-top: 26px; }
.needs-list { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-soft); }
.after-pay { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: pas; display: grid; gap: 12px; }
@media (min-width: 820px) { .after-pay { grid-template-columns: repeat(3, 1fr); } }
.after-pay li { counter-increment: pas; position: relative; padding-left: 44px; color: var(--ink-soft); min-width: 0; }
.after-pay li::before { content: counter(pas); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 700 22px/1 var(--hand); color: var(--pen); background: var(--card); }
.after-pay b { color: var(--ink); }
.price-card.solo { margin-top: 34px; display: grid; gap: 8px 40px; }
@media (min-width: 820px) { .price-card.solo { grid-template-columns: 1fr 1fr; align-items: center; padding: 36px 40px; } }
.solo-buy .btn { margin-top: 22px; }
.price-card.solo ul { margin: 18px 0 0; }
.price-card li::before { content: "✓"; position: absolute; left: 0; font: 700 20px/1.2 var(--hand); color: var(--ok); }
.consent { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 18px 20px; background: var(--card); border: 1px dashed var(--rule); border-radius: 6px; font-size: 15px; color: var(--ink-soft); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--pen); }
.consent.alert { border-color: #c2412d; border-style: solid; }
.pay-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font: 500 14px var(--mono); color: var(--muted); }
.notice { margin-bottom: 22px; padding: 16px 18px; border-left: 4px solid var(--pen); background: #eef3ff; font-size: 16px; }

/* garanție */
.guarantee { display: grid; gap: 18px; align-items: center; border: 2px solid var(--ink); border-radius: 8px; padding: 26px 28px; background: var(--card); }
@media (min-width: 720px) { .guarantee { grid-template-columns: auto 1fr; gap: 28px; } }
.stamp { width: 104px; height: 104px; border-radius: 50%; border: 3px solid #c2412d; color: #c2412d; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 800 30px/1 var(--display); transform: rotate(-10deg); }
.stamp small { font: 700 12px var(--mono); letter-spacing: .05em; margin-top: 4px; }

/* întrebări */
.faq { margin-top: 28px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 700 19px var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 26px/1 var(--hand); color: var(--pen); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-soft); max-width: 44em; }

/* subsol */
footer { border-top: 1px solid var(--rule); padding: 40px 0 120px; font-size: 14px; color: var(--muted); background: var(--paper); position: relative; z-index: 1; }
footer .wrap { display: grid; gap: 10px; }
footer a { color: var(--muted); }
@media (min-width: 820px) { footer { padding-bottom: 48px; } }

/* bară de cumpărare pe mobil */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(252,252,250,.96); border-top: 1px solid var(--rule); }
@media (min-width: 820px) { .mobile-cta { display: none; } }

/* pagini de text (termeni, lecția gratuită, gratuit) */
.page { padding: 48px 0 80px; }
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 18px; }
.prose h2 { font-size: 26px; margin: 2.2em 0 .6em; }
.prose h3 { font-size: 20px; margin: 1.8em 0 .5em; }
.prose p, .prose ul, .prose ol, .prose pre, .prose blockquote, .prose table { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose code { font: .86em var(--mono); background: #eef3ff; border: 1px solid #d6e0f8; border-radius: 4px; padding: 1px 5px; }
.prose pre { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--pen); padding: 16px 18px; overflow-x: auto; border-radius: 4px; }
.prose pre code { background: none; border: 0; padding: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.prose blockquote { border-left: 4px solid var(--marker); padding: 4px 16px; background: rgba(255,227,110,.18); color: var(--ink-soft); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 8px 10px; text-align: left; vertical-align: top; background: var(--card); }
.prose th { background: #eef3ff; }
.box { background: var(--card); border: 2px solid var(--ink); border-radius: 8px; padding: 24px 26px; margin-top: 28px; }
.box.pen { box-shadow: 6px 6px 0 var(--pen); }
.resources { display: grid; gap: 18px; margin-top: 28px; }
.resource { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 22px 24px; scroll-margin-top: 90px; }
.resource.active { border: 2px solid var(--pen); box-shadow: 5px 5px 0 var(--pen); }
.resource .kw { font: 700 14px var(--mono); color: var(--pen); }
.resource h2 { font-size: 24px; margin: 4px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips a { font: 600 14px var(--mono); padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; }
.chips a.on { border-color: var(--pen); color: var(--pen); }
.code { position: relative; }
.code pre { margin: 10px 0 0; background: #f4f7fd; border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px; padding-right: 96px; font: 14px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.code button { position: absolute; top: 8px; right: 8px; font: 600 13px var(--mono); padding: 6px 10px; border: 1px solid var(--ink); border-radius: 6px; background: var(--card); color: var(--ink); cursor: pointer; }
.center-card { max-width: 560px; margin: 0 auto; text-align: center; }