/* data-and-ai.hu design system – based on the portfolio (udvariistvan2016-ui.github.io/portfolio).
   Used by the home page and the neutral pages; the bigger projects (Hol a Bubi?, Meteo Liga) keep their own look.
   Fonts are self-hosted (IBM Plex, OFL – see fonts/OFL.txt): the privacy notice promises no external fonts. */

@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens ---------- */
:root {
	/* colour */
	--paper: #F2F3F0;         /* page background */
	--card: #FFFFFF;          /* cards, inputs, link buttons */
	--ink: #15181C;           /* headings, main text */
	--ink-2: #3A4048;         /* lead text */
	--ink-3: #4A505A;         /* card text */
	--muted: #6E7480;         /* labels, meta, footer */
	--line: #DCDED8;          /* borders, dividers */
	--accent: #1F6F5C;        /* the one accent: links, focus, active, live dot */
	--accent-soft: #E2EDE8;   /* tag background, row hover */
	--danger: #B3261E;        /* form errors */
	--radius: 4px;

	/* type scale – every font size comes from here */
	--fs-2xs: 11px;                        /* labels, dates */
	--fs-xs: 12px;                         /* mono UI: chips, query line, footer */
	--fs-sm: 13px;                         /* link buttons */
	--fs-body: 14px;                       /* card text */
	--fs-base: 15px;                       /* body text */
	--fs-lead: 16px;                       /* intro */
	--fs-title: 17px;                      /* card title */
	--fs-h2: clamp(22px, 2.6vw, 28px);     /* section titles, hero sentence */
	--fs-display: clamp(34px, 5.2vw, 52px);/* page title */
	--fs-num: clamp(26px, 3.4vw, 34px);    /* live numbers */

	--sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
/* resets use :where() (zero specificity), so every component rule below wins over them */
:where(.ds), :where(.ds) * { box-sizing: border-box; }
.ds { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
:where(.ds) :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; }
.ds [hidden] { display: none !important; }
:where(.ds) a { color: var(--accent); }
:where(.ds) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html:has(body.ds) { scroll-behavior: smooth; scroll-padding-top: 70px; }
.ds .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 479px) { .ds .wrap { padding: 0 16px; } }

/* ---------- sticky header ---------- */
.ds-head { position: sticky; top: 0; z-index: 50; background: rgba(242, 243, 240, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.ds-head-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 54px; }
.ds-brand { white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.ds-brand svg { width: 19px; height: 19px; flex: none; }
.ds-brand small { font: var(--fs-2xs) var(--mono); letter-spacing: .03em; color: var(--muted); }
.ds-brand small::before { content: "·"; margin-right: 7px; }
.ds-nav { display: flex; align-items: center; gap: 18px; }
.ds-nav a { font: var(--fs-xs) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.ds-nav a:hover { color: var(--accent); }
@media (max-width: 860px) { .ds-brand small { display: none; } }
@media (max-width: 479px) { .ds-nav { gap: 12px; } .ds-nav a { letter-spacing: .04em; } .ds-nav .opt { display: none; } }

/* status pill under the header ("Előnézet", "Kialakítás alatt") – the dot breathes slowly */
.ds-pill-row { display: flex; justify-content: flex-end; padding-top: 11px; }
.ds-pill { display: inline-flex; align-items: center; gap: 7px; font: var(--fs-2xs) var(--mono); letter-spacing: .02em; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 11px; }
.ds-pill::before, .ds-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; animation: ds-breathe 2.6s ease-in-out infinite; }
@keyframes ds-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }
@media (max-width: 479px) { .ds-pill-row { justify-content: flex-start; } }

/* ---------- type ---------- */
.ds h1 { font-size: var(--fs-display); font-weight: 600; letter-spacing: -.028em; line-height: 1.04; margin-bottom: 22px; }
.ds-sentence { font-size: var(--fs-h2); line-height: 1.32; font-weight: 400; max-width: 30ch; }
.ds-label { font: var(--fs-xs) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.ds-h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.ds-lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 60ch; }
.ds-note { font-size: var(--fs-sm); color: var(--muted); }

/* section: hairline on top, mono label + optional query line */
.ds-section { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 44px; }
.ds-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }

