"<!DOCTYPE html>\n<html lang=\"sk\"><head>\n<meta charset=\"utf-8\">\n<title>Symetry · Účtovníctvo, ktoré beží samo.</title>\n<link rel=\"icon\" type=\"image/svg+xml\" href=\"1c61d802-8be4-41bf-86c9-0c80329164b5\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"description\" content=\"Symetry · AI-natívne účtovníctvo pre slovenské a české firmy. Automatizuje až 85 % všetkých úloh: od čítania dokladov cez zaúčtovanie a úhrady až po DPH.\">\n<style>/* ============================================================\n   SYMETRY · Landing page\n   Built strictly on the brand token set (colors_and_type.css).\n   Obsidian anchors. Frost is the page. The Dusk gradient is a\n   brand expression mark: hero glow, security cover, accents.\n   ============================================================ */\n/* ============================================================\n   SYMETRY — Color & Type Tokens\n   ============================================================\n   Brand: Symetry — a financial product built on restraint.\n   Black anchors everything. Colour is used sparingly and with\n   purpose. The interface feels considered rather than colourful.\n\n   Source: Symetry Brand Guidelines (PDFs in assets/brand-guide/)\n   ============================================================ */\n\n/* ---------- Font face (DM Sans — the only typeface) ----------\n   Self-hosted from local variable brand fonts (opsz 9..40, wght axis).\n   Roman + italic in single files each. */\n@font-face {\n  font-family: \"DM Sans\";\n  font-weight: 300 700;\n  font-stretch: 100%;\n  font-style: normal;\n  font-display: swap;\n  src: url(\"3e859daf-435a-4246-a553-3f0f6099c970\") format(\"truetype\");\n}\n@font-face {\n  font-family: \"DM Sans\";\n  font-weight: 300 700;\n  font-stretch: 100%;\n  font-style: italic;\n  font-display: swap;\n  src: url(\"f12918f8-2540-4373-b88b-a1432db3ec5a\") format(\"truetype\");\n}\n\n:root {\n  /* ---------------------------------------------------------\n     BRAND COLOURS\n     Three colours define the Symetry brand. Obsidian is the\n     primary — it is the logo, the text, the UI. Midnight and\n     Dusk Rose exist as a pair, always together in the gradient.\n     Neither appears as a standalone flat colour in the product.\n     --------------------------------------------------------- */\n  --obsidian:    #000000;   /* primary, anchors everything */\n  --midnight:    #22374D;   /* gradient start (135°) */\n  --dusk-rose:   #C59F91;   /* gradient end (135°) */\n\n  /* The Dusk gradient — for insight panels, hero sections,\n     campaign covers. Never on the wordmark, body text, or\n     interactive elements like buttons. */\n  --gradient-dusk: linear-gradient(135deg, var(--midnight) 0%, var(--dusk-rose) 100%); /* @kind color */\n\n  /* ---------------------------------------------------------\n     SURFACE COLOURS\n     Frost is the default for all product screens. White sits\n     above it as elevated surface. The contrast is subtle but\n     creates the depth hierarchy. Never use pure white as a\n     page background — it flattens the surface system.\n     --------------------------------------------------------- */\n  --frost:       #F0F4F7;   /* app background */\n  --white:       #FFFFFF;   /* elevated surface, cards */\n  --hairline:    #E8EDF2;   /* dividers, borders (literal) */\n  --border-soft: rgba(0,0,0,0.10);  /* default card border */\n\n  /* ---------------------------------------------------------\n     TYPOGRAPHY COLOURS\n     Three levels carry all written content. Hierarchy is\n     communicated through weight and size — never colour\n     variety. Do not add additional text colours.\n     --------------------------------------------------------- */\n  --text-primary:   #000000;   /* headlines, body, data, full legibility */\n  --text-secondary: #5A6C7A;   /* labels, metadata, timestamps · AA 5.4:1 on white, 4.9:1 on Frost */\n  --text-tertiary:  #8E9EAB;   /* placeholders, hints, disabled ONLY — never running text or labels */\n\n  /* Slate Fog is also used for icon strokes and chevrons */\n  --slate-fog:      #7A90A0;\n\n  /* ---------------------------------------------------------\n     SEMANTIC COLOURS\n     Functional, not decorative. Each state has a background +\n     text colour that MUST be used as a pair. In a financial\n     product these communicate real meaning. Never use brand\n     colours to communicate status.\n     --------------------------------------------------------- */\n  --success-bg:  #D8F0E5;   --success-text:  #1A5C35;\n  --error-bg:    #FDEAEA;   --error-text:    #8C2020;\n  --warning-bg:  #FEF4D5;   --warning-text:  #7A4A08;\n  --info-bg:     #DDE8F5;   --info-text:     #0C3A6A;\n\n  /* ---------------------------------------------------------\n     TYPOGRAPHY — DM Sans\n     Geometric sans-serif. Tight letter-spacing on display\n     usage. Single typeface across all weights. No serifs.\n     --------------------------------------------------------- */\n  --font-sans: \"DM Sans\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  --font-mono: ui-monospace, \"SF Mono\", Menlo, monospace;\n  /* Wordmark approximation only — never replace the SVG logo */\n  --font-display: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n\n  /* Type scale — 4pt grid. lh-* = line-height, tr-* = tracking */\n  --fs-display: 56px;\n  --lh-display: 1.05;     /* @kind font */\n  --tr-display: -0.02em;  /* @kind font */\n  --fs-h1: 40px;\n  --lh-h1: 1.10;          /* @kind font */\n  --tr-h1: -0.015em;      /* @kind font */\n  --fs-h2: 32px;\n  --lh-h2: 1.15;          /* @kind font */\n  --tr-h2: -0.01em;       /* @kind font */\n  --fs-h3: 24px;\n  --lh-h3: 1.20;          /* @kind font */\n  --tr-h3: -0.005em;      /* @kind font */\n  --fs-h4: 20px;\n  --lh-h4: 1.30;          /* @kind font */\n  --tr-h4: 0;             /* @kind font */\n  --fs-body-lg: 18px;\n  --lh-body-lg: 1.50;     /* @kind font */\n  --fs-body: 16px;\n  --lh-body: 1.50;        /* @kind font */\n  --fs-body-sm: 14px;\n  --lh-body-sm: 1.45;     /* @kind font */\n  --fs-caption: 12px;\n  --lh-caption: 1.40;     /* @kind font */\n  --tr-caption: 0.02em;   /* @kind font */\n  --fs-data-xl: 48px;     /* KPI values */\n  --lh-data-xl: 1.05;     /* @kind font */\n  --tr-data-xl: -0.02em;  /* @kind font */\n  --fs-data: 32px;\n  --lh-data: 1.10;        /* @kind font */\n  --tr-data: -0.01em;     /* @kind font */\n\n  /* Weights — DM Sans 300/400/500/600/700 */\n  --fw-light: 300;    /* @kind font */\n  --fw-regular: 400;  /* @kind font */\n  --fw-medium: 500;   /* @kind font */\n  --fw-semibold: 600; /* @kind font */\n  --fw-bold: 700;     /* @kind font */\n\n  /* ---------------------------------------------------------\n     SPACING — 4pt grid\n     --------------------------------------------------------- */\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 20px;\n  --space-6: 24px;\n  --space-8: 32px;\n  --space-10: 40px;\n  --space-12: 48px;\n  --space-16: 64px;\n  --space-20: 80px;\n\n  /* ---------------------------------------------------------\n     RADII — Symetry uses generous, considered rounding\n     --------------------------------------------------------- */\n  --radius-xs: 6px;\n  --radius-sm: 10px;\n  --radius-md: 12px;\n  --radius-lg: 15px;   /* list-row capsules */\n  --radius-xl: 20px;   /* default card radius (from wireframe) */\n  --radius-2xl: 28px;\n  --radius-pill: 999px;\n\n  /* ---------------------------------------------------------\n     SHADOWS — restrained. Depth comes from frost/white\n     contrast first, shadows second.\n     --------------------------------------------------------- */\n  --shadow-none: none;\n  --shadow-xs: 0 1px 2px rgba(34, 55, 77, 0.04);\n  --shadow-sm: 0 2px 8px rgba(34, 55, 77, 0.06);\n  --shadow-md: 0 8px 24px rgba(34, 55, 77, 0.08);\n  --shadow-lg: 0 16px 48px rgba(34, 55, 77, 0.12);\n  --shadow-focus: 0 0 0 3px rgba(34, 55, 77, 0.15);\n\n  /* ---------------------------------------------------------\n     MOTION — quiet, precise. No bounces.\n     --------------------------------------------------------- */\n  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */\n  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */\n  --dur-fast: 120ms;  /* @kind other */\n  --dur-base: 200ms;  /* @kind other */\n  --dur-slow: 360ms;  /* @kind other */\n}\n\n/* ============================================================\n   SEMANTIC TYPE STYLES — use these directly in product code\n   ============================================================ */\n\n.s-display, .symetry-display {\n  font-family: var(--font-display);\n  font-size: var(--fs-display);\n  line-height: var(--lh-display);\n  letter-spacing: var(--tr-display);\n  font-weight: var(--fw-semibold);\n  color: var(--text-primary);\n}\n\n.s-h1, h1.s {\n  font-family: var(--font-sans);\n  font-size: var(--fs-h1);\n  line-height: var(--lh-h1);\n  letter-spacing: var(--tr-h1);\n  font-weight: var(--fw-semibold);\n  color: var(--text-primary);\n}\n\n.s-h2, h2.s {\n  font-family: var(--font-sans);\n  font-size: var(--fs-h2);\n  line-height: var(--lh-h2);\n  letter-spacing: var(--tr-h2);\n  font-weight: var(--fw-semibold);\n  color: var(--text-primary);\n}\n\n.s-h3, h3.s {\n  font-family: var(--font-sans);\n  font-size: var(--fs-h3);\n  line-height: var(--lh-h3);\n  letter-spacing: var(--tr-h3);\n  font-weight: var(--fw-semibold);\n  color: var(--text-primary);\n}\n\n.s-h4, h4.s {\n  font-family: var(--font-sans);\n  font-size: var(--fs-h4);\n  line-height: var(--lh-h4);\n  font-weight: var(--fw-medium);\n  color: var(--text-primary);\n}\n\n.s-body-lg {\n  font-family: var(--font-sans);\n  font-size: var(--fs-body-lg);\n  line-height: var(--lh-body-lg);\n  color: var(--text-primary);\n}\n\n.s-body, p.s {\n  font-family: var(--font-sans);\n  font-size: var(--fs-body);\n  line-height: var(--lh-body);\n  color: var(--text-primary);\n}\n\n.s-body-sm {\n  font-family: var(--font-sans);\n  font-size: var(--fs-body-sm);\n  line-height: var(--lh-body-sm);\n  color: var(--text-primary);\n}\n\n.s-caption {\n  font-family: var(--font-sans);\n  font-size: var(--fs-caption);\n  line-height: var(--lh-caption);\n  letter-spacing: var(--tr-caption);\n  font-weight: var(--fw-medium);\n  color: var(--text-secondary);\n}\n\n.s-eyebrow {\n  font-family: var(--font-sans);\n  font-size: var(--fs-caption);\n  line-height: var(--lh-caption);\n  letter-spacing: 0.08em;\n  font-weight: var(--fw-medium);\n  text-transform: uppercase;\n  color: var(--text-secondary);\n}\n\n/* Numeric data values — KPI cards, balances, statements */\n.s-data-xl {\n  font-family: var(--font-sans);\n  font-feature-settings: \"tnum\" 1, \"lnum\" 1;\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--fs-data-xl);\n  line-height: var(--lh-data-xl);\n  letter-spacing: var(--tr-data-xl);\n  font-weight: var(--fw-semibold);\n  color: var(--text-primary);\n}\n\n.s-data {\n  font-family: var(--font-sans);\n  font-feature-settings: \"tnum\" 1, \"lnum\" 1;\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--fs-data);\n  line-height: var(--lh-data);\n  letter-spacing: var(--tr-data);\n  font-weight: var(--fw-semibold);\n  color: var(--text-primary);\n}\n\n/* Secondary / tertiary modifiers */\n.s-secondary { color: var(--text-secondary); }\n.s-tertiary  { color: var(--text-tertiary); }\n\n/* ============================================================\n   FONT NOTE\n   ============================================================\n   Source guidelines specify DM Sans. Now self-hosted from the\n   local variable brand fonts (fonts/DMSans-VariableFont_opsz_wght.ttf\n   + the italic variable file) covering opsz 9..40 and the full\n   300–700 weight axis via @font-face above.\n   ============================================================ */\n\n\n*, *::before, *::after { box-sizing: border-box; }\n\nhtml { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }\nbody {\n  margin: 0;\n  font-family: var(--font-sans);\n  background: var(--frost);\n  color: var(--text-primary);\n  font-size: var(--fs-body);\n  line-height: var(--lh-body);\n  overflow-x: hidden;\n}\nimg, svg { display: block; max-width: 100%; }\na { color: inherit; text-decoration: none; }\n::selection { background: var(--midnight); color: #fff; }\n\n/* ---------- layout primitives ---------- */\n.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }\n.wrap-wide { width: min(1320px, 100% - 48px); margin-inline: auto; }\nsection { position: relative; }\n.section-pad { padding-block: clamp(72px, 9vw, 140px); }\n\n.eyebrow {\n  font-size: var(--fs-caption);\n  letter-spacing: 0.14em;\n  font-weight: var(--fw-semibold);\n  text-transform: uppercase;\n  color: var(--text-secondary);\n}\n.section-head { max-width: 760px; }\n.section-head .eyebrow { margin: 0 0 18px; }\n.section-head h2 {\n  font-size: clamp(32px, 4.4vw, 52px);\n  line-height: 1.06;\n  letter-spacing: -0.022em;\n  font-weight: var(--fw-semibold);\n  margin: 0;\n  color: var(--text-primary);\n  text-wrap: balance;\n}\n.section-head p {\n  font-size: var(--fs-body-lg);\n  line-height: 1.55;\n  color: var(--text-secondary);\n  margin: 22px 0 0;\n  max-width: 620px;\n}\n.center { text-align: center; }\n.center .section-head { margin-inline: auto; }\n.center .section-head p { margin-inline: auto; }\n\n/* ---------- buttons ---------- */\n.btn {\n  display: inline-flex; align-items: center; gap: 9px;\n  font-family: var(--font-sans);\n  font-size: var(--fs-body-sm);\n  font-weight: var(--fw-semibold);\n  letter-spacing: -0.005em;\n  border-radius: var(--radius-pill);\n  padding: 13px 22px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: background var(--dur-base) var(--ease-out),\n              transform var(--dur-fast) var(--ease-out),\n              border-color var(--dur-base) var(--ease-out),\n              color var(--dur-base) var(--ease-out);\n  white-space: nowrap;\n}\n.btn:active { transform: scale(0.985); }\n.btn svg { width: 17px; height: 17px; }\n.btn-primary { background: var(--obsidian); color: #fff; }\n.btn-primary:hover { background: color-mix(in srgb, var(--obsidian) 88%, #fff); }\n.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-soft); }\n.btn-ghost:hover { background: rgba(0,0,0,0.04); }\n.btn-light { background: #fff; color: var(--obsidian); }\n.btn-light:hover { background: rgba(255,255,255,0.88); }\n.btn-on-dark-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.22); }\n.btn-on-dark-ghost:hover { background: rgba(255,255,255,0.08); }\n.btn-lg { padding: 16px 28px; font-size: var(--fs-body); }\n\n/* ---------- pill / badge ---------- */\n.pill {\n  display: inline-flex; align-items: center; gap: 9px;\n  padding: 7px 7px 7px 14px;\n  border-radius: var(--radius-pill);\n  background: var(--white);\n  border: 1px solid var(--border-soft);\n  font-size: var(--fs-body-sm);\n  font-weight: var(--fw-medium);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-xs);\n}\n.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-text); box-shadow: 0 0 0 4px var(--success-bg); }\n.pill .pill-arrow {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 24px; height: 24px; border-radius: 50%;\n  background: var(--obsidian); color: #fff;\n}\n.pill .pill-arrow svg { width: 13px; height: 13px; }\n\n/* ============================================================\n   NAV\n   ============================================================ */\n.nav {\n  position: sticky; top: 0; z-index: 50;\n  background: color-mix(in srgb, var(--frost) 82%, transparent);\n  border-bottom: 1px solid transparent;\n  transition: border-color var(--dur-base), background var(--dur-base);\n}\n.nav.scrolled {\n  background: color-mix(in srgb, var(--frost) 92%, transparent);\n  backdrop-filter: saturate(1.1) blur(10px);\n  border-bottom-color: var(--hairline);\n}\n.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }\n.nav-logo { height: 18px; width: auto; }\n.nav-logo img { height: 18px; width: auto; }\n.nav-links { display: flex; align-items: center; gap: 34px; }\n.nav-links a {\n  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);\n  color: var(--text-secondary); transition: color var(--dur-base);\n}\n.nav-links a:hover { color: var(--text-primary); }\n.nav-cta { display: flex; align-items: center; gap: 12px; }\n.nav-burger { display: none; background: transparent; border: 0; padding: 0; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; border-radius: 10px; }\n.nav-burger:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }\n.nav-burger i { width: 22px; height: 22px; }\n.nav-mobile { display: none; flex-direction: column; padding: 8px 20px 20px; gap: 4px; background: color-mix(in srgb, var(--frost) 96%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }\n.nav-mobile a { padding: 14px 4px; font-size: 16px; color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }\n.nav-mobile a.nav-mobile-cta { margin-top: 12px; justify-content: center; border-bottom: 0; color: #fff !important; }\n.nav-mobile[data-open=\"true\"] { display: flex; }\n@media (max-width: 900px) {\n  .nav { position: fixed; top: 0; left: 0; right: 0; }\n  .nav-links { display: none; }\n  .nav-burger { display: inline-flex; }\n  .nav-cta-desktop { display: none !important; }\n  .nav-cta-mobile { display: inline-flex !important; }\n  .nav-cta-primary { padding: 7px 12px; font-size: 11px; letter-spacing: 0; height: auto; min-height: 0; }\n  .nav-cta { gap: 4px; }\n  .nav-inner { height: 60px; padding-inline: 16px; }\n  .nav-logo { height: 16px; }\n  .nav-logo img { height: 16px; }\n  .nav-burger { width: 36px; height: 36px; }\n  .nav-burger i { width: 20px; height: 20px; }\n  .nav-mobile { padding: 6px 16px 16px; gap: 2px; }\n  .nav-mobile a { padding: 12px 4px; font-size: 15px; }\n}\n@media (min-width: 901px) {\n  .nav-cta-mobile { display: none !important; }\n}\n\n/* ============================================================\n   HERO\n   ============================================================ */\n.hero { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(40px, 6vw, 72px); text-align: center; overflow: hidden; }\n@media (max-width: 900px) { .hero { padding-top: calc(60px + clamp(16px, 4vw, 28px)); } }\n.hero-glow {\n  position: absolute; inset: 0; z-index: 0; pointer-events: none;\n  background:\n    radial-gradient(60% 50% at 50% -8%, rgba(197,159,145,0.30) 0%, rgba(197,159,145,0) 60%),\n    radial-gradient(48% 44% at 78% 8%, rgba(34,55,77,0.16) 0%, rgba(34,55,77,0) 60%);\n}\n.hero-inner { position: relative; z-index: 1; }\n.hero h1 {\n  font-size: clamp(40px, 6.4vw, 78px);\n  line-height: 1.02;\n  letter-spacing: -0.03em;\n  font-weight: var(--fw-semibold);\n  margin: 28px auto 0;\n  max-width: 16ch;\n  text-wrap: balance;\n}\n.hero h1 .accent {\n  background: var(--gradient-dusk);\n  -webkit-background-clip: text; background-clip: text;\n  -webkit-text-fill-color: transparent; color: transparent;\n}\n.hero-sub {\n  font-size: clamp(17px, 1.4vw, 20px);\n  line-height: 1.55;\n  color: var(--text-secondary);\n  max-width: 64ch; margin: 26px auto 0;\n}\n.hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }\n\n/* product mockup frame */\n.hero-shot { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 84px); }\n.shot-frame {\n  position: relative;\n  border-radius: var(--radius-2xl);\n  background: #F0F4F7;\n  border: 1px solid var(--border-soft);\n  box-shadow: var(--shadow-lg);\n  overflow: hidden;\n  max-width: 1320px; margin-inline: auto; width: 100%;\n}\n.shot-frame::after {\n  content: \"\"; position: absolute; inset: 0; pointer-events: none;\n  border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);\n}\n.shot-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }\n.shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: #DCE3EA; display: block; }\n.shot-frame img { width: 100%; height: auto; display: block; }\n/* soft fade so the long screenshot ends gracefully */\n.hero-shot.fade .shot-frame { max-height: 660px; }\n.hero-shot.fade .shot-frame::before {\n  content: \"\"; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 2;\n  background: linear-gradient(to bottom, rgba(240,244,247,0) 0%, rgba(240,244,247,0.04) 15%, rgba(240,244,247,0.14) 32%, rgba(240,244,247,0.32) 50%, rgba(240,244,247,0.56) 66%, rgba(240,244,247,0.8) 80%, rgba(240,244,247,0.95) 92%, #F0F4F7 100%);\n  pointer-events: none;\n}\n\n/* ============================================================\n   LOGOS / trust bar\n   ============================================================ */\n.logos { padding-block: clamp(40px, 5vw, 64px); }\n.logos p { text-align: center; color: var(--text-secondary); font-size: var(--fs-body-sm); margin: 0 0 28px; letter-spacing: 0.01em; }\n.logos-marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }\n.logos-row { display: flex; align-items: flex-end; gap: clamp(36px, 7vw, 92px); width: max-content; animation: logos-scroll 32s linear infinite; }\n.logos-row img { display: block; align-self: flex-end; }\n@keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n@media (prefers-reduced-motion: reduce) { .logos-row { animation: none; } }\n.logo-mark {\n  font-size: clamp(20px, 2.4vw, 30px); font-weight: var(--fw-bold);\n  letter-spacing: -0.02em; color: var(--text-primary); opacity: 0.42;\n  transition: opacity var(--dur-base);\n  display: flex; align-items: center; gap: 9px;\n}\n.logo-mark:hover { opacity: 0.8; }\n.logo-mark .glyph { display: inline-flex; }\n\n/* ============================================================\n   NOVÁ ÉRA · bento feature grid\n   ============================================================ */\n.era-grid { display: grid; grid-template-columns: 1.32fr 1fr; gap: 22px; margin-top: clamp(44px, 5vw, 68px); }\n.era-card {\n  background: var(--white);\n  border: 1px solid rgba(0,0,0,0.05);\n  border-radius: var(--radius-2xl);\n  padding: 32px;\n  display: flex; flex-direction: column;\n  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);\n}\n/* Mofin-style pastel surfaces — each tile is a whisper-light tint of a brand colour */\n.era-card.era-blue { background: #E4EAF2; }  /* Midnight #22374D tint */\n.era-card.era-rose { background: #E4EAF2; }  /* Dusk Rose #C59F91 tint */\n.era-card.era-sand { background: #E4EAF2; }  /* Obsidian, lightest shade */\n.era-card.era-mint { background: #E4EAF2; }  /* Dusk gradient midpoint (plum) tint */\n.era-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }\n.era-visual {\n  background: none;\n  border: none;\n  border-radius: var(--radius-xl);\n  padding: 6px 2px;\n  margin-bottom: 26px;\n  min-height: 284px;\n  display: flex; flex-direction: column; justify-content: center; gap: 12px;\n  position: relative; overflow: hidden;\n}\n.era-card h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0 0 16px; }\n.era-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }\n.era-list li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.45; }\n.era-list li .tick { flex: none; margin-top: 2px; color: var(--text-primary); }\n.era-list li .tick svg { width: 18px; height: 18px; }\n@media (max-width: 900px) { .era-grid { grid-template-columns: 1fr; } }\n\n/* --- mini product visuals (inside era-visual) --- */\n.mini-doc { background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-sm); }\n.mini-row { display: flex; align-items: center; gap: 10px; }\n.mini-row + .mini-row { margin-top: 10px; }\n.mini-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }\n.mini-line { height: 7px; border-radius: 4px; background: #E3EAF0; }\n.mini-amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; white-space: nowrap; }\n.cap { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-pill); padding: 4px 10px; font-size: 12px; font-weight: 600; }\n.cap-success { background: var(--success-bg); color: var(--success-text); }\n.cap-info { background: var(--info-bg); color: var(--info-text); }\n.cap-warning { background: var(--warning-bg); color: var(--warning-text); }\n.cap-purple { background: #EDE4F7; color: #5B2A86; }\n.flow-arrow { display: flex; justify-content: center; color: var(--dusk-rose); }\n.flow-arrow svg { width: 22px; height: 22px; }\n.acct-chip { display:inline-flex; align-items:center; gap:8px; background:#0E1620; color:#fff; border-radius: var(--radius-pill); padding:6px 12px; font-size: 13px; font-weight:600; font-variant-numeric: tabular-nums; white-space: nowrap; }\n\n/* chat mini */\n.mini-chat { display: flex; flex-direction: column; gap: 10px; }\n.bubble { border-radius: 14px; padding: 11px 14px; font-size: 13.5px; line-height: 1.4; max-width: 92%; }\n.bubble-q { align-self: flex-end; background: var(--obsidian); color: #fff; border-bottom-right-radius: 5px; }\n.bubble-a { align-self: flex-start; background: #fff; border: 1px solid var(--hairline); color: var(--text-primary); border-bottom-left-radius: 5px; box-shadow: var(--shadow-xs); }\n.bubble-a .big { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; display:block; margin-top: 4px; }\n.chat-input { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 9px 9px 9px 15px; box-shadow: var(--shadow-xs); }\n.chat-input span:not(.send) { font-size: 13.5px; color: var(--text-secondary); flex: 1; }\n.chat-input .send { width: 28px; height: 28px; border-radius: 50%; background: var(--gradient-dusk); display:flex; align-items:center; justify-content:center; color:#fff; }\n.chat-input .send svg { width: 14px; height: 14px; }\n\n/* digital archive mini (product mock) */\n.arch-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 11px 16px; box-shadow: var(--shadow-xs); color: var(--text-secondary); font-size: 13.5px; }\n.arch-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.arch-search svg { width: 16px; height: 16px; flex: none; }\n.arch-rows { display: flex; flex-direction: column; gap: 8px; }\n.arch-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 11px 14px; box-shadow: var(--shadow-xs); }\n.arch-row .ar-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--frost); color: var(--text-primary); display: flex; align-items: center; justify-content: center; flex: none; }\n.arch-row .ar-ic svg { width: 17px; height: 17px; }\n.arch-row .ar-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }\n.arch-row .ar-meta strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.arch-row .ar-meta span { font-size: 12px; color: var(--text-secondary); }\n.arch-row .cap { flex: none; }\n\n/* security orbit mini (product mock) */\n.era-orbit { align-items: center; justify-content: center; }\n.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; }\n.orbit-lines path { stroke: rgba(0,0,0,0.16); stroke-width: 1.5; stroke-dasharray: 3 5; fill: none; }\n.vault { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; background: var(--obsidian); color: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: 0 18px 40px rgba(0,0,0,0.22); }\n.vault-ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex: none; }\n.vault-ic svg { width: 19px; height: 19px; }\n.vault-tx { display: flex; flex-direction: column; gap: 1px; }\n.vault-t { font-size: 14.5px; font-weight: 700; }\n.vault-s { font-size: 12px; color: rgba(255,255,255,0.66); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.orb-pill { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-sm); white-space: nowrap; }\n.orb-pill svg { width: 14px; height: 14px; color: var(--text-primary); }\n.op-1 { top: 9%; left: 4%; }\n.op-2 { top: 7%; right: 5%; }\n.op-3 { bottom: 9%; left: 7%; }\n.op-4 { bottom: 7%; right: 6%; }\n\n/* ============================================================\n   SYMETRY AI · micro demo section\n   ============================================================ */\n.aidemo-section { background: radial-gradient(ellipse 45% 38% at 50% 55%, #f2eee8 0%, #f1ede7 22%, #f0ece7 38%, #f0eeea 55%, #f0f1f2 78%, #f0f4f7 100%); }\n.aid-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(40px, 5vw, 84px); align-items: center; }\n.aid-copy h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; font-weight: var(--fw-semibold); color: var(--text-primary); margin: 0 0 18px; text-wrap: balance; }\n.aid-copy .eyebrow { margin: 0 0 18px; }\n.aid-lead { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--text-secondary); margin: 0 0 34px; max-width: 46ch; }\n\n.q-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }\n.qp {\n  font: inherit; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-primary);\n  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-pill);\n  padding: 13px 20px; cursor: pointer; text-align: left;\n  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);\n}\n.qp:hover { border-color: var(--text-tertiary); transform: translateX(2px); }\n.qp.active { background: var(--obsidian); border-color: var(--obsidian); color: #FFFFFF; }\n\n/* chat card */\n.chat { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); overflow: hidden; }\n.chat-head { display: flex; align-items: center; gap: 11px; padding: 18px 24px; border-bottom: 1px solid var(--hairline); }\n.chat-avatar, .ca-avatar { width: 28px; height: 28px; border-radius: 9px; display: block; flex: none; }\n.chat-name { font-size: var(--fs-body-sm); font-weight: 700; color: var(--text-primary); white-space: nowrap; }\n.chat-demo { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 4px 10px; }\n.chat-body { padding: 26px 24px 30px; min-height: 332px; display: flex; flex-direction: column; }\n\n.convo { display: none; flex-direction: column; gap: 18px; }\n.convo.on { display: flex; }\n.c-user { align-self: flex-end; max-width: 78%; background: var(--obsidian); color: #fff; font-size: var(--fs-body-sm); font-weight: 600; line-height: 1.45; padding: 12px 18px; border-radius: 18px 18px 4px 18px; }\n.convo.on .c-user { animation: aid-up 0.4s var(--ease-out) both; }\n\n.c-answer { display: none; gap: 11px; align-items: flex-start; }\n.convo.answered .c-answer { display: flex; animation: aid-up 0.45s var(--ease-out) both; }\n.ca-bubble { background: var(--frost); border: 1px solid var(--hairline); border-radius: 4px 18px 18px 18px; padding: 16px 18px; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-primary); max-width: 86%; }\n.ca-bubble p { margin: 0; }\n.ca-bubble strong { font-weight: 700; font-variant-numeric: tabular-nums; }\n\n.ans-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }\n.ar { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }\n.ar-name { flex: none; width: 96px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ar-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }\n.ar-bar i { display: block; height: 100%; border-radius: 3px; background: var(--obsidian); }\n.convo.answered .ar-bar i { animation: aid-grow 0.6s var(--ease-out) 0.15s both; transform-origin: left; }\n.ar-days { flex: 1; font-size: 12px; font-weight: 700; color: var(--error-text); }\n.ar-val { flex: none; font-size: 13px; font-weight: 700; color: var(--text-primary); }\n\n.ans-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }\n.an-pill { font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); padding: 4px 11px; }\n.an-pill.up { background: var(--success-bg); color: var(--success-text); }\n.an-cap { font-size: 12px; color: var(--text-secondary); }\n\n.typing { display: none; align-items: center; gap: 11px; margin-top: 18px; }\n.typing.on { display: flex; animation: aid-up 0.3s var(--ease-out) both; }\n.typing .dots { display: inline-flex; gap: 5px; background: var(--frost); border: 1px solid var(--hairline); border-radius: 4px 18px 18px 18px; padding: 14px 16px; }\n.typing .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); animation: aid-dot 1s ease-in-out infinite; }\n.typing .dots i:nth-child(2) { animation-delay: 0.15s; }\n.typing .dots i:nth-child(3) { animation-delay: 0.3s; }\n\n@keyframes aid-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }\n@keyframes aid-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n@keyframes aid-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }\n\n/* statements strip */\n.aid-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: clamp(64px, 7vw, 96px); text-align: center; }\n.as-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n.as-ic { color: var(--text-primary); margin-bottom: 6px; }\n.as-ic svg { width: 24px; height: 24px; stroke-width: 1.75; }\n.as-item h4 { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); }\n.as-item p { margin: 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }\n\n@media (max-width: 900px) {\n  .aid-grid { grid-template-columns: 1fr; }\n  .aid-strip { grid-template-columns: 1fr; gap: 28px; }\n  .chat-body { min-height: 0; }\n}\n\n/* ============================================================\n   MANIFESTO\n   ============================================================ */\n.manifesto { text-align: center; }\n.manifesto h2 {\n  font-size: clamp(32px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.025em;\n  font-weight: var(--fw-semibold); margin: 0 auto; max-width: 18ch; text-wrap: balance;\n}\n.manifesto h2 .muted { color: var(--text-secondary); }\n.manifesto p {\n  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--text-secondary);\n  max-width: 60ch; margin: 30px auto 0;\n}\n.manifesto .strike { color: var(--text-secondary); }\n\n/* ============================================================\n   COMPARISON · open ledger with floating obsidian column\n   Old world reads muted on the page; Symetry lives on a black\n   monolith band that overlaps the ledger top and bottom.\n   ============================================================ */\n.cmp {\n  position: relative;\n  display: grid;\n  grid-template-columns: 17% 39% 44%;\n  margin-top: clamp(56px, 6vw, 84px);\n  margin-bottom: 26px; /* room for the band overhang */\n}\n.cmp-band {\n  position: absolute;\n  left: calc(56% + 24px); width: calc(44% - 24px);\n  top: -26px; bottom: -26px;\n  background: var(--obsidian);\n  border-radius: var(--radius-2xl);\n  box-shadow: 0 30px 70px rgba(0,0,0,0.22);\n  overflow: hidden;\n}\n.cmp-band::after {\n  content: \"\"; position: absolute; inset: 0; pointer-events: none;\n  background: radial-gradient(60% 34% at 50% 112%, rgba(197,159,145,0.22), rgba(197,159,145,0) 70%);\n}\n.cmp-cell { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 11px; padding: 26px 28px; border-bottom: 1px solid var(--hairline); }\n.cmp-cell p { margin: 0; }\n\n.cmp-cat { padding-left: 0; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); padding-top: 31px; }\n.cmp-old { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.5; }\n.cmp-old .x { flex: none; color: var(--text-secondary); margin-top: 2px; }\n.cmp-old .x svg { width: 17px; height: 17px; }\n\n.cmp-sym { margin-left: 24px; padding: 26px 30px; color: #FFFFFF; font-size: var(--fs-body); font-weight: 600; line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,0.10); }\n.cmp-sym p { color: #FFFFFF; }\n.cmp-sym .tick { flex: none; color: var(--dusk-rose); margin-top: 2px; }\n.cmp-sym .tick svg { width: 18px; height: 18px; }\n\n.cmp-head { align-items: center; justify-content: center; text-align: center; border-bottom-color: var(--border-soft); padding-top: 6px; padding-bottom: 20px; }\n.cmp-head.cmp-sym { border-bottom-color: rgba(255,255,255,0.16); padding-top: 30px; padding-bottom: 24px; }\n.cmp-head .co-label { font-size: var(--fs-body-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }\n.cmp-head .cs-logo { height: 15px; display: block; }\n\n.cmp-cell.last { border-bottom: none; }\n.cmp-sym.last { padding-bottom: 30px; }\n\n@media (max-width: 820px) {\n  .cmp { display: flex; flex-direction: column; margin-bottom: 0; }\n  .cmp-band, .cmp-head { display: none; }\n  .cmp-cell { border-bottom: none; padding: 0; }\n  .cmp-cat { padding: 26px 0 10px; }\n  .cmp-old { padding-bottom: 14px; }\n  .cmp-sym { margin-left: 0; padding: 20px 22px; background: var(--obsidian); border-radius: var(--radius-lg); border-bottom: none; }\n  .cmp-sym.last { padding-bottom: 20px; }\n}\n\n/* ============================================================\n   BENEFITY\n   ============================================================ */\n.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(44px, 5vw, 64px); }\n.benefit {\n  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-2xl);\n  padding: 38px; position: relative; overflow: hidden;\n  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);\n}\n.benefit:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }\n.benefit .b-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--obsidian); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom: 22px; }\n.benefit .b-ic svg { width: 23px; height: 23px; }\n.benefit h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0 0 20px; }\n.benefit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }\n.benefit li { display: flex; gap: 13px; align-items: flex-start; font-size: var(--fs-body-lg); line-height: 1.4; }\n.benefit li .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--frost); border:1px solid var(--hairline); color: var(--text-secondary); font-size: 13px; font-weight: 700; display:flex; align-items:center; justify-content:center; font-variant-numeric: tabular-nums; }\n@media (max-width: 820px) { .benefits-grid { grid-template-columns: 1fr; } }\n\n/* ============================================================\n   DARK SECTION (security cover) · brand expression surface\n   ============================================================ */\n.dark-cover {\n  position: relative;\n  background: var(--frost);\n  color: var(--text-primary);\n  text-align: center;\n}\n.dark-cover::before {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: clamp(40px, 6vw, 100px);\n  transform: translateX(-50%);\n  width: min(1100px, 96%);\n  height: clamp(360px, 38vw, 560px);\n  pointer-events: none;\n  background:\n    radial-gradient(ellipse 55% 50% at 50% 45%,\n      rgba(34, 55, 77, 0.22) 0%,\n      rgba(34, 55, 77, 0.14) 30%,\n      rgba(34, 55, 77, 0.06) 55%,\n      rgba(34, 55, 77, 0) 78%),\n    radial-gradient(ellipse 38% 38% at 50% 42%,\n      rgba(0, 0, 0, 0.14) 0%,\n      rgba(0, 0, 0, 0.06) 40%,\n      rgba(0, 0, 0, 0) 75%);\n  z-index: 0;\n}\n.dark-cover .wrap-wide { position: relative; z-index: 1; }\n\n.dark-cover .eyebrow { color: rgba(255,255,255,0.55); }\n.dark-cover .flags { display:flex; gap:10px; justify-content:center; margin-bottom: 26px; }\n.dark-cover .flags { gap: 8px; }\n.dark-cover .flags .fl {\n  width: 36px; height: 36px; border-radius: 50%;\n  display:flex; align-items:center; justify-content:center;\n  overflow: hidden;\n  background: var(--white);\n  border: 1px solid var(--border-soft);\n  box-shadow: var(--shadow-xs);\n  padding: 0;\n}\n.dark-cover .flags .fl svg { width: 100%; height: 100%; display: block; }\n.dark-cover h2 {\n  font-size: clamp(36px, 5.4vw, 68px); line-height: 1.03; letter-spacing: -0.025em;\n  font-weight: var(--fw-semibold); margin: 0 auto; max-width: 15ch; text-wrap: balance; color: var(--text-primary);\n}\n.dark-cover .lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--text-secondary); max-width: 50ch; margin: 24px auto 0; }\n.dark-cover .cover-cta { margin-top: 30px; display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:600; font-size: var(--fs-body); }\n.dark-cover .cover-cta svg { width: 18px; height: 18px; transition: transform var(--dur-base); }\n.dark-cover .cover-cta:hover svg { transform: translateX(4px); }\n.cover-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(48px, 6vw, 80px); }\n.cover-card {\n  background: var(--obsidian);\n  border: 1px solid rgba(255,255,255,0.06);\n  color: #fff;\n  border-radius: var(--radius-2xl);\n  padding: 38px 28px;\n  display: flex; flex-direction: column; align-items: center; gap: 20px;\n  min-height: 220px; justify-content: center;\n  transition: background var(--dur-base);\n}\n.cover-card:hover { background: #0a0a0a; transform: translateY(-2px); box-shadow: var(--shadow-md); }\n.cover-card .cc-ic { color: rgba(255,255,255,0.92); }\n.cover-card .cc-ic svg { width: 52px; height: 52px; stroke-width: 1.4; }\n.cover-card .cc-art svg { width: 84px; height: 84px; stroke-width: initial; }\n.cover-card .cc-art { margin-bottom: 4px; }\n.cover-card .cc-title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }\n.cover-card .cc-sub { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.55); margin-top: -8px; }\n@media (max-width: 820px) { .cover-cards { grid-template-columns: 1fr; } }\n\n/* ============================================================\n   ONBOARDING STEPS\n   ============================================================ */\n.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(44px, 5vw, 64px); }\n.step {\n  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-2xl);\n  padding: 30px 26px; position: relative;\n  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);\n}\n.step:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }\n.step .s-num {\n  font-variant-numeric: tabular-nums;\n  font-size: 13px; font-weight: 700; color: var(--dusk-rose);\n  letter-spacing: 0.06em;\n}\n.step .s-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--frost); border:1px solid var(--hairline); color: var(--text-primary); display:flex;align-items:center;justify-content:center; margin: 18px 0 20px; }\n.step .s-ic svg { width: 22px; height: 22px; }\n.s-ic.s-ic-brand svg { width: 26px; height: 26px; }\n.step h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.005em; margin: 0; line-height: 1.25; }\n@media (max-width: 1000px) { .steps-grid { grid-template-columns: 1fr 1fr; } }\n@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } }\n\n/* ============================================================\n   BENTO WALL (white · obsidian)\n   White band, frost wells, one obsidian monolith in the centre.\n   ============================================================ */\n.bento-section { background: linear-gradient(180deg, #f0f4f7 0%, #f1f4f7 3%, #f2f6f8 7%, #f5f8fa 13%, #f9fbfc 20%, #fdfdfe 28%, #feffff 34%, #ffffff 40%, #ffffff 88%, #feffff 92%, #fdfdfe 94%, #f9fbfc 96%, #f5f8fa 97%, #f2f6f8 99%, #f0f4f7 100%); }\n.bento {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: 204px;\n  gap: 14px;\n  margin-top: clamp(40px, 5vw, 60px);\n}\n.tile {\n  background: var(--frost);\n  border: 1px solid transparent;\n  border-radius: var(--radius-xl);\n  padding: 26px;\n  position: relative; overflow: hidden;\n  display: flex; flex-direction: column;\n  align-items: flex-start;\n  text-align: left;\n  transition: border-color var(--dur-base), background var(--dur-base);\n}\n.tile:hover { border-color: var(--border-soft); }\n.tile .t-eyebrow { font-size: 12px; color: var(--text-secondary); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }\n.tile h3 { font-weight: var(--fw-semibold); letter-spacing: -0.018em; margin: 0; line-height: 1.1; color: var(--text-primary); }\n.tile .t-metric { font-size: clamp(40px, 4vw, 60px); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 0.96; font-variant-numeric: tabular-nums; color: var(--text-primary); }\n.tile .t-metric .unit { font-size: 0.42em; letter-spacing: -0.01em; color: var(--text-secondary); font-weight: 600; }\n.tile .t-title { font-size: var(--fs-h3); }\n.tile .t-sub { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.45; margin-top: auto; }\n.tile .t-top { margin-bottom: auto; }\n.gradient-text { background: var(--gradient-dusk); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }\n\n/* span helpers */\n.col-2 { grid-column: span 2; }\n.row-2 { grid-row: span 2; }\n\n/* centre monolith tile */\n.tile-logo {\n  align-items: center; justify-content: center;\n  text-align: center;\n  background: var(--obsidian);\n}\n.tile-logo::after {\n  content: \"\"; position: absolute; inset: 0; pointer-events: none;\n  background: radial-gradient(58% 46% at 50% 118%, rgba(197,159,145,0.20), rgba(197,159,145,0) 72%);\n}\n.tile-logo .logo-word { width: clamp(150px, 14vw, 198px); position: relative; z-index: 1; }\n.tile-logo .logo-cap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 1; font-size: 12px; color: rgba(255,255,255,0.66); white-space: nowrap; }\n\n/* AI-native chat input tile */\n.tile .ai-input { display:flex; align-items:center; gap:11px; background: var(--white); border: 1px solid var(--hairline); box-shadow: var(--shadow-xs); border-radius: var(--radius-pill); padding: 11px 13px 11px 15px; margin-top: auto; }\n.tile .ai-input .plus { width:26px;height:26px;border-radius:50%; background: var(--obsidian); display:flex;align-items:center;justify-content:center; color:#fff; flex:none; }\n.tile .ai-input .plus svg { width:15px;height:15px; }\n.tile .ai-input span:not(.plus) { color: var(--text-secondary); font-size: 14px; flex:1; }\n\n/* reporting tile · wide sparkline */\n.rep-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }\n.rep-period { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.rep-label { font-size: var(--fs-body-sm); color: var(--text-secondary); }\n.rep-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; }\n.rep-value { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: clamp(30px, 2.4vw, 40px); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text-primary); }\n.rep-delta { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--success-text); background: var(--success-bg); border-radius: var(--radius-pill); padding: 4px 11px; }\n.rep-spark { display: block; align-self: stretch; width: calc(100% + 52px); height: 84px; margin: auto -26px -26px -26px; }\n\n/* live data tile */\n.live { display:flex; align-items:center; gap:8px; margin-top: 14px; }\n.live .ping { width:9px;height:9px;border-radius:50%; background: var(--success-text); position:relative; }\n.live .ping::after { content:\"\"; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(26,92,53,0.45); animation: ping 1.8s var(--ease-out) infinite; }\n@keyframes ping { 0%{transform:scale(0.6);opacity:1;} 100%{transform:scale(1.6);opacity:0;} }\n.live span { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }\n\n@media (max-width: 980px) {\n  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }\n  .col-2 { grid-column: span 2; }\n}\n@media (max-width: 560px) {\n  .bento { grid-template-columns: 1fr; }\n  .col-2, .row-2 { grid-column: span 1; grid-row: span 1; }\n}\n\n/* ============================================================\n   FAQ\n   ============================================================ */\n.faq-section { position: relative; }\n.faq-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-10); }\n.faq-eyebrow { font-size: 12px; color: var(--text-secondary); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }\n.faq-title { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; font-weight: var(--fw-semibold); color: var(--text-primary); margin-top: 14px; }\n.faq-lede { color: var(--text-secondary); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); margin-top: 14px; }\n.faq-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 6px; background: var(--frost); border: 1px solid var(--hairline); border-radius: var(--radius-pill); margin: var(--space-8) auto var(--space-12); }\n.faq-tabs-wrap { text-align: center; }\n.faq-tab { appearance: none; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-weight: var(--fw-medium); font-size: 15px; padding: 10px 22px; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); white-space: nowrap; }\n.faq-tab:hover { color: var(--text-primary); }\n.faq-tab.active { background: var(--obsidian); color: #fff; }\n.faq-list { max-width: 880px; margin: 0 auto; display: none; }\n.faq-list.on { display: block; }\n.faq-item { border-top: 1px solid var(--hairline); }\n.faq-item:last-child { border-bottom: 1px solid var(--hairline); }\n.faq-q { width: 100%; appearance: none; background: transparent; border: 0; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 8px; font: inherit; font-size: clamp(17px, 1.4vw, 20px); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--text-primary); cursor: pointer; line-height: 1.35; }\n.faq-q:hover { color: var(--midnight); }\n.faq-q .faq-icon { flex: none; width: 20px; height: 20px; color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }\n.faq-item.open .faq-q .faq-icon { transform: rotate(90deg); color: var(--text-primary); }\n.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }\n.faq-item.open .faq-a { grid-template-rows: 1fr; }\n.faq-a-inner { overflow: hidden; }\n.faq-a p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.65; padding: 0 8px 26px; max-width: 760px; }\n@media (max-width: 560px) { .faq-q { padding: 22px 4px; } .faq-tab { padding: 9px 16px; font-size: 14px; } }\n\n/* ============================================================\n   FINAL CTA + FOOTER\n   ============================================================ */\n.final-cta { text-align: center; position: relative; overflow: hidden; }\n.final-cta .cta-glow {\n  position:absolute; inset:0; z-index:0; pointer-events:none;\n  background: radial-gradient(50% 70% at 50% 110%, rgba(197,159,145,0.30), rgba(197,159,145,0) 60%);\n}\n.final-cta .inner { position: relative; z-index: 1; }\n.final-cta h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.025em; font-weight: var(--fw-semibold); margin: 0 auto; max-width: 16ch; text-wrap: balance; }\n.final-cta p { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 52ch; margin: 22px auto 0; }\n.final-cta .hero-actions { margin-top: 32px; }\n\n.footer { border-top: 1px solid var(--hairline); padding-block: 48px 40px; }\n.footer-top { display:flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }\n.footer-brand { max-width: 300px; }\n.footer-brand img { height: 17px; margin-bottom: 18px; }\n.footer-brand p { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.5; margin: 0; }\n.footer-cols { display:flex; gap: clamp(36px, 6vw, 80px); flex-wrap: wrap; }\n.footer-col h5 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 16px; font-weight: 700; }\n.footer-col a { display:block; font-size: var(--fs-body-sm); color: var(--text-secondary); margin-bottom: 11px; transition: color var(--dur-base); }\n.footer-col a:hover { color: var(--text-primary); }\n.footer-bottom { display:flex; justify-content: space-between; align-items:center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); flex-wrap: wrap; gap: 14px; }\n.footer-bottom span { font-size: var(--fs-body-sm); color: var(--text-secondary); }\n\n/* ---------- reveal-on-scroll ---------- */\n.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }\n.reveal.in { opacity: 1; transform: none; }\n@media (prefers-reduced-motion: reduce) {\n  .reveal { opacity: 1; transform: none; transition: none; }\n  html { scroll-behavior: auto; }\n  .live .ping::after { animation: none; }\n}\n\n\n/* ============================================================\n   MOBILE FIXES (<=640px) — Nová éra cards + Comparison table\n   ============================================================ */\n@media (max-width: 640px) {\n  .wrap, .wrap-wide { width: min(1320px, 100% - 32px); }\n\n  /* Nová éra bento cards */\n  .era-grid { gap: 16px; margin-top: 32px; }\n  .era-card { padding: 22px; border-radius: var(--radius-xl); }\n  .era-visual { min-height: 0; margin-bottom: 20px; padding: 0; }\n  .era-card h3 { font-size: 22px; margin-bottom: 12px; }\n  .era-list li { font-size: 15px; gap: 9px; }\n  .mini-doc { padding: 12px; }\n  .mini-label { font-size: 10px; letter-spacing: 0.06em; white-space: normal; }\n  .mini-amount { font-size: 14px; white-space: nowrap; }\n  .mini-doc .cap { font-size: 9px; padding: 3px 7px; white-space: nowrap; }\n  .mini-chat .bubble { font-size: 14px; }\n  .mini-chat .bubble .big, .mini-chat .big { font-size: 20px; }\n  .chat-input { font-size: 13px; }\n\n  /* Comparison table (Staré systémy vs Symetry) */\n  .manifesto { text-align: left; }\n  .manifesto h2, .manifesto p { text-align: center; }\n  .cmp { gap: 0; margin-top: 36px; margin-bottom: 0; }\n  .cmp-cell { text-align: left; padding: 0; }\n  .cmp-cell p { text-align: left; }\n  .cmp-cat {\n    padding: 22px 0 8px;\n    font-size: 11px;\n    letter-spacing: 0.08em;\n    color: var(--text-secondary);\n  }\n  .cmp-old {\n    padding: 0 0 14px;\n    font-size: 15px;\n    line-height: 1.5;\n    flex-wrap: wrap;\n  }\n  .cmp-old::before {\n    content: \"Staré systémy\";\n    display: block;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--text-tertiary);\n    margin-bottom: 6px;\n    width: 100%;\n  }\n  .cmp-sym {\n    margin: 0 0 12px;\n    padding: 16px 18px;\n    background: var(--obsidian);\n    border-radius: var(--radius-lg);\n    font-size: 15px;\n    line-height: 1.5;\n    flex-wrap: wrap;\n  }\n  .cmp-sym::before {\n    content: \"Symetry\";\n    display: block;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--dusk-rose);\n    margin-bottom: 6px;\n    width: 100%;\n  }\n  .cmp-sym.last { margin-bottom: 0; padding-bottom: 16px; }\n}\n\n@media (max-width: 640px) {\n  .era-orbit { display: flex !important; flex-direction: column; gap: 12px; align-items: stretch; justify-content: flex-start; min-height: auto; padding: 12px; }\n  .era-orbit .orbit-lines { display: none; }\n  .era-orbit .vault { position: static; width: 100%; justify-content: center; }\n  .era-orbit .orb-pill { position: static; top: auto; left: auto; right: auto; bottom: auto; }\n  .era-orbit .op-1, .era-orbit .op-2, .era-orbit .op-3, .era-orbit .op-4 { position: static; }\n  .era-orbit { }\n  .era-orbit::after { content: ''; display: none; }\n}\n@media (max-width: 640px) {\n  .era-orbit .vault + .orb-pill, .era-orbit .orb-pill { margin: 0; }\n  .era-orbit { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 8px; }\n  .era-orbit .vault { grid-column: 1 / -1; }\n  .era-orbit .op-1, .era-orbit .op-3 { justify-self: start; }\n  .era-orbit .op-2, .era-orbit .op-4 { justify-self: end; }\n  .era-orbit .orbit-lines { display: none; }\n  .era-orbit .vault { flex: 1 1 100%; }\n  .era-orbit .orb-pill { flex: 0 1 auto; }\n}\n</style>\n\n</head>\n<body>\n\n<!-- ============================== NAV ============================== -->\n<header class=\"nav\" id=\"nav\">\n  <div class=\"wrap-wide nav-inner\">\n    <a class=\"nav-logo\" href=\"#top\" aria-label=\"Symetry\">\n      <img src=\"4d4355b8-8781-4a4a-8236-573d899b78d1\" alt=\"SYMETRY.\">\n    </a>\n    <nav class=\"nav-links\">\n      <a href=\"#era\" target=\"_top\">Produkt</a>\n      <a href=\"/resources\" target=\"_top\">Zdroje</a>\n      <a href=\"/pricing\" target=\"_top\">Cenník</a>\n    </nav>\n    <div class=\"nav-cta\">\n      <a href=\"#\" class=\"btn btn-ghost\" style=\"display:none\">Prihlásiť sa</a>\n      <a href=\"/contact\" target=\"_top\" class=\"btn btn-primary nav-cta-primary nav-cta-desktop\">Získajte prednostný prístup</a><a href=\"/contact\" target=\"_top\" class=\"btn btn-primary nav-cta-primary nav-cta-mobile\">Pridajte sa</a>\n      <button type=\"button\" class=\"nav-burger\" id=\"navBurger\" aria-label=\"Menu\" aria-expanded=\"false\" aria-controls=\"navMobile\">\n        <i data-lucide=\"menu\"></i>\n      </button>\n    </div>\n  </div>\n  <div class=\"nav-mobile\" id=\"navMobile\" hidden>\n    <a href=\"#era\" target=\"_top\" data-nav-close>Produkt</a>\n    <a href=\"/resources\" target=\"_top\" data-nav-close>Zdroje</a>\n    <a href=\"/pricing\" target=\"_top\" data-nav-close>Cenník</a>\n    <a href=\"/contact\" target=\"_top\" class=\"btn btn-primary nav-mobile-cta\" data-nav-close>Pridajte sa</a>\n  </div>\n</header>\n\n<main id=\"top\">\n\n<!-- ============================== HERO ============================== -->\n<section class=\"hero\">\n  <div class=\"hero-glow\"></div>\n  <div class=\"wrap-wide hero-inner\">\n    <a href=\"/contact\" target=\"_top\" class=\"pill reveal\">\n      <span class=\"dot\"></span>\n      Získajte prednostný prístup\n      <span class=\"pill-arrow\"><i data-lucide=\"arrow-right\"></i></span>\n    </a>\n    <h1 class=\"reveal\">Účtovníctvo, ktoré beží samo.<br><span class=\"accent\">AI rýchlosťou.</span></h1>\n    <p class=\"hero-sub reveal\">Nestrácajte čas manuálnym účtovaním v zastaralých programoch. <strong>Symetry, AI-natívne účtovníctvo pre slovenské a české firmy, automatizuje až 85 % všetkých úloh.</strong> Od čítania dokladov cez zaúčtovanie a úhrady až po DPH.</p>\n    <div class=\"hero-actions reveal\">\n      <a href=\"/contact\" target=\"_top\" class=\"btn btn-primary btn-lg\">Získajte prednostný prístup <i data-lucide=\"arrow-right\"></i></a>\n      <a href=\"#era\" class=\"btn btn-ghost btn-lg\">Pozrieť produkt</a>\n    </div>\n  </div>\n  <div class=\"wrap-wide hero-shot fade reveal\">\n    <div class=\"shot-frame\">\n      <div class=\"shot-bar\"><i></i><i></i><i></i></div>\n      <div style=\"position:relative;width:100%;aspect-ratio:1920/1020;overflow:hidden;border-radius:inherit;background:#F0F4F7\"><img src=\"/symetry-dashboard.svg\" alt=\"Symetry dashboard\" loading=\"lazy\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;\"></div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================== LOGOS ============================== -->\n<section class=\"logos wrap\">\n  <p>Dôverujú nám tímy, ktoré účtovníctvo posúvajú dopredu</p>\n  <div class=\"logos-marquee\"><div class=\"logos-row\">\n    <img src=\"/logo-contal-ok.png\" alt=\"Contal OK\" style=\"height:clamp(22px,2.6vw,32px);width:auto;opacity:0.5;transition:opacity 200ms;filter:grayscale(100%);\">\n    <img src=\"/logo-hour.png\" alt=\"HOUR\" style=\"height:clamp(22px,2.6vw,32px);width:auto;opacity:0.5;transition:opacity 200ms;filter:grayscale(100%);\">\n    <img src=\"/logo-esyst.png\" alt=\"eSYST\" style=\"height:clamp(22px,2.6vw,32px);width:auto;opacity:0.5;transition:opacity 200ms;filter:grayscale(100%);\">\n  \n    <img src=\"/logo-contal-ok.png\" alt=\"Contal OK\" style=\"height:clamp(22px,2.6vw,32px);width:auto;opacity:0.5;transition:opacity 200ms;filter:grayscale(100%);\">\n    <img src=\"/logo-hour.png\" alt=\"HOUR\" style=\"height:clamp(22px,2.6vw,32px);width:auto;opacity:0.5;transition:opacity 200ms;filter:grayscale(100%);\">\n    <img src=\"/logo-esyst.png\" alt=\"eSYST\" style=\"height:clamp(22px,2.6vw,32px);width:auto;opacity:0.5;transition:opacity 200ms;filter:grayscale(100%);\">\n  </div></div>\n</section>\n\n<!-- ============================== NOVÁ ÉRA / BENTO ============================== -->\n<section class=\"section-pad center\" id=\"era\">\n  <div class=\"wrap\">\n    <div class=\"section-head reveal\">\n      \n      <h2>Nová éra účtovníctva.</h2>\n      <p>Štyri princípy, na ktorých Symetry stojí. Každý z nich nahrádza prácu, ktorú dnes robíte ručne.</p>\n    </div>\n  </div>\n  <div class=\"wrap-wide\" style=\"text-align:left;\">\n    <div class=\"era-grid\">\n\n      <!-- Card 1: Automatické účtovanie -->\n      <article class=\"era-card era-blue reveal\">\n        <div class=\"era-visual\">\n          <div class=\"mini-doc\">\n            <div class=\"mini-row\">\n              <span class=\"mini-label\">Faktúra prijatá</span>\n              <span class=\"cap cap-info\" style=\"margin-left:auto;\">VYŤAŽOVANIE DÁT</span>\n            </div>\n            <div class=\"mini-row\"><div class=\"mini-line\" style=\"width:70%\"></div></div>\n            <div class=\"mini-row\">\n              <div class=\"mini-line\" style=\"width:40%\"></div>\n              <span class=\"mini-amount\" style=\"margin-left:auto;\">1 248,00 €</span>\n            </div>\n          </div>\n          <div class=\"flow-arrow\"><i data-lucide=\"arrow-down\"></i></div>\n          <div class=\"mini-row\" style=\"justify-content:space-between;\">\n            <span class=\"acct-chip\"><i data-lucide=\"check\" style=\"width:14px;height:14px;\"></i> 518 · Služby</span>\n            <span class=\"cap cap-success\">Zaúčtované</span>\n          </div>\n        </div>\n        <h3>Automatické účtovanie</h3>\n        <ul class=\"era-list\">\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Automatické prepísanie dokladov pomocou AI</li>\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Smart zaúčtovanie na príslušný účet</li>\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Vyššia rýchlosť a výrazne menej chýb</li>\n        </ul>\n      </article>\n\n      <!-- Card 2: AI práca s dátami -->\n      <article class=\"era-card era-rose reveal\">\n        <div class=\"era-visual\">\n          <div class=\"mini-chat\">\n            <div class=\"bubble bubble-q\">Aký bol cashflow v marci?</div>\n            <div class=\"bubble bubble-a\">Čistý cashflow v marci.<span class=\"big\">+42 380,00 €</span></div>\n          </div>\n          <div class=\"chat-input\">\n            <span>Spýtajte sa na čokoľvek o svojich financiách…</span>\n            <span class=\"send\"><i data-lucide=\"arrow-up\"></i></span>\n          </div>\n        </div>\n        <h3>AI práca s dátami</h3>\n        <ul class=\"era-list\">\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Všetky dáta v jednom chate, vždy aktuálne</li>\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Úplný detail až na úroveň bločkov a faktúr</li>\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Strategický pohľad na financie v reálnom čase</li>\n        </ul>\n      </article>\n\n      <!-- Card 3: 100% digitálne procesy -->\n      <article class=\"era-card era-sand reveal\">\n        <div class=\"era-visual\">\n          <div class=\"arch-search\"><i data-lucide=\"search\"></i><span>Hľadať v archíve: „Alza marec 2024“</span></div>\n          <div class=\"arch-rows\">\n            <div class=\"arch-row\">\n              <span class=\"ar-ic\"><i data-lucide=\"file-text\"></i></span>\n              <div class=\"ar-meta\"><strong>FA-2024-0312 · Alza.sk</strong><span>Faktúra · 12. 03. 2024</span></div>\n              <span class=\"cap cap-purple\">Marketing</span>\n            </div>\n            <div class=\"arch-row\">\n              <span class=\"ar-ic\"><i data-lucide=\"receipt\"></i></span>\n              <div class=\"ar-meta\"><strong>BL-2026-1148 · Slovnaft</strong><span>Bloček · 28. 05. 2026</span></div>\n              <span class=\"cap cap-info\">Obchod</span>\n            </div>\n            <div class=\"arch-row\">\n              <span class=\"ar-ic\"><i data-lucide=\"network\"></i></span>\n              <div class=\"ar-meta\"><strong>FA-2026-0095 · Datacomp</strong><span>Faktúra · 02. 06. 2026</span></div>\n              <span class=\"cap cap-success\">Infraštruktúra</span>\n            </div>\n          </div>\n        </div>\n        <h3>100 % digitálne procesy</h3>\n        <ul class=\"era-list\">\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Natívne napojenie na eFaktúru a Peppol</li>\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>10-ročný digitálny archív bločkov a faktúr</li>\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Nekompromisná auditovateľnosť</li>\n        </ul>\n      </article>\n\n      <!-- Card 4: Bezpečnosť -->\n      <article class=\"era-card era-mint reveal\">\n        <div class=\"era-visual era-orbit\">\n          <svg class=\"orbit-lines\" viewBox=\"0 0 400 280\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n            <path d=\"M200 140 C 150 112, 115 92, 72 66\"></path>\n            <path d=\"M200 140 C 252 112, 288 92, 330 62\"></path>\n            <path d=\"M200 140 C 150 172, 112 194, 66 216\"></path>\n            <path d=\"M200 140 C 252 172, 292 194, 338 218\"></path>\n          </svg>\n          <div class=\"vault\">\n            <span class=\"vault-ic\"><i data-lucide=\"lock\"></i></span>\n            <div class=\"vault-tx\"><span class=\"vault-t\">Vaše dáta</span><span class=\"vault-s\">Šifrované · AES-256</span></div>\n          </div>\n          <span class=\"orb-pill op-1\"><i data-lucide=\"map-pin\"></i> Hosting v EÚ</span>\n          <span class=\"orb-pill op-2\"><i data-lucide=\"shield-check\"></i> GDPR</span>\n          <span class=\"orb-pill op-3\"><i data-lucide=\"badge-check\"></i> ISO 27001</span>\n          <span class=\"orb-pill op-4\"><i data-lucide=\"award\"></i> ISO 9001</span>\n        </div>\n        <h3>Bezpečnosť na európskej úrovni</h3>\n        <ul class=\"era-list\">\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Dáta držané výhradne v Európskej únii</li>\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Plný súlad s GDPR</li>\n          <li><span class=\"tick\"><i data-lucide=\"check\"></i></span>Certifikácia ISO 27001 a ISO 9001</li>\n        </ul>\n      </article>\n\n    </div>\n  </div>\n</section>\n\n<!-- ============================== SYMETRY AI / MICRO DEMO ============================== -->\n<section class=\"section-pad aidemo-section\" id=\"ai\">\n  <div class=\"wrap\">\n    <div class=\"aid-grid\">\n\n      <div class=\"aid-copy reveal\">\n        <p class=\"eyebrow\">Symetry AI</p>\n        <h2>Najdôležitejšie dáta sú v účtovníctve.</h2>\n        <p class=\"aid-lead\">Získajte k nim konečne plný prístup. Stačí sa spýtať vlastnými slovami a Symetry odpovie nad živými číslami vašej firmy.</p>\n        <div class=\"q-pills\" role=\"tablist\" aria-label=\"Vyberte otázku\">\n          <button class=\"qp active\" type=\"button\" data-q=\"0\">Koľko sme tento mesiac minuli na dodávateľov?</button>\n          <button class=\"qp\" type=\"button\" data-q=\"1\">Aký bude tento mesiac výsledok hospodárenia?</button>\n          <button class=\"qp\" type=\"button\" data-q=\"2\">Ktoré faktúry sú po splatnosti?</button>\n        </div>\n      </div>\n\n      <div class=\"chat reveal\">\n        <div class=\"chat-head\">\n          <img class=\"chat-avatar\" src=\"1c61d802-8be4-41bf-86c9-0c80329164b5\" alt=\"Symetry\">\n          <span class=\"chat-name\">Symetry AI</span>\n          <span class=\"chat-demo\">Demo</span>\n        </div>\n        <div class=\"chat-body\">\n\n          <div class=\"convo\" data-convo=\"0\">\n            <div class=\"c-user\">Koľko sme tento mesiac minuli na dodávateľov?</div>\n            <div class=\"c-answer\">\n              <img class=\"ca-avatar\" src=\"1c61d802-8be4-41bf-86c9-0c80329164b5\" alt=\"\">\n              <div class=\"ca-bubble\">\n                <p>V septembri <strong>48 720 €</strong>, o 8 % menej ako v auguste. Traja najväčší dodávatelia:</p>\n                <div class=\"ans-rows\">\n                  <div class=\"ar\"><span class=\"ar-name\">Alza.sk</span><span class=\"ar-bar\"><i style=\"width:100%\"></i></span><span class=\"ar-val\">12 400 €</span></div>\n                  <div class=\"ar\"><span class=\"ar-name\">AWS</span><span class=\"ar-bar\"><i style=\"width:79%\"></i></span><span class=\"ar-val\">9 850 €</span></div>\n                  <div class=\"ar\"><span class=\"ar-name\">Petit Press</span><span class=\"ar-bar\"><i style=\"width:51%\"></i></span><span class=\"ar-val\">6 300 €</span></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"convo\" data-convo=\"1\">\n            <div class=\"c-user\">Aký bude tento mesiac výsledok hospodárenia?</div>\n            <div class=\"c-answer\">\n              <img class=\"ca-avatar\" src=\"1c61d802-8be4-41bf-86c9-0c80329164b5\" alt=\"\">\n              <div class=\"ca-bubble\">\n                <p>Priebežný výsledok za september je <strong>+24 680 €</strong>. Po zohľadnení očakávaných faktúr odhadujem <strong>+21 200 €</strong>.</p>\n                <div class=\"ans-note\"><span class=\"an-pill up\">+12,4 % oproti augustu</span><span class=\"an-cap\">Účtované priebežne, dáta k dnešnému dňu</span></div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"convo\" data-convo=\"2\">\n            <div class=\"c-user\">Ktoré faktúry sú po splatnosti?</div>\n            <div class=\"c-answer\">\n              <img class=\"ca-avatar\" src=\"1c61d802-8be4-41bf-86c9-0c80329164b5\" alt=\"\">\n              <div class=\"ca-bubble\">\n                <p>Štyri faktúry v celkovej sume <strong>7 940 €</strong>. Najstaršie:</p>\n                <div class=\"ans-rows\">\n                  <div class=\"ar\"><span class=\"ar-name\">Novitech s.r.o.</span><span class=\"ar-days\">18 dní</span><span class=\"ar-val\">3 120 €</span></div>\n                  <div class=\"ar\"><span class=\"ar-name\">Datacomp</span><span class=\"ar-days\">9 dní</span><span class=\"ar-val\">2 480 €</span></div>\n                  <div class=\"ar\"><span class=\"ar-name\">Marso media</span><span class=\"ar-days\">4 dni</span><span class=\"ar-val\">1 260 €</span></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"typing\" aria-hidden=\"true\"><img class=\"ca-avatar\" src=\"1c61d802-8be4-41bf-86c9-0c80329164b5\" alt=\"\"><span class=\"dots\"><i></i><i></i><i></i></span></div>\n        </div>\n      </div>\n\n    </div>\n\n    <div class=\"aid-strip reveal\">\n      <div class=\"as-item\">\n        <span class=\"as-ic\"><i data-lucide=\"zap\"></i></span>\n        <h4>Odpovede hneď</h4>\n        <p>nad aktuálnymi dátami</p>\n      </div>\n      <div class=\"as-item\">\n        <span class=\"as-ic\"><i data-lucide=\"compass\"></i></span>\n        <h4>Lepšie rozhodnutia</h4>\n        <p>a lepšie riadenie firmy</p>\n      </div>\n      <div class=\"as-item\">\n        <span class=\"as-ic\"><i data-lucide=\"shield-check\"></i></span>\n        <h4>Bezpečnosť je prioritou</h4>\n        <p>plná kontrola nad svojimi dátami</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================== MANIFESTO ============================== -->\n<section class=\"section-pad manifesto\">\n  <div class=\"wrap\">\n    <h2 class=\"reveal\">Účtovníctvo bolo vždy pomalé. <span class=\"muted\">Až doteraz.</span></h2>\n    <p class=\"reveal\">Manuálne párovanie transakcií. Ručné prepisovanie dokladov. Uzávierka na poslednú chvíľu. Týždne ubehnú, kým viete, ako sa hýbu čísla. Reporty v exceli. Staré systémy patria do minulosti.</p>\n\n    <div class=\"cmp reveal\">\n      <div class=\"cmp-band\" aria-hidden=\"true\"></div>\n\n      <!-- header -->\n      <div class=\"cmp-cell cmp-cat cmp-head\"></div>\n      <div class=\"cmp-cell cmp-old cmp-head\"><span class=\"co-label\">Staré systémy</span></div>\n      <div class=\"cmp-cell cmp-sym cmp-head\"><img class=\"cs-logo\" src=\"8f719651-8127-4b3e-9eef-38385b2ca76f\" alt=\"SYMETRY.\"></div>\n\n      <!-- Rýchlosť -->\n      <div class=\"cmp-cell cmp-cat\">Rýchlosť</div>\n      <div class=\"cmp-cell cmp-old\"><span class=\"x\"><i data-lucide=\"x\"></i></span><p>Generovanie reportov niekedy aj 100+ sekúnd.</p></div>\n      <div class=\"cmp-cell cmp-sym\"><span class=\"tick\"><i data-lucide=\"check\"></i></span><p>Reporty a načítanie stránok pod 300 ms.</p></div>\n\n      <!-- Reporty a dáta -->\n      <div class=\"cmp-cell cmp-cat\">Reporty a dáta</div>\n      <div class=\"cmp-cell cmp-old\"><span class=\"x\"><i data-lucide=\"x\"></i></span><p>Pokročilejšie reporty treba tvoriť v exceli.</p></div>\n      <div class=\"cmp-cell cmp-sym\"><span class=\"tick\"><i data-lucide=\"check\"></i></span><p>Prístup k dátam cez prirodzený jazyk, odkiaľkoľvek.</p></div>\n\n      <!-- Aktuálnosť dát -->\n      <div class=\"cmp-cell cmp-cat\">Aktuálnosť dát</div>\n      <div class=\"cmp-cell cmp-old\"><span class=\"x\"><i data-lucide=\"x\"></i></span><p>Na aktuálne dáta treba čakať do mesačnej uzávierky.</p></div>\n      <div class=\"cmp-cell cmp-sym\"><span class=\"tick\"><i data-lucide=\"check\"></i></span><p>Dáta sú vždy aktuálne. Symetry účtuje automaticky.</p></div>\n\n      <!-- Uzávierka -->\n      <div class=\"cmp-cell cmp-cat\">Uzávierka</div>\n      <div class=\"cmp-cell cmp-old\"><span class=\"x\"><i data-lucide=\"x\"></i></span><p>Uzávierka vždy na poslednú chvíľu.</p></div>\n      <div class=\"cmp-cell cmp-sym\"><span class=\"tick\"><i data-lucide=\"check\"></i></span><p>Uzávierka do pár dní. Účtovanie je priebežné.</p></div>\n\n      <!-- OCR -->\n      <div class=\"cmp-cell cmp-cat last\">VYŤAŽOVANIE DÁT</div>\n      <div class=\"cmp-cell cmp-old last\"><span class=\"x\"><i data-lucide=\"x\"></i></span><p>Manuálne prepisovanie faktúr a dokladov do systému.</p></div>\n      <div class=\"cmp-cell cmp-sym last\"><span class=\"tick\"><i data-lucide=\"check\"></i></span><p>Automatické vyťažovanie z dokladov cez optimálne AI modely.</p></div>\n    </div>\n\n<!-- ============================== BENEFITY ============================== -->\n<section class=\"section-pad\" id=\"benefits\">\n  <div class=\"wrap-wide\">\n    <div class=\"section-head reveal\" style=\"margin-inline:auto;text-align:center;\">\n      \n      <h2>Postavené pre vašu prax.</h2>\n    </div>\n    <div class=\"benefits-grid\">\n      <article class=\"benefit reveal\">\n        <div class=\"b-ic\"><i data-lucide=\"building-2\"></i></div>\n        <h3>Účtovná kancelária</h3>\n        <ul>\n          <li><span class=\"num\">1</span>Z 10 na 20 klientov pri rovnakom tíme.</li>\n          <li><span class=\"num\">2</span>Rýchlejšia uzávierka, bez stresu každý mesiac.</li>\n          <li><span class=\"num\">3</span>Doprajte klientom online prehľad o ich firme.</li>\n        </ul>\n      </article>\n      <article class=\"benefit reveal\">\n        <div class=\"b-ic\"><i data-lucide=\"briefcase\"></i></div>\n        <h3>Stredné a malé podniky</h3>\n        <ul>\n          <li><span class=\"num\">1</span>Kontrola nad firmou. Dáta sú k dispozícii hneď a vždy.</li>\n          <li><span class=\"num\">2</span>Vyššia produktivita celého finančného tímu.</li>\n          <li><span class=\"num\">3</span>Rýchlejšia mesačná uzávierka až o 50 %.</li>\n        </ul>\n      </article>\n    </div>\n  </div>\n</section>\n\n<!-- ============================== SECURITY (dark cover) ============================== -->\n<section class=\"section-pad dark-cover\" id=\"security\">\n  <div class=\"wrap-wide\">\n    <div class=\"flags reveal\">\n      <span class=\"fl\" aria-label=\"Európska únia\"><svg viewBox=\"0 0 36 36\" aria-hidden=\"true\"><circle cx=\"18\" cy=\"18\" r=\"18\" fill=\"#003399\"/><g fill=\"#FFCC00\"><g id=\"eustar\"><polygon points=\"0,-2.4 0.56,-0.74 2.28,-0.74 0.89,0.28 1.41,1.94 0,0.92 -1.41,1.94 -0.89,0.28 -2.28,-0.74 -0.56,-0.74\"/></g><use href=\"#eustar\" transform=\"translate(18 6)\"/><use href=\"#eustar\" transform=\"translate(24 7.6)\"/><use href=\"#eustar\" transform=\"translate(28.39 12)\"/><use href=\"#eustar\" transform=\"translate(30 18)\"/><use href=\"#eustar\" transform=\"translate(28.39 24)\"/><use href=\"#eustar\" transform=\"translate(24 28.39)\"/><use href=\"#eustar\" transform=\"translate(18 30)\"/><use href=\"#eustar\" transform=\"translate(12 28.39)\"/><use href=\"#eustar\" transform=\"translate(7.6 24)\"/><use href=\"#eustar\" transform=\"translate(6 18)\"/><use href=\"#eustar\" transform=\"translate(7.6 12)\"/><use href=\"#eustar\" transform=\"translate(12 7.6)\"/></g></svg></span>\n      <span class=\"fl\" aria-label=\"Slovensko\"><svg viewBox=\"0 0 36 36\" aria-hidden=\"true\"><defs><clipPath id=\"skCircle\"><circle cx=\"18\" cy=\"18\" r=\"18\"/></clipPath></defs><g clip-path=\"url(#skCircle)\"><rect width=\"36\" height=\"12\" y=\"0\" fill=\"#FFFFFF\"/><rect width=\"36\" height=\"12\" y=\"12\" fill=\"#0B4EA2\"/><rect width=\"36\" height=\"12\" y=\"24\" fill=\"#EE1C25\"/><path d=\"M11 13 h10 v8 c0,3 -2.2,5 -5,6 c-2.8,-1 -5,-3 -5,-6 z\" fill=\"#EE1C25\" stroke=\"#FFFFFF\" stroke-width=\"0.8\"/><path d=\"M14 16 h4 v1.4 h-1.4 v1.4 h1.4 v1.4 h-1.4 v2 h-1.2 v-2 h-1.4 v-1.4 h1.4 v-1.4 h-1.4 z\" fill=\"#FFFFFF\"/></g><circle cx=\"18\" cy=\"18\" r=\"17.5\" fill=\"none\" stroke=\"rgba(0,0,0,0.08)\"/></svg></span>\n    </div>\n    \n    <h2 class=\"reveal\">Bezpečnosť európskych štandardov.</h2>\n    <p class=\"lead reveal\">Od GDPR po lokálne predpisy, vaše dáta zostávajú v bezpečí, súkromné a plne pod vašou kontrolou.</p>\n\n    <div class=\"cover-cards\">\n      <div class=\"cover-card reveal\">\n        <div class=\"cc-ic cc-art\">\n          <svg viewBox=\"0 0 96 96\" fill=\"none\" aria-hidden=\"true\">\n            <path fill=\"rgba(255,255,255,0.26)\" d=\"M24 86 L14 78 L12 66 L20 58 L30 56 L30 48 L24 44 L32 38 L40 36 L46 30 L52 34 L60 38 L78 34 L88 40 L84 54 L74 60 L70 72 L64 64 L60 62 L62 74 L58 80 L54 68 L50 62 L42 64 L36 62 L40 74 L32 84 Z\"></path>\n            <path fill=\"rgba(255,255,255,0.26)\" d=\"M44 26 L48 12 L56 4 L66 6 L70 14 L66 22 L70 28 L64 34 L58 30 L54 36 L48 30 Z\"></path>\n            <path fill=\"rgba(255,255,255,0.26)\" d=\"M28 22 L34 16 L38 20 L36 30 L30 36 L26 28 Z\"></path>\n            <path fill=\"rgba(255,255,255,0.26)\" d=\"M18 28 L24 24 L26 30 L20 34 Z\"></path>\n            <circle cx=\"44\" cy=\"48\" r=\"9\" stroke=\"#FFFFFF\" stroke-width=\"2.5\" fill=\"rgba(10,16,24,0.85)\"></circle>\n            <circle cx=\"44\" cy=\"48\" r=\"3.4\" fill=\"#FFFFFF\"></circle>\n          </svg>\n        </div>\n        <div class=\"cc-title\">Dáta držané v EÚ</div>\n        <div class=\"cc-sub\">Hosting výhradne v Európskej únii</div>\n      </div>\n      <div class=\"cover-card reveal\">\n        <div class=\"cc-ic cc-art\">\n          <svg viewBox=\"0 0 96 96\" fill=\"none\" aria-hidden=\"true\">\n            <defs>\n              <path id=\"gdprStar\" fill=\"#FFFFFF\" d=\"M0,-5 L1.23,-1.7 L4.76,-1.55 L2,0.65 L2.94,4.05 L0,2.1 L-2.94,4.05 L-2,0.65 L-4.76,-1.55 L-1.23,-1.7 Z\"></path>\n            </defs>\n            <use href=\"#gdprStar\" transform=\"translate(48 18)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(63 22)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(74 33)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(78 48)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(74 63)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(63 74)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(48 78)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(33 74)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(22 63)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(18 48)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(22 33)\"></use>\n            <use href=\"#gdprStar\" transform=\"translate(33 22)\"></use>\n            <text x=\"48\" y=\"53\" text-anchor=\"middle\" fill=\"#FFFFFF\" font-family=\"inherit\" font-size=\"14\" font-weight=\"700\" letter-spacing=\"1\">GDPR</text>\n          </svg>\n        </div>\n        <div class=\"cc-title\">V súlade s GDPR</div>\n        <div class=\"cc-sub\">Spracovanie podľa európskeho práva</div>\n      </div>\n      <div class=\"cover-card reveal\">\n        <div class=\"cc-ic cc-art\">\n          <svg viewBox=\"0 0 96 96\" fill=\"none\" aria-hidden=\"true\">\n            <defs>\n              <clipPath id=\"isoBands\">\n                <rect x=\"0\" y=\"0\" width=\"96\" height=\"33\"></rect>\n                <rect x=\"0\" y=\"63\" width=\"96\" height=\"33\"></rect>\n              </clipPath>\n            </defs>\n            <g clip-path=\"url(#isoBands)\" stroke=\"rgba(255,255,255,0.75)\" stroke-width=\"2\">\n              <circle cx=\"48\" cy=\"48\" r=\"33\"></circle>\n              <ellipse cx=\"48\" cy=\"48\" rx=\"13\" ry=\"33\"></ellipse>\n              <ellipse cx=\"48\" cy=\"48\" rx=\"24\" ry=\"33\"></ellipse>\n              <path d=\"M20 34 Q48 26 76 34\"></path>\n              <path d=\"M20 62 Q48 70 76 62\"></path>\n              <line x1=\"48\" y1=\"15\" x2=\"48\" y2=\"81\"></line>\n            </g>\n            <text x=\"48\" y=\"59\" text-anchor=\"middle\" fill=\"#FFFFFF\" font-family=\"inherit\" font-size=\"32\" font-weight=\"800\" letter-spacing=\"1.5\">ISO</text>\n          </svg>\n        </div>\n        <div class=\"cc-title\">ISO 27001 a ISO 9001</div>\n        <div class=\"cc-sub\">Certifikované riadenie a kvalita</div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================== ONBOARDING ============================== -->\n<section class=\"section-pad center\" id=\"start\">\n  <div class=\"wrap-wide\">\n    <div class=\"section-head reveal\" style=\"margin-inline:auto;\">\n      \n      <h2>Účtujete za jedno popoludnie.</h2>\n    </div>\n    <div class=\"steps-grid\" style=\"text-align:left;\">\n      <div class=\"step reveal\">\n        <div class=\"s-num\">KROK 01</div>\n        <div class=\"s-ic\"><i data-lucide=\"user-plus\"></i></div>\n        <h4>Registrujte sa do 30 sekúnd.</h4>\n      </div>\n      <div class=\"step reveal\">\n        <div class=\"s-num\">KROK 02</div>\n        <div class=\"s-ic\"><i data-lucide=\"import\"></i></div>\n        <h4>Importujte dáta z iného účtovného systému.</h4>\n      </div>\n      <div class=\"step reveal\">\n        <div class=\"s-num\">KROK 03</div>\n        <div class=\"s-ic s-ic-brand\"><svg viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><path d=\"M86.9652 69.9397C86.9652 71.9901 86.5512 73.7645 85.7231 75.2628C84.9345 76.7612 83.5742 77.9835 81.6421 78.9299C79.7494 79.8762 77.1667 80.5663 73.8939 81C70.6212 81.4732 66.5204 81.7098 61.5915 81.7098C58.3976 81.7098 55.0657 81.5717 51.5958 81.2957C48.1654 81.0197 44.8729 80.6648 41.7184 80.2311C38.564 79.7579 35.8038 79.2453 33.438 78.6933L34.7984 71.0635C36.7699 71.4972 38.8794 71.9112 41.127 72.3055C43.414 72.6604 45.7995 72.9956 48.2837 73.311C50.8072 73.587 53.3702 73.8236 55.9727 74.0208C58.6145 74.1785 61.2958 74.2573 64.0165 74.2573C66.9344 74.2573 69.3002 74.1785 71.1141 74.0208C72.9673 73.8236 74.3868 73.5476 75.3726 73.1927C76.3583 72.8378 77.0287 72.3844 77.3835 71.8324C77.7778 71.2409 77.975 70.5311 77.975 69.7031C77.975 68.4807 77.7384 67.5936 77.2652 67.0415C76.8315 66.4501 76.1415 66.036 75.1951 65.7995C74.2488 65.5234 73.0856 65.3263 71.7055 65.208L49.0526 63.5519C45.2672 63.3153 42.1719 62.7633 39.7666 61.8958C37.3614 61.0283 35.587 59.806 34.4435 58.2288C33.3394 56.6121 32.7874 54.5617 32.7874 52.0776C32.7874 49.1991 33.6351 46.8727 35.3307 45.0983C37.0656 43.3239 39.8258 42.0227 43.6111 41.1947C47.3965 40.3666 52.3647 39.9526 58.5159 39.9526C60.3692 39.9526 62.4196 40.0315 64.6671 40.1892C66.9541 40.3075 69.3002 40.4849 71.7055 40.7215C74.1108 40.9581 76.4569 41.2538 78.7439 41.6087C81.0309 41.9636 83.1404 42.3382 85.0725 42.7325L83.5347 49.9483C81.7998 49.5934 79.848 49.278 77.6793 49.002C75.55 48.6865 73.2827 48.4302 70.8775 48.2331C68.5116 47.9965 66.0866 47.819 63.6025 47.7007C61.1578 47.543 58.7525 47.4642 56.3867 47.4642C53.2717 47.4642 50.7481 47.543 48.816 47.7007C46.8839 47.819 45.4052 48.0556 44.38 48.4105C43.3548 48.7259 42.6648 49.1794 42.3099 49.7709C41.955 50.3229 41.7776 51.0129 41.7776 51.841C41.7776 52.8662 42.0142 53.6548 42.4873 54.2068C42.9999 54.7589 43.7688 55.1532 44.794 55.3897C45.8192 55.5869 47.081 55.7643 48.5794 55.9221L70.8183 57.5781C73.4996 57.7359 75.8457 58.0907 77.8567 58.6428C79.8677 59.1554 81.5435 59.9046 82.8841 60.8903C84.2642 61.8367 85.2894 63.059 85.9597 64.5574C86.63 66.0163 86.9652 67.8104 86.9652 69.9397Z\" fill=\"currentColor\"/><circle cx=\"98.8117\" cy=\"75.2394\" r=\"5.945\" fill=\"currentColor\"/></svg></div>\n        <h4>Využite možnosti AI naplno.</h4>\n      </div>\n      <div class=\"step reveal\">\n        <div class=\"s-num\">KROK 04</div>\n        <div class=\"s-ic\"><i data-lucide=\"headset\"></i></div>\n        <h4>Náš tím je plne k dispozícii, vždy po slovensky.</h4>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ============================== BENTO WALL (dark) ============================== -->\n<section class=\"section-pad bento-section\">\n  <div class=\"wrap-wide\">\n    <div class=\"section-head reveal\" style=\"margin-inline:auto;text-align:center;\">\n      \n      <h2>Nový spôsob, ako robiť účtovníctvo.</h2>\n    </div>\n\n    <div class=\"bento\">\n\n      <!-- data at hand / wide -->\n      <article class=\"tile col-2 reveal\">\n        <div class=\"t-top\"><span class=\"t-eyebrow\">Konverzačné financie</span></div>\n        <h3 style=\"font-size:var(--fs-h3);max-width:18ch;\">Dáta vždy poruke. Stačí sa spýtať.</h3>\n        <div class=\"ai-input\" style=\"max-width:340px;\"><span class=\"plus\"><i data-lucide=\"search\"></i></span><span>Koľko sme minuli na dodávateľov?</span></div>\n      </article>\n\n      <!-- 85% automated -->\n      <article class=\"tile reveal\">\n        <div class=\"t-top\"><span class=\"t-eyebrow\">Automatizácia</span></div>\n        <div class=\"t-metric\">85<span class=\"unit\">%</span></div>\n        <p class=\"t-sub\">úloh automatizovaných, od dokladov po DPH.</p>\n      </article>\n\n      <!-- 100x faster -->\n      <article class=\"tile reveal\">\n        <div class=\"t-top\"><span class=\"t-eyebrow\">Eventová architektúra</span></div>\n        <div class=\"t-metric\">100<span class=\"unit\">×</span></div>\n        <p class=\"t-sub\">rýchlejšie účtovníctvo a bleskový reporting.</p>\n      </article>\n\n      <!-- 50% faster close -->\n      <article class=\"tile reveal\">\n        <div class=\"t-top\"><span class=\"t-eyebrow\">Priebežné účtovanie</span></div>\n        <div class=\"t-metric\">50<span class=\"unit\">%</span></div>\n        <p class=\"t-sub\" style=\"align-self:stretch;width:100%;text-align:left;\">rýchlejšia mesačná uzávierka.</p>\n      </article>\n\n      <!-- center: Symetry monolith -->\n      <article class=\"tile tile-logo col-2 reveal\">\n        <img class=\"logo-word\" src=\"8f719651-8127-4b3e-9eef-38385b2ca76f\" alt=\"SYMETRY.\">\n        <span class=\"logo-cap\">Platforma Symetry</span>\n      </article>\n\n      <!-- live data -->\n      <article class=\"tile reveal\">\n        <div class=\"t-top\"><span class=\"t-eyebrow\">Reálny čas</span></div>\n        <h3 style=\"font-size:var(--fs-h4);\">Vždy aktuálne dáta vďaka priebežnému účtovaniu cez AI.</h3>\n        <div class=\"live\"><span class=\"ping\"></span><span>Synchronizované práve teraz</span></div>\n      </article>\n\n      <!-- digital archive / wide -->\n      <article class=\"tile col-2 reveal\">\n        <div class=\"t-top\"><span class=\"t-eyebrow\">Digitálny archív</span></div>\n        <div class=\"t-metric\" style=\"font-size:clamp(32px,3vw,46px);\">10 <span class=\"unit\">rokov</span></div>\n        <p class=\"t-sub\" style=\"align-self:stretch;width:100%;text-align:left;\">100 % digitálny archív všetkých bločkov a faktúr.</p>\n      </article>\n\n      <!-- real-time reporting / wide sparkline -->\n      <article class=\"tile col-2 reveal\">\n        <div class=\"t-top rep-head\">\n          <span class=\"t-eyebrow\">Reporting</span>\n        </div>\n        <div class=\"rep-label-row\"><span class=\"rep-label\">Výsledok hospodárenia</span><span class=\"rep-period\">September 2026 · EUR</span></div>\n        <div class=\"rep-value\">24 680 €<span class=\"rep-delta\">+12,4 %</span></div>\n        <svg class=\"rep-spark\" viewBox=\"0 0 520 88\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <defs>\n            <linearGradient id=\"repFade\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0\" stop-color=\"#000000\" stop-opacity=\"0.10\"></stop>\n              <stop offset=\"1\" stop-color=\"#000000\" stop-opacity=\"0\"></stop>\n            </linearGradient>\n          </defs>\n          <path d=\"M0 70 C40 64, 70 76, 110 62 C150 48, 180 58, 220 50 C260 42, 290 54, 330 40 C370 26, 400 36, 440 24 C470 16, 495 20, 520 12 L520 88 L0 88 Z\" fill=\"url(#repFade)\"></path>\n          <path d=\"M0 70 C40 64, 70 76, 110 62 C150 48, 180 58, 220 50 C260 42, 290 54, 330 40 C370 26, 400 36, 440 24 C470 16, 495 20, 520 12\" fill=\"none\" stroke=\"#000000\" stroke-width=\"2\" vector-effect=\"non-scaling-stroke\"></path>\n        </svg>\n      </article>\n\n    </div>\n  </div>\n</section>\n\n\n<!-- ============================== FAQ ============================== -->\n<section class=\"section-pad faq-section\" id=\"faq\">\n  <div class=\"wrap\">\n    <div class=\"faq-head reveal\">\n      <span class=\"faq-eyebrow\">FAQ</span>\n      <h2 class=\"faq-title\">Najčastejšie otázky</h2>\n      \n    </div>\n    <div class=\"faq-tabs-wrap reveal\">\n      <div class=\"faq-tabs\" role=\"tablist\">\n        <button class=\"faq-tab active\" type=\"button\" data-faq=\"firmy\" role=\"tab\" aria-selected=\"true\">Firmy</button>\n        <button class=\"faq-tab\" type=\"button\" data-faq=\"kancelarie\" role=\"tab\" aria-selected=\"false\">Účtovné kancelárie</button>\n      </div>\n    </div>\n        <div class=\"faq-list on reveal\" data-faq-list=\"firmy\">\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Pre koho je Symetry určené?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry je určené pre malé a stredne veľké firmy na Slovensku a v Česku ktoré chcú získať lepšiu kontrolu, vyššiu mieru automatizácie a aktuálny prehľad nad svojimi finančnými procesmi. Najväčší zmysel dáva firmám s približne 20–500 zamestnancami, kde sú účtovné procesy už natoľko komplexné, že spomaľujú reporting, uzávierku a rozhodovanie.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Čo Symetry robí?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry je AI-native platforma pre účtovníctvo a finančné riadenie. Automatizuje opakujúce sa účtovné činnosti, ako je klasifikácia faktúr, párovanie transakcií, zadávanie dát, rekonciliácie a opakujúce sa účtovné zápisy. Zároveň dáva finančným lídrom aktuálny finančný prehľad cez konverzácie nad účtovnými dátami.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Aké problémy Symetry rieši?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry pomáha firmám znižovať množstvo manuálnej účtovnej práce, zrýchľovať finančnú uzávierku a reporting, zlepšovať viditeľnosť finančných dát a škálovať finančné operácie bez nutnosti úmerne zvyšovať počet ľudí v tíme. Je určené pre firmy, ktorým už nestačia fragmentované lokálne účtovné systémy, tabuľky a nespojené pracovné postupy.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Je Symetry účtovný systém alebo AI vrstva?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry je samostatná AI-native platforma pre podvojné účtovníctvo a finančné riadenie. Nie je to len všeobecný AI asistent. Symetry je postavená okolo účtovných workflow, finančnej kontroly, automatizácie, revízie a auditovateľnosti.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Akú účtovnú prácu dokáže Symetry automatizovať?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry dokáže automatizovať rutinné workflow, ako je klasifikácia faktúr, párovanie transakcií, zadávanie dát, rekonciliácie a opakujúce sa účtovné zápisy. Cieľom je automatizovať opakujúcu sa prácu, pričom finančný tím si zachováva kontrolu nad finálnym schválením.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Nahradí Symetry náš finančný tím alebo účtovníka?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Nie. Symetry je navrhnuté tak, aby finančným tímom pomáhala pracovať rýchlejšie a s lepšou kontrolou. Ľudia zostávajú v procese: automatizované výstupy sú pred zaúčtovaním kontrolovateľné a schvaľovateľné.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Ako funguje pilot?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Nasadenie začína discovery fázou, v ktorej Symetry zmapuje vaše workflow a systémy. Následne sa nastaví konkrétny pilotný use case, ktorý sa otestuje s reálnymi dátami. Po pilote môže produkt prejsť do plného nasadenia s onboardingom, spätnou väzbou a živou prevádzkou.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Je Symetry bezpečné?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Áno. Symetry je certifikované podľa ISO 27001 a ISO 9001, plne v súlade s GDPR a postavené s enterprise-grade šifrovaním, rolovým riadením prístupov, kompletným audit logom a dátovou rezidenciou v EÚ.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Čo sa stane po vyžiadaní prístupu do pilotu?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry posúdi vašu žiadosť, overí vhodnosť a naplánuje krátky úvodný hovor. Ak je tam zhoda, začne discovery fáza a spoločne sa definuje pilotný use case.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Poskytujete podporu počas implementácie?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Áno. Implementačná podpora je súčasťou procesu. Symetry spolupracuje s vaším finančným tímom počas nastavenia, testovania aj spustenia do prevádzky.</p></div></div>\n        </div>\n    </div>\n        <div class=\"faq-list reveal\" data-faq-list=\"kancelarie\">\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Môžu Symetry používať aj účtovné kancelárie?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Áno. Symetry používajú aj účtovné kancelárie, ktoré chcú automatizovať opakujúce sa účtovné procesy, zlepšiť spoluprácu s klientmi a prinášať im lepší finančný prehľad.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Aký typ účtovnej kancelárie je najvhodnejší?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry dáva najväčší zmysel účtovným kanceláriám, ktoré obsluhujú aspoň 10 firiem a najmä klientov s pravidelným objemom faktúr, rekonciliáciami, reportingovými potrebami, fragmentovanými nástrojmi a častou komunikáciou s účtovníkmi.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Ako môže Symetry pomôcť účtovnej kancelárii?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry pomáha automatizovať rutinné účtovné činnosti, ako je klasifikácia faktúr, párovanie transakcií, zadávanie dát, rekonciliácie a opakujúce sa účtovné zápisy. To môže znížiť manuálnu záťaž, zlepšiť konzistentnosť a umožniť účtovným tímom sústrediť sa viac na kontrolu, odborné posúdenie a poradenstvo.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Nahrádza Symetry účtovníkov?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Nie. Symetry je navrhnuté tak, aby účtovníkov podporovala, nie nahrádzala. Ľudia zostávajú ako odborný garanti: automatizované výstupy sú kontrolovateľné a schvaľovateľné.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Môžu naši klienti používať Symetry priamo?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Áno. Symetry môžu používať firmy priamo a účtovné kancelárie ho môžu tiež predstaviť vybraným klientom, pri ktorých manuálne účtovné workflow spomaľujú spracovanie, reporting alebo komunikáciu.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Prečo by sa účtovná kancelária mala zaujímať o AI-native účtovníctvo?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Mnohé účtovné kancelárie sú pod tlakom obsluhovať komplexnejších klientov bez toho, aby museli zvyšovať počet ľudí rovnakým tempom. Symetry pomáha automatizovať opakujúce sa procesy, vytvárať lepšiu transparentnosť a podporovať škálovateľné účtovné operácie.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Aké problémy klientov Symetry rieši?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Klientom Symetry pomáha znižovať manuálnu účtovnú prácu, zrýchľovať reporting, zlepšovať finančnú transparentnosť a vytvárať lepšiu kontrolu nad finančnými operáciami. Pre účtovné kancelárie to môže znamenať čistejšie vstupy, rýchlejšie spracovanie, menej opakujúcich sa úloh a štruktúrovanejšiu spoluprácu.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Ako Symetry zlepšuje spoluprácu medzi klientmi a účtovníkmi?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Symetry vytvára kontrolovanejší proces okolo účtovných dát, automatizácie, kontroly a schvaľovania. Namiesto spoliehania sa len na fragmentované nástroje, e-maily, tabuľky alebo lokálne systémy môžu obe strany pracovať v štruktúrovanejšom finančnom prostredí, a centralizovať komunikáciu do jedného systému.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Môže nám Symetry pomôcť ponúkať modernejšiu účtovnú službu?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Áno. Symetry môže účtovným kanceláriám pomôcť posunúť sa od manuálneho spracovania k automatizovanejším a dátovo riadeným finančným operáciám. To môže podporiť lepší klientsky zážitok a vytvoriť priestor pre služby s vyššou pridanou hodnotou.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Ako funguje pilot pre účtovné kancelárie?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Pilot začína discovery fázou klientskych workflow a systémov. Následne sa nakonfiguruje jeden use case a otestuje sa s reálnymi dátami. Po pilote sa môže nasadenie rozšíriť na širšiu živú prevádzku s onboardingom a spätnou väzbou.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Ako dlho trvá začať?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Väčšina tímov vie dokončiť discovery a prípravu pilotu v priebehu 2–3 týždňov, v závislosti od komplexity a dostupnosti klientskych dát.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Je Symetry dostatočne bezpečné pre účtovné kancelárie a ich klientov?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Áno. Symetry je certifikované podľa ISO 27001 a ISO 9001, v súlade s GDPR a postavené s enterprise-grade šifrovaním, rolovým riadením prístupov, audit logom a dátovou rezidenciou v EÚ.</p></div></div>\n        </div>\n        <div class=\"faq-item\">\n          <button class=\"faq-q\" type=\"button\" aria-expanded=\"false\">\n            <span>Môže nám Symetry pomôcť škálovať účtovnú prax?</span>\n            <svg class=\"faq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 6 15 12 9 18\"></polyline></svg>\n          </button>\n          <div class=\"faq-a\"><div class=\"faq-a-inner\"><p>Áno. Automatizáciou opakujúcich sa účtovných procesov a znížením manuálnej práce môže Symetry pomôcť účtovným kanceláriám obslúžiť viac klientov alebo komplexnejších klientov bez toho, aby rovnakým tempom rástla operačná záťaž.</p></div></div>\n        </div>\n    </div>\n  </section>\n<!-- ============================== FINAL CTA ============================== -->\n<section class=\"section-pad final-cta pilot-section\" id=\"pilot\">\n  <div class=\"cta-glow\"></div>\n  <div class=\"wrap inner pilot-grid\">\n    <div class=\"pilot-copy\">\n      <h2 class=\"reveal pilot-title\">Účtovníctvo, ktoré beží samo.</h2>\n      <p class=\"reveal pilot-lede\">Buďte medzi prvými firmami na Slovensku a v Česku, ktoré účtujú AI rýchlosťou.</p>\n    </div>\n    <div class=\"pilot-card reveal\">\n      <form id=\"pilotForm\" class=\"pilot-form\" novalidate>\n        <div class=\"pf-row pf-row-2\">\n          <input class=\"pf-input\" type=\"text\" name=\"name\" placeholder=\"Meno a priezvisko\" required maxlength=\"200\" />\n          <input class=\"pf-input\" type=\"email\" name=\"email\" placeholder=\"Pracovný e-mail\" required maxlength=\"320\" />\n        </div>\n        <div class=\"pf-row pf-row-2\">\n          <input class=\"pf-input\" type=\"text\" name=\"company\" placeholder=\"Názov firmy\" required maxlength=\"300\" />\n          <input class=\"pf-input\" type=\"text\" name=\"role\" placeholder=\"Vaša rola\" required maxlength=\"100\" />\n        </div>\n        <div class=\"pf-row\">\n          <div class=\"pf-select-wrap\">\n            <select class=\"pf-input pf-select\" name=\"source\">\n              <option value=\"\" disabled selected>Ako ste sa o Symetry dozvedeli?</option>\n              <option value=\"LinkedIn\">LinkedIn</option>\n              <option value=\"Google vyhľadávanie\">Google vyhľadávanie</option>\n              <option value=\"Odporúčanie\">Odporúčanie</option>\n              <option value=\"Konferencia / event\">Konferencia / event</option>\n              <option value=\"Iné\">Iné</option>\n            </select>\n            <i data-lucide=\"chevron-down\" class=\"pf-chevron\"></i>\n          </div>\n        </div>\n        <div class=\"pf-row\">\n          <textarea class=\"pf-input pf-textarea\" name=\"challenge\" placeholder=\"Akú finančnú výzvu chcete vyriešiť?\" rows=\"3\" maxlength=\"5000\"></textarea>\n        </div>\n        <button type=\"submit\" class=\"pf-submit\" id=\"pilotSubmit\">\n          <span class=\"pf-submit-label\">Získajte prednostný prístup</span>\n          <i data-lucide=\"arrow-right\"></i>\n        </button>\n        <div class=\"pf-status\" id=\"pilotStatus\" hidden></div>\n      </form>\n      <div class=\"pf-success\" id=\"pilotSuccess\" hidden>\n        <div class=\"pf-success-icon\"><i data-lucide=\"check-circle-2\"></i></div>\n        <h3>Ďakujeme.</h3>\n        <p>Vašu žiadosť sme prijali. Ozveme sa vám do 48 hodín.</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<style>\n.pilot-section { background: var(--frost); }\n.pilot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; text-align: left !important; }\n.pilot-copy .pilot-title { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.025em; margin: 18px 0 22px; text-align: left; max-width: 100%; }\n.pilot-copy .pilot-lede { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 480px; margin: 0; }\n.pilot-copy .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono, var(--font-sans)); font-size: 12px; letter-spacing: 0.18em; color: var(--text-secondary); text-transform: uppercase; font-weight: 500; }\n.pilot-copy .eyebrow-rule { width: 32px; height: 1px; background: var(--text-secondary); display: inline-block; }\n.pilot-card { background: var(--white); border: 1px solid var(--hairline); border-radius: 28px; padding: 36px; box-shadow: var(--shadow-md); }\n.pilot-form { display: flex; flex-direction: column; gap: 14px; }\n.pf-row { display: block; }\n.pf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n.pf-input { width: 100%; height: 56px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--white); font-family: var(--font-sans); font-size: 15px; color: var(--text-primary); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); -webkit-appearance: none; appearance: none; }\n.pf-input::placeholder { color: var(--text-tertiary); }\n.pf-input:focus { outline: none; border-color: var(--obsidian); box-shadow: 0 0 0 4px rgba(0,0,0,0.06); }\n.pf-textarea { height: auto; min-height: 120px; padding: 18px 24px; border-radius: 24px; resize: vertical; font-family: var(--font-sans); line-height: 1.5; }\n.pf-select-wrap { position: relative; }\n.pf-select { padding-right: 48px; cursor: pointer; background-image: none; }\n.pf-chevron { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-secondary); pointer-events: none; }\n.pf-submit { margin-top: 8px; width: 100%; height: 64px; border-radius: 999px; background: var(--obsidian); color: var(--white); border: none; font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }\n.pf-submit:hover { background: #111; transform: translateY(-1px); }\n.pf-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }\n.pf-submit svg { width: 18px; height: 18px; }\n.pf-fineprint { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--text-secondary); }\n.pf-status { margin-top: 10px; padding: 12px 16px; border-radius: 12px; font-size: 14px; text-align: center; background: var(--error-bg); color: var(--error-text); }\n.pf-success { text-align: center; padding: 28px 8px; }\n.pf-success h3 { font-size: 24px; font-weight: 600; margin: 8px 0 6px; }\n.pf-success p { color: var(--text-secondary); }\n.pf-success-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 999px; background: var(--success-bg); color: var(--success-text); margin-bottom: 8px; }\n.pf-success-icon svg { width: 28px; height: 28px; }\n@media (max-width: 900px) {\n  .pilot-grid { grid-template-columns: 1fr; gap: 40px; }\n  .pilot-card { padding: 24px; }\n  .pf-row-2 { grid-template-columns: 1fr; }\n}\n\n/* Mobile fix: era cards mockup overflow */\n@media (max-width: 640px) {\n  .era-card, .era-visual, .mini-doc, .mini-chat, .arch-rows, .chat-input, .arch-search { min-width: 0; max-width: 100%; }\n  .era-visual { overflow: hidden; }\n  .mini-row { flex-wrap: wrap; row-gap: 6px; min-width: 0; }\n  .mini-doc .cap, .cap { font-size: 10px; padding: 3px 8px; white-space: normal; line-height: 1.2; }\n  .acct-chip { font-size: 12px; padding: 5px 10px; white-space: normal; }\n  .mini-amount { font-size: 13px; min-width: 0; }\n  .mini-label { font-size: 10px; }\n  .bubble { max-width: 100%; font-size: 13px; padding: 9px 12px; }\n  .mini-chat .bubble .big, .mini-chat .big { font-size: 17px; }\n  .chat-input { flex-wrap: wrap; font-size: 12px; }\n  .arch-search { flex-wrap: wrap; font-size: 12px; }\n  .arch-row { flex-wrap: nowrap; gap: 8px; min-width: 0; }\n  .arch-row .ar-meta { min-width: 0; flex: 1 1 0; overflow: hidden; }\n  .arch-row .ar-meta strong, .arch-row .ar-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  .era-list li { min-width: 0; }\n}\n</style>\n\n<script>\n(function(){\n  var SUPABASE_URL = \"https://tezlvesgencguedqzxwv.supabase.co\";\n  var SUPABASE_ANON = \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRlemx2ZXNnZW5jZ3VlZHF6eHd2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzU4NDQyMjgsImV4cCI6MjA5MTQyMDIyOH0.92OSpr9klnji-YlXku0team00x2atox-DmYVY0KVBbY\";\n  function $(id){ return document.getElementById(id); }\n  function init(){\n    var form = $(\"pilotForm\");\n    if (!form || form.dataset.bound) return;\n    form.dataset.bound = \"1\";\n    var status = $(\"pilotStatus\");\n    var success = $(\"pilotSuccess\");\n    var btn = $(\"pilotSubmit\");\n    form.addEventListener(\"submit\", async function(e){\n      e.preventDefault();\n      status.hidden = true; status.textContent = \"\";\n      var fd = new FormData(form);\n      var name = (fd.get(\"name\")||\"\").toString().trim();\n      var email = (fd.get(\"email\")||\"\").toString().trim();\n      var company = (fd.get(\"company\")||\"\").toString().trim();\n      var role = (fd.get(\"role\")||\"\").toString().trim();\n      var source = (fd.get(\"source\")||\"\").toString().trim();\n      var challenge = (fd.get(\"challenge\")||\"\").toString().trim();\n      if (!name || !email || !company || !role) {\n        status.hidden = false; status.textContent = \"Vyplňte prosím všetky povinné polia.\"; return;\n      }\n      var messageParts = [];\n      if (role) messageParts.push(\"Rola: \" + role);\n      if (challenge) messageParts.push(\"Výzva: \" + challenge);\n      var payload = {\n        name: name,\n        email: email,\n        company: company,\n        company_size: \"Pilot\",\n        message_text: messageParts.join(\"\\n\") || null,\n        source: source || null,\n        landing_page: (window.location && window.location.pathname) || null,\n        referrer: document.referrer || null\n      };\n      btn.disabled = true;\n      var origLabel = btn.querySelector(\".pf-submit-label\").textContent;\n      btn.querySelector(\".pf-submit-label\").textContent = \"Odosielam...\";\n      try {\n        var res = await fetch(SUPABASE_URL + \"/rest/v1/demo_requests\", {\n          method: \"POST\",\n          headers: {\n            \"Content-Type\": \"application/json\",\n            \"apikey\": SUPABASE_ANON,\n            \"Authorization\": \"Bearer \" + SUPABASE_ANON,\n            \"Prefer\": \"return=minimal\"\n          },\n          body: JSON.stringify(payload)\n        });\n        if (!res.ok) {\n          var txt = await res.text();\n          throw new Error(txt || (\"HTTP \" + res.status));\n        }\n        form.hidden = true;\n        success.hidden = false;\n        if (window.lucide && window.lucide.createIcons) window.lucide.createIcons();\n      } catch (err) {\n        console.error(\"[pilot] submit failed\", err);\n        status.hidden = false;\n        status.textContent = \"Nepodarilo sa odoslať. Skúste to prosím znova.\";\n        btn.disabled = false;\n        btn.querySelector(\".pf-submit-label\").textContent = origLabel;\n      }\n    });\n  }\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", init);\n  } else {\n    init();\n  }\n})();\n</script>\n\n</main>\n\n<!-- ============================== FOOTER ============================== -->\n<footer class=\"footer\">\n  <div class=\"wrap-wide\">\n    <div class=\"footer-top\">\n      <div class=\"footer-brand\">\n        <img src=\"4d4355b8-8781-4a4a-8236-573d899b78d1\" alt=\"SYMETRY.\">\n        <p>AI-natívne účtovníctvo pre slovenské a české firmy.</p>\n      </div>\n      <div class=\"footer-cols\">\n        <div class=\"footer-col\">\n          <h5>Produkt</h5>\n          <a href=\"#features\" target=\"_top\">Produkt</a>\n          <a href=\"/resources\" target=\"_top\">Zdroje</a>\n          <a href=\"/pricing\" target=\"_top\">Cenník</a>\n        </div>\n        <div class=\"footer-col\">\n          <h5>Spoločnosť</h5>\n          <a href=\"/about\" target=\"_top\">O nás</a>\n          <a href=\"/careers\" target=\"_top\">Kariéra</a>\n          <a href=\"/contact\" target=\"_top\">Kontakt</a>\n        </div>\n        <div class=\"footer-col\">\n          <h5>LEGAL</h5>\n          <a href=\"/security\" target=\"_top\">Bezpečnosť</a>\n          <a href=\"/privacy\" target=\"_top\">Ochrana osobných údajov</a>\n        </div>\n      </div>\n    </div>\n    <div class=\"footer-bottom\">\n      <span>© 2026 Symetry. Všetky práva vyhradené.</span>\n      <span>Dáta držané v EÚ · GDPR · ISO 27001</span>\n    </div>\n  </div>\n</footer>\n\n<script src=\"39ead785-c122-427d-af9b-390bcee4f716\"></script>\n<script>\n  lucide.createIcons();\n\n  // nav shadow on scroll\n  const nav = document.getElementById('nav');\n  const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 12);\n  onScroll();\n  window.addEventListener('scroll', onScroll, { passive: true });\n\n  // reveal on scroll\n  const io = new IntersectionObserver((entries) => {\n    entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });\n  }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });\n  document.querySelectorAll('.reveal').forEach((el, i) => {\n    el.style.transitionDelay = Math.min(i % 6, 5) * 50 + 'ms';\n    io.observe(el);\n  });\n\n  // Symetry AI micro demo\n  (function () {\n    const pills = document.querySelectorAll('.qp');\n    const convos = document.querySelectorAll('.convo');\n    const typing = document.querySelector('.chat .typing');\n    if (!pills.length || !typing) return;\n    const instant = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    let timer = null;\n    let played = false;\n\n    function play(i) {\n      clearTimeout(timer);\n      pills.forEach((p) => p.classList.toggle('active', p.dataset.q === String(i)));\n      convos.forEach((c) => {\n        c.classList.toggle('on', c.dataset.convo === String(i));\n        c.classList.remove('answered');\n      });\n      const convo = document.querySelector('.convo[data-convo=\"' + i + '\"]');\n      if (instant) { convo.classList.add('answered'); typing.classList.remove('on'); return; }\n      typing.classList.add('on');\n      timer = setTimeout(() => {\n        typing.classList.remove('on');\n        convo.classList.add('answered');\n      }, 1050);\n    }\n\n    pills.forEach((p) => p.addEventListener('click', () => play(p.dataset.q)));\n\n    const chatIo = new IntersectionObserver((entries) => {\n      entries.forEach((e) => {\n        if (e.isIntersecting && !played) { played = true; play(0); chatIo.disconnect(); }\n      });\n    }, { threshold: 0.4 });\n    chatIo.observe(document.querySelector('.chat'));\n  })();\n\n  // FAQ tabs + accordion\n  (function(){\n    var tabs = document.querySelectorAll('.faq-tab');\n    var lists = document.querySelectorAll('.faq-list');\n    tabs.forEach(function(t){\n      t.addEventListener('click', function(){\n        var key = t.dataset.faq;\n        tabs.forEach(function(x){ var on = x===t; x.classList.toggle('active', on); x.setAttribute('aria-selected', on ? 'true' : 'false'); });\n        lists.forEach(function(l){ l.classList.toggle('on', l.dataset.faqList === key); });\n      });\n    });\n    document.querySelectorAll('.faq-q').forEach(function(q){\n      q.addEventListener('click', function(){\n        var item = q.closest('.faq-item');\n        var open = item.classList.toggle('open');\n        q.setAttribute('aria-expanded', open ? 'true' : 'false');\n      });\n    });\n  })();\n</script>\n\n\n<script>\n(function(){\n  var burger = document.getElementById('navBurger');\n  var panel = document.getElementById('navMobile');\n  if (!burger || !panel) return;\n  function setOpen(open){\n    panel.hidden = !open;\n    if (open) panel.setAttribute('data-open','true'); else panel.removeAttribute('data-open');\n    burger.setAttribute('aria-expanded', open ? 'true' : 'false');\n    var icon = burger.querySelector('i');\n    if (icon) { icon.setAttribute('data-lucide', open ? 'x' : 'menu'); if (window.lucide && window.lucide.createIcons) window.lucide.createIcons(); }\n  }\n  burger.addEventListener('click', function(){ setOpen(panel.hidden); });\n  panel.querySelectorAll('[data-nav-close]').forEach(function(a){ a.addEventListener('click', function(){ setOpen(false); }); });\n  window.addEventListener('resize', function(){ if (window.innerWidth > 900) setOpen(false); });\n})();\n</script>\n</body></html>"