/* Matyáš Průša – inspired by apple.com/cz: big product tiles, vivid colour, aurora light, calm motion. */
:root {
  --bg: #ffffff; --bg-2: #f5f5f7; --card: #ffffff; --text: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7;
  --link: #0066cc; --pill: #0071e3; --pill-hover: #0077ed; --on-pill: #fff;
  --blue: #0071e3; --cyan: #64d2ff; --indigo: #5e5ce6; --purple: #bf5af2; --pink: #ff375f; --orange: #ff9f0a; --yellow: #ffd60a; --green: #30d158; --mint: #63e6be;
  --nav: rgba(250, 250, 252, 0.78); --nav-text: #1d1d1f;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Inter, Roboto, Arial, sans-serif;
  --r-tile: 28px; --wrap: 1120px; --ease: cubic-bezier(.22, .7, .25, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000; --bg-2: #0d0d0f; --card: #1c1c1e; --text: #f5f5f7; --muted: #a1a1a6; --line: #38383a;
    --link: #2997ff; --pill: #0a84ff; --pill-hover: #409cff; --nav: rgba(22, 22, 23, 0.78); --nav-text: #f5f5f7; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #000; --bg-2: #0d0d0f; --card: #1c1c1e; --text: #f5f5f7; --muted: #a1a1a6; --line: #38383a;
  --link: #2997ff; --pill: #0a84ff; --pill-hover: #409cff; --nav: rgba(22, 22, 23, 0.78); --nav-text: #f5f5f7; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.47 var(--font); letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--pill); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--pill); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 12px; }

/* ---------- global nav (Apple: thin, glass) */
.gnav { position: sticky; top: 0; z-index: 60; background: var(--nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.gnav-inner { max-width: 1280px; margin: 0 auto; padding: 0 14px; height: 48px; display: flex; align-items: center; gap: 4px; }
.home { display: grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--nav-text); border-radius: 12px; transition: background .2s; }
.home:hover { background: color-mix(in srgb, var(--nav-text) 9%, transparent); }
.home svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px color-mix(in srgb, var(--purple) 70%, var(--blue)); }
.gnav-links { list-style: none; display: flex; justify-content: space-between; flex: 1; max-width: 860px; margin: 0 auto; padding: 0 12px; }
.gnav-links a { color: var(--nav-text); opacity: .82; font-size: 12.5px; letter-spacing: -0.01em; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.gnav-links a:hover { opacity: 1; text-decoration: none; }
.gnav-tools { display: flex; gap: 2px; }
.tool { min-width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--nav-text); font: 600 12px var(--font); cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.tool:hover { background: color-mix(in srgb, var(--nav-text) 9%, transparent); }
.tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: none; } :root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .i-sun { display: none; } :root:not([data-theme="light"]) .i-moon { display: block; } }
.menu { display: none; }

.ribbon { display: block; text-align: center; padding: 14px 22px; background: var(--bg-2); color: var(--text); font-size: 14px; }
.ribbon:hover { text-decoration: none; }
.ribbon .more { color: var(--link); white-space: nowrap; }

/* ---------- buttons */
.ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 22px; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border-radius: 980px; border: 0;
  background: var(--pill); color: var(--on-pill); font: 400 17px var(--font); letter-spacing: -0.02em; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.pill:hover { background: var(--pill-hover); text-decoration: none; }
.pill:active { transform: scale(.97); }
.pill.big { padding: 13px 28px; }
.pill[disabled] { opacity: .55; cursor: progress; }
.more-link { font-size: 17px; display: inline-flex; align-items: center; gap: .28em; min-height: 44px; }

/* ---------- hero with aurora */
.hero { position: relative; overflow: hidden; min-height: min(92vh, 900px); padding: clamp(80px, 12vh, 140px) 22px clamp(70px, 10vh, 120px); text-align: center;
  isolation: isolate; display: grid; place-items: center; }
.hero > #orb { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero .hero-title, .hero .hero-lead, .hero .hero-name { text-shadow: 0 2px 30px color-mix(in srgb, var(--bg) 85%, transparent); }
.aurora { position: absolute; inset: -20% -10% 0; z-index: -2; filter: blur(70px) saturate(1.25); opacity: .55; }
.aurora span { position: absolute; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%;
  animation: drift 18s var(--ease) infinite alternate; }
.aurora span:nth-child(1) { background: var(--cyan); left: 2%; top: 8%; }
.aurora span:nth-child(2) { background: var(--purple); right: 4%; top: 0; animation-delay: -6s; }
.aurora span:nth-child(3) { background: var(--pink); left: 32%; top: 34%; animation-delay: -11s; opacity: .8; }
.aurora span:nth-child(4) { background: var(--orange); right: 22%; top: 46%; animation-delay: -3s; opacity: .55; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, 8%) scale(1.12); } 100% { transform: translate(-6%, -4%) scale(.94); } }
:root[data-theme="dark"] .aurora { opacity: .42; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aurora { opacity: .42; } }
.hero-inner { max-width: 980px; margin: 0 auto; }
.hero-name { font-size: clamp(19px, 2vw, 24px); font-weight: 600; margin: 0 0 8px; }
.hero-title { font-size: clamp(46px, 8.4vw, 96px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 700; }
.grad { background: linear-gradient(90deg, var(--blue), var(--purple) 30%, var(--pink) 55%, var(--orange) 80%, var(--blue));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 9s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
.hero-lead { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.32; color: var(--muted); max-width: 30ch; margin: 22px auto 0; letter-spacing: -0.02em; }
.stage { position: relative; height: min(78vh, 760px); min-height: 420px; margin: clamp(8px, 2vw, 24px) auto 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .badge { bottom: 8%; }
.hero-photo { position: relative; margin: clamp(44px, 6vw, 72px) auto 0; width: min(560px, 100%); aspect-ratio: 4 / 5; border-radius: 34px 34px 0 0; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(94, 92, 230, .35); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.badge { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 980px; color: #1d1d1f; background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ---------- full-width product tiles */
.tile-xl { position: relative; overflow: hidden; text-align: center; padding: clamp(64px, 8vw, 96px) 22px clamp(56px, 7vw, 84px); margin: 12px; border-radius: var(--r-tile); isolation: isolate; }
.tile-head { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.product { font-size: clamp(42px, 6.4vw, 72px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; }
.product.sm { font-size: clamp(32px, 4vw, 44px); }
.tagline { font-size: clamp(22px, 2.8vw, 30px); line-height: 1.2; font-weight: 500; letter-spacing: -0.025em; margin: 10px 0 0; }
.tagline.sm { font-size: clamp(19px, 2vw, 22px); }
.tile-sub { font-size: 19px; line-height: 1.42; margin: 14px auto 0; max-width: 44ch; opacity: .78; }
.eyebrow-new { display: inline-block; font-size: 15px; font-weight: 600; margin: 0 0 8px; padding: 4px 12px; border-radius: 980px; color: #fff;
  background: linear-gradient(90deg, var(--blue), var(--purple) 30%, var(--pink) 55%, var(--orange) 80%, var(--blue)); background-size: 200% auto;
  animation: shine-rev 9s linear infinite; }
@keyframes shine-rev { from { background-position: 200% center; } to { background-position: 0% center; } }
.t-sss .eyebrow-new { background: linear-gradient(90deg, #2f6bff, #7c5cff, #2f6bff); background-size: 200% auto; }

.t-jarvis { background: #000; color: #f5f5f7; }
.t-jarvis::after { content: ""; position: absolute; left: 50%; bottom: -18%; width: min(1100px, 140%); height: 60%; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 200, 255, .32), rgba(139, 92, 255, .18) 45%, transparent 72%); filter: blur(30px); }
.t-jarvis .reactor { display: none; }
.t-jarvis .more-link { color: #2997ff; }
.t-jarvis .product { font-family: "SF Mono", ui-monospace, Menlo, "Cascadia Mono", Consolas, monospace; font-weight: 600; letter-spacing: .22em;
  padding-left: .22em; background: linear-gradient(100deg, #00f0ff 0%, #36a3ff 40%, #8b5cff 75%, #ff4fd8 100%); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(0, 200, 255, .35)); animation: shine 10s linear infinite; }
.reactor { position: absolute; left: 50%; top: 36%; width: min(900px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; opacity: .5; }
.reactor i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(100, 210, 255, .28); animation: pulse 6s var(--ease) infinite; }
.reactor i:nth-child(2) { inset: 12%; animation-delay: -2s; border-style: dashed; border-color: rgba(100, 210, 255, .22); }
.reactor i:nth-child(3) { inset: 26%; animation-delay: -4s; }
.reactor b { position: absolute; inset: 42%; border-radius: 50%; background: radial-gradient(circle, rgba(127, 227, 255, .55), transparent 70%); filter: blur(10px); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.04) rotate(8deg); opacity: .45; } }
.screen { position: relative; z-index: 1; margin: 46px auto 0; max-width: 980px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 120px rgba(47, 211, 255, .18), 0 0 0 8px rgba(255,255,255,.03); }
.screen figcaption { font-size: 12px; color: #a1a1a6; padding: 8px; background: #0b0b0c; }
.chips { position: relative; z-index: 1; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px auto 0; padding: 0; max-width: 820px; }
.chips li { font-size: 15px; font-weight: 600; padding: 9px 16px; border-radius: 980px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }

.t-sss { background: radial-gradient(90% 70% at 50% 100%, #bcd3ff 0%, transparent 70%), linear-gradient(180deg, #f5f8ff 0%, #e4edff 100%); color: #0b1b3f; }
.t-sss .more-link { color: #1f5bd8; }
:root[data-theme="dark"] .t-sss { background: radial-gradient(90% 70% at 50% 100%, #1d4ed8 0%, transparent 70%), linear-gradient(180deg, #02040d 0%, #071334 100%); color: #f5f7ff; }
:root[data-theme="dark"] .t-sss .more-link { color: #7fb0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-sss { background: radial-gradient(90% 70% at 50% 100%, #1d4ed8 0%, transparent 70%), linear-gradient(180deg, #02040d 0%, #071334 100%); color: #f5f7ff; }
  :root:not([data-theme="light"]) .t-sss .more-link { color: #7fb0ff; } }
.t-sss .product { background: linear-gradient(90deg, #2f6bff, #5aa2ff 50%, #2f6bff); background-size: 200% auto; animation: shine 8s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; }
.shield { position: relative; width: 220px; margin: 44px auto 0; }
.shield img { width: 100%; border-radius: 24%; box-shadow: 0 30px 70px -18px rgba(10, 132, 255, .5); animation: float 7s ease-in-out infinite; }
.score { position: absolute; right: -54px; top: 18px; display: grid; justify-items: center; padding: 10px 16px; border-radius: 18px;
  background: rgba(255,255,255,.82); color: #1d1d1f; box-shadow: 0 12px 30px rgba(0,0,0,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.score b { font-size: 30px; line-height: 1; background: linear-gradient(90deg, #0b8f6b, #30d158); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score span { font-size: 12px; color: #6e6e73; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.sss-list { list-style: none; padding: 0; margin: 46px auto 0; max-width: 860px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.sss-list li { padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--card) 70%, transparent); font-size: 16px; font-weight: 500;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- 2-up colourful tiles */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 12px; }
.tile { position: relative; overflow: hidden; border-radius: var(--r-tile); padding: clamp(48px, 6vw, 64px) 26px 30px; text-align: center; min-height: 560px;
  display: flex; flex-direction: column; isolation: isolate; transition: transform .5s var(--ease); }
.tile:hover { transform: scale(1.008); }
.tile .note { margin: auto 0 0; padding-top: 26px; font-size: 14px; opacity: .78; }
.t-web { background: linear-gradient(150deg, #f6e8ff 0%, #ffe3ee 60%, #fff1e6 100%); color: #1d1d1f; }
.t-web .product { background: linear-gradient(90deg, #8e2de2, #ff375f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-ws { background: linear-gradient(160deg, #ff9f0a 0%, #ff6b3d 55%, #ff375f 100%); color: #fff; }
.t-ws .pill { background: #fff; color: #c2410c; } .t-ws .pill:hover { background: #fff3e6; } .t-ws .more-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.t-care { background: linear-gradient(160deg, #d7fff1 0%, #c8f3ff 100%); color: #10372d; }
.t-audit { background: radial-gradient(120% 90% at 50% 0%, #1d2a6b 0%, #0b0f2e 60%, #05060f 100%); color: #f5f5f7; }
.t-audit .product { background: linear-gradient(90deg, #64d2ff, #5e5ce6); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .t-web { background: linear-gradient(150deg, #2a0f3d 0%, #3d0f24 60%, #3a1a0c 100%); color: #f5f5f7; }
:root[data-theme="dark"] .t-web .product { background: linear-gradient(90deg, #d38bff, #ff6f91); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="dark"] .t-care { background: linear-gradient(160deg, #06302a 0%, #052733 100%); color: #e8fff7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-web { background: linear-gradient(150deg, #2a0f3d 0%, #3d0f24 60%, #3a1a0c 100%); color: #f5f5f7; }
  :root:not([data-theme="light"]) .t-web .product { background: linear-gradient(90deg, #d38bff, #ff6f91); -webkit-background-clip: text; background-clip: text; }
  :root:not([data-theme="light"]) .t-care { background: linear-gradient(160deg, #06302a 0%, #052733 100%); color: #e8fff7; }
}
.t-care .more-link, .t-web .more-link { color: #0066cc; }

.t-sys { background: linear-gradient(160deg, #eef2ff 0%, #e0e7ff 55%, #f5f3ff 100%); color: #1e1b4b; }
.t-sys .product { background: linear-gradient(90deg, #4338ca, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-motion { background: #0a0a0a; color: #f5f5f7; }
.t-motion .product { background: linear-gradient(90deg, #ff9f0a, #ff375f, #bf5af2, #64d2ff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: shine 6s linear infinite; }
:root[data-theme="dark"] .t-sys { background: linear-gradient(160deg, #13153a 0%, #0f1a3d 100%); color: #e0e7ff; }
:root[data-theme="dark"] .t-sys .product { background: linear-gradient(90deg, #a5b4fc, #38bdf8); -webkit-background-clip: text; background-clip: text; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-sys { background: linear-gradient(160deg, #13153a 0%, #0f1a3d 100%); color: #e0e7ff; }
  :root:not([data-theme="light"]) .t-sys .product { background: linear-gradient(90deg, #a5b4fc, #38bdf8); -webkit-background-clip: text; background-clip: text; }
}
.dash { display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 190px; margin: 44px auto 0; padding: 18px 22px; width: min(340px, 92%);
  border-radius: 20px; background: rgba(255,255,255,.65); box-shadow: 0 24px 50px -24px rgba(67, 56, 202, .5); }
.dash i { width: 26px; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #6366f1, #0ea5e9); transform-origin: bottom; animation: grow 3.2s var(--ease) infinite alternate; }
.dash i:nth-child(2n) { animation-delay: -1.2s; } .dash i:nth-child(3n) { animation-delay: -2.1s; }
@keyframes grow { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.blobs { position: relative; height: 220px; margin: 30px auto 0; width: min(360px, 92%); filter: blur(2px); }
.blobs i { position: absolute; width: 140px; height: 140px; border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; mix-blend-mode: screen; animation: morph 7s ease-in-out infinite; }
.blobs i:nth-child(1) { background: #ff375f; left: 10%; top: 20%; }
.blobs i:nth-child(2) { background: #64d2ff; left: 38%; top: 6%; animation-delay: -2.3s; }
.blobs i:nth-child(3) { background: #bf5af2; left: 52%; top: 32%; animation-delay: -4.6s; }
@keyframes morph { 0%, 100% { border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; transform: translate(0, 0) rotate(0); }
  50% { border-radius: 60% 40% 35% 65% / 55% 65% 35% 45%; transform: translate(18px, -14px) rotate(40deg); } }

/* tile illustrations (pure CSS, decorative) */
.browser { width: min(380px, 92%); margin: 40px auto 0; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -20px rgba(142, 45, 226, .45); overflow: hidden; animation: float 8s ease-in-out infinite; }
.browser .bar { display: flex; gap: 6px; padding: 10px 12px; background: #f1f1f4; }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .browser .bar i:nth-child(2) { background: #febc2e; } .browser .bar i:nth-child(3) { background: #28c840; }
.browser .page { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; }
.browser .page b { grid-column: 1 / -1; height: 70px; border-radius: 10px; background: linear-gradient(120deg, #8e2de2, #ff375f, #ff9f0a); background-size: 200%; animation: shine 6s linear infinite; }
.browser .page span { grid-column: 1 / -1; height: 9px; border-radius: 6px; background: #e6e6ea; } .browser .page span + span { width: 70%; }
.browser .page em { height: 46px; border-radius: 9px; background: #f2eefc; }
.formats { list-style: none; padding: 0; margin: 40px auto 0; display: grid; gap: 10px; width: min(360px, 100%); }
.formats li { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-radius: 18px; background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 17px; }
.formats b { font-weight: 600; } .formats span { opacity: .9; font-size: 15px; }
.pulse { margin: 54px auto 0; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 980px; background: rgba(255,255,255,.7);
  color: #10372d; font-weight: 600; font-size: 15px; box-shadow: 0 16px 40px -16px rgba(16, 140, 100, .45); }
.pulse .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(48, 209, 88, .6); animation: ping 2s ease-out infinite; }
@keyframes ping { to { box-shadow: 0 0 0 14px rgba(48, 209, 88, 0); } }
.radar { position: relative; width: 210px; aspect-ratio: 1; margin: 40px auto 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgba(100, 210, 255, .12), transparent 70%); }
.radar i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(100, 210, 255, .3); } .radar i:nth-child(2) { inset: 18%; } .radar i:nth-child(3) { inset: 36%; }
.radar b { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(100, 210, 255, .55), transparent 25%); animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- section titles */
.section-title { font-size: clamp(36px, 5vw, 56px); line-height: 1.07; letter-spacing: -0.035em; font-weight: 700; }
.section-sub { font-size: clamp(19px, 2vw, 21px); color: var(--muted); margin: 14px 0 0; max-width: 46ch; }

/* ---------- portfolio rail */
.rail-section { padding: clamp(80px, 10vw, 120px) 0 clamp(40px, 6vw, 60px); }
.rail-head { margin-bottom: 36px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 520px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px max(22px, calc((100vw - var(--wrap)) / 2 + 22px)) 24px; scroll-padding-inline: max(22px, calc((100vw - var(--wrap)) / 2 + 22px)); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.project { scroll-snap-align: start; border-radius: var(--r-tile); overflow: hidden; background: var(--bg-2); color: var(--text); display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.project:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.35); text-decoration: none; }
.project .shot { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.project .shot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.28), transparent 60%); pointer-events: none; }
.project .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.project .shot img.icon { width: 38%; height: auto; border-radius: 22%; box-shadow: 0 24px 50px -16px rgba(10, 132, 255, .55); }
.project .mono { font-size: clamp(54px, 7vw, 84px); font-weight: 800; letter-spacing: -0.05em; color: rgba(255,255,255,.95); text-shadow: 0 10px 30px rgba(0,0,0,.25); }
.project .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.project h3 { font-size: 24px; letter-spacing: -0.03em; }
.project p { margin: 0; color: var(--muted); font-size: 16px; }
.project .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.status { font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: 980px; }
.status.live { background: color-mix(in srgb, var(--green) 18%, transparent); color: #1a8a45; }
.status.beta { background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--link); }
.status.wip { background: color-mix(in srgb, var(--orange) 20%, transparent); color: #b25e00; }
:root[data-theme="dark"] .status.live { color: var(--green); } :root[data-theme="dark"] .status.wip { color: var(--orange); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status.live { color: var(--green); } :root:not([data-theme="light"]) .status.wip { color: var(--orange); } }
.project .go { color: var(--link); font-size: 15px; }
.rail-ctrl { display: flex; justify-content: flex-end; gap: 10px; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg-2); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s; }
.arrow:hover { background: color-mix(in srgb, var(--text) 10%, var(--bg-2)); }

/* ---------- about */
.about { padding: clamp(70px, 9vw, 110px) 0; background: var(--bg-2); margin: 12px; border-radius: var(--r-tile); }
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.about p { font-size: 19px; color: var(--muted); margin: 0 0 16px; }
.stats { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; padding: 0; margin: 26px 0 0; }
.stats li { display: grid; }
.stats b { font-size: 34px; letter-spacing: -0.03em; background: linear-gradient(90deg, var(--blue), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { font-size: 14px; color: var(--muted); }

/* ---------- contact */
.contact { padding: clamp(80px, 10vw, 120px) 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
.contacts { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.contacts li { display: flex; flex-direction: column; }
.contacts .label { font-size: 13px; color: var(--muted); font-weight: 600; }
.contacts a { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; }
.contacts small { color: var(--muted); font-size: 14px; }
.form { position: relative; border-radius: var(--r-tile); padding: clamp(24px, 4vw, 36px); display: grid; gap: 16px; align-content: start; background: var(--bg-2); overflow: hidden; }
.form::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--purple) 22%, transparent), transparent 70%); pointer-events: none; }
.field { position: relative; display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { font: 17px var(--font); color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; min-height: 48px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pill) 22%, transparent); }
.field [aria-invalid="true"] { border-color: #e30000; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .pill { justify-self: start; position: relative; }
.form-note { margin: 0; font-size: 15px; min-height: 1.4em; position: relative; }
.form-note.ok { color: #1a8a45; } .form-note.err { color: #e30000; }
.fine { margin: 0; font-size: 13px; color: var(--muted); position: relative; }

/* ---------- footer */
.footer { background: var(--bg-2); color: var(--muted); font-size: 13px; padding: 44px 0 30px; margin-top: 12px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.foot-cols h3 { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; }
.foot-cols a { display: flex; align-items: center; min-height: 32px; color: var(--muted); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.foot-bottom p { margin: 0; }

.js .grid2 .tile { transition: none; }
/* ---------- motion: tiles grow into place as you scroll (driven by --p from app.js), text never fades */
.js .tile-xl, .js .grid2 .tile, .js .about { transform: translateY(calc((1 - var(--p, 1)) * 60px)) scale(calc(.9 + var(--p, 1) * .1));
  border-radius: calc(var(--r-tile) + (1 - var(--p, 1)) * 30px); will-change: transform; }
.js .form { transform: translateY(calc((1 - var(--p, 1)) * 36px)) scale(calc(.94 + var(--p, 1) * .06)); will-change: transform; }   /* 40 % gentler */
.js .grid2 .tile:hover { transform: translateY(calc((1 - var(--p, 1)) * 60px)) scale(calc(.9 + var(--p, 1) * .1 + .006)); }
.js .screen, .js .shield, .js .browser, .js .dash { translate: 0 calc((1 - var(--p, 1)) * 50px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .tile-xl, .js .grid2 .tile, .js .about, .js .form { transform: none; }
  .eyebrow-new { animation: none; }
  .js .screen, .js .shield, .js .browser, .js .dash { translate: none; }
  .aurora span, .grad, .reactor i, .shield img, .browser, .browser .page b, .pulse .dot, .radar b, .dash i, .blobs i, .t-jarvis .product, .t-motion .product { animation: none; }
  .tile, .project, .pill { transition: none; }
}


/* ================= sub-pages (JARVIS, SSS) */
.subnav { position: sticky; top: 48px; z-index: 50; background: var(--nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.subnav-inner { max-width: 1024px; margin: 0 auto; padding: 0 22px; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.subnav-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.pill.small { min-height: 36px; padding: 6px 16px; font-size: 14px; }
.sub-hero { margin-top: 12px; }
.sub-hero .shield { margin-bottom: 10px; }
.features-section { padding: clamp(70px, 9vw, 110px) 0; }
.section-title.center, .center { text-align: center; }
.gap-top { margin-top: clamp(60px, 8vw, 96px); }
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 46px; }
.feat { position: relative; overflow: hidden; border-radius: var(--r-tile); padding: 30px 30px 26px; background: var(--bg-2); }
.feat { --c2: color-mix(in srgb, var(--c) 35%, var(--pink)); }
.feat:nth-child(3n+2) { --c2: color-mix(in srgb, var(--c) 35%, var(--purple)); } .feat:nth-child(3n) { --c2: color-mix(in srgb, var(--c) 35%, var(--orange)); }
.feat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c), var(--c2)); }
.feat::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(var(--c2), transparent 70%); opacity: .14; pointer-events: none; }
.feat h3 { font-size: 26px; letter-spacing: -0.03em; margin-bottom: 14px; background: linear-gradient(90deg, var(--c), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: saturate(1.15) brightness(.82); }
:root[data-theme="dark"] .feat h3 { filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feat h3 { filter: none; } }
:root[data-theme="dark"] .feat { background: #161618; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 20px 50px -30px color-mix(in srgb, var(--c) 60%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feat { background: #161618; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 20px 50px -30px color-mix(in srgb, var(--c) 60%, transparent); } }
.feat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feat li { position: relative; padding-left: 22px; font-size: 17px; }
.feat li { padding-left: 26px; }
.feat li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; background: linear-gradient(135deg, var(--c), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band { margin: 12px; border-radius: var(--r-tile); padding: clamp(60px, 8vw, 96px) 0; background: radial-gradient(120% 120% at 0% 0%, #13235c 0%, #0a0f2b 55%, #05060f 100%); color: #f5f5f7; }
.band .section-sub { color: #a1a1a6; }
.band-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.checks-lg { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks-lg li { padding: 16px 18px 16px 50px; border-radius: 18px; background: rgba(255,255,255,.06); position: relative; font-size: 17px; }
.checks-lg li::before { content: "✓"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #04210f; background: #30d158; }
.platforms { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; margin: 36px 0 0; }
.platforms li { padding: 14px 24px; border-radius: 980px; background: var(--bg-2); font-size: 19px; font-weight: 600; }
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; margin: 40px 0 0; }
.steps li { counter-increment: s; padding: 26px 22px; border-radius: 22px; background: var(--bg-2); display: grid; gap: 6px; }
.steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--purple)); margin-bottom: 8px; }
.steps b { font-size: 19px; } .steps span { color: var(--muted); font-size: 16px; }

/* ================= order page */
.order-page { padding-bottom: 40px; }
.order-hero { padding: clamp(50px, 8vw, 90px) 22px 30px; text-align: center; }
.order-hero .section-sub { margin-left: auto; margin-right: auto; }
.order-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.order-steps { display: grid; gap: 18px; }
.step { border: 0; margin: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-tile); background: var(--bg-2); min-width: 0; }
.step legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 18px; }
.step legend + * { clear: both; }
.num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); flex: none; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.svc { position: relative; display: grid; gap: 2px; padding: 16px 16px 16px 46px; border-radius: 18px; background: var(--card); border: 2px solid transparent; cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease); min-height: 64px; }
.svc:hover { transform: translateY(-1px); }
.svc input { position: absolute; opacity: 0; pointer-events: none; }
.svc .svc-dot { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); }
.svc.on { border-color: var(--c); }
.svc.on .svc-dot { border-color: var(--c); background: radial-gradient(circle, var(--c) 45%, transparent 50%); }
.svc:has(input:focus-visible) { outline: 3px solid var(--pill); outline-offset: 2px; }
.svc b { font-size: 17px; } .svc small { color: var(--muted); font-size: 14px; }
.opt { margin-bottom: 18px; }
.mini-label { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 980px; background: var(--card); border: 1.5px solid var(--line); font-size: 15px; transition: all .15s; }
.pick.on span { background: color-mix(in srgb, var(--pill) 12%, var(--card)); border-color: var(--pill); color: var(--link); font-weight: 600; }
.pick:has(input:focus-visible) span { outline: 3px solid var(--pill); outline-offset: 2px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.order-steps .field { margin-bottom: 4px; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin-bottom: 14px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 10px; font-size: 15px; transition: background .15s; }
.seg input:checked + span { background: var(--pill); color: #fff; }
.seg label:has(input:focus-visible) span { outline: 3px solid var(--pill); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin-top: 14px; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pill); flex: none; }
.err { color: #e30000; font-size: 15px; margin: 12px 0 0; }
.summary { position: sticky; top: 70px; border-radius: var(--r-tile); padding: 26px; background: var(--bg-2); display: grid; gap: 14px; }
.summary h2 { font-size: 22px; letter-spacing: -0.03em; }
.summary .muted { color: var(--muted); margin: 0; }
.sum-svc { margin: 0; font-size: 19px; font-weight: 700; color: var(--c); }
.sum-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.sum-list li { display: grid; gap: 1px; } .sum-list span { font-size: 13px; color: var(--muted); } .sum-list b { font-size: 15px; font-weight: 600; }
.pill.wide { width: 100%; }
.done { padding: clamp(60px, 10vw, 120px) 22px; }
.done-card { max-width: 640px; margin: 0 auto; text-align: center; }
.done-card .section-sub { margin-left: auto; margin-right: auto; }
.done-check { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; font-size: 42px; color: #fff;
  background: linear-gradient(135deg, #30d158, #0a84ff); box-shadow: 0 20px 50px -16px rgba(48, 209, 88, .6); }
.done-id { font-weight: 600; margin-top: 16px; }
@media (max-width: 900px) {
  .order-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .feat-grid, .band-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .svc-grid, .two, .steps { grid-template-columns: 1fr; } .subnav-title { font-size: 16px; } }

/* ---------- responsive */
@media (max-width: 1000px) { .sss-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 834px) {
  .gnav-links { position: fixed; inset: 48px 0 auto 0; flex-direction: column; margin: 0; padding: 10px 26px 24px; background: var(--bg); display: none;
    border-bottom: 1px solid var(--line); }
  .gnav-links.open { display: flex; }
  .gnav-links a { font-size: 24px; font-weight: 600; opacity: 1; padding: 6px 0; }
  .gnav-links { max-width: none; }
  .gnav-tools { margin-left: auto; }
  .menu { display: grid; }
  .grid2, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
}
@media (max-width: 600px) {
  .tile-xl, .grid2, .about { margin-left: 8px; margin-right: 8px; }
  .grid2 { gap: 8px; }
  .sss-list { grid-template-columns: 1fr; }
  .score { right: -30px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .hero-photo { border-radius: 26px 26px 0 0; }
}

/* ---------------------------------------------------------------- service pages: offers, topics, agenda, FAQ, chat */
.sub-hero .ctas { justify-content: center; margin-top: 22px; }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.offer { position: relative; padding: 30px 26px; border-radius: 24px; background: var(--bg-2); overflow: hidden; }
.offer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, var(--pink))); }
.offer-meta { margin: 0; font-size: 14px; font-weight: 600; color: var(--c); text-transform: uppercase; letter-spacing: .04em; }
.offer h3 { font-size: 28px; letter-spacing: -0.02em; margin: 6px 0 8px; }
.offer > p:not(.offer-meta) { color: var(--muted); margin: 0 0 16px; line-height: 1.45; }
.offer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.offer li { padding-left: 24px; position: relative; line-height: 1.4; }
.offer li::before { content: "✓"; position: absolute; left: 0; color: var(--c); font-weight: 700; }
.topics { list-style: none; padding: 0; margin: 36px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.topics li { padding: 12px 20px; border-radius: 980px; font-size: 17px; font-weight: 500; background: var(--bg-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); transition: transform .25s var(--ease), box-shadow .25s; }
.topics li:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 60%, transparent); }
.agenda { list-style: none; padding: 0; margin: 40px auto 0; max-width: 760px; display: grid; gap: 0; position: relative; }
.agenda::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--orange), var(--pink), var(--purple)); border-radius: 2px; }
.agenda li { position: relative; display: grid; gap: 4px; padding: 14px 0 14px 54px; }
.agenda li::before { content: ""; position: absolute; left: 9px; top: 20px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 4px var(--orange); }
.agenda b { font-size: 21px; } .agenda span { color: var(--muted); font-size: 17px; }
.faq { max-width: 820px; margin: 36px auto 0; display: grid; gap: 10px; }
.faq-item { border-radius: 18px; background: var(--bg-2); padding: 0 22px; }
.faq-item summary { cursor: pointer; list-style: none; padding: 20px 30px 20px 0; font-size: 19px; font-weight: 600; position: relative; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 26px; font-weight: 400; color: var(--muted); transition: rotate .25s var(--ease); }
.faq-item[open] summary::after { rotate: 45deg; }
.faq-item p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }

.features-section .rail { margin-top: 36px; }
.sub-hero.t-ws { background: radial-gradient(120% 90% at 50% 0%, #ffb340 0%, #ff6b3d 45%, #ff375f 80%, #d6246e 100%); }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } }
.section-sub.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------------- nav cart */
.tool.cart { position: relative; }
.tool.cart svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- live demos (seq.js) */
[data-seq] .scene { display: none; } [data-seq] .scene.on { display: grid; }
.it { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.it.in { opacity: 1; transform: none; }
.typing { display: none !important; gap: 5px; } .typing.in { display: flex !important; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

/* chat (workshops) – an iPhone Messages thread */
.chat { position: relative; z-index: 1; width: min(440px, 100%); margin: 40px auto 0; padding: 18px 16px 22px; border-radius: 34px; text-align: left;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 40px 80px -30px rgba(80, 0, 40, .55); backdrop-filter: blur(14px); min-height: 330px; }
.chat-top { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 14px; }
.chat-top b { padding: 4px 10px; border-radius: 980px; background: rgba(255,255,255,.22); font-weight: 600; }
.chat .scene { gap: 8px; align-content: start; }
.chat .it, .chat .typing { margin: 0; padding: 10px 15px; border-radius: 20px; max-width: 80%; font-size: 15.5px; line-height: 1.35; }
.chat .me { justify-self: end; background: #fff; color: #1d1d1f; border-bottom-right-radius: 6px; }
.chat .ai { justify-self: start; background: linear-gradient(135deg, #0a84ff, #5e5ce6); color: #fff; border-bottom-left-radius: 6px; }
.chat .typing { justify-self: start; background: rgba(0,0,0,.25); color: #fff; padding: 14px 16px; }
.chat .tag { justify-self: center; font-size: 12px; opacity: .8; color: #fff; margin: 0 0 4px; }

/* phone lock screen with notifications (care) */
.phone { position: relative; z-index: 1; width: 300px; height: 520px; margin: 40px auto 0; border-radius: 48px; padding: 14px; background: #111;
  box-shadow: 0 0 0 2px #2a2a2c, 0 40px 90px -30px rgba(0, 80, 60, .6); }
.phone-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; padding: 56px 12px 12px; color: #fff; text-align: center;
  background: radial-gradient(120% 70% at 30% 0%, #2fd3a5 0%, #0b6a7a 45%, #062a3a 100%); }
.phone-screen::before { content: ""; position: absolute; top: 10px; left: 50%; translate: -50%; width: 92px; height: 26px; border-radius: 20px; background: #000; }
.phone-date { margin: 0; font-size: 14px; opacity: .85; } .phone-time { margin: 0 0 18px; font-size: 68px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.phone .scene { gap: 8px; }
.notif { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 18px; text-align: left;
  background: rgba(255,255,255,.22); backdrop-filter: blur(16px); font-size: 13px; line-height: 1.3; }
.notif::before { content: "J"; grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: linear-gradient(135deg, #00f0ff, #8b5cff); color: #001; }
.notif b { font-size: 13px; } .notif span { opacity: .92; }
.notif.bad::before { content: "!"; background: linear-gradient(135deg, #ff9f0a, #ff375f); color: #fff; }

/* terminal (security) */
.term { position: relative; z-index: 1; width: min(560px, 100%); margin: 40px auto 0; border-radius: 16px; overflow: hidden; text-align: left;
  background: rgba(5, 8, 22, .82); box-shadow: inset 0 0 0 1px rgba(100, 210, 255, .2), 0 40px 90px -30px rgba(40, 80, 255, .55); backdrop-filter: blur(10px); }
.term-bar { display: flex; gap: 6px; padding: 12px 14px; background: rgba(255,255,255,.05); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-body { display: grid; gap: 7px; padding: 16px 18px 20px; min-height: 250px; align-content: start; font: 14px/1.45 ui-monospace, "SF Mono", Menlo, monospace; color: #cfe8ff; }
.term-body .it { transform: none; margin: 0; }
.term .ok { color: #30d158; } .term .bad { color: #ff6b6b; } .term .warn { color: #ffd60a; } .term .cmd { color: #64d2ff; }
.term .tscore { margin-top: 6px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.15); color: #fff; font-weight: 700; }

/* site that builds itself (web) */
.builder { position: relative; z-index: 1; width: min(560px, 100%); margin: 40px auto 0; border-radius: 16px; overflow: hidden; background: #fff; text-align: left;
  box-shadow: 0 40px 80px -30px rgba(142, 45, 226, .5); }
.builder .bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f1f1f4; }
.builder .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .builder .bar i:nth-child(2) { background: #febc2e; } .builder .bar i:nth-child(3) { background: #28c840; }
.builder .url .it { transform: none; }
.builder .url { margin-left: 10px; flex: 1; padding: 5px 12px; border-radius: 8px; background: #fff; font: 12.5px ui-monospace, Menlo, monospace; color: #555; white-space: nowrap; overflow: hidden; }
.builder .page { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.builder .nav { grid-column: 1 / -1; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #1d1d1f 0 18%, transparent 18% 60%, #e6e6ea 60%); }
.builder .heroB { grid-column: 1 / -1; height: 96px; border-radius: 12px; background: linear-gradient(120deg, #8e2de2, #ff375f, #ff9f0a); background-size: 200%; animation: shine 6s linear infinite; }
.builder .h1 { grid-column: 1 / -1; height: 14px; width: 70%; border-radius: 6px; background: #1d1d1f; } .builder .p1 { grid-column: 1 / -1; height: 9px; width: 90%; border-radius: 6px; background: #e1e1e6; }
.builder .card { height: 64px; border-radius: 10px; background: #f2eefc; }
.builder .scores { grid-column: 1 / -1; display: flex; justify-content: space-around; padding-top: 6px; }
.builder .scores > div > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-weight: 700; font-size: 15px; color: #0b8a3e;
  background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(#30d158 100%, #e6e6ea 0); }
.builder .scores small { display: block; font-size: 10px; color: #6e6e73; font-weight: 500; text-align: center; margin-top: 4px; }

/* kanban that moves on its own (systems) */
.kanban { position: relative; z-index: 1; width: min(640px, 100%); margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px;
  border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: 0 30px 70px -30px rgba(67, 56, 202, .5); text-align: left; backdrop-filter: blur(8px); }
.kanban .col { display: grid; gap: 8px; align-content: start; min-height: 190px; }
.kanban .col > b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #4338ca; }
.kanban .k { margin: 0; padding: 9px 10px; border-radius: 10px; background: #fff; font-size: 12.5px; color: #1e1b4b; box-shadow: 0 2px 8px rgba(30, 27, 75, .08); border-left: 3px solid var(--k, #6366f1); }
.kanban .mover { position: absolute; left: 14px; top: 132px; width: calc((100% - 48px) / 3); animation: move-card 9s var(--ease) infinite; z-index: 2; box-shadow: 0 12px 26px -8px rgba(30, 27, 75, .35); }
@keyframes move-card { 0%, 15% { transform: translateX(0); } 35%, 55% { transform: translateX(calc(100% + 10px)); } 75%, 100% { transform: translateX(calc(200% + 20px)); } }
.kanban .toast { position: absolute; right: 12px; bottom: -18px; padding: 10px 14px; border-radius: 12px; background: #1e1b4b; color: #fff; font-size: 13px; animation: toast 9s var(--ease) infinite; }
@keyframes toast { 0%, 74% { opacity: 0; transform: translateY(10px); } 80%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* editor timeline (motion) */
.editor { position: relative; z-index: 1; width: min(620px, 100%); margin: 40px auto 0; border-radius: 16px; overflow: hidden; background: #141416; box-shadow: inset 0 0 0 1px #2a2a2e, 0 40px 90px -30px rgba(191, 90, 242, .5); }
.editor .view { position: relative; height: 200px; background: #0a0a0b; overflow: hidden; }
.editor .view i { position: absolute; border-radius: 50%; }
.editor .s1 { width: 90px; height: 90px; background: #ff375f; left: 12%; top: 30%; animation: s1 4s var(--ease) infinite; }
.editor .s2 { width: 60px; height: 60px; background: #64d2ff; right: 16%; top: 20%; border-radius: 16px !important; animation: s2 4s var(--ease) infinite; }
.editor .s3 { width: 130px; height: 130px; background: #ff9f0a; left: 40%; bottom: -40px; mix-blend-mode: screen; animation: s3 4s var(--ease) infinite; }
.editor .word { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 800; letter-spacing: -0.04em; color: #fff; animation: word 4s var(--ease) infinite; }
@keyframes s1 { 0% { transform: scale(0); } 25% { transform: scale(1.15); } 35%, 80% { transform: scale(1); } 100% { transform: translateX(260px) scale(0); } }
@keyframes s2 { 0%, 20% { transform: translateY(-120px) rotate(0); } 45%, 85% { transform: translateY(0) rotate(180deg); } 100% { transform: translateY(160px) rotate(270deg); } }
@keyframes s3 { 0%, 30% { transform: translateY(120px); } 55%, 90% { transform: translateY(0); } 100% { transform: translateY(140px); } }
@keyframes word { 0%, 40% { opacity: 0; transform: scale(1.6); letter-spacing: .3em; } 55%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.editor .tracks { position: relative; display: grid; gap: 6px; padding: 12px 14px 14px 70px; }
.editor .tracks p { position: relative; margin: 0; height: 16px; }
.editor .tracks p::before { content: attr(data-l); position: absolute; left: -58px; top: 0; font-size: 11px; color: #8e8e93; }
.editor .tracks p b { position: absolute; top: 0; height: 100%; border-radius: 5px; background: var(--k); left: var(--a); width: var(--w); }
.editor .head { position: absolute; top: 6px; bottom: 6px; left: 70px; width: 2px; background: #fff; animation: head 4s linear infinite; }
.editor .head::before { content: ""; position: absolute; top: -4px; left: -5px; border: 6px solid transparent; border-top-color: #fff; }
@keyframes head { from { transform: translateX(0); } to { transform: translateX(calc(min(620px, 100vw - 44px) - 90px)); } }

/* ---------------------------------------------------------------- unique sections */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: center; }
.stat-row li { list-style: none; padding: 30px 18px; border-radius: 24px; background: var(--bg-2); }
.stat-row b { display: block; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.04em; line-height: 1; background: linear-gradient(90deg, var(--purple), var(--pink), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-row span { display: block; margin-top: 8px; color: var(--muted); }
.stat-row { padding: 0; }
.devices { display: flex; justify-content: center; align-items: flex-end; gap: 22px; margin-top: 40px; flex-wrap: wrap; }
.dev { border-radius: 16px; background: #1d1d1f; padding: 8px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); }
.dev .scr { border-radius: 10px; background: #fff; height: 100%; display: grid; gap: 6px; padding: 8px; align-content: start; overflow: hidden; }
.dev .scr b { height: 40%; border-radius: 8px; background: linear-gradient(120deg, #8e2de2, #ff375f, #ff9f0a); background-size: 200%; animation: shine 6s linear infinite; }
.dev .scr span { height: 7px; border-radius: 4px; background: #e1e1e6; } .dev .scr span + span { width: 70%; }
.dev.phone-s { width: 110px; height: 220px; border-radius: 24px; } .dev.phone-s .scr { border-radius: 18px; }
.dev.tab { width: 210px; height: 280px; } .dev.lap { width: 380px; height: 240px; border-radius: 14px 14px 4px 4px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; margin-top: 40px; }
.vs > div { padding: 30px 28px; border-radius: 24px; }
.vs .before { background: var(--bg-2); } .vs .after { background: linear-gradient(160deg, #4338ca, #0ea5e9); color: #fff; }
.vs h3 { font-size: 24px; margin: 0 0 14px; } .vs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vs .before li { padding-left: 26px; position: relative; color: var(--muted); } .vs .before li::before { content: "✗"; position: absolute; left: 0; color: var(--pink); font-weight: 700; }
.vs .after li { padding-left: 26px; position: relative; } .vs .after li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
.vs .arrow-x { display: grid; place-items: center; font-size: 40px; color: var(--muted); }
.frames { display: flex; justify-content: center; align-items: flex-end; gap: 22px; margin-top: 40px; flex-wrap: wrap; }
.frame { position: relative; overflow: hidden; border-radius: 16px; background: #0a0a0b; display: grid; place-items: end start; padding: 12px; color: #fff; font-weight: 700; }
.frame::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 0deg, #ff375f, #ff9f0a, #64d2ff, #bf5af2, #ff375f); filter: blur(30px); opacity: .75; animation: spin 10s linear infinite; }
.frame span { position: relative; } .frame small { position: relative; display: block; font-weight: 500; opacity: .8; }
.frame.v { width: 150px; height: 266px; } .frame.sq { width: 220px; height: 220px; } .frame.w { width: 360px; height: 203px; }
.frame.sq::before { animation-direction: reverse; } .frame.w::before { animation-duration: 14s; }
.risk { display: grid; gap: 14px; margin-top: 40px; }
.risk li { list-style: none; display: grid; grid-template-columns: 110px 1fr; gap: 6px 18px; padding: 22px 24px; border-radius: 20px; background: var(--bg-2); align-items: start; }
.risk .day { grid-row: span 2; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--orange), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.risk b { font-size: 19px; } .risk span { color: var(--muted); }
.risk { padding: 0; }
.uptime { display: grid; grid-template-columns: repeat(60, 1fr); gap: 3px; margin: 36px auto 0; max-width: 820px; height: 44px; }
.uptime i { border-radius: 3px; background: var(--green); opacity: .85; } .uptime i.w { background: var(--orange); }
.uptime-cap { display: flex; justify-content: space-between; max-width: 820px; margin: 10px auto 0; color: var(--muted); font-size: 14px; }
.report { max-width: 860px; margin: 40px auto 0; border-radius: 24px; background: var(--bg-2); overflow: hidden; }
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; background: linear-gradient(90deg, #1d2a6b, #0b0f2e); color: #fff; flex-wrap: wrap; }
.report-head b { font-size: 20px; } .report-head .sc { font-size: 15px; } .report-head .sc em { font-style: normal; font-weight: 800; font-size: 26px; color: #ffd60a; }
.report ul { list-style: none; margin: 0; padding: 8px 0; }
.report li { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 14px; padding: 14px 26px; border-top: 1px solid var(--line); align-items: center; }
.report li:first-child { border-top: 0; }
.sev { justify-self: start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 980px; color: #fff; }
.sev.h { background: #ff375f; } .sev.m { background: #ff9f0a; } .sev.l { background: #30d158; }
.report li span:last-child { color: var(--muted); }
.gets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.gets article { padding: 32px 26px; border-radius: 24px; color: #fff; background: linear-gradient(150deg, var(--a), var(--b)); }
.gets h3 { font-size: 26px; margin: 10px 0 8px; letter-spacing: -0.02em; } .gets p { margin: 0; opacity: .92; line-height: 1.45; }
.gets .ico { font-size: 34px; }
@media (max-width: 900px) { .stat-row, .gets { grid-template-columns: 1fr; } .vs { grid-template-columns: 1fr; } .vs .arrow-x { rotate: 90deg; } .report li { grid-template-columns: 1fr; } .risk li { grid-template-columns: 1fr; } .risk .day { grid-row: auto; } .dev.lap { width: 300px; height: 190px; } }

/* ---------------------------------------------------------------- portfolio page */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.filters button { min-height: 44px; padding: 0 20px; border-radius: 980px; border: 0; font: inherit; font-weight: 600; cursor: pointer; background: var(--bg-2); color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 36px; }
.pf-grid .project { width: auto; }

/* ---------------------------------------------------------------- home tiles: hook headlines */
.tile .kicker { margin: 0 0 8px; font-size: 15px; font-weight: 600; letter-spacing: .01em; opacity: .75; }
.tile .hook { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; margin: 0; }
.mini-notifs { position: relative; z-index: 1; display: grid; gap: 8px; width: min(340px, 100%); margin: 36px auto 0; text-align: left; }
.mini-notifs .notif { background: rgba(255,255,255,.75); color: #10372d; box-shadow: 0 10px 30px -14px rgba(0, 60, 40, .35); }
.leak { position: relative; z-index: 1; margin: 30px auto 0; font-size: clamp(54px, 7vw, 80px); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(90deg, #ff6b6b, #ffd60a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.leak + small { position: relative; z-index: 1; display: block; opacity: .7; font-size: 14px; margin-top: 6px; }
.t-ws.tile-xl .ctas .pill { background: #fff; color: #c2410c; }
.t-ws.tile-xl .more-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.t-ws.tile-xl { background: radial-gradient(120% 90% at 50% 0%, #ffb340 0%, #ff6b3d 45%, #ff375f 80%, #d6246e 100%); color: #fff; }
.ws-formats { position: relative; z-index: 1; list-style: none; padding: 0; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ws-formats li { padding: 10px 18px; border-radius: 980px; background: rgba(255,255,255,.18); font-weight: 600; }
.ws-formats span { opacity: .85; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .kanban .mover, .kanban .toast, .editor *, .frame::before, .dev .scr b { animation: none !important; } .kanban .toast { opacity: 1; } .editor .word { opacity: 1; }
}
.t-pf { background: radial-gradient(80% 90% at 15% 0%, #ffe1f0 0%, transparent 60%), radial-gradient(80% 90% at 85% 10%, #dfe9ff 0%, transparent 60%), var(--bg-2); color: var(--text); padding-bottom: 50px; }
.t-pf .product { background: linear-gradient(90deg, var(--purple), var(--pink), var(--orange), var(--purple)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 8s linear infinite; }
:root[data-theme="dark"] .t-pf { background: radial-gradient(80% 90% at 15% 0%, #3a1030 0%, transparent 60%), radial-gradient(80% 90% at 85% 10%, #10204a 0%, transparent 60%), #0b0b0d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-pf { background: radial-gradient(80% 90% at 15% 0%, #3a1030 0%, transparent 60%), radial-gradient(80% 90% at 85% 10%, #10204a 0%, transparent 60%), #0b0b0d; } }
.pg-portfolio .features-section { padding-top: 30px; }
.chat .it:not(.in), .phone .it:not(.in), .term .it:not(.in) { display: none; }
.chat .it.in, .phone .it.in, .term .it.in { animation: pop .45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.chat { min-height: 420px; } .chat .typing { order: 99; }
.t-audit .more-link, .t-motion .more-link { color: #6cb4ff; }
/* each service page gets its own band colour */
.pg-workshopy .band { background: radial-gradient(120% 120% at 0% 0%, #7a2a00 0%, #3d0f1f 55%, #12050a 100%); }
.pg-weby .band { background: radial-gradient(120% 120% at 0% 0%, #4a0f6b 0%, #2a0a2e 55%, #0d050f 100%); }
.pg-systemy .band { background: radial-gradient(120% 120% at 0% 0%, #1e1b6b 0%, #0c1a3d 55%, #050816 100%); }
.pg-motion .band { background: radial-gradient(120% 120% at 0% 0%, #5a0f3a 0%, #1a0b2e 55%, #050505 100%); }
.pg-sprava .band { background: radial-gradient(120% 120% at 0% 0%, #0b5a4a 0%, #06303a 55%, #021014 100%); }

/* ================================================================ v3: flush tiles, light by default */
.tile-xl, .band, .about { margin: 0; border-radius: 0; }
.grid2 { margin: 0; gap: 0; }
.grid2 .tile { border-radius: 0; }
/* the scroll motion now moves the content inside the tiles – the tiles themselves stay edge to edge */
.js .tile-xl, .js .grid2 .tile, .js .about { transform: none; border-radius: 0; will-change: auto; }
.js .tile-xl > *, .js .grid2 .tile > *, .js .about .wrap { transform: translateY(calc((1 - var(--p, 1)) * 50px)); }
@media (max-width: 900px) { .tile-xl, .grid2, .about { margin-left: 0; margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .js .tile-xl > *, .js .grid2 .tile > *, .js .about .wrap { transform: none; opacity: 1; } }

/* JARVIS – light */
.t-jarvis { background: radial-gradient(70% 55% at 50% 100%, rgba(0, 200, 255, .22), rgba(139, 92, 255, .14) 50%, transparent 78%), linear-gradient(180deg, #ffffff, #f2f5fb); color: #0b1220; }
.t-jarvis::after { opacity: .45; }
.t-jarvis .more-link { color: #0066cc; }
.t-jarvis .product { background-image: linear-gradient(90deg, #0891b2, #2563eb, #7c3aed, #db2777, #0891b2); filter: none; }
.t-jarvis .chips li { background: #fff; color: #0b1220; box-shadow: 0 6px 18px -10px rgba(11, 18, 32, .3); }
:root[data-theme="dark"] .t-jarvis { background: #000; color: #f5f5f7; }
:root[data-theme="dark"] .t-jarvis::after { opacity: 1; }
:root[data-theme="dark"] .t-jarvis .more-link { color: #2997ff; }
:root[data-theme="dark"] .t-jarvis .product { background-image: linear-gradient(90deg, #00f0ff, #36a3ff, #8b5cff, #ff4fd8, #00f0ff); }
:root[data-theme="dark"] .t-jarvis .chips li { background: rgba(255,255,255,.08); color: #f5f5f7; box-shadow: none; }

/* security check – light: warm "alert" palette */
.t-audit { background: radial-gradient(90% 70% at 50% 0%, #ffe0e6 0%, transparent 70%), linear-gradient(160deg, #fff5f5 0%, #fff0e6 100%); color: #3b0a14; }
.t-audit .product { background: linear-gradient(90deg, #e11d48, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-audit .more-link { color: #c2410c; }
.t-audit .radar { background: radial-gradient(circle, #fff 0%, #ffe4e6 100%); box-shadow: 0 30px 60px -30px rgba(225, 29, 72, .45); }
.t-audit .radar i { border-color: rgba(225, 29, 72, .25); }
.t-audit .radar b { background: conic-gradient(from 0deg, rgba(249, 115, 22, .55), transparent 25%); }
:root[data-theme="dark"] .t-audit { background: radial-gradient(120% 90% at 50% 0%, #1d2a6b 0%, #0b0f2e 60%, #05060f 100%); color: #f5f5f7; }
:root[data-theme="dark"] .t-audit .product { background-image: linear-gradient(90deg, #64d2ff, #5e5ce6); }
:root[data-theme="dark"] .t-audit .more-link { color: #6cb4ff; }
:root[data-theme="dark"] .t-audit .radar { background: none; box-shadow: none; }
:root[data-theme="dark"] .t-audit .radar i { border-color: rgba(100, 210, 255, .3); }
:root[data-theme="dark"] .t-audit .radar b { background: conic-gradient(from 0deg, rgba(100, 210, 255, .55), transparent 25%); }

/* motion – light */
.t-motion { background: linear-gradient(160deg, #fff7ed 0%, #fdf2f8 55%, #f5f3ff 100%); color: #1d1d1f; }
.t-motion .more-link { color: #0066cc; }
.t-motion .blobs i { mix-blend-mode: multiply; opacity: .85; }
:root[data-theme="dark"] .t-motion { background: #0a0a0a; color: #f5f5f7; }
:root[data-theme="dark"] .t-motion .more-link { color: #6cb4ff; }
:root[data-theme="dark"] .t-motion .blobs i { mix-blend-mode: screen; opacity: 1; }

/* bands – light pastel per page, dark stays as before */
.band, .pg-workshopy .band, .pg-weby .band, .pg-systemy .band, .pg-motion .band, .pg-sprava .band { color: var(--text); background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%); }
.pg-workshopy .band { background: linear-gradient(135deg, #fff1e6 0%, #ffe4ec 100%); }
.pg-weby .band { background: linear-gradient(135deg, #f6e8ff 0%, #ffe3ee 100%); }
.pg-systemy .band { background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%); }
.pg-motion .band { background: linear-gradient(135deg, #fff7ed 0%, #f5f3ff 100%); }
.pg-sprava .band { background: linear-gradient(135deg, #dcfff3 0%, #d6f6ff 100%); }
.band .section-sub { color: var(--muted); }
.checks-lg li { background: rgba(255,255,255,.75); box-shadow: 0 8px 24px -16px rgba(0,0,0,.25); }
:root[data-theme="dark"] .band { color: #f5f5f7; background: radial-gradient(120% 120% at 0% 0%, #13235c 0%, #0a0f2b 55%, #05060f 100%); }
:root[data-theme="dark"] .pg-workshopy .band { background: radial-gradient(120% 120% at 0% 0%, #7a2a00 0%, #3d0f1f 55%, #12050a 100%); }
:root[data-theme="dark"] .pg-weby .band { background: radial-gradient(120% 120% at 0% 0%, #4a0f6b 0%, #2a0a2e 55%, #0d050f 100%); }
:root[data-theme="dark"] .pg-systemy .band { background: radial-gradient(120% 120% at 0% 0%, #1e1b6b 0%, #0c1a3d 55%, #050816 100%); }
:root[data-theme="dark"] .pg-motion .band { background: radial-gradient(120% 120% at 0% 0%, #5a0f3a 0%, #1a0b2e 55%, #050505 100%); }
:root[data-theme="dark"] .pg-sprava .band { background: radial-gradient(120% 120% at 0% 0%, #0b5a4a 0%, #06303a 55%, #021014 100%); }
:root[data-theme="dark"] .band .section-sub { color: #a1a1a6; }
:root[data-theme="dark"] .checks-lg li { background: rgba(255,255,255,.06); box-shadow: none; }

/* about page */
.t-about { background: radial-gradient(60% 60% at 80% 20%, #ffe1f0 0%, transparent 70%), radial-gradient(60% 60% at 20% 80%, #dfe9ff 0%, transparent 70%), #fbfbfd; color: var(--text); }
.t-about .product { background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink), var(--blue)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 8s linear infinite; }
:root[data-theme="dark"] .t-about { background: radial-gradient(60% 60% at 80% 20%, #3a1030 0%, transparent 70%), radial-gradient(60% 60% at 20% 80%, #10204a 0%, transparent 70%), #050507; }
.me-photo { position: relative; z-index: 1; width: min(340px, 78vw); margin: 44px auto 0; border-radius: 32px; padding: 5px;
  background: linear-gradient(135deg, var(--blue), var(--purple), var(--pink), var(--orange)); background-size: 200% 200%; animation: shine 8s linear infinite;
  box-shadow: 0 40px 80px -30px rgba(191, 90, 242, .45); }
.me-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%; border-radius: 28px; display: block; }
.story { display: grid; grid-template-columns: 1fr 1.3fr; gap: 50px; align-items: start; }
.story p { font-size: 19px; line-height: 1.55; margin: 0 0 18px; color: var(--muted); } .story p:first-child { color: var(--text); }
.do-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.do-card { position: relative; display: block; padding: 30px 60px 28px 28px; border-radius: 24px; background: var(--bg-2); color: var(--text); text-decoration: none; overflow: hidden; transition: transform .3s var(--ease); }
.do-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, var(--pink))); }
.do-card h3 { font-size: 26px; margin: 0 0 8px; color: var(--c); } .do-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.do-card .go { position: absolute; right: 24px; top: 50%; translate: 0 -50%; font-size: 30px; color: var(--c); transition: translate .3s var(--ease); }
.do-card:hover { transform: translateY(-3px); } .do-card:hover .go { translate: 6px -50%; }
@media (max-width: 900px) { .story, .do-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .me-photo, .me-photo img { animation: none; } }

/* service name on the home tiles: a bold coloured label instead of small grey text */
.tile .kicker { display: inline-block; margin: 0 0 14px; padding: 7px 16px; border-radius: 980px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  opacity: 1; color: #fff; background: linear-gradient(90deg, var(--k1), var(--k2)); box-shadow: 0 10px 24px -12px var(--k1); }
.t-web { --k1: #8e2de2; --k2: #ff375f; }
.t-sss { --k1: #2f6bff; --k2: #7c5cff; }
.t-care { --k1: #0f9f78; --k2: #0aa2c0; }
.t-audit { --k1: #e11d48; --k2: #f97316; }
.t-sys { --k1: #4338ca; --k2: #0ea5e9; }
.t-motion { --k1: #ff375f; --k2: #bf5af2; }
:root[data-theme="dark"] .t-audit { --k1: #3b82f6; --k2: #5e5ce6; }