/* the signature element: an SQL-ish query line */
.ds-query { font: var(--fs-xs) var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ds-query .kw { color: var(--accent); font-weight: 500; }
.ds-query .val { color: var(--ink); }

/* ---------- link buttons ---------- */
.ds-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ds-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: var(--fs-sm)/1.4 var(--mono); color: var(--ink); text-decoration: none; padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; transition: border-color .15s, color .15s, transform .15s; }
.ds-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.ds-btn svg { width: 15px; height: 15px; flex: none; }
.ds-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ds-btn.primary:hover { color: #fff; filter: brightness(1.1); }
.ds-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* ---------- cards ---------- */
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
@media (max-width: 359px) { .ds-grid { grid-template-columns: 1fr; } }
.ds-card { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; display: flex; flex-direction: column; min-height: 210px; transition: border-color .18s, transform .18s, box-shadow .18s; animation: ds-rise .32s ease both; }
a.ds-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(21, 24, 28, .07); }
a.ds-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ds-card-body { padding: 26px 26px 22px; display: flex; flex-direction: column; flex: 1; }
.ds-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-bottom: 1px solid var(--line); background: var(--paper); filter: saturate(.88) contrast(.97); transition: filter .18s; }
a.ds-card:hover .ds-thumb { filter: none; }
.ds-card-meta { font: var(--fs-2xs) var(--mono); color: var(--muted); letter-spacing: .06em; margin-bottom: 14px; }
.ds-card h2, .ds-card h3 { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.012em; line-height: 1.3; margin-bottom: 10px; }
.ds-card p { font-size: var(--fs-body); color: var(--ink-3); line-height: 1.55; margin-bottom: 18px; }
.ds-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.ds-tag { font: var(--fs-2xs) var(--mono); padding: 3px 8px; background: var(--accent-soft); color: var(--accent); border-radius: 3px; letter-spacing: .02em; }
.ds-open { font: var(--fs-xs) var(--mono); color: var(--accent); margin-top: 14px; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
a.ds-card:hover .ds-open, a.ds-card:focus-visible .ds-open { opacity: 1; transform: none; }
@media (hover: none) { .ds-open { opacity: 1; transform: none; } }
.ds-soon { border: 1px dashed var(--line); border-radius: var(--radius); padding: 26px; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; font-family: var(--mono); }
.ds-soon b { font-weight: 500; font-size: var(--fs-sm); }
.ds-soon span { font-size: var(--fs-xs); color: var(--muted); }
.ds-soon .kw { color: var(--accent); }
@keyframes ds-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* live numbers (big mono figure + small label) */
.ds-nums { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 4px 0 18px; }
.ds-num b { display: block; font: 500 var(--fs-num)/1.1 var(--mono); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ds-num span { font: var(--fs-xs) var(--mono); color: var(--muted); }
.ds-live { display: inline-flex; align-items: center; gap: 7px; font: var(--fs-2xs) var(--mono); letter-spacing: .06em; color: var(--accent); }
.ds-live.stale { color: var(--muted); }
.ds-live.stale::before { background: var(--muted); animation: none; }

/* ---------- forms (also restyles the shared newsletter form) ---------- */
.ds .dai-nl { --text: var(--ink); --teal: var(--accent); --red: var(--danger); }
.ds .dai-nl .kicker { display: none; }  /* the section has its own heading */
.ds .dai-nl .lede { font-size: var(--fs-lead); color: var(--ink-2); max-width: 60ch; margin-bottom: 18px; }
.ds .impact-form { display: grid; gap: 12px 14px; align-items: end; font: var(--fs-sm) var(--sans); }
.ds .impact-form label { display: grid; gap: 5px; color: var(--muted); font: var(--fs-xs) var(--mono); letter-spacing: .04em; }
.ds .impact-form input[type=email], .ds .impact-form input[type=text] { font: var(--fs-base) var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; min-height: 42px; }
.ds .impact-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ds .impact-form .check { display: flex; gap: 10px; align-items: flex-start; font: var(--fs-sm)/1.5 var(--sans); letter-spacing: 0; color: var(--ink-3); max-width: 70ch; }
.ds .impact-form .check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.ds .impact-form .btn { display: inline-flex; align-items: center; min-height: 42px; font: var(--fs-sm) var(--mono); padding: 9px 18px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; transition: filter .15s; }
.ds .impact-form .btn:hover { filter: brightness(1.1); }
.ds .impact-form .btn:disabled { opacity: .6; cursor: default; }
.ds .impact-form .note, .ds .dai-nl-done { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.ds .dai-nl .note.ok, .ds .dai-nl-done { color: var(--accent); }
.ds .dai-nl .note.err { color: var(--danger); }

/* ---------- footer ---------- */
.ds-foot { border-top: 1px solid var(--line); margin-top: 56px; padding: 26px 0 60px; font: var(--fs-xs) var(--mono); color: var(--muted); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.ds-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ds-foot a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ds-foot a:hover { color: var(--accent); text-decoration: underline; }
.ds-foot svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
	.ds *, .ds *::before { animation: none !important; transition: none !important; }
	html:has(body.ds) { scroll-behavior: auto; }
}