/* The RistoLogic site (2026-11-08). The logo's two blues, a warm accent for the calls to action, much white space. */
:root {
  --brand: #1B4F7E;
  --brand-2: #4A93C6;
  --brand-ink: #0E2A44;
  --accent: #E3701A;
  --accent-dark: #C45A0C;
  --ink: #1D2733;
  --muted: #5B6B7B;
  --soft: #F3F6F9;
  --line: #DDE5EE;
  --ok: #1E8E4E;
  --no: #B9C3CE;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(14, 42, 68, .06), 0 8px 24px rgba(14, 42, 68, .08);
  --wrap: 1200px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A grid's column takes no width from a large picture inside it (2352 px screenshots widened the phone's page). */
.slide-grid > *, .product-hero-grid > *, .product-row > *, .overview > *, .request-grid > *, .cards > *, .foot-cols > *, .row-2 > * { min-width: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.6 var(--font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 820px; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn { display: inline-block; padding: .7em 1.4em; border-radius: 6px; font-weight: 600; font-size: .98rem; border: 2px solid transparent; cursor: pointer; text-decoration: none !important; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-ink); }
.btn-outline { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn-outline:hover { background: var(--soft); }
.btn-light { background: #fff; color: var(--brand-ink); }
.btn-light:hover { background: #E8F1F9; }
.btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0 0; }

/* ── Header ────────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand img { display: block; height: 44px; width: auto; }
.menu { display: flex; align-items: center; gap: 6px; }
.menu-item { position: relative; display: block; padding: 10px 14px; color: var(--ink); font-weight: 550; border-radius: 6px; }
a.menu-item:hover, .has-sub > a:hover { background: var(--soft); text-decoration: none; }
.has-sub > a { color: var(--ink); }
.sub { display: none; position: absolute; top: 100%; left: 0; min-width: 320px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .langs.open .sub { display: block; }
.sub a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 6px; color: var(--ink); }
.sub a:hover { background: var(--soft); text-decoration: none; }
.sub a small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.3; }
.sub a img { width: 28px; height: 28px; object-fit: contain; }
.langs { padding: 0; }
.lang-btn { font: inherit; font-weight: 600; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; cursor: pointer; color: var(--ink); }
.lang-list { min-width: 160px; right: 0; left: auto; }
.lang-list a[aria-current] { font-weight: 700; color: var(--brand); }
.lang-list a img.flag { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(14, 42, 68, .15); flex-shrink: 0; }
.menu-cta { margin-left: 8px; }
.menu-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s; }

/* ── Slider ────────────────────────────────────────────────────────────────── */
.slider { position: relative; overflow: hidden; color: #fff; }
/* Every slide in the one cell of a grid: the slider is as tall as its tallest slide whichever is shown, so it no longer
   changes height from one slide to the next (2026-11-08). */
.slides { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; display: flex; align-items: center; }
.slide.is-active { opacity: 1; visibility: visible; }
.theme-blue { background: radial-gradient(1200px 600px at 85% 20%, #2E73AE 0%, transparent 60%), linear-gradient(120deg, #0E2A44 0%, #1B4F7E 55%, #2E6FA4 100%); }
.theme-deep { background: radial-gradient(900px 500px at 80% 80%, #24608F 0%, transparent 60%), linear-gradient(135deg, #081B2E 0%, #0E2A44 50%, #1B4F7E 100%); }
.theme-teal { background: radial-gradient(1000px 600px at 80% 30%, #2A8F9A 0%, transparent 60%), linear-gradient(120deg, #0B2F3A 0%, #12505C 55%, #1D7480 100%); }
.slide-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 72px; width: 100%; }
.slide h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; background: rgba(255, 255, 255, .12); padding: 6px 14px 6px 8px; border-radius: 999px; }
.eyebrow img { width: 28px; height: 28px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.lead { font-size: 1.15rem; color: inherit; opacity: .92; }
/* One frame for every slide's picture, the screenshots' own proportions (1920 × 1044): a picture of other proportions
   is cropped to it, never resizes the slide. */
.slide-shot { margin: 0; aspect-ratio: 1920 / 1044; }
.slide-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .15); transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transition: transform .6s; }
.slide.is-active .slide-shot img { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.slide-shot.is-logo { display: flex; justify-content: center; align-items: center; }
.slide-shot.is-logo img { width: auto; height: auto; max-height: 100%; object-fit: contain; max-width: 320px; background: rgba(255, 255, 255, .95); border-radius: 50%; padding: 28px; transform: none; }
/* A stack of windows (the user's stack-<product>.png, 2026-11-09) brings its own tilt and shadow on a transparent
   background: the whole picture, without the screenshot's corners, shadow, border and tilt. In the slide it is the
   column's width and taller than the frame, centred on it, the rest in the slide's padding — the frame, and so the
   slider's height, stay as they are. On one column (≤ 1000 px, below) it fits inside the frame, clear of the dots. */
.slide-shot.is-stack { position: relative; }
.slide-shot.is-stack img, .slide.is-active .slide-shot.is-stack img { position: absolute; left: 0; top: 50%; height: auto; translate: 0 -50%; border-radius: 0; box-shadow: none; transform: none; }
.hero-shot.is-stack img, .product-row-shot.is-stack img { border-radius: 0; box-shadow: none; border: 0; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .2s; }
.slider-arrow:hover { background: rgba(255, 255, 255, .28); }
.slider-arrow.prev { left: 16px; }
.slider-arrow.next { right: 16px; }
.slider-dots { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.slider-dots button { width: 11px; height: 11px; padding: 0; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .3s, background .3s; }
.slider-dots button[aria-selected="true"] { width: 32px; background: #fff; }

/* ── Sections and cards ────────────────────────────────────────────────────── */
.block { padding: 72px 0; }
.block.soft { background: var(--soft); }
.section-title { text-align: center; }
.section-lead { text-align: center; color: var(--muted); max-width: 760px; margin: 0 auto 40px; font-size: 1.08rem; }
.cards { display: grid; gap: 24px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 2px rgba(14, 42, 68, .04); }
a.card { color: var(--ink); transition: box-shadow .2s, transform .2s, border-color .2s; }
a.card:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-3px); border-color: #c9d6e3; }
.product-card-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.product-card-head img { width: 56px; height: 56px; object-fit: contain; }
.product-card-head h3 { font-size: 1.5rem; margin: 0; }
.product-card-head p { margin: 0; color: var(--muted); }
.more { color: var(--brand); font-weight: 600; }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { position: relative; padding-left: 26px; margin: .35em 0; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.badge { display: inline-block; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.card .badge { position: absolute; top: 18px; right: 18px; }
.badge-light { background: rgba(255, 255, 255, .18); }
.tile-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: 1.4rem; margin-bottom: 12px; }
.tile p { color: var(--muted); margin: 0; }
.pill { display: inline-block; vertical-align: middle; font-size: .7rem; font-weight: 700; color: var(--brand); border: 1px solid var(--brand-2); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.feature.is-pro { border-top: 3px solid var(--brand-2); }
.feature p { color: var(--muted); margin: 0; }

/* ── Band ──────────────────────────────────────────────────────────────────── */
.band { background: linear-gradient(120deg, var(--brand-ink), var(--brand)); color: #fff; padding: 56px 0; }
.band h2 { color: #fff; margin-bottom: .3em; }
.band p { opacity: .9; margin: 0; }
.band-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.band .actions { margin: 0; flex-shrink: 0; }

/* ── Page heads, products ──────────────────────────────────────────────────── */
.page-head { background: linear-gradient(120deg, var(--brand-ink), var(--brand) 70%, #2E6FA4); color: #fff; padding: 64px 0 56px; }
.page-head h1 { color: #fff; }
.page-head .lead { max-width: 760px; }
.product-list { display: grid; gap: 56px; }
.product-row { display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: center; }
.product-row:nth-child(even) .product-row-shot { order: 2; }
.product-row-shot img { display: block; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.product-row h2 { display: flex; align-items: center; gap: 12px; margin-top: .3em; }
.product-row h2 img { width: 40px; height: 40px; object-fit: contain; }
.tagline { font-size: 1.15rem; color: var(--brand); font-weight: 600; }
.product-hero { background: radial-gradient(1000px 500px at 85% 30%, #2E73AE 0%, transparent 60%), linear-gradient(120deg, #0E2A44, #1B4F7E 60%); color: #fff; padding: 64px 0; }
.product-hero h1 { display: flex; align-items: center; gap: 14px; color: #fff; margin-top: .3em; }
.product-hero h1 img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; }
.product-hero .tagline { color: #BFDCF2; }
.product-hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; }
.hero-shot { margin: 0; }
.hero-shot img { display: block; border-radius: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.meaning { margin: -.3em 0 1.1em; font-style: italic; opacity: .75; font-size: .95rem; }   /* under the name (the user, 2026-11-08) */

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.tabs { position: sticky; top: 72px; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.tabs .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs a { white-space: nowrap; padding: 16px 18px 13px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--accent); }
.js .tab-panel[hidden] { display: none; }
.overview { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.prose p { font-size: 1.07rem; }
.facts dl, .reqs { margin: 0; }
.facts dt, .reqs dt { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 14px; }
.facts dd, .reqs dd { margin: 2px 0 0; font-weight: 600; }
.reqs { display: grid; grid-template-columns: 240px 1fr; gap: 0 24px; }
.reqs dt, .reqs dd { padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0; }

/* ── Gallery and lightbox ─────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }
.gallery figure { margin: 0; }
.gallery a { display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(14, 42, 68, .05); background: #F3F6F9; }
/* Every thumbnail in the same frame (the screenshots' proportions), the picture whole inside it: the rows line up. */
.gallery img { display: block; width: 100%; aspect-ratio: 1920 / 1044; object-fit: contain; transition: transform .4s; }
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption { color: var(--muted); font-size: .95rem; margin-top: 10px; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8, 18, 30, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 72px; }
.lightbox img { max-height: 82vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox p { color: #dbe6f0; margin-top: 14px; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 26px; cursor: pointer; }
.lightbox .lb-close { top: 18px; right: 18px; }
.lightbox .lb-prev { left: 18px; top: 50%; }
.lightbox .lb-next { right: 18px; top: 50%; }

/* ── Editions ──────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(14, 42, 68, .04); }
.editions { width: 100%; border-collapse: collapse; font-size: .97rem; }
.editions th, .editions td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.editions thead th { position: sticky; top: 0; background: var(--brand-ink); color: #fff; font-weight: 650; }
.editions thead th:not(:first-child), .editions td:not(:first-child) { text-align: center; width: 92px; }
.editions tr.group th { background: #E7EEF5; color: var(--brand-ink); font-weight: 700; padding-top: 14px; }
.editions tbody tr:not(.group):hover td { background: #FAFCFE; }
.editions td.yes { color: var(--ok); font-weight: 700; font-size: 1.1rem; }
.editions td.no { color: var(--no); font-size: 1.05rem; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
/* The form alone, centred (2026-11-08: the «What happens next» note beside it left). */
.request-grid { max-width: 860px; }
.form label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 16px; }
.form input:not([type="radio"]):not([type="checkbox"]), .form select, .form textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #C9D5E1; border-radius: 6px; background: #fff; color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid rgba(74, 147, 198, .3); border-color: var(--brand-2); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.choice { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.choice legend { font-weight: 600; font-size: .95rem; margin-bottom: 8px; width: 100%; }
.choice label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; font-size: 1rem; }
.consent { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.consent input { margin-top: 5px; }
.hp { position: absolute; left: -5000px; }
.form-status { margin: 12px 0 0; font-weight: 600; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: #B3261E; }
.side-note ol { padding-left: 20px; }
.side-note li { margin: .5em 0; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.foot { background: var(--brand-ink); color: #C9D6E3; padding: 56px 0 24px; font-size: .95rem; }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.foot a { display: block; color: #C9D6E3; margin: .4em 0; }
.foot a:hover { color: #fff; }
.foot-brand img { height: 42px; width: auto; margin-bottom: 12px; }
.foot-legal { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 20px; font-size: .88rem; }
.foot-legal a { display: inline; margin: 0; }
.foot-links { display: inline-flex; gap: 18px; flex-wrap: wrap; }

/* ── The consent bar (Google Analytics, 2026-11-08) ─────────────────────────── */
/* At the foot of the window until the visitor chooses; the two buttons alike, so that declining is as plain as
   accepting (the Hellenic DPA's rule). */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: #0E2A44; color: #fff; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); }
.cookie-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.cookie-bar p { margin: 0; font-size: .95rem; }
.cookie-bar a { color: #BFDCF2; }
.cookie-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }
.btn-cookie { background: #fff; color: #0E2A44; border: 1px solid #fff; min-width: 120px; }
.btn-cookie:hover { background: #E6EEF5; }

/* ── Smaller screens ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .menu-toggle { display: block; }
  .menu { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 20px; box-shadow: var(--shadow); }
  .menu.open { display: flex; }
  .sub { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
  .lang-list { display: flex; flex-wrap: wrap; }
  .lang-btn { display: none; }
  .menu-cta { margin: 10px 0 0; text-align: center; }
  .slide-grid, .product-hero-grid, .product-row, .overview { grid-template-columns: minmax(0, 1fr); }
  .slide-shot img { transform: none !important; }
  .slide-shot.is-stack img, .slide.is-active .slide-shot.is-stack img { position: static; height: 100%; translate: none; object-fit: contain; }
  .cards-3, .cards-4 { grid-template-columns: 1fr 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .product-row:nth-child(even) .product-row-shot { order: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .block { padding: 52px 0; }
  .cards-2, .cards-3, .cards-4, .row-2 { grid-template-columns: 1fr; }
  .band-row { flex-direction: column; align-items: flex-start; }
  .slider-arrow { display: none; }
  .reqs { grid-template-columns: 1fr; }
  .reqs dt { border-bottom: 0; padding-bottom: 0; }
  .foot-cols { grid-template-columns: 1fr; }
  .foot-legal { flex-direction: column; gap: 8px; }
  .cookie-bar-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-bar-actions .btn-cookie { flex: 1; }
  .lightbox { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